diff --git a/package.json b/package.json
index a9974ec5ec0..2474500daa0 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "release": "node ./scripts/release.js",
     "push-git": "node ./scripts/push-git.js",
     "sonarqube": "sonar-scanner",
-    "visual-regression-ci": "nx run core:test.e2e.list",
+    "visual-regression-ci": "npx playwright install chromium && nx run core:test.e2e",
     "visual-regression": "docker run --rm --network host -v $(pwd):/work/ -w /work mcr.microsoft.com/playwright:v1.24.0-focal /bin/bash -c \"npm run visual-regression-ci\""
   },
   "private": true,
diff --git a/packages/angular-test-app/src/preview-examples/button-group.ts b/packages/angular-test-app/src/preview-examples/button-group.ts
index 7fa910e7606..c6f20a04b94 100644
--- a/packages/angular-test-app/src/preview-examples/button-group.ts
+++ b/packages/angular-test-app/src/preview-examples/button-group.ts
@@ -7,9 +7,9 @@ import { Component } from '@angular/core';
   selector: 'app-button-group',
   template: `
     <div class="btn-group">
-      <cw-button variant="Primary" outline> Left </cw-button>
-      <cw-button variant="Primary">Middle</cw-button>
-      <cw-button variant="Primary" outline> Right </cw-button>
+      <ix-button variant="Primary" outline> Left </ix-button>
+      <ix-button variant="Primary">Middle</ix-button>
+      <ix-button variant="Primary" outline> Right </ix-button>
     </div>
   `,
 })
diff --git a/packages/angular-test-app/src/preview-examples/buttons.ts b/packages/angular-test-app/src/preview-examples/buttons.ts
index dcd6f14f99c..87d2d411f75 100644
--- a/packages/angular-test-app/src/preview-examples/buttons.ts
+++ b/packages/angular-test-app/src/preview-examples/buttons.ts
@@ -6,10 +6,10 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-buttons',
   template: `
-    <cw-button class="m-1" variant="primary">Webcomponents button</cw-button>
-    <cw-button class="m-1" variant="secondary">Webcomponents button</cw-button>
-    <cw-button class="m-1" outline>Webcomponents button</cw-button>
-    <cw-button class="m-1" invisible>Webcomponents button</cw-button>
+    <ix-button class="m-1" variant="primary">Webcomponents button</ix-button>
+    <ix-button class="m-1" variant="secondary">Webcomponents button</ix-button>
+    <ix-button class="m-1" outline>Webcomponents button</ix-button>
+    <ix-button class="m-1" invisible>Webcomponents button</ix-button>
   `,
 })
 export class Buttons {}
diff --git a/packages/angular-test-app/src/styles.scss b/packages/angular-test-app/src/styles.scss
index f89d2af2d9d..8bfae4ec834 100644
--- a/packages/angular-test-app/src/styles.scss
+++ b/packages/angular-test-app/src/styles.scss
@@ -5,5 +5,5 @@
 
 @import './../../../node_modules/@siemens/ix-aggrid/dist/ix-aggrid/ix-aggrid.css';
 
-@import './../../../node_modules/@siemens/ix/dist/core-ui-core/core-ui-core.css';
+@import './../../../node_modules/@siemens/ix/dist/siemens-ix/siemens-ix.css';
 @import './../../../node_modules/@siemens/core-ui-icons/dist/css/core-ui-webfont.css';
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
index e090c8c1bd0..416b76507f6 100644
--- a/packages/angular/src/components.ts
+++ b/packages/angular/src/components.ts
@@ -8,19 +8,19 @@ import { Components } from '@siemens/ix';
 
 
 
-export declare interface CwAnimatedTab extends Components.CwAnimatedTab {}
+export declare interface IxAnimatedTab extends Components.IxAnimatedTab {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['count', 'icon']
 })
 @Component({
-  selector: 'cw-animated-tab',
+  selector: 'ix-animated-tab',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['count', 'icon']
 })
-export class CwAnimatedTab {
+export class IxAnimatedTab {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -29,7 +29,7 @@ export class CwAnimatedTab {
 }
 
 
-export declare interface CwAnimatedTabs extends Components.CwAnimatedTabs {
+export declare interface IxAnimatedTabs extends Components.IxAnimatedTabs {
   /**
    * Tab navigated 
    */
@@ -42,12 +42,12 @@ export declare interface CwAnimatedTabs extends Components.CwAnimatedTabs {
   inputs: ['disableAnimations', 'selectedIndex', 'tabPlacement']
 })
 @Component({
-  selector: 'cw-animated-tabs',
+  selector: 'ix-animated-tabs',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['disableAnimations', 'selectedIndex', 'tabPlacement']
 })
-export class CwAnimatedTabs {
+export class IxAnimatedTabs {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -57,19 +57,19 @@ export class CwAnimatedTabs {
 }
 
 
-export declare interface CwApplicationHeader extends Components.CwApplicationHeader {}
+export declare interface IxApplicationHeader extends Components.IxApplicationHeader {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['name']
 })
 @Component({
-  selector: 'cw-application-header',
+  selector: 'ix-application-header',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['name']
 })
-export class CwApplicationHeader {
+export class IxApplicationHeader {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -78,19 +78,19 @@ export class CwApplicationHeader {
 }
 
 
-export declare interface CwBasicNavigation extends Components.CwBasicNavigation {}
+export declare interface IxBasicNavigation extends Components.IxBasicNavigation {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['applicationName', 'hideHeader']
 })
 @Component({
-  selector: 'cw-basic-navigation',
+  selector: 'ix-basic-navigation',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['applicationName', 'hideHeader']
 })
-export class CwBasicNavigation {
+export class IxBasicNavigation {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -99,7 +99,7 @@ export class CwBasicNavigation {
 }
 
 
-export declare interface CwBlind extends Components.CwBlind {
+export declare interface IxBlind extends Components.IxBlind {
   /**
    * Collapsed state changed 
    */
@@ -112,12 +112,12 @@ export declare interface CwBlind extends Components.CwBlind {
   inputs: ['collapsed', 'label']
 })
 @Component({
-  selector: 'cw-blind',
+  selector: 'ix-blind',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['collapsed', 'label']
 })
-export class CwBlind {
+export class IxBlind {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -127,7 +127,7 @@ export class CwBlind {
 }
 
 
-export declare interface CwBreadcrumb extends Components.CwBreadcrumb {
+export declare interface IxBreadcrumb extends Components.IxBreadcrumb {
   /**
    * Crumb item clicked event 
    */
@@ -144,12 +144,12 @@ export declare interface CwBreadcrumb extends Components.CwBreadcrumb {
   inputs: ['ghost', 'nextItems', 'visibleItemCount']
 })
 @Component({
-  selector: 'cw-breadcrumb',
+  selector: 'ix-breadcrumb',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['ghost', 'nextItems', 'visibleItemCount']
 })
-export class CwBreadcrumb {
+export class IxBreadcrumb {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -159,19 +159,19 @@ export class CwBreadcrumb {
 }
 
 
-export declare interface CwBreadcrumbItem extends Components.CwBreadcrumbItem {}
+export declare interface IxBreadcrumbItem extends Components.IxBreadcrumbItem {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['icon', 'label']
 })
 @Component({
-  selector: 'cw-breadcrumb-item',
+  selector: 'ix-breadcrumb-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['icon', 'label']
 })
-export class CwBreadcrumbItem {
+export class IxBreadcrumbItem {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -180,19 +180,19 @@ export class CwBreadcrumbItem {
 }
 
 
-export declare interface CwButton extends Components.CwButton {}
+export declare interface IxButton extends Components.IxButton {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['disabled', 'ghost', 'invisible', 'outline', 'selected', 'variant']
 })
 @Component({
-  selector: 'cw-button',
+  selector: 'ix-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['disabled', 'ghost', 'invisible', 'outline', 'selected', 'variant']
 })
-export class CwButton {
+export class IxButton {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -202,7 +202,7 @@ export class CwButton {
 
 import type { InputState as ICwCategoryFilterInputState } from '@siemens/ix';
 import type { FilterState as ICwCategoryFilterFilterState } from '@siemens/ix';
-export declare interface CwCategoryFilter extends Components.CwCategoryFilter {
+export declare interface IxCategoryFilter extends Components.IxCategoryFilter {
   /**
    * Event dispatched whenever the text input changes. 
    */
@@ -219,12 +219,12 @@ export declare interface CwCategoryFilter extends Components.CwCategoryFilter {
   inputs: ['categories', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'initialState', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'repeatCategories', 'suggestions', 'tmpDisableScrollIntoView']
 })
 @Component({
-  selector: 'cw-category-filter',
+  selector: 'ix-category-filter',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['categories', 'filterState', 'hideIcon', 'i18nPlainText', 'icon', 'initialState', 'labelCategories', 'nonSelectableCategories', 'placeholder', 'repeatCategories', 'suggestions', 'tmpDisableScrollIntoView']
 })
-export class CwCategoryFilter {
+export class IxCategoryFilter {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -234,7 +234,7 @@ export class CwCategoryFilter {
 }
 
 
-export declare interface CwChip extends Components.CwChip {
+export declare interface IxChip extends Components.IxChip {
   /**
    * Fire event if close button is clicked 
    */
@@ -247,12 +247,12 @@ export declare interface CwChip extends Components.CwChip {
   inputs: ['active', 'background', 'closable', 'color', 'icon', 'outline', 'variant']
 })
 @Component({
-  selector: 'cw-chip',
+  selector: 'ix-chip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['active', 'background', 'closable', 'color', 'icon', 'outline', 'variant']
 })
-export class CwChip {
+export class IxChip {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -262,19 +262,19 @@ export class CwChip {
 }
 
 
-export declare interface CwCounterPill extends Components.CwCounterPill {}
+export declare interface IxCounterPill extends Components.IxCounterPill {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['alignLeft', 'background', 'color', 'outline', 'variant']
 })
 @Component({
-  selector: 'cw-counter-pill',
+  selector: 'ix-counter-pill',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['alignLeft', 'background', 'color', 'outline', 'variant']
 })
-export class CwCounterPill {
+export class IxCounterPill {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -283,7 +283,7 @@ export class CwCounterPill {
 }
 
 
-export declare interface CwDatePicker extends Components.CwDatePicker {
+export declare interface IxDatePicker extends Components.IxDatePicker {
   /**
    * Time change event 
    */
@@ -300,12 +300,12 @@ export declare interface CwDatePicker extends Components.CwDatePicker {
   inputs: ['corners', 'format', 'individual', 'range']
 })
 @Component({
-  selector: 'cw-date-picker',
+  selector: 'ix-date-picker',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['corners', 'format', 'individual', 'range']
 })
-export class CwDatePicker {
+export class IxDatePicker {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -315,19 +315,19 @@ export class CwDatePicker {
 }
 
 
-export declare interface CwDateTimeCard extends Components.CwDateTimeCard {}
+export declare interface IxDateTimeCard extends Components.IxDateTimeCard {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['corners', 'individual']
 })
 @Component({
-  selector: 'cw-date-time-card',
+  selector: 'ix-date-time-card',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['corners', 'individual']
 })
-export class CwDateTimeCard {
+export class IxDateTimeCard {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -336,7 +336,7 @@ export class CwDateTimeCard {
 }
 
 
-export declare interface CwDatetimePicker extends Components.CwDatetimePicker {
+export declare interface IxDatetimePicker extends Components.IxDatetimePicker {
   /**
    * Time event 
    */
@@ -349,12 +349,12 @@ export declare interface CwDatetimePicker extends Components.CwDatetimePicker {
   inputs: ['range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference']
 })
 @Component({
-  selector: 'cw-datetime-picker',
+  selector: 'ix-datetime-picker',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['range', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference']
 })
-export class CwDatetimePicker {
+export class IxDatetimePicker {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -364,7 +364,7 @@ export class CwDatetimePicker {
 }
 
 
-export declare interface CwDrawer extends Components.CwDrawer {
+export declare interface IxDrawer extends Components.IxDrawer {
   /**
    * Fire event after drawer is open 
    */
@@ -382,12 +382,12 @@ export declare interface CwDrawer extends Components.CwDrawer {
   methods: ['toggleDrawer']
 })
 @Component({
-  selector: 'cw-drawer',
+  selector: 'ix-drawer',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['closeOnClickOutside', 'fullHeight', 'maxWidth', 'minWidth', 'show', 'width']
 })
-export class CwDrawer {
+export class IxDrawer {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -397,7 +397,7 @@ export class CwDrawer {
 }
 
 
-export declare interface CwDropdown extends Components.CwDropdown {
+export declare interface IxDropdown extends Components.IxDropdown {
   /**
    * Fire event after visibility of dropdown has changed 
    */
@@ -411,12 +411,12 @@ export declare interface CwDropdown extends Components.CwDropdown {
   methods: ['updatePosition']
 })
 @Component({
-  selector: 'cw-dropdown',
+  selector: 'ix-dropdown',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['adjustDropdownWidthToReferenceWidth', 'adjustDropdownWidthToReferenceWith', 'anchor', 'closeBehavior', 'header', 'placement', 'positioningStrategy', 'show', 'trigger']
 })
-export class CwDropdown {
+export class IxDropdown {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -426,11 +426,11 @@ export class CwDropdown {
 }
 
 
-export declare interface CwDropdownItem extends Components.CwDropdownItem {
+export declare interface IxDropdownItem extends Components.IxDropdownItem {
   /**
    * Click on item 
    */
-  itemClick: EventEmitter<CustomEvent<HTMLCwDropdownItemElement>>;
+  itemClick: EventEmitter<CustomEvent<HTMLIxDropdownItemElement>>;
 
 }
 
@@ -440,12 +440,12 @@ export declare interface CwDropdownItem extends Components.CwDropdownItem {
   methods: ['emitItemClick']
 })
 @Component({
-  selector: 'cw-dropdown-item',
+  selector: 'ix-dropdown-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['checked', 'disabled', 'hover', 'icon', 'label']
 })
-export class CwDropdownItem {
+export class IxDropdownItem {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -455,19 +455,19 @@ export class CwDropdownItem {
 }
 
 
-export declare interface CwEventList extends Components.CwEventList {}
+export declare interface IxEventList extends Components.IxEventList {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['animated', 'chevron', 'compact', 'itemHeight']
 })
 @Component({
-  selector: 'cw-event-list',
+  selector: 'ix-event-list',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['animated', 'chevron', 'compact', 'itemHeight']
 })
-export class CwEventList {
+export class IxEventList {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -476,7 +476,7 @@ export class CwEventList {
 }
 
 
-export declare interface CwEventListItem extends Components.CwEventListItem {
+export declare interface IxEventListItem extends Components.IxEventListItem {
   /**
    * Event list item click 
    */
@@ -489,12 +489,12 @@ export declare interface CwEventListItem extends Components.CwEventListItem {
   inputs: ['chevron', 'color', 'disabled', 'opacity', 'selected']
 })
 @Component({
-  selector: 'cw-event-list-item',
+  selector: 'ix-event-list-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['chevron', 'color', 'disabled', 'opacity', 'selected']
 })
-export class CwEventListItem {
+export class IxEventListItem {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -504,7 +504,7 @@ export class CwEventListItem {
 }
 
 
-export declare interface CwExpandingSearch extends Components.CwExpandingSearch {
+export declare interface IxExpandingSearch extends Components.IxExpandingSearch {
   /**
    * Value changed 
    */
@@ -517,12 +517,12 @@ export declare interface CwExpandingSearch extends Components.CwExpandingSearch
   inputs: ['icon', 'placeholder', 'value']
 })
 @Component({
-  selector: 'cw-expanding-search',
+  selector: 'ix-expanding-search',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['icon', 'placeholder', 'value']
 })
-export class CwExpandingSearch {
+export class IxExpandingSearch {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -532,7 +532,7 @@ export class CwExpandingSearch {
 }
 
 
-export declare interface CwFilterChip extends Components.CwFilterChip {
+export declare interface IxFilterChip extends Components.IxFilterChip {
   /**
    * Close clicked 
    */
@@ -545,12 +545,12 @@ export declare interface CwFilterChip extends Components.CwFilterChip {
   inputs: ['disabled']
 })
 @Component({
-  selector: 'cw-filter-chip',
+  selector: 'ix-filter-chip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['disabled']
 })
-export class CwFilterChip {
+export class IxFilterChip {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -560,19 +560,19 @@ export class CwFilterChip {
 }
 
 
-export declare interface CwFlipTile extends Components.CwFlipTile {}
+export declare interface IxFlipTile extends Components.IxFlipTile {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['footer', 'state']
 })
 @Component({
-  selector: 'cw-flip-tile',
+  selector: 'ix-flip-tile',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['footer', 'state']
 })
-export class CwFlipTile {
+export class IxFlipTile {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -581,17 +581,17 @@ export class CwFlipTile {
 }
 
 
-export declare interface CwFlipTileContent extends Components.CwFlipTileContent {}
+export declare interface IxFlipTileContent extends Components.IxFlipTileContent {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined
 })
 @Component({
-  selector: 'cw-flip-tile-content',
+  selector: 'ix-flip-tile-content',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>'
 })
-export class CwFlipTileContent {
+export class IxFlipTileContent {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -600,7 +600,7 @@ export class CwFlipTileContent {
 }
 
 
-export declare interface CwGroup extends Components.CwGroup {
+export declare interface IxGroup extends Components.IxGroup {
   /**
    * Emits when whole group gets selected. 
    */
@@ -621,12 +621,12 @@ export declare interface CwGroup extends Components.CwGroup {
   inputs: ['collapsed', 'expandOnHeaderClick', 'header', 'index', 'selected', 'subHeader', 'suppressHeaderSelection']
 })
 @Component({
-  selector: 'cw-group',
+  selector: 'ix-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['collapsed', 'expandOnHeaderClick', 'header', 'index', 'selected', 'subHeader', 'suppressHeaderSelection']
 })
-export class CwGroup {
+export class IxGroup {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -636,19 +636,19 @@ export class CwGroup {
 }
 
 
-export declare interface CwGroupDropdownItem extends Components.CwGroupDropdownItem {}
+export declare interface IxGroupDropdownItem extends Components.IxGroupDropdownItem {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['icon', 'label']
 })
 @Component({
-  selector: 'cw-group-dropdown-item',
+  selector: 'ix-group-dropdown-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['icon', 'label']
 })
-export class CwGroupDropdownItem {
+export class IxGroupDropdownItem {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -657,11 +657,11 @@ export class CwGroupDropdownItem {
 }
 
 
-export declare interface CwGroupItem extends Components.CwGroupItem {
+export declare interface IxGroupItem extends Components.IxGroupItem {
   /**
    * Selection changed 
    */
-  selectedChanged: EventEmitter<CustomEvent<HTMLCwGroupItemElement>>;
+  selectedChanged: EventEmitter<CustomEvent<HTMLIxGroupItemElement>>;
 
 }
 
@@ -670,12 +670,12 @@ export declare interface CwGroupItem extends Components.CwGroupItem {
   inputs: ['focusable', 'icon', 'index', 'secondaryText', 'selected', 'suppressSelection', 'text']
 })
 @Component({
-  selector: 'cw-group-item',
+  selector: 'ix-group-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['focusable', 'icon', 'index', 'secondaryText', 'selected', 'suppressSelection', 'text']
 })
-export class CwGroupItem {
+export class IxGroupItem {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -685,19 +685,19 @@ export class CwGroupItem {
 }
 
 
-export declare interface CwIcon extends Components.CwIcon {}
+export declare interface IxIcon extends Components.IxIcon {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['color', 'name', 'size']
 })
 @Component({
-  selector: 'cw-icon',
+  selector: 'ix-icon',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['color', 'name', 'size']
 })
-export class CwIcon {
+export class IxIcon {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -706,19 +706,19 @@ export class CwIcon {
 }
 
 
-export declare interface CwIconButton extends Components.CwIconButton {}
+export declare interface IxIconButton extends Components.IxIconButton {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['color', 'disabled', 'ghost', 'icon', 'invisible', 'outline', 'oval', 'selected', 'size', 'variant']
 })
 @Component({
-  selector: 'cw-icon-button',
+  selector: 'ix-icon-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['color', 'disabled', 'ghost', 'icon', 'invisible', 'outline', 'oval', 'selected', 'size', 'variant']
 })
-export class CwIconButton {
+export class IxIconButton {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -727,17 +727,17 @@ export class CwIconButton {
 }
 
 
-export declare interface CwInputGroup extends Components.CwInputGroup {}
+export declare interface IxInputGroup extends Components.IxInputGroup {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined
 })
 @Component({
-  selector: 'cw-input-group',
+  selector: 'ix-input-group',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>'
 })
-export class CwInputGroup {
+export class IxInputGroup {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -746,7 +746,7 @@ export class CwInputGroup {
 }
 
 
-export declare interface CwMapNavigation extends Components.CwMapNavigation {
+export declare interface IxMapNavigation extends Components.IxMapNavigation {
   /**
    * Navigation toggled 
    */
@@ -764,12 +764,12 @@ export declare interface CwMapNavigation extends Components.CwMapNavigation {
   methods: ['openOverlay', 'closeOverlay']
 })
 @Component({
-  selector: 'cw-map-navigation',
+  selector: 'ix-map-navigation',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['appName', 'hideContextMenu', 'navTitle']
 })
-export class CwMapNavigation {
+export class IxMapNavigation {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -779,7 +779,7 @@ export class CwMapNavigation {
 }
 
 
-export declare interface CwMapNavigationOverlay extends Components.CwMapNavigationOverlay {
+export declare interface IxMapNavigationOverlay extends Components.IxMapNavigationOverlay {
   /**
    * Event closed 
    */
@@ -792,12 +792,12 @@ export declare interface CwMapNavigationOverlay extends Components.CwMapNavigati
   inputs: ['color', 'icon', 'name']
 })
 @Component({
-  selector: 'cw-map-navigation-overlay',
+  selector: 'ix-map-navigation-overlay',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['color', 'icon', 'name']
 })
-export class CwMapNavigationOverlay {
+export class IxMapNavigationOverlay {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -807,7 +807,7 @@ export class CwMapNavigationOverlay {
 }
 
 
-export declare interface CwMenu extends Components.CwMenu {
+export declare interface IxMenu extends Components.IxMenu {
   /**
    * Menu expanded 
    */
@@ -825,12 +825,12 @@ export declare interface CwMenu extends Components.CwMenu {
   methods: ['toggleMapExpand', 'toggleMenu', 'toggleSettings', 'toggleAbout']
 })
 @Component({
-  selector: 'cw-menu',
+  selector: 'ix-menu',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nMore', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'showAbout', 'showSettings']
 })
-export class CwMenu {
+export class IxMenu {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -840,7 +840,7 @@ export class CwMenu {
 }
 
 
-export declare interface CwMenuAbout extends Components.CwMenuAbout {
+export declare interface IxMenuAbout extends Components.IxMenuAbout {
   /**
    * About and Legal closed 
    */
@@ -853,12 +853,12 @@ export declare interface CwMenuAbout extends Components.CwMenuAbout {
   inputs: ['activeTabLabel', 'applicationDescription', 'applicationName', 'copyrightYears', 'i18nCookieNoticeLabel', 'i18nCorporateLabel', 'i18nDigitalId', 'i18nImprintLabel', 'i18nPrivacyNoticeLabel', 'i18nTermsOfUseLabel', 'imprintLanguage', 'label', 'show']
 })
 @Component({
-  selector: 'cw-menu-about',
+  selector: 'ix-menu-about',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['activeTabLabel', 'applicationDescription', 'applicationName', 'copyrightYears', 'i18nCookieNoticeLabel', 'i18nCorporateLabel', 'i18nDigitalId', 'i18nImprintLabel', 'i18nPrivacyNoticeLabel', 'i18nTermsOfUseLabel', 'imprintLanguage', 'label', 'show']
 })
-export class CwMenuAbout {
+export class IxMenuAbout {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -868,19 +868,19 @@ export class CwMenuAbout {
 }
 
 
-export declare interface CwMenuAboutItem extends Components.CwMenuAboutItem {}
+export declare interface IxMenuAboutItem extends Components.IxMenuAboutItem {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['label']
 })
 @Component({
-  selector: 'cw-menu-about-item',
+  selector: 'ix-menu-about-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['label']
 })
-export class CwMenuAboutItem {
+export class IxMenuAboutItem {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -889,7 +889,7 @@ export class CwMenuAboutItem {
 }
 
 
-export declare interface CwMenuAboutNews extends Components.CwMenuAboutNews {
+export declare interface IxMenuAboutNews extends Components.IxMenuAboutNews {
   /**
    * Show More button is pressed 
    */
@@ -906,12 +906,12 @@ export declare interface CwMenuAboutNews extends Components.CwMenuAboutNews {
   inputs: ['aboutItemLabel', 'expanded', 'i18nShowMore', 'label', 'offsetBottom', 'show']
 })
 @Component({
-  selector: 'cw-menu-about-news',
+  selector: 'ix-menu-about-news',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['aboutItemLabel', 'expanded', 'i18nShowMore', 'label', 'offsetBottom', 'show']
 })
-export class CwMenuAboutNews {
+export class IxMenuAboutNews {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -921,7 +921,7 @@ export class CwMenuAboutNews {
 }
 
 
-export declare interface CwMenuAvatar extends Components.CwMenuAvatar {
+export declare interface IxMenuAvatar extends Components.IxMenuAvatar {
   /**
    * Logout click 
    */
@@ -934,12 +934,12 @@ export declare interface CwMenuAvatar extends Components.CwMenuAvatar {
   inputs: ['bottom', 'i18nLogout', 'top']
 })
 @Component({
-  selector: 'cw-menu-avatar',
+  selector: 'ix-menu-avatar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['bottom', 'i18nLogout', 'top']
 })
-export class CwMenuAvatar {
+export class IxMenuAvatar {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -949,7 +949,7 @@ export class CwMenuAvatar {
 }
 
 
-export declare interface CwMenuAvatarItem extends Components.CwMenuAvatarItem {
+export declare interface IxMenuAvatarItem extends Components.IxMenuAvatarItem {
   /**
    * Avatar dropdown item clicked 
    */
@@ -962,12 +962,12 @@ export declare interface CwMenuAvatarItem extends Components.CwMenuAvatarItem {
   inputs: ['icon', 'label']
 })
 @Component({
-  selector: 'cw-menu-avatar-item',
+  selector: 'ix-menu-avatar-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['icon', 'label']
 })
-export class CwMenuAvatarItem {
+export class IxMenuAvatarItem {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -977,19 +977,19 @@ export class CwMenuAvatarItem {
 }
 
 
-export declare interface CwMenuItem extends Components.CwMenuItem {}
+export declare interface IxMenuItem extends Components.IxMenuItem {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['active', 'bottom', 'disabled', 'home', 'notifications', 'tabIcon']
 })
 @Component({
-  selector: 'cw-menu-item',
+  selector: 'ix-menu-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['active', 'bottom', 'disabled', 'home', 'notifications', 'tabIcon']
 })
-export class CwMenuItem {
+export class IxMenuItem {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -998,7 +998,7 @@ export class CwMenuItem {
 }
 
 
-export declare interface CwMenuSettings extends Components.CwMenuSettings {
+export declare interface IxMenuSettings extends Components.IxMenuSettings {
   /**
    * Popover closed 
    */
@@ -1011,12 +1011,12 @@ export declare interface CwMenuSettings extends Components.CwMenuSettings {
   inputs: ['activeTabLabel', 'label', 'show']
 })
 @Component({
-  selector: 'cw-menu-settings',
+  selector: 'ix-menu-settings',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['activeTabLabel', 'label', 'show']
 })
-export class CwMenuSettings {
+export class IxMenuSettings {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1026,19 +1026,19 @@ export class CwMenuSettings {
 }
 
 
-export declare interface CwMenuSettingsItem extends Components.CwMenuSettingsItem {}
+export declare interface IxMenuSettingsItem extends Components.IxMenuSettingsItem {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['label']
 })
 @Component({
-  selector: 'cw-menu-settings-item',
+  selector: 'ix-menu-settings-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['label']
 })
-export class CwMenuSettingsItem {
+export class IxMenuSettingsItem {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1047,7 +1047,7 @@ export class CwMenuSettingsItem {
 }
 
 
-export declare interface CwMessageBar extends Components.CwMessageBar {
+export declare interface IxMessageBar extends Components.IxMessageBar {
   /**
    * An event emitted when the close button is clicked 
    */
@@ -1060,12 +1060,12 @@ export declare interface CwMessageBar extends Components.CwMessageBar {
   inputs: ['dismissible', 'type']
 })
 @Component({
-  selector: 'cw-message-bar',
+  selector: 'ix-message-bar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['dismissible', 'type']
 })
-export class CwMessageBar {
+export class IxMessageBar {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1075,7 +1075,7 @@ export class CwMessageBar {
 }
 
 
-export declare interface CwModal extends Components.CwModal {
+export declare interface IxModal extends Components.IxModal {
   /**
    * Modal closed 
    */
@@ -1093,12 +1093,12 @@ export declare interface CwModal extends Components.CwModal {
   methods: ['dismiss', 'close']
 })
 @Component({
-  selector: 'cw-modal',
+  selector: 'ix-modal',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['animation', 'ariaDescribedBy', 'ariaLabelledBy', 'backdrop', 'backdropClass', 'beforeDismiss', 'centered', 'content', 'headerTitle', 'icon', 'iconColor', 'keyboard', 'modalDialogClass', 'scrollable', 'size', 'windowClass']
 })
-export class CwModal {
+export class IxModal {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1108,18 +1108,18 @@ export class CwModal {
 }
 
 
-export declare interface CwModalContainer extends Components.CwModalContainer {}
+export declare interface IxModalContainer extends Components.IxModalContainer {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   methods: ['showModal']
 })
 @Component({
-  selector: 'cw-modal-container',
+  selector: 'ix-modal-container',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>'
 })
-export class CwModalContainer {
+export class IxModalContainer {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1128,7 +1128,7 @@ export class CwModalContainer {
 }
 
 
-export declare interface CwModalExample extends Components.CwModalExample {
+export declare interface IxModalExample extends Components.IxModalExample {
   /**
    * Emit close modal 
    */
@@ -1140,11 +1140,11 @@ export declare interface CwModalExample extends Components.CwModalExample {
   defineCustomElementFn: undefined
 })
 @Component({
-  selector: 'cw-modal-example',
+  selector: 'ix-modal-example',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>'
 })
-export class CwModalExample {
+export class IxModalExample {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1154,19 +1154,19 @@ export class CwModalExample {
 }
 
 
-export declare interface CwPill extends Components.CwPill {}
+export declare interface IxPill extends Components.IxPill {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['alignLeft', 'background', 'color', 'icon', 'outline', 'variant']
 })
 @Component({
-  selector: 'cw-pill',
+  selector: 'ix-pill',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['alignLeft', 'background', 'color', 'icon', 'outline', 'variant']
 })
-export class CwPill {
+export class IxPill {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1175,7 +1175,7 @@ export class CwPill {
 }
 
 
-export declare interface CwSelect extends Components.CwSelect {
+export declare interface IxSelect extends Components.IxSelect {
   /**
    * Item selection changed 
    */
@@ -1192,12 +1192,12 @@ export declare interface CwSelect extends Components.CwSelect {
   inputs: ['allowClear', 'disabled', 'editable', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices']
 })
 @Component({
-  selector: 'cw-select',
+  selector: 'ix-select',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['allowClear', 'disabled', 'editable', 'i18nPlaceholder', 'i18nPlaceholderEditable', 'i18nSelectListHeader', 'mode', 'readonly', 'selectedIndices']
 })
-export class CwSelect {
+export class IxSelect {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1207,7 +1207,7 @@ export class CwSelect {
 }
 
 
-export declare interface CwSelectItem extends Components.CwSelectItem {
+export declare interface IxSelectItem extends Components.IxSelectItem {
   /**
    * Item clicked 
    */
@@ -1221,12 +1221,12 @@ export declare interface CwSelectItem extends Components.CwSelectItem {
   methods: ['onItemClick']
 })
 @Component({
-  selector: 'cw-select-item',
+  selector: 'ix-select-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['hover', 'label', 'selected', 'value']
 })
-export class CwSelectItem {
+export class IxSelectItem {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1236,19 +1236,19 @@ export class CwSelectItem {
 }
 
 
-export declare interface CwSpinner extends Components.CwSpinner {}
+export declare interface IxSpinner extends Components.IxSpinner {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['size', 'variant']
 })
 @Component({
-  selector: 'cw-spinner',
+  selector: 'ix-spinner',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['size', 'variant']
 })
-export class CwSpinner {
+export class IxSpinner {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1257,7 +1257,7 @@ export class CwSpinner {
 }
 
 
-export declare interface CwSplitButton extends Components.CwSplitButton {
+export declare interface IxSplitButton extends Components.IxSplitButton {
   /**
    * Button clicked 
    */
@@ -1270,12 +1270,12 @@ export declare interface CwSplitButton extends Components.CwSplitButton {
   inputs: ['disabled', 'ghost', 'icon', 'invisible', 'label', 'outline', 'placement', 'splitIcon', 'variant']
 })
 @Component({
-  selector: 'cw-split-button',
+  selector: 'ix-split-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['disabled', 'ghost', 'icon', 'invisible', 'label', 'outline', 'placement', 'splitIcon', 'variant']
 })
-export class CwSplitButton {
+export class IxSplitButton {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1285,7 +1285,7 @@ export class CwSplitButton {
 }
 
 
-export declare interface CwSplitButtonItem extends Components.CwSplitButtonItem {
+export declare interface IxSplitButtonItem extends Components.IxSplitButtonItem {
   /**
    * Dropdown item clicked 
    */
@@ -1298,12 +1298,12 @@ export declare interface CwSplitButtonItem extends Components.CwSplitButtonItem
   inputs: ['icon', 'label']
 })
 @Component({
-  selector: 'cw-split-button-item',
+  selector: 'ix-split-button-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['icon', 'label']
 })
-export class CwSplitButtonItem {
+export class IxSplitButtonItem {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1313,19 +1313,19 @@ export class CwSplitButtonItem {
 }
 
 
-export declare interface CwTabItem extends Components.CwTabItem {}
+export declare interface IxTabItem extends Components.IxTabItem {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['disabled', 'icon', 'layout', 'placement', 'selected', 'small']
 })
 @Component({
-  selector: 'cw-tab-item',
+  selector: 'ix-tab-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['disabled', 'icon', 'layout', 'placement', 'selected', 'small']
 })
-export class CwTabItem {
+export class IxTabItem {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1334,19 +1334,19 @@ export class CwTabItem {
 }
 
 
-export declare interface CwTabs extends Components.CwTabs {}
+export declare interface IxTabs extends Components.IxTabs {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['layout', 'placement', 'selected', 'small']
 })
 @Component({
-  selector: 'cw-tabs',
+  selector: 'ix-tabs',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['layout', 'placement', 'selected', 'small']
 })
-export class CwTabs {
+export class IxTabs {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1355,19 +1355,19 @@ export class CwTabs {
 }
 
 
-export declare interface CwTile extends Components.CwTile {}
+export declare interface IxTile extends Components.IxTile {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
   inputs: ['size']
 })
 @Component({
-  selector: 'cw-tile',
+  selector: 'ix-tile',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['size']
 })
-export class CwTile {
+export class IxTile {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1376,7 +1376,7 @@ export class CwTile {
 }
 
 
-export declare interface CwTimePicker extends Components.CwTimePicker {
+export declare interface IxTimePicker extends Components.IxTimePicker {
   /**
    * Time event 
    */
@@ -1393,12 +1393,12 @@ export declare interface CwTimePicker extends Components.CwTimePicker {
   inputs: ['corners', 'individual', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference']
 })
 @Component({
-  selector: 'cw-time-picker',
+  selector: 'ix-time-picker',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['corners', 'individual', 'showHour', 'showMinutes', 'showSeconds', 'showTimeReference']
 })
-export class CwTimePicker {
+export class IxTimePicker {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1408,7 +1408,7 @@ export class CwTimePicker {
 }
 
 
-export declare interface CwToast extends Components.CwToast {
+export declare interface IxToast extends Components.IxToast {
   /**
    * Toast closed 
    */
@@ -1421,12 +1421,12 @@ export declare interface CwToast extends Components.CwToast {
   inputs: ['autoClose', 'autoCloseDelay', 'icon', 'iconColor', 'toastTitle', 'type']
 })
 @Component({
-  selector: 'cw-toast',
+  selector: 'ix-toast',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['autoClose', 'autoCloseDelay', 'icon', 'iconColor', 'toastTitle', 'type']
 })
-export class CwToast {
+export class IxToast {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1436,7 +1436,7 @@ export class CwToast {
 }
 
 
-export declare interface CwToastContainer extends Components.CwToastContainer {}
+export declare interface IxToastContainer extends Components.IxToastContainer {}
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
@@ -1444,12 +1444,12 @@ export declare interface CwToastContainer extends Components.CwToastContainer {}
   methods: ['getEvents', 'showToast']
 })
 @Component({
-  selector: 'cw-toast-container',
+  selector: 'ix-toast-container',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['containerClass', 'containerId', 'position']
 })
-export class CwToastContainer {
+export class IxToastContainer {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1458,7 +1458,7 @@ export class CwToastContainer {
 }
 
 
-export declare interface CwToggle extends Components.CwToggle {
+export declare interface IxToggle extends Components.IxToggle {
   /**
    * An event will be dispatched each time the slide-toggle changes its value. 
    */
@@ -1471,12 +1471,12 @@ export declare interface CwToggle extends Components.CwToggle {
   inputs: ['checked', 'color', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn']
 })
 @Component({
-  selector: 'cw-toggle',
+  selector: 'ix-toggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['checked', 'color', 'disabled', 'hideText', 'indeterminate', 'textIndeterminate', 'textOff', 'textOn']
 })
-export class CwToggle {
+export class IxToggle {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1486,7 +1486,7 @@ export class CwToggle {
 }
 
 import type { TreeContext as ICwTreeTreeContext } from '@siemens/ix';
-export declare interface CwTree extends Components.CwTree {
+export declare interface IxTree extends Components.IxTree {
   /**
    * Context changed 
    */
@@ -1499,12 +1499,12 @@ export declare interface CwTree extends Components.CwTree {
   inputs: ['context', 'model', 'renderItem', 'root']
 })
 @Component({
-  selector: 'cw-tree',
+  selector: 'ix-tree',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['context', 'model', 'renderItem', 'root']
 })
-export class CwTree {
+export class IxTree {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1514,7 +1514,7 @@ export class CwTree {
 }
 
 
-export declare interface CwTreeItem extends Components.CwTreeItem {
+export declare interface IxTreeItem extends Components.IxTreeItem {
   /**
    * Expand/Collapsed toggled 
    */
@@ -1531,12 +1531,12 @@ export declare interface CwTreeItem extends Components.CwTreeItem {
   inputs: ['context', 'hasChildren', 'text']
 })
 @Component({
-  selector: 'cw-tree-item',
+  selector: 'ix-tree-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['context', 'hasChildren', 'text']
 })
-export class CwTreeItem {
+export class IxTreeItem {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
@@ -1546,7 +1546,7 @@ export class CwTreeItem {
 }
 
 
-export declare interface CwUpload extends Components.CwUpload {
+export declare interface IxUpload extends Components.IxUpload {
   /**
    * You get an array of Files after drop-action or browse action is finished 
    */
@@ -1560,12 +1560,12 @@ export declare interface CwUpload extends Components.CwUpload {
   methods: ['setFilesToUpload']
 })
 @Component({
-  selector: 'cw-upload',
+  selector: 'ix-upload',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   inputs: ['accept', 'disabled', 'i18nUploadFile', 'loadingText', 'multiple', 'selectFileText', 'state', 'uploadFailedText', 'uploadSuccessText']
 })
-export class CwUpload {
+export class IxUpload {
   protected el: HTMLElement;
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts
index 77366d3f75b..2e57220bcb7 100644
--- a/packages/angular/src/declare-components.ts
+++ b/packages/angular/src/declare-components.ts
@@ -2,64 +2,64 @@
 import * as d from './components';
 
 export const DIRECTIVES = [
-  d.CwAnimatedTab,
-  d.CwAnimatedTabs,
-  d.CwApplicationHeader,
-  d.CwBasicNavigation,
-  d.CwBlind,
-  d.CwBreadcrumb,
-  d.CwBreadcrumbItem,
-  d.CwButton,
-  d.CwCategoryFilter,
-  d.CwChip,
-  d.CwCounterPill,
-  d.CwDatePicker,
-  d.CwDateTimeCard,
-  d.CwDatetimePicker,
-  d.CwDrawer,
-  d.CwDropdown,
-  d.CwDropdownItem,
-  d.CwEventList,
-  d.CwEventListItem,
-  d.CwExpandingSearch,
-  d.CwFilterChip,
-  d.CwFlipTile,
-  d.CwFlipTileContent,
-  d.CwGroup,
-  d.CwGroupDropdownItem,
-  d.CwGroupItem,
-  d.CwIcon,
-  d.CwIconButton,
-  d.CwInputGroup,
-  d.CwMapNavigation,
-  d.CwMapNavigationOverlay,
-  d.CwMenu,
-  d.CwMenuAbout,
-  d.CwMenuAboutItem,
-  d.CwMenuAboutNews,
-  d.CwMenuAvatar,
-  d.CwMenuAvatarItem,
-  d.CwMenuItem,
-  d.CwMenuSettings,
-  d.CwMenuSettingsItem,
-  d.CwMessageBar,
-  d.CwModal,
-  d.CwModalContainer,
-  d.CwModalExample,
-  d.CwPill,
-  d.CwSelect,
-  d.CwSelectItem,
-  d.CwSpinner,
-  d.CwSplitButton,
-  d.CwSplitButtonItem,
-  d.CwTabItem,
-  d.CwTabs,
-  d.CwTile,
-  d.CwTimePicker,
-  d.CwToast,
-  d.CwToastContainer,
-  d.CwToggle,
-  d.CwTree,
-  d.CwTreeItem,
-  d.CwUpload
+  d.IxAnimatedTab,
+  d.IxAnimatedTabs,
+  d.IxApplicationHeader,
+  d.IxBasicNavigation,
+  d.IxBlind,
+  d.IxBreadcrumb,
+  d.IxBreadcrumbItem,
+  d.IxButton,
+  d.IxCategoryFilter,
+  d.IxChip,
+  d.IxCounterPill,
+  d.IxDatePicker,
+  d.IxDateTimeCard,
+  d.IxDatetimePicker,
+  d.IxDrawer,
+  d.IxDropdown,
+  d.IxDropdownItem,
+  d.IxEventList,
+  d.IxEventListItem,
+  d.IxExpandingSearch,
+  d.IxFilterChip,
+  d.IxFlipTile,
+  d.IxFlipTileContent,
+  d.IxGroup,
+  d.IxGroupDropdownItem,
+  d.IxGroupItem,
+  d.IxIcon,
+  d.IxIconButton,
+  d.IxInputGroup,
+  d.IxMapNavigation,
+  d.IxMapNavigationOverlay,
+  d.IxMenu,
+  d.IxMenuAbout,
+  d.IxMenuAboutItem,
+  d.IxMenuAboutNews,
+  d.IxMenuAvatar,
+  d.IxMenuAvatarItem,
+  d.IxMenuItem,
+  d.IxMenuSettings,
+  d.IxMenuSettingsItem,
+  d.IxMessageBar,
+  d.IxModal,
+  d.IxModalContainer,
+  d.IxModalExample,
+  d.IxPill,
+  d.IxSelect,
+  d.IxSelectItem,
+  d.IxSpinner,
+  d.IxSplitButton,
+  d.IxSplitButtonItem,
+  d.IxTabItem,
+  d.IxTabs,
+  d.IxTile,
+  d.IxTimePicker,
+  d.IxToast,
+  d.IxToastContainer,
+  d.IxToggle,
+  d.IxTree,
+  d.IxTreeItem,
+  d.IxUpload
 ];
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
index 6b728930d8b..cb94cd8a9f2 100644
--- a/packages/core/component-doc.json
+++ b/packages/core/component-doc.json
@@ -1,5 +1,5 @@
 {
-  "timestamp": "2022-08-17T04:58:40",
+  "timestamp": "2022-08-17T10:54:43",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.15.2",
@@ -9,7 +9,7 @@
     {
       "filePath": "./src/components/animated-tab/animated-tab.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-animated-tab",
+      "tag": "ix-animated-tab",
       "readme": "# animated-tab\n\n\n",
       "docs": "",
       "docsTags": [],
@@ -60,14 +60,14 @@
       "dependencies": [],
       "dependencyGraph": {
         "my-component": [
-          "cw-animated-tab"
+          "ix-animated-tab"
         ]
       }
     },
     {
       "filePath": "./src/components/animated-tabs/animated-tabs.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-animated-tabs",
+      "tag": "ix-animated-tabs",
       "readme": "# animated-tabs\n\n\n",
       "docs": "",
       "docsTags": [],
@@ -162,22 +162,22 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-icon"
+        "ix-icon"
       ],
       "dependencyGraph": {
-        "cw-animated-tabs": [
-          "cw-icon"
+        "ix-animated-tabs": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-animated-tabs"
+          "ix-animated-tabs"
         ]
       }
     },
     {
       "filePath": "./src/components/application-header/application-header.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-application-header",
-      "readme": "# cw-application-header\n\n\n",
+      "tag": "ix-application-header",
+      "readme": "# ix-application-header\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -206,20 +206,20 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-basic-navigation"
+        "ix-basic-navigation"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "cw-basic-navigation": [
-          "cw-application-header"
+        "ix-basic-navigation": [
+          "ix-application-header"
         ]
       }
     },
     {
       "filePath": "./src/components/basic-navigation/basic-navigation.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-basic-navigation",
-      "readme": "# cw-basic-navigation\n\n\n",
+      "tag": "ix-basic-navigation",
+      "readme": "# ix-basic-navigation\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -268,22 +268,22 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-application-header"
+        "ix-application-header"
       ],
       "dependencyGraph": {
-        "cw-basic-navigation": [
-          "cw-application-header"
+        "ix-basic-navigation": [
+          "ix-application-header"
         ],
         "my-component": [
-          "cw-basic-navigation"
+          "ix-basic-navigation"
         ]
       }
     },
     {
       "filePath": "./src/components/blind/blind.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-blind",
-      "readme": "# cw-blind\n\n\n",
+      "tag": "ix-blind",
+      "readme": "# ix-blind\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -344,14 +344,14 @@
       "dependencies": [],
       "dependencyGraph": {
         "my-component": [
-          "cw-blind"
+          "ix-blind"
         ]
       }
     },
     {
       "filePath": "./src/components/breadcrumb/breadcrumb.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-breadcrumb",
+      "tag": "ix-breadcrumb",
       "readme": "# cui-breadcrumb\n\n\n",
       "docs": "",
       "docsTags": [],
@@ -437,29 +437,29 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-icon",
-        "cw-dropdown",
-        "cw-dropdown-item"
+        "ix-icon",
+        "ix-dropdown",
+        "ix-dropdown-item"
       ],
       "dependencyGraph": {
-        "cw-breadcrumb": [
-          "cw-icon",
-          "cw-dropdown",
-          "cw-dropdown-item"
+        "ix-breadcrumb": [
+          "ix-icon",
+          "ix-dropdown",
+          "ix-dropdown-item"
         ],
-        "cw-dropdown-item": [
-          "cw-icon"
+        "ix-dropdown-item": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-breadcrumb"
+          "ix-breadcrumb"
         ]
       }
     },
     {
       "filePath": "./src/components/breadcrumb-item/breadcrumb-item.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-breadcrumb-item",
-      "readme": "# cw-breadcrumb-item\n\n\n",
+      "tag": "ix-breadcrumb-item",
+      "readme": "# ix-breadcrumb-item\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -509,15 +509,15 @@
       "dependencies": [],
       "dependencyGraph": {
         "my-component": [
-          "cw-breadcrumb-item"
+          "ix-breadcrumb-item"
         ]
       }
     },
     {
       "filePath": "./src/components/button/button.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-button",
-      "readme": "# cw-button\n\n\n",
+      "tag": "ix-button",
+      "readme": "# ix-button\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -643,36 +643,36 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-date-picker",
-        "cw-datetime-picker",
-        "cw-modal-example",
-        "cw-time-picker",
+        "ix-date-picker",
+        "ix-datetime-picker",
+        "ix-modal-example",
+        "ix-time-picker",
         "my-component"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "cw-date-picker": [
-          "cw-button"
+        "ix-date-picker": [
+          "ix-button"
         ],
-        "cw-datetime-picker": [
-          "cw-button"
+        "ix-datetime-picker": [
+          "ix-button"
         ],
-        "cw-modal-example": [
-          "cw-button"
+        "ix-modal-example": [
+          "ix-button"
         ],
-        "cw-time-picker": [
-          "cw-button"
+        "ix-time-picker": [
+          "ix-button"
         ],
         "my-component": [
-          "cw-button"
+          "ix-button"
         ]
       }
     },
     {
       "filePath": "./src/components/category-filter/category-filter.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-category-filter",
-      "readme": "# cw-category-filter\n\n\n",
+      "tag": "ix-category-filter",
+      "readme": "# ix-category-filter\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -917,23 +917,23 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "cw-icon",
-        "cw-filter-chip"
+        "ix-icon",
+        "ix-filter-chip"
       ],
       "dependencyGraph": {
-        "cw-category-filter": [
-          "cw-icon",
-          "cw-filter-chip"
+        "ix-category-filter": [
+          "ix-icon",
+          "ix-filter-chip"
         ],
-        "cw-filter-chip": [
-          "cw-icon"
+        "ix-filter-chip": [
+          "ix-icon"
         ]
       }
     },
     {
       "filePath": "./src/components/chip/chip.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-chip",
+      "tag": "ix-chip",
       "readme": "# cui-chip\n\n\n",
       "docs": "",
       "docsTags": [],
@@ -1105,22 +1105,22 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-icon"
+        "ix-icon"
       ],
       "dependencyGraph": {
-        "cw-chip": [
-          "cw-icon"
+        "ix-chip": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-chip"
+          "ix-chip"
         ]
       }
     },
     {
       "filePath": "./src/components/counter-pill/counter-pill.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-counter-pill",
-      "readme": "# cw-counter-pill\n\n\n",
+      "tag": "ix-counter-pill",
+      "readme": "# ix-counter-pill\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -1250,15 +1250,15 @@
       "dependencies": [],
       "dependencyGraph": {
         "my-component": [
-          "cw-counter-pill"
+          "ix-counter-pill"
         ]
       }
     },
     {
       "filePath": "./src/components/date-picker/date-picker.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-date-picker",
-      "readme": "# cw-date-picker\n\n\n",
+      "tag": "ix-date-picker",
+      "readme": "# ix-date-picker\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -1367,40 +1367,40 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-datetime-picker",
+        "ix-datetime-picker",
         "my-component"
       ],
       "dependencies": [
-        "cw-date-time-card",
-        "cw-icon-button",
-        "cw-button",
-        "cw-dropdown",
-        "cw-icon"
+        "ix-date-time-card",
+        "ix-icon-button",
+        "ix-button",
+        "ix-dropdown",
+        "ix-icon"
       ],
       "dependencyGraph": {
-        "cw-date-picker": [
-          "cw-date-time-card",
-          "cw-icon-button",
-          "cw-button",
-          "cw-dropdown",
-          "cw-icon"
+        "ix-date-picker": [
+          "ix-date-time-card",
+          "ix-icon-button",
+          "ix-button",
+          "ix-dropdown",
+          "ix-icon"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
-        "cw-datetime-picker": [
-          "cw-date-picker"
+        "ix-datetime-picker": [
+          "ix-date-picker"
         ],
         "my-component": [
-          "cw-date-picker"
+          "ix-date-picker"
         ]
       }
     },
     {
       "filePath": "./src/components/date-time-card/date-time-card.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-date-time-card",
-      "readme": "# cw-date-time-card\n\n\n",
+      "tag": "ix-date-time-card",
+      "readme": "# ix-date-time-card\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -1456,24 +1456,24 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-date-picker",
-        "cw-time-picker"
+        "ix-date-picker",
+        "ix-time-picker"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "cw-date-picker": [
-          "cw-date-time-card"
+        "ix-date-picker": [
+          "ix-date-time-card"
         ],
-        "cw-time-picker": [
-          "cw-date-time-card"
+        "ix-time-picker": [
+          "ix-date-time-card"
         ]
       }
     },
     {
       "filePath": "./src/components/datetime-picker/datetime-picker.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-datetime-picker",
-      "readme": "# cw-datetime-picker\n\n\n",
+      "tag": "ix-datetime-picker",
+      "readme": "# ix-datetime-picker\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -1582,38 +1582,38 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "cw-date-picker",
-        "cw-time-picker",
-        "cw-button"
+        "ix-date-picker",
+        "ix-time-picker",
+        "ix-button"
       ],
       "dependencyGraph": {
-        "cw-datetime-picker": [
-          "cw-date-picker",
-          "cw-time-picker",
-          "cw-button"
-        ],
-        "cw-date-picker": [
-          "cw-date-time-card",
-          "cw-icon-button",
-          "cw-button",
-          "cw-dropdown",
-          "cw-icon"
-        ],
-        "cw-icon-button": [
-          "cw-icon"
-        ],
-        "cw-time-picker": [
-          "cw-date-time-card",
-          "cw-icon-button",
-          "cw-button"
+        "ix-datetime-picker": [
+          "ix-date-picker",
+          "ix-time-picker",
+          "ix-button"
+        ],
+        "ix-date-picker": [
+          "ix-date-time-card",
+          "ix-icon-button",
+          "ix-button",
+          "ix-dropdown",
+          "ix-icon"
+        ],
+        "ix-icon-button": [
+          "ix-icon"
+        ],
+        "ix-time-picker": [
+          "ix-date-time-card",
+          "ix-icon-button",
+          "ix-button"
         ]
       }
     },
     {
       "filePath": "./src/components/drawer/drawer.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-drawer",
-      "readme": "# cw-drawer\n\n\n",
+      "tag": "ix-drawer",
+      "readme": "# ix-drawer\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -1769,22 +1769,22 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "cw-icon-button"
+        "ix-icon-button"
       ],
       "dependencyGraph": {
-        "cw-drawer": [
-          "cw-icon-button"
+        "ix-drawer": [
+          "ix-icon-button"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ]
       }
     },
     {
       "filePath": "./src/components/dropdown/dropdown.tsx",
       "encapsulation": "shadow",
-      "tag": "cw-dropdown",
-      "readme": "# cw-dropdown\n\n\n",
+      "tag": "ix-dropdown",
+      "readme": "# ix-dropdown\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -2062,48 +2062,48 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-breadcrumb",
-        "cw-date-picker",
-        "cw-group",
-        "cw-menu",
-        "cw-menu-avatar",
-        "cw-select",
-        "cw-split-button",
+        "ix-breadcrumb",
+        "ix-date-picker",
+        "ix-group",
+        "ix-menu",
+        "ix-menu-avatar",
+        "ix-select",
+        "ix-split-button",
         "my-component"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "cw-breadcrumb": [
-          "cw-dropdown"
+        "ix-breadcrumb": [
+          "ix-dropdown"
         ],
-        "cw-date-picker": [
-          "cw-dropdown"
+        "ix-date-picker": [
+          "ix-dropdown"
         ],
-        "cw-group": [
-          "cw-dropdown"
+        "ix-group": [
+          "ix-dropdown"
         ],
-        "cw-menu": [
-          "cw-dropdown"
+        "ix-menu": [
+          "ix-dropdown"
         ],
-        "cw-menu-avatar": [
-          "cw-dropdown"
+        "ix-menu-avatar": [
+          "ix-dropdown"
         ],
-        "cw-select": [
-          "cw-dropdown"
+        "ix-select": [
+          "ix-dropdown"
         ],
-        "cw-split-button": [
-          "cw-dropdown"
+        "ix-split-button": [
+          "ix-dropdown"
         ],
         "my-component": [
-          "cw-dropdown"
+          "ix-dropdown"
         ]
       }
     },
     {
       "filePath": "./src/components/dropdown-item/dropdown-item.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-dropdown-item",
-      "readme": "# cw-dropdown-item\n\n\n",
+      "tag": "ix-dropdown-item",
+      "readme": "# ix-dropdown-item\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -2208,7 +2208,7 @@
       "events": [
         {
           "event": "itemClick",
-          "detail": "HTMLCwDropdownItemElement",
+          "detail": "HTMLIxDropdownItemElement",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
@@ -2221,49 +2221,49 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-breadcrumb",
-        "cw-group-dropdown-item",
-        "cw-menu-avatar-item",
-        "cw-select",
-        "cw-select-item",
-        "cw-split-button-item",
+        "ix-breadcrumb",
+        "ix-group-dropdown-item",
+        "ix-menu-avatar-item",
+        "ix-select",
+        "ix-select-item",
+        "ix-split-button-item",
         "my-component"
       ],
       "dependencies": [
-        "cw-icon"
+        "ix-icon"
       ],
       "dependencyGraph": {
-        "cw-dropdown-item": [
-          "cw-icon"
+        "ix-dropdown-item": [
+          "ix-icon"
         ],
-        "cw-breadcrumb": [
-          "cw-dropdown-item"
+        "ix-breadcrumb": [
+          "ix-dropdown-item"
         ],
-        "cw-group-dropdown-item": [
-          "cw-dropdown-item"
+        "ix-group-dropdown-item": [
+          "ix-dropdown-item"
         ],
-        "cw-menu-avatar-item": [
-          "cw-dropdown-item"
+        "ix-menu-avatar-item": [
+          "ix-dropdown-item"
         ],
-        "cw-select": [
-          "cw-dropdown-item"
+        "ix-select": [
+          "ix-dropdown-item"
         ],
-        "cw-select-item": [
-          "cw-dropdown-item"
+        "ix-select-item": [
+          "ix-dropdown-item"
         ],
-        "cw-split-button-item": [
-          "cw-dropdown-item"
+        "ix-split-button-item": [
+          "ix-dropdown-item"
         ],
         "my-component": [
-          "cw-dropdown-item"
+          "ix-dropdown-item"
         ]
       }
     },
     {
       "filePath": "./src/components/event-list/event-list.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-event-list",
-      "readme": "# cw-event-list\n",
+      "tag": "ix-event-list",
+      "readme": "# ix-event-list\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -2357,8 +2357,8 @@
     {
       "filePath": "./src/components/event-list-item/event-list-item.tsx",
       "encapsulation": "none",
-      "tag": "cw-event-list-item",
-      "readme": "# cw-event-list-item\n",
+      "tag": "ix-event-list-item",
+      "readme": "# ix-event-list-item\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -2480,7 +2480,7 @@
     {
       "filePath": "./src/components/expanding-search/expanding-search.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-expanding-search",
+      "tag": "ix-expanding-search",
       "readme": "# expanding-search\n\n\n",
       "docs": "",
       "docsTags": [],
@@ -2558,26 +2558,26 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-icon",
-        "cw-icon-button"
+        "ix-icon",
+        "ix-icon-button"
       ],
       "dependencyGraph": {
-        "cw-expanding-search": [
-          "cw-icon",
-          "cw-icon-button"
+        "ix-expanding-search": [
+          "ix-icon",
+          "ix-icon-button"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-expanding-search"
+          "ix-expanding-search"
         ]
       }
     },
     {
       "filePath": "./src/components/filter-chip/filter-chip.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-filter-chip",
+      "tag": "ix-filter-chip",
       "readme": "# cui-filter-chip\n\n\n",
       "docs": "",
       "docsTags": [],
@@ -2618,33 +2618,33 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-category-filter",
-        "cw-select",
+        "ix-category-filter",
+        "ix-select",
         "my-component"
       ],
       "dependencies": [
-        "cw-icon"
+        "ix-icon"
       ],
       "dependencyGraph": {
-        "cw-filter-chip": [
-          "cw-icon"
+        "ix-filter-chip": [
+          "ix-icon"
         ],
-        "cw-category-filter": [
-          "cw-filter-chip"
+        "ix-category-filter": [
+          "ix-filter-chip"
         ],
-        "cw-select": [
-          "cw-filter-chip"
+        "ix-select": [
+          "ix-filter-chip"
         ],
         "my-component": [
-          "cw-filter-chip"
+          "ix-filter-chip"
         ]
       }
     },
     {
       "filePath": "./src/components/flip-tile/flip-tile.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-flip-tile",
-      "readme": "# cw-flip-tile\n\n\n",
+      "tag": "ix-flip-tile",
+      "readme": "# ix-flip-tile\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -2704,25 +2704,25 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-icon-button"
+        "ix-icon-button"
       ],
       "dependencyGraph": {
-        "cw-flip-tile": [
-          "cw-icon-button"
+        "ix-flip-tile": [
+          "ix-icon-button"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-flip-tile"
+          "ix-flip-tile"
         ]
       }
     },
     {
       "filePath": "./src/components/flip-tile-content/flip-tile-content.tsx",
       "encapsulation": "shadow",
-      "tag": "cw-flip-tile-content",
-      "readme": "# cw-flip-tile-content\n\n\n",
+      "tag": "ix-flip-tile-content",
+      "readme": "# ix-flip-tile-content\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -2740,8 +2740,8 @@
     {
       "filePath": "./src/components/group/group.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-group",
-      "readme": "# cw-group\n\n\n",
+      "tag": "ix-group",
+      "readme": "# ix-group\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -2907,34 +2907,34 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-icon",
-        "cw-icon-button",
-        "cw-dropdown",
-        "cw-group-item"
+        "ix-icon",
+        "ix-icon-button",
+        "ix-dropdown",
+        "ix-group-item"
       ],
       "dependencyGraph": {
-        "cw-group": [
-          "cw-icon",
-          "cw-icon-button",
-          "cw-dropdown",
-          "cw-group-item"
+        "ix-group": [
+          "ix-icon",
+          "ix-icon-button",
+          "ix-dropdown",
+          "ix-group-item"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
-        "cw-group-item": [
-          "cw-icon"
+        "ix-group-item": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-group"
+          "ix-group"
         ]
       }
     },
     {
       "filePath": "./src/components/group-dropdown-item/group-dropdown-item.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-group-dropdown-item",
-      "readme": "# cw-group-dropdown-item\n\n\n",
+      "tag": "ix-group-dropdown-item",
+      "readme": "# ix-group-dropdown-item\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -2980,22 +2980,22 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "cw-dropdown-item"
+        "ix-dropdown-item"
       ],
       "dependencyGraph": {
-        "cw-group-dropdown-item": [
-          "cw-dropdown-item"
+        "ix-group-dropdown-item": [
+          "ix-dropdown-item"
         ],
-        "cw-dropdown-item": [
-          "cw-icon"
+        "ix-dropdown-item": [
+          "ix-icon"
         ]
       }
     },
     {
       "filePath": "./src/components/group-item/group-item.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-group-item",
-      "readme": "# cw-group-item\n\n\n",
+      "tag": "ix-group-item",
+      "readme": "# ix-group-item\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -3119,7 +3119,7 @@
       "events": [
         {
           "event": "selectedChanged",
-          "detail": "HTMLCwGroupItemElement",
+          "detail": "HTMLIxGroupItemElement",
           "bubbles": true,
           "cancelable": true,
           "composed": true,
@@ -3138,29 +3138,29 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-group",
+        "ix-group",
         "my-component"
       ],
       "dependencies": [
-        "cw-icon"
+        "ix-icon"
       ],
       "dependencyGraph": {
-        "cw-group-item": [
-          "cw-icon"
+        "ix-group-item": [
+          "ix-icon"
         ],
-        "cw-group": [
-          "cw-group-item"
+        "ix-group": [
+          "ix-group-item"
         ],
         "my-component": [
-          "cw-group-item"
+          "ix-group-item"
         ]
       }
     },
     {
       "filePath": "./src/components/icon/icon.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-icon",
-      "readme": "# cw-icon\n",
+      "tag": "ix-icon",
+      "readme": "# ix-icon\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -3234,100 +3234,100 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-animated-tabs",
-        "cw-breadcrumb",
-        "cw-category-filter",
-        "cw-chip",
-        "cw-date-picker",
-        "cw-dropdown-item",
-        "cw-expanding-search",
-        "cw-filter-chip",
-        "cw-group",
-        "cw-group-item",
-        "cw-icon-button",
-        "cw-map-navigation-overlay",
-        "cw-menu-about-news",
-        "cw-message-bar",
-        "cw-modal",
-        "cw-pill",
-        "cw-select",
-        "cw-split-button",
-        "cw-toast",
-        "cw-tree-item",
+        "ix-animated-tabs",
+        "ix-breadcrumb",
+        "ix-category-filter",
+        "ix-chip",
+        "ix-date-picker",
+        "ix-dropdown-item",
+        "ix-expanding-search",
+        "ix-filter-chip",
+        "ix-group",
+        "ix-group-item",
+        "ix-icon-button",
+        "ix-map-navigation-overlay",
+        "ix-menu-about-news",
+        "ix-message-bar",
+        "ix-modal",
+        "ix-pill",
+        "ix-select",
+        "ix-split-button",
+        "ix-toast",
+        "ix-tree-item",
         "my-component"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "cw-animated-tabs": [
-          "cw-icon"
+        "ix-animated-tabs": [
+          "ix-icon"
         ],
-        "cw-breadcrumb": [
-          "cw-icon"
+        "ix-breadcrumb": [
+          "ix-icon"
         ],
-        "cw-category-filter": [
-          "cw-icon"
+        "ix-category-filter": [
+          "ix-icon"
         ],
-        "cw-chip": [
-          "cw-icon"
+        "ix-chip": [
+          "ix-icon"
         ],
-        "cw-date-picker": [
-          "cw-icon"
+        "ix-date-picker": [
+          "ix-icon"
         ],
-        "cw-dropdown-item": [
-          "cw-icon"
+        "ix-dropdown-item": [
+          "ix-icon"
         ],
-        "cw-expanding-search": [
-          "cw-icon"
+        "ix-expanding-search": [
+          "ix-icon"
         ],
-        "cw-filter-chip": [
-          "cw-icon"
+        "ix-filter-chip": [
+          "ix-icon"
         ],
-        "cw-group": [
-          "cw-icon"
+        "ix-group": [
+          "ix-icon"
         ],
-        "cw-group-item": [
-          "cw-icon"
+        "ix-group-item": [
+          "ix-icon"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
-        "cw-map-navigation-overlay": [
-          "cw-icon"
+        "ix-map-navigation-overlay": [
+          "ix-icon"
         ],
-        "cw-menu-about-news": [
-          "cw-icon"
+        "ix-menu-about-news": [
+          "ix-icon"
         ],
-        "cw-message-bar": [
-          "cw-icon"
+        "ix-message-bar": [
+          "ix-icon"
         ],
-        "cw-modal": [
-          "cw-icon"
+        "ix-modal": [
+          "ix-icon"
         ],
-        "cw-pill": [
-          "cw-icon"
+        "ix-pill": [
+          "ix-icon"
         ],
-        "cw-select": [
-          "cw-icon"
+        "ix-select": [
+          "ix-icon"
         ],
-        "cw-split-button": [
-          "cw-icon"
+        "ix-split-button": [
+          "ix-icon"
         ],
-        "cw-toast": [
-          "cw-icon"
+        "ix-toast": [
+          "ix-icon"
         ],
-        "cw-tree-item": [
-          "cw-icon"
+        "ix-tree-item": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-icon"
+          "ix-icon"
         ]
       }
     },
     {
       "filePath": "./src/components/icon-button/icon-button.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-icon-button",
-      "readme": "# cw-icon-button\n\n\n",
+      "tag": "ix-icon-button",
+      "readme": "# ix-icon-button\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -3528,85 +3528,85 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-date-picker",
-        "cw-drawer",
-        "cw-expanding-search",
-        "cw-flip-tile",
-        "cw-group",
-        "cw-map-navigation",
-        "cw-map-navigation-overlay",
-        "cw-menu-about",
-        "cw-menu-about-news",
-        "cw-menu-settings",
-        "cw-message-bar",
-        "cw-modal-example",
-        "cw-select",
-        "cw-time-picker",
-        "cw-toast",
+        "ix-date-picker",
+        "ix-drawer",
+        "ix-expanding-search",
+        "ix-flip-tile",
+        "ix-group",
+        "ix-map-navigation",
+        "ix-map-navigation-overlay",
+        "ix-menu-about",
+        "ix-menu-about-news",
+        "ix-menu-settings",
+        "ix-message-bar",
+        "ix-modal-example",
+        "ix-select",
+        "ix-time-picker",
+        "ix-toast",
         "my-component"
       ],
       "dependencies": [
-        "cw-icon"
+        "ix-icon"
       ],
       "dependencyGraph": {
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
-        "cw-date-picker": [
-          "cw-icon-button"
+        "ix-date-picker": [
+          "ix-icon-button"
         ],
-        "cw-drawer": [
-          "cw-icon-button"
+        "ix-drawer": [
+          "ix-icon-button"
         ],
-        "cw-expanding-search": [
-          "cw-icon-button"
+        "ix-expanding-search": [
+          "ix-icon-button"
         ],
-        "cw-flip-tile": [
-          "cw-icon-button"
+        "ix-flip-tile": [
+          "ix-icon-button"
         ],
-        "cw-group": [
-          "cw-icon-button"
+        "ix-group": [
+          "ix-icon-button"
         ],
-        "cw-map-navigation": [
-          "cw-icon-button"
+        "ix-map-navigation": [
+          "ix-icon-button"
         ],
-        "cw-map-navigation-overlay": [
-          "cw-icon-button"
+        "ix-map-navigation-overlay": [
+          "ix-icon-button"
         ],
-        "cw-menu-about": [
-          "cw-icon-button"
+        "ix-menu-about": [
+          "ix-icon-button"
         ],
-        "cw-menu-about-news": [
-          "cw-icon-button"
+        "ix-menu-about-news": [
+          "ix-icon-button"
         ],
-        "cw-menu-settings": [
-          "cw-icon-button"
+        "ix-menu-settings": [
+          "ix-icon-button"
         ],
-        "cw-message-bar": [
-          "cw-icon-button"
+        "ix-message-bar": [
+          "ix-icon-button"
         ],
-        "cw-modal-example": [
-          "cw-icon-button"
+        "ix-modal-example": [
+          "ix-icon-button"
         ],
-        "cw-select": [
-          "cw-icon-button"
+        "ix-select": [
+          "ix-icon-button"
         ],
-        "cw-time-picker": [
-          "cw-icon-button"
+        "ix-time-picker": [
+          "ix-icon-button"
         ],
-        "cw-toast": [
-          "cw-icon-button"
+        "ix-toast": [
+          "ix-icon-button"
         ],
         "my-component": [
-          "cw-icon-button"
+          "ix-icon-button"
         ]
       }
     },
     {
       "filePath": "./src/components/input-group/input-group.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-input-group",
-      "readme": "# cw-input-group\n\n\n",
+      "tag": "ix-input-group",
+      "readme": "# ix-input-group\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -3623,15 +3623,15 @@
       "dependencies": [],
       "dependencyGraph": {
         "my-component": [
-          "cw-input-group"
+          "ix-input-group"
         ]
       }
     },
     {
       "filePath": "./src/components/map-navigation/map-navigation.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-map-navigation",
-      "readme": "# cw-map-navigation\n\n\n",
+      "tag": "ix-map-navigation",
+      "readme": "# ix-map-navigation\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -3753,36 +3753,36 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "cw-menu-about",
-        "cw-map-navigation-overlay",
-        "cw-icon-button"
+        "ix-menu-about",
+        "ix-map-navigation-overlay",
+        "ix-icon-button"
       ],
       "dependencyGraph": {
-        "cw-map-navigation": [
-          "cw-menu-about",
-          "cw-map-navigation-overlay",
-          "cw-icon-button"
-        ],
-        "cw-menu-about": [
-          "cw-icon-button",
-          "cw-tabs",
-          "cw-tab-item",
-          "cw-menu-about-item"
-        ],
-        "cw-icon-button": [
-          "cw-icon"
-        ],
-        "cw-map-navigation-overlay": [
-          "cw-icon",
-          "cw-icon-button"
+        "ix-map-navigation": [
+          "ix-menu-about",
+          "ix-map-navigation-overlay",
+          "ix-icon-button"
+        ],
+        "ix-menu-about": [
+          "ix-icon-button",
+          "ix-tabs",
+          "ix-tab-item",
+          "ix-menu-about-item"
+        ],
+        "ix-icon-button": [
+          "ix-icon"
+        ],
+        "ix-map-navigation-overlay": [
+          "ix-icon",
+          "ix-icon-button"
         ]
       }
     },
     {
       "filePath": "./src/components/map-navigation-overlay/map-navigation-overlay.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-map-navigation-overlay",
-      "readme": "# cw-map-navigation-overlay\n\n\n",
+      "tag": "ix-map-navigation-overlay",
+      "readme": "# ix-map-navigation-overlay\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -3853,30 +3853,30 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-map-navigation"
+        "ix-map-navigation"
       ],
       "dependencies": [
-        "cw-icon",
-        "cw-icon-button"
+        "ix-icon",
+        "ix-icon-button"
       ],
       "dependencyGraph": {
-        "cw-map-navigation-overlay": [
-          "cw-icon",
-          "cw-icon-button"
+        "ix-map-navigation-overlay": [
+          "ix-icon",
+          "ix-icon-button"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
-        "cw-map-navigation": [
-          "cw-map-navigation-overlay"
+        "ix-map-navigation": [
+          "ix-map-navigation-overlay"
         ]
       }
     },
     {
       "filePath": "./src/components/menu/menu.tsx",
       "encapsulation": "none",
-      "tag": "cw-menu",
-      "readme": "# cw-menu\n\n\n",
+      "tag": "ix-menu",
+      "readme": "# ix-menu\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -3887,7 +3887,7 @@
           "mutable": false,
           "attr": "application-description",
           "reflectToAttr": false,
-          "docs": "Should only be set if you use cw-menu standalone",
+          "docs": "Should only be set if you use ix-menu standalone",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -3904,7 +3904,7 @@
           "mutable": false,
           "attr": "application-name",
           "reflectToAttr": false,
-          "docs": "Should only be set if you use cw-menu standalone",
+          "docs": "Should only be set if you use ix-menu standalone",
           "docsTags": [],
           "values": [
             {
@@ -4243,24 +4243,24 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-menu-item",
-        "cw-dropdown"
+        "ix-menu-item",
+        "ix-dropdown"
       ],
       "dependencyGraph": {
-        "cw-menu": [
-          "cw-menu-item",
-          "cw-dropdown"
+        "ix-menu": [
+          "ix-menu-item",
+          "ix-dropdown"
         ],
         "my-component": [
-          "cw-menu"
+          "ix-menu"
         ]
       }
     },
     {
-      "filePath": "./src/components/menu-about/cw-menu-about.tsx",
+      "filePath": "./src/components/menu-about/menu-about.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-menu-about",
-      "readme": "# cw-menu-about\n\n\n",
+      "tag": "ix-menu-about",
+      "readme": "# ix-menu-about\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -4288,7 +4288,7 @@
           "mutable": false,
           "attr": "application-description",
           "reflectToAttr": false,
-          "docs": "Should only be set if you use cw-menu standalone",
+          "docs": "Should only be set if you use ix-menu standalone",
           "docsTags": [],
           "default": "''",
           "values": [
@@ -4305,7 +4305,7 @@
           "mutable": false,
           "attr": "application-name",
           "reflectToAttr": false,
-          "docs": "Should only be set if you use cw-menu standalone",
+          "docs": "Should only be set if you use ix-menu standalone",
           "docsTags": [],
           "values": [
             {
@@ -4516,34 +4516,34 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-map-navigation"
+        "ix-map-navigation"
       ],
       "dependencies": [
-        "cw-icon-button",
-        "cw-tabs",
-        "cw-tab-item",
-        "cw-menu-about-item"
+        "ix-icon-button",
+        "ix-tabs",
+        "ix-tab-item",
+        "ix-menu-about-item"
       ],
       "dependencyGraph": {
-        "cw-menu-about": [
-          "cw-icon-button",
-          "cw-tabs",
-          "cw-tab-item",
-          "cw-menu-about-item"
+        "ix-menu-about": [
+          "ix-icon-button",
+          "ix-tabs",
+          "ix-tab-item",
+          "ix-menu-about-item"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
-        "cw-map-navigation": [
-          "cw-menu-about"
+        "ix-map-navigation": [
+          "ix-menu-about"
         ]
       }
     },
     {
-      "filePath": "./src/components/menu-about-item/cw-menu-about-item.tsx",
+      "filePath": "./src/components/menu-about-item/menu-about-item.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-menu-about-item",
-      "readme": "# cw-menu-about-item\n\n\n",
+      "tag": "ix-menu-about-item",
+      "readme": "# ix-menu-about-item\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -4572,20 +4572,20 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-menu-about"
+        "ix-menu-about"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "cw-menu-about": [
-          "cw-menu-about-item"
+        "ix-menu-about": [
+          "ix-menu-about-item"
         ]
       }
     },
     {
       "filePath": "./src/components/menu-about-news/menu-about-news.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-menu-about-news",
-      "readme": "# cw-menu-about-news\n\n\n",
+      "tag": "ix-menu-about-news",
+      "readme": "# ix-menu-about-news\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -4718,24 +4718,24 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "cw-icon",
-        "cw-icon-button"
+        "ix-icon",
+        "ix-icon-button"
       ],
       "dependencyGraph": {
-        "cw-menu-about-news": [
-          "cw-icon",
-          "cw-icon-button"
+        "ix-menu-about-news": [
+          "ix-icon",
+          "ix-icon-button"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ]
       }
     },
     {
       "filePath": "./src/components/menu-avatar/menu-avatar.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-menu-avatar",
-      "readme": "# cw-menu-avatar\n",
+      "tag": "ix-menu-avatar",
+      "readme": "# ix-menu-avatar\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -4814,27 +4814,27 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "cw-dropdown",
-        "cw-menu-avatar-item"
+        "ix-dropdown",
+        "ix-menu-avatar-item"
       ],
       "dependencyGraph": {
-        "cw-menu-avatar": [
-          "cw-dropdown",
-          "cw-menu-avatar-item"
+        "ix-menu-avatar": [
+          "ix-dropdown",
+          "ix-menu-avatar-item"
         ],
-        "cw-menu-avatar-item": [
-          "cw-dropdown-item"
+        "ix-menu-avatar-item": [
+          "ix-dropdown-item"
         ],
-        "cw-dropdown-item": [
-          "cw-icon"
+        "ix-dropdown-item": [
+          "ix-icon"
         ]
       }
     },
     {
       "filePath": "./src/components/menu-avatar-item/menu-avatar-item.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-menu-avatar-item",
-      "readme": "# cw-menu-avatar-item\n\n\n",
+      "tag": "ix-menu-avatar-item",
+      "readme": "# ix-menu-avatar-item\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -4889,28 +4889,28 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-menu-avatar"
+        "ix-menu-avatar"
       ],
       "dependencies": [
-        "cw-dropdown-item"
+        "ix-dropdown-item"
       ],
       "dependencyGraph": {
-        "cw-menu-avatar-item": [
-          "cw-dropdown-item"
+        "ix-menu-avatar-item": [
+          "ix-dropdown-item"
         ],
-        "cw-dropdown-item": [
-          "cw-icon"
+        "ix-dropdown-item": [
+          "ix-icon"
         ],
-        "cw-menu-avatar": [
-          "cw-menu-avatar-item"
+        "ix-menu-avatar": [
+          "ix-menu-avatar-item"
         ]
       }
     },
     {
       "filePath": "./src/components/menu-item/menu-item.tsx",
       "encapsulation": "none",
-      "tag": "cw-menu-item",
-      "readme": "# cw-menu-item\n",
+      "tag": "ix-menu-item",
+      "readme": "# ix-menu-item\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -5022,24 +5022,24 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-menu",
+        "ix-menu",
         "my-component"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "cw-menu": [
-          "cw-menu-item"
+        "ix-menu": [
+          "ix-menu-item"
         ],
         "my-component": [
-          "cw-menu-item"
+          "ix-menu-item"
         ]
       }
     },
     {
-      "filePath": "./src/components/menu-settings/cw-menu-settings.tsx",
+      "filePath": "./src/components/menu-settings/menu-settings.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-menu-settings",
-      "readme": "# cw-menu-settings\n\n\n",
+      "tag": "ix-menu-settings",
+      "readme": "# ix-menu-settings\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -5113,26 +5113,26 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "cw-tab-item",
-        "cw-icon-button",
-        "cw-tabs"
+        "ix-tab-item",
+        "ix-icon-button",
+        "ix-tabs"
       ],
       "dependencyGraph": {
-        "cw-menu-settings": [
-          "cw-tab-item",
-          "cw-icon-button",
-          "cw-tabs"
+        "ix-menu-settings": [
+          "ix-tab-item",
+          "ix-icon-button",
+          "ix-tabs"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ]
       }
     },
     {
-      "filePath": "./src/components/menu-settings-item/cw-menu-settings-item.tsx",
+      "filePath": "./src/components/menu-settings-item/menu-settings-item.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-menu-settings-item",
-      "readme": "# cw-menu-settings-item\n\n\n",
+      "tag": "ix-menu-settings-item",
+      "readme": "# ix-menu-settings-item\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -5167,7 +5167,7 @@
     {
       "filePath": "./src/components/message-bar/message-bar.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-message-bar",
+      "tag": "ix-message-bar",
       "readme": "# message-bar\n\n\n",
       "docs": "",
       "docsTags": [],
@@ -5237,27 +5237,27 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-icon",
-        "cw-icon-button"
+        "ix-icon",
+        "ix-icon-button"
       ],
       "dependencyGraph": {
-        "cw-message-bar": [
-          "cw-icon",
-          "cw-icon-button"
+        "ix-message-bar": [
+          "ix-icon",
+          "ix-icon-button"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-message-bar"
+          "ix-message-bar"
         ]
       }
     },
     {
-      "filePath": "./src/components/modal/cw-modal.tsx",
+      "filePath": "./src/components/modal/modal.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-modal",
-      "readme": "# cw-modal\n\n\n",
+      "tag": "ix-modal",
+      "readme": "# ix-modal\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -5621,24 +5621,24 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-modal-container"
+        "ix-modal-container"
       ],
       "dependencies": [
-        "cw-icon"
+        "ix-icon"
       ],
       "dependencyGraph": {
-        "cw-modal": [
-          "cw-icon"
+        "ix-modal": [
+          "ix-icon"
         ],
-        "cw-modal-container": [
-          "cw-modal"
+        "ix-modal-container": [
+          "ix-modal"
         ]
       }
     },
     {
       "filePath": "./src/components/modal-container/modal-container.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-modal-container",
+      "tag": "ix-modal-container",
       "readme": "# overlay-container\n\n\n",
       "docs": "",
       "docsTags": [],
@@ -5671,24 +5671,24 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-modal"
+        "ix-modal"
       ],
       "dependencyGraph": {
-        "cw-modal-container": [
-          "cw-modal"
+        "ix-modal-container": [
+          "ix-modal"
         ],
-        "cw-modal": [
-          "cw-icon"
+        "ix-modal": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-modal-container"
+          "ix-modal-container"
         ]
       }
     },
     {
       "filePath": "./src/components/my-component/example-modal.tsx",
       "encapsulation": "none",
-      "tag": "cw-modal-example",
+      "tag": "ix-modal-example",
       "readme": "# my-component\n\n\n",
       "docs": "",
       "docsTags": [],
@@ -5714,27 +5714,27 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-icon-button",
-        "cw-button"
+        "ix-icon-button",
+        "ix-button"
       ],
       "dependencyGraph": {
-        "cw-modal-example": [
-          "cw-icon-button",
-          "cw-button"
+        "ix-modal-example": [
+          "ix-icon-button",
+          "ix-button"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-modal-example"
+          "ix-modal-example"
         ]
       }
     },
     {
       "filePath": "./src/components/pill/pill.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-pill",
-      "readme": "# cw-pill\n\n\n",
+      "tag": "ix-pill",
+      "readme": "# ix-pill\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -5878,22 +5878,22 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-icon"
+        "ix-icon"
       ],
       "dependencyGraph": {
-        "cw-pill": [
-          "cw-icon"
+        "ix-pill": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-pill"
+          "ix-pill"
         ]
       }
     },
     {
       "filePath": "./src/components/select/select.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-select",
-      "readme": "# cw-select\n\n\n",
+      "tag": "ix-select",
+      "readme": "# ix-select\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -6101,44 +6101,44 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-select-item",
-        "cw-filter-chip",
-        "cw-icon",
-        "cw-icon-button",
-        "cw-dropdown",
-        "cw-dropdown-item"
+        "ix-select-item",
+        "ix-filter-chip",
+        "ix-icon",
+        "ix-icon-button",
+        "ix-dropdown",
+        "ix-dropdown-item"
       ],
       "dependencyGraph": {
-        "cw-select": [
-          "cw-select-item",
-          "cw-filter-chip",
-          "cw-icon",
-          "cw-icon-button",
-          "cw-dropdown",
-          "cw-dropdown-item"
+        "ix-select": [
+          "ix-select-item",
+          "ix-filter-chip",
+          "ix-icon",
+          "ix-icon-button",
+          "ix-dropdown",
+          "ix-dropdown-item"
         ],
-        "cw-select-item": [
-          "cw-dropdown-item"
+        "ix-select-item": [
+          "ix-dropdown-item"
         ],
-        "cw-dropdown-item": [
-          "cw-icon"
+        "ix-dropdown-item": [
+          "ix-icon"
         ],
-        "cw-filter-chip": [
-          "cw-icon"
+        "ix-filter-chip": [
+          "ix-icon"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-select"
+          "ix-select"
         ]
       }
     },
     {
       "filePath": "./src/components/select-item/select-item.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-select-item",
-      "readme": "# cw-select-item\n\n\n",
+      "tag": "ix-select-item",
+      "readme": "# ix-select-item\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -6217,7 +6217,7 @@
             "type": "Promise<void>",
             "docs": ""
           },
-          "signature": "onItemClick(event?: CustomEvent<HTMLCwDropdownItemElement>) => Promise<void>",
+          "signature": "onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) => Promise<void>",
           "parameters": [],
           "docs": "Internal",
           "docsTags": [
@@ -6244,32 +6244,32 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-select",
+        "ix-select",
         "my-component"
       ],
       "dependencies": [
-        "cw-dropdown-item"
+        "ix-dropdown-item"
       ],
       "dependencyGraph": {
-        "cw-select-item": [
-          "cw-dropdown-item"
+        "ix-select-item": [
+          "ix-dropdown-item"
         ],
-        "cw-dropdown-item": [
-          "cw-icon"
+        "ix-dropdown-item": [
+          "ix-icon"
         ],
-        "cw-select": [
-          "cw-select-item"
+        "ix-select": [
+          "ix-select-item"
         ],
         "my-component": [
-          "cw-select-item"
+          "ix-select-item"
         ]
       }
     },
     {
       "filePath": "./src/components/spinner/spinner.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-spinner",
-      "readme": "# cw-spinner\n\n\n",
+      "tag": "ix-spinner",
+      "readme": "# ix-spinner\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -6330,20 +6330,20 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-upload"
+        "ix-upload"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "cw-upload": [
-          "cw-spinner"
+        "ix-upload": [
+          "ix-spinner"
         ]
       }
     },
     {
       "filePath": "./src/components/split-button/split-button.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-split-button",
-      "readme": "# cw-split-button\n\n\n",
+      "tag": "ix-split-button",
+      "readme": "# ix-split-button\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -6589,24 +6589,24 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-icon",
-        "cw-dropdown"
+        "ix-icon",
+        "ix-dropdown"
       ],
       "dependencyGraph": {
-        "cw-split-button": [
-          "cw-icon",
-          "cw-dropdown"
+        "ix-split-button": [
+          "ix-icon",
+          "ix-dropdown"
         ],
         "my-component": [
-          "cw-split-button"
+          "ix-split-button"
         ]
       }
     },
     {
       "filePath": "./src/components/split-button-item/split-button-item.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-split-button-item",
-      "readme": "# cw-split-button-item\n\n\n",
+      "tag": "ix-split-button-item",
+      "readme": "# ix-split-button-item\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -6664,25 +6664,25 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-dropdown-item"
+        "ix-dropdown-item"
       ],
       "dependencyGraph": {
-        "cw-split-button-item": [
-          "cw-dropdown-item"
+        "ix-split-button-item": [
+          "ix-dropdown-item"
         ],
-        "cw-dropdown-item": [
-          "cw-icon"
+        "ix-dropdown-item": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-split-button-item"
+          "ix-split-button-item"
         ]
       }
     },
     {
       "filePath": "./src/components/tab-item/tab-item.tsx",
       "encapsulation": "none",
-      "tag": "cw-tab-item",
-      "readme": "# cw-tab-item\n\n\n",
+      "tag": "ix-tab-item",
+      "readme": "# ix-tab-item\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -6807,28 +6807,28 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-menu-about",
-        "cw-menu-settings",
+        "ix-menu-about",
+        "ix-menu-settings",
         "my-component"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "cw-menu-about": [
-          "cw-tab-item"
+        "ix-menu-about": [
+          "ix-tab-item"
         ],
-        "cw-menu-settings": [
-          "cw-tab-item"
+        "ix-menu-settings": [
+          "ix-tab-item"
         ],
         "my-component": [
-          "cw-tab-item"
+          "ix-tab-item"
         ]
       }
     },
     {
       "filePath": "./src/components/tabs/tabs.tsx",
       "encapsulation": "none",
-      "tag": "cw-tabs",
-      "readme": "# cw-tabs\n\n\n",
+      "tag": "ix-tabs",
+      "readme": "# ix-tabs\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -6926,28 +6926,28 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-menu-about",
-        "cw-menu-settings",
+        "ix-menu-about",
+        "ix-menu-settings",
         "my-component"
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "cw-menu-about": [
-          "cw-tabs"
+        "ix-menu-about": [
+          "ix-tabs"
         ],
-        "cw-menu-settings": [
-          "cw-tabs"
+        "ix-menu-settings": [
+          "ix-tabs"
         ],
         "my-component": [
-          "cw-tabs"
+          "ix-tabs"
         ]
       }
     },
     {
       "filePath": "./src/components/tile/tile.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-tile",
-      "readme": "# cw-tile\n\n\n",
+      "tag": "ix-tile",
+      "readme": "# ix-tile\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -6991,15 +6991,15 @@
       "dependencies": [],
       "dependencyGraph": {
         "my-component": [
-          "cw-tile"
+          "ix-tile"
         ]
       }
     },
     {
       "filePath": "./src/components/time-picker/time-picker.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-time-picker",
-      "readme": "# cw-time-picker\n\n\n",
+      "tag": "ix-time-picker",
+      "readme": "# ix-time-picker\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -7142,32 +7142,32 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-datetime-picker"
+        "ix-datetime-picker"
       ],
       "dependencies": [
-        "cw-date-time-card",
-        "cw-icon-button",
-        "cw-button"
+        "ix-date-time-card",
+        "ix-icon-button",
+        "ix-button"
       ],
       "dependencyGraph": {
-        "cw-time-picker": [
-          "cw-date-time-card",
-          "cw-icon-button",
-          "cw-button"
+        "ix-time-picker": [
+          "ix-date-time-card",
+          "ix-icon-button",
+          "ix-button"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
-        "cw-datetime-picker": [
-          "cw-time-picker"
+        "ix-datetime-picker": [
+          "ix-time-picker"
         ]
       }
     },
     {
-      "filePath": "./src/components/toast/cw-toast.tsx",
+      "filePath": "./src/components/toast/toast.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-toast",
-      "readme": "# cw-toast-container\n\n\n",
+      "tag": "ix-toast",
+      "readme": "# ix-toast-container\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -7301,30 +7301,30 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-toast-container"
+        "ix-toast-container"
       ],
       "dependencies": [
-        "cw-icon",
-        "cw-icon-button"
+        "ix-icon",
+        "ix-icon-button"
       ],
       "dependencyGraph": {
-        "cw-toast": [
-          "cw-icon",
-          "cw-icon-button"
+        "ix-toast": [
+          "ix-icon",
+          "ix-icon-button"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
-        "cw-toast-container": [
-          "cw-toast"
+        "ix-toast-container": [
+          "ix-toast"
         ]
       }
     },
     {
       "filePath": "./src/components/toast/toast-container.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-toast-container",
-      "readme": "# cw-toast-container\n\n\n",
+      "tag": "ix-toast-container",
+      "readme": "# ix-toast-container\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -7423,29 +7423,29 @@
         "my-component"
       ],
       "dependencies": [
-        "cw-toast"
+        "ix-toast"
       ],
       "dependencyGraph": {
-        "cw-toast-container": [
-          "cw-toast"
+        "ix-toast-container": [
+          "ix-toast"
         ],
-        "cw-toast": [
-          "cw-icon",
-          "cw-icon-button"
+        "ix-toast": [
+          "ix-icon",
+          "ix-icon-button"
         ],
-        "cw-icon-button": [
-          "cw-icon"
+        "ix-icon-button": [
+          "ix-icon"
         ],
         "my-component": [
-          "cw-toast-container"
+          "ix-toast-container"
         ]
       }
     },
     {
       "filePath": "./src/components/toggle/toggle.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-toggle",
-      "readme": "# cw-toggle\n\n\n",
+      "tag": "ix-toggle",
+      "readme": "# ix-toggle\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -7622,15 +7622,15 @@
       "dependencies": [],
       "dependencyGraph": {
         "my-component": [
-          "cw-toggle"
+          "ix-toggle"
         ]
       }
     },
     {
       "filePath": "./src/components/tree/tree.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-tree",
-      "readme": "# cw-tree\n\n\n",
+      "tag": "ix-tree",
+      "readme": "# ix-tree\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -7716,22 +7716,22 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "cw-tree-item"
+        "ix-tree-item"
       ],
       "dependencyGraph": {
-        "cw-tree": [
-          "cw-tree-item"
+        "ix-tree": [
+          "ix-tree-item"
         ],
-        "cw-tree-item": [
-          "cw-icon"
+        "ix-tree-item": [
+          "ix-icon"
         ]
       }
     },
     {
       "filePath": "./src/components/tree-item/tree-item.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-tree-item",
-      "readme": "# cw-tree-item\n\n\n",
+      "tag": "ix-tree-item",
+      "readme": "# ix-tree-item\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -7810,25 +7810,25 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "cw-tree"
+        "ix-tree"
       ],
       "dependencies": [
-        "cw-icon"
+        "ix-icon"
       ],
       "dependencyGraph": {
-        "cw-tree-item": [
-          "cw-icon"
+        "ix-tree-item": [
+          "ix-icon"
         ],
-        "cw-tree": [
-          "cw-tree-item"
+        "ix-tree": [
+          "ix-tree-item"
         ]
       }
     },
     {
       "filePath": "./src/components/upload/upload.tsx",
       "encapsulation": "scoped",
-      "tag": "cw-upload",
-      "readme": "# cw-upload\n\n\n",
+      "tag": "ix-upload",
+      "readme": "# ix-upload\n",
       "docs": "",
       "docsTags": [],
       "usage": {},
@@ -8026,11 +8026,11 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "cw-spinner"
+        "ix-spinner"
       ],
       "dependencyGraph": {
-        "cw-upload": [
-          "cw-spinner"
+        "ix-upload": [
+          "ix-spinner"
         ]
       }
     },
@@ -8051,171 +8051,171 @@
       "parts": [],
       "dependents": [],
       "dependencies": [
-        "cw-modal-example",
-        "cw-basic-navigation",
-        "cw-menu",
-        "cw-menu-item",
-        "cw-date-picker",
-        "cw-button",
-        "cw-modal-container",
-        "cw-toggle",
-        "cw-group",
-        "cw-group-item",
-        "cw-icon",
-        "cw-tabs",
-        "cw-tab-item",
-        "cw-message-bar",
-        "cw-animated-tabs",
-        "cw-animated-tab",
-        "cw-flip-tile",
-        "cw-tile",
-        "cw-icon-button",
-        "cw-select",
-        "cw-select-item",
-        "cw-filter-chip",
-        "cw-breadcrumb",
-        "cw-breadcrumb-item",
-        "cw-counter-pill",
-        "cw-pill",
-        "cw-chip",
-        "cw-blind",
-        "cw-split-button",
-        "cw-split-button-item",
-        "cw-dropdown",
-        "cw-dropdown-item",
-        "cw-input-group",
-        "cw-expanding-search",
-        "cw-toast-container"
+        "ix-modal-example",
+        "ix-basic-navigation",
+        "ix-menu",
+        "ix-menu-item",
+        "ix-date-picker",
+        "ix-button",
+        "ix-modal-container",
+        "ix-toggle",
+        "ix-group",
+        "ix-group-item",
+        "ix-icon",
+        "ix-tabs",
+        "ix-tab-item",
+        "ix-message-bar",
+        "ix-animated-tabs",
+        "ix-animated-tab",
+        "ix-flip-tile",
+        "ix-tile",
+        "ix-icon-button",
+        "ix-select",
+        "ix-select-item",
+        "ix-filter-chip",
+        "ix-breadcrumb",
+        "ix-breadcrumb-item",
+        "ix-counter-pill",
+        "ix-pill",
+        "ix-chip",
+        "ix-blind",
+        "ix-split-button",
+        "ix-split-button-item",
+        "ix-dropdown",
+        "ix-dropdown-item",
+        "ix-input-group",
+        "ix-expanding-search",
+        "ix-toast-container"
       ],
       "dependencyGraph": {
         "my-component": [
-          "cw-modal-example",
-          "cw-basic-navigation",
-          "cw-menu",
-          "cw-menu-item",
-          "cw-date-picker",
-          "cw-button",
-          "cw-modal-container",
-          "cw-toggle",
-          "cw-group",
-          "cw-group-item",
-          "cw-icon",
-          "cw-tabs",
-          "cw-tab-item",
-          "cw-message-bar",
-          "cw-animated-tabs",
-          "cw-animated-tab",
-          "cw-flip-tile",
-          "cw-tile",
-          "cw-icon-button",
-          "cw-select",
-          "cw-select-item",
-          "cw-filter-chip",
-          "cw-breadcrumb",
-          "cw-breadcrumb-item",
-          "cw-counter-pill",
-          "cw-pill",
-          "cw-chip",
-          "cw-blind",
-          "cw-split-button",
-          "cw-split-button-item",
-          "cw-dropdown",
-          "cw-dropdown-item",
-          "cw-input-group",
-          "cw-expanding-search",
-          "cw-toast-container"
-        ],
-        "cw-modal-example": [
-          "cw-icon-button",
-          "cw-button"
-        ],
-        "cw-icon-button": [
-          "cw-icon"
-        ],
-        "cw-basic-navigation": [
-          "cw-application-header"
-        ],
-        "cw-menu": [
-          "cw-menu-item",
-          "cw-dropdown"
-        ],
-        "cw-date-picker": [
-          "cw-date-time-card",
-          "cw-icon-button",
-          "cw-button",
-          "cw-dropdown",
-          "cw-icon"
-        ],
-        "cw-modal-container": [
-          "cw-modal"
-        ],
-        "cw-modal": [
-          "cw-icon"
-        ],
-        "cw-group": [
-          "cw-icon",
-          "cw-icon-button",
-          "cw-dropdown",
-          "cw-group-item"
-        ],
-        "cw-group-item": [
-          "cw-icon"
-        ],
-        "cw-message-bar": [
-          "cw-icon",
-          "cw-icon-button"
-        ],
-        "cw-animated-tabs": [
-          "cw-icon"
-        ],
-        "cw-flip-tile": [
-          "cw-icon-button"
-        ],
-        "cw-select": [
-          "cw-select-item",
-          "cw-filter-chip",
-          "cw-icon",
-          "cw-icon-button",
-          "cw-dropdown",
-          "cw-dropdown-item"
-        ],
-        "cw-select-item": [
-          "cw-dropdown-item"
-        ],
-        "cw-dropdown-item": [
-          "cw-icon"
-        ],
-        "cw-filter-chip": [
-          "cw-icon"
-        ],
-        "cw-breadcrumb": [
-          "cw-icon",
-          "cw-dropdown",
-          "cw-dropdown-item"
-        ],
-        "cw-pill": [
-          "cw-icon"
-        ],
-        "cw-chip": [
-          "cw-icon"
-        ],
-        "cw-split-button": [
-          "cw-icon",
-          "cw-dropdown"
-        ],
-        "cw-split-button-item": [
-          "cw-dropdown-item"
-        ],
-        "cw-expanding-search": [
-          "cw-icon",
-          "cw-icon-button"
-        ],
-        "cw-toast-container": [
-          "cw-toast"
-        ],
-        "cw-toast": [
-          "cw-icon",
-          "cw-icon-button"
+          "ix-modal-example",
+          "ix-basic-navigation",
+          "ix-menu",
+          "ix-menu-item",
+          "ix-date-picker",
+          "ix-button",
+          "ix-modal-container",
+          "ix-toggle",
+          "ix-group",
+          "ix-group-item",
+          "ix-icon",
+          "ix-tabs",
+          "ix-tab-item",
+          "ix-message-bar",
+          "ix-animated-tabs",
+          "ix-animated-tab",
+          "ix-flip-tile",
+          "ix-tile",
+          "ix-icon-button",
+          "ix-select",
+          "ix-select-item",
+          "ix-filter-chip",
+          "ix-breadcrumb",
+          "ix-breadcrumb-item",
+          "ix-counter-pill",
+          "ix-pill",
+          "ix-chip",
+          "ix-blind",
+          "ix-split-button",
+          "ix-split-button-item",
+          "ix-dropdown",
+          "ix-dropdown-item",
+          "ix-input-group",
+          "ix-expanding-search",
+          "ix-toast-container"
+        ],
+        "ix-modal-example": [
+          "ix-icon-button",
+          "ix-button"
+        ],
+        "ix-icon-button": [
+          "ix-icon"
+        ],
+        "ix-basic-navigation": [
+          "ix-application-header"
+        ],
+        "ix-menu": [
+          "ix-menu-item",
+          "ix-dropdown"
+        ],
+        "ix-date-picker": [
+          "ix-date-time-card",
+          "ix-icon-button",
+          "ix-button",
+          "ix-dropdown",
+          "ix-icon"
+        ],
+        "ix-modal-container": [
+          "ix-modal"
+        ],
+        "ix-modal": [
+          "ix-icon"
+        ],
+        "ix-group": [
+          "ix-icon",
+          "ix-icon-button",
+          "ix-dropdown",
+          "ix-group-item"
+        ],
+        "ix-group-item": [
+          "ix-icon"
+        ],
+        "ix-message-bar": [
+          "ix-icon",
+          "ix-icon-button"
+        ],
+        "ix-animated-tabs": [
+          "ix-icon"
+        ],
+        "ix-flip-tile": [
+          "ix-icon-button"
+        ],
+        "ix-select": [
+          "ix-select-item",
+          "ix-filter-chip",
+          "ix-icon",
+          "ix-icon-button",
+          "ix-dropdown",
+          "ix-dropdown-item"
+        ],
+        "ix-select-item": [
+          "ix-dropdown-item"
+        ],
+        "ix-dropdown-item": [
+          "ix-icon"
+        ],
+        "ix-filter-chip": [
+          "ix-icon"
+        ],
+        "ix-breadcrumb": [
+          "ix-icon",
+          "ix-dropdown",
+          "ix-dropdown-item"
+        ],
+        "ix-pill": [
+          "ix-icon"
+        ],
+        "ix-chip": [
+          "ix-icon"
+        ],
+        "ix-split-button": [
+          "ix-icon",
+          "ix-dropdown"
+        ],
+        "ix-split-button-item": [
+          "ix-dropdown-item"
+        ],
+        "ix-expanding-search": [
+          "ix-icon",
+          "ix-icon-button"
+        ],
+        "ix-toast-container": [
+          "ix-toast"
+        ],
+        "ix-toast": [
+          "ix-icon",
+          "ix-icon-button"
         ]
       }
     }
diff --git a/packages/core/scripts/e2e/load-e2e-runtime.js b/packages/core/scripts/e2e/load-e2e-runtime.js
index ec1085994db..7569f61934d 100644
--- a/packages/core/scripts/e2e/load-e2e-runtime.js
+++ b/packages/core/scripts/e2e/load-e2e-runtime.js
@@ -7,18 +7,18 @@ function loadResources() {
   ixEsm.setAttribute('type', 'module');
   ixEsm.setAttribute(
     'src',
-    'http://127.0.0.1:8080/www/build/core-ui-core.esm.js'
+    'http://127.0.0.1:8080/www/build/siemens-ix.esm.js'
   );
 
   var ix = document.createElement('script');
   ix.setAttribute('nomodule', '');
-  ix.setAttribute('src', 'http://127.0.0.1:8080/www/build/core-ui-core.js');
+  ix.setAttribute('src', 'http://127.0.0.1:8080/www/build/siemens-ix.js');
 
   var ixStyling = document.createElement('link');
   ixStyling.setAttribute('rel', 'stylesheet');
   ixStyling.setAttribute(
     'href',
-    'http://127.0.0.1:8080/www/build/core-ui-core.css'
+    'http://127.0.0.1:8080/www/build/siemens-ix.css'
   );
 
   var ixIcons = document.createElement('link');
diff --git a/packages/core/scss/_alert.scss b/packages/core/scss/_alert.scss
deleted file mode 100755
index c9412c23b1a..00000000000
--- a/packages/core/scss/_alert.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-.alert {
-  display: flex;
-  align-items: center;
-  height: auto;
-  padding: $small-space;
-  margin: 0;
-
-  [role='close'] {
-    margin-left: auto;
-  }
-
-  & > .glyph:first-of-type {
-    padding-right: $small-space * 2;
-  }
-
-  &.alert-danger {
-    background-color: $alert;
-    color: $default-text-light;
-
-    .glyph-alarm {
-      color: $default-text-light;
-    }
-
-    [role='close'] {
-      color: $default-text-light;
-    }
-  }
-
-  &.alert-warning {
-    background-color: $warning;
-    color: $default-text;
-
-    .glyph-warning {
-      color: $default-text;
-    }
-
-    [role='close'] {
-      color: $default-text;
-    }
-  }
-
-  &.alert-info {
-    background-color: #1e54b3;
-    color: $default-text-light;
-
-    .glyph-info {
-      color: $default-text-light;
-    }
-
-    [role='close'] {
-      color: $default-text-light;
-    }
-  }
-}
diff --git a/packages/core/scss/_checkboxes.scss b/packages/core/scss/_checkboxes.scss
deleted file mode 100755
index 5b5449c253a..00000000000
--- a/packages/core/scss/_checkboxes.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@mixin checkbox-basic() {
-  $size: $large-space;
-
-  /* Base for label styling */
-  [type='checkbox']:not(:checked),
-  [type='checkbox']:checked {
-    position: absolute;
-    visibility: hidden;
-  }
-
-  .ag-checkbox-input-wrapper {
-    [type='checkbox']:not(:checked),
-    [type='checkbox']:checked {
-      position: absolute;
-      visibility: unset;
-    }
-  }
-
-  [type='checkbox']:not(:checked) + label,
-  [type='checkbox']:checked + label {
-    line-height: $size;
-    user-select: none;
-
-    color: var(--theme-color-std-text);
-  }
-
-  [type='checkbox']:not(:disabled) + label {
-    cursor: pointer;
-  }
-
-  [type='checkbox'] + label:before {
-    content: '';
-    width: $size;
-    height: $size;
-    float: left;
-    margin-right: $tiny-space;
-
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    background-size: contain;
-  }
-
-  [type='checkbox']:not(:checked) {
-    & + label:before {
-      background-image: var(--theme-checkbox);
-    }
-
-    &:hover + label:before {
-      background-image: var(--theme-checkbox-hover);
-    }
-
-    &:active + label:before {
-      background-image: var(--theme-checkbox-active);
-    }
-
-    &:disabled + label::before {
-      background-image: var(--theme-checkbox-disabled);
-    }
-  }
-
-  [type='checkbox']:checked {
-    & + label:before {
-      background-image: var(--theme-checkbox-checked);
-    }
-
-    &:hover + label:before {
-      background-image: var(--theme-checkbox-checked-hover);
-    }
-
-    &:active + label:before {
-      background-image: var(--theme-checkbox-checked-active);
-    }
-
-    &:disabled + label:before {
-      background-image: var(--theme-checkbox-checked-disabled);
-    }
-  }
-
-  [type='checkbox']:disabled + label:before {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  [type='checkbox']:indeterminate {
-    & + label:before {
-      background-image: var(--theme-checkbox-indeterminate);
-    }
-
-    &:hover + label:before {
-      background-image: var(--theme-checkbox-indeterminate-hover);
-    }
-
-    &:active + label:before {
-      background-image: var(--theme-checkbox-indeterminate-active);
-    }
-
-    &:disabled + label:before {
-      background-image: var(--theme-checkbox-indeterminate-disabled);
-    }
-  }
-}
-
-@include checkbox-basic();
diff --git a/packages/core/scss/_colors.scss b/packages/core/scss/_colors.scss
deleted file mode 100755
index f7c11bb6761..00000000000
--- a/packages/core/scss/_colors.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@mixin generate-color-classes($map, $prefixes...) {
-  @each $key, $value in $map {
-    @each $prefix in $prefixes {
-      @if $prefix == 'bg-' {
-        .bg-#{$key} {
-          background: #{$value};
-        }
-      }
-
-      @if $prefix == 'border-' {
-        .border-#{$key} {
-          border: solid 0.062rem #{$value};
-        }
-      }
-
-      @if $prefix == 'text-' {
-        .text-#{$key} {
-          color: #{$value};
-        }
-      }
-    }
-  }
-}
-
-$color-map-basic-ui: (
-  'accent': $accent,
-  'accent-light': $accent-light,
-  'dark-grey': $dark-grey,
-  'dark': $dark,
-  'steel-grey': $steel-grey,
-  'grey': $grey,
-  'light-steel': $light-steel,
-  'light-grey': $light-grey,
-  'light': $light,
-  'white': $white,
-  'error': $error,
-) !default;
-
-$color-map-status: (
-  'undefined': $color-7,
-  'alert': $alert,
-  'critical': $critical,
-  'warning': $warning,
-  'success': $success,
-  'information': $color-marine,
-  'teal': $color-teal,
-  'light-teal': $color-light-teal,
-) !default;
-
-$color-map-text: (
-  'default-text': $default-text,
-  'label': $label,
-  'disabled-text': $disabled-text,
-  'default-text-light': $default-text-light,
-  'label-light': $label-light,
-  'disabled-text-light': $disabled-text-light,
-) !default;
-
-$color-map-border: (
-  'default': $default-border,
-  'soft': $soft-border,
-  'light': $light-border,
-  'soft-light': $soft-light-border,
-) !default;
-
-$color-map-mouse-states: (
-  'hover': $hover,
-  'pressed': $pressed,
-  'hover-light': $hover-light,
-  'pressed-light': $pressed-light,
-) !default;
-
-$color-map-graph: (
-  'graph1': $graph1,
-  'graph1-light': $graph1-light,
-  'graph2': $graph2,
-  'graph2-light': $graph2-light,
-  'graph3': $graph3,
-  'graph3-light': $graph3-light,
-  'graph4': $graph4,
-  'graph4-light': $graph4-light,
-  'graph4-dark': $graph4-dark,
-  'graph5': $graph5,
-  'graph5-light': $graph5-light,
-  'graph6': $graph6,
-) !default;
-
-/* TODO Determine what prefixed classes to generate for each color group. */
-@include generate-color-classes($color-map-basic-ui, 'bg-');
-@include generate-color-classes($color-map-status, 'bg-', 'border-', 'text-');
-@include generate-color-classes($color-map-text, 'bg-', 'text-');
-@include generate-color-classes($color-map-border, 'bg-', 'border-');
-@include generate-color-classes($color-map-mouse-states, 'bg-');
-@include generate-color-classes($color-map-graph, 'bg-', 'text-');
diff --git a/packages/core/scss/v7/_common-variables.scss b/packages/core/scss/_common-variables.scss
similarity index 97%
rename from packages/core/scss/v7/_common-variables.scss
rename to packages/core/scss/_common-variables.scss
index a71adeab537..4c4c1d7cc2a 100644
--- a/packages/core/scss/v7/_common-variables.scss
+++ b/packages/core/scss/_common-variables.scss
@@ -18,6 +18,7 @@ $large-icon-size: 2rem;
 $default-icon-size: 1.5rem;
 $small-icon-size: 1rem;
 
+$default-border-radius: 0.25rem;
 
 /* Fonts */
 $font-path: './fonts/';
diff --git a/packages/core/scss/_core.scss b/packages/core/scss/_core.scss
deleted file mode 100644
index 991c027000c..00000000000
--- a/packages/core/scss/_core.scss
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-// @import '~bootstrap/scss/bootstrap';
-
-/**
- * Mixin and Functions
- */
-@import './mixins/input.scss';
-@import './mixins/fonts.scss';
-@import './mixins/scrollbar.scss';
-@import './mixins/nav.scss';
-@import './mixins/position-sticky.scss';
-
-/**
- * NG Bootstrap
- */
-@import './ngb/ngbDatepicker.scss';
-@import './ngb/ngbHighlight.scss';
-@import './ngb/ngbPopover.scss';
-
-/**
- * Bootstrap
- */
-@import './alert.scss';
-@import './colors.scss';
-@import './graphics.scss';
-@import './fonts.scss';
-@import './forms.scss';
-@import './radiobuttons.scss';
-@import './checkboxes.scss';
-@import './dropdown.scss';
-@import './tables.scss';
-@import './icons.scss';
-@import './modal.scss';
-@import './navbar.scss';
-@import './nav.scss';
-@import './list-group.scss';
-@import './links.scss';
-@import './shadows.scss';
-
-/**
- * Core ui basics
- */
-@import './cui/pill';
-@import './cui/chip';
-@import './cui/menu-item';
-@import './cui/background';
-@import './cui/tile';
-@import './cui/cui-settings';
-@import './cui/cui-popover-news';
-
-/**
- * Fix
- */
-@import './fix/button-fix';
-@import './fix/ngbTimepicker';
-
-body {
-  @include text-default();
-  background-color: var(--theme-color-1);
-}
-
-body:not(.disable-scrollbar) {
-  ::-webkit-scrollbar-button {
-    display: none;
-  }
-
-  /* width */
-  ::-webkit-scrollbar {
-    width: 0.5rem;
-    height: 0.5rem;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    border-radius: 4px;
-    background: var(--theme-color-2);
-  }
-
-  ::-webkit-scrollbar-track:hover {
-    background: var(--theme-color-3);
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    border-radius: 4px;
-    background: var(--theme-color-5);
-  }
-
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--theme-color-6);
-  }
-
-  ::-webkit-scrollbar-corner {
-    display: none;
-  }
-}
diff --git a/packages/core/scss/_dropdown.scss b/packages/core/scss/_dropdown.scss
deleted file mode 100755
index 4b6e66d0145..00000000000
--- a/packages/core/scss/_dropdown.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './mixins/hover';
-
-.dropup,
-.dropright,
-.dropdown,
-.dropleft {
-  .btn {
-    @include ellipsis;
-    display: inline-block;
-    text-align: left;
-    width: 100%;
-  }
-}
-
-.dropdown-group {
-  margin: 0.687rem;
-  display: block;
-  position: relative;
-  width: 21.562rem;
-  border-radius: 0.25rem;
-  background-color: #f8f9fa;
-  border: solid 0.062rem rgba(0, 0, 0, 0.25);
-
-  .dropdown-group-title {
-    display: block;
-    position: relative;
-    font-size: 0.875rem;
-    text-align: left;
-    margin: 0.937rem 0 1.25rem 0.937rem;
-  }
-
-  .dropdown-group-content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    overflow-x: hidden;
-    height: 11.562rem;
-    margin: 0.937rem 0 0.937rem 0.937rem;
-
-    > * {
-      margin-bottom: 1rem;
-    }
-  }
-}
-
-.dropdown-group-submit {
-  display: flex;
-  justify-content: space-between;
-  margin: 0 0.687rem 0 0.687rem;
-}
-
-.dropdown-menu {
-  @include text-default-single;
-  border: var(--theme-soft-bdr-1);
-  box-shadow: var(--theme-box-shadow-lvl-3);
-  background-color: var(--theme-color-1);
-  color: var(--theme-color-std-text);
-  max-width: 100vw;
-  padding: $small-space 0;
-  transition: background-color $default-time;
-
-  &.xl > .dropdown-item {
-    height: 2.5rem;
-    line-height: 2.187rem;
-  }
-}
-
-.dropdown-header {
-  display: flex;
-  align-items: center;
-  height: $large-control-height;
-  color: var(--theme-color-soft-text);
-  padding: 0 $default-space;
-}
-
-.dropdown-item {
-  display: flex;
-  height: $x-large-space;
-  position: relative;
-  align-items: center;
-  cursor: pointer;
-  margin: $tiny-space 0;
-  padding: 0 $default-space;
-
-  @include ghost-hover-pressed;
-
-  color: var(--theme-color-std-text);
-
-  @include hover {
-    color: var(--theme-color-std-text);
-  }
-
-  @include active {
-    color: var(--theme-color-std-text);
-  }
-
-  &.disabled,
-  &:disabled {
-    color: var(--theme-color-weak-text);
-  }
-
-  > a,
-  a:hover,
-  a:active {
-    color: var(--theme-color-std-text);
-  }
-
-  > .glyph {
-    &.glyph-single-check {
-      color: var(--theme-color-primary);
-    }
-
-    margin-left: $tiny-space;
-    margin-right: $default-space;
-  }
-}
-
-.dropdown-item {
-  > input[type='checkbox'] + label {
-    margin-bottom: 0px;
-
-    &::before {
-      margin-right: 1rem;
-    }
-  }
-}
-
-.dropdown-divider {
-  border-top: var(--theme-soft-bdr-1);
-  margin: $small-space $tiny-space;
-}
-
-button.dropdown-toggle {
-  position: relative;
-  padding-right: 1.5rem;
-}
-
-button.dropdown-toggle::after {
-  position: absolute;
-  top: 45%;
-  right: 0.5rem;
-}
diff --git a/packages/core/scss/_fonts.scss b/packages/core/scss/_fonts.scss
index 448b8db4ba5..9b9fccf6af9 100755
--- a/packages/core/scss/_fonts.scss
+++ b/packages/core/scss/_fonts.scss
@@ -64,10 +64,6 @@
   @include text-xl;
 }
 
-.themed-font-color {
-  color: var(--theme-color-std-text);
-}
-
 a {
   color: var(--theme-color-primary);
 }
diff --git a/packages/core/scss/_forms.scss b/packages/core/scss/_forms.scss
deleted file mode 100755
index 94404b2658e..00000000000
--- a/packages/core/scss/_forms.scss
+++ /dev/null
@@ -1,130 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './graphics.scss';
-@import './mixins/text-truncation';
-@import './mixins/shadows';
-
-@mixin from-control-invalid {
-  @include addIconToInput($svg-url-invalid-input);
-  color: $form-feedback-invalid-color;
-}
-
-.form-control,
-.form-control-plaintext {
-  @include text-default();
-  color: var(--theme-color-std-text);
-  @include ellipsis;
-  border-radius: $default-border-radius;
-  height: $default-control-height;
-  min-height: $default-control-height;
-  min-width: $input-min-width;
-  background-color: var(--theme-color-1);
-  border: var(--theme-std-bdr-1);
-
-  &::placeholder {
-    color: var(--theme-color-weak-text);
-  }
-}
-
-.form-control:focus {
-  @include primary-glow;
-  background-color: var(--theme-color-1);
-  border-color: var(--theme-color-primary);
-  color: var(--theme-color-std-text);
-}
-
-.form-control[type='number'] {
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-  }
-
-  padding-inline-end: $input-padding-x;
-  text-align: right;
-
-  &:focus ~ cui-numeric-split-button > button {
-    border-inline-end-color: $primary;
-
-    &:first-child {
-      border-block-start-color: $primary;
-    }
-
-    &:last-child {
-      border-block-end-color: $primary;
-    }
-  }
-}
-
-.form-control[readonly] {
-  background: transparent !important;
-  border-block-start: none !important;
-  border-inline-start: none !important;
-  border-inline-end: none !important;
-  border-radius: 0rem;
-  color: var(--theme-color-std-text);
-}
-
-.form-control:read-only,
-.form-control[readonly],
-.form-control.readonly {
-  box-shadow: none !important;
-}
-
-.form-control:disabled,
-.form-control.disabled {
-  background: transparent !important;
-  border: var(--theme-weak-bdr-1);
-  border-block-start: none !important;
-  border-inline-start: none !important;
-  border-inline-end: none !important;
-  border-radius: 0rem;
-  color: var(--theme-color-weak-text);
-}
-
-.form-control-plaintext {
-  outline: 0;
-  padding-inline-start: $input-padding-x;
-  padding-inline-end: $input-padding-x;
-}
-
-.form-group {
-  position: relative;
-}
-
-.is-invalid {
-  @include from-control-invalid;
-}
-
-.form-control.ng-invalid.ng-touched:not(:focus) {
-  @include addIconToInput($svg-url-invalid-input);
-  border: 0.062rem solid $form-feedback-invalid-color;
-  color: $form-feedback-invalid-color !important;
-}
-
-.input-wrapper {
-  display: flex;
-  position: relative;
-  align-items: center;
-  flex-wrap: nowrap;
-
-  > .glyph {
-    display: block;
-    position: absolute;
-    margin-inline-start: 0.312rem;
-    color: var(--theme-color-std-text);
-  }
-
-  > input {
-    padding-inline-start: 2.2rem;
-  }
-}
-
-select.form-control {
-  padding: 0 0.312rem;
-}
-
-textarea {
-  &.form-control {
-    padding: 0.375rem $small-space;
-  }
-}
diff --git a/packages/core/scss/_graphics.scss b/packages/core/scss/_graphics.scss
deleted file mode 100755
index d22954c33f4..00000000000
--- a/packages/core/scss/_graphics.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
-*/
-
-//                  _                                        _           _            _____   ____    _   _  ____ _______   ______ _____ _____ _______
-//       /\        | |                                      | |         | |          |  __ \ / __ \  | \ | |/ __ \__   __| |  ____|  __ \_   _|__   __|
-//      /  \  _   _| |_ ___   __ _  ___ _ __   ___ _ __ __ _| |_ ___  __| |  ______  | |  | | |  | | |  \| | |  | | | |    | |__  | |  | || |    | |
-//     / /\ \| | | | __/ _ \ / _` |/ _ \ '_ \ / _ \ '__/ _` | __/ _ \/ _` | |______| | |  | | |  | | | . ` | |  | | | |    |  __| | |  | || |    | |
-//    / ____ \ |_| | || (_) | (_| |  __/ | | |  __/ | | (_| | ||  __/ (_| |          | |__| | |__| | | |\  | |__| | | |    | |____| |__| || |_   | |
-//   /_/    \_\__,_|\__\___/ \__, |\___|_| |_|\___|_|  \__,_|\__\___|\__,_|          |_____/ \____/  |_| \_|\____/  |_|    |______|_____/_____|  |_|
-//                            __/ |
-//                           |___/
-
-@import "./mixins/input.scss";
-
-$svg-url-avatar-placeholder: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Cg fill-rule='nonzero'%3E %3Cpath fill='%23FFF' fill-opacity='.8' d='M24,1.0658141e-15 C10.745166,-5.32907052e-16 1.0658141e-15,10.745166 0,24 C-1.0658141e-15,37.254834 10.745166,48 24,48 C37.254834,48 48,37.254834 48,24 C48,17.6348042 45.4714358,11.5303103 40.9705627,7.02943725 C36.4696897,2.52856417 30.3651958,5.32907052e-16 24,1.0658141e-15 Z'/%3E %3Cpath fill='%233F484C' d='M23.7316112 3.19142376C29.2544586 3.19142376 33.7316112 7.66857626 33.7316112 13.1914238 33.7316112 18.7142713 29.2544586 23.1914238 23.7316112 23.1914238 18.2087637 23.1914238 13.7316112 18.7142713 13.7316112 13.1914238 13.7316112 7.66857626 18.2087637 3.19142376 23.7316112 3.19142376zM6.9264446 34.4334476C10.1179892 29.6771528 15.4551683 26.838582 21.1544074 26.8663265L26.8455926 26.8663265C32.5448317 26.838582 37.8820108 29.6771528 41.0735554 34.4334476 37.4479649 40.4324208 30.9723178 44.0852153 24 44.0643291 17.0276822 44.0852153 10.5520351 40.4324208 6.9264446 34.4334476z'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E") !default;
-$svg-url-chevron-left-black: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='0.687rem' height='1.125rem' viewBox='0 0 11 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3EGraphics/icons/UI/chevron/ left%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E%3C/defs%3E %3Cg id='UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Graphics' transform='translate(-507.000000, -378.000000)' fill='%23000000'%3E %3Cg id='Group-3' transform='translate(160.000000, 376.000000)'%3E %3Cg id='Graphics/icons/UI/chevron/-left/black' transform='translate(347.000000, 2.000000)'%3E %3Cpolygon id='Page-1' transform='translate(5.250000, 9.000000) rotate(-180.000000) translate(-5.250000, -9.000000) ' points='1.5 0 0 1.5 7.499 9 0 16.5 1.5 18 10.5 9'%3E%3C/polygon%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E") !default;
-$svg-url-chevron-right-black: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='0.687rem' height='1.125rem' viewBox='0 0 11 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3EGraphics/icons/UI/chevron/ right%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E%3C/defs%3E %3Cg id='UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Graphics' transform='translate(-539.000000, -378.000000)' fill='%23000000'%3E %3Cg id='Group-3' transform='translate(160.000000, 376.000000)'%3E %3Cg id='Graphics/icons/UI/chevron/-right/black' transform='translate(379.000000, 2.000000)'%3E %3Cpolygon id='Page-1' points='1.5 0 0 1.5 7.499 9 0 16.5 1.5 18 10.5 9'%3E%3C/polygon%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E") !default;
-$svg-url-context-menu: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd' opacity='.85'%3E %3Ccircle cx='12' cy='6' r='2' fill='%23000'/%3E %3Ccircle cx='12' cy='18' r='2' fill='%23000'/%3E %3Ccircle cx='12' cy='12' r='2' fill='%23000'/%3E %3C/g%3E %3C/svg%3E") !default;
-$svg-url-filter-accent: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpolygon fill='%234CA9C4' fill-rule='evenodd' points='2 3 10 13 10 22.5 14 18.5 14 13 22 3'/%3E %3C/svg%3E") !default;
-$svg-url-filter-white: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpolygon fill='%23FFF' fill-rule='evenodd' points='2 3 10 13 10 22.5 14 18.5 14 13 22 3'/%3E %3C/svg%3E") !default;
-$svg-url-filter: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpolygon fill-rule='evenodd' points='2 3 10 13 10 22.5 14 18.5 14 13 22 3' opacity='.85'/%3E %3C/svg%3E") !default;
-$svg-url-invalid-input: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='1.625rem' height='1.625rem' viewBox='0 0 26 26' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3EError red%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E%3C/defs%3E %3Cg id='event_management_v0.1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Error-red' transform='translate(-3.000000, -3.000000)' fill='%23EC3041' fill-rule='nonzero'%3E %3Cpath d='M16,3 C8.8321429,3 3,8.8321429 3,16 C3,23.167857 8.8321429,29 16,29 C23.167857,29 29,23.167857 29,16 C29,8.8321429 23.167857,3 16,3 Z M16,5 C22.086977,5 27,9.9130231 27,16 C27,22.086977 22.086977,27 16,27 C9.9130231,27 5,22.086977 5,16 C5,9.9130231 9.9130231,5 16,5 Z' id='Shape'%3E%3C/path%3E %3Cpolygon id='Path-4' transform='translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) ' points='10.2928932 11.7071068 11.7071068 10.2928932 21.7071068 20.2928932 20.2928932 21.7071068'%3E%3C/polygon%3E %3Cpolygon id='Path-4' points='10.2928932 11.7071068 11.7071068 10.2928932 21.7071068 20.2928932 20.2928932 21.7071068'%3E%3C/polygon%3E %3C/g%3E %3C/g%3E %3C/svg%3E") !default;
-$svg-url-search-black: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='1.125rem' height='1.125rem' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3EGraphics/icons/UI/chevron/search/black%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E%3C/defs%3E %3Cg id='UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.85'%3E %3Cg id='Graphics' transform='translate(-572.000000, -378.000000)' fill='%23000000'%3E %3Cg id='Group-3' transform='translate(160.000000, 376.000000)'%3E %3Cg id='Graphics/icons/UI/search/black' transform='translate(412.000000, 2.000000)'%3E %3Cpath d='M12.502,6.491 L11.708,6.491 L11.432,6.765 C12.407,7.902 13,9.376 13,10.991 C13,14.581 10.09,17.491 6.5,17.491 C2.91,17.491 0,14.581 0,10.991 C0,7.401 2.91,4.491 6.5,4.491 C8.115,4.491 9.588,5.083 10.725,6.057 L11.001,5.783 L11.001,4.991 L15.999,0 L17.49,1.491 L12.502,6.491 L12.502,6.491 Z M6.5,6.491 C4.014,6.491 2,8.505 2,10.991 C2,13.476 4.014,15.491 6.5,15.491 C8.985,15.491 11,13.476 11,10.991 C11,8.505 8.985,6.491 6.5,6.491 L6.5,6.491 Z' id='Shape' transform='translate(8.745000, 8.745500) scale(1, -1) translate(-8.745000, -8.745500) '%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E") !default;
-$svg-url-search-white: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='1.125rem' height='1.125rem' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3EGraphics/icons/UI/chevron/search/white%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E%3C/defs%3E %3Cg id='UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Graphics' transform='translate(-905.000000, -660.000000)' fill='%23FFFFFF'%3E %3Cg id='Group-4' transform='translate(162.000000, 657.000000)'%3E %3Cg id='Graphics/icons/UI/search/white' transform='translate(743.000000, 3.000000)'%3E %3Cpath d='M12.502,6.491 L11.708,6.491 L11.432,6.765 C12.407,7.902 13,9.376 13,10.991 C13,14.581 10.09,17.491 6.5,17.491 C2.91,17.491 0,14.581 0,10.991 C0,7.401 2.91,4.491 6.5,4.491 C8.115,4.491 9.588,5.083 10.725,6.057 L11.001,5.783 L11.001,4.991 L15.999,0 L17.49,1.491 L12.502,6.491 L12.502,6.491 Z M6.5,6.491 C4.014,6.491 2,8.505 2,10.991 C2,13.476 4.014,15.491 6.5,15.491 C8.985,15.491 11,13.476 11,10.991 C11,8.505 8.985,6.491 6.5,6.491 L6.5,6.491 Z' id='Shape' transform='translate(8.745000, 8.745500) scale(1, -1) translate(-8.745000, -8.745500) '%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E") !default;
-$svg-url-search: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill-opacity='.85' fill-rule='evenodd' d='M15.1246465,10.313722 L14.4891197,10.313722 L14.2682061,10.5330347 C15.0486074,11.4431028 15.5232515,12.6229095 15.5232515,13.9155743 C15.5232515,16.7890521 13.1940537,19.11825 10.3205759,19.11825 C7.44709808,19.11825 5.11790021,16.7890521 5.11790021,13.9155743 C5.11790021,11.0420965 7.44709808,8.71289868 10.3205759,8.71289868 C11.6132407,8.71289868 12.792247,9.18674237 13.702315,9.96634331 L13.9232287,9.74703052 L13.9232287,9.1131045 L17.923686,5.11825 L19.1170998,6.31166376 L15.1246465,10.313722 L15.1246465,10.313722 Z M10.3205759,10.313722 C8.33075253,10.313722 6.71872349,11.925751 6.71872349,13.9155743 C6.71872349,15.9045973 8.33075253,17.5174267 10.3205759,17.5174267 C12.3095988,17.5174267 13.9224282,15.9045973 13.9224282,13.9155743 C13.9224282,11.925751 12.3095988,10.313722 10.3205759,10.313722 L10.3205759,10.313722 Z' transform='matrix(1 0 0 -1 0 24.236)'/%3E %3C/svg%3E") !default;
-$svg-url-sorting-indicator-asc: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='0.875rem' height='1rem' viewBox='0 0 14 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' transform='rotate(180, 0, 0)'%3E %3C!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3EGraphics/icons/UI/sorting-indicator%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E %3ClinearGradient x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='linearGradient-1'%3E %3Cstop stop-color='%2379BFD3' offset='0%25'%3E%3C/stop%3E %3Cstop stop-color='%234CA9C4' offset='100%25'%3E%3C/stop%3E %3C/linearGradient%3E %3C/defs%3E %3Cg id='UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Graphics' transform='translate(-243.000000, -818.000000)'%3E %3Cg id='Graphics/icons/UI/sorting-indicator' transform='translate(241.000000, 818.000000)'%3E %3Cg id='sorting-indicator'%3E %3Cg id='sort_up_black' opacity='0.2' fill='%23000000'%3E %3Cpolygon id='Path-3' transform='translate(9.000000, 3.000000) rotate(-180.000000) translate(-9.000000, -3.000000) ' points='2.25 0.00470713909 15.75 0 9 6'%3E%3C/polygon%3E %3C/g%3E %3Cg id='sort_down_blue' transform='translate(0.000000, 8.000000)' fill='%234CA9C4'%3E %3Cpolygon id='Path-3' points='2.25 2.00470714 15.75 2 9 8'%3E%3C/polygon%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E") !default;
-$svg-url-sorting-indicator-desc: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='0.875rem' height='1rem' viewBox='0 0 14 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3C!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3EGraphics/icons/UI/sorting-indicator%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs%3E %3ClinearGradient x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='linearGradient-1'%3E %3Cstop stop-color='%2379BFD3' offset='0%25'%3E%3C/stop%3E %3Cstop stop-color='%234CA9C4' offset='100%25'%3E%3C/stop%3E %3C/linearGradient%3E %3C/defs%3E %3Cg id='UI-Elements' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='Graphics' transform='translate(-243.000000, -818.000000)'%3E %3Cg id='Graphics/icons/UI/sorting-indicator' transform='translate(241.000000, 818.000000)'%3E %3Cg id='sorting-indicator'%3E %3Cg id='sort_up_black' opacity='0.2' fill='%23000000'%3E %3Cpolygon id='Path-3' transform='translate(9.000000, 3.000000) rotate(-180.000000) translate(-9.000000, -3.000000) ' points='2.25 0.00470713909 15.75 0 9 6'%3E%3C/polygon%3E %3C/g%3E %3Cg id='sort_down_blue' transform='translate(0.000000, 8.000000)' fill='%234CA9C4'%3E %3Cpolygon id='Path-3' points='2.25 2.00470714 15.75 2 9 8'%3E%3C/polygon%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E") !default;
-
-$graphics: (
-  'avatar-placeholder': $svg-url-avatar-placeholder,
-  'chevron-left-black': $svg-url-chevron-left-black,
-  'chevron-right-black': $svg-url-chevron-right-black,
-  'context-menu': $svg-url-context-menu,
-  'filter-accent': $svg-url-filter-accent,
-  'filter-white': $svg-url-filter-white,
-  'filter': $svg-url-filter,
-  'invalid-input': $svg-url-invalid-input,
-  'search-black': $svg-url-search-black,
-  'search-white': $svg-url-search-white,
-  'search': $svg-url-search,
-  'sorting-indicator-asc': $svg-url-sorting-indicator-asc,
-  'sorting-indicator-desc': $svg-url-sorting-indicator-desc,
-);
-
-$svgSizes: (
-  'small': $small-icon-size,
-  'default': $default-icon-size,
-  'large': $large-icon-size,
-);
-
-@mixin inline-svg-container($width, $height) {
-	display: inline-block;
-	background-size: 100%;
-	width: $width;
-	height: $height;
-}
-
-@mixin inline-svg-as-background($name) {
-	background-color: transparent;
-  background-image: $name;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-	background-size: contain;
-}
-
-@mixin svg-x-list {
-	.svg {
-		@include inline-svg-container($default-icon-size, $default-icon-size)
-	}
-
-	@each $name, $value in $svgSizes {
-		.svg-#{$name} {
-			@include inline-svg-container(#{$value}, #{$value})
-		}
-	}
-
-	@each $name, $value in $graphics {
-		.svg-#{$name} {
-			@include inline-svg-as-background($value);
-		}
-  }
-
-  // TODO: Remove class generatation for class="svg image-xx"
-  @each $name, $value in $graphics {
-		.image-#{$name} {
-			@include inline-svg-as-background($value);
-		}
-  }
-}
-
-@mixin svg-input-x-list {
-  @each $name, $value in $graphics {
-		.input-icon-start-#{$name} {
-			@include addIconToInput($value);
-		}
-  }
-}
-
-@include svg-x-list();
-@include svg-input-x-list();
-
-
-//                  _                                        _           _            _____   ____    _   _  ____ _______   ______ _____ _____ _______
-//       /\        | |                                      | |         | |          |  __ \ / __ \  | \ | |/ __ \__   __| |  ____|  __ \_   _|__   __|
-//      /  \  _   _| |_ ___   __ _  ___ _ __   ___ _ __ __ _| |_ ___  __| |  ______  | |  | | |  | | |  \| | |  | | | |    | |__  | |  | || |    | |
-//     / /\ \| | | | __/ _ \ / _` |/ _ \ '_ \ / _ \ '__/ _` | __/ _ \/ _` | |______| | |  | | |  | | | . ` | |  | | | |    |  __| | |  | || |    | |
-//    / ____ \ |_| | || (_) | (_| |  __/ | | |  __/ | | (_| | ||  __/ (_| |          | |__| | |__| | | |\  | |__| | | |    | |____| |__| || |_   | |
-//   /_/    \_\__,_|\__\___/ \__, |\___|_| |_|\___|_|  \__,_|\__\___|\__,_|          |_____/ \____/  |_| \_|\____/  |_|    |______|_____/_____|  |_|
-//                            __/ |
-//                           |___/
diff --git a/packages/core/scss/_icons.scss b/packages/core/scss/_icons.scss
deleted file mode 100755
index 3588f38f013..00000000000
--- a/packages/core/scss/_icons.scss
+++ /dev/null
@@ -1,72 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@warn "deprecated: Will be removed in Core UI 7.0.0";
-
-$icon-open-burger-white: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'%3E%3C/path%3E%3C/svg%3E") !default;
-$icon-close-burger-white: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2237%22%20height=%2224%22%20viewBox=%220%200%2037%2024%22%3E%3Cg%20fill=%22none%22%20fill-rule=%22evenodd%22%3E%3Cpath%20d=%22M0%200h37v24H0z%22/%3E%3Cg%20fill=%22#FFF%22%3E%3Cpath%20d=%22M10.368%201.04L29.46%2020.132l-2.828%202.828L7.54%203.868z%22/%3E%3Cpath%20d=%22M7.54%2020.132L26.632%201.04l2.828%202.828L10.368%2022.96z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
-
-$icon-modal-close: url('data:image/svg+xml;charset=utf8,%3Csvg%20fill=%22#000000%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20width=%2224%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22/%3E%3Cpath%20d=%22M0%200h24v24H0z%22%20fill=%22none%22/%3E%3C/svg%3E');
-
-$logo-siemens: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2276%22%20height%3D%2212%22%20viewBox%3D%220%200%2076%2012%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M-32-4h160v20H-32z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M.234%2011.579V9.293c1.302.41%202.452.615%203.455.615%201.382%200%202.072-.365%202.072-1.095%200-.272-.1-.5-.3-.686-.207-.195-.736-.469-1.584-.816C2.353%206.684%201.36%206.15.899%205.709.299%205.128%200%204.392%200%203.505%200%202.361.437%201.49%201.308.89%202.17.297%203.293%200%204.678%200%205.44%200%206.545.141%207.99.421V2.62c-1.075-.429-2.072-.644-2.995-.644-1.298%200-1.947.358-1.947%201.07%200%20.269.131.485.392.655.219.136.819.423%201.799.865C6.65%205.192%207.59%205.736%208.06%206.2c.557.55.835%201.26.835%202.134%200%201.252-.545%202.207-1.636%202.865-.883.535-2.029.802-3.435.802-1.189%200-2.386-.14-3.59-.421zm10.486.186h3.232V.202H10.72v11.563zm6.199%200V.202h8.292v2.09h-5.177v2.612h4.507v1.907h-4.507v2.746h5.31v2.208H16.92zm10.537%200V.202h4.192l2.912%207.389L37.545.202h3.981v11.563h-3.065V3.58l-3.395%208.303h-2.003l-3.33-8.303v8.186h-2.277zm17.036%200V.202h8.291v2.09h-5.176v2.612h4.506v1.907h-4.506v2.746h5.31v2.208h-8.425zm10.554%200V.202h3.746l3.976%207.74V.203h2.277v11.563h-3.641l-4.08-7.845v7.845h-2.278zm12.293-.186V9.293c1.292.41%202.442.615%203.455.615%201.383%200%202.074-.365%202.074-1.095%200-.272-.1-.5-.294-.686-.206-.195-.737-.469-1.591-.816-1.518-.62-2.514-1.155-2.98-1.602-.598-.577-.898-1.314-.898-2.214%200-1.137.436-2.005%201.308-2.605C69.275.297%2070.4%200%2071.784%200c.78%200%201.788.125%203.026.373l.286.048V2.62c-1.075-.429-2.076-.644-3.002-.644-1.294%200-1.938.358-1.938%201.07%200%20.269.128.485.39.655.208.13.811.419%201.807.865%201.402.627%202.34%201.171%202.813%201.634.556.55.834%201.26.834%202.134%200%201.252-.542%202.207-1.628%202.865-.887.535-2.035.802-3.441.802-1.19%200-2.387-.14-3.592-.421z%22/%3E%3C/g%3E%3C/svg%3E');
-$logo-siemens-black: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2276%22%20height%3D%2212%22%20viewBox%3D%220%200%2076%2012%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M-32-4h160v20H-32z%22/%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M.234%2011.579V9.293c1.302.41%202.452.615%203.455.615%201.382%200%202.072-.365%202.072-1.095%200-.272-.1-.5-.3-.686-.207-.195-.736-.469-1.584-.816C2.353%206.684%201.36%206.15.899%205.709.299%205.128%200%204.392%200%203.505%200%202.361.437%201.49%201.308.89%202.17.297%203.293%200%204.678%200%205.44%200%206.545.141%207.99.421V2.62c-1.075-.429-2.072-.644-2.995-.644-1.298%200-1.947.358-1.947%201.07%200%20.269.131.485.392.655.219.136.819.423%201.799.865C6.65%205.192%207.59%205.736%208.06%206.2c.557.55.835%201.26.835%202.134%200%201.252-.545%202.207-1.636%202.865-.883.535-2.029.802-3.435.802-1.189%200-2.386-.14-3.59-.421zm10.486.186h3.232V.202H10.72v11.563zm6.199%200V.202h8.292v2.09h-5.177v2.612h4.507v1.907h-4.507v2.746h5.31v2.208H16.92zm10.537%200V.202h4.192l2.912%207.389L37.545.202h3.981v11.563h-3.065V3.58l-3.395%208.303h-2.003l-3.33-8.303v8.186h-2.277zm17.036%200V.202h8.291v2.09h-5.176v2.612h4.506v1.907h-4.506v2.746h5.31v2.208h-8.425zm10.554%200V.202h3.746l3.976%207.74V.203h2.277v11.563h-3.641l-4.08-7.845v7.845h-2.278zm12.293-.186V9.293c1.292.41%202.442.615%203.455.615%201.383%200%202.074-.365%202.074-1.095%200-.272-.1-.5-.294-.686-.206-.195-.737-.469-1.591-.816-1.518-.62-2.514-1.155-2.98-1.602-.598-.577-.898-1.314-.898-2.214%200-1.137.436-2.005%201.308-2.605C69.275.297%2070.4%200%2071.784%200c.78%200%201.788.125%203.026.373l.286.048V2.62c-1.075-.429-2.076-.644-3.002-.644-1.294%200-1.938.358-1.938%201.07%200%20.269.128.485.39.655.208.13.811.419%201.807.865%201.402.627%202.34%201.171%202.813%201.634.556.55.834%201.26.834%202.134%200%201.252-.542%202.207-1.628%202.865-.887.535-2.035.802-3.441.802-1.19%200-2.387-.14-3.592-.421z%22/%3E%3C/g%3E%3C/svg%3E');
-
-.graphics {
-  position: relative;
-  display: block;
-  width: 1.5rem;
-  height: 1.5rem;
-  background-repeat: no-repeat;
-  background-position: left;
-  float: left;
-
-  &.checkmark {
-    background-image: url('data:image/svg+xml;utf8,<svg height="12" viewBox="0 0 15 12" width="15" xmlns="http://www.w3.org/2000/svg"><path d="M1 6l4 4 9-9" fill="none" fill-rule="evenodd" stroke="#000" stroke-opacity=".6" stroke-width="2"></path></svg>');
-  }
-
-  &.eye {
-    background-image: url('data:image/svg+xml;utf8,<svg height="21" viewBox="0 0 22 16" width="22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-1-4h24v24H-1z"></path><path d="M11 .5C6 .5 1.73 3.61 0 8c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C20.27 3.61 16 .5 11 .5zM11 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8C9.34 5 8 6.34 8 8s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="#000" fill-opacity=".4" fill-rule="nonzero"></path></g></svg>');
-  }
-
-  &.remove-eye {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" viewBox="0 0 22 16"><g fill="none" fill-rule="evenodd"><path d="M-1-4h24v24H-1z"/><path fill="#000" fill-opacity=".4" fill-rule="nonzero" d="M11 .5C6 .5 1.73 3.61 0 8c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C20.27 3.61 16 .5 11 .5zM11 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8C9.34 5 8 6.34 8 8s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></g></svg>');
-  }
-
-  &.run-failure {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="21" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path fill="#000" fill-opacity=".4" fill-rule="nonzero" d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-5v-6c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v6H4v2h16v-2h-2z"/><path fill="#D0021B" d="M4.2 22.023L19.29 4.665l1.51 1.312L5.71 23.335z"/><path d="M0 0h24v24H0z"/></g></svg>');
-  }
-
-  &.remove-run-failure {
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="21" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path fill="#000" fill-opacity=".1" fill-rule="nonzero" d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-5v-6c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v6H4v2h16v-2h-2z"/><path fill="#000" fill-opacity=".193" d="M4.2 22.023L19.29 4.665l1.51 1.312L5.71 23.335z"/><path d="M0 0h24v24H0z"/></g></svg>');
-  }
-
-  &.shape-arrow-right {
-    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%229%22%20height=%2213%22%20viewBox=%220%200%209%2013%22%3E%3Cpath%20fill=%22#FFF%22%20fill-rule=%22nonzero%22%20d=%22M1.316%200L0%201.256%204.141%206.5%200%2011.744%201.316%2013l6.812-6.5z%22/%3E%3C/svg%3E');
-  }
-
-  &.siemens-logo {
-    background-image: $logo-siemens;
-  }
-
-  &.close {
-    background-image: $icon-modal-close;
-  }
-
-  &.progress-indeterminate {
-    height: 3rem;
-    width: 3rem;
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='-264.34' y1='-358.45' x2='-231.82' y2='-366.8' gradientTransform='translate(-223.6 -346.9) rotate(180)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.08' stop-color='%234ca9c4'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='280.86' y1='452.35' x2='313.38' y2='444' gradientTransform='translate(-273.6 -415.9)' xlink:href='%23a'/%3E%3C/defs%3E%3Ctitle%3Eprogress_indicator_c48%3C/title%3E%3Cg%3E%3Ccircle cx='24' cy='24' r='22' fill='%23fff' opacity='0.7' style='isolation:isolate'/%3E%3Cpath d='M24,3A21,21,0,1,0,45,24,21,21,0,0,0,24,3Zm0,35A14,14,0,1,1,38,24,14,14,0,0,1,24,38Z' fill='%234ca9c4' opacity='0.2' style='isolation:isolate'/%3E%3Cpath d='M24,9.9A14.1,14.1,0,0,0,9.9,24H3a21,21,0,0,1,42,0H38.1A14.1,14.1,0,0,0,24,9.9Z' fill='url(%23a)'/%3E%3Cpath d='M24,38.1A14.1,14.1,0,0,0,38.1,24H45A21,21,0,0,1,3,24H9.9A14.1,14.1,0,0,0,24,38.1Z' fill='url(%23b)'/%3E%3Ccircle cx='41.5' cy='24.5' r='3.5' fill='%234ca9c4'/%3E%3Ccircle cx='6.5' cy='24.5' r='3.5' fill='%234ca9c4'/%3E %3CanimateTransform attributeType='xml' attributeName='transform' type='rotate' from='0 24 24' to='360 24 24' dur='2s' repeatCount='indefinite'/%3E %3C/g%3E %3C/svg%3E");
-  }
-}
-
-.inline-icon {
-  @extend .graphics;
-  width: 1.5rem;
-  height: 100%;
-
-  &.size-24-24 {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-}
diff --git a/packages/core/scss/_links.scss b/packages/core/scss/_links.scss
deleted file mode 100644
index 8a05af438b5..00000000000
--- a/packages/core/scss/_links.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-a[href] {
-  color: var(--theme-color-primary);
-
-  @include hover {
-    color: var(--theme-color-primary);
-  }
-
-  @include active {
-    color: var(--theme-color-std-text);
-  }
-
-  .glyph {
-    vertical-align: middle;
-
-    &::before {
-      display: inline-block;
-      text-decoration: none;
-    }
-  }
-}
diff --git a/packages/core/scss/_list-group.scss b/packages/core/scss/_list-group.scss
deleted file mode 100755
index 910b426ef3b..00000000000
--- a/packages/core/scss/_list-group.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-/** @deprecated - will be removed in Core UI 7 */
-.list-group-item, .list-group-item-action {
-  height: auto;
-  min-height: $default-control-height;
-  overflow: hidden;
-  padding: $small-space 0 $small-space $default-space;
-  @include text-default();
-
-  &.active {
-    color: $list-group-action-color;
-    background-color: $list-group-bg;
-    border: $list-group-item-border-size solid $accent;
-
-    &:last-child {
-      margin-bottom: $list-group-item-border-size;
-    }
-  }
-}
diff --git a/packages/core/scss/_modal.scss b/packages/core/scss/_modal.scss
deleted file mode 100644
index 57ae8a3570e..00000000000
--- a/packages/core/scss/_modal.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-/** @deprecated - will be removed in Core UI 7 */
-.modal-content {
-  @include box-shadow(4);
-  background-color: var(--theme-color-1);
-  border: var(--theme-soft-bdr-1);
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  padding: $default-space;
-  height: 2.625rem;
-
-  .btn-icon {
-    position: absolute;
-    top: $tiny-space;
-    right: $small-space;
-  }
-}
diff --git a/packages/core/scss/_nav.scss b/packages/core/scss/_nav.scss
deleted file mode 100755
index 7e33c9edf88..00000000000
--- a/packages/core/scss/_nav.scss
+++ /dev/null
@@ -1,97 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-/** @deprecated - will be removed in Core UI 7 */
-.nav-pills {
-  flex-wrap: wrap;
-
-  .nav-item {
-    background-color: $nav-pills-item-bg;
-    border: none;
-    flex-grow: 1;
-    min-width: 0;
-  }
-
-  .nav-link {
-    @include text-l-title;
-
-    height: 2.5rem;
-    display: flex;
-    align-items: center;
-    background-color: transparent;
-    border: solid 0.062rem rgba(1, 1, 1, 0.1);
-    color: rgba(1, 1, 1, 1);
-    justify-content: center;
-
-    &.disabled {
-      opacity: $disabled-opacity;
-    }
-
-    .glyph,
-    .svg,
-    .svg-small,
-    .svg-large {
-      margin-right: $small-space;
-
-      @include media-breakpoint-down(xs) {
-        margin: 0;
-
-        & + .cui-tab-title {
-          display: none;
-        }
-      }
-    }
-
-    &.active {
-      color: $primary;
-    }
-  }
-}
-
-.nav-primary-tab {
-  @include nav-content-tabs(0);
-}
-
-.nav-secondary-tab {
-  @include nav-content-tabs($small-space, $large-space, $font-weight-normal);
-}
-
-.nav-item {
-  cursor: pointer;
-}
-
-.icon-with-label {
-  margin-right: 0.375rem;
-}
-
-.cui-tab-title {
-  @include ellipsis;
-}
-
-.tab-content {
-  padding: $small-space 0;
-}
-
-.tabs-bottom {
-  display: flex;
-  flex-direction: column-reverse;
-  height: 100%;
-
-  .tab-content {
-    flex-grow: 1;
-  }
-
-  .nav-link {
-    border-radius: 0 0 $default-border-radius $default-border-radius !important;
-
-    &.active,
-    &:active {
-      box-shadow: inset 0 0.25rem 0 0 var(--theme-color-primary) !important;
-    }
-
-    &:hover:not(.disabled):not(.active):not(:active) {
-      box-shadow: inset 0 0.25rem 0 0 var(--theme-color-6) !important;
-    }
-  }
-}
diff --git a/packages/core/scss/_navbar.scss b/packages/core/scss/_navbar.scss
deleted file mode 100755
index f3befaadc5f..00000000000
--- a/packages/core/scss/_navbar.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-.navbar {
-  height: $navbar-min-height;
-  flex-wrap: nowrap;
-  z-index: $zindex-fixed;
-  padding: $small-space $default-space $small-space 1.125rem;
-
-  @include media-breakpoint-down(xs) {
-    padding-left: $medium-space;
-  }
-
-  .brand {
-    display: flex;
-    align-items: center;
-
-    .navbar-brand {
-      margin: 0 !important;
-    }
-  }
-}
-
-.navbar-toggler {
-  border: 0;
-  outline: none !important;
-  margin-right: 4.375rem;
-  padding: $tiny-space;
-
-  @include media-breakpoint-down(sm) {
-    margin-right: $large-space !important;
-  }
-
-  @include media-breakpoint-down(xs) {
-    margin-right: 0.75rem !important;
-  }
-}
-
-.navbar-toggler-icon {
-  &.open {
-    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
-    background-image: $navbar-dark-toggler-icon-open-bg;
-  }
-}
-
-.navbar-brand {
-  @include text-default();
-  color: $white;
-  font-style: normal;
-  font-stretch: normal;
-  letter-spacing: normal;
-  text-align: left;
-  padding: 0;
-  align-self: auto !important;
-}
-
-.navbar-brand-siemens {
-  color: $white;
-  margin: 0.375rem - 0.062rem 2.75rem 0.375rem - 0.062rem 0;
-
-  @include media-breakpoint-down(sm) {
-    margin-right: $large-space;
-  }
-
-  @include media-breakpoint-down(xs) {
-    display: none;
-  }
-}
-
-.navbar-dark {
-  background-color: $dark !important;
-  justify-content: flex-start;
-
-  .navbar-center {
-    flex: 0 1 auto;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-
-.burger-icon {
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-  top: -0.0625em;
-
-  .line {
-    opacity: 1;
-    transform: rotate(0) translateY(0) translateX(0);
-    transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
-  }
-}
-
-.burger-icon.open .line-1 {
-  transform: translate(0.562rem, 0rem) rotate(45deg);
-}
-.burger-icon.open .line-2 {
-  opacity: 0;
-}
-.burger-icon.open .line-3 {
-  transform: translate(-0.875rem, 0.625rem) rotate(-45deg);
-}
diff --git a/packages/core/scss/_radiobuttons.scss b/packages/core/scss/_radiobuttons.scss
deleted file mode 100755
index 48eaafbbb08..00000000000
--- a/packages/core/scss/_radiobuttons.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
-* COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-[type='radio'] {
-  visibility: collapse;
-  position: absolute;
-}
-
-[type='radio'] + label {
-  position: relative;
-  margin-bottom: 0;
-  cursor: pointer;
-  user-select: none;
-  line-height: 1.5rem;
-  padding-left: 1.875rem;
-}
-
-[type='radio'] + label::before {
-  content: '';
-  position: absolute;
-  width: 1.25rem;
-  height: 1.25rem;
-  left: 0px;
-  top: 0.2rem;
-
-  border: var(--theme-std-bdr-2);
-
-  border-radius: 100%;
-}
-
-[type='radio'] + label::after {
-  transition: all 0.2s;
-}
-
-[type='radio']:not(:checked) + label::after {
-  opacity: 0;
-  transform: scale(0);
-}
-
-[type='radio']:checked + label::after {
-  content: '';
-  position: absolute;
-  width: 0.625rem;
-  height: 0.625rem;
-
-  top: 0.5rem;
-  left: 0.313rem;
-
-  background-color: var(--theme-color-primary);
-
-  border-radius: 100%;
-
-  opacity: 1;
-  transform: scale(1);
-}
-
-[type='radio']:hover:not(:disabled) + label::before {
-  background-color: var(--theme-ghost-hover);
-}
-
-[type='radio']:active:not(:disabled) + label::before {
-  background-color: var(--theme-ghost-pressed);
-}
-
-[type='radio']:checked + label::before {
-  border-color: var(--theme-color-primary);
-}
-
-[type='radio']:disabled + label {
-  color: var(--theme-color-weak-text);
-  cursor: default;
-
-  &::before {
-    border-color: var(--theme-color-disabled-btn);
-  }
-
-  &::after {
-    background-color: var(--theme-color-disabled-btn);
-  }
-}
diff --git a/packages/core/scss/_shadows.scss b/packages/core/scss/_shadows.scss
deleted file mode 100644
index 8d25c8c9ffc..00000000000
--- a/packages/core/scss/_shadows.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-/** @deprecated - will be converted to custom properties in Core UI 7 */
-$box-shadow-light-lvl-1: 0 0.062rem 0.25rem 0 rgba(0, 0, 0, 0.2), 0 0 0.25rem 0 var(--theme-ghost-pressed);
-$box-shadow-light-lvl-2: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.2), 0 0 0.5rem 0 var(--theme-ghost-pressed);
-$box-shadow-light-lvl-3: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2), 0 0 1rem 0 var(--theme-ghost-pressed);
-$box-shadow-light-lvl-4: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2), 0 0 2rem 0 var(--theme-ghost-pressed);
-$box-shadow-light-lvl-5: 0 1rem 2rem 0 rgba(0, 0, 0, 0.2), 0 0 4rem 0 var(--theme-ghost-pressed);
-$box-shadow-light-main-menu: 0.25rem 0 0.5rem 0 rgba(0, 0, 0, 0.2), 0 0 1rem 0 var(--theme-ghost-pressed);
-
-$box-shadow-dark-lvl-1: 0 0.062rem 0.25rem 0 rgba(0, 0, 0, 0.6), 0 0 0.25rem 0 rgba(0, 0, 0, 0.3);
-$box-shadow-dark-lvl-2: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.6), 0 0 0.5rem 0 rgba(0, 0, 0, 0.3);
-$box-shadow-dark-lvl-3: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.6), 0 0 1rem 0 rgba(0, 0, 0, 0.3);
-$box-shadow-dark-lvl-4: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.6), 0 0 2rem 0 rgba(0, 0, 0, 0.3);
-$box-shadow-dark-lvl-5: 0 1rem 2rem 0 rgba(0, 0, 0, 0.6), 0 0 4rem 0 rgba(0, 0, 0, 0.3);
-$box-shadow-dark-main-menu: 0.25rem 0 0.5rem 0 rgba(0, 0, 0, 0.6), 0 0 1rem 0 rgba(0, 0, 0, 0.3);
diff --git a/packages/core/scss/_tables.scss b/packages/core/scss/_tables.scss
deleted file mode 100755
index 16df99a15c2..00000000000
--- a/packages/core/scss/_tables.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-.table-core-ui {
-  color: var(--theme-color-std-text);
-
-  border-spacing: 0;
-  border-collapse: separate;
-
-  th,
-  td,
-  thead th,
-  tbody + tbody {
-    border: 0;
-  }
-
-  th,
-  td {
-    padding: 0 0 0 $default-space;
-  }
-
-  thead {
-    background-color: var(--theme-color-2);
-
-    tr {
-      height: $table-header-height;
-      min-height: $table-header-height;
-    }
-
-    th {
-      line-height: $table-header-height;
-      border: solid 0.062rem $default-border;
-      border-right: 0;
-      border-left: 0;
-
-      &:first-child {
-        border-left: solid 0.062rem $default-border;
-        border-top-left-radius: 0.25rem;
-      }
-
-      &:last-child {
-        border-right: solid 0.062rem $default-border;
-        border-top-right-radius: 0.25rem;
-      }
-    }
-  }
-
-  tbody {
-    tr {
-      height: $table-cell-height;
-      min-height: $table-cell-height;
-      line-height: $table-cell-height;
-    }
-
-    tr.selected {
-      background-color: var(--theme-base-color-light-teal-15);
-      &::after {
-        content: '';
-        position: absolute;
-        width: 100%;
-        height: $table-header-height;
-        left: 0px;
-        border: 2px solid var(--theme-color-primary);
-      }
-    }
-
-    td {
-      border: var(--theme-weak-bdr-1);
-      border-top: none;
-      border-left: none;
-      border-right: none;
-
-      &:first-child {
-        border-left: solid 0.062rem $default-border;
-      }
-
-      &:last-child {
-        border-right: solid 0.062rem $default-border;
-      }
-    }
-  }
-}
diff --git a/packages/core/scss/_theme-base-colors.scss b/packages/core/scss/_theme-base-colors.scss
deleted file mode 100644
index 68fddccaf14..00000000000
--- a/packages/core/scss/_theme-base-colors.scss
+++ /dev/null
@@ -1,157 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@warn "deprecated: Will be removed in 7.0.0 (https://***REMOVED***/pd-de/ui-library/core-ui/-/issues/547)";
-
-@import './functions/theme';
-
-$color_1: #fff;
-$color_1_85: rgba(255, 255, 255, 0.85);
-$color_1_60: rgba(255, 255, 255, 0.6);
-$color_1_40: rgba(255, 255, 255, 0.4);
-$color_1_25: rgba(255, 255, 255, 0.25);
-$color_1_10: rgba(255, 255, 255, 0.14);
-$color_1_05: rgba(255, 255, 255, 0.07);
-$color_2: #f5f8fa;
-$color_3: #ebf0f5;
-$color_3_60: rgba(235, 240, 245, 0.6);
-$color_3_40: rgba(235, 240, 245, 0.4);
-$color_3_25: rgba(235, 240, 245, 0.25);
-$color_3_15: rgba(235, 240, 245, 0.15);
-$color_4: #dfe6ed;
-$color_4a: #d6dfe7;
-$color_5: #ced9e2;
-$color_6: #becdd7;
-$color_7: #879baa;
-$color_8: #6e7d89;
-$color_8_60: rgba(65, 95, 117, 0.6);
-$color_8_40: rgba(65, 95, 117, 0.4);
-$color_9: #555f69;
-$color_9a: #3e4b51;
-$color_10: #3c464b;
-$color_11: #293339;
-$color_12: #172126;
-$color_12_55: rgba(23, 33, 38, 0.55);
-$color_12_40: rgba(23, 33, 38, 0.4);
-$color_12_25: rgba(23, 33, 38, 0.25);
-$color_12_15: rgba(23, 33, 38, 0.15);
-$color_13: #10181c;
-$color_14: rgba(0, 0, 0, 1);
-$color_14_75: rgba(0, 0, 0, 0.75);
-$color_14_55: rgba(0, 0, 0, 0.55);
-$color_14_40: rgba(0, 0, 0, 0.4);
-$color_14_30: rgba(0, 0, 0, 0.3);
-$color_14_15: rgba(0, 0, 0, 0.15);
-$color_14_10: rgba(0, 0, 0, 0.1);
-$color_14_05: rgba(0, 0, 0, 0.05);
-$color_teal: #0e777c;
-$color_light_teal: #41aaaa;
-$color_light_teal_25: rgba(50, 160, 160, 0.25);
-$color_light_teal_15: rgba(50, 160, 160, 0.15);
-$color_red: #dc0031;
-$color_orange: #eb780a;
-$color_yellow: #ffb900;
-$color_green: #339b00;
-$color_marine: #1e54b3;
-
-$_theme-colors: new-theme(
-  (
-    'color-primary': (
-      'light': #0e777c,
-      'dark': #41aaaa,
-    ),
-    'color-1': (
-      'light': #fff,
-      'dark': #10181c,
-    ),
-    'color-2': (
-      'light': #f5f8fa,
-      'dark': #172126,
-    ),
-    'color-3': (
-      'light': #ebf0f5,
-      'dark': #293339,
-    ),
-    'color-4': (
-      'light': #dfe6ed,
-      'dark': #3c464b,
-    ),
-    'color-4-a': (
-      'light': #d6dfe7,
-      'dark': #3e4b51,
-    ),
-    'color-5': (
-      'light': #ced9e2,
-      'dark': #555f69,
-    ),
-    'color-6': (
-      'light': #becdd7,
-      'dark': #6e7d89,
-    ),
-    'color-7': (
-      'light': #879baa,
-      'dark': #879baa,
-    ),
-    'color-alarm': (
-      'light': #dc0031,
-      'dark': #dc0031,
-    ),
-    'color-critical': (
-      'light': #eb780a,
-      'dark': #eb780a,
-    ),
-    'color-info': (
-      'light': #1e54b3,
-      'dark': #1e54b3,
-    ),
-    'color-neutral': (
-      'light': #879baa,
-      'dark': #879baa,
-    ),
-    'color-success': (
-      'light': #339b00,
-      'dark': #339b00,
-    ),
-    'color-warning': (
-      'light': #ffb900,
-      'dark': #ffb900,
-    ),
-    'color-contrast-text': (
-      'light': rgba(0, 0, 0, 1),
-      'dark': #fff,
-    ),
-    'color-std-text': (
-      'light': rgba(0, 0, 0, 0.75),
-      'dark': rgba(255, 255, 255, 0.85),
-    ),
-    'color-soft-text': (
-      'light': rgba(0, 0, 0, 0.55),
-      'dark': rgba(255, 255, 255, 0.6),
-    ),
-    'color-weak-text': (
-      'light': rgba(0, 0, 0, 0.3),
-      'dark': rgba(255, 255, 255, 0.4),
-    ),
-    'color-inv-contrast-text': (
-      'light': #fff,
-      'dark': rgba(0, 0, 0, 1),
-    ),
-    'color-inv-std-text': (
-      'light': rgba(255, 255, 255, 0.85),
-      'dark': rgba(0, 0, 0, 0.75),
-    ),
-    'color-inv-soft-text': (
-      'light': rgba(255, 255, 255, 0.6),
-      'dark': rgba(0, 0, 0, 0.55),
-    ),
-    'color-inv-weak-text': (
-      'light': rgba(255, 255, 255, 0.4),
-      'dark': rgba(0, 0, 0, 0.3),
-    ),
-    'color-disabled-btn': (
-      'light': rgba(23, 33, 38, 0.25),
-      'dark': rgba(255, 255, 255, 0.25),
-    ),
-  )
-);
diff --git a/packages/core/scss/_variables.scss b/packages/core/scss/_variables.scss
deleted file mode 100755
index 995cf3e115c..00000000000
--- a/packages/core/scss/_variables.scss
+++ /dev/null
@@ -1,221 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@warn "deprecated: Variables will either get converted to custom properties or be removed in Core UI 7.0.0";
-
-@import './theme-base-colors';
-
-/* Fonts */
-$font-path: './fonts/';
-
-/* General */
-$default-border-width: 0.0625rem;
-$default-border-radius: 0.25rem;
-
-$x-large-space: 2rem;
-$large-space: 1.5rem;
-$default-space: 1rem;
-$medium-space: 0.75rem;
-$small-space: 0.5rem;
-$tiny-space: 0.25rem;
-
-$default-control-height: 2rem;
-$large-control-height: 2.5rem;
-$medium-control-height: 1.5rem;
-
-$large-icon-size: 2rem;
-$default-icon-size: 1.5rem;
-$small-icon-size: 1rem;
-
-$default-shadow: 0 0.125rem 1.25rem rgba(0, 0, 0, 0.3);
-$low-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
-
-$disabled-opacity: 0.4;
-$inactive-opacity: 0.1;
-
-$x-slow-time: 1s;
-$slow-time: 500ms;
-$medium-time: 300ms;
-$default-time: 150ms;
-$short-time: 0ms;
-
-$enable-validation-icons: false;
-
-$color-disabled-text: rgba(0, 0, 0, 0.4);
-$color-disabled-text-light: rgba(255, 255, 255, 0.4);
-
-$amount-hover: 5%;
-$amount-active: 10%;
-
-/* Colors */
-/* Basic UI colors */
-
-$dark: #3f484c;
-$dark-grey: #656a6c;
-$steel-grey: #788791;
-$grey: #b4b6b8;
-$light-steel: #e2e4e6;
-$light-grey: #edf0f2;
-$light: #f8f9fa;
-$white: #ffffff;
-$accent: #32a0a0;
-$accent-light: #79bfd3;
-$error: $color-red;
-
-$primary: #0f8287;
-$theme-colors: (
-  'primary': $primary,
-  'secondary': #6c757d,
-  'accent': $accent,
-);
-
-/* Status colors */
-$alert: $color-red;
-$critical: $color-orange;
-$warning: $color-yellow;
-$success: $color-green;
-
-/* Text colors */
-/* Apply theme colors to legacy variables */
-$default-text: rgba(0, 0, 0, 0.75);
-$label: rgba(0, 0, 0, 0.6);
-$disabled-text: $color-disabled-text;
-$default-text-light: #fffffe;
-$label-light: rgba(255, 255, 255, 0.6);
-$disabled-text-light: $color-disabled-text-light;
-
-/* Border colors */
-$default-border: rgba(0, 0, 0, 0.2);
-$soft-border: rgba(1, 1, 1, 0.1);
-$light-border: rgba(255, 255, 255, 0.2);
-$soft-light-border: rgba(255, 255, 255, 0.1);
-
-/* Mouse states*/
-$hover: rgba(0, 0, 0, 0.05);
-$pressed: rgba(0, 0, 0, 0.1);
-$hover-light: rgba(255, 255, 255, 0.06);
-$pressed-light: rgba(255, 255, 255, 0.12);
-
-/* Chart colors */
-$graph1: #aa1d5f;
-$graph1-light: #dda5bf;
-$graph2: #e6752c;
-$graph2-light: #f5c8ab;
-$graph3: #185f84;
-$graph3-light: #a3bfce;
-$graph4: #4caaa8;
-$graph4-light: #b7dddc;
-$graph4-dark: #1f6564;
-$graph5: #711dd0;
-$graph5-light: #be95ec;
-$graph6: #2ae0dc;
-
-/* Navbar */
-$navbar-min-height: 2.5rem;
-
-/* Sidebar */
-$sidebar-padding-top: 3rem;
-$sidebar-item-height: 3.5rem;
-$sidebar-with: 20rem;
-$sidebar-with-sm: 4.5rem;
-$sidebar-legal-bottom: 2.5rem;
-
-/* Checkbox */
-$checkbox-label-padding-left: 1.95em;
-
-/* List group */
-$list-group-item-border-size: 0.125rem;
-
-/* Text formats */
-/* Font sizes */
-$font-size-xs: 0.625rem;
-$font-size-s: 0.75rem;
-$font-size-caption: 0.75rem;
-$font-size-default: 0.875rem;
-$font-size-l: 1rem;
-$font-size-xl: 1.375rem;
-
-/* Line heights */
-$line-height-xs: 1.4em;
-$line-height-s: 1.5em;
-$line-height-caption: 1.5em;
-$line-height-caption-single: 1em;
-$line-height-default: 1.429em;
-$line-height-default-single: 1.143em;
-$line-height-l: 1.5em;
-$line-height-l-single: 1.25em;
-$line-height-h2: 1.455em;
-$line-height-xl: 1.091em;
-
-$font-weight-normal: 400;
-$font-weight-bold: 700;
-
-$enable-shadows: false;
-
-// Button
-$btn-min-width: 5rem;
-$btn-border-width: 0.125rem;
-
-// Dropdown
-$dropdown-link-color: #000000;
-$dropdown-link-hover-color: #000000;
-$dropdown-link-active-bg: #c7ccce;
-$dropdown-link-hover-bg: #ececec;
-$dropdown-item-padding-x: 0.5rem;
-
-// Icons
-$active-padding-left: 0.625rem;
-
-// Modal
-$modal-header-border-width: 0rem;
-$modal-shadow: $default-shadow;
-$modal-md: 40rem;
-
-// Navbar
-$navbar-dark-toggler-border-color: none;
-$navbar-dark-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'%3E%3C/path%3E%3C/svg%3E");
-$navbar-dark-toggler-icon-open-bg: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2237%22%20height=%2224%22%20viewBox=%220%200%2037%2024%22%3E%3Cg%20fill=%22none%22%20fill-rule=%22evenodd%22%3E%3Cpath%20d=%22M0%200h37v24H0z%22/%3E%3Cg%20fill=%22#FFF%22%3E%3Cpath%20d=%22M10.368%201.04L29.46%2020.132l-2.828%202.828L7.54%203.868z%22/%3E%3Cpath%20d=%22M7.54%2020.132L26.632%201.04l2.828%202.828L10.368%2022.96z%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
-
-// Nav
-$nav-pills-border-radius: 0;
-$nav-pills-item-bg: $grey;
-$nav-pills-link-active-bg: $light-steel;
-
-// Input
-$input-padding-y: 0.5rem;
-$input-padding-x: 0.5rem;
-$input-min-width: 2rem;
-
-$input-border-color: $default-border;
-$input-focus-border-color: $primary;
-$input-focus-box-shadow: 0 0 0.25rem 0 $primary;
-
-$input-bg: $white;
-$input-placeholder-color: $default-border;
-
-$input-box-shadow: 0 0 0.25rem 0 $primary;
-$input-focus-width: 0;
-
-$input-transition: border-color $short-time, box-shadow $short-time;
-
-$form-feedback-valid-color: $primary;
-$form-feedback-invalid-color: $alert;
-
-$numeric-split-button-width: 2rem;
-
-// Popover
-$popover-arrow-width: 0.625rem; // Mitigates placement bug in ngb. Should be $default-space.
-$popover-bg: $white;
-$popover-body-padding-x: $default-space;
-$popover-body-padding-y: $default-space;
-$popover-border-color: $default-border;
-
-$table-header-height: 2.5rem;
-$table-hover-bg: $hover;
-$table-cell-height: 2.5rem;
-$focus-border-size: 0.125rem;
-$focus-border: solid $focus-border-size $primary;
-
-// Parameter
-$enable-shadows: false;
diff --git a/packages/core/scss/_vars.generated.scss b/packages/core/scss/_vars.generated.scss
deleted file mode 100644
index 0dfae79bc91..00000000000
--- a/packages/core/scss/_vars.generated.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-:root {
-  --theme-chart-1: #008578;
-  --theme-chart-1-light: #008578;
-  --theme-chart-1-dark: #00ad9d;
-  --theme-chart-1-40: rgba(0, 173, 157, 0.4);
-  --theme-chart-1-40-light: rgba(0, 173, 157, 0.4);
-  --theme-chart-1-40-dark: rgba(0, 173, 157, 0.4);
-  --theme-chart-2: #408087;
-  --theme-chart-2-light: #408087;
-  --theme-chart-2-dark: #50a1aa;
-  --theme-chart-2-40: rgba(80, 161, 170, 0.4);
-  --theme-chart-2-40-light: rgba(80, 161, 170, 0.4);
-  --theme-chart-2-40-dark: rgba(80, 161, 170, 0.4);
-  --theme-chart-3: #0091a3;
-  --theme-chart-3-light: #0091a3;
-  --theme-chart-3-dark: #00a4b5;
-  --theme-chart-3-40: rgba(0, 164, 181, 0.4);
-  --theme-chart-3-40-light: rgba(0, 164, 181, 0.4);
-  --theme-chart-3-40-dark: rgba(0, 164, 181, 0.4);
-  --theme-chart-4: #009fa8;
-  --theme-chart-4-light: #009fa8;
-  --theme-chart-4-dark: #00cad6;
-  --theme-chart-4-40: rgba(0, 202, 214, 0.4);
-  --theme-chart-4-40-light: rgba(0, 202, 214, 0.4);
-  --theme-chart-4-40-dark: rgba(0, 164, 181, 0.4);
-  --theme-chart-5: #617d8c;
-  --theme-chart-5-light: #617d8c;
-  --theme-chart-5-dark: #869fac;
-  --theme-chart-5-40: rgba(134, 159, 172, 0.4);
-  --theme-chart-5-40-light: rgba(134, 159, 172, 0.4);
-  --theme-chart-5-40-dark: rgba(134, 159, 172, 0.4);
-  --theme-chart-6: #0095d9;
-  --theme-chart-6-light: #0095d9;
-  --theme-chart-6-dark: #42c3ff;
-  --theme-chart-6-40: rgba(66, 195, 255, 0.4);
-  --theme-chart-6-40-light: rgba(66, 195, 255, 0.4);
-  --theme-chart-6-40-dark: rgba(66, 195, 255, 0.4);
-  --theme-chart-7: #2473ff;
-  --theme-chart-7-light: #2473ff;
-  --theme-chart-7-dark: #2473ff;
-  --theme-chart-7-40: rgba(36, 115, 255, 0.4);
-  --theme-chart-7-40-light: rgba(36, 115, 255, 0.4);
-  --theme-chart-7-40-dark: rgba(36, 115, 255, 0.4);
-  --theme-chart-8: #6082bd;
-  --theme-chart-8-light: #6082bd;
-  --theme-chart-8-dark: #8eaadb;
-  --theme-chart-8-40: rgba(142, 170, 219, 0.4);
-  --theme-chart-8-40-light: rgba(142, 170, 219, 0.4);
-  --theme-chart-8-40-dark: rgba(142, 170, 219, 0.4);
-  --theme-chart-9: #7584df;
-  --theme-chart-9-light: #7584df;
-  --theme-chart-9-dark: #8c9dff;
-  --theme-chart-9-40: rgba(140, 157, 255, 0.4);
-  --theme-chart-9-40-light: rgba(140, 157, 255, 0.4);
-  --theme-chart-9-40-dark: rgba(140, 157, 255, 0.4);
-  --theme-chart-10: #7c40ff;
-  --theme-chart-10-light: #7c40ff;
-  --theme-chart-10-dark: #8a62ff;
-  --theme-chart-10-40: rgba(138, 98, 255, 0.4);
-  --theme-chart-10-40-light: rgba(138, 98, 255, 0.4);
-  --theme-chart-10-40-dark: rgba(138, 98, 255, 0.4);
-  --theme-chart-11: #9370df;
-  --theme-chart-11-light: #9370df;
-  --theme-chart-11-dark: #b08dfd;
-  --theme-chart-11-40: rgba(176, 141, 253, 0.4);
-  --theme-chart-11-40-light: rgba(176, 141, 253, 0.4);
-  --theme-chart-11-40-dark: rgba(176, 141, 253, 0.4);
-  --theme-chart-12: #c300e6;
-  --theme-chart-12-light: #c300e6;
-  --theme-chart-12-dark: #d500f9;
-  --theme-chart-12-40: rgba(213, 0, 249, 0.4);
-  --theme-chart-12-40-light: rgba(213, 0, 249, 0.4);
-  --theme-chart-12-40-dark: rgba(213, 0, 249, 0.4);
-  --theme-chart-13: #ca5e77;
-  --theme-chart-13-light: #ca5e77;
-  --theme-chart-13-dark: #f38fb1;
-  --theme-chart-13-40: rgba(243, 143, 177, 0.4);
-  --theme-chart-13-40-light: rgba(243, 143, 177, 0.4);
-  --theme-chart-13-40-dark: rgba(243, 143, 177, 0.4);
-  --theme-chart-alarm: #f50037;
-  --theme-chart-alarm-light: #f50037;
-  --theme-chart-alarm-dark: #f50037;
-  --theme-chart-alarm-40: rgba(245, 0, 55, 0.4);
-  --theme-chart-alarm-40-light: rgba(245, 0, 55, 0.4);
-  --theme-chart-alarm-40-dark: rgba(245, 0, 55, 0.4);
-  --theme-chart-alarm-10: rgba(245, 0, 55, 0.1);
-  --theme-chart-alarm-10-light: rgba(245, 0, 55, 0.1);
-  --theme-chart-alarm-10-dark: rgba(245, 0, 55, 0.1);
-  --theme-chart-critical: #ff8d00;
-  --theme-chart-critical-light: #ff8d00;
-  --theme-chart-critical-dark: #ff8d00;
-  --theme-chart-critical-40: rgba(255, 141, 0, 0.4);
-  --theme-chart-critical-40-light: rgba(255, 141, 0, 0.4);
-  --theme-chart-critical-40-dark: rgba(255, 141, 0, 0.4);
-  --theme-chart-info: #1E54B3;
-  --theme-chart-info-light: #1E54B3;
-  --theme-chart-info-dark: #1E54B3;
-  --theme-chart-info-40: rgba(30, 84, 179, 0.4);
-  --theme-chart-info-40-light: rgba(30, 84, 179, 0.4);
-  --theme-chart-info-40-dark: rgba(30, 84, 179, 0.4);
-  --theme-chart-neutral: #879BAB;
-  --theme-chart-neutral-light: #879BAB;
-  --theme-chart-neutral-dark: #879BAB;
-  --theme-chart-neutral-40: rgba(135, 155, 171, 0.4);
-  --theme-chart-neutral-40-light: rgba(135, 155, 171, 0.4);
-  --theme-chart-neutral-40-dark: rgba(135, 155, 171, 0.4);
-  --theme-chart-warning: #ffb900;
-  --theme-chart-warning-light: #ffb900;
-  --theme-chart-warning-dark: #ffb900;
-  --theme-chart-warning-40: rgba(255, 185, 0, 0.4);
-  --theme-chart-warning-40-light: rgba(255, 185, 0, 0.4);
-  --theme-chart-warning-40-dark: rgba(255, 185, 0, 0.4);
-  --theme-chart-warning-10: rgba(255, 185, 0, 0.1);
-  --theme-chart-warning-10-light: rgba(255, 185, 0, 0.1);
-  --theme-chart-warning-10-dark: rgba(255, 185, 0, 0.1);
-  --theme-chart-success: #339b00;
-  --theme-chart-success-light: #339b00;
-  --theme-chart-success-dark: #339b00;
-  --theme-chart-success-40: rgba(51, 155, 0, 0.4);
-  --theme-chart-success-40-light: rgba(51, 155, 0, 0.4);
-  --theme-chart-success-40-dark: rgba(51, 155, 0, 0.4);
-}
diff --git a/packages/core/scss/_z-index.scss b/packages/core/scss/_z-index.scss
new file mode 100644
index 00000000000..915bac1f133
--- /dev/null
+++ b/packages/core/scss/_z-index.scss
@@ -0,0 +1,13 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+
+:root {
+  --theme-z-index-dropdown: 1000;
+  --theme-z-index-sticky: 1020;
+  --theme-z-index-fixed: 1030;
+  --theme-z-index-modal-backdrop: 1040;
+  --theme-z-index-modal: 1050;
+  --theme-z-index-popover: 1060;
+  --theme-z-index-tooltip: 1070;
+}
diff --git a/packages/core/scss/v7/components/_button-group.scss b/packages/core/scss/components/_button-group.scss
similarity index 69%
rename from packages/core/scss/v7/components/_button-group.scss
rename to packages/core/scss/components/_button-group.scss
index 51938527adb..e9061355c10 100644
--- a/packages/core/scss/v7/components/_button-group.scss
+++ b/packages/core/scss/components/_button-group.scss
@@ -2,17 +2,17 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 .btn-group {
-  cw-button:first-child .btn {
+  ix-button:first-child .btn {
     border-top-right-radius: 0px;
     border-bottom-right-radius: 0px;
   }
 
-  cw-button:last-child .btn {
+  ix-button:last-child .btn {
     border-top-left-radius: 0px;
     border-bottom-left-radius: 0px;
   }
 
-  cw-button:not(:first-child):not(:last-child) .btn {
+  ix-button:not(:first-child):not(:last-child) .btn {
     border-radius: 0px;
   }
 }
diff --git a/packages/core/scss/v7/components/_buttons.scss b/packages/core/scss/components/_buttons.scss
similarity index 100%
rename from packages/core/scss/v7/components/_buttons.scss
rename to packages/core/scss/components/_buttons.scss
diff --git a/packages/core/scss/v7/components/_checkboxes.scss b/packages/core/scss/components/_checkboxes.scss
similarity index 100%
rename from packages/core/scss/v7/components/_checkboxes.scss
rename to packages/core/scss/components/_checkboxes.scss
diff --git a/packages/core/scss/v7/components/_dropdown.scss b/packages/core/scss/components/_dropdown.scss
similarity index 98%
rename from packages/core/scss/v7/components/_dropdown.scss
rename to packages/core/scss/components/_dropdown.scss
index 434bccd7be5..ec52eb3af36 100755
--- a/packages/core/scss/v7/components/_dropdown.scss
+++ b/packages/core/scss/components/_dropdown.scss
@@ -83,7 +83,7 @@
   display: flex;
   padding: $tiny-space $small-space;
 
-  cw-icon-button + cw-icon-button {
+  ix-icon-button + ix-icon-button {
     margin-inline-start: $small-space;
   }
 }
diff --git a/packages/core/scss/v7/components/_forms.scss b/packages/core/scss/components/_forms.scss
similarity index 99%
rename from packages/core/scss/v7/components/_forms.scss
rename to packages/core/scss/components/_forms.scss
index a2c158f223d..f0c1c0081a8 100755
--- a/packages/core/scss/v7/components/_forms.scss
+++ b/packages/core/scss/components/_forms.scss
@@ -1,7 +1,7 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-@import './../v7/common-variables';
+@import 'common-variables';
 @import './mixins/hover';
 @import './mixins/text-truncation';
 
diff --git a/packages/core/scss/v7/components/_input-group.scss b/packages/core/scss/components/_input-group.scss
similarity index 100%
rename from packages/core/scss/v7/components/_input-group.scss
rename to packages/core/scss/components/_input-group.scss
diff --git a/packages/core/scss/v7/_links.scss b/packages/core/scss/components/_links.scss
similarity index 100%
rename from packages/core/scss/v7/_links.scss
rename to packages/core/scss/components/_links.scss
diff --git a/packages/core/scss/v7/_modal.scss b/packages/core/scss/components/_modal.scss
similarity index 99%
rename from packages/core/scss/v7/_modal.scss
rename to packages/core/scss/components/_modal.scss
index 2c0d4ece61f..cc16f3f167f 100644
--- a/packages/core/scss/v7/_modal.scss
+++ b/packages/core/scss/components/_modal.scss
@@ -6,12 +6,9 @@
 
 .modal-header {
   @include text-default-title;
-
   padding: 0;
   padding-bottom: $tiny-space;
   border: none;
-
-
 }
 
 .modal-body {
diff --git a/packages/core/scss/v7/components/_radiobuttons.scss b/packages/core/scss/components/_radiobuttons.scss
similarity index 100%
rename from packages/core/scss/v7/components/_radiobuttons.scss
rename to packages/core/scss/components/_radiobuttons.scss
diff --git a/packages/core/scss/v7/components/_shadows.scss b/packages/core/scss/components/_shadows.scss
similarity index 100%
rename from packages/core/scss/v7/components/_shadows.scss
rename to packages/core/scss/components/_shadows.scss
diff --git a/packages/core/scss/core-ui.scss b/packages/core/scss/core-ui.scss
deleted file mode 100755
index 1e9063ed91d..00000000000
--- a/packages/core/scss/core-ui.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '~animate.css/animate.css';
-
-:root {
-  --animate-duration: 150ms;
-}
-
-@import './vars/zIndex';
-@import './vars.generated';
-
-@import './variables';
-@import './core';
-
-@import './themes/classic-light/classic-light';
-@import './themes/classic-dark/classic-dark';
-@import './themes/brand-dark/brand-dark';
-@import './themes/brand-light/brand-light';
-
-@import './../src/components/toast/styles/toast-container';
-
-/*
-* V7 Theme changes
-*/
-
-@import './v7/brand-dark';
-@import './v7/brand-light';
-@import './v7/classic-dark';
-@import './v7/classic-light';
-
-body {
-  @extend .theme-brand-dark;
-}
diff --git a/packages/core/scss/cui/_background.scss b/packages/core/scss/cui/_background.scss
deleted file mode 100644
index ae2bf6bb1c3..00000000000
--- a/packages/core/scss/cui/_background.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-$color-names: 'primary', '1', '2', '3', '4', '5', '6', '7', 'alarm', 'critical',
-  'info', 'neutral', 'success', 'warning';
-
-.bg-dark {
-  background-image: linear-gradient(to bottom, #1d272c, #40545f);
-}
-
-@each $cname in $color-names {
-  .bg-#{$cname} {
-    background-color: var(--theme-bg- + $cname);
-  }
-
-  .bg-light-#{$cname} {
-    background-color: var(--theme-bg- + $cname + -light);
-  }
-
-  .bg-dark-#{$cname} {
-    background-color: var(--theme-bg- + $cname + -dark);
-  }
-}
diff --git a/packages/core/scss/cui/_chip.scss b/packages/core/scss/cui/_chip.scss
deleted file mode 100644
index 623c353f7b3..00000000000
--- a/packages/core/scss/cui/_chip.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '../mixins/chip';
-
-.chip {
-  @include cuiChip;
-}
-
-.cui-chip {
-  @include cuiChip;
-}
diff --git a/packages/core/scss/cui/_cui-popover-news.scss b/packages/core/scss/cui/_cui-popover-news.scss
deleted file mode 100644
index a7f411721cd..00000000000
--- a/packages/core/scss/cui/_cui-popover-news.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-.cui-popover-news {
-  width: 40vw;
-  background-color: var(--theme-color-1);
-  border: var(--theme-weak-bdr-1);
-
-  .cui-popover-news-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    color: var(--theme-color-std-text);
-  }
-
-  .popover-body {
-    color: var(--theme-color-std-text);
-  }
-
-  .cui-popover-news-footer {
-    margin-top: 1rem;
-  }
-
-  .arrow::after {
-    border-right-color: var(--theme-color-1) !important;
-  }
-
-  .arrow::before {
-    border-right-color: var(--theme-color-weak-bdr-1) !important;
-  }
-}
diff --git a/packages/core/scss/cui/_cui-settings.scss b/packages/core/scss/cui/_cui-settings.scss
deleted file mode 100644
index 6c6395b71d2..00000000000
--- a/packages/core/scss/cui/_cui-settings.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-cui-settings {
-  .tab-content {
-    .tab-pane.active {
-      height: 100%;
-    }
-  }
-}
diff --git a/packages/core/scss/cui/_menu-item.scss b/packages/core/scss/cui/_menu-item.scss
deleted file mode 100755
index a850ff84ade..00000000000
--- a/packages/core/scss/cui/_menu-item.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-.cui-mb-button {
-  display: flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  width: 3.25rem;
-  height: 2.5rem;
-
-  &:hover {
-    background-color: $hover;
-  }
-
-  &:active {
-    background-color: $pressed;
-  }
-}
-
-.cui-mb-burger {
-  svg {
-    display: inline-block;
-    fill: var(--theme-base-color-14) !important;
-    vertical-align: middle;
-    position: relative;
-
-    .line {
-      opacity: 1;
-      transform: rotate(0) translateY(0) translateX(0);
-      transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out;
-    }
-  }
-
-  svg.open .line-1 {
-    transform: translate(0.687rem, -0.175rem) rotate(45deg);
-  }
-  svg.open .line-2 {
-    opacity: 0;
-  }
-  svg.open .line-3 {
-    transform: translate(-0.756rem, 0.75rem) rotate(-45deg);
-  }
-}
diff --git a/packages/core/scss/cui/_pill.scss b/packages/core/scss/cui/_pill.scss
deleted file mode 100644
index 332d7def180..00000000000
--- a/packages/core/scss/cui/_pill.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '../mixins/pill';
-
-.cui-pill {
-  @include cuiPill;
-}
diff --git a/packages/core/scss/cui/_tile.scss b/packages/core/scss/cui/_tile.scss
deleted file mode 100644
index c3cc75bf797..00000000000
--- a/packages/core/scss/cui/_tile.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import '../mixins/shadows';
-
-@mixin set-height($height) {
-  height: $height;
-  min-height: $height;
-  max-height: $height;
-}
-
-.cui-tile {
-  $heightSmall: 2.5rem;
-  $heightMedium: 5rem;
-  $heightBig: 10rem;
-  $width: 11.937rem;
-
-  @include set-height($heightSmall);
-  @include box-shadow(1);
-
-  min-width: $width;
-  max-width: $width;
-  width: $width;
-
-  border: $default-border;
-  border-radius: $default-border-radius;
-
-  background-color: var(--theme-color-1);
-  color: var(--theme-color-std-text);
-
-  padding: 0.875rem 1.25rem;
-
-  &.tile-small {
-    @include set-height($heightSmall);
-  }
-
-  &.tile-medium {
-    @include set-height($heightMedium);
-  }
-
-  &.tile-big {
-    @include set-height($heightBig);
-  }
-
-  @each $key, $value in $color-map-status {
-    &.tile-#{$key} {
-      background-color: #{$value};
-      color: automatic-text-color($value, 65);
-    }
-  }
-
-  &:active,
-  &:focus,
-  &:visited {
-    outline: none;
-  }
-}
diff --git a/packages/core/scss/fix/_button-fix.scss b/packages/core/scss/fix/_button-fix.scss
deleted file mode 100644
index 259d05e4d35..00000000000
--- a/packages/core/scss/fix/_button-fix.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-.btn {
-  .glyph {
-    vertical-align: text-bottom;
-  }
-
-  &:focus,
-  &:active {
-    box-shadow: none !important;
-  }
-}
diff --git a/packages/core/scss/fix/_ngbTimepicker.scss b/packages/core/scss/fix/_ngbTimepicker.scss
deleted file mode 100644
index b9d059a3a8f..00000000000
--- a/packages/core/scss/fix/_ngbTimepicker.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
- /** @deprecated - ngb will get removed with Core UI 7 */
-.ngb-tp {
-  .form-control {
-    min-width: 0rem;
-  }
-
-  .btn-link {
-    width: 2.5rem;
-    height: $x-large-space;
-    min-width: 2.5rem;
-    margin: $tiny-space;
-
-    @include hover {
-      background-color: var(--theme-ghost-hover);
-    }
-
-    @include active {
-      background-color: var(--theme-ghost-pressed);
-    }
-
-    color: var(--theme-color-std-text);
-
-    .ngb-tp-chevron::before {
-      border-width: 0.15em 0.15em 0 0;
-    }
-  }
-}
diff --git a/packages/core/scss/functions/_theme.scss b/packages/core/scss/functions/_theme.scss
deleted file mode 100644
index cce69128bca..00000000000
--- a/packages/core/scss/functions/_theme.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-/** @deprecated - will be removed in Core UI 7 */
-@function add-component-theme($target-theme, $to-merge) {
-  // @warn ('DEPRECATION WARNING: Function will be removed in 7.0.0');
-
-  $to-merge-light: map-get($to-merge, 'light');
-  $to-merge-dark: map-get($to-merge, 'dark');
-
-  $target-light: map-get($target-theme, 'light');
-  $target-dark: map-get($target-theme, 'dark');
-
-  $merged-light: map-merge($target-light, $to-merge-light);
-  $merged-dark: map-merge($target-dark, $to-merge-dark);
-
-  @return (light: $merged-light, dark: $merged-dark);
-}
-
-/** @deprecated - will be removed in Core UI 7 */
-@function new-theme($new-theme-map) {
-  // @warn ('DEPRECATION WARNING: Function will be removed in 7.0.0');
-
-  $created-theme-light-map: ();
-  $created-theme-dark-map: ();
-  @each $name, $colors in $new-theme-map {
-    $created-theme-light-map: map-merge(
-      $created-theme-light-map,
-      (
-        $name: map-get($colors, 'light'),
-      )
-    );
-
-    $created-theme-dark-map: map-merge(
-      $created-theme-dark-map,
-      (
-        $name: map-get($colors, 'dark'),
-      )
-    );
-  }
-
-  @return (light: $created-theme-light-map, dark: $created-theme-dark-map);
-}
-
-/** @deprecated - will be removed in Core UI 7 */
-@function theme-variant($light, $dark) {
-  // @warn ('DEPRECATION WARNING: Function will be removed in 7.0.0');
-
-  @return ('light': $light, 'dark': $dark);
-}
diff --git a/packages/core/scss/v7/core-ui.scss b/packages/core/scss/ix.scss
similarity index 93%
rename from packages/core/scss/v7/core-ui.scss
rename to packages/core/scss/ix.scss
index 19958f539e9..46431d7eeb7 100644
--- a/packages/core/scss/v7/core-ui.scss
+++ b/packages/core/scss/ix.scss
@@ -8,7 +8,7 @@
 @import '~animate.css/animate.css';
 
 /* Import global stylings for Web Components */
-@import './../../src/components/toast/styles/toast-container';
+@import './../src/components/toast/styles/toast-container';
 
 /* Default themes */
 @import './theme/brand-dark';
@@ -20,14 +20,14 @@
 /* Common */
 @import './common-variables';
 @import 'fonts';
-@import 'links';
-@import 'modal';
 @import 'z-index';
 
 /* Mixins */
 @import './mixins/fonts';
 
 /* Components */
+@import './components/links';
+@import './components/modal';
 @import './components/buttons';
 @import './components/button-group';
 @import './components/dropdown';
diff --git a/packages/core/scss/mixins/_border.scss b/packages/core/scss/mixins/_border.scss
deleted file mode 100644
index 19b1577e5e0..00000000000
--- a/packages/core/scss/mixins/_border.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@mixin primary-border-2 {
-  border-radius: $tiny-space;
-  border: var(--theme-primary-bdr-1);
-}
diff --git a/packages/core/scss/mixins/_chip.scss b/packages/core/scss/mixins/_chip.scss
deleted file mode 100644
index 08b34c805ea..00000000000
--- a/packages/core/scss/mixins/_chip.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import '../variables';
-@import '../colors';
-@import '../mixins/hover';
-@import '../mixins/state-color';
-@import '../functions/theme';
-
-/** @deprecated - will get renamed to kebab-case with Core UI 7 */
-@mixin cuiChip {
-  display: inline-flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  background-color: transparent;
-  padding: 0.062rem $small-space;
-  border: dashed 0.062rem rgba(0, 0, 0, 0.2);
-  border-radius: 6.25rem;
-
-  cursor: pointer;
-
-  min-height: 2rem;
-  height: 2rem;
-  max-height: 2rem;
-
-  color: var(--theme-color-std-text);
-
-  @each $key, $value in $color-map-status {
-    &.chip-#{$key} {
-      border: solid 0.062rem $value;
-
-      .glyph {
-        margin-right: 0.25rem;
-        color: $value;
-      }
-
-      &:hover {
-        background-color: var(--theme-ghost-hover);
-      }
-
-      &:active {
-        background-color: var(--theme-ghost-active);
-      }
-
-      &.active {
-        background-color: $value;
-        @include state-color($key);
-
-        .glyph {
-          @include state-color($key);
-        }
-
-        &:hover {
-          background-color: darken($value, 3%);
-          border-color: darken($value, 3%);
-        }
-
-        &:active {
-          background-color: darken($value, 10%);
-          border-color: darken($value, 10%);
-        }
-      }
-    }
-  }
-}
diff --git a/packages/core/scss/mixins/_hover.scss b/packages/core/scss/mixins/_hover.scss
index 5078bcdd629..5aa4dea60fa 100644
--- a/packages/core/scss/mixins/_hover.scss
+++ b/packages/core/scss/mixins/_hover.scss
@@ -22,30 +22,33 @@
   }
 }
 
+@mixin focus() {
+  &:not(.disabled):not(:disabled) {
+    &:focus,
+    &:focus-visible {
+      @content;
+    }
+  }
+}
+
+@mixin focus-visible() {
+  &:not(.disabled):not(:disabled) {
+    &:focus-visible {
+      @content;
+    }
+  }
+}
+
 @mixin ghost-hover-pressed {
   &:not(.disabled):not(:disabled) {
     &.hover,
     &:hover {
-      background-color: var(--theme-ghost-hover);
+      background-color: var(--theme-ghost--background--hover);
     }
 
     &.active,
     &:active {
-      background-color: var(--theme-ghost-pressed);
+      background-color: var(--theme-ghost--background--active);
     }
   }
 }
-
-@mixin generic-mouse-states() {
-  &:hover {
-    background-color: var(--theme-generic-bg-hover);
-  }
-
-  &:active {
-    background-color: var(--theme-generic-bg-active);
-  }
-
-  &.selected {
-    background-color: var(--theme-generic-bg-selected);
-  }
-}
diff --git a/packages/core/scss/mixins/_input.scss b/packages/core/scss/mixins/_input.scss
deleted file mode 100755
index da7848e8382..00000000000
--- a/packages/core/scss/mixins/_input.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-/** @deprecated - will get renamed to kebab-case with Core UI 7 */
-@mixin addIconToInput($image) {
-  background-image: $image;
-  background-repeat: no-repeat;
-  background-position: .5rem .3rem;
-  background-size: 1.25rem;
-  padding-left: 2.2rem;
-}
diff --git a/packages/core/scss/mixins/_nav.scss b/packages/core/scss/mixins/_nav.scss
deleted file mode 100755
index 7da0a61173c..00000000000
--- a/packages/core/scss/mixins/_nav.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '../variables';
-
-@mixin nav-content-tabs($start-space: $small-space, $space: $large-space, $font-weight: $font-weight-bold) {
-  @warn "deprecated: Will be removed in 7.0.0 (https://***REMOVED***/pd-de/ui-library/core-ui/-/issues/547)";
-  .nav-item {
-    padding: 0 calc(#{$space} / 2);
-
-    &:first-child {
-      padding-left: $start-space;
-    }
-
-    &:last-child {
-      padding-right: 0;
-    }
-
-    .nav-link {
-      @include text-l-title;
-
-      display: flex;
-      font-weight: $font-weight;
-      padding-left: $small-space;
-      padding-right: $small-space;
-      color: var(--theme-color-soft-text);
-
-      border-top-left-radius: $default-border-radius;
-      border-top-right-radius: $default-border-radius;
-
-      &.active,
-      &:active {
-        color: var(--theme-color-primary);
-        box-shadow: inset 0 -0.25rem 0 0 var(--theme-color-primary);
-      }
-
-      &.disabled {
-        opacity: $disabled-opacity;
-      }
-
-      &:hover:not(.disabled):not(.active):not(:active) {
-        background: var(--theme-ghost-hover);
-        box-shadow: inset 0 -0.25rem 0 0 var(--theme-color-6);
-      }
-    }
-  }
-}
diff --git a/packages/core/scss/mixins/_pill.scss b/packages/core/scss/mixins/_pill.scss
deleted file mode 100644
index 95c1eff56ae..00000000000
--- a/packages/core/scss/mixins/_pill.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@use 'sass:meta';
-
-@import '../variables';
-@import '../fonts';
-@import 'state-color';
-
-/** @deprecated - will get renamed to kebab-case with Core UI 7 */
-@mixin cuiPill {
-  $color-map-status: (
-    'undefined': var(--theme-color-neutral),
-    'alert': var(--theme-color-alarm),
-    'critical': var(--theme-color-critical),
-    'warning': var(--theme-color-warning),
-    'success': var(--theme-color-success),
-    'information': var(--theme-color-info),
-    'teal': var(--theme-base-color-teal),
-    'light-teal': var(--theme-base-color-light-teal),
-  ) !default;
-
-  $cui-pill-height: 1.25rem;
-  display: inline-block;
-  position: relative;
-  height: $cui-pill-height;
-  max-height: $cui-pill-height;
-  line-height: $cui-pill-height;
-  border-radius: 6.25rem;
-  background-color: $default-border;
-  color: var(--theme-color-std-text-dark);
-  padding: 0 $default-space;
-
-  @each $key, $value in $color-map-status {
-    &.pill-#{$key} {
-      @include state-color($key);
-      background-color: #{$value};
-    }
-  }
-}
diff --git a/packages/core/scss/mixins/_position-sticky.scss b/packages/core/scss/mixins/_position-sticky.scss
deleted file mode 100755
index e8d1807cee1..00000000000
--- a/packages/core/scss/mixins/_position-sticky.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@mixin position-sticky {
-  position: -webkit-sticky;
-  position: sticky;
-}
diff --git a/packages/core/scss/mixins/_scrollbar.scss b/packages/core/scss/mixins/_scrollbar.scss
deleted file mode 100755
index c05d74e10e7..00000000000
--- a/packages/core/scss/mixins/_scrollbar.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-// TODO: still needed?
-@mixin cui-scrollbar {
-    ::-webkit-scrollbar {
-        width: $small-space + 2 * $tiny-space;
-    }
-
-    ::-webkit-scrollbar-track {
-        border: $tiny-space solid $white;
-        background-color: rgba(48, 48, 64, 0.05);
-    }
-
-    ::-webkit-scrollbar-thumb {
-        border: $tiny-space solid transparent;
-        background-color: rgba(48, 48, 64, 0.1);
-        background-clip: padding-box;
-    }
-}
diff --git a/packages/core/scss/mixins/_shadows.scss b/packages/core/scss/mixins/_shadows.scss
index 4b434bff033..526efb293e4 100644
--- a/packages/core/scss/mixins/_shadows.scss
+++ b/packages/core/scss/mixins/_shadows.scss
@@ -1,11 +1,6 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-
 @mixin box-shadow($level: 1) {
-  box-shadow: var(--theme-box-shadow-lvl- + $level);
-}
-
-@mixin primary-glow {
-  box-shadow: 0 0 0.25rem 0 var(--theme-color-primary);
+  box-shadow: var(--theme-box-shadow-level-#{$level});
 }
diff --git a/packages/core/scss/mixins/_state-color.scss b/packages/core/scss/mixins/_state-color.scss
deleted file mode 100644
index db5007c59c3..00000000000
--- a/packages/core/scss/mixins/_state-color.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@mixin state-color($state) {
-  @if ($state == 'alert') {
-    color: var(--theme-color-static-white);
-  } @else if ($state == 'critical') {
-    color: var(--theme-color-static-black);
-  } @else if ($state == 'warning') {
-    color: var(--theme-color-static-black);
-  } @else if ($state == 'information') {
-    color: var(--theme-color-static-white);
-  } @else if ($state == 'success') {
-    color: var(--theme-color-static-black);
-  } @else if ($state == 'undefined') {
-    color: var(--theme-color-static-black);
-  } @else if ($state == 'teal') {
-    color: var(--theme-color-inv-contrast-text);
-  }
-}
diff --git a/packages/core/scss/ngb/_ngbDatepicker.scss b/packages/core/scss/ngb/_ngbDatepicker.scss
deleted file mode 100755
index 36d10370c91..00000000000
--- a/packages/core/scss/ngb/_ngbDatepicker.scss
+++ /dev/null
@@ -1,217 +0,0 @@
-/**
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '../buttons';
-@import '../graphics';
-@import '../variables';
-@import '../mixins/hover';
-@import '../mixins/text-truncation';
-
-$border-radius-day: 6.25rem;
-
-ngb-datepicker {
-  background-color: var(--theme-color-1);
-  border: var(--theme-soft-bdr-1) !important;
-  border-radius: $default-border-radius !important;
-
-  &.no-border {
-    border: none !important;
-  }
-}
-
-.ngb-dp-day {
-  width: $large-control-height !important;
-  height: $large-control-height !important;
-  line-height: 1.8;
-}
-
-.ngb-dp-day:focus {
-  outline: none;
-}
-
-.ngb-dp-header {
-  background-color: transparent !important;
-  margin-bottom: $large-space;
-
-  .btn-link {
-    @extend .btn-invisible-secondary;
-    @extend .btn-icon;
-    padding: 0;
-    margin: 0;
-    min-width: $large-control-height;
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-    }
-  }
-}
-
-.ngb-dp-weekdays {
-  background-color: transparent !important;
-  border: none !important;
-}
-
-.ngb-dp-weekday {
-  @include text-default;
-  width: $large-control-height !important;
-  height: $large-control-height !important;
-  font-style: normal !important;
-  font-stretch: normal !important;
-  font-weight: $font-weight-bold;
-  line-height: 1.43 !important;
-  letter-spacing: normal !important;
-  text-align: center !important;
-  color: var(--theme-color-std-text) !important;
-}
-
-.ngb-dp-arrow {
-  .ngb-dp-arrow-btn {
-    font-size: 1rem !important;
-    font-weight: $font-weight-bold !important;
-    outline: none !important;
-    transition: color 0s;
-  }
-
-  .ngb-dp-navigation-chevron {
-    border-width: 0.15rem 0.15rem 0 0;
-  }
-
-  &.right {
-    margin-right: $tiny-space;
-
-    .ngb-dp-arrow-btn {
-      .ngb-dp-navigation-chevron {
-        transform: rotate(45deg) scale(0.7);
-      }
-    }
-  }
-
-  &:not(.right) {
-    margin-left: $tiny-space;
-
-    .ngb-dp-arrow-btn {
-      .ngb-dp-navigation-chevron {
-        transform: rotate(-135deg) scale(0.7);
-      }
-    }
-  }
-}
-
-.day-single,
-.day-range,
-.today {
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: $large-control-height;
-  width: $large-control-height;
-}
-
-.day-single,
-.today {
-  border-radius: $border-radius-day;
-}
-
-.day-single {
-  @include hover {
-    background-color: var(--theme-ghost-hover);
-  }
-
-  @include active {
-    background-color: var(--theme-ghost-pressed);
-  }
-}
-
-.today {
-  border: var(--theme-primary-bdr-1);
-
-  .day-single {
-    width: calc(#{$large-control-height} - #{$tiny-space});
-    height: calc(#{$large-control-height} - #{$tiny-space});
-  }
-}
-
-.day-single.selected {
-  background-color: var(--theme-color-primary) !important;
-  border-radius: $border-radius-day;
-  color: var(--theme-color-inv-contrast-text);
-  font-weight: $font-weight-bold;
-}
-
-.day-range.past {
-  pointer-events: none;
-  color: var(--theme-color-soft-text);
-}
-
-.day-range:not(.faded).range-start {
-  border-radius: $border-radius-day 0 0 $border-radius-day;
-  background-color: var(--theme-color-primary);
-  color: var(--theme-btn-primary-color);
-}
-
-.day-range:not(.faded).range-end {
-  border-radius: 0 $border-radius-day $border-radius-day 0;
-  background-color: var(--theme-color-primary);
-  color: var(--theme-btn-primary-color);
-}
-
-.day-range.faded {
-  background-color: var(--theme-color-primary);
-  color: var(--theme-btn-primary-color);
-}
-
-.day-range.faded:hover {
-  background-color: linear-gradient(darken(#79bfd3, 5%), darken(#79bfd3, 5%));
-  color: var(--theme-btn-primary-color);
-}
-
-.day-range:not(.range-start):not(.faded):not(.selectable):hover {
-  background-color: var(--theme-color-primary);
-  border-radius: 0 $border-radius-day $border-radius-day 0;
-  color: var(--theme-btn-primary-color);
-}
-
-.day-range.selectable:not(.range-start):not(.range-end):hover {
-  background-color: var(--theme-color-primary);
-  border-radius: $border-radius-day;
-  color: var(--theme-btn-primary-color);
-}
-
-.day-range.range-start.range-end.selectable {
-  border-radius: $border-radius-day;
-}
-
-.day-range.range-start:not(.selectable):hover {
-  border-radius: $border-radius-day;
-}
-
-.ngb-dp-month-name {
-  background-color: transparent !important;
-  font-size: $font-size-default !important;
-  font-weight: $font-weight-bold;
-}
-
-.ngb-tp-meridian .btn {
-  min-width: 2.5rem;
-  width: 2.5rem;
-}
-
-.disabled {
-  color: var(--theme-color-weak-text);
-  cursor: initial;
-  pointer-events: none;
-
-  .ngb-dp-arrow,
-  .ngb-dp-weekday,
-  .today,
-  .day-range,
-  :not(.today) > .selected {
-    opacity: $disabled-opacity;
-  }
-
-  .day-single.selected {
-    color: var(--theme-color-inv-weak-text);
-  }
-}
diff --git a/packages/core/scss/ngb/_ngbHighlight.scss b/packages/core/scss/ngb/_ngbHighlight.scss
deleted file mode 100644
index 85125848010..00000000000
--- a/packages/core/scss/ngb/_ngbHighlight.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '../mixins/hover';
-
-.result-marker {
-  background-color: rgba(50, 160, 160, 0.25);
-}
-
-cui-search {
-  .dropdown-item.active,
-  .dropdown-item:active {
-    color: unset;
-    text-decoration: unset;
-    background-color: unset;
-  }
-
-  .dropdown-item {
-    @include hover {
-      background-color: var(--theme-ghost-hover);
-    }
-
-    @include active {
-      background-color: var(--theme-ghost-pressed);
-    }
-  }
-}
diff --git a/packages/core/scss/ngb/_ngbPopover.scss b/packages/core/scss/ngb/_ngbPopover.scss
deleted file mode 100755
index 0425700cde0..00000000000
--- a/packages/core/scss/ngb/_ngbPopover.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.popover {
-  &.dash-board-card-info {
-    max-width: none;
-    .arrow {
-      display: none;
-    }
-  
-    .popover-body {
-      height: 25rem;
-      width: 25rem;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/core/scss/svg/checked-dark.svg b/packages/core/scss/svg/checked-dark.svg
deleted file mode 100644
index 8fbe3072dfa..00000000000
--- a/packages/core/scss/svg/checked-dark.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16">
-  <rect width="100%" height="100%" fill="#41aaaa" />
-  <path fill="#000100" fill-opacity=".85" fill-rule="evenodd"
-    d="M14.293 2.293L15.707 3.707 6 13.414 1.293 8.707 2.707 7.293 6 10.586z" />
-</svg>
diff --git a/packages/core/scss/svg/checked-light.svg b/packages/core/scss/svg/checked-light.svg
deleted file mode 100644
index c0bce62c7e9..00000000000
--- a/packages/core/scss/svg/checked-light.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16">
-  <rect width="100%" height="100%" fill="#0e777c" />
-  <path fill="#FFFFFE" fill-opacity=".85" fill-rule="evenodd"
-    d="M14.293 2.293L15.707 3.707 6 13.414 1.293 8.707 2.707 7.293 6 10.586z" />
-</svg>
diff --git a/packages/core/scss/svg/indeterminate-dark.svg b/packages/core/scss/svg/indeterminate-dark.svg
deleted file mode 100644
index faee240b0e6..00000000000
--- a/packages/core/scss/svg/indeterminate-dark.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-  <rect width="8" height="8" x="5" y="5" fill="#41aaaa" />
-</svg>
diff --git a/packages/core/scss/svg/indeterminate-light.svg b/packages/core/scss/svg/indeterminate-light.svg
deleted file mode 100644
index 04c48f40906..00000000000
--- a/packages/core/scss/svg/indeterminate-light.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
-  <rect width="8" height="8" x="5" y="5" fill="#0e777c" />
-</svg>
diff --git a/packages/core/scss/v7/theme/_define-theme-colors.scss b/packages/core/scss/theme/_define-theme-colors.scss
similarity index 100%
rename from packages/core/scss/v7/theme/_define-theme-colors.scss
rename to packages/core/scss/theme/_define-theme-colors.scss
diff --git a/packages/core/scss/themes/utils/_define-theme-variable.scss b/packages/core/scss/theme/_define-theme-variable.scss
similarity index 100%
rename from packages/core/scss/themes/utils/_define-theme-variable.scss
rename to packages/core/scss/theme/_define-theme-variable.scss
diff --git a/packages/core/scss/v7/theme/_define-theme.scss b/packages/core/scss/theme/_define-theme.scss
similarity index 78%
rename from packages/core/scss/v7/theme/_define-theme.scss
rename to packages/core/scss/theme/_define-theme.scss
index cfc8f352b1d..687649668f0 100644
--- a/packages/core/scss/v7/theme/_define-theme.scss
+++ b/packages/core/scss/theme/_define-theme.scss
@@ -3,8 +3,15 @@
  */
 
 @import './define-theme-variable';
+@import './shadows';
 
-@mixin define-theme($name, $theme-colors, $hover-percentage, $active-percentage, $theme-sizes: ()) {
+@mixin define-theme(
+  $name,
+  $theme-colors,
+  $hover-percentage,
+  $active-percentage,
+  $theme-sizes: ()
+) {
   .theme-#{$name} {
     --theme-l-hover: #{$hover-percentage};
     --theme-l-active: #{$active-percentage};
diff --git a/packages/core/scss/theme/_shadows.scss b/packages/core/scss/theme/_shadows.scss
new file mode 100644
index 00000000000..3d65376eda0
--- /dev/null
+++ b/packages/core/scss/theme/_shadows.scss
@@ -0,0 +1,29 @@
+/*
+ * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
+ */
+@import './define-theme-variable';
+
+@mixin shadows {
+  $box-shadow-lvl-1: 0 1px 4px 0 var(--theme-color-shadow-1),
+    0 0 4px 0 var(--theme-color-shadow-2);
+  $box-shadow-lvl-2: 0 2px 6px 0 var(--theme-color-shadow-1),
+    0 0 8px 0 var(--theme-color-shadow-2);
+  $box-shadow-lvl-3: 0 4px 8px 0 var(--theme-color-shadow-1),
+    0 0 16px 0 var(--theme-color-shadow-2);
+  $box-shadow-lvl-4: 0 8px 16px 0 var(--theme-color-shadow-1),
+    0 0 32px 0 var(--theme-color-shadow-2);
+  $box-shadow-lvl-5: 0 16px 32px 0 var(--theme-color-shadow-1),
+    0 0 64px 0 var(--theme-color-shadow-2);
+
+  @include define-theme-variable('box-shadow-lvl-1', $box-shadow-lvl-1);
+  @include define-theme-variable('box-shadow-lvl-2', $box-shadow-lvl-2);
+  @include define-theme-variable('box-shadow-lvl-3', $box-shadow-lvl-3);
+  @include define-theme-variable('box-shadow-lvl-4', $box-shadow-lvl-4);
+  @include define-theme-variable('box-shadow-lvl-5', $box-shadow-lvl-5);
+
+  @include define-theme-variable('box-shadow-level-1', $box-shadow-lvl-1);
+  @include define-theme-variable('box-shadow-level-2', $box-shadow-lvl-2);
+  @include define-theme-variable('box-shadow-level-3', $box-shadow-lvl-3);
+  @include define-theme-variable('box-shadow-level-4', $box-shadow-lvl-4);
+  @include define-theme-variable('box-shadow-level-5', $box-shadow-lvl-5);
+}
diff --git a/packages/core/scss/v7/theme/_static-colors.scss b/packages/core/scss/theme/_static-colors.scss
similarity index 100%
rename from packages/core/scss/v7/theme/_static-colors.scss
rename to packages/core/scss/theme/_static-colors.scss
diff --git a/packages/core/scss/v7/theme/classic-dark/_sizes.scss b/packages/core/scss/theme/classic-dark/_sizes.scss
similarity index 100%
rename from packages/core/scss/v7/theme/classic-dark/_sizes.scss
rename to packages/core/scss/theme/classic-dark/_sizes.scss
diff --git a/packages/core/scss/v7/theme/classic-dark/_variables.scss b/packages/core/scss/theme/classic-dark/_variables.scss
similarity index 100%
rename from packages/core/scss/v7/theme/classic-dark/_variables.scss
rename to packages/core/scss/theme/classic-dark/_variables.scss
diff --git a/packages/core/scss/v7/theme/classic-dark/index.scss b/packages/core/scss/theme/classic-dark/index.scss
similarity index 100%
rename from packages/core/scss/v7/theme/classic-dark/index.scss
rename to packages/core/scss/theme/classic-dark/index.scss
diff --git a/packages/core/scss/v7/theme/classic-light/_sizes.scss b/packages/core/scss/theme/classic-light/_sizes.scss
similarity index 100%
rename from packages/core/scss/v7/theme/classic-light/_sizes.scss
rename to packages/core/scss/theme/classic-light/_sizes.scss
diff --git a/packages/core/scss/v7/theme/classic-light/_variables.scss b/packages/core/scss/theme/classic-light/_variables.scss
similarity index 100%
rename from packages/core/scss/v7/theme/classic-light/_variables.scss
rename to packages/core/scss/theme/classic-light/_variables.scss
diff --git a/packages/core/scss/v7/theme/classic-light/index.scss b/packages/core/scss/theme/classic-light/index.scss
similarity index 100%
rename from packages/core/scss/v7/theme/classic-light/index.scss
rename to packages/core/scss/theme/classic-light/index.scss
diff --git a/packages/core/scss/themes/classic-dark/_classic-dark.scss b/packages/core/scss/themes/classic-dark/_classic-dark.scss
deleted file mode 100644
index 8543f9364c5..00000000000
--- a/packages/core/scss/themes/classic-dark/_classic-dark.scss
+++ /dev/null
@@ -1,185 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../utils/define-theme';
-@import '../utils/background';
-@import './components/animated-tabs';
-@import './components/basic-navigation';
-@import './components/border';
-@import './components/breadcrumb';
-@import './components/buttons';
-@import './components/checkbox';
-@import './components/event-list';
-@import './components/generic-bg-hover';
-@import './components/ghost-mouse-state';
-@import './components/group';
-@import './components/map-navigation-overlay';
-@import './components/map-navigation';
-@import './components/nav';
-@import './components/shadows';
-@import './components/sidebar-overlay';
-@import './components/vertical-tab-avatar';
-@import './../classic-light/base-colors';
-
-@include define-theme('dark') {
-  @include define-base-colors;
-  @include define-static-colors;
-  @include animated-tabs;
-  @include basic-navigation;
-  @include border;
-  @include breadcrumb;
-  @include buttons;
-  @include checkboxes;
-  @include event-list;
-  @include generic-bg-hover;
-  @include ghost-mouse-state;
-  @include group;
-  @include map-navigation-overlay;
-  @include map-navigation;
-  @include nav;
-  @include shadows;
-  @include sidebar-overlay;
-  @include vertical-tab-avatar;
-
-  @include background((var(--theme-color-1), var(--theme-color-2), var(--theme-color-3), var(--theme-color-4), var(--theme-color-5), var(--theme-color-6), var(--theme-color-7)));
-
-  --theme-color-primary: #0e777c;
-  --theme-color-primary-light: #0e777c;
-  --theme-color-primary-dark: #41aaaa;
-  --theme-color-1: #fff;
-  --theme-color-1-light: #fff;
-  --theme-color-1-dark: #10181c;
-  --theme-color-2: #f5f8fa;
-  --theme-color-2-light: #f5f8fa;
-  --theme-color-2-dark: #172126;
-  --theme-color-3: #ebf0f5;
-  --theme-color-3-light: #ebf0f5;
-  --theme-color-3-dark: #293339;
-  --theme-color-4: #dfe6ed;
-  --theme-color-4-light: #dfe6ed;
-  --theme-color-4-dark: #3c464b;
-  --theme-color-4a: #d6dfe7;
-  --theme-color-4a-light: #d6dfe7;
-  --theme-color-4a-dark: #3e4b51;
-  --theme-color-5: #ced9e2;
-  --theme-color-5-light: #ced9e2;
-  --theme-color-5-dark: #555f69;
-  --theme-color-6: #becdd7;
-  --theme-color-6-light: #becdd7;
-  --theme-color-6-dark: #6e7d89;
-  --theme-color-7: #879baa;
-  --theme-color-7-light: #879baa;
-  --theme-color-7-dark: #879baa;
-  --theme-color-alarm: #dc0031;
-  --theme-color-alarm-light: #dc0031;
-  --theme-color-alarm-dark: #dc0031;
-  --theme-color-critical: #eb780a;
-  --theme-color-critical-light: #eb780a;
-  --theme-color-critical-dark: #eb780a;
-  --theme-color-info: #1e54b3;
-  --theme-color-info-light: #1e54b3;
-  --theme-color-info-dark: #1e54b3;
-  --theme-color-neutral: #879baa;
-  --theme-color-neutral-light: #879baa;
-  --theme-color-neutral-dark: #879baa;
-  --theme-color-success: #339b00;
-  --theme-color-success-light: #339b00;
-  --theme-color-success-dark: #339b00;
-  --theme-color-warning: #ffb900;
-  --theme-color-warning-light: #ffb900;
-  --theme-color-warning-dark: #ffb900;
-  --theme-color-contrast-text: rgba(0, 0, 0, 1);
-  --theme-color-contrast-text-light: rgba(0, 0, 0, 1);
-  --theme-color-contrast-text-dark: #fff;
-  --theme-color-std-text: rgba(0, 0, 0, 0.75);
-  --theme-color-std-text-light: rgba(0, 0, 0, 0.75);
-  --theme-color-std-text-dark: rgba(255, 255, 255, 0.85);
-  --theme-color-soft-text: rgba(0, 0, 0, 0.55);
-  --theme-color-soft-text-light: rgba(0, 0, 0, 0.55);
-  --theme-color-soft-text-dark: rgba(255, 255, 255, 0.6);
-  --theme-color-weak-text: rgba(0, 0, 0, 0.3);
-  --theme-color-weak-text-light: rgba(0, 0, 0, 0.3);
-  --theme-color-weak-text-dark: rgba(255, 255, 255, 0.4);
-  --theme-color-inv-contrast-text: #fff;
-  --theme-color-inv-contrast-text-light: #fff;
-  --theme-color-inv-contrast-text-dark: rgba(0, 0, 0, 1);
-  --theme-color-inv-std-text: rgba(255, 255, 255, 0.85);
-  --theme-color-inv-std-text-light: rgba(255, 255, 255, 0.85);
-  --theme-color-inv-std-text-dark: rgba(0, 0, 0, 0.75);
-  --theme-color-inv-soft-text: rgba(255, 255, 255, 0.6);
-  --theme-color-inv-soft-text-light: rgba(255, 255, 255, 0.6);
-  --theme-color-inv-soft-text-dark: rgba(0, 0, 0, 0.55);
-  --theme-color-inv-weak-text: rgba(255, 255, 255, 0.4);
-  --theme-color-inv-weak-text-light: rgba(255, 255, 255, 0.4);
-  --theme-color-inv-weak-text-dark: rgba(0, 0, 0, 0.3);
-  --theme-color-disabled-btn: rgba(23, 33, 38, 0.25);
-  --theme-color-disabled-btn-light: rgba(23, 33, 38, 0.25);
-  --theme-color-disabled-btn-dark: rgba(255, 255, 255, 0.25);
-
-  --theme-color-primary: var(--theme-base-color-light-teal);
-  --theme-color-1: var(--theme-base-color-13);
-  --theme-color-2: var(--theme-base-color-12);
-  --theme-color-3: var(--theme-base-color-11);
-  --theme-color-4: var(--theme-base-color-10);
-  --theme-color-4a: var(--theme-base-color-9a);
-  --theme-color-5: var(--theme-base-color-9);
-  --theme-color-6: var(--theme-base-color-8);
-  --theme-color-7: var(--theme-base-color-7);
-  --theme-color-alarm: var(--theme-base-color-red);
-  --theme-color-critical: var(--theme-base-color-orange);
-  --theme-color-info: var(--theme-base-color-marine);
-  --theme-color-neutral: var(--theme-base-color-7);
-  --theme-color-success: var(--theme-base-color-green);
-  --theme-color-warning: var(--theme-base-color-yellow);
-  --theme-color-contrast-text: var(--theme-base-color-1);
-  --theme-color-std-text: var(--theme-base-color-1-85);
-  --theme-color-soft-text: var(--theme-base-color-1-60);
-  --theme-color-weak-text: var(--theme-base-color-1-40);
-  --theme-color-inv-contrast-text: var(--theme-base-color-14);
-  --theme-color-inv-std-text: var(--theme-base-color-14-75);
-  --theme-color-inv-soft-text: var(--theme-base-color-14-55);
-  --theme-color-inv-weak-text: var(--theme-base-color-14-30);
-  --theme-color-disabled-btn: var(--theme-base-color-3-25);
-  --theme-color-lightbox-bg: var(--theme-base-color-14-55);
-
-  --theme-chart-1: var(--theme-chart-1-dark);
-  --theme-chart-1-40: var(--theme-chart-1-40-dark);
-  --theme-chart-2: var(--theme-chart-2-dark);
-  --theme-chart-2-40: var(--theme-chart-2-40-dark);
-  --theme-chart-3: var(--theme-chart-3-dark);
-  --theme-chart-3-40: var(--theme-chart-3-40-dark);
-  --theme-chart-4: var(--theme-chart-4-dark);
-  --theme-chart-4-40: var(--theme-chart-4-40-dark);
-  --theme-chart-5: var(--theme-chart-5-dark);
-  --theme-chart-5-40: var(--theme-chart-5-40-dark);
-  --theme-chart-6: var(--theme-chart-6-dark);
-  --theme-chart-6-40: var(--theme-chart-6-40-dark);
-  --theme-chart-7: var(--theme-chart-7-dark);
-  --theme-chart-7-40: var(--theme-chart-7-40-dark);
-  --theme-chart-8: var(--theme-chart-8-dark);
-  --theme-chart-8-40: var(--theme-chart-8-40-dark);
-  --theme-chart-9: var(--theme-chart-9-dark);
-  --theme-chart-9-40: var(--theme-chart-9-40-dark);
-  --theme-chart-10: var(--theme-chart-10-dark);
-  --theme-chart-10-40: var(--theme-chart-10-40-dark);
-  --theme-chart-11: var(--theme-chart-11-dark);
-  --theme-chart-11-40: var(--theme-chart-11-40-dark);
-  --theme-chart-12: var(--theme-chart-12-dark);
-  --theme-chart-12-40: var(--theme-chart-12-40-dark);
-  --theme-chart-13: var(--theme-chart-13-dark);
-  --theme-chart-13-40: var(--theme-chart-13-40-dark);
-  --theme-chart-alarm: var(--theme-chart-alarm-dark);
-  --theme-chart-alarm-40: var(--theme-chart-alarm-40-dark);
-  --theme-chart-alarm-10: var(--theme-chart-alarm-10-dark);
-  --theme-chart-critical: var(--theme-chart-critical-dark);
-  --theme-chart-critical-40: var(--theme-chart-critical-40-dark);
-  --theme-chart-info: var(--theme-chart-info-dark);
-  --theme-chart-info-40: var(--theme-chart-info-40-dark);
-  --theme-chart-neutral: var(--theme-chart-neutral-dark);
-  --theme-chart-neutral-40: var(--theme-chart-neutral-40-dark);
-  --theme-chart-warning: var(--theme-chart-warning-dark);
-  --theme-chart-warning-40: var(--theme-chart-warning-40-dark);
-  --theme-chart-warning-10: var(--theme-chart-warning-10-dark);
-  --theme-chart-success: var(--theme-chart-success-dark);
-  --theme-chart-success-40: var(--theme-chart-success-40-dark);
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_animated-tabs.scss b/packages/core/scss/themes/classic-dark/components/_animated-tabs.scss
deleted file mode 100644
index 1269500b524..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_animated-tabs.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '../../../theme-base-colors';
-
-@mixin animated-tabs-hover() {
-  --theme-animated-tabs-tab-bg-hover: #{darken($color-13, 5%)};
-}
-
-@mixin animated-tabs-tab-bg-active-hover() {
-  --theme-animated-tabs-tab-bg-active-hover: #{darken($color-teal, 5%)};
-}
-
-@mixin animated-tabs-tab-icon-selected() {
-  --theme-animated-tabs-tab-icon-selected: #fffeff;
-}
-
-@mixin animated-tabs {
-  @include animated-tabs-hover();
-  @include animated-tabs-tab-bg-active-hover();
-  @include animated-tabs-tab-icon-selected();
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_basic-navigation.scss b/packages/core/scss/themes/classic-dark/components/_basic-navigation.scss
deleted file mode 100644
index 5100e4d7ae8..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_basic-navigation.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin basic-navigation {
-  @include define-theme-variable('basic-navigation-selected', var(--theme-base-color-11));
-  @include define-theme-variable('basic-navigation-avatar-background', var(--theme-base-color-1));
-  @include define-theme-variable('basic-navigation-avatar-background-opacity', 0.6);
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_border.scss b/packages/core/scss/themes/classic-dark/components/_border.scss
deleted file mode 100644
index 283373907fa..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_border.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin variant-border($name, $size, $color-dark) {
-  --theme-#{$name}: #{$size} solid #{$color-dark};
-}
-
-@mixin border {
-  @include define-theme-variable('color-weak-bdr-1', var(--theme-base-color-3-15));
-  @include variant-border('std-bdr-1', 0.0625rem, #{var(--theme-base-color-3-60)});
-  @include variant-border('std-bdr-2', 0.125rem, #{var(--theme-base-color-3-60)});
-  @include variant-border('primary-bdr-1', 0.0625rem, #{var(--theme-base-color-light-teal)});
-  @include variant-border('primary-bdr-2', 0.125rem, #{var(--theme-base-color-light-teal)});
-  @include variant-border('soft-bdr-1', 0.0625rem, #{var(--theme-base-color-3-40)});
-  @include variant-border('soft-bdr-2', 0.125rem, #{var(--theme-base-color-3-40)});
-  @include variant-border('weak-bdr-1', 0.0625rem, #{var(--theme-base-color-3-15)});
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_breadcrumb.scss b/packages/core/scss/themes/classic-dark/components/_breadcrumb.scss
deleted file mode 100644
index 040f9a01c7e..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_breadcrumb.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-// @import './utils/var-darken';
-@import '../../utils/define-theme-variable';
-
-@mixin breadcrumb {
-  @include define-theme-variable('breadcrumb-hover', #{lighten($color-9, 5%)});
-  @include define-theme-variable('breadcrumb-active', #{lighten($color-9, 10%)});
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_buttons.scss b/packages/core/scss/themes/classic-dark/components/_buttons.scss
deleted file mode 100644
index fd99b8fc492..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_buttons.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '../../utils/define-theme-variable';
-@import './../../../theme-base-colors';
-@import './../../../variables';
-
-$amount-hover: 5%;
-$amount-active: 10%;
-
-@mixin btn-primary {
-  @include define-theme-variable('btn-primary-bg', var(--theme-base-color-light-teal));
-
-  @include define-theme-variable('btn-primary-bg-hover', lighten($color-light-teal, $amount-hover));
-
-  @include define-theme-variable('btn-primary-bg-active', lighten($color-light-teal, $amount-active));
-
-  @include define-theme-variable('btn-primary-color', var(--theme-color-inv-contrast-text));
-
-  @include define-theme-variable('btn-primary-border-color', transparent);
-
-  @include define-theme-variable('btn-primary-bg-disabled', var(--theme-base-color-1-40));
-
-  @include define-theme-variable('btn-primary-color-disabled', var(--theme-base-color-1-40));
-
-  @include define-theme-variable('btn-primary-border-color-disabled', transparent);
-}
-
-@mixin btn-outline-primary {
-  @include define-theme-variable('btn-outline-primary-bg', var(--theme-base-color-13));
-
-  @include define-theme-variable('btn-outline-primary-bg-hover', lighten($color-13, $amount-hover));
-
-  @include define-theme-variable('btn-outline-primary-bg-active', lighten($color-13, $amount-active));
-
-  @include define-theme-variable('btn-outline-primary-color', var(--theme-base-color-light-teal));
-
-  @include define-theme-variable('btn-outline-primary-border-color', var(--theme-base-color-light-teal));
-
-  @include define-theme-variable('btn-outline-primary-border-width', $btn-border-width);
-
-  @include define-theme-variable('btn-outline-primary-border-width-disabled', $btn-border-width);
-
-  @include define-theme-variable('btn-outline-primary-bg-disabled', transparent);
-
-  @include define-theme-variable('btn-outline-primary-color-disabled', var(--theme-base-color-1-25));
-
-  @include define-theme-variable('btn-outline-primary-border-color-disabled', var(--theme-base-color-1-25));
-}
-
-@mixin btn-invisible-primary {
-  @include define-theme-variable('btn-invisible-primary-bg', transparent);
-
-  @include define-theme-variable('btn-invisible-primary-bg-hover', var(--theme-base-color-1-05));
-
-  @include define-theme-variable('btn-invisible-primary-bg-active', var(--theme-base-color-1-10));
-
-  @include define-theme-variable('btn-invisible-primary-width', 0);
-
-  @include define-theme-variable('btn-invisible-primary-color', var(--theme-base-color-light-teal));
-
-  @include define-theme-variable('btn-invisible-primary-border-color', transparent);
-
-  @include define-theme-variable('btn-invisible-primary-bg-disabled', var(--theme-base-color-13));
-
-  @include define-theme-variable('btn-invisible-primary-width-disabled', 0);
-
-  @include define-theme-variable('btn-invisible-primary-color-disabled', var(--theme-base-color-1-40));
-
-  @include define-theme-variable('btn-invisible-primary-border-color-disabled', transparent);
-}
-
-@mixin btn-secondary {
-  @include define-theme-variable('btn-secondary-bg', var(--theme-base-color-9));
-
-  @include define-theme-variable('btn-secondary-bg-hover', lighten($color-9, $amount-hover));
-
-  @include define-theme-variable('btn-secondary-bg-active', lighten($color-9, $amount-active));
-
-  @include define-theme-variable('btn-secondary-color', var(--theme-color-std-text));
-
-  @include define-theme-variable('btn-secondary-border-color', transparent);
-
-  @include define-theme-variable('btn-secondary-bg-disabled', transparent);
-
-  @include define-theme-variable('btn-secondary-color-disabled', var(--theme-color-weak-text));
-
-  @include define-theme-variable('btn-secondary-border-color-disabled', transparent);
-}
-
-@mixin btn-outline-secondary {
-  @include define-theme-variable('btn-outline-secondary-bg', var(--theme-base-color-13));
-
-  @include define-theme-variable('btn-outline-secondary-bg-hover', lighten($color-13, $amount-hover));
-
-  @include define-theme-variable('btn-outline-secondary-bg-active', lighten($color-13, $amount-active));
-
-  @include define-theme-variable('btn-outline-secondary-color', var(--theme-color-std-text));
-
-  @include define-theme-variable('btn-outline-secondary-border-color', var(--theme-base-color-3-60));
-
-  @include define-theme-variable('btn-outline-secondary-border-width', $btn-border-width);
-
-  @include define-theme-variable('btn-outline-secondary-border-width-disabled', $btn-border-width);
-
-  @include define-theme-variable('btn-outline-secondary-bg-disabled', transparent);
-
-  @include define-theme-variable('btn-outline-secondary-color-disabled', var(--theme-color-weak-text));
-
-  @include define-theme-variable('btn-outline-secondary-border-color-disabled', var(--theme-base-color-1-25));
-}
-
-@mixin btn-invisible-secondary {
-  @include define-theme-variable('btn-invisible-secondary-bg', transparent);
-
-  @include define-theme-variable('btn-invisible-secondary-bg-hover', var(--theme-base-color-1-05));
-
-  @include define-theme-variable('btn-invisible-secondary-bg-active', var(--theme-base-color-1-10));
-
-  @include define-theme-variable('btn-invisible-secondary-color', var(--theme-color-std-text));
-
-  @include define-theme-variable('btn-invisible-secondary-border-color', transparent);
-
-  @include define-theme-variable('btn-invisible-secondary-bg-disabled', transparent);
-
-  @include define-theme-variable('btn-invisible-secondary-color-disabled', var(--theme-color-weak-text));
-
-  @include define-theme-variable('btn-invisible-secondary-border-color-disabled', transparent);
-}
-
-@mixin buttons {
-  @include btn-primary();
-  @include btn-outline-primary();
-  @include btn-invisible-primary();
-
-  @include btn-secondary();
-  @include btn-outline-secondary();
-  @include btn-invisible-secondary();
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_checkbox.scss b/packages/core/scss/themes/classic-dark/components/_checkbox.scss
deleted file mode 100644
index f1173bbd8af..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_checkbox.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@mixin checkbox {
-  --theme-checkbox: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0VCRjBGNSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIvPgogIDwvZz4KPC9zdmc+Cg==');
-}
-
-@mixin checkbox-hover {
-  --theme-checkbox-hover: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0VCRjBGNSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0ZGRiIgZmlsbC1vcGFjaXR5PSIuMDciLz4KICA8L2c+Cjwvc3ZnPgo=');
-}
-
-@mixin checkbox-active {
-  --theme-checkbox-active: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0VCRjBGNSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0ZGRiIgZmlsbC1vcGFjaXR5PSIuMTQiLz4KICA8L2c+Cjwvc3ZnPgo=');
-}
-
-@mixin checkbox-disabled {
-  --theme-checkbox-disabled: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1Ii8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLW9wYWNpdHk9Ii4yNSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPC9nPgo8L3N2Zz4K');
-}
-
-@mixin checkbox-checked {
-  --theme-checkbox-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='18' height='18' x='3' y='3' fill='%2341AAAA'/%3E%3Crect width='18' height='18' x='3' y='3'/%3E%3Crect width='24' height='24'/%3E%3Cpolygon fill='%23000100' points='14.293 2.293 15.707 3.707 6 13.414 1.293 8.707 2.707 7.293 6 10.586' transform='translate(4 4)'/%3E%3C/g%3E%3C/svg%3E%0A");
-}
-
-@mixin checkbox-checked-hover {
-  --theme-checkbox-checked-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='18' height='18' x='3' y='3' fill='%2341AAAA'/%3E%3Crect width='18' height='18' x='3' y='3'/%3E%3Crect width='24' height='24' fill='%23FFF' fill-opacity='.07'/%3E%3Cpolygon fill='%23000100' points='14.293 2.293 15.707 3.707 6 13.414 1.293 8.707 2.707 7.293 6 10.586' transform='translate(4 4)'/%3E%3C/g%3E%3C/svg%3E%0A");
-}
-
-@mixin checkbox-checked-active {
-  --theme-checkbox-checked-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='18' height='18' x='3' y='3' fill='%2341AAAA'/%3E%3Crect width='18' height='18' x='3' y='3'/%3E%3Crect width='24' height='24' fill='%23FFF' fill-opacity='.14'/%3E%3Cpolygon fill='%23000100' points='14.293 2.293 15.707 3.707 6 13.414 1.293 8.707 2.707 7.293 6 10.586' transform='translate(4 4)'/%3E%3C/g%3E%3C/svg%3E%0A");
-}
-
-@mixin checkbox-checked-disabled {
-  --theme-checkbox-checked-disabled: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiBmaWxsPSIjRkZGIiBmaWxsLW9wYWNpdHk9Ii4yNSIvPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIi8+CiAgICA8cG9seWdvbiBmaWxsPSIjRkZGRUZGIiBmaWxsLW9wYWNpdHk9Ii40IiBwb2ludHM9IjE0LjI5MyAyLjI5MyAxNS43MDcgMy43MDcgNiAxMy40MTQgMS4yOTMgOC43MDcgMi43MDcgNy4yOTMgNiAxMC41ODYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgNCkiLz4KICA8L2c+Cjwvc3ZnPgo=');
-}
-
-@mixin checkbox-indeterminate {
-  --theme-checkbox-indeterminate: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxQUFBQSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjNDFBQUFBIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4KICA8L2c+Cjwvc3ZnPgo=');
-}
-
-@mixin checkbox-indeterminate-hover {
-  --theme-checkbox-indeterminate-hover: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxQUFBQSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjNDFBQUFBIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiNGRkYiIGZpbGwtb3BhY2l0eT0iLjA3Ii8+CiAgPC9nPgo8L3N2Zz4K');
-}
-
-@mixin checkbox-indeterminate-active {
-  --theme-checkbox-indeterminate-active: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxQUFBQSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjNDFBQUFBIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiNGRkYiIGZpbGwtb3BhY2l0eT0iLjE0Ii8+CiAgPC9nPgo8L3N2Zz4K');
-}
-
-@mixin checkbox-indeterminate-disabled {
-  --theme-checkbox-indeterminate-disabled: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1Ii8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLW9wYWNpdHk9Ii4yNSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjRkZGIiBmaWxsLW9wYWNpdHk9Ii4yNSIvPgogIDwvZz4KPC9zdmc+Cg==');
-}
-
-@mixin checkboxes {
-  @include checkbox();
-  @include checkbox-hover();
-  @include checkbox-active();
-  @include checkbox-disabled();
-
-  @include checkbox-checked();
-  @include checkbox-checked-hover();
-  @include checkbox-checked-active();
-  @include checkbox-checked-disabled();
-
-  @include checkbox-indeterminate();
-  @include checkbox-indeterminate-hover();
-  @include checkbox-indeterminate-active();
-  @include checkbox-indeterminate-disabled();
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_event-list.scss b/packages/core/scss/themes/classic-dark/components/_event-list.scss
deleted file mode 100644
index bd66d211147..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_event-list.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import './../../utils/define-theme-variable';
-
-@mixin event-list-item {
-  --theme-event-list-item-hover: #{lighten($color-13, 5%)};
-  --theme-event-list-item-pressed: #{lighten($color-13, 10%)};
-}
-
-@mixin event-list {
-  @include event-list-item();
-
-  @include define-theme-variable('event-list-item-border', var(--theme-base-color-3-15));
-
-  @include define-theme-variable('event-list-item-bg', var(--theme-base-color-13));
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_generic-bg-hover.scss b/packages/core/scss/themes/classic-dark/components/_generic-bg-hover.scss
deleted file mode 100644
index e75590300be..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_generic-bg-hover.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin generic-bg-hover {
-  @include define-theme-variable('generic-bg-hover', var(--theme-base-color-1-05));
-  @include define-theme-variable('generic-bg-active', var(--theme-base-color-1-10));
-  @include define-theme-variable('generic-bg-selected', var(--theme-base-color-light-teal-25));
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_ghost-mouse-state.scss b/packages/core/scss/themes/classic-dark/components/_ghost-mouse-state.scss
deleted file mode 100644
index e2a01a40e39..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_ghost-mouse-state.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin ghost-mouse-state {
-  @include define-theme-variable('ghost-hover', var(--theme-base-color-1-05));
-  @include define-theme-variable('ghost-pressed', var(--theme-base-color-1-10));
-  @include define-theme-variable('ghost-active', var(--theme-base-color-1-10));
-  @include define-theme-variable('ghost-selected', var(--theme-base-color-light-teal-25));
-  @include define-theme-variable('ghost-weak-selected', var(--theme-base-color-light-teal-15));
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_group.scss b/packages/core/scss/themes/classic-dark/components/_group.scss
deleted file mode 100644
index 8c56e2fb10c..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_group.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin group {
-  @include define-theme-variable('group-hover', #{lighten($color-13, 5%)});
-  @include define-theme-variable('group-pressed', #{lighten($color-13, 10%)});
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_map-navigation-overlay.scss b/packages/core/scss/themes/classic-dark/components/_map-navigation-overlay.scss
deleted file mode 100644
index 8b38638b378..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_map-navigation-overlay.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import '../../../theme-base-colors';
-
-@mixin map-navigation-overlay {
-  @include define-theme-variable('map-navigation-overlay-blur', #{fade-out($color: $color-13, $amount: 0.3)});
-  @include define-theme-variable('map-navigation-overlay-header-blur', #{fade-out($color: $color-11, $amount: 0.3)});
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_map-navigation.scss b/packages/core/scss/themes/classic-dark/components/_map-navigation.scss
deleted file mode 100644
index 6fefecc075d..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_map-navigation.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import './../../../theme-base-colors';
-@import './../../utils/define-theme-variable';
-
-@mixin map-navigation {
-  $logo-siemens: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2276%22%20height%3D%2212%22%20viewBox%3D%220%200%2076%2012%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M-32-4h160v20H-32z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M.234%2011.579V9.293c1.302.41%202.452.615%203.455.615%201.382%200%202.072-.365%202.072-1.095%200-.272-.1-.5-.3-.686-.207-.195-.736-.469-1.584-.816C2.353%206.684%201.36%206.15.899%205.709.299%205.128%200%204.392%200%203.505%200%202.361.437%201.49%201.308.89%202.17.297%203.293%200%204.678%200%205.44%200%206.545.141%207.99.421V2.62c-1.075-.429-2.072-.644-2.995-.644-1.298%200-1.947.358-1.947%201.07%200%20.269.131.485.392.655.219.136.819.423%201.799.865C6.65%205.192%207.59%205.736%208.06%206.2c.557.55.835%201.26.835%202.134%200%201.252-.545%202.207-1.636%202.865-.883.535-2.029.802-3.435.802-1.189%200-2.386-.14-3.59-.421zm10.486.186h3.232V.202H10.72v11.563zm6.199%200V.202h8.292v2.09h-5.177v2.612h4.507v1.907h-4.507v2.746h5.31v2.208H16.92zm10.537%200V.202h4.192l2.912%207.389L37.545.202h3.981v11.563h-3.065V3.58l-3.395%208.303h-2.003l-3.33-8.303v8.186h-2.277zm17.036%200V.202h8.291v2.09h-5.176v2.612h4.506v1.907h-4.506v2.746h5.31v2.208h-8.425zm10.554%200V.202h3.746l3.976%207.74V.203h2.277v11.563h-3.641l-4.08-7.845v7.845h-2.278zm12.293-.186V9.293c1.292.41%202.442.615%203.455.615%201.383%200%202.074-.365%202.074-1.095%200-.272-.1-.5-.294-.686-.206-.195-.737-.469-1.591-.816-1.518-.62-2.514-1.155-2.98-1.602-.598-.577-.898-1.314-.898-2.214%200-1.137.436-2.005%201.308-2.605C69.275.297%2070.4%200%2071.784%200c.78%200%201.788.125%203.026.373l.286.048V2.62c-1.075-.429-2.076-.644-3.002-.644-1.294%200-1.938.358-1.938%201.07%200%20.269.128.485.39.655.208.13.811.419%201.807.865%201.402.627%202.34%201.171%202.813%201.634.556.55.834%201.26.834%202.134%200%201.252-.542%202.207-1.628%202.865-.887.535-2.035.802-3.441.802-1.19%200-2.387-.14-3.592-.421z%22/%3E%3C/g%3E%3C/svg%3E');
-
-  @include define-theme-variable('vertical-tabs-font-color', var(--theme-base-color-1-85));
-  @include define-theme-variable('vertical-tabs-background', #3f4b52);
-  @include define-theme-variable('map-navigation-header', var(--theme-color-2));
-  @include define-theme-variable('map-navigation-background', var(--theme-base-color-11));
-
-  @include define-theme-variable('map-navigation-brand', $logo-siemens);
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_nav.scss b/packages/core/scss/themes/classic-dark/components/_nav.scss
deleted file mode 100644
index 2801945b9ea..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_nav.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin nav {
-  @include define-theme-variable('nav-item-bg-hover', var(--theme-base-color-1-05));
-  @include define-theme-variable('nav-font-color', var(--theme-base-color-1-60));
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_shadows.scss b/packages/core/scss/themes/classic-dark/components/_shadows.scss
deleted file mode 100644
index 5f6e511a030..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_shadows.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-@import './../../../shadows';
-
-@mixin shadows {
-  @include define-theme-variable('box-shadow-lvl-1', $box-shadow-dark-lvl-1);
-  @include define-theme-variable('box-shadow-lvl-2', $box-shadow-dark-lvl-2);
-  @include define-theme-variable('box-shadow-lvl-3', $box-shadow-dark-lvl-3);
-  @include define-theme-variable('box-shadow-lvl-4', $box-shadow-dark-lvl-4);
-  @include define-theme-variable('box-shadow-lvl-5', $box-shadow-dark-lvl-5);
-  @include define-theme-variable('box-shadow-main-menu', $box-shadow-dark-main-menu);
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_sidebar-overlay.scss b/packages/core/scss/themes/classic-dark/components/_sidebar-overlay.scss
deleted file mode 100644
index 537e6c2b300..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_sidebar-overlay.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin sidebar-overlay {
-  @include define-theme-variable('sidebar-overlay-blur', #{fade-out($color-13, 0.15)});
-}
diff --git a/packages/core/scss/themes/classic-dark/components/_vertical-tab-avatar.scss b/packages/core/scss/themes/classic-dark/components/_vertical-tab-avatar.scss
deleted file mode 100644
index e401bc8f9d8..00000000000
--- a/packages/core/scss/themes/classic-dark/components/_vertical-tab-avatar.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '../../../theme-base-colors';
-
-@mixin vertical-tab-avatar {
-  @include define-theme-variable('vertical-tab-avatar-hover', #{lighten($color-9, 5%)});
-  @include define-theme-variable('vertical-tab-avatar-pressed', #{lighten($color-9, 10%)});
-}
diff --git a/packages/core/scss/themes/classic-light/_base-colors.scss b/packages/core/scss/themes/classic-light/_base-colors.scss
deleted file mode 100644
index 424e5f11cd3..00000000000
--- a/packages/core/scss/themes/classic-light/_base-colors.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-$color_1: #fff;
-$color_1_85: rgba(255, 255, 255, 0.85);
-$color_1_60: rgba(255, 255, 255, 0.6);
-$color_1_40: rgba(255, 255, 255, 0.4);
-$color_1_25: rgba(255, 255, 255, 0.25);
-$color_1_10: rgba(255, 255, 255, 0.14);
-$color_1_05: rgba(255, 255, 255, 0.07);
-$color_2: #f5f8fa;
-$color_3: #ebf0f5;
-$color_3_60: rgba(235, 240, 245, 0.6);
-$color_3_40: rgba(235, 240, 245, 0.4);
-$color_3_25: rgba(235, 240, 245, 0.25);
-$color_3_15: rgba(235, 240, 245, 0.15);
-$color_4: #dfe6ed;
-$color_4a: #d6dfe7;
-$color_5: #ced9e2;
-$color_6: #becdd7;
-$color_7: #879baa;
-$color_8: #6e7d89;
-$color_8_60: rgba(65, 95, 117, 0.6);
-$color_8_40: rgba(65, 95, 117, 0.4);
-$color_9: #555f69;
-$color_9a: #3e4b51;
-$color_10: #3c464b;
-$color_11: #293339;
-$color_12: #172126;
-$color_12_55: rgba(23, 33, 38, 0.55);
-$color_12_40: rgba(23, 33, 38, 0.4);
-$color_12_25: rgba(23, 33, 38, 0.25);
-$color_12_15: rgba(23, 33, 38, 0.15);
-$color_13: #10181c;
-$color_14: rgba(0, 0, 0, 1);
-$color_14_75: rgba(0, 0, 0, 0.75);
-$color_14_55: rgba(0, 0, 0, 0.55);
-$color_14_40: rgba(0, 0, 0, 0.4);
-$color_14_30: rgba(0, 0, 0, 0.3);
-$color_14_15: rgba(0, 0, 0, 0.15);
-$color_14_10: rgba(0, 0, 0, 0.1);
-$color_14_05: rgba(0, 0, 0, 0.05);
-$color_teal: #0e777c;
-$color_light_teal: #41aaaa;
-$color_light_teal_25: rgba(50, 160, 160, 0.25);
-$color_light_teal_15: rgba(50, 160, 160, 0.15);
-$color_red: #dc0031;
-$color_orange: #eb780a;
-$color_yellow: #ffb900;
-$color_green: #339b00;
-$color_marine: #1e54b3;
-
-@mixin define-base-colors {
-  --theme-base-color-1: #fff;
-  --theme-base-color-1-85: rgba(255, 255, 255, 0.85);
-  --theme-base-color-1-60: rgba(255, 255, 255, 0.6);
-  --theme-base-color-1-40: rgba(255, 255, 255, 0.4);
-  --theme-base-color-1-25: rgba(255, 255, 255, 0.25);
-  --theme-base-color-1-10: rgba(255, 255, 255, 0.14);
-  --theme-base-color-1-05: rgba(255, 255, 255, 0.07);
-  --theme-base-color-2: #f5f8fa;
-  --theme-base-color-3: #ebf0f5;
-  --theme-base-color-3-60: rgba(235, 240, 245, 0.6);
-  --theme-base-color-3-40: rgba(235, 240, 245, 0.4);
-  --theme-base-color-3-25: rgba(235, 240, 245, 0.25);
-  --theme-base-color-3-15: rgba(235, 240, 245, 0.15);
-  --theme-base-color-4: #dfe6ed;
-  --theme-base-color-4a: #d6dfe7;
-  --theme-base-color-5: #ced9e2;
-  --theme-base-color-6: #becdd7;
-  --theme-base-color-7: #879baa;
-  --theme-base-color-8: #6e7d89;
-  --theme-base-color-8-60: rgba(65, 95, 117, 0.6);
-  --theme-base-color-8-40: rgba(65, 95, 117, 0.4);
-  --theme-base-color-9: #555f69;
-  --theme-base-color-9a: #3e4b51;
-  --theme-base-color-10: #3c464b;
-  --theme-base-color-11: #293339;
-  --theme-base-color-12: #172126;
-  --theme-base-color-12-55: rgba(23, 33, 38, 0.55);
-  --theme-base-color-12-40: rgba(23, 33, 38, 0.4);
-  --theme-base-color-12-25: rgba(23, 33, 38, 0.25);
-  --theme-base-color-12-15: rgba(23, 33, 38, 0.15);
-  --theme-base-color-13: #10181c;
-  --theme-base-color-14: rgba(0, 0, 0, 1);
-  --theme-base-color-14-75: rgba(0, 0, 0, 0.75);
-  --theme-base-color-14-55: rgba(0, 0, 0, 0.55);
-  --theme-base-color-14-40: rgba(0, 0, 0, 0.4);
-  --theme-base-color-14-30: rgba(0, 0, 0, 0.3);
-  --theme-base-color-14-15: rgba(0, 0, 0, 0.15);
-  --theme-base-color-14-10: rgba(0, 0, 0, 0.1);
-  --theme-base-color-14-05: rgba(0, 0, 0, 0.05);
-  --theme-base-color-teal: #0e777c;
-  --theme-base-color-light-teal: #41aaaa;
-  --theme-base-color-light-teal-25: rgba(50, 160, 160, 0.25);
-  --theme-base-color-light-teal-15: rgba(50, 160, 160, 0.15);
-  --theme-base-color-red: #dc0031;
-  --theme-base-color-orange: #eb780a;
-  --theme-base-color-yellow: #ffb900;
-  --theme-base-color-green: #339b00;
-  --theme-base-color-marine: #1e54b3;
-}
diff --git a/packages/core/scss/themes/classic-light/_classic-light.scss b/packages/core/scss/themes/classic-light/_classic-light.scss
deleted file mode 100644
index d4e2f4e085e..00000000000
--- a/packages/core/scss/themes/classic-light/_classic-light.scss
+++ /dev/null
@@ -1,188 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../utils/define-theme';
-@import '../utils/background';
-@import './components/animated-tabs';
-@import './components/basic-navigation';
-@import './components/border';
-@import './components/breadcrumb';
-@import './components/buttons';
-@import './components/checkbox';
-@import './components/event-list';
-@import './components/generic-bg-hover';
-@import './components/ghost-mouse-state';
-@import './components/group';
-@import './components/map-navigation-overlay';
-@import './components/map-navigation';
-@import './components/nav';
-@import './components/shadows';
-@import './components/sidebar-overlay';
-@import './components/vertical-tab-avatar';
-@import './base-colors';
-
-@include define-theme('light') {
-  @include define-base-colors;
-  @include define-static-colors;
-  @include animated-tabs;
-  @include basic-navigation;
-  @include border;
-  @include breadcrumb;
-  @include buttons;
-  @include checkboxes;
-  @include event-list;
-  @include generic-bg-hover;
-  @include ghost-mouse-state;
-  @include group;
-  @include map-navigation-overlay;
-  @include map-navigation;
-  @include nav;
-  @include shadows;
-  @include sidebar-overlay;
-  @include vertical-tab-avatar;
-
-  @include background((var(--theme-color-1), var(--theme-color-2), var(--theme-color-3), var(--theme-color-4), var(--theme-color-5), var(--theme-color-6), var(--theme-color-7)));
-
-  --theme-color-primary: #0e777c;
-  --theme-color-primary-light: #0e777c;
-  --theme-color-primary-dark: #41aaaa;
-  --theme-color-1: #fff;
-  --theme-color-1-light: #fff;
-  --theme-color-1-dark: #10181c;
-  --theme-color-2: #f5f8fa;
-  --theme-color-2-light: #f5f8fa;
-  --theme-color-2-dark: #172126;
-  --theme-color-3: #ebf0f5;
-  --theme-color-3-light: #ebf0f5;
-  --theme-color-3-dark: #293339;
-  --theme-color-4: #dfe6ed;
-  --theme-color-4-light: #dfe6ed;
-  --theme-color-4-dark: #3c464b;
-  --theme-color-4a: #d6dfe7;
-  --theme-color-4a-light: #d6dfe7;
-  --theme-color-4a-dark: #3e4b51;
-  --theme-color-5: #ced9e2;
-  --theme-color-5-light: #ced9e2;
-  --theme-color-5-dark: #555f69;
-  --theme-color-6: #becdd7;
-  --theme-color-6-light: #becdd7;
-  --theme-color-6-dark: #6e7d89;
-  --theme-color-7: #879baa;
-  --theme-color-7-light: #879baa;
-  --theme-color-7-dark: #879baa;
-  --theme-color-alarm: #dc0031;
-  --theme-color-alarm-light: #dc0031;
-  --theme-color-alarm-dark: #dc0031;
-  --theme-color-critical: #eb780a;
-  --theme-color-critical-light: #eb780a;
-  --theme-color-critical-dark: #eb780a;
-  --theme-color-info: #1e54b3;
-  --theme-color-info-light: #1e54b3;
-  --theme-color-info-dark: #1e54b3;
-  --theme-color-neutral: #879baa;
-  --theme-color-neutral-light: #879baa;
-  --theme-color-neutral-dark: #879baa;
-  --theme-color-success: #339b00;
-  --theme-color-success-light: #339b00;
-  --theme-color-success-dark: #339b00;
-  --theme-color-warning: #ffb900;
-  --theme-color-warning-light: #ffb900;
-  --theme-color-warning-dark: #ffb900;
-  --theme-color-contrast-text: rgba(0, 0, 0, 1);
-  --theme-color-contrast-text-light: rgba(0, 0, 0, 1);
-  --theme-color-contrast-text-dark: #fff;
-  --theme-color-std-text: rgba(0, 0, 0, 0.75);
-  --theme-color-std-text-light: rgba(0, 0, 0, 0.75);
-  --theme-color-std-text-dark: rgba(255, 255, 255, 0.85);
-  --theme-color-soft-text: rgba(0, 0, 0, 0.55);
-  --theme-color-soft-text-light: rgba(0, 0, 0, 0.55);
-  --theme-color-soft-text-dark: rgba(255, 255, 255, 0.6);
-  --theme-color-weak-text: rgba(0, 0, 0, 0.3);
-  --theme-color-weak-text-light: rgba(0, 0, 0, 0.3);
-  --theme-color-weak-text-dark: rgba(255, 255, 255, 0.4);
-  --theme-color-inv-contrast-text: #fff;
-  --theme-color-inv-contrast-text-light: #fff;
-  --theme-color-inv-contrast-text-dark: rgba(0, 0, 0, 1);
-  --theme-color-inv-std-text: rgba(255, 255, 255, 0.85);
-  --theme-color-inv-std-text-light: rgba(255, 255, 255, 0.85);
-  --theme-color-inv-std-text-dark: rgba(0, 0, 0, 0.75);
-  --theme-color-inv-soft-text: rgba(255, 255, 255, 0.6);
-  --theme-color-inv-soft-text-light: rgba(255, 255, 255, 0.6);
-  --theme-color-inv-soft-text-dark: rgba(0, 0, 0, 0.55);
-  --theme-color-inv-weak-text: rgba(255, 255, 255, 0.4);
-  --theme-color-inv-weak-text-light: rgba(255, 255, 255, 0.4);
-  --theme-color-inv-weak-text-dark: rgba(0, 0, 0, 0.3);
-  --theme-color-disabled-btn: rgba(23, 33, 38, 0.25);
-  --theme-color-disabled-btn-light: rgba(23, 33, 38, 0.25);
-  --theme-color-disabled-btn-dark: rgba(255, 255, 255, 0.25);
-
-  --theme-color-primary: var(--theme-base-color-teal);
-  --theme-color-1: var(--theme-base-color-1);
-  --theme-color-2: var(--theme-base-color-2);
-  --theme-color-3: var(--theme-base-color-3);
-  --theme-color-4: var(--theme-base-color-4);
-  --theme-color-4a: var(--theme-base-color-4a);
-  --theme-color-5: var(--theme-base-color-5);
-  --theme-color-6: var(--theme-base-color-6);
-  --theme-color-7: var(--theme-base-color-7);
-
-  --theme-color-alarm: var(--theme-base-color-red);
-  --theme-color-critical: var(--theme-base-color-orange);
-  --theme-color-info: var(--theme-base-color-marine);
-  --theme-color-neutral: var(--theme-base-color-7);
-  --theme-color-success: var(--theme-base-color-green);
-  --theme-color-warning: var(--theme-base-color-yellow);
-
-  --theme-color-contrast-text: var(--theme-base-color-14);
-  --theme-color-std-text: var(--theme-base-color-14-75);
-  --theme-color-soft-text: var(--theme-base-color-14-55);
-  --theme-color-weak-text: var(--theme-base-color-14-30);
-  --theme-color-inv-contrast-text: var(--theme-base-color-1);
-  --theme-color-inv-std-text: var(--theme-base-color-1-85);
-  --theme-color-inv-soft-text: var(--theme-base-color-1-60);
-  --theme-color-inv-weak-text: var(--theme-base-color-1-40);
-
-  --theme-color-disabled-btn: var(--theme-base-color-12-25);
-  --theme-color-lightbox-bg: var(--theme-base-color-1-60);
-
-  --theme-chart-1: var(--theme-chart-1-light);
-  --theme-chart-1-40: var(--theme-chart-1-40-light);
-  --theme-chart-2: var(--theme-chart-2-light);
-  --theme-chart-2-40: var(--theme-chart-2-40-light);
-  --theme-chart-3: var(--theme-chart-3-light);
-  --theme-chart-3-40: var(--theme-chart-3-40-light);
-  --theme-chart-4: var(--theme-chart-4-light);
-  --theme-chart-4-40: var(--theme-chart-4-40-light);
-  --theme-chart-5: var(--theme-chart-5-light);
-  --theme-chart-5-40: var(--theme-chart-5-40-light);
-  --theme-chart-6: var(--theme-chart-6-light);
-  --theme-chart-6-40: var(--theme-chart-6-40-light);
-  --theme-chart-7: var(--theme-chart-7-light);
-  --theme-chart-7-40: var(--theme-chart-7-40-light);
-  --theme-chart-8: var(--theme-chart-8-light);
-  --theme-chart-8-40: var(--theme-chart-8-40-light);
-  --theme-chart-9: var(--theme-chart-9-light);
-  --theme-chart-9-40: var(--theme-chart-9-40-light);
-  --theme-chart-10: var(--theme-chart-10-light);
-  --theme-chart-10-40: var(--theme-chart-10-40-light);
-  --theme-chart-11: var(--theme-chart-11-light);
-  --theme-chart-11-40: var(--theme-chart-11-40-light);
-  --theme-chart-12: var(--theme-chart-12-light);
-  --theme-chart-12-40: var(--theme-chart-12-40-light);
-  --theme-chart-13: var(--theme-chart-13-light);
-  --theme-chart-13-40: var(--theme-chart-13-40-light);
-  --theme-chart-alarm: var(--theme-chart-alarm-light);
-  --theme-chart-alarm-40: var(--theme-chart-alarm-40-light);
-  --theme-chart-alarm-10: var(--theme-chart-alarm-10-light);
-  --theme-chart-critical: var(--theme-chart-critical-light);
-  --theme-chart-critical-40: var(--theme-chart-critical-40-light);
-  --theme-chart-info: var(--theme-chart-info-light);
-  --theme-chart-info-40: var(--theme-chart-info-40-light);
-  --theme-chart-neutral: var(--theme-chart-neutral-light);
-  --theme-chart-neutral-40: var(--theme-chart-neutral-40-light);
-  --theme-chart-warning: var(--theme-chart-warning-light);
-  --theme-chart-warning-40: var(--theme-chart-warning-40-light);
-  --theme-chart-warning-10: var(--theme-chart-warning-10-light);
-  --theme-chart-success: var(--theme-chart-success-light);
-  --theme-chart-success-40: var(--theme-chart-success-40-light);
-}
diff --git a/packages/core/scss/themes/classic-light/components/_animated-tabs.scss b/packages/core/scss/themes/classic-light/components/_animated-tabs.scss
deleted file mode 100644
index 6b346efe68a..00000000000
--- a/packages/core/scss/themes/classic-light/components/_animated-tabs.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '../../../theme-base-colors';
-
-@mixin animated-tabs-hover() {
-  --theme-animated-tabs-tab-bg-hover: #{darken($color-1, 5%)};
-}
-
-@mixin animated-tabs-tab-bg-active-hover() {
-  --theme-animated-tabs-tab-bg-active-hover: #{darken($color-teal, 5%)};
-}
-
-@mixin animated-tabs-tab-icon-selected() {
-  --theme-animated-tabs-tab-icon-selected: #fffffe;
-}
-
-@mixin animated-tabs {
-  @include animated-tabs-hover();
-  @include animated-tabs-tab-bg-active-hover();
-  @include animated-tabs-tab-icon-selected();
-}
diff --git a/packages/core/scss/themes/classic-light/components/_basic-navigation.scss b/packages/core/scss/themes/classic-light/components/_basic-navigation.scss
deleted file mode 100644
index ed6e6141b41..00000000000
--- a/packages/core/scss/themes/classic-light/components/_basic-navigation.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin basic-navigation {
-  @include define-theme-variable('basic-navigation-selected', var(--theme-base-color-3));
-  @include define-theme-variable('basic-navigation-avatar-background', var(--theme-base-color-14));
-  @include define-theme-variable('basic-navigation-avatar-background-opacity', 0.15);
-}
diff --git a/packages/core/scss/themes/classic-light/components/_border.scss b/packages/core/scss/themes/classic-light/components/_border.scss
deleted file mode 100644
index 650ec04125d..00000000000
--- a/packages/core/scss/themes/classic-light/components/_border.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin variant-border($name, $size, $color-dark) {
-  --theme-#{$name}: #{$size} solid #{$color-dark};
-}
-
-@mixin border {
-  @include define-theme-variable('color-weak-bdr-1', var(--theme-base-color-12-15));
-  @include variant-border('std-bdr-1', 0.0625rem, #{var(--theme-base-color-8-60)});
-  @include variant-border('std-bdr-2', 0.125rem, #{var(--theme-base-color-8-60)});
-  @include variant-border('primary-bdr-1', 0.0625rem, #{var(--theme-base-color-teal)});
-  @include variant-border('primary-bdr-2', 0.125rem, #{var(--theme-base-color-teal)});
-  @include variant-border('soft-bdr-1', 0.0625rem, #{var(--theme-base-color-8-40)});
-  @include variant-border('soft-bdr-2', 0.125rem, #{var(--theme-base-color-8-40)});
-  @include variant-border('weak-bdr-1', 0.0625rem, #{var(--theme-base-color-12-15)});
-}
diff --git a/packages/core/scss/themes/classic-light/components/_breadcrumb.scss b/packages/core/scss/themes/classic-light/components/_breadcrumb.scss
deleted file mode 100644
index d0d22ef81c7..00000000000
--- a/packages/core/scss/themes/classic-light/components/_breadcrumb.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-// @import './utils/var-darken';
-@import '../../utils/define-theme-variable';
-
-@mixin breadcrumb {
-  @include define-theme-variable('breadcrumb-hover', #{darken($color-5, 5%)});
-  @include define-theme-variable('breadcrumb-active', #{darken($color-5, 10%)});
-}
diff --git a/packages/core/scss/themes/classic-light/components/_buttons.scss b/packages/core/scss/themes/classic-light/components/_buttons.scss
deleted file mode 100644
index 84788fabfaa..00000000000
--- a/packages/core/scss/themes/classic-light/components/_buttons.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '../../utils/define-theme-variable';
-@import './../../../theme-base-colors';
-@import './../../../variables';
-
-$amount-hover: 5%;
-$amount-active: 10%;
-
-@mixin btn-primary {
-  @include define-theme-variable('btn-primary-bg', var(--theme-base-color-teal));
-
-  @include define-theme-variable('btn-primary-bg-hover', darken($color-teal, $amount-hover));
-
-  @include define-theme-variable('btn-primary-bg-active', darken($color-teal, $amount-active));
-
-  @include define-theme-variable('btn-primary-color', var(--theme-base-color-1));
-
-  @include define-theme-variable('btn-primary-border-color', transparent);
-
-  @include define-theme-variable('btn-primary-bg-disabled', var(--theme-base-color-12-25));
-
-  @include define-theme-variable('btn-primary-color-disabled', var(--theme-base-color-1-85));
-
-  @include define-theme-variable('btn-primary-border-color-disabled', transparent);
-}
-
-@mixin btn-outline-primary {
-  @include define-theme-variable('btn-outline-primary-bg', var(--theme-base-color-1));
-
-  @include define-theme-variable('btn-outline-primary-bg-hover', darken($color-1, $amount-hover));
-
-  @include define-theme-variable('btn-outline-primary-bg-active', darken($color-1, $amount-active));
-
-  @include define-theme-variable('btn-outline-primary-color', var(--theme-base-color-teal));
-
-  @include define-theme-variable('btn-outline-primary-border-color', var(--theme-base-color-teal));
-
-  @include define-theme-variable('btn-outline-primary-border-width', $btn-border-width);
-
-  @include define-theme-variable('btn-outline-primary-border-width-disabled', $btn-border-width);
-
-  @include define-theme-variable('btn-outline-primary-bg-disabled', transparent);
-
-  @include define-theme-variable('btn-outline-primary-color-disabled', var(--theme-base-color-12-25));
-
-  @include define-theme-variable('btn-outline-primary-border-color-disabled', var(--theme-base-color-12-25));
-}
-
-@mixin btn-invisible-primary {
-  @include define-theme-variable('btn-invisible-primary-bg', transparent);
-
-  @include define-theme-variable('btn-invisible-primary-bg-hover', var(--theme-base-color-14-05));
-
-  @include define-theme-variable('btn-invisible-primary-bg-active', var(--theme-base-color-14-10));
-
-  @include define-theme-variable('btn-invisible-primary-width', 0);
-
-  @include define-theme-variable('btn-invisible-primary-color', var(--theme-base-color-teal));
-
-  @include define-theme-variable('btn-invisible-primary-border-color', transparent);
-
-  @include define-theme-variable('btn-invisible-primary-bg-disabled', var(--theme-base-color-14-05));
-
-  @include define-theme-variable('btn-invisible-primary-width-disabled', 0);
-
-  @include define-theme-variable('btn-invisible-primary-color-disabled', var(--theme-base-color-1-40-30));
-
-  @include define-theme-variable('btn-invisible-primary-border-color-disabled', transparent);
-}
-
-@mixin btn-secondary {
-  @include define-theme-variable('btn-secondary-bg', var(--theme-base-color-5));
-
-  @include define-theme-variable('btn-secondary-bg-hover', darken($color-5, $amount-hover));
-
-  @include define-theme-variable('btn-secondary-bg-active', darken($color-5, $amount-active));
-
-  @include define-theme-variable('btn-secondary-color', var(--theme-color-std-text));
-
-  @include define-theme-variable('btn-secondary-border-color', transparent);
-
-  @include define-theme-variable('btn-secondary-bg-disabled', transparent);
-
-  @include define-theme-variable('btn-secondary-color-disabled', var(--theme-color-weak-text));
-
-  @include define-theme-variable('btn-secondary-border-color-disabled', transparent);
-}
-
-@mixin btn-outline-secondary {
-  @include define-theme-variable('btn-outline-secondary-bg', var(--theme-base-color-1));
-
-  @include define-theme-variable('btn-outline-secondary-bg-hover', darken($color-1, $amount-hover));
-
-  @include define-theme-variable('btn-outline-secondary-bg-active', darken($color-1, $amount-active));
-
-  @include define-theme-variable('btn-outline-secondary-color', var(--theme-color-std-text));
-
-  @include define-theme-variable('btn-outline-secondary-border-color', var(--theme-base-color-6));
-
-  @include define-theme-variable('btn-outline-secondary-border-width', $btn-border-width);
-
-  @include define-theme-variable('btn-outline-secondary-border-width-disabled', $btn-border-width);
-
-  @include define-theme-variable('btn-outline-secondary-bg-disabled', transparent);
-
-  @include define-theme-variable('btn-outline-secondary-color-disabled', var(--theme-color-weak-text));
-
-  @include define-theme-variable('btn-outline-secondary-border-color-disabled', var(--theme-base-color-12-25));
-}
-
-@mixin btn-invisible-secondary {
-  @include define-theme-variable('btn-invisible-secondary-bg', transparent);
-
-  @include define-theme-variable('btn-invisible-secondary-bg-hover', var(--theme-base-color-14-05));
-
-  @include define-theme-variable('btn-invisible-secondary-bg-active', var(--theme-base-color-14-10));
-
-  @include define-theme-variable('btn-invisible-secondary-color', var(--theme-color-std-text));
-
-  @include define-theme-variable('btn-invisible-secondary-border-color', transparent);
-
-  @include define-theme-variable('btn-invisible-secondary-bg-disabled', transparent);
-
-  @include define-theme-variable('btn-invisible-secondary-color-disabled', var(--theme-color-weak-text));
-
-  @include define-theme-variable('btn-invisible-secondary-border-color-disabled', transparent);
-}
-
-@mixin buttons {
-  @include btn-primary();
-  @include btn-outline-primary();
-  @include btn-invisible-primary();
-
-  @include btn-secondary();
-  @include btn-outline-secondary();
-  @include btn-invisible-secondary();
-}
diff --git a/packages/core/scss/themes/classic-light/components/_checkbox.scss b/packages/core/scss/themes/classic-light/components/_checkbox.scss
deleted file mode 100644
index f212b986e30..00000000000
--- a/packages/core/scss/themes/classic-light/components/_checkbox.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@mixin checkbox {
-  --theme-checkbox: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjRkZGIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxNUY3NSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIvPgogIDwvZz4KPC9zdmc+Cg==');
-}
-
-@mixin checkbox-hover {
-  --theme-checkbox-hover: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjRkZGIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxNUY3NSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuMDUiLz4KICA8L2c+Cjwvc3ZnPgo=');
-}
-
-@mixin checkbox-active {
-  --theme-checkbox-active: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjRkZGIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxNUY3NSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuMSIvPgogIDwvZz4KPC9zdmc+Cg==');
-}
-
-@mixin checkbox-disabled {
-  --theme-checkbox-disabled: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1Ii8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzE3MjEyNiIgc3Ryb2tlLW9wYWNpdHk9Ii4yNSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPC9nPgo8L3N2Zz4K');
-}
-
-@mixin checkbox-checked {
-  --theme-checkbox-checked: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiBmaWxsPSIjMEU3NzdDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIvPgogICAgPHBvbHlnb24gZmlsbD0iI0ZGRkZGRSIgZmlsbC1vcGFjaXR5PSIuODUiIHBvaW50cz0iMTQuMjkzIDIuMjkzIDE1LjcwNyAzLjcwNyA2IDEzLjQxNCAxLjI5MyA4LjcwNyAyLjcwNyA3LjI5MyA2IDEwLjU4NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCA0KSIvPgogIDwvZz4KPC9zdmc+Cg==');
-}
-
-@mixin checkbox-checked-hover {
-  --theme-checkbox-checked-hover: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiBmaWxsPSIjMEU3NzdDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuMDUiLz4KICAgIDxwb2x5Z29uIGZpbGw9IiNGRkZGRkUiIGZpbGwtb3BhY2l0eT0iLjg1IiBwb2ludHM9IjE0LjI5MyAyLjI5MyAxNS43MDcgMy43MDcgNiAxMy40MTQgMS4yOTMgOC43MDcgMi43MDcgNy4yOTMgNiAxMC41ODYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgNCkiLz4KICA8L2c+Cjwvc3ZnPgo=');
-}
-
-@mixin checkbox-checked-active {
-  --theme-checkbox-checked-active: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiBmaWxsPSIjMEU3NzdDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuMSIvPgogICAgPHBvbHlnb24gZmlsbD0iI0ZGRkZGRSIgZmlsbC1vcGFjaXR5PSIuODUiIHBvaW50cz0iMTQuMjkzIDIuMjkzIDE1LjcwNyAzLjcwNyA2IDEzLjQxNCAxLjI5MyA4LjcwNyAyLjcwNyA3LjI5MyA2IDEwLjU4NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCA0KSIvPgogIDwvZz4KPC9zdmc+Cg==');
-}
-
-@mixin checkbox-checked-disabled {
-  --theme-checkbox-checked-disabled: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiBmaWxsPSIjMTcyMTI2IiBmaWxsLW9wYWNpdHk9Ii4yNSIvPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIi8+CiAgICA8cG9seWdvbiBmaWxsPSIjRkZGRkZFIiBmaWxsLW9wYWNpdHk9Ii44NSIgcG9pbnRzPSIxNC4yOTMgMi4yOTMgMTUuNzA3IDMuNzA3IDYgMTMuNDE0IDEuMjkzIDguNzA3IDIuNzA3IDcuMjkzIDYgMTAuNTg2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDQpIi8+CiAgPC9nPgo8L3N2Zz4K');
-}
-
-@mixin checkbox-indeterminate {
-  --theme-checkbox-indeterminate: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiBmaWxsPSIjRkZGIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzBFNzc3QyIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjMEU3NzdDIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4KICA8L2c+Cjwvc3ZnPgo=');
-}
-
-@mixin checkbox-indeterminate-hover {
-  --theme-checkbox-indeterminate-hover: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjRkZGIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzBFNzc3QyIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjMEU3NzdDIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iLjA1Ii8+CiAgPC9nPgo8L3N2Zz4K');
-}
-
-@mixin checkbox-indeterminate-active {
-  --theme-checkbox-indeterminate-active: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjRkZGIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzBFNzc3QyIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjMEU3NzdDIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iLjEiLz4KICA8L2c+Cjwvc3ZnPgo=');
-}
-
-@mixin checkbox-indeterminate-disabled {
-  --theme-checkbox-indeterminate-disabled: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1Ii8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzE3MjEyNiIgc3Ryb2tlLW9wYWNpdHk9Ii4yNSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjMTcyMTI2IiBmaWxsLW9wYWNpdHk9Ii4yNSIvPgogIDwvZz4KPC9zdmc+Cg==');
-}
-
-@mixin checkboxes {
-  @include checkbox();
-  @include checkbox-hover();
-  @include checkbox-active();
-  @include checkbox-disabled();
-
-  @include checkbox-checked();
-  @include checkbox-checked-hover();
-  @include checkbox-checked-active();
-  @include checkbox-checked-disabled();
-
-  @include checkbox-indeterminate();
-  @include checkbox-indeterminate-hover();
-  @include checkbox-indeterminate-active();
-  @include checkbox-indeterminate-disabled();
-}
diff --git a/packages/core/scss/themes/classic-light/components/_event-list.scss b/packages/core/scss/themes/classic-light/components/_event-list.scss
deleted file mode 100644
index 288af8d8a08..00000000000
--- a/packages/core/scss/themes/classic-light/components/_event-list.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import './../../utils/define-theme-variable';
-
-@mixin event-list-item {
-  --theme-event-list-item-hover: #{darken($color-1, 5%)};
-  --theme-event-list-item-pressed: #{darken($color-1, 10%)};
-}
-
-@mixin event-list {
-  @include event-list-item();
-
-  @include define-theme-variable('event-list-item-border', var(--theme-base-color-12-15));
-
-  @include define-theme-variable('event-list-item-bg', var(--theme-base-color-1));
-}
diff --git a/packages/core/scss/themes/classic-light/components/_generic-bg-hover.scss b/packages/core/scss/themes/classic-light/components/_generic-bg-hover.scss
deleted file mode 100644
index d6fd97c3268..00000000000
--- a/packages/core/scss/themes/classic-light/components/_generic-bg-hover.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin generic-bg-hover {
-  @include define-theme-variable('generic-bg-hover', var(--theme-base-color-14-05));
-  @include define-theme-variable('generic-bg-active', var(--theme-base-color-14-10));
-  @include define-theme-variable('generic-bg-selected', var(--theme-base-color-light-teal-25));
-}
diff --git a/packages/core/scss/themes/classic-light/components/_ghost-mouse-state.scss b/packages/core/scss/themes/classic-light/components/_ghost-mouse-state.scss
deleted file mode 100644
index 158e810bca7..00000000000
--- a/packages/core/scss/themes/classic-light/components/_ghost-mouse-state.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin ghost-mouse-state {
-  @include define-theme-variable('ghost-hover', var(--theme-base-color-14-05));
-  @include define-theme-variable('ghost-pressed', var(--theme-base-color-14-10));
-  @include define-theme-variable('ghost-active', var(--theme-base-color-14-10));
-  @include define-theme-variable('ghost-selected', var(--theme-base-color-light-teal-25));
-  @include define-theme-variable('ghost-weak-selected', var(--theme-base-color-light-teal-15));
-}
diff --git a/packages/core/scss/themes/classic-light/components/_group.scss b/packages/core/scss/themes/classic-light/components/_group.scss
deleted file mode 100644
index 9ea352401f3..00000000000
--- a/packages/core/scss/themes/classic-light/components/_group.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin group {
-  @include define-theme-variable('group-hover', #{darken($color-1, 5%)});
-  @include define-theme-variable('group-pressed', #{darken($color-1, 10%)});
-}
diff --git a/packages/core/scss/themes/classic-light/components/_map-navigation-overlay.scss b/packages/core/scss/themes/classic-light/components/_map-navigation-overlay.scss
deleted file mode 100644
index cec15821463..00000000000
--- a/packages/core/scss/themes/classic-light/components/_map-navigation-overlay.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import '../../../theme-base-colors';
-
-@mixin map-navigation-overlay {
-  @include define-theme-variable('map-navigation-overlay-blur', #{fade-out($color: $color-1, $amount: 0.3)});
-  @include define-theme-variable('map-navigation-overlay-header-blur', #{fade-out($color: $color-3, $amount: 0.3)});
-}
diff --git a/packages/core/scss/themes/classic-light/components/_map-navigation.scss b/packages/core/scss/themes/classic-light/components/_map-navigation.scss
deleted file mode 100644
index 4ff8b98b06a..00000000000
--- a/packages/core/scss/themes/classic-light/components/_map-navigation.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import './../../../theme-base-colors';
-@import './../../utils/define-theme-variable';
-
-@mixin map-navigation {
-  $logo-siemens: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2276%22%20height%3D%2212%22%20viewBox%3D%220%200%2076%2012%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M-32-4h160v20H-32z%22/%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M.234%2011.579V9.293c1.302.41%202.452.615%203.455.615%201.382%200%202.072-.365%202.072-1.095%200-.272-.1-.5-.3-.686-.207-.195-.736-.469-1.584-.816C2.353%206.684%201.36%206.15.899%205.709.299%205.128%200%204.392%200%203.505%200%202.361.437%201.49%201.308.89%202.17.297%203.293%200%204.678%200%205.44%200%206.545.141%207.99.421V2.62c-1.075-.429-2.072-.644-2.995-.644-1.298%200-1.947.358-1.947%201.07%200%20.269.131.485.392.655.219.136.819.423%201.799.865C6.65%205.192%207.59%205.736%208.06%206.2c.557.55.835%201.26.835%202.134%200%201.252-.545%202.207-1.636%202.865-.883.535-2.029.802-3.435.802-1.189%200-2.386-.14-3.59-.421zm10.486.186h3.232V.202H10.72v11.563zm6.199%200V.202h8.292v2.09h-5.177v2.612h4.507v1.907h-4.507v2.746h5.31v2.208H16.92zm10.537%200V.202h4.192l2.912%207.389L37.545.202h3.981v11.563h-3.065V3.58l-3.395%208.303h-2.003l-3.33-8.303v8.186h-2.277zm17.036%200V.202h8.291v2.09h-5.176v2.612h4.506v1.907h-4.506v2.746h5.31v2.208h-8.425zm10.554%200V.202h3.746l3.976%207.74V.203h2.277v11.563h-3.641l-4.08-7.845v7.845h-2.278zm12.293-.186V9.293c1.292.41%202.442.615%203.455.615%201.383%200%202.074-.365%202.074-1.095%200-.272-.1-.5-.294-.686-.206-.195-.737-.469-1.591-.816-1.518-.62-2.514-1.155-2.98-1.602-.598-.577-.898-1.314-.898-2.214%200-1.137.436-2.005%201.308-2.605C69.275.297%2070.4%200%2071.784%200c.78%200%201.788.125%203.026.373l.286.048V2.62c-1.075-.429-2.076-.644-3.002-.644-1.294%200-1.938.358-1.938%201.07%200%20.269.128.485.39.655.208.13.811.419%201.807.865%201.402.627%202.34%201.171%202.813%201.634.556.55.834%201.26.834%202.134%200%201.252-.542%202.207-1.628%202.865-.887.535-2.035.802-3.441.802-1.19%200-2.387-.14-3.592-.421z%22/%3E%3C/g%3E%3C/svg%3E');
-
-  @include define-theme-variable('vertical-tabs-font-color', var(--theme-base-color-14));
-  @include define-theme-variable('vertical-tabs-background', var(--theme-base-color-5));
-  @include define-theme-variable('map-navigation-header', var(--theme-color-2));
-  @include define-theme-variable('map-navigation-background', var(--theme-base-color-3));
-
-  @include define-theme-variable('map-navigation-brand', $logo-siemens);
-}
diff --git a/packages/core/scss/themes/classic-light/components/_nav.scss b/packages/core/scss/themes/classic-light/components/_nav.scss
deleted file mode 100644
index d17c71efe17..00000000000
--- a/packages/core/scss/themes/classic-light/components/_nav.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin nav {
-  @include define-theme-variable('nav-item-bg-hover', var(--theme-base-color-14-05));
-  @include define-theme-variable('nav-font-color', var(--theme-base-color-14-55));
-}
diff --git a/packages/core/scss/themes/classic-light/components/_shadows.scss b/packages/core/scss/themes/classic-light/components/_shadows.scss
deleted file mode 100644
index 920eb0e1255..00000000000
--- a/packages/core/scss/themes/classic-light/components/_shadows.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-@import './../../../shadows';
-
-@mixin shadows {
-  @include define-theme-variable('box-shadow-lvl-1', $box-shadow-light-lvl-1);
-  @include define-theme-variable('box-shadow-lvl-2', $box-shadow-light-lvl-2);
-  @include define-theme-variable('box-shadow-lvl-3', $box-shadow-light-lvl-3);
-  @include define-theme-variable('box-shadow-lvl-4', $box-shadow-light-lvl-4);
-  @include define-theme-variable('box-shadow-lvl-5', $box-shadow-light-lvl-5);
-  @include define-theme-variable('box-shadow-main-menu', $box-shadow-light-main-menu);
-}
diff --git a/packages/core/scss/themes/classic-light/components/_sidebar-overlay.scss b/packages/core/scss/themes/classic-light/components/_sidebar-overlay.scss
deleted file mode 100644
index 89867bba86c..00000000000
--- a/packages/core/scss/themes/classic-light/components/_sidebar-overlay.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../../utils/define-theme-variable';
-
-@mixin sidebar-overlay {
-  @include define-theme-variable('sidebar-overlay-blur', #{fade-out($color-1, 0.15)});
-}
diff --git a/packages/core/scss/themes/classic-light/components/_vertical-tab-avatar.scss b/packages/core/scss/themes/classic-light/components/_vertical-tab-avatar.scss
deleted file mode 100644
index c2987e34b33..00000000000
--- a/packages/core/scss/themes/classic-light/components/_vertical-tab-avatar.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '../../../theme-base-colors';
-
-@mixin vertical-tab-avatar {
-  @include define-theme-variable('vertical-tab-avatar-hover', #{darken($color-5, 5%)});
-  @include define-theme-variable('vertical-tab-avatar-pressed', #{darken($color-5, 10%)});
-}
diff --git a/packages/core/scss/themes/components/_animated-tabs.scss b/packages/core/scss/themes/components/_animated-tabs.scss
deleted file mode 100644
index 139dc9ca194..00000000000
--- a/packages/core/scss/themes/components/_animated-tabs.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@mixin animated-tabs-hover() {
-  --theme-animated-tabs-tab-bg-hover: var(--theme-ghost-hover);
-}
-
-@mixin animated-tabs-tab-bg-active-hover() {
-  --theme-animated-tabs-tab-bg-active-hover: var(--theme-color-primary--hover);
-}
-
-@mixin animated-tabs-tab-icon-selected() {
-  --theme-animated-tabs-tab-icon-selected: #fffeff;
-}
-
-@mixin animated-tabs {
-  @include animated-tabs-hover();
-  @include animated-tabs-tab-bg-active-hover();
-  @include animated-tabs-tab-icon-selected();
-}
diff --git a/packages/core/scss/themes/components/_basic-navigation.scss b/packages/core/scss/themes/components/_basic-navigation.scss
deleted file mode 100644
index c0858887d8d..00000000000
--- a/packages/core/scss/themes/components/_basic-navigation.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../utils/define-theme-variable';
-
-@mixin basic-navigation {
-  @include define-theme-variable('basic-navigation-selected', var(--theme-base-color-11));
-  @include define-theme-variable('basic-navigation-avatar-background', var(--theme-base-color-1));
-  @include define-theme-variable('basic-navigation-avatar-background-opacity', 0.6);
-}
diff --git a/packages/core/scss/themes/components/_border.scss b/packages/core/scss/themes/components/_border.scss
deleted file mode 100644
index d5a71c85a2a..00000000000
--- a/packages/core/scss/themes/components/_border.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../utils/define-theme-variable';
-
-@mixin variant-border($name, $size, $color-dark, $variant: solid) {
-  --theme-#{$name}: #{$size} #{$variant} #{$color-dark};
-}
-
-@mixin border {
-  @include define-theme-variable('color-weak-bdr-1', var(--theme-color-weak-border));
-
-  @include variant-border('std-bdr-1', 0.0625rem, #{var(--theme-color-standard-border)});
-  @include variant-border('std-bdr-2', 0.125rem, #{var(--theme-color-standard-border)});
-
-  @include variant-border('primary-bdr-1', 0.0625rem, #{var(--theme-color-primary-border)});
-  @include variant-border('primary-bdr-2', 0.125rem, #{var(--theme-color-primary-border)});
-
-  @include variant-border('soft-bdr-1', 0.0625rem, #{var(--theme-color-soft-border)});
-  @include variant-border('soft-bdr-2', 0.125rem, #{var(--theme-color-soft-border)});
-
-  @include variant-border('soft-bdr-1-dashed', 0.0625rem, #{var(--theme-color-soft-border)}, dashed);
-  @include variant-border('soft-bdr-2-dashed', 0.125rem, #{var(--theme-color-soft-border)}, dashed);
-
-  @include variant-border('weak-bdr-1', 0.0625rem, #{var(--theme-color-weak-border)});
-  @include variant-border('weak-bdr-2', 0.125rem, #{var(--theme-color-weak-border)});
-
-  @include variant-border('contrast-bdr-1', 0.0625rem, #{var(--theme-color-contrast-border)});
-  @include variant-border('contrast-bdr-2', 0.125rem, #{var(--theme-color-contrast-border)});
-
-  @include variant-border('inv-contrast-bdr-1', 0.0625rem, #{var(--theme-color-inv-contrast-border)});
-  @include variant-border('inv-contrast-bdr-2', 0.125rem, #{var(--theme-color-inv-contrast-border)});
-
-  @include variant-border('focus-bdr-1', 0.0625rem, #{var(--theme-color-focus-border)});
-  @include variant-border('focus-bdr-2', 0.125rem, #{var(--theme-color-focus-border)});
-
-  @include variant-border('alarm-bdr-1', 0.0625rem, #{var(--theme-color-alarm)});
-  @include variant-border('alarm-bdr-2', 0.125rem, #{var(--theme-color-alarm)});
-
-  @include variant-border('critical-bdr-1', 0.0625rem, #{var(--theme-color-critical)});
-  @include variant-border('critical-bdr-2', 0.125rem, #{var(--theme-color-critical)});
-
-  @include variant-border('info-bdr-1', 0.0625rem, #{var(--theme-color-info)});
-  @include variant-border('info-bdr-2', 0.125rem, #{var(--theme-color-info)});
-
-  @include variant-border('neutral-bdr-1', 0.0625rem, #{var(--theme-color-neutral)});
-  @include variant-border('neutral-bdr-2', 0.125rem, #{var(--theme-color-neutral)});
-
-  @include variant-border('success-bdr-1', 0.0625rem, #{var(--theme-color-success)});
-  @include variant-border('success-bdr-2', 0.125rem, #{var(--theme-color-success)});
-
-  @include variant-border('warning-bdr-1', 0.0625rem, #{var(--theme-color-warning)});
-  @include variant-border('warning-bdr-2', 0.125rem, #{var(--theme-color-warning)});
-}
diff --git a/packages/core/scss/themes/components/_breadcrumb.scss b/packages/core/scss/themes/components/_breadcrumb.scss
deleted file mode 100644
index 458f32c5e7c..00000000000
--- a/packages/core/scss/themes/components/_breadcrumb.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '../utils/define-theme-variable';
-
-@mixin breadcrumb {
-  @include define-theme-variable('breadcrumb-hover', var(--theme-color-5--hover));
-  @include define-theme-variable('breadcrumb-active', var(--theme-color-5--active));
-}
diff --git a/packages/core/scss/themes/components/_buttons.scss b/packages/core/scss/themes/components/_buttons.scss
deleted file mode 100644
index ebfb0a6d6e7..00000000000
--- a/packages/core/scss/themes/components/_buttons.scss
+++ /dev/null
@@ -1,137 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../utils/define-theme-variable';
-
-$amount-hover: 5%;
-$amount-active: 10%;
-
-@mixin btn-primary {
-  @include define-theme-variable('btn-primary-bg', var(--theme-color-primary));
-
-  @include define-theme-variable('btn-primary-bg-hover', var(--theme-color-primary--hover));
-
-  @include define-theme-variable('btn-primary-bg-active', var(--theme-color-primary--active));
-
-  @include define-theme-variable('btn-primary-color', var(--theme-color-inv-contrast-text));
-
-  @include define-theme-variable('btn-primary-border-color', transparent);
-
-  @include define-theme-variable('btn-primary-bg-disabled', var(--theme-color-disable-button-border));
-
-  @include define-theme-variable('btn-primary-color-disabled', var(--theme-color-disable-button-border));
-
-  @include define-theme-variable('btn-primary-border-color-disabled', transparent);
-}
-
-@mixin btn-outline-primary {
-  @include define-theme-variable('btn-outline-primary-bg', var(--theme-color-1));
-
-  @include define-theme-variable('btn-outline-primary-bg-hover', var(--theme-color-1--hover));
-
-  @include define-theme-variable('btn-outline-primary-bg-active', var(--theme-color-1--active));
-
-  @include define-theme-variable('btn-outline-primary-color', var(--theme-color-primary));
-
-  @include define-theme-variable('btn-outline-primary-border-color', var(--theme-color-primary));
-
-  @include define-theme-variable('btn-outline-primary-border-width', $btn-border-width);
-
-  @include define-theme-variable('btn-outline-primary-border-width-disabled', $btn-border-width);
-
-  @include define-theme-variable('btn-outline-primary-bg-disabled', transparent);
-
-  @include define-theme-variable('btn-outline-primary-color-disabled', var(--theme-color-disable-button-border));
-
-  @include define-theme-variable('btn-outline-primary-border-color-disabled', var(--theme-color-disable-button-border));
-}
-
-@mixin btn-invisible-primary {
-  @include define-theme-variable('btn-invisible-primary-bg', transparent);
-
-  @include define-theme-variable('btn-invisible-primary-bg-hover', var(--theme-color-1--hover));
-
-  @include define-theme-variable('btn-invisible-primary-bg-active', var(--theme-color-1--active));
-
-  @include define-theme-variable('btn-invisible-primary-width', 0);
-
-  @include define-theme-variable('btn-invisible-primary-color', var(--theme-color-primary));
-
-  @include define-theme-variable('btn-invisible-primary-border-color', transparent);
-
-  @include define-theme-variable('btn-invisible-primary-bg-disabled', var(--theme-color-1));
-
-  @include define-theme-variable('btn-invisible-primary-width-disabled', 0);
-
-  @include define-theme-variable('btn-invisible-primary-color-disabled', var(--theme-color-disable-button-border));
-
-  @include define-theme-variable('btn-invisible-primary-border-color-disabled', transparent);
-}
-
-@mixin btn-secondary {
-  @include define-theme-variable('btn-secondary-bg', var(--theme-color-5));
-
-  @include define-theme-variable('btn-secondary-bg-hover', var(--theme-color-5--hover));
-
-  @include define-theme-variable('btn-secondary-bg-active', var(--theme-color-5--active));
-
-  @include define-theme-variable('btn-secondary-color', var(--theme-color-std-text));
-
-  @include define-theme-variable('btn-secondary-border-color', transparent);
-
-  @include define-theme-variable('btn-secondary-bg-disabled', transparent);
-
-  @include define-theme-variable('btn-secondary-color-disabled', var(--theme-color-weak-text));
-
-  @include define-theme-variable('btn-secondary-border-color-disabled', transparent);
-}
-
-@mixin btn-outline-secondary {
-  @include define-theme-variable('btn-outline-secondary-bg', var(--theme-color-1));
-
-  @include define-theme-variable('btn-outline-secondary-bg-hover', var(--theme-color-1--hover));
-
-  @include define-theme-variable('btn-outline-secondary-bg-active', var(--theme-color-1--active));
-
-  @include define-theme-variable('btn-outline-secondary-color', var(--theme-color-std-text));
-
-  @include define-theme-variable('btn-outline-secondary-border-color', var(--theme-color-standard-border));
-
-  @include define-theme-variable('btn-outline-secondary-border-width', $btn-border-width);
-
-  @include define-theme-variable('btn-outline-secondary-border-width-disabled', $btn-border-width);
-
-  @include define-theme-variable('btn-outline-secondary-bg-disabled', transparent);
-
-  @include define-theme-variable('btn-outline-secondary-color-disabled', var(--theme-color-weak-text));
-
-  @include define-theme-variable('btn-outline-secondary-border-color-disabled', var(--theme-color-disable-button-border));
-}
-
-@mixin btn-invisible-secondary {
-  @include define-theme-variable('btn-invisible-secondary-bg', transparent);
-
-  @include define-theme-variable('btn-invisible-secondary-bg-hover', var(--theme-ghost-hover));
-
-  @include define-theme-variable('btn-invisible-secondary-bg-active', var(--theme-ghost-active));
-
-  @include define-theme-variable('btn-invisible-secondary-color', var(--theme-color-std-text));
-
-  @include define-theme-variable('btn-invisible-secondary-border-color', transparent);
-
-  @include define-theme-variable('btn-invisible-secondary-bg-disabled', transparent);
-
-  @include define-theme-variable('btn-invisible-secondary-color-disabled', var(--theme-color-weak-text));
-
-  @include define-theme-variable('btn-invisible-secondary-border-color-disabled', transparent);
-}
-
-@mixin buttons {
-  @include btn-primary();
-  @include btn-outline-primary();
-  @include btn-invisible-primary();
-
-  @include btn-secondary();
-  @include btn-outline-secondary();
-  @include btn-invisible-secondary();
-}
diff --git a/packages/core/scss/themes/components/_checkbox.scss b/packages/core/scss/themes/components/_checkbox.scss
deleted file mode 100644
index f1173bbd8af..00000000000
--- a/packages/core/scss/themes/components/_checkbox.scss
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@mixin checkbox {
-  --theme-checkbox: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0VCRjBGNSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIvPgogIDwvZz4KPC9zdmc+Cg==');
-}
-
-@mixin checkbox-hover {
-  --theme-checkbox-hover: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0VCRjBGNSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0ZGRiIgZmlsbC1vcGFjaXR5PSIuMDciLz4KICA8L2c+Cjwvc3ZnPgo=');
-}
-
-@mixin checkbox-active {
-  --theme-checkbox-active: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0VCRjBGNSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0ZGRiIgZmlsbC1vcGFjaXR5PSIuMTQiLz4KICA8L2c+Cjwvc3ZnPgo=');
-}
-
-@mixin checkbox-disabled {
-  --theme-checkbox-disabled: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1Ii8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLW9wYWNpdHk9Ii4yNSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPC9nPgo8L3N2Zz4K');
-}
-
-@mixin checkbox-checked {
-  --theme-checkbox-checked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='18' height='18' x='3' y='3' fill='%2341AAAA'/%3E%3Crect width='18' height='18' x='3' y='3'/%3E%3Crect width='24' height='24'/%3E%3Cpolygon fill='%23000100' points='14.293 2.293 15.707 3.707 6 13.414 1.293 8.707 2.707 7.293 6 10.586' transform='translate(4 4)'/%3E%3C/g%3E%3C/svg%3E%0A");
-}
-
-@mixin checkbox-checked-hover {
-  --theme-checkbox-checked-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='18' height='18' x='3' y='3' fill='%2341AAAA'/%3E%3Crect width='18' height='18' x='3' y='3'/%3E%3Crect width='24' height='24' fill='%23FFF' fill-opacity='.07'/%3E%3Cpolygon fill='%23000100' points='14.293 2.293 15.707 3.707 6 13.414 1.293 8.707 2.707 7.293 6 10.586' transform='translate(4 4)'/%3E%3C/g%3E%3C/svg%3E%0A");
-}
-
-@mixin checkbox-checked-active {
-  --theme-checkbox-checked-active: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='18' height='18' x='3' y='3' fill='%2341AAAA'/%3E%3Crect width='18' height='18' x='3' y='3'/%3E%3Crect width='24' height='24' fill='%23FFF' fill-opacity='.14'/%3E%3Cpolygon fill='%23000100' points='14.293 2.293 15.707 3.707 6 13.414 1.293 8.707 2.707 7.293 6 10.586' transform='translate(4 4)'/%3E%3C/g%3E%3C/svg%3E%0A");
-}
-
-@mixin checkbox-checked-disabled {
-  --theme-checkbox-checked-disabled: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiBmaWxsPSIjRkZGIiBmaWxsLW9wYWNpdHk9Ii4yNSIvPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIi8+CiAgICA8cG9seWdvbiBmaWxsPSIjRkZGRUZGIiBmaWxsLW9wYWNpdHk9Ii40IiBwb2ludHM9IjE0LjI5MyAyLjI5MyAxNS43MDcgMy43MDcgNiAxMy40MTQgMS4yOTMgOC43MDcgMi43MDcgNy4yOTMgNiAxMC41ODYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgNCkiLz4KICA8L2c+Cjwvc3ZnPgo=');
-}
-
-@mixin checkbox-indeterminate {
-  --theme-checkbox-indeterminate: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxQUFBQSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjNDFBQUFBIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4KICA8L2c+Cjwvc3ZnPgo=');
-}
-
-@mixin checkbox-indeterminate-hover {
-  --theme-checkbox-indeterminate-hover: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxQUFBQSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjNDFBQUFBIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiNGRkYiIGZpbGwtb3BhY2l0eT0iLjA3Ii8+CiAgPC9nPgo8L3N2Zz4K');
-}
-
-@mixin checkbox-indeterminate-active {
-  --theme-checkbox-indeterminate-active: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxQUFBQSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjNDFBQUFBIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiNGRkYiIGZpbGwtb3BhY2l0eT0iLjE0Ii8+CiAgPC9nPgo8L3N2Zz4K');
-}
-
-@mixin checkbox-indeterminate-disabled {
-  --theme-checkbox-indeterminate-disabled: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1Ii8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLW9wYWNpdHk9Ii4yNSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjRkZGIiBmaWxsLW9wYWNpdHk9Ii4yNSIvPgogIDwvZz4KPC9zdmc+Cg==');
-}
-
-@mixin checkboxes {
-  @include checkbox();
-  @include checkbox-hover();
-  @include checkbox-active();
-  @include checkbox-disabled();
-
-  @include checkbox-checked();
-  @include checkbox-checked-hover();
-  @include checkbox-checked-active();
-  @include checkbox-checked-disabled();
-
-  @include checkbox-indeterminate();
-  @include checkbox-indeterminate-hover();
-  @include checkbox-indeterminate-active();
-  @include checkbox-indeterminate-disabled();
-}
diff --git a/packages/core/scss/themes/components/_event-list.scss b/packages/core/scss/themes/components/_event-list.scss
deleted file mode 100644
index 35345515a1b..00000000000
--- a/packages/core/scss/themes/components/_event-list.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import './../utils/define-theme-variable';
-
-@mixin event-list-item {
-  --theme-event-list-item-hover: var(--theme-color-1--hover);
-  --theme-event-list-item-pressed: var(--theme-color-1--active);
-}
-
-@mixin event-list {
-  @include event-list-item();
-
-  @include define-theme-variable('event-list-item-border', var(--theme-color-weak-border));
-
-  @include define-theme-variable('event-list-item-bg', var(--theme-color-1));
-}
diff --git a/packages/core/scss/themes/components/_generic-bg-hover.scss b/packages/core/scss/themes/components/_generic-bg-hover.scss
deleted file mode 100644
index 4c465655b10..00000000000
--- a/packages/core/scss/themes/components/_generic-bg-hover.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../utils/define-theme-variable';
-
-@mixin generic-bg-hover {
-  @include define-theme-variable('generic-bg-hover', var(--theme-color-1--hover));
-  @include define-theme-variable('generic-bg-active', var(--theme-color-1--active));
-  @include define-theme-variable('generic-bg-selected', hsla(var(--theme-color-primary-hs), var(--theme-color-primary-l), 25%)); //var(--theme-base-color-light-teal-25)
-}
diff --git a/packages/core/scss/themes/components/_ghost-mouse-state.scss b/packages/core/scss/themes/components/_ghost-mouse-state.scss
deleted file mode 100644
index b2a21b08aa8..00000000000
--- a/packages/core/scss/themes/components/_ghost-mouse-state.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../utils/define-theme-variable';
-
-@mixin ghost-mouse-state {
-  @include define-theme-variable('ghost-hover', hsla(var(--theme-color-ghost-hover--hs), var(--theme-color-ghost-hover--l), 5%));
-  @include define-theme-variable('ghost-pressed', hsla(var(--theme-color-ghost-hover--hs), var(--theme-color-ghost-hover--l), 10%));
-  @include define-theme-variable('ghost-active', hsla(var(--theme-color-ghost-hover--hs), var(--theme-color-ghost-hover--l), 10%));
-  @include define-theme-variable('ghost-selected', hsla(var(--theme-color-ghost-selected--hs), var(--theme-color-ghost-selected--l), 25%));
-  @include define-theme-variable('ghost-weak-selected', hsla(var(--theme-color-ghost-selected--hs), var(--theme-color-ghost-selected--l), 15%));
-}
diff --git a/packages/core/scss/themes/components/_group.scss b/packages/core/scss/themes/components/_group.scss
deleted file mode 100644
index ea9f6d75dc7..00000000000
--- a/packages/core/scss/themes/components/_group.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../utils/define-theme-variable';
-
-@mixin group {
-  @include define-theme-variable('group-hover', var(--theme-color-1--hover));
-  @include define-theme-variable('group-pressed', var(--theme-color-1--active));
-}
diff --git a/packages/core/scss/themes/components/_map-navigation-overlay.scss b/packages/core/scss/themes/components/_map-navigation-overlay.scss
deleted file mode 100644
index 1d16b1a8013..00000000000
--- a/packages/core/scss/themes/components/_map-navigation-overlay.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@mixin map-navigation-overlay {
-  @include define-theme-variable('map-navigation-overlay-blur', hsla(var(--theme-color-1--hs), var(--theme-color-1--l), calc(var(--theme-color-1--a) - 30%)));
-  @include define-theme-variable('map-navigation-overlay-header-blur', hsla(var(--theme-color-3--hs), var(--theme-color-3--l), calc(var(--theme-color-3--a) - 30%)));
-}
diff --git a/packages/core/scss/themes/components/_map-navigation.scss b/packages/core/scss/themes/components/_map-navigation.scss
deleted file mode 100644
index 40e1426d3af..00000000000
--- a/packages/core/scss/themes/components/_map-navigation.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import './../utils/define-theme-variable';
-
-@mixin map-navigation {
-  $logo-siemens: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2276%22%20height%3D%2212%22%20viewBox%3D%220%200%2076%2012%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M-32-4h160v20H-32z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M.234%2011.579V9.293c1.302.41%202.452.615%203.455.615%201.382%200%202.072-.365%202.072-1.095%200-.272-.1-.5-.3-.686-.207-.195-.736-.469-1.584-.816C2.353%206.684%201.36%206.15.899%205.709.299%205.128%200%204.392%200%203.505%200%202.361.437%201.49%201.308.89%202.17.297%203.293%200%204.678%200%205.44%200%206.545.141%207.99.421V2.62c-1.075-.429-2.072-.644-2.995-.644-1.298%200-1.947.358-1.947%201.07%200%20.269.131.485.392.655.219.136.819.423%201.799.865C6.65%205.192%207.59%205.736%208.06%206.2c.557.55.835%201.26.835%202.134%200%201.252-.545%202.207-1.636%202.865-.883.535-2.029.802-3.435.802-1.189%200-2.386-.14-3.59-.421zm10.486.186h3.232V.202H10.72v11.563zm6.199%200V.202h8.292v2.09h-5.177v2.612h4.507v1.907h-4.507v2.746h5.31v2.208H16.92zm10.537%200V.202h4.192l2.912%207.389L37.545.202h3.981v11.563h-3.065V3.58l-3.395%208.303h-2.003l-3.33-8.303v8.186h-2.277zm17.036%200V.202h8.291v2.09h-5.176v2.612h4.506v1.907h-4.506v2.746h5.31v2.208h-8.425zm10.554%200V.202h3.746l3.976%207.74V.203h2.277v11.563h-3.641l-4.08-7.845v7.845h-2.278zm12.293-.186V9.293c1.292.41%202.442.615%203.455.615%201.383%200%202.074-.365%202.074-1.095%200-.272-.1-.5-.294-.686-.206-.195-.737-.469-1.591-.816-1.518-.62-2.514-1.155-2.98-1.602-.598-.577-.898-1.314-.898-2.214%200-1.137.436-2.005%201.308-2.605C69.275.297%2070.4%200%2071.784%200c.78%200%201.788.125%203.026.373l.286.048V2.62c-1.075-.429-2.076-.644-3.002-.644-1.294%200-1.938.358-1.938%201.07%200%20.269.128.485.39.655.208.13.811.419%201.807.865%201.402.627%202.34%201.171%202.813%201.634.556.55.834%201.26.834%202.134%200%201.252-.542%202.207-1.628%202.865-.887.535-2.035.802-3.441.802-1.19%200-2.387-.14-3.592-.421z%22/%3E%3C/g%3E%3C/svg%3E');
-
-  @include define-theme-variable('vertical-tabs-font-color', var(--theme-color-std-text));
-  @include define-theme-variable('map-navigation-header', var(--theme-color-2));
-  @include define-theme-variable('map-navigation-background', var(--theme-color-3));
-
-  @include define-theme-variable('map-navigation-brand', $logo-siemens);
-}
diff --git a/packages/core/scss/themes/components/_nav.scss b/packages/core/scss/themes/components/_nav.scss
deleted file mode 100644
index a297d9bd2ad..00000000000
--- a/packages/core/scss/themes/components/_nav.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../utils/define-theme-variable';
-
-@mixin nav {
-  @include define-theme-variable('nav-item-bg-hover', var(--theme-ghost-hover));
-  @include define-theme-variable('nav-font-color', var(--theme-color-soft-text));
-}
diff --git a/packages/core/scss/themes/components/_shadows.scss b/packages/core/scss/themes/components/_shadows.scss
deleted file mode 100644
index ff3ccaffa10..00000000000
--- a/packages/core/scss/themes/components/_shadows.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../utils/define-theme-variable';
-
-@mixin shadows {
-  $box-shadow-lvl-1: 0 1px 4px 0 var(--theme-color-shadow-1), 0 0 4px 0 var(--theme-color-shadow-2);
-  $box-shadow-lvl-2: 0 2px 6px 0 var(--theme-color-shadow-1), 0 0 8px 0 var(--theme-color-shadow-2);
-  $box-shadow-lvl-3: 0 4px 8px 0 var(--theme-color-shadow-1), 0 0 16px 0 var(--theme-color-shadow-2);
-  $box-shadow-lvl-4: 0 8px 16px 0 var(--theme-color-shadow-1), 0 0 32px 0 var(--theme-color-shadow-2);
-  $box-shadow-lvl-5: 0 16px 32px 0 var(--theme-color-shadow-1), 0 0 64px 0 var(--theme-color-shadow-2);
-  $box-shadow-main-menu: 4px 0 8px 0 var(--theme-color-shadow-1), 0 0 16px 0 var(--theme-color-shadow-2);
-
-  @include define-theme-variable('box-shadow-lvl-1', $box-shadow-lvl-1);
-  @include define-theme-variable('box-shadow-lvl-2', $box-shadow-lvl-2);
-  @include define-theme-variable('box-shadow-lvl-3', $box-shadow-lvl-3);
-  @include define-theme-variable('box-shadow-lvl-4', $box-shadow-lvl-4);
-  @include define-theme-variable('box-shadow-lvl-5', $box-shadow-lvl-5);
-  @include define-theme-variable('box-shadow-main-menu', $box-shadow-main-menu);
-}
diff --git a/packages/core/scss/themes/components/_sidebar-overlay.scss b/packages/core/scss/themes/components/_sidebar-overlay.scss
deleted file mode 100644
index b9caa66f9de..00000000000
--- a/packages/core/scss/themes/components/_sidebar-overlay.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../utils/define-theme-variable';
-
-@mixin sidebar-overlay {
-  @include define-theme-variable('sidebar-overlay-blur', #{fade-out($color-13, 0.15)});
-}
diff --git a/packages/core/scss/themes/components/_vertical-tab-avatar.scss b/packages/core/scss/themes/components/_vertical-tab-avatar.scss
deleted file mode 100644
index b5f9ee2b382..00000000000
--- a/packages/core/scss/themes/components/_vertical-tab-avatar.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../utils/define-theme-variable';
-
-@mixin vertical-tab-avatar {
-  @include define-theme-variable('vertical-tab-avatar-hover', var(--theme-ghost-hover));
-  @include define-theme-variable('vertical-tab-avatar-pressed', var(--theme-ghost-active));
-}
diff --git a/packages/core/scss/themes/utils/_background.scss b/packages/core/scss/themes/utils/_background.scss
deleted file mode 100644
index b93602a74c6..00000000000
--- a/packages/core/scss/themes/utils/_background.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@mixin background($backgrounds) {
-  @if length($backgrounds) != 7 {
-    @error "You need 7 background definitions";
-  }
-
-  @each $background in $backgrounds {
-    --theme-bg-#{index($backgrounds, $background)}: #{$background};
-  }
-}
diff --git a/packages/core/scss/themes/utils/_define-base-colors.scss b/packages/core/scss/themes/utils/_define-base-colors.scss
deleted file mode 100644
index fcea12abf2f..00000000000
--- a/packages/core/scss/themes/utils/_define-base-colors.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@use 'sass:list';
-@use 'sass:map';
-
-$base-color-names: (
-  'base-color-1',
-  'base-color-1-85',
-  'base-color-1-60',
-  'base-color-1-40',
-  'base-color-1-25',
-  'base-color-1-10',
-  'base-color-1-05',
-  'base-color-2',
-  'base-color-3',
-  'base-color-3-60',
-  'base-color-3-40',
-  'base-color-3-25',
-  'base-color-3-15',
-  'base-color-4',
-  'base-color-4a',
-  'base-color-5',
-  'base-color-6',
-  'base-color-7',
-  'base-color-7a',
-  'base-color-8',
-  'base-color-8-60',
-  'base-color-8-40',
-  'base-color-9',
-  'base-color-9a',
-  'base-color-10',
-  'base-color-11',
-  'base-color-12',
-  'base-color-12-55',
-  'base-color-12-40',
-  'base-color-12-25',
-  'base-color-12-15',
-  'base-color-13',
-  'base-color-14',
-  'base-color-14-75',
-  'base-color-14-55',
-  'base-color-14-40',
-  'base-color-14-30',
-  'base-color-14-15',
-  'base-color-14-10',
-  'base-color-14-05',
-  'base-color-15',
-  'base-color-15-60',
-  'base-color-15-20',
-  'base-color-teal',
-  'base-color-light-teal',
-  'base-color-light-teal-25',
-  'base-color-light-teal-15',
-  'base-color-light-red-text',
-  'base-color-light-red',
-  'base-color-red',
-  'base-color-red-text',
-  'base-color-light-orange',
-  'base-color-orange',
-  'base-color-light-yellow',
-  'base-color-yellow',
-  'base-color-light-green',
-  'base-color-green',
-  'base-color-light-marine',
-  'base-color-marine',
-  'base-color-light-neutral',
-  'base-color-neutral',
-  'base-color-bold-green',
-  'base-color-soft-green'
-);
-
-@mixin define-base-colors($theme-base-color) {
-  @each $color-name in $base-color-names {
-    @if map.get($theme-base-color, $color-name) == null {
-      @error '#{$color-name} is missing in base color map!';
-    }
-  }
-
-  @each $color-name, $color-value in $theme-base-color {
-    --theme-#{$color-name}: #{$color-value};
-  }
-
-  --theme-blur: 2px;
-}
diff --git a/packages/core/scss/themes/utils/_define-static-colors.scss b/packages/core/scss/themes/utils/_define-static-colors.scss
deleted file mode 100644
index 12cc9f9b833..00000000000
--- a/packages/core/scss/themes/utils/_define-static-colors.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@mixin define-static-colors {
-  --theme-color-static-black: var(--theme-base-color-14);
-  --theme-color-static-white: var(--theme-base-color-1);
-}
diff --git a/packages/core/scss/themes/utils/_define-theme-colors.scss b/packages/core/scss/themes/utils/_define-theme-colors.scss
deleted file mode 100644
index 32c1f657999..00000000000
--- a/packages/core/scss/themes/utils/_define-theme-colors.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@use 'sass:map';
-@use 'sass:list';
-
-/*
- * List of mandatory colors
- */
-$theme-color-names: (
-  'color-primary',
-  'color-1',
-  'color-2',
-  'color-3',
-  'color-4',
-  'color-4a',
-  'color-5',
-  'color-6',
-  'color-7',
-  'color-alarm',
-  'color-critical',
-  'color-info',
-  'color-neutral',
-  'color-success',
-  'color-warning',
-  'color-alarm-text',
-  'color-contrast-text',
-  'color-std-text',
-  'color-soft-text',
-  'color-weak-text',
-  'color-inv-contrast-text',
-  'color-inv-std-text',
-  'color-inv-soft-text',
-  'color-inv-weak-text',
-  'color-lightbox',
-  'color-backdrop',
-  'color-ghost-hover',
-  'color-ghost-active',
-  'color-ghost-pressed',
-  'color-ghost-selected',
-  'color-shadow-1',
-  'color-shadow-2'
-);
-
-@mixin define-theme-colors($theme-colors) {
-  @each $color-name in $theme-color-names {
-    @if map.get($theme-colors, $color-name) == null {
-      @error '#{$color-name} is missing in theme color map!';
-    }
-  }
-
-  @each $color-name, $color-value in $theme-colors {
-    --theme-#{$color-name}--hs: #{hue($color-value), saturation($color-value)};
-    --theme-#{$color-name}--l: #{lightness($color-value)};
-    --theme-#{$color-name}--a: #{alpha($color-value)};
-    --theme-#{$color-name}: hsla(var(--theme-#{$color-name}--hs), var(--theme-#{$color-name}--l), var(--theme-#{$color-name}--a));
-    --theme-#{$color-name}--hover: hsla(var(--theme-#{$color-name}--hs), calc(var(--theme-#{$color-name}--l) + var(--theme-l-hover)), var(--theme-#{$color-name}--a));
-    --theme-#{$color-name}--active: hsla(var(--theme-#{$color-name}--hs), calc(var(--theme-#{$color-name}--l) + var(--theme-l-active)), var(--theme-#{$color-name}--a));
-  }
-}
diff --git a/packages/core/scss/themes/utils/_define-theme.scss b/packages/core/scss/themes/utils/_define-theme.scss
deleted file mode 100644
index 0b2a1278706..00000000000
--- a/packages/core/scss/themes/utils/_define-theme.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import './define-static-colors';
-
-@mixin define-theme($name) {
-  .theme-#{$name} {
-    @content;
-  }
-}
-
-@mixin define-theme-v2($name, $theme-colors, $hover-percentage, $active-percentage) {
-  .theme-#{$name} {
-    --theme-l-hover: #{$hover-percentage};
-    --theme-l-active: #{$active-percentage};
-
-    @include define-theme-colors($brand-theme-colors);
-
-    @include define-static-colors;
-
-    @include ghost-mouse-state;
-
-    @include animated-tabs;
-    @include basic-navigation; // Replace header base color
-    @include border;
-    @include breadcrumb;
-    @include buttons;
-    @include checkboxes;
-    @include event-list;
-    @include generic-bg-hover;
-    @include group;
-    @include map-navigation-overlay;
-    @include map-navigation;
-    @include nav;
-    @include shadows;
-    @include sidebar-overlay;
-    @include vertical-tab-avatar;
-
-    @include background((var(--theme-color-1), var(--theme-color-2), var(--theme-color-3), var(--theme-color-4), var(--theme-color-5), var(--theme-color-6), var(--theme-color-7)));
-
-    @content;
-  }
-}
diff --git a/packages/core/scss/themes/utils/mixins/_blur.scss b/packages/core/scss/themes/utils/mixins/_blur.scss
deleted file mode 100644
index 5a302012c65..00000000000
--- a/packages/core/scss/themes/utils/mixins/_blur.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@mixin lightbox {
-  @warn ('DEPRECATION WARNING: Function will be removed in 7.0.0');
-  background-color: var(--theme-color-lightbox);
-  filter: blur(--theme-blur);
-}
-
-@mixin backdrop {
-  background-color: var(--theme-color-backdrop);
-  filter: blur(--theme-blur);
-}
diff --git a/packages/core/scss/v7/_fonts.scss b/packages/core/scss/v7/_fonts.scss
deleted file mode 100755
index 9b9fccf6af9..00000000000
--- a/packages/core/scss/v7/_fonts.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './mixins/fonts';
-
-@include font-face('sisan36', italic, $font-weight-bold);
-@include font-face('sisan33', italic, $font-weight-normal);
-@include font-face('sisan06', normal, $font-weight-bold);
-@include font-face('sisan03', normal, $font-weight-normal);
-
-.text-xs {
-  @include text-xs;
-}
-
-.text-s {
-  @include text-s;
-}
-
-.text-caption {
-  @include text-caption;
-}
-
-.text-caption-single {
-  @include text-caption-single;
-}
-
-.text-default {
-  @include text-default;
-}
-
-.text-default-single {
-  @include text-default-single;
-}
-
-.text-default-title {
-  @include text-default-title;
-}
-
-.text-default-title-single {
-  @include text-default-title-single;
-}
-
-.text-l {
-  @include text-l;
-}
-
-.text-l-single {
-  @include text-l-single;
-}
-
-.text-l-title {
-  @include text-l-title;
-}
-
-.text-l-title-single {
-  @include text-l-title-single;
-}
-
-.text-h2 {
-  @include text-h2;
-}
-
-.text-xl {
-  @include text-xl;
-}
-
-a {
-  color: var(--theme-color-primary);
-}
diff --git a/packages/core/scss/v7/_z-index.scss b/packages/core/scss/v7/_z-index.scss
deleted file mode 100644
index 847f4a255a3..00000000000
--- a/packages/core/scss/v7/_z-index.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-//  $zindex-dropdown:                   1000 !default;
-//  $zindex-sticky:                     1020 !default;
-//  $zindex-fixed:                      1030 !default;
-//  $zindex-modal-backdrop:             1040 !default;
-//  $zindex-modal:                      1050 !default;
-//  $zindex-popover:                    1060 !default;
-//  $zindex-tooltip:                    1070 !default;
-//
-// Copy from bootstrap
-//
-
-:root {
-  --theme-z-index-dropdown: 1000;
-  --theme-z-index-sticky: 1020;
-  --theme-z-index-fixed: 1030;
-  --theme-z-index-modal-backdrop: 1040;
-  --theme-z-index-modal: 1050;
-  --theme-z-index-popover: 1060;
-  --theme-z-index-tooltip: 1070;
-}
diff --git a/packages/core/scss/v7/fonts/cui-icons.eot b/packages/core/scss/v7/fonts/cui-icons.eot
deleted file mode 100755
index 0db74f689a6..00000000000
Binary files a/packages/core/scss/v7/fonts/cui-icons.eot and /dev/null differ
diff --git a/packages/core/scss/v7/fonts/cui-icons.ttf b/packages/core/scss/v7/fonts/cui-icons.ttf
deleted file mode 100755
index 5a0526de24f..00000000000
Binary files a/packages/core/scss/v7/fonts/cui-icons.ttf and /dev/null differ
diff --git a/packages/core/scss/v7/fonts/cui-icons.woff b/packages/core/scss/v7/fonts/cui-icons.woff
deleted file mode 100755
index d2f1a54c9fa..00000000000
Binary files a/packages/core/scss/v7/fonts/cui-icons.woff and /dev/null differ
diff --git a/packages/core/scss/v7/mixins/_animations.scss b/packages/core/scss/v7/mixins/_animations.scss
deleted file mode 100644
index eafb21d1e8c..00000000000
--- a/packages/core/scss/v7/mixins/_animations.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@mixin keyframes($name) {
-  @-webkit-keyframes #{$name} {
-    @content;
-  }
-  @-moz-keyframes #{$name} {
-    @content;
-  }
-  @-o-keyframes #{$name} {
-    @content;
-  }
-  @keyframes #{$name} {
-    @content;
-  }
-}
-
-@mixin animation($name, $time: $default-time, $easing-fn) {
-  -webkit-animation: $name $time, $easing-fn;
-  -moz-animation: $name $time, $easing-fn;
-  -o-animation: $name $time, $easing-fn;
-  animation: $name $time, $easing-fn;
-}
diff --git a/packages/core/scss/v7/mixins/_fonts.scss b/packages/core/scss/v7/mixins/_fonts.scss
deleted file mode 100755
index 81dfc5b83bd..00000000000
--- a/packages/core/scss/v7/mixins/_fonts.scss
+++ /dev/null
@@ -1,96 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@mixin font-face($file-name, $font-style, $font-weight) {
-  @font-face {
-    font-family: Siemens Sans;
-    src: url($font-path + $file-name + '.eot'), url($font-path + $file-name + '.woff2') format('woff2'), url($font-path + $file-name + '.woff') format('woff'),
-      url($font-path + $file-name + '.ttf') format('truetype');
-    font-style: $font-style;
-    font-weight: $font-weight;
-  }
-}
-
-@mixin font-smoothing {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smooting: grayscale;
-}
-
-@mixin text-format($font-size, $line-height, $font-weight: $font-weight-normal, $color-inverted: false) {
-  @include font-smoothing();
-  font-family: Siemens Sans, Arial, sans-serif;
-  font-size: $font-size;
-  font-weight: $font-weight;
-  line-height: $line-height;
-
-  @if $color-inverted {
-    color: var(--theme-color-inv-std-text);
-  } @else {
-    color: var(--theme-color-std-text);
-  }
-}
-
-@mixin text-default($color-inverted: false) {
-  @include text-format($font-size-default, $line-height-default, $font-weight-normal, $color-inverted);
-}
-
-@mixin text-default-single($color-inverted: false) {
-  @include text-format($font-size-default, $line-height-default-single, $font-weight-normal, $color-inverted);
-}
-
-@mixin text-default-title($color-inverted: false) {
-  @include text-format($font-size-default, $line-height-default, $font-weight-bold, $color-inverted);
-}
-
-@mixin text-default-title-single($color-inverted: false) {
-  @include text-format($font-size-default, $line-height-default-single, $font-weight-bold, $color-inverted);
-}
-
-@mixin text-xs($color-inverted: false) {
-  @include text-format($font-size-xs, $line-height-xs, $font-weight-normal, $color-inverted);
-}
-
-@mixin text-s($color-inverted: false) {
-  @include text-format($font-size-s, $line-height-s, $font-weight-normal, $color-inverted);
-}
-
-@mixin text-caption($color-inverted: false) {
-  @include text-format($font-size-caption, $line-height-caption, $font-weight-bold, $color-inverted);
-}
-
-@mixin text-caption-single($color-inverted: false) {
-  @include text-format($font-size-caption, $line-height-caption-single, $font-weight-bold, $color-inverted);
-}
-
-@mixin text-l($color-inverted: false) {
-  @include text-format($font-size-l, $line-height-l, $font-weight-normal, $color-inverted);
-}
-
-@mixin text-l-single($color-inverted: false) {
-  @include text-format($font-size-l, $line-height-l-single, $font-weight-normal, $color-inverted);
-}
-
-@mixin text-l-title($color-inverted: false) {
-  @include text-format($font-size-l, $line-height-l, $font-weight-bold, $color-inverted);
-}
-
-@mixin text-l-title-single($color-inverted: false) {
-  @include text-format($font-size-l, $line-height-l-single, $font-weight-bold, $color-inverted);
-}
-
-@mixin text-h2($color-inverted: false) {
-  @include text-format($font-size-xl, $line-height-h2, $font-weight-bold, $color-inverted);
-}
-
-@mixin text-xl($color-inverted: false) {
-  @include text-format($font-size-xl, $line-height-xl, $font-weight-normal, $color-inverted);
-}
-
-@function automatic-text-color($color, $theshold: 50) {
-  @if (lightness($color) > $theshold) {
-    @return rgba(0, 0, 0, 0.99);
-  } @else {
-    @return rgba(255, 255, 255, 0.99);
-  }
-}
diff --git a/packages/core/scss/v7/mixins/_hover.scss b/packages/core/scss/v7/mixins/_hover.scss
deleted file mode 100644
index 234c1749854..00000000000
--- a/packages/core/scss/v7/mixins/_hover.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@mixin hover() {
-  &:not(.disabled):not(:disabled) {
-    cursor: pointer;
-
-    &:hover {
-      @content;
-    }
-  }
-}
-
-@mixin active() {
-  &:not(.disabled):not(:disabled) {
-    cursor: pointer;
-
-    &:active {
-      @content;
-    }
-  }
-}
-
-@mixin focus() {
-  &:not(.disabled):not(:disabled) {
-
-    &:focus,
-    &:focus-visible {
-      @content;
-    }
-  }
-}
-
-@mixin focus-visible() {
-  &:not(.disabled):not(:disabled) {
-
-    &:focus-visible {
-      @content;
-    }
-  }
-}
-
-@mixin ghost-hover-pressed {
-  &:not(.disabled):not(:disabled) {
-    &.hover,
-    &:hover {
-      background-color: var(--theme-ghost--background--hover);
-    }
-
-    &.active,
-    &:active {
-      background-color: var(--theme-ghost--background--active);
-    }
-  }
-}
-
-// TODD
-@mixin generic-mouse-states() {
-  &:hover {
-    background-color: var(--theme-generic-bg-hover);
-  }
-
-  &:active {
-    background-color: var(--theme-generic-bg-active);
-  }
-
-  &.selected {
-    background-color: var(--theme-generic-bg-selected);
-  }
-}
diff --git a/packages/core/scss/v7/mixins/_text-truncation.scss b/packages/core/scss/v7/mixins/_text-truncation.scss
deleted file mode 100644
index a96065f41fb..00000000000
--- a/packages/core/scss/v7/mixins/_text-truncation.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@mixin ellipsis() {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
diff --git a/packages/core/scss/v7/theme/_define-theme-variable.scss b/packages/core/scss/v7/theme/_define-theme-variable.scss
deleted file mode 100644
index 82311ba7f6a..00000000000
--- a/packages/core/scss/v7/theme/_define-theme-variable.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@mixin define-theme-variable($name, $value) {
-  --theme-#{$name}: #{$value};
-}
diff --git a/packages/core/scss/vars/_animated-tabs.scss b/packages/core/scss/vars/_animated-tabs.scss
deleted file mode 100644
index 7ce8954efa2..00000000000
--- a/packages/core/scss/vars/_animated-tabs.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import '../theme-base-colors';
-
-@mixin animated-tabs-hover() {
-  :root {
-    --theme-animated-tabs-tab-bg-hover: #{darken($color-1, 5%)};
-    --theme-animated-tabs-tab-bg-hover-light: #{darken($color-1, 5%)};
-    --theme-animated-tabs-tab-bg-hover-dark: #{darken($color-13, 5%)};
-  }
-
-  body.theme-dark {
-    --theme-animated-tabs-tab-bg-hover: var(
-      --theme-animated-tabs-tab-bg-hover-dark
-    );
-  }
-}
-
-@mixin animated-tabs-tab-bg-active-hover() {
-  :root {
-    --theme-animated-tabs-tab-bg-active-hover: #{darken($color-teal, 5%)};
-    --theme-animated-tabs-tab-bg-active-hover-light: #{darken($color-teal, 5%)};
-    --theme-animated-tabs-tab-bg-active-hover-dark: #{darken($color-teal, 5%)};
-  }
-
-  body.theme-dark {
-    --theme-animated-tabs-tab-bg-active-hover: var(
-      --theme-animated-tabs-tab-bg-active-hover-dark
-    );
-  }
-}
-
-@mixin animated-tabs-tab-icon-selected() {
-  :root {
-    --theme-animated-tabs-tab-icon-selected: #fffffe;
-    --theme-animated-tabs-tab-icon-selected-light: #fffffe;
-    --theme-animated-tabs-tab-icon-selected-dark: #fffeff;
-  }
-  body.theme-dark {
-    --theme-animated-tabs-tab-icon-selected: var(
-      --theme-animated-tabs-tab-icon-selected-dark
-    );
-  }
-}
-
-@include animated-tabs-hover();
-@include animated-tabs-tab-bg-active-hover();
-@include animated-tabs-tab-icon-selected();
diff --git a/packages/core/scss/vars/_background.scss b/packages/core/scss/vars/_background.scss
deleted file mode 100644
index d9b23e65fc6..00000000000
--- a/packages/core/scss/vars/_background.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './../theme-base-colors';
-
-@mixin bg($number, $light, $dark) {
-  :root {
-    --theme-bg-#{$number}: #{$light};
-    --theme-bg-#{$number}-light: #{$light};
-    --theme-bg-#{$number}-dark: #{$dark};
-  }
-
-  body.theme-dark {
-    --theme-bg-#{$number}: var(--theme-bg-#{$number}-dark);
-  }
-}
-
-@include bg(1, $color-1, $color-13);
-@include bg(2, $color-2, $color-12);
-@include bg(3, $color-3, $color-11);
-@include bg(4, $color-4, $color-10);
-@include bg(5, $color-5, $color-9);
-@include bg(6, $color-6, $color-8);
-@include bg(7, $color-7, $color-7);
diff --git a/packages/core/scss/vars/_basic-navigation.scss b/packages/core/scss/vars/_basic-navigation.scss
deleted file mode 100644
index 203cd37ffb4..00000000000
--- a/packages/core/scss/vars/_basic-navigation.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './utils/define-theme-variable';
-
-@include define-theme-variable(
-  'basic-navigation-selected',
-  var(--theme-base-color-3),
-  var(--theme-base-color-11)
-);
-
-@include define-theme-variable(
-  'basic-navigation-avatar-background',
-  var(--theme-base-color-14),
-  var(--theme-base-color-1)
-);
-
-@include define-theme-variable(
-  'basic-navigation-avatar-background-opacity',
-  0.15,
-  0.6
-);
diff --git a/packages/core/scss/vars/_border.scss b/packages/core/scss/vars/_border.scss
deleted file mode 100644
index 29c3ae9e1e0..00000000000
--- a/packages/core/scss/vars/_border.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './utils/define-theme-variable';
-
-@include define-theme-variable(
-  'color-weak-bdr-1',
-  var(--theme-base-color-12-15),
-  var(--theme-base-color-3-15)
-);
-
-@mixin variant-border($name, $size, $color-light, $color-dark) {
-  :root {
-    --theme-#{$name}: #{$size} solid #{$color-light};
-    --theme-#{$name}-light: #{$size} solid #{$color-light};
-    --theme-#{$name}-dark: #{$size} solid #{$color-dark};
-  }
-
-  body.theme-dark {
-    --theme-#{$name}: var(--theme-#{$name}-dark);
-  }
-}
-
-@include variant-border(
-  'std-bdr-1',
-  0.0625rem,
-  #{var(--theme-base-color-8-60)},
-  #{var(--theme-base-color-3-60)}
-);
-
-@include variant-border(
-  'std-bdr-2',
-  0.125rem,
-  #{var(--theme-base-color-8-60)},
-  #{var(--theme-base-color-3-60)}
-);
-
-@include variant-border(
-  'primary-bdr-1',
-  0.0625rem,
-  #{var(--theme-base-color-teal)},
-  #{var(--theme-base-color-light-teal)}
-);
-
-@include variant-border(
-  'primary-bdr-2',
-  0.125rem,
-  #{var(--theme-base-color-teal)},
-  #{var(--theme-base-color-light-teal)}
-);
-
-@include variant-border(
-  'soft-bdr-1',
-  0.0625rem,
-  #{var(--theme-base-color-8-40)},
-  #{var(--theme-base-color-3-40)}
-);
-
-@include variant-border(
-  'soft-bdr-2',
-  0.125rem,
-  #{var(--theme-base-color-8-40)},
-  #{var(--theme-base-color-3-40)}
-);
-
-@include variant-border(
-  'weak-bdr-1',
-  0.0625rem,
-  #{var(--theme-base-color-12-15)},
-  #{var(--theme-base-color-3-15)}
-);
diff --git a/packages/core/scss/vars/_breadcrumb.scss b/packages/core/scss/vars/_breadcrumb.scss
deleted file mode 100644
index 86581b2657f..00000000000
--- a/packages/core/scss/vars/_breadcrumb.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './utils/var-darken';
-
-@mixin breadcrumb {
-  @include var-darken('breadcrumb-hover', $color-5, $color-9, 5%);
-  @include var-darken('breadcrumb-active', $color-5, $color-9, 10%);
-}
-
-@include breadcrumb();
diff --git a/packages/core/scss/vars/_buttons.scss b/packages/core/scss/vars/_buttons.scss
deleted file mode 100644
index bb0e3c2ba59..00000000000
--- a/packages/core/scss/vars/_buttons.scss
+++ /dev/null
@@ -1,137 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './utils/define-theme-variable';
-@import './../theme-base-colors';
-@import './../variables';
-
-$amount-hover: 5%;
-$amount-active: 10%;
-
-@mixin btn-primary {
-  @include define-theme-variable('btn-primary-bg', var(--theme-base-color-teal), var(--theme-base-color-light-teal));
-
-  @include define-theme-variable('btn-primary-bg-hover', darken($color-teal, $amount-hover), lighten($color-light-teal, $amount-hover));
-
-  @include define-theme-variable('btn-primary-bg-active', darken($color-teal, $amount-active), lighten($color-light-teal, $amount-active));
-
-  @include define-theme-variable('btn-primary-color', var(--theme-base-color-1), var(--theme-color-inv-contrast-text-dark));
-
-  @include define-theme-variable('btn-primary-border-color', transparent, transparent);
-
-  @include define-theme-variable('btn-primary-bg-disabled', var(--theme-base-color-12-25), var(--theme-base-color-1-40));
-
-  @include define-theme-variable('btn-primary-color-disabled', var(--theme-base-color-1-85), var(--theme-base-color-1-40));
-
-  @include define-theme-variable('btn-primary-border-color-disabled', transparent, transparent);
-}
-
-@mixin btn-outline-primary {
-  @include define-theme-variable('btn-outline-primary-bg', var(--theme-base-color-1), var(--theme-base-color-13));
-
-  @include define-theme-variable('btn-outline-primary-bg-hover', darken($color-1, $amount-hover), lighten($color-13, $amount-hover));
-
-  @include define-theme-variable('btn-outline-primary-bg-active', darken($color-1, $amount-active), lighten($color-13, $amount-active));
-
-  @include define-theme-variable('btn-outline-primary-color', var(--theme-base-color-teal), var(--theme-base-color-light-teal));
-
-  @include define-theme-variable('btn-outline-primary-border-color', var(--theme-base-color-teal), var(--theme-base-color-light-teal));
-
-  @include define-theme-variable('btn-outline-primary-border-width', $btn-border-width, $btn-border-width);
-
-  @include define-theme-variable('btn-outline-primary-border-width-disabled', $btn-border-width, $btn-border-width);
-
-  @include define-theme-variable('btn-outline-primary-bg-disabled', transparent, transparent);
-
-  @include define-theme-variable('btn-outline-primary-color-disabled', var(--theme-base-color-12-25), var(--theme-base-color-1-25));
-
-  @include define-theme-variable('btn-outline-primary-border-color-disabled', var(--theme-base-color-12-25), var(--theme-base-color-1-25));
-}
-
-@mixin btn-invisible-primary {
-  @include define-theme-variable('btn-invisible-primary-bg', transparent, transparent);
-
-  @include define-theme-variable('btn-invisible-primary-bg-hover', var(--theme-base-color-14-05), var(--theme-base-color-1-05));
-
-  @include define-theme-variable('btn-invisible-primary-bg-active', var(--theme-base-color-14-10), var(--theme-base-color-1-10));
-
-  @include define-theme-variable('btn-invisible-primary-width', 0, 0);
-
-  @include define-theme-variable('btn-invisible-primary-color', var(--theme-base-color-teal), var(--theme-base-color-light-teal));
-
-  @include define-theme-variable('btn-invisible-primary-border-color', transparent, transparent);
-
-  @include define-theme-variable('btn-invisible-primary-bg-disabled', var(--theme-base-color-14-05), var(--theme-base-color-13));
-
-  @include define-theme-variable('btn-invisible-primary-width-disabled', 0, 0);
-
-  @include define-theme-variable('btn-invisible-primary-color-disabled', var(--theme-base-color-14-30), var(--theme-base-color-1-40));
-
-  @include define-theme-variable('btn-invisible-primary-border-color-disabled', transparent, transparent);
-}
-
-@mixin btn-secondary {
-  @include define-theme-variable('btn-secondary-bg', var(--theme-base-color-5), var(--theme-base-color-9));
-
-  @include define-theme-variable('btn-secondary-bg-hover', darken($color-5, $amount-hover), lighten($color-9, $amount-hover));
-
-  @include define-theme-variable('btn-secondary-bg-active', darken($color-5, $amount-active), lighten($color-9, $amount-active));
-
-  @include define-theme-variable('btn-secondary-color', var(--theme-color-std-text), var(--theme-color-std-text-dark));
-
-  @include define-theme-variable('btn-secondary-border-color', transparent, transparent);
-
-  @include define-theme-variable('btn-secondary-bg-disabled', transparent, transparent);
-
-  @include define-theme-variable('btn-secondary-color-disabled', var(--theme-color-weak-text), var(--theme-color-weak-text-dark));
-
-  @include define-theme-variable('btn-secondary-border-color-disabled', transparent, transparent);
-}
-
-@mixin btn-outline-secondary {
-  @include define-theme-variable('btn-outline-secondary-bg', var(--theme-base-color-1), var(--theme-base-color-13));
-
-  @include define-theme-variable('btn-outline-secondary-bg-hover', darken($color-1, $amount-hover), lighten($color-13, $amount-hover));
-
-  @include define-theme-variable('btn-outline-secondary-bg-active', darken($color-1, $amount-active), lighten($color-13, $amount-active));
-
-  @include define-theme-variable('btn-outline-secondary-color', var(--theme-color-std-text), var(--theme-color-std-text-dark));
-
-  @include define-theme-variable('btn-outline-secondary-border-color', var(--theme-base-color-6), var(--theme-base-color-3-60));
-
-  @include define-theme-variable('btn-outline-secondary-border-width', $btn-border-width, $btn-border-width);
-
-  @include define-theme-variable('btn-outline-secondary-border-width-disabled', $btn-border-width, $btn-border-width);
-
-  @include define-theme-variable('btn-outline-secondary-bg-disabled', transparent, transparent);
-
-  @include define-theme-variable('btn-outline-secondary-color-disabled', var(--theme-color-weak-text), var(--theme-color-weak-text-dark));
-
-  @include define-theme-variable('btn-outline-secondary-border-color-disabled', var(--theme-base-color-12-25), var(--theme-base-color-1-25));
-}
-
-@mixin btn-invisible-secondary {
-  @include define-theme-variable('btn-invisible-secondary-bg', transparent, transparent);
-
-  @include define-theme-variable('btn-invisible-secondary-bg-hover', var(--theme-base-color-14-05), var(--theme-base-color-1-05));
-
-  @include define-theme-variable('btn-invisible-secondary-bg-active', var(--theme-base-color-14-10), var(--theme-base-color-1-10));
-
-  @include define-theme-variable('btn-invisible-secondary-color', var(--theme-color-std-text), var(--theme-color-std-text-dark));
-
-  @include define-theme-variable('btn-invisible-secondary-border-color', transparent, transparent);
-
-  @include define-theme-variable('btn-invisible-secondary-bg-disabled', transparent, transparent);
-
-  @include define-theme-variable('btn-invisible-secondary-color-disabled', var(--theme-color-weak-text), var(--theme-color-weak-text-dark));
-
-  @include define-theme-variable('btn-invisible-secondary-border-color-disabled', transparent, transparent);
-}
-
-@include btn-primary();
-@include btn-outline-primary();
-@include btn-invisible-primary();
-
-@include btn-secondary();
-@include btn-outline-secondary();
-@include btn-invisible-secondary();
diff --git a/packages/core/scss/vars/_checkbox.scss b/packages/core/scss/vars/_checkbox.scss
deleted file mode 100644
index 906891430d2..00000000000
--- a/packages/core/scss/vars/_checkbox.scss
+++ /dev/null
@@ -1,161 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@mixin checkbox {
-  :root {
-    --theme-checkbox: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjRkZGIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxNUY3NSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIvPgogIDwvZz4KPC9zdmc+Cg==');
-    --theme-checkbox-light: var(--theme-checkbox);
-    --theme-checkbox-dark: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0VCRjBGNSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIvPgogIDwvZz4KPC9zdmc+Cg==');
-  }
-
-  body.theme-dark {
-    --theme-checkbox: var(--theme-checkbox-dark);
-  }
-}
-
-@mixin checkbox-hover {
-  :root {
-    --theme-checkbox-hover: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjRkZGIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxNUY3NSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuMDUiLz4KICA8L2c+Cjwvc3ZnPgo=');
-    --theme-checkbox-hover-light: var(--theme-checkbox-hover);
-    --theme-checkbox-hover-dark: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0VCRjBGNSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0ZGRiIgZmlsbC1vcGFjaXR5PSIuMDciLz4KICA8L2c+Cjwvc3ZnPgo=');
-  }
-
-  body.theme-dark {
-    --theme-checkbox-hover: var(--theme-checkbox-hover-dark);
-  }
-}
-
-@mixin checkbox-active {
-  :root {
-    --theme-checkbox-active: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjRkZGIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxNUY3NSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuMSIvPgogIDwvZz4KPC9zdmc+Cg==');
-    --theme-checkbox-active-light: var(--theme-checkbox-active);
-    --theme-checkbox-active-dark: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0VCRjBGNSIgc3Ryb2tlLW9wYWNpdHk9Ii42IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI0ZGRiIgZmlsbC1vcGFjaXR5PSIuMTQiLz4KICA8L2c+Cjwvc3ZnPgo=');
-  }
-
-  body.theme-dark {
-    --theme-checkbox-active: var(--theme-checkbox-active-dark);
-  }
-}
-
-@mixin checkbox-disabled {
-  :root {
-    --theme-checkbox-disabled: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1Ii8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzE3MjEyNiIgc3Ryb2tlLW9wYWNpdHk9Ii4yNSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPC9nPgo8L3N2Zz4K');
-    --theme-checkbox-disabled-light: var(--theme-checkbox-disabled);
-    --theme-checkbox-disabled-dark: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1Ii8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLW9wYWNpdHk9Ii4yNSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPC9nPgo8L3N2Zz4K');
-  }
-
-  body.theme-dark {
-    --theme-checkbox-disabled: var(--theme-checkbox-disabled-dark);
-  }
-}
-
-@mixin checkbox-checked {
-  :root {
-    --theme-checkbox-checked: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiBmaWxsPSIjMEU3NzdDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIvPgogICAgPHBvbHlnb24gZmlsbD0iI0ZGRkZGRSIgZmlsbC1vcGFjaXR5PSIuODUiIHBvaW50cz0iMTQuMjkzIDIuMjkzIDE1LjcwNyAzLjcwNyA2IDEzLjQxNCAxLjI5MyA4LjcwNyAyLjcwNyA3LjI5MyA2IDEwLjU4NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCA0KSIvPgogIDwvZz4KPC9zdmc+Cg==');
-    --theme-checkbox-checked-light: var(--theme-checkbox-checked);
-    --theme-checkbox-checked-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='18' height='18' x='3' y='3' fill='%2341AAAA'/%3E%3Crect width='18' height='18' x='3' y='3'/%3E%3Crect width='24' height='24'/%3E%3Cpolygon fill='%23000100' points='14.293 2.293 15.707 3.707 6 13.414 1.293 8.707 2.707 7.293 6 10.586' transform='translate(4 4)'/%3E%3C/g%3E%3C/svg%3E%0A");
-  }
-
-  body.theme-dark {
-    --theme-checkbox-checked: var(--theme-checkbox-checked-dark);
-  }
-}
-
-@mixin checkbox-checked-hover {
-  :root {
-    --theme-checkbox-checked-hover: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiBmaWxsPSIjMEU3NzdDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuMDUiLz4KICAgIDxwb2x5Z29uIGZpbGw9IiNGRkZGRkUiIGZpbGwtb3BhY2l0eT0iLjg1IiBwb2ludHM9IjE0LjI5MyAyLjI5MyAxNS43MDcgMy43MDcgNiAxMy40MTQgMS4yOTMgOC43MDcgMi43MDcgNy4yOTMgNiAxMC41ODYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgNCkiLz4KICA8L2c+Cjwvc3ZnPgo=');
-    --theme-checkbox-checked-hover-light: var(--theme-checkbox-checked-hover);
-    --theme-checkbox-checked-hover-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='18' height='18' x='3' y='3' fill='%2341AAAA'/%3E%3Crect width='18' height='18' x='3' y='3'/%3E%3Crect width='24' height='24' fill='%23FFF' fill-opacity='.07'/%3E%3Cpolygon fill='%23000100' points='14.293 2.293 15.707 3.707 6 13.414 1.293 8.707 2.707 7.293 6 10.586' transform='translate(4 4)'/%3E%3C/g%3E%3C/svg%3E%0A");
-  }
-
-  body.theme-dark {
-    --theme-checkbox-checked-hover: var(--theme-checkbox-checked-hover-dark);
-  }
-}
-
-@mixin checkbox-checked-active {
-  :root {
-    --theme-checkbox-checked-active: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiBmaWxsPSIjMEU3NzdDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHg9IjMiIHk9IjMiLz4KICAgIDxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAwMCIgZmlsbC1vcGFjaXR5PSIuMSIvPgogICAgPHBvbHlnb24gZmlsbD0iI0ZGRkZGRSIgZmlsbC1vcGFjaXR5PSIuODUiIHBvaW50cz0iMTQuMjkzIDIuMjkzIDE1LjcwNyAzLjcwNyA2IDEzLjQxNCAxLjI5MyA4LjcwNyAyLjcwNyA3LjI5MyA2IDEwLjU4NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCA0KSIvPgogIDwvZz4KPC9zdmc+Cg==');
-    --theme-checkbox-checked-active-light: var(--theme-checkbox-checked-active);
-    --theme-checkbox-checked-active-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect width='18' height='18' x='3' y='3' fill='%2341AAAA'/%3E%3Crect width='18' height='18' x='3' y='3'/%3E%3Crect width='24' height='24' fill='%23FFF' fill-opacity='.14'/%3E%3Cpolygon fill='%23000100' points='14.293 2.293 15.707 3.707 6 13.414 1.293 8.707 2.707 7.293 6 10.586' transform='translate(4 4)'/%3E%3C/g%3E%3C/svg%3E%0A");
-  }
-
-  body.theme-dark {
-    --theme-checkbox-checked-active: var(--theme-checkbox-checked-active-dark);
-  }
-}
-
-@mixin checkbox-checked-disabled {
-  :root {
-    --theme-checkbox-checked-disabled: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiBmaWxsPSIjMTcyMTI2IiBmaWxsLW9wYWNpdHk9Ii4yNSIvPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIi8+CiAgICA8cG9seWdvbiBmaWxsPSIjRkZGRkZFIiBmaWxsLW9wYWNpdHk9Ii44NSIgcG9pbnRzPSIxNC4yOTMgMi4yOTMgMTUuNzA3IDMuNzA3IDYgMTMuNDE0IDEuMjkzIDguNzA3IDIuNzA3IDcuMjkzIDYgMTAuNTg2IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0IDQpIi8+CiAgPC9nPgo8L3N2Zz4K');
-    --theme-checkbox-checked-disabled-light: var(--theme-checkbox-checked-disabled);
-    --theme-checkbox-checked-disabled-dark: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiBmaWxsPSIjRkZGIiBmaWxsLW9wYWNpdHk9Ii4yNSIvPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIi8+CiAgICA8cG9seWdvbiBmaWxsPSIjRkZGRUZGIiBmaWxsLW9wYWNpdHk9Ii40IiBwb2ludHM9IjE0LjI5MyAyLjI5MyAxNS43MDcgMy43MDcgNiAxMy40MTQgMS4yOTMgOC43MDcgMi43MDcgNy4yOTMgNiAxMC41ODYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgNCkiLz4KICA8L2c+Cjwvc3ZnPgo=');
-  }
-
-  body.theme-dark {
-    --theme-checkbox-checked-disabled: var(--theme-checkbox-checked-disabled-dark);
-  }
-}
-
-@mixin checkbox-indeterminate {
-  :root {
-    --theme-checkbox-indeterminate: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB4PSIzIiB5PSIzIiBmaWxsPSIjRkZGIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzBFNzc3QyIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjMEU3NzdDIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4KICA8L2c+Cjwvc3ZnPgo=');
-    --theme-checkbox-indeterminate-light: var(--theme-checkbox-indeterminate);
-    --theme-checkbox-indeterminate-dark: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxQUFBQSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjNDFBQUFBIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz4KICA8L2c+Cjwvc3ZnPgo=');
-  }
-
-  body.theme-dark {
-    --theme-checkbox-indeterminate: var(--theme-checkbox-indeterminate-dark);
-  }
-}
-
-@mixin checkbox-indeterminate-hover {
-  :root {
-    --theme-checkbox-indeterminate-hover: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjRkZGIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzBFNzc3QyIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjMEU3NzdDIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iLjA1Ii8+CiAgPC9nPgo8L3N2Zz4K');
-    --theme-checkbox-indeterminate-hover-light: var(--theme-checkbox-indeterminate-hover);
-    --theme-checkbox-indeterminate-hover-dark: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxQUFBQSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjNDFBQUFBIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiNGRkYiIGZpbGwtb3BhY2l0eT0iLjA3Ii8+CiAgPC9nPgo8L3N2Zz4K');
-  }
-
-  body.theme-dark {
-    --theme-checkbox-indeterminate-hover: var(--theme-checkbox-indeterminate-hover-dark);
-  }
-}
-
-@mixin checkbox-indeterminate-active {
-  :root {
-    --theme-checkbox-indeterminate-active: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjRkZGIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzBFNzc3QyIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjMEU3NzdDIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iLjEiLz4KICA8L2c+Cjwvc3ZnPgo=');
-    --theme-checkbox-indeterminate-active-light: var(--theme-checkbox-indeterminate-active);
-    --theme-checkbox-indeterminate-active-dark: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1IiBmaWxsPSIjMTAxODFDIi8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzQxQUFBQSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjNDFBQUFBIi8+CiAgICA8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiNGRkYiIGZpbGwtb3BhY2l0eT0iLjE0Ii8+CiAgPC9nPgo8L3N2Zz4K');
-  }
-
-  body.theme-dark {
-    --theme-checkbox-indeterminate-active: var(--theme-checkbox-indeterminate-active-dark);
-  }
-}
-
-@mixin checkbox-indeterminate-disabled {
-  :root {
-    --theme-checkbox-indeterminate-disabled: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1Ii8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iIzE3MjEyNiIgc3Ryb2tlLW9wYWNpdHk9Ii4yNSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjMTcyMTI2IiBmaWxsLW9wYWNpdHk9Ii4yNSIvPgogIDwvZz4KPC9zdmc+Cg==');
-    --theme-checkbox-indeterminate-disabled-light: var(--theme-checkbox-indeterminate-disabled);
-    --theme-checkbox-indeterminate-disabled-dark: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPHJlY3Qgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB4PSI1IiB5PSI1Ii8+CiAgICA8cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHg9IjQiIHk9IjQiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLW9wYWNpdHk9Ii4yNSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8cmVjdCB3aWR0aD0iNiIgaGVpZ2h0PSI2IiB4PSI5IiB5PSI5IiBmaWxsPSIjRkZGIiBmaWxsLW9wYWNpdHk9Ii4yNSIvPgogIDwvZz4KPC9zdmc+Cg==');
-  }
-
-  body.theme-dark {
-    --theme-checkbox-indeterminate-disabled: var(--theme-checkbox-indeterminate-disabled-dark);
-  }
-}
-
-@include checkbox();
-@include checkbox-hover();
-@include checkbox-active();
-@include checkbox-disabled();
-
-@include checkbox-checked();
-@include checkbox-checked-hover();
-@include checkbox-checked-active();
-@include checkbox-checked-disabled();
-
-@include checkbox-indeterminate();
-@include checkbox-indeterminate-hover();
-@include checkbox-indeterminate-active();
-@include checkbox-indeterminate-disabled();
diff --git a/packages/core/scss/vars/_event-list.scss b/packages/core/scss/vars/_event-list.scss
deleted file mode 100644
index c5770e4a884..00000000000
--- a/packages/core/scss/vars/_event-list.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import './utils/define-theme-variable';
-
-@mixin event-list-item {
-  :root {
-    --theme-event-list-item-hover: #{darken($color-1, 5%)};
-    --theme-event-list-item-hover-light: #{darken($color-1, 5%)};
-    --theme-event-list-item-hover-dark: #{lighten($color-13, 5%)};
-
-    --theme-event-list-item-pressed: #{darken($color-1, 10%)};
-    --theme-event-list-item-pressed-light: #{darken($color-1, 10%)};
-    --theme-event-list-item-pressed-dark: #{lighten($color-13, 10%)};
-  }
-
-  body.theme-dark {
-    --theme-event-list-item-hover: var(--theme-event-list-item-hover-dark);
-    --theme-event-list-item-pressed: var(--theme-event-list-item-pressed-dark);
-  }
-}
-
-@include event-list-item();
-
-@include define-theme-variable(
-  'event-list-item-border',
-  var(--theme-base-color-12-15),
-  var(--theme-base-color-3-15)
-);
-
-@include define-theme-variable(
-  'event-list-item-bg',
-  var(--theme-base-color-1),
-  var(--theme-base-color-13)
-);
diff --git a/packages/core/scss/vars/_generic-bg-hover.scss b/packages/core/scss/vars/_generic-bg-hover.scss
deleted file mode 100644
index d6b1f66852c..00000000000
--- a/packages/core/scss/vars/_generic-bg-hover.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './utils/define-theme-variable';
-
-@include define-theme-variable(
-  'generic-bg-hover',
-  var(--theme-base-color-14-05),
-  var(--theme-base-color-1-05)
-);
-
-@include define-theme-variable(
-  'generic-bg-active',
-  var(--theme-base-color-14-10),
-  var(--theme-base-color-1-10)
-);
-
-@include define-theme-variable(
-  'generic-bg-selected',
-  var(--theme-base-color-light-teal-25),
-  var(--theme-base-color-light-teal-25)
-);
diff --git a/packages/core/scss/vars/_ghost-mouse-state.scss b/packages/core/scss/vars/_ghost-mouse-state.scss
deleted file mode 100644
index 5c3f7d8079b..00000000000
--- a/packages/core/scss/vars/_ghost-mouse-state.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './utils/define-theme-variable';
-
-@include define-theme-variable('ghost-hover', var(--theme-base-color-14-05), var(--theme-base-color-1-05));
-
-@include define-theme-variable('ghost-pressed', var(--theme-base-color-14-10), var(--theme-base-color-1-10));
-
-@include define-theme-variable('ghost-active', var(--theme-base-color-14-10), var(--theme-base-color-1-10));
-
-@include define-theme-variable('ghost-selected', var(--theme-base-color-light-teal-25), var(--theme-base-color-light-teal-25));
-
-@include define-theme-variable('ghost-weak-selected', var(--theme-base-color-light-teal-15), var(--theme-base-color-light-teal-15));
diff --git a/packages/core/scss/vars/_group.scss b/packages/core/scss/vars/_group.scss
deleted file mode 100644
index 2091dfb7749..00000000000
--- a/packages/core/scss/vars/_group.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './utils/var-darken';
-
-@mixin group {
-  @include var-darken('group-hover', $color-1, $color-13, 5%);
-  @include var-darken('group-pressed', $color-1, $color-13, 10%);
-}
-
-@include group();
diff --git a/packages/core/scss/vars/_map-navigation-overlay.scss b/packages/core/scss/vars/_map-navigation-overlay.scss
deleted file mode 100644
index 6c377a0fbf0..00000000000
--- a/packages/core/scss/vars/_map-navigation-overlay.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import './utils/var-darken';
-@import './utils/var-fade-out';
-@import '../theme-base-colors';
-
-@include var-fade-out('map-navigation-overlay-blur', $color-1, $color-13, 0.3);
-@include var-fade-out(
-  'map-navigation-overlay-header-blur',
-  $color-3,
-  $color-11,
-  0.3
-);
diff --git a/packages/core/scss/vars/_map-navigation.scss b/packages/core/scss/vars/_map-navigation.scss
deleted file mode 100644
index 02cf4c95ab0..00000000000
--- a/packages/core/scss/vars/_map-navigation.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-@import './../theme-base-colors';
-@import './utils/define-theme-variable';
-
-@mixin map-navigation-brand {
-  $logo-siemens: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2276%22%20height%3D%2212%22%20viewBox%3D%220%200%2076%2012%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M-32-4h160v20H-32z%22/%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M.234%2011.579V9.293c1.302.41%202.452.615%203.455.615%201.382%200%202.072-.365%202.072-1.095%200-.272-.1-.5-.3-.686-.207-.195-.736-.469-1.584-.816C2.353%206.684%201.36%206.15.899%205.709.299%205.128%200%204.392%200%203.505%200%202.361.437%201.49%201.308.89%202.17.297%203.293%200%204.678%200%205.44%200%206.545.141%207.99.421V2.62c-1.075-.429-2.072-.644-2.995-.644-1.298%200-1.947.358-1.947%201.07%200%20.269.131.485.392.655.219.136.819.423%201.799.865C6.65%205.192%207.59%205.736%208.06%206.2c.557.55.835%201.26.835%202.134%200%201.252-.545%202.207-1.636%202.865-.883.535-2.029.802-3.435.802-1.189%200-2.386-.14-3.59-.421zm10.486.186h3.232V.202H10.72v11.563zm6.199%200V.202h8.292v2.09h-5.177v2.612h4.507v1.907h-4.507v2.746h5.31v2.208H16.92zm10.537%200V.202h4.192l2.912%207.389L37.545.202h3.981v11.563h-3.065V3.58l-3.395%208.303h-2.003l-3.33-8.303v8.186h-2.277zm17.036%200V.202h8.291v2.09h-5.176v2.612h4.506v1.907h-4.506v2.746h5.31v2.208h-8.425zm10.554%200V.202h3.746l3.976%207.74V.203h2.277v11.563h-3.641l-4.08-7.845v7.845h-2.278zm12.293-.186V9.293c1.292.41%202.442.615%203.455.615%201.383%200%202.074-.365%202.074-1.095%200-.272-.1-.5-.294-.686-.206-.195-.737-.469-1.591-.816-1.518-.62-2.514-1.155-2.98-1.602-.598-.577-.898-1.314-.898-2.214%200-1.137.436-2.005%201.308-2.605C69.275.297%2070.4%200%2071.784%200c.78%200%201.788.125%203.026.373l.286.048V2.62c-1.075-.429-2.076-.644-3.002-.644-1.294%200-1.938.358-1.938%201.07%200%20.269.128.485.39.655.208.13.811.419%201.807.865%201.402.627%202.34%201.171%202.813%201.634.556.55.834%201.26.834%202.134%200%201.252-.542%202.207-1.628%202.865-.887.535-2.035.802-3.441.802-1.19%200-2.387-.14-3.592-.421z%22/%3E%3C/g%3E%3C/svg%3E');
-  $logo-siemens-black: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2276%22%20height%3D%2212%22%20viewBox%3D%220%200%2076%2012%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M-32-4h160v20H-32z%22/%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M.234%2011.579V9.293c1.302.41%202.452.615%203.455.615%201.382%200%202.072-.365%202.072-1.095%200-.272-.1-.5-.3-.686-.207-.195-.736-.469-1.584-.816C2.353%206.684%201.36%206.15.899%205.709.299%205.128%200%204.392%200%203.505%200%202.361.437%201.49%201.308.89%202.17.297%203.293%200%204.678%200%205.44%200%206.545.141%207.99.421V2.62c-1.075-.429-2.072-.644-2.995-.644-1.298%200-1.947.358-1.947%201.07%200%20.269.131.485.392.655.219.136.819.423%201.799.865C6.65%205.192%207.59%205.736%208.06%206.2c.557.55.835%201.26.835%202.134%200%201.252-.545%202.207-1.636%202.865-.883.535-2.029.802-3.435.802-1.189%200-2.386-.14-3.59-.421zm10.486.186h3.232V.202H10.72v11.563zm6.199%200V.202h8.292v2.09h-5.177v2.612h4.507v1.907h-4.507v2.746h5.31v2.208H16.92zm10.537%200V.202h4.192l2.912%207.389L37.545.202h3.981v11.563h-3.065V3.58l-3.395%208.303h-2.003l-3.33-8.303v8.186h-2.277zm17.036%200V.202h8.291v2.09h-5.176v2.612h4.506v1.907h-4.506v2.746h5.31v2.208h-8.425zm10.554%200V.202h3.746l3.976%207.74V.203h2.277v11.563h-3.641l-4.08-7.845v7.845h-2.278zm12.293-.186V9.293c1.292.41%202.442.615%203.455.615%201.383%200%202.074-.365%202.074-1.095%200-.272-.1-.5-.294-.686-.206-.195-.737-.469-1.591-.816-1.518-.62-2.514-1.155-2.98-1.602-.598-.577-.898-1.314-.898-2.214%200-1.137.436-2.005%201.308-2.605C69.275.297%2070.4%200%2071.784%200c.78%200%201.788.125%203.026.373l.286.048V2.62c-1.075-.429-2.076-.644-3.002-.644-1.294%200-1.938.358-1.938%201.07%200%20.269.128.485.39.655.208.13.811.419%201.807.865%201.402.627%202.34%201.171%202.813%201.634.556.55.834%201.26.834%202.134%200%201.252-.542%202.207-1.628%202.865-.887.535-2.035.802-3.441.802-1.19%200-2.387-.14-3.592-.421z%22/%3E%3C/g%3E%3C/svg%3E');
-
-  :root {
-    --theme-map-navigation-brand-light: #{$logo-siemens-black};
-    --theme-map-navigation-brand-dark: #{$logo-siemens};
-
-    --theme-map-navigation-brand: var(--theme-map-navigation-brand-light);
-  }
-
-  body.theme-dark {
-    --theme-map-navigation-brand: var(--theme-map-navigation-brand-dark);
-  }
-}
-
-@mixin map-navigation-background {
-  :root {
-    --theme-map-navigation-background-light: var(--theme-base-color-3);
-    --theme-map-navigation-background-dark: var(--theme-base-color-11);
-
-    --theme-map-navigation-background: var(
-      --theme-map-navigation-background-light
-    );
-  }
-
-  body.theme-dark {
-    --theme-map-navigation-background: var(
-      --theme-map-navigation-background-dark
-    );
-  }
-}
-
-@mixin map-navigation-header {
-  :root {
-    --theme-map-navigation-header-light: linear-gradient(
-      to bottom,
-      $color-3,
-      rgba(240, 244, 248, 0.65) 50%,
-      rgba(245, 248, 250, 0) 98%
-    );
-
-    --theme-map-navigation-header-dark: var(--theme-base-color-13);
-    --theme-map-navigation-header: var(--theme-map-navigation-header-light);
-  }
-
-  body.theme-dark {
-    --theme-map-navigation-header: var(--theme-map-navigation-header-dark);
-  }
-}
-
-@mixin vertical-tabs-background {
-  :root {
-    --theme-vertical-tabs-background-light: var(--theme-base-color-5);
-    --theme-vertical-tabs-background-dark: #3f4b52;
-
-    --theme-vertical-tabs-background: var(
-      --theme-vertical-tabs-background-light
-    );
-  }
-
-  body.theme-dark {
-    --theme-vertical-tabs-background: var(
-      --theme-vertical-tabs-background-dark
-    );
-  }
-}
-
-@include map-navigation-brand();
-@include map-navigation-background();
-@include map-navigation-header();
-@include vertical-tabs-background();
-
-@include define-theme-variable(
-  'vertical-tabs-font-color',
-  var(--theme-base-color-14),
-  var(--theme-base-color-1-85)
-);
diff --git a/packages/core/scss/vars/_nav.scss b/packages/core/scss/vars/_nav.scss
deleted file mode 100644
index bdb050e1d38..00000000000
--- a/packages/core/scss/vars/_nav.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './utils/define-theme-variable';
-
-@include define-theme-variable(
-  'nav-item-bg-hover',
-  var(--theme-base-color-14-05),
-  var(--theme-base-color-1-05)
-);
-
-@include define-theme-variable(
-  'nav-font-color',
-  var(--theme-base-color-14-55),
-  var(--theme-base-color-1-60)
-);
diff --git a/packages/core/scss/vars/_shadows.scss b/packages/core/scss/vars/_shadows.scss
deleted file mode 100644
index 26e9687ec95..00000000000
--- a/packages/core/scss/vars/_shadows.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './utils/define-theme-variable';
-@import '../shadows';
-
-@include define-theme-variable(
-  'box-shadow-lvl-1',
-  $box-shadow-light-lvl-1,
-  $box-shadow-dark-lvl-1
-);
-@include define-theme-variable(
-  'box-shadow-lvl-2',
-  $box-shadow-light-lvl-2,
-  $box-shadow-dark-lvl-2
-);
-@include define-theme-variable(
-  'box-shadow-lvl-3',
-  $box-shadow-light-lvl-3,
-  $box-shadow-dark-lvl-3
-);
-@include define-theme-variable(
-  'box-shadow-lvl-4',
-  $box-shadow-light-lvl-4,
-  $box-shadow-dark-lvl-4
-);
-@include define-theme-variable(
-  'box-shadow-lvl-5',
-  $box-shadow-light-lvl-5,
-  $box-shadow-dark-lvl-5
-);
-@include define-theme-variable(
-  'box-shadow-main-menu',
-  $box-shadow-light-main-menu,
-  $box-shadow-dark-main-menu
-);
diff --git a/packages/core/scss/vars/_sidebar-overlay.scss b/packages/core/scss/vars/_sidebar-overlay.scss
deleted file mode 100644
index ad295813583..00000000000
--- a/packages/core/scss/vars/_sidebar-overlay.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './utils/var-fade-out';
-@include var-fade-out('sidebar-overlay-blur', $color-1, $color-13);
diff --git a/packages/core/scss/vars/_vertical-tab-avatar.scss b/packages/core/scss/vars/_vertical-tab-avatar.scss
deleted file mode 100644
index b91f27304ac..00000000000
--- a/packages/core/scss/vars/_vertical-tab-avatar.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@import './utils/var-darken';
-@import '../theme-base-colors';
-
-@mixin vertical-tab-avatar {
-  @include var-darken('vertical-tab-avatar-hover', $color-5, $color-9, 5%);
-  @include var-darken('vertical-tab-avatar-pressed', $color-5, $color-9, 10%);
-}
-
-@include vertical-tab-avatar();
diff --git a/packages/core/scss/vars/_zIndex.scss b/packages/core/scss/vars/_zIndex.scss
deleted file mode 100644
index 847f4a255a3..00000000000
--- a/packages/core/scss/vars/_zIndex.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-//  $zindex-dropdown:                   1000 !default;
-//  $zindex-sticky:                     1020 !default;
-//  $zindex-fixed:                      1030 !default;
-//  $zindex-modal-backdrop:             1040 !default;
-//  $zindex-modal:                      1050 !default;
-//  $zindex-popover:                    1060 !default;
-//  $zindex-tooltip:                    1070 !default;
-//
-// Copy from bootstrap
-//
-
-:root {
-  --theme-z-index-dropdown: 1000;
-  --theme-z-index-sticky: 1020;
-  --theme-z-index-fixed: 1030;
-  --theme-z-index-modal-backdrop: 1040;
-  --theme-z-index-modal: 1050;
-  --theme-z-index-popover: 1060;
-  --theme-z-index-tooltip: 1070;
-}
diff --git a/packages/core/scss/vars/utils/_define-theme-variable.scss b/packages/core/scss/vars/utils/_define-theme-variable.scss
deleted file mode 100644
index ebb45595bda..00000000000
--- a/packages/core/scss/vars/utils/_define-theme-variable.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@mixin define-theme-variable($name, $light, $dark) {
-  :root {
-    --theme-#{$name}-light: #{$light};
-    --theme-#{$name}-dark: #{$dark};
-
-    --theme-#{$name}: var(--theme-#{$name}-light);
-  }
-
-  body.theme-dark {
-    --theme-#{$name}: var(--theme-#{$name}-dark);
-  }
-}
diff --git a/packages/core/scss/vars/utils/_var-darken.scss b/packages/core/scss/vars/utils/_var-darken.scss
deleted file mode 100644
index 7d88fcdc561..00000000000
--- a/packages/core/scss/vars/utils/_var-darken.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@mixin var-darken($name, $light-color, $dark-color, $amount) {
-  :root {
-    --theme-#{$name}: #{darken($light-color, $amount)};
-    --theme-#{$name}-light: #{darken($light-color, $amount)};
-    --theme-#{$name}-dark: #{lighten($dark-color, $amount)};
-  }
-
-  body.theme-dark {
-    --theme-#{$name}: var(--theme-#{$name}-dark);
-  }
-}
diff --git a/packages/core/scss/vars/utils/_var-fade-out.scss b/packages/core/scss/vars/utils/_var-fade-out.scss
deleted file mode 100644
index e0fd8d5277a..00000000000
--- a/packages/core/scss/vars/utils/_var-fade-out.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-@mixin var-fade-out($name, $light-color, $dark-color, $blurAlphaFix: 0.15) {
-  :root {
-    --theme-#{$name}-light: #{fade-out(
-        $color: $light-color,
-        $amount: $blurAlphaFix
-      )};
-
-    --theme-#{$name}-dark: #{fade-out(
-        $color: $dark-color,
-        $amount: $blurAlphaFix
-      )};
-
-    --theme-#{$name}: var(--theme-#{$name}-light);
-  }
-
-  body.theme-dark {
-    --theme-#{$name}: var(--theme-#{$name}-dark);
-  }
-}
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 535ecbc38e5..3ba694e886b 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -14,13 +14,13 @@ import { Placement, PositioningStrategy } from "@popperjs/core";
 import { FlipTileState } from "./components/flip-tile/flip-tile-state";
 import { LegalLinkLanguage } from "./components/menu-about/imprint-language";
 import { NotificationColor } from "./components/utils/notification-color";
-import { ModalConfig } from "./components/modal/modal";
-import { ToastConfig, ToastType } from "./components/toast/toast";
+import { ModalConfig } 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 { UploadFileState } from "./components/upload/upload-file-state";
 export namespace Components {
-    interface CwAnimatedTab {
+    interface IxAnimatedTab {
         /**
           * Show notification number
          */
@@ -30,7 +30,7 @@ export namespace Components {
          */
         "icon": string;
     }
-    interface CwAnimatedTabs {
+    interface IxAnimatedTabs {
         /**
           * @deprecated - For debugging purposes only
          */
@@ -44,13 +44,13 @@ export namespace Components {
          */
         "tabPlacement": 'top' | 'bottom';
     }
-    interface CwApplicationHeader {
+    interface IxApplicationHeader {
         /**
           * Application name
          */
         "name": string;
     }
-    interface CwBasicNavigation {
+    interface IxBasicNavigation {
         /**
           * Application name
          */
@@ -60,7 +60,7 @@ export namespace Components {
          */
         "hideHeader": boolean;
     }
-    interface CwBlind {
+    interface IxBlind {
         /**
           * Collapsed state
          */
@@ -70,7 +70,7 @@ export namespace Components {
          */
         "label": string;
     }
-    interface CwBreadcrumb {
+    interface IxBreadcrumb {
         /**
           * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
          */
@@ -84,7 +84,7 @@ export namespace Components {
          */
         "visibleItemCount": number;
     }
-    interface CwBreadcrumbItem {
+    interface IxBreadcrumbItem {
         /**
           * Icon to be displayed next ot the label
          */
@@ -94,7 +94,7 @@ export namespace Components {
          */
         "label": string;
     }
-    interface CwButton {
+    interface IxButton {
         /**
           * Disable the button
          */
@@ -121,7 +121,7 @@ export namespace Components {
          */
         "variant": Buttons;
     }
-    interface CwCategoryFilter {
+    interface IxCategoryFilter {
         /**
           * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality. Each ID maps to an object with a label and an array of options to select from.
          */
@@ -179,7 +179,7 @@ export namespace Components {
          */
         "tmpDisableScrollIntoView": boolean;
     }
-    interface CwChip {
+    interface IxChip {
         /**
           * Display chip in active state. Only working witht `variant="primary"`
          */
@@ -207,9 +207,16 @@ export namespace Components {
         /**
           * Chip variant
          */
-        "variant": 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom';
+        "variant": | 'primary'
+    | 'alarm'
+    | 'critical'
+    | 'warning'
+    | 'info'
+    | 'neutral'
+    | 'success'
+    | 'custom';
     }
-    interface CwCounterPill {
+    interface IxCounterPill {
         /**
           * Align pill content left
          */
@@ -229,9 +236,16 @@ export namespace Components {
         /**
           * Pill variant
          */
-        "variant": 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom';
+        "variant": | 'primary'
+    | 'alarm'
+    | 'critical'
+    | 'warning'
+    | 'info'
+    | 'neutral'
+    | 'success'
+    | 'custom';
     }
-    interface CwDatePicker {
+    interface IxDatePicker {
         /**
           * Set corners style
          */
@@ -249,7 +263,7 @@ export namespace Components {
          */
         "range": boolean;
     }
-    interface CwDateTimeCard {
+    interface IxDateTimeCard {
         /**
           * Set corners style
          */
@@ -259,7 +273,7 @@ export namespace Components {
          */
         "individual": boolean;
     }
-    interface CwDatetimePicker {
+    interface IxDatetimePicker {
         /**
           * Set range size
          */
@@ -281,7 +295,7 @@ export namespace Components {
          */
         "showTimeReference": boolean;
     }
-    interface CwDrawer {
+    interface IxDrawer {
         /**
           * Fired in case of an outside click during drawer showed state
          */
@@ -312,7 +326,7 @@ export namespace Components {
          */
         "width": number | 'auto';
     }
-    interface CwDropdown {
+    interface IxDropdown {
         /**
           * Adjust dropdown width to the parent width
          */
@@ -355,7 +369,7 @@ export namespace Components {
          */
         "updatePosition": () => Promise<void>;
     }
-    interface CwDropdownItem {
+    interface IxDropdownItem {
         /**
           * Whether the item is checked or not. If true a checkmark will mark the item as checked.
          */
@@ -381,7 +395,7 @@ export namespace Components {
          */
         "label": string;
     }
-    interface CwEventList {
+    interface IxEventList {
         /**
           * Animate state change transitions. Defaults to 'true'.
          */
@@ -399,7 +413,7 @@ export namespace Components {
          */
         "itemHeight": 'S' | 'L' | number;
     }
-    interface CwEventListItem {
+    interface IxEventListItem {
         /**
           * Show chevron on right side of the event list item
          */
@@ -422,7 +436,7 @@ export namespace Components {
          */
         "selected": boolean;
     }
-    interface CwExpandingSearch {
+    interface IxExpandingSearch {
         /**
           * Search icon
          */
@@ -436,13 +450,13 @@ export namespace Components {
          */
         "value": string;
     }
-    interface CwFilterChip {
+    interface IxFilterChip {
         /**
           * If true the filter chip will be in disabled state
          */
         "disabled": boolean;
     }
-    interface CwFlipTile {
+    interface IxFlipTile {
         /**
           * Tmp property name
          */
@@ -452,9 +466,9 @@ export namespace Components {
          */
         "state": FlipTileState;
     }
-    interface CwFlipTileContent {
+    interface IxFlipTileContent {
     }
-    interface CwGroup {
+    interface IxGroup {
         /**
           * Whether the group is collapsed or expanded. Defaults to true.
          */
@@ -484,7 +498,7 @@ export namespace Components {
          */
         "suppressHeaderSelection": boolean;
     }
-    interface CwGroupDropdownItem {
+    interface IxGroupDropdownItem {
         /**
           * Group dropdown icon
          */
@@ -494,7 +508,7 @@ export namespace Components {
          */
         "label": string;
     }
-    interface CwGroupItem {
+    interface IxGroupItem {
         /**
           * The elements tabindex attribute will get set accordingly. If true tabindex will be 0, -1 otherwise.
          */
@@ -524,7 +538,7 @@ export namespace Components {
          */
         "text": string;
     }
-    interface CwIcon {
+    interface IxIcon {
         /**
           * Color of the icon
          */
@@ -538,7 +552,7 @@ export namespace Components {
          */
         "size": '12' | '16' | '24' | '32';
     }
-    interface CwIconButton {
+    interface IxIconButton {
         /**
           * Color of icon in  button
          */
@@ -581,9 +595,9 @@ export namespace Components {
          */
         "variant": 'Primary' | 'Secondary';
     }
-    interface CwInputGroup {
+    interface IxInputGroup {
     }
-    interface CwMapNavigation {
+    interface IxMapNavigation {
         /**
           * Application name
          */
@@ -609,7 +623,7 @@ export namespace Components {
          */
         "openOverlay": (name: string, component: HTMLElement, icon?: string, color?: string) => Promise<void>;
     }
-    interface CwMapNavigationOverlay {
+    interface IxMapNavigationOverlay {
         /**
           * Color of icon
          */
@@ -623,13 +637,13 @@ export namespace Components {
          */
         "name": string;
     }
-    interface CwMenu {
+    interface IxMenu {
         /**
-          * Should only be set if you use cw-menu standalone
+          * Should only be set if you use ix-menu standalone
          */
         "applicationDescription": string;
         /**
-          * Should only be set if you use cw-menu standalone
+          * Should only be set if you use ix-menu standalone
          */
         "applicationName": string;
         /**
@@ -687,17 +701,17 @@ export namespace Components {
          */
         "toggleSettings": (show: boolean) => Promise<void>;
     }
-    interface CwMenuAbout {
+    interface IxMenuAbout {
         /**
           * Active tab
          */
         "activeTabLabel": string;
         /**
-          * Should only be set if you use cw-menu standalone
+          * Should only be set if you use ix-menu standalone
          */
         "applicationDescription": string;
         /**
-          * Should only be set if you use cw-menu standalone
+          * Should only be set if you use ix-menu standalone
          */
         "applicationName": string;
         /**
@@ -723,13 +737,13 @@ export namespace Components {
          */
         "show": boolean;
     }
-    interface CwMenuAboutItem {
+    interface IxMenuAboutItem {
         /**
           * About Item label
          */
         "label": string;
     }
-    interface CwMenuAboutNews {
+    interface IxMenuAboutNews {
         /**
           * Subtitle of the about news
          */
@@ -752,7 +766,7 @@ export namespace Components {
          */
         "show": boolean;
     }
-    interface CwMenuAvatar {
+    interface IxMenuAvatar {
         /**
           * Second line of text
          */
@@ -763,7 +777,7 @@ export namespace Components {
          */
         "top": string;
     }
-    interface CwMenuAvatarItem {
+    interface IxMenuAvatarItem {
         /**
           * Avatar dropdown icon
          */
@@ -773,7 +787,7 @@ export namespace Components {
          */
         "label": string;
     }
-    interface CwMenuItem {
+    interface IxMenuItem {
         /**
           * State to display active
          */
@@ -799,7 +813,7 @@ export namespace Components {
          */
         "tabIcon": string;
     }
-    interface CwMenuSettings {
+    interface IxMenuSettings {
         /**
           * active tab
          */
@@ -813,13 +827,13 @@ export namespace Components {
          */
         "show": boolean;
     }
-    interface CwMenuSettingsItem {
+    interface IxMenuSettingsItem {
         /**
           * Label
          */
         "label": string;
     }
-    interface CwMessageBar {
+    interface IxMessageBar {
         /**
           * If true, close button is enabled and alert can be dismissed by the user
          */
@@ -829,7 +843,7 @@ export namespace Components {
          */
         "type": 'danger' | 'warning' | 'info';
     }
-    interface CwModal {
+    interface IxModal {
         /**
           * Should the modal be animtated
          */
@@ -899,16 +913,16 @@ export namespace Components {
          */
         "windowClass": string;
     }
-    interface CwModalContainer {
+    interface IxModalContainer {
         /**
           * Display modal dialog
           * @param config
          */
         "showModal": (config: ModalConfig) => Promise<void>;
     }
-    interface CwModalExample {
+    interface IxModalExample {
     }
-    interface CwPill {
+    interface IxPill {
         /**
           * Align pill content left
          */
@@ -932,9 +946,16 @@ export namespace Components {
         /**
           * Pill variant
          */
-        "variant": 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom';
+        "variant": | 'primary'
+    | 'alarm'
+    | 'critical'
+    | 'warning'
+    | 'info'
+    | 'neutral'
+    | 'success'
+    | 'custom';
     }
-    interface CwSelect {
+    interface IxSelect {
         /**
           * Show clear button
          */
@@ -972,7 +993,7 @@ export namespace Components {
          */
         "selectedIndices": string | string[];
     }
-    interface CwSelectItem {
+    interface IxSelectItem {
         /**
           * ***Internal***
          */
@@ -985,7 +1006,7 @@ export namespace Components {
           * Internal
           * @param event
          */
-        "onItemClick": (event?: CustomEvent<HTMLCwDropdownItemElement>) => Promise<void>;
+        "onItemClick": (event?: CustomEvent<HTMLIxDropdownItemElement>) => Promise<void>;
         /**
           * Whether the item is selected.
          */
@@ -995,7 +1016,7 @@ export namespace Components {
          */
         "value": any;
     }
-    interface CwSpinner {
+    interface IxSpinner {
         /**
           * Size of spinner
          */
@@ -1005,7 +1026,7 @@ export namespace Components {
          */
         "variant": 'primary' | 'sencodary' | 'secondary';
     }
-    interface CwSplitButton {
+    interface IxSplitButton {
         /**
           * Disabled
          */
@@ -1044,7 +1065,7 @@ export namespace Components {
          */
         "variant": Buttons;
     }
-    interface CwSplitButtonItem {
+    interface IxSplitButtonItem {
         /**
           * Dropdown icon
          */
@@ -1054,7 +1075,7 @@ export namespace Components {
          */
         "label": string;
     }
-    interface CwTabItem {
+    interface IxTabItem {
         /**
           * Set disabled tab
          */
@@ -1080,7 +1101,7 @@ export namespace Components {
          */
         "small": boolean;
     }
-    interface CwTabs {
+    interface IxTabs {
         /**
           * Set layout width style
          */
@@ -1098,13 +1119,13 @@ export namespace Components {
          */
         "small": boolean;
     }
-    interface CwTile {
+    interface IxTile {
         /**
           * Size of the tile - one of 'small', 'medium' or 'large'
          */
         "size": 'small' | 'medium' | 'big';
     }
-    interface CwTimePicker {
+    interface IxTimePicker {
         /**
           * Set corners style
          */
@@ -1130,7 +1151,7 @@ export namespace Components {
          */
         "showTimeReference": boolean;
     }
-    interface CwToast {
+    interface IxToast {
         /**
           * Autoclose behavior
          */
@@ -1156,7 +1177,7 @@ export namespace Components {
          */
         "type": ToastType;
     }
-    interface CwToastContainer {
+    interface IxToastContainer {
         "containerClass": string;
         "containerId": string;
         /**
@@ -1171,7 +1192,7 @@ export namespace Components {
          */
         "showToast": (config: ToastConfig) => Promise<void>;
     }
-    interface CwToggle {
+    interface IxToggle {
         /**
           * Whether the slide-toggle element is checked or not.
          */
@@ -1206,7 +1227,7 @@ export namespace Components {
          */
         "textOn": string;
     }
-    interface CwTree {
+    interface IxTree {
         /**
           * Selection and collapsed state management
          */
@@ -1218,13 +1239,19 @@ export namespace Components {
         /**
           * Render function of tree items
          */
-        "renderItem": (index: number, data: any, dataList: Array<any>, context: TreeContext, update: (callback: UpdateCallback) => void) => HTMLElement;
+        "renderItem": (
+    index: number,
+    data: any,
+    dataList: Array<any>,
+    context: TreeContext,
+    update: (callback: UpdateCallback) => void
+  ) => HTMLElement;
         /**
           * Initial root element will not be rendered
          */
         "root": string;
     }
-    interface CwTreeItem {
+    interface IxTreeItem {
         /**
           * Context
          */
@@ -1238,7 +1265,7 @@ export namespace Components {
          */
         "text": string;
     }
-    interface CwUpload {
+    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}
          */
@@ -1285,365 +1312,365 @@ export namespace Components {
     }
 }
 declare global {
-    interface HTMLCwAnimatedTabElement extends Components.CwAnimatedTab, HTMLStencilElement {
+    interface HTMLIxAnimatedTabElement extends Components.IxAnimatedTab, HTMLStencilElement {
     }
-    var HTMLCwAnimatedTabElement: {
-        prototype: HTMLCwAnimatedTabElement;
-        new (): HTMLCwAnimatedTabElement;
+    var HTMLIxAnimatedTabElement: {
+        prototype: HTMLIxAnimatedTabElement;
+        new (): HTMLIxAnimatedTabElement;
     };
-    interface HTMLCwAnimatedTabsElement extends Components.CwAnimatedTabs, HTMLStencilElement {
+    interface HTMLIxAnimatedTabsElement extends Components.IxAnimatedTabs, HTMLStencilElement {
     }
-    var HTMLCwAnimatedTabsElement: {
-        prototype: HTMLCwAnimatedTabsElement;
-        new (): HTMLCwAnimatedTabsElement;
+    var HTMLIxAnimatedTabsElement: {
+        prototype: HTMLIxAnimatedTabsElement;
+        new (): HTMLIxAnimatedTabsElement;
     };
-    interface HTMLCwApplicationHeaderElement extends Components.CwApplicationHeader, HTMLStencilElement {
+    interface HTMLIxApplicationHeaderElement extends Components.IxApplicationHeader, HTMLStencilElement {
     }
-    var HTMLCwApplicationHeaderElement: {
-        prototype: HTMLCwApplicationHeaderElement;
-        new (): HTMLCwApplicationHeaderElement;
+    var HTMLIxApplicationHeaderElement: {
+        prototype: HTMLIxApplicationHeaderElement;
+        new (): HTMLIxApplicationHeaderElement;
     };
-    interface HTMLCwBasicNavigationElement extends Components.CwBasicNavigation, HTMLStencilElement {
+    interface HTMLIxBasicNavigationElement extends Components.IxBasicNavigation, HTMLStencilElement {
     }
-    var HTMLCwBasicNavigationElement: {
-        prototype: HTMLCwBasicNavigationElement;
-        new (): HTMLCwBasicNavigationElement;
+    var HTMLIxBasicNavigationElement: {
+        prototype: HTMLIxBasicNavigationElement;
+        new (): HTMLIxBasicNavigationElement;
     };
-    interface HTMLCwBlindElement extends Components.CwBlind, HTMLStencilElement {
+    interface HTMLIxBlindElement extends Components.IxBlind, HTMLStencilElement {
     }
-    var HTMLCwBlindElement: {
-        prototype: HTMLCwBlindElement;
-        new (): HTMLCwBlindElement;
+    var HTMLIxBlindElement: {
+        prototype: HTMLIxBlindElement;
+        new (): HTMLIxBlindElement;
     };
-    interface HTMLCwBreadcrumbElement extends Components.CwBreadcrumb, HTMLStencilElement {
+    interface HTMLIxBreadcrumbElement extends Components.IxBreadcrumb, HTMLStencilElement {
     }
-    var HTMLCwBreadcrumbElement: {
-        prototype: HTMLCwBreadcrumbElement;
-        new (): HTMLCwBreadcrumbElement;
+    var HTMLIxBreadcrumbElement: {
+        prototype: HTMLIxBreadcrumbElement;
+        new (): HTMLIxBreadcrumbElement;
     };
-    interface HTMLCwBreadcrumbItemElement extends Components.CwBreadcrumbItem, HTMLStencilElement {
+    interface HTMLIxBreadcrumbItemElement extends Components.IxBreadcrumbItem, HTMLStencilElement {
     }
-    var HTMLCwBreadcrumbItemElement: {
-        prototype: HTMLCwBreadcrumbItemElement;
-        new (): HTMLCwBreadcrumbItemElement;
+    var HTMLIxBreadcrumbItemElement: {
+        prototype: HTMLIxBreadcrumbItemElement;
+        new (): HTMLIxBreadcrumbItemElement;
     };
-    interface HTMLCwButtonElement extends Components.CwButton, HTMLStencilElement {
+    interface HTMLIxButtonElement extends Components.IxButton, HTMLStencilElement {
     }
-    var HTMLCwButtonElement: {
-        prototype: HTMLCwButtonElement;
-        new (): HTMLCwButtonElement;
+    var HTMLIxButtonElement: {
+        prototype: HTMLIxButtonElement;
+        new (): HTMLIxButtonElement;
     };
-    interface HTMLCwCategoryFilterElement extends Components.CwCategoryFilter, HTMLStencilElement {
+    interface HTMLIxCategoryFilterElement extends Components.IxCategoryFilter, HTMLStencilElement {
     }
-    var HTMLCwCategoryFilterElement: {
-        prototype: HTMLCwCategoryFilterElement;
-        new (): HTMLCwCategoryFilterElement;
+    var HTMLIxCategoryFilterElement: {
+        prototype: HTMLIxCategoryFilterElement;
+        new (): HTMLIxCategoryFilterElement;
     };
-    interface HTMLCwChipElement extends Components.CwChip, HTMLStencilElement {
+    interface HTMLIxChipElement extends Components.IxChip, HTMLStencilElement {
     }
-    var HTMLCwChipElement: {
-        prototype: HTMLCwChipElement;
-        new (): HTMLCwChipElement;
+    var HTMLIxChipElement: {
+        prototype: HTMLIxChipElement;
+        new (): HTMLIxChipElement;
     };
-    interface HTMLCwCounterPillElement extends Components.CwCounterPill, HTMLStencilElement {
+    interface HTMLIxCounterPillElement extends Components.IxCounterPill, HTMLStencilElement {
     }
-    var HTMLCwCounterPillElement: {
-        prototype: HTMLCwCounterPillElement;
-        new (): HTMLCwCounterPillElement;
+    var HTMLIxCounterPillElement: {
+        prototype: HTMLIxCounterPillElement;
+        new (): HTMLIxCounterPillElement;
     };
-    interface HTMLCwDatePickerElement extends Components.CwDatePicker, HTMLStencilElement {
+    interface HTMLIxDatePickerElement extends Components.IxDatePicker, HTMLStencilElement {
     }
-    var HTMLCwDatePickerElement: {
-        prototype: HTMLCwDatePickerElement;
-        new (): HTMLCwDatePickerElement;
+    var HTMLIxDatePickerElement: {
+        prototype: HTMLIxDatePickerElement;
+        new (): HTMLIxDatePickerElement;
     };
-    interface HTMLCwDateTimeCardElement extends Components.CwDateTimeCard, HTMLStencilElement {
+    interface HTMLIxDateTimeCardElement extends Components.IxDateTimeCard, HTMLStencilElement {
     }
-    var HTMLCwDateTimeCardElement: {
-        prototype: HTMLCwDateTimeCardElement;
-        new (): HTMLCwDateTimeCardElement;
+    var HTMLIxDateTimeCardElement: {
+        prototype: HTMLIxDateTimeCardElement;
+        new (): HTMLIxDateTimeCardElement;
     };
-    interface HTMLCwDatetimePickerElement extends Components.CwDatetimePicker, HTMLStencilElement {
+    interface HTMLIxDatetimePickerElement extends Components.IxDatetimePicker, HTMLStencilElement {
     }
-    var HTMLCwDatetimePickerElement: {
-        prototype: HTMLCwDatetimePickerElement;
-        new (): HTMLCwDatetimePickerElement;
+    var HTMLIxDatetimePickerElement: {
+        prototype: HTMLIxDatetimePickerElement;
+        new (): HTMLIxDatetimePickerElement;
     };
-    interface HTMLCwDrawerElement extends Components.CwDrawer, HTMLStencilElement {
+    interface HTMLIxDrawerElement extends Components.IxDrawer, HTMLStencilElement {
     }
-    var HTMLCwDrawerElement: {
-        prototype: HTMLCwDrawerElement;
-        new (): HTMLCwDrawerElement;
+    var HTMLIxDrawerElement: {
+        prototype: HTMLIxDrawerElement;
+        new (): HTMLIxDrawerElement;
     };
-    interface HTMLCwDropdownElement extends Components.CwDropdown, HTMLStencilElement {
+    interface HTMLIxDropdownElement extends Components.IxDropdown, HTMLStencilElement {
     }
-    var HTMLCwDropdownElement: {
-        prototype: HTMLCwDropdownElement;
-        new (): HTMLCwDropdownElement;
+    var HTMLIxDropdownElement: {
+        prototype: HTMLIxDropdownElement;
+        new (): HTMLIxDropdownElement;
     };
-    interface HTMLCwDropdownItemElement extends Components.CwDropdownItem, HTMLStencilElement {
+    interface HTMLIxDropdownItemElement extends Components.IxDropdownItem, HTMLStencilElement {
     }
-    var HTMLCwDropdownItemElement: {
-        prototype: HTMLCwDropdownItemElement;
-        new (): HTMLCwDropdownItemElement;
+    var HTMLIxDropdownItemElement: {
+        prototype: HTMLIxDropdownItemElement;
+        new (): HTMLIxDropdownItemElement;
     };
-    interface HTMLCwEventListElement extends Components.CwEventList, HTMLStencilElement {
+    interface HTMLIxEventListElement extends Components.IxEventList, HTMLStencilElement {
     }
-    var HTMLCwEventListElement: {
-        prototype: HTMLCwEventListElement;
-        new (): HTMLCwEventListElement;
+    var HTMLIxEventListElement: {
+        prototype: HTMLIxEventListElement;
+        new (): HTMLIxEventListElement;
     };
-    interface HTMLCwEventListItemElement extends Components.CwEventListItem, HTMLStencilElement {
+    interface HTMLIxEventListItemElement extends Components.IxEventListItem, HTMLStencilElement {
     }
-    var HTMLCwEventListItemElement: {
-        prototype: HTMLCwEventListItemElement;
-        new (): HTMLCwEventListItemElement;
+    var HTMLIxEventListItemElement: {
+        prototype: HTMLIxEventListItemElement;
+        new (): HTMLIxEventListItemElement;
     };
-    interface HTMLCwExpandingSearchElement extends Components.CwExpandingSearch, HTMLStencilElement {
+    interface HTMLIxExpandingSearchElement extends Components.IxExpandingSearch, HTMLStencilElement {
     }
-    var HTMLCwExpandingSearchElement: {
-        prototype: HTMLCwExpandingSearchElement;
-        new (): HTMLCwExpandingSearchElement;
+    var HTMLIxExpandingSearchElement: {
+        prototype: HTMLIxExpandingSearchElement;
+        new (): HTMLIxExpandingSearchElement;
     };
-    interface HTMLCwFilterChipElement extends Components.CwFilterChip, HTMLStencilElement {
+    interface HTMLIxFilterChipElement extends Components.IxFilterChip, HTMLStencilElement {
     }
-    var HTMLCwFilterChipElement: {
-        prototype: HTMLCwFilterChipElement;
-        new (): HTMLCwFilterChipElement;
+    var HTMLIxFilterChipElement: {
+        prototype: HTMLIxFilterChipElement;
+        new (): HTMLIxFilterChipElement;
     };
-    interface HTMLCwFlipTileElement extends Components.CwFlipTile, HTMLStencilElement {
+    interface HTMLIxFlipTileElement extends Components.IxFlipTile, HTMLStencilElement {
     }
-    var HTMLCwFlipTileElement: {
-        prototype: HTMLCwFlipTileElement;
-        new (): HTMLCwFlipTileElement;
+    var HTMLIxFlipTileElement: {
+        prototype: HTMLIxFlipTileElement;
+        new (): HTMLIxFlipTileElement;
     };
-    interface HTMLCwFlipTileContentElement extends Components.CwFlipTileContent, HTMLStencilElement {
+    interface HTMLIxFlipTileContentElement extends Components.IxFlipTileContent, HTMLStencilElement {
     }
-    var HTMLCwFlipTileContentElement: {
-        prototype: HTMLCwFlipTileContentElement;
-        new (): HTMLCwFlipTileContentElement;
+    var HTMLIxFlipTileContentElement: {
+        prototype: HTMLIxFlipTileContentElement;
+        new (): HTMLIxFlipTileContentElement;
     };
-    interface HTMLCwGroupElement extends Components.CwGroup, HTMLStencilElement {
+    interface HTMLIxGroupElement extends Components.IxGroup, HTMLStencilElement {
     }
-    var HTMLCwGroupElement: {
-        prototype: HTMLCwGroupElement;
-        new (): HTMLCwGroupElement;
+    var HTMLIxGroupElement: {
+        prototype: HTMLIxGroupElement;
+        new (): HTMLIxGroupElement;
     };
-    interface HTMLCwGroupDropdownItemElement extends Components.CwGroupDropdownItem, HTMLStencilElement {
+    interface HTMLIxGroupDropdownItemElement extends Components.IxGroupDropdownItem, HTMLStencilElement {
     }
-    var HTMLCwGroupDropdownItemElement: {
-        prototype: HTMLCwGroupDropdownItemElement;
-        new (): HTMLCwGroupDropdownItemElement;
+    var HTMLIxGroupDropdownItemElement: {
+        prototype: HTMLIxGroupDropdownItemElement;
+        new (): HTMLIxGroupDropdownItemElement;
     };
-    interface HTMLCwGroupItemElement extends Components.CwGroupItem, HTMLStencilElement {
+    interface HTMLIxGroupItemElement extends Components.IxGroupItem, HTMLStencilElement {
     }
-    var HTMLCwGroupItemElement: {
-        prototype: HTMLCwGroupItemElement;
-        new (): HTMLCwGroupItemElement;
+    var HTMLIxGroupItemElement: {
+        prototype: HTMLIxGroupItemElement;
+        new (): HTMLIxGroupItemElement;
     };
-    interface HTMLCwIconElement extends Components.CwIcon, HTMLStencilElement {
+    interface HTMLIxIconElement extends Components.IxIcon, HTMLStencilElement {
     }
-    var HTMLCwIconElement: {
-        prototype: HTMLCwIconElement;
-        new (): HTMLCwIconElement;
+    var HTMLIxIconElement: {
+        prototype: HTMLIxIconElement;
+        new (): HTMLIxIconElement;
     };
-    interface HTMLCwIconButtonElement extends Components.CwIconButton, HTMLStencilElement {
+    interface HTMLIxIconButtonElement extends Components.IxIconButton, HTMLStencilElement {
     }
-    var HTMLCwIconButtonElement: {
-        prototype: HTMLCwIconButtonElement;
-        new (): HTMLCwIconButtonElement;
+    var HTMLIxIconButtonElement: {
+        prototype: HTMLIxIconButtonElement;
+        new (): HTMLIxIconButtonElement;
     };
-    interface HTMLCwInputGroupElement extends Components.CwInputGroup, HTMLStencilElement {
+    interface HTMLIxInputGroupElement extends Components.IxInputGroup, HTMLStencilElement {
     }
-    var HTMLCwInputGroupElement: {
-        prototype: HTMLCwInputGroupElement;
-        new (): HTMLCwInputGroupElement;
+    var HTMLIxInputGroupElement: {
+        prototype: HTMLIxInputGroupElement;
+        new (): HTMLIxInputGroupElement;
     };
-    interface HTMLCwMapNavigationElement extends Components.CwMapNavigation, HTMLStencilElement {
+    interface HTMLIxMapNavigationElement extends Components.IxMapNavigation, HTMLStencilElement {
     }
-    var HTMLCwMapNavigationElement: {
-        prototype: HTMLCwMapNavigationElement;
-        new (): HTMLCwMapNavigationElement;
+    var HTMLIxMapNavigationElement: {
+        prototype: HTMLIxMapNavigationElement;
+        new (): HTMLIxMapNavigationElement;
     };
-    interface HTMLCwMapNavigationOverlayElement extends Components.CwMapNavigationOverlay, HTMLStencilElement {
+    interface HTMLIxMapNavigationOverlayElement extends Components.IxMapNavigationOverlay, HTMLStencilElement {
     }
-    var HTMLCwMapNavigationOverlayElement: {
-        prototype: HTMLCwMapNavigationOverlayElement;
-        new (): HTMLCwMapNavigationOverlayElement;
+    var HTMLIxMapNavigationOverlayElement: {
+        prototype: HTMLIxMapNavigationOverlayElement;
+        new (): HTMLIxMapNavigationOverlayElement;
     };
-    interface HTMLCwMenuElement extends Components.CwMenu, HTMLStencilElement {
+    interface HTMLIxMenuElement extends Components.IxMenu, HTMLStencilElement {
     }
-    var HTMLCwMenuElement: {
-        prototype: HTMLCwMenuElement;
-        new (): HTMLCwMenuElement;
+    var HTMLIxMenuElement: {
+        prototype: HTMLIxMenuElement;
+        new (): HTMLIxMenuElement;
     };
-    interface HTMLCwMenuAboutElement extends Components.CwMenuAbout, HTMLStencilElement {
+    interface HTMLIxMenuAboutElement extends Components.IxMenuAbout, HTMLStencilElement {
     }
-    var HTMLCwMenuAboutElement: {
-        prototype: HTMLCwMenuAboutElement;
-        new (): HTMLCwMenuAboutElement;
+    var HTMLIxMenuAboutElement: {
+        prototype: HTMLIxMenuAboutElement;
+        new (): HTMLIxMenuAboutElement;
     };
-    interface HTMLCwMenuAboutItemElement extends Components.CwMenuAboutItem, HTMLStencilElement {
+    interface HTMLIxMenuAboutItemElement extends Components.IxMenuAboutItem, HTMLStencilElement {
     }
-    var HTMLCwMenuAboutItemElement: {
-        prototype: HTMLCwMenuAboutItemElement;
-        new (): HTMLCwMenuAboutItemElement;
+    var HTMLIxMenuAboutItemElement: {
+        prototype: HTMLIxMenuAboutItemElement;
+        new (): HTMLIxMenuAboutItemElement;
     };
-    interface HTMLCwMenuAboutNewsElement extends Components.CwMenuAboutNews, HTMLStencilElement {
+    interface HTMLIxMenuAboutNewsElement extends Components.IxMenuAboutNews, HTMLStencilElement {
     }
-    var HTMLCwMenuAboutNewsElement: {
-        prototype: HTMLCwMenuAboutNewsElement;
-        new (): HTMLCwMenuAboutNewsElement;
+    var HTMLIxMenuAboutNewsElement: {
+        prototype: HTMLIxMenuAboutNewsElement;
+        new (): HTMLIxMenuAboutNewsElement;
     };
-    interface HTMLCwMenuAvatarElement extends Components.CwMenuAvatar, HTMLStencilElement {
+    interface HTMLIxMenuAvatarElement extends Components.IxMenuAvatar, HTMLStencilElement {
     }
-    var HTMLCwMenuAvatarElement: {
-        prototype: HTMLCwMenuAvatarElement;
-        new (): HTMLCwMenuAvatarElement;
+    var HTMLIxMenuAvatarElement: {
+        prototype: HTMLIxMenuAvatarElement;
+        new (): HTMLIxMenuAvatarElement;
     };
-    interface HTMLCwMenuAvatarItemElement extends Components.CwMenuAvatarItem, HTMLStencilElement {
+    interface HTMLIxMenuAvatarItemElement extends Components.IxMenuAvatarItem, HTMLStencilElement {
     }
-    var HTMLCwMenuAvatarItemElement: {
-        prototype: HTMLCwMenuAvatarItemElement;
-        new (): HTMLCwMenuAvatarItemElement;
+    var HTMLIxMenuAvatarItemElement: {
+        prototype: HTMLIxMenuAvatarItemElement;
+        new (): HTMLIxMenuAvatarItemElement;
     };
-    interface HTMLCwMenuItemElement extends Components.CwMenuItem, HTMLStencilElement {
+    interface HTMLIxMenuItemElement extends Components.IxMenuItem, HTMLStencilElement {
     }
-    var HTMLCwMenuItemElement: {
-        prototype: HTMLCwMenuItemElement;
-        new (): HTMLCwMenuItemElement;
+    var HTMLIxMenuItemElement: {
+        prototype: HTMLIxMenuItemElement;
+        new (): HTMLIxMenuItemElement;
     };
-    interface HTMLCwMenuSettingsElement extends Components.CwMenuSettings, HTMLStencilElement {
+    interface HTMLIxMenuSettingsElement extends Components.IxMenuSettings, HTMLStencilElement {
     }
-    var HTMLCwMenuSettingsElement: {
-        prototype: HTMLCwMenuSettingsElement;
-        new (): HTMLCwMenuSettingsElement;
+    var HTMLIxMenuSettingsElement: {
+        prototype: HTMLIxMenuSettingsElement;
+        new (): HTMLIxMenuSettingsElement;
     };
-    interface HTMLCwMenuSettingsItemElement extends Components.CwMenuSettingsItem, HTMLStencilElement {
+    interface HTMLIxMenuSettingsItemElement extends Components.IxMenuSettingsItem, HTMLStencilElement {
     }
-    var HTMLCwMenuSettingsItemElement: {
-        prototype: HTMLCwMenuSettingsItemElement;
-        new (): HTMLCwMenuSettingsItemElement;
+    var HTMLIxMenuSettingsItemElement: {
+        prototype: HTMLIxMenuSettingsItemElement;
+        new (): HTMLIxMenuSettingsItemElement;
     };
-    interface HTMLCwMessageBarElement extends Components.CwMessageBar, HTMLStencilElement {
+    interface HTMLIxMessageBarElement extends Components.IxMessageBar, HTMLStencilElement {
     }
-    var HTMLCwMessageBarElement: {
-        prototype: HTMLCwMessageBarElement;
-        new (): HTMLCwMessageBarElement;
+    var HTMLIxMessageBarElement: {
+        prototype: HTMLIxMessageBarElement;
+        new (): HTMLIxMessageBarElement;
     };
-    interface HTMLCwModalElement extends Components.CwModal, HTMLStencilElement {
+    interface HTMLIxModalElement extends Components.IxModal, HTMLStencilElement {
     }
-    var HTMLCwModalElement: {
-        prototype: HTMLCwModalElement;
-        new (): HTMLCwModalElement;
+    var HTMLIxModalElement: {
+        prototype: HTMLIxModalElement;
+        new (): HTMLIxModalElement;
     };
-    interface HTMLCwModalContainerElement extends Components.CwModalContainer, HTMLStencilElement {
+    interface HTMLIxModalContainerElement extends Components.IxModalContainer, HTMLStencilElement {
     }
-    var HTMLCwModalContainerElement: {
-        prototype: HTMLCwModalContainerElement;
-        new (): HTMLCwModalContainerElement;
+    var HTMLIxModalContainerElement: {
+        prototype: HTMLIxModalContainerElement;
+        new (): HTMLIxModalContainerElement;
     };
-    interface HTMLCwModalExampleElement extends Components.CwModalExample, HTMLStencilElement {
+    interface HTMLIxModalExampleElement extends Components.IxModalExample, HTMLStencilElement {
     }
-    var HTMLCwModalExampleElement: {
-        prototype: HTMLCwModalExampleElement;
-        new (): HTMLCwModalExampleElement;
+    var HTMLIxModalExampleElement: {
+        prototype: HTMLIxModalExampleElement;
+        new (): HTMLIxModalExampleElement;
     };
-    interface HTMLCwPillElement extends Components.CwPill, HTMLStencilElement {
+    interface HTMLIxPillElement extends Components.IxPill, HTMLStencilElement {
     }
-    var HTMLCwPillElement: {
-        prototype: HTMLCwPillElement;
-        new (): HTMLCwPillElement;
+    var HTMLIxPillElement: {
+        prototype: HTMLIxPillElement;
+        new (): HTMLIxPillElement;
     };
-    interface HTMLCwSelectElement extends Components.CwSelect, HTMLStencilElement {
+    interface HTMLIxSelectElement extends Components.IxSelect, HTMLStencilElement {
     }
-    var HTMLCwSelectElement: {
-        prototype: HTMLCwSelectElement;
-        new (): HTMLCwSelectElement;
+    var HTMLIxSelectElement: {
+        prototype: HTMLIxSelectElement;
+        new (): HTMLIxSelectElement;
     };
-    interface HTMLCwSelectItemElement extends Components.CwSelectItem, HTMLStencilElement {
+    interface HTMLIxSelectItemElement extends Components.IxSelectItem, HTMLStencilElement {
     }
-    var HTMLCwSelectItemElement: {
-        prototype: HTMLCwSelectItemElement;
-        new (): HTMLCwSelectItemElement;
+    var HTMLIxSelectItemElement: {
+        prototype: HTMLIxSelectItemElement;
+        new (): HTMLIxSelectItemElement;
     };
-    interface HTMLCwSpinnerElement extends Components.CwSpinner, HTMLStencilElement {
+    interface HTMLIxSpinnerElement extends Components.IxSpinner, HTMLStencilElement {
     }
-    var HTMLCwSpinnerElement: {
-        prototype: HTMLCwSpinnerElement;
-        new (): HTMLCwSpinnerElement;
+    var HTMLIxSpinnerElement: {
+        prototype: HTMLIxSpinnerElement;
+        new (): HTMLIxSpinnerElement;
     };
-    interface HTMLCwSplitButtonElement extends Components.CwSplitButton, HTMLStencilElement {
+    interface HTMLIxSplitButtonElement extends Components.IxSplitButton, HTMLStencilElement {
     }
-    var HTMLCwSplitButtonElement: {
-        prototype: HTMLCwSplitButtonElement;
-        new (): HTMLCwSplitButtonElement;
+    var HTMLIxSplitButtonElement: {
+        prototype: HTMLIxSplitButtonElement;
+        new (): HTMLIxSplitButtonElement;
     };
-    interface HTMLCwSplitButtonItemElement extends Components.CwSplitButtonItem, HTMLStencilElement {
+    interface HTMLIxSplitButtonItemElement extends Components.IxSplitButtonItem, HTMLStencilElement {
     }
-    var HTMLCwSplitButtonItemElement: {
-        prototype: HTMLCwSplitButtonItemElement;
-        new (): HTMLCwSplitButtonItemElement;
+    var HTMLIxSplitButtonItemElement: {
+        prototype: HTMLIxSplitButtonItemElement;
+        new (): HTMLIxSplitButtonItemElement;
     };
-    interface HTMLCwTabItemElement extends Components.CwTabItem, HTMLStencilElement {
+    interface HTMLIxTabItemElement extends Components.IxTabItem, HTMLStencilElement {
     }
-    var HTMLCwTabItemElement: {
-        prototype: HTMLCwTabItemElement;
-        new (): HTMLCwTabItemElement;
+    var HTMLIxTabItemElement: {
+        prototype: HTMLIxTabItemElement;
+        new (): HTMLIxTabItemElement;
     };
-    interface HTMLCwTabsElement extends Components.CwTabs, HTMLStencilElement {
+    interface HTMLIxTabsElement extends Components.IxTabs, HTMLStencilElement {
     }
-    var HTMLCwTabsElement: {
-        prototype: HTMLCwTabsElement;
-        new (): HTMLCwTabsElement;
+    var HTMLIxTabsElement: {
+        prototype: HTMLIxTabsElement;
+        new (): HTMLIxTabsElement;
     };
-    interface HTMLCwTileElement extends Components.CwTile, HTMLStencilElement {
+    interface HTMLIxTileElement extends Components.IxTile, HTMLStencilElement {
     }
-    var HTMLCwTileElement: {
-        prototype: HTMLCwTileElement;
-        new (): HTMLCwTileElement;
+    var HTMLIxTileElement: {
+        prototype: HTMLIxTileElement;
+        new (): HTMLIxTileElement;
     };
-    interface HTMLCwTimePickerElement extends Components.CwTimePicker, HTMLStencilElement {
+    interface HTMLIxTimePickerElement extends Components.IxTimePicker, HTMLStencilElement {
     }
-    var HTMLCwTimePickerElement: {
-        prototype: HTMLCwTimePickerElement;
-        new (): HTMLCwTimePickerElement;
+    var HTMLIxTimePickerElement: {
+        prototype: HTMLIxTimePickerElement;
+        new (): HTMLIxTimePickerElement;
     };
-    interface HTMLCwToastElement extends Components.CwToast, HTMLStencilElement {
+    interface HTMLIxToastElement extends Components.IxToast, HTMLStencilElement {
     }
-    var HTMLCwToastElement: {
-        prototype: HTMLCwToastElement;
-        new (): HTMLCwToastElement;
+    var HTMLIxToastElement: {
+        prototype: HTMLIxToastElement;
+        new (): HTMLIxToastElement;
     };
-    interface HTMLCwToastContainerElement extends Components.CwToastContainer, HTMLStencilElement {
+    interface HTMLIxToastContainerElement extends Components.IxToastContainer, HTMLStencilElement {
     }
-    var HTMLCwToastContainerElement: {
-        prototype: HTMLCwToastContainerElement;
-        new (): HTMLCwToastContainerElement;
+    var HTMLIxToastContainerElement: {
+        prototype: HTMLIxToastContainerElement;
+        new (): HTMLIxToastContainerElement;
     };
-    interface HTMLCwToggleElement extends Components.CwToggle, HTMLStencilElement {
+    interface HTMLIxToggleElement extends Components.IxToggle, HTMLStencilElement {
     }
-    var HTMLCwToggleElement: {
-        prototype: HTMLCwToggleElement;
-        new (): HTMLCwToggleElement;
+    var HTMLIxToggleElement: {
+        prototype: HTMLIxToggleElement;
+        new (): HTMLIxToggleElement;
     };
-    interface HTMLCwTreeElement extends Components.CwTree, HTMLStencilElement {
+    interface HTMLIxTreeElement extends Components.IxTree, HTMLStencilElement {
     }
-    var HTMLCwTreeElement: {
-        prototype: HTMLCwTreeElement;
-        new (): HTMLCwTreeElement;
+    var HTMLIxTreeElement: {
+        prototype: HTMLIxTreeElement;
+        new (): HTMLIxTreeElement;
     };
-    interface HTMLCwTreeItemElement extends Components.CwTreeItem, HTMLStencilElement {
+    interface HTMLIxTreeItemElement extends Components.IxTreeItem, HTMLStencilElement {
     }
-    var HTMLCwTreeItemElement: {
-        prototype: HTMLCwTreeItemElement;
-        new (): HTMLCwTreeItemElement;
+    var HTMLIxTreeItemElement: {
+        prototype: HTMLIxTreeItemElement;
+        new (): HTMLIxTreeItemElement;
     };
-    interface HTMLCwUploadElement extends Components.CwUpload, HTMLStencilElement {
+    interface HTMLIxUploadElement extends Components.IxUpload, HTMLStencilElement {
     }
-    var HTMLCwUploadElement: {
-        prototype: HTMLCwUploadElement;
-        new (): HTMLCwUploadElement;
+    var HTMLIxUploadElement: {
+        prototype: HTMLIxUploadElement;
+        new (): HTMLIxUploadElement;
     };
     interface HTMLMyComponentElement extends Components.MyComponent, HTMLStencilElement {
     }
@@ -1652,71 +1679,71 @@ declare global {
         new (): HTMLMyComponentElement;
     };
     interface HTMLElementTagNameMap {
-        "cw-animated-tab": HTMLCwAnimatedTabElement;
-        "cw-animated-tabs": HTMLCwAnimatedTabsElement;
-        "cw-application-header": HTMLCwApplicationHeaderElement;
-        "cw-basic-navigation": HTMLCwBasicNavigationElement;
-        "cw-blind": HTMLCwBlindElement;
-        "cw-breadcrumb": HTMLCwBreadcrumbElement;
-        "cw-breadcrumb-item": HTMLCwBreadcrumbItemElement;
-        "cw-button": HTMLCwButtonElement;
-        "cw-category-filter": HTMLCwCategoryFilterElement;
-        "cw-chip": HTMLCwChipElement;
-        "cw-counter-pill": HTMLCwCounterPillElement;
-        "cw-date-picker": HTMLCwDatePickerElement;
-        "cw-date-time-card": HTMLCwDateTimeCardElement;
-        "cw-datetime-picker": HTMLCwDatetimePickerElement;
-        "cw-drawer": HTMLCwDrawerElement;
-        "cw-dropdown": HTMLCwDropdownElement;
-        "cw-dropdown-item": HTMLCwDropdownItemElement;
-        "cw-event-list": HTMLCwEventListElement;
-        "cw-event-list-item": HTMLCwEventListItemElement;
-        "cw-expanding-search": HTMLCwExpandingSearchElement;
-        "cw-filter-chip": HTMLCwFilterChipElement;
-        "cw-flip-tile": HTMLCwFlipTileElement;
-        "cw-flip-tile-content": HTMLCwFlipTileContentElement;
-        "cw-group": HTMLCwGroupElement;
-        "cw-group-dropdown-item": HTMLCwGroupDropdownItemElement;
-        "cw-group-item": HTMLCwGroupItemElement;
-        "cw-icon": HTMLCwIconElement;
-        "cw-icon-button": HTMLCwIconButtonElement;
-        "cw-input-group": HTMLCwInputGroupElement;
-        "cw-map-navigation": HTMLCwMapNavigationElement;
-        "cw-map-navigation-overlay": HTMLCwMapNavigationOverlayElement;
-        "cw-menu": HTMLCwMenuElement;
-        "cw-menu-about": HTMLCwMenuAboutElement;
-        "cw-menu-about-item": HTMLCwMenuAboutItemElement;
-        "cw-menu-about-news": HTMLCwMenuAboutNewsElement;
-        "cw-menu-avatar": HTMLCwMenuAvatarElement;
-        "cw-menu-avatar-item": HTMLCwMenuAvatarItemElement;
-        "cw-menu-item": HTMLCwMenuItemElement;
-        "cw-menu-settings": HTMLCwMenuSettingsElement;
-        "cw-menu-settings-item": HTMLCwMenuSettingsItemElement;
-        "cw-message-bar": HTMLCwMessageBarElement;
-        "cw-modal": HTMLCwModalElement;
-        "cw-modal-container": HTMLCwModalContainerElement;
-        "cw-modal-example": HTMLCwModalExampleElement;
-        "cw-pill": HTMLCwPillElement;
-        "cw-select": HTMLCwSelectElement;
-        "cw-select-item": HTMLCwSelectItemElement;
-        "cw-spinner": HTMLCwSpinnerElement;
-        "cw-split-button": HTMLCwSplitButtonElement;
-        "cw-split-button-item": HTMLCwSplitButtonItemElement;
-        "cw-tab-item": HTMLCwTabItemElement;
-        "cw-tabs": HTMLCwTabsElement;
-        "cw-tile": HTMLCwTileElement;
-        "cw-time-picker": HTMLCwTimePickerElement;
-        "cw-toast": HTMLCwToastElement;
-        "cw-toast-container": HTMLCwToastContainerElement;
-        "cw-toggle": HTMLCwToggleElement;
-        "cw-tree": HTMLCwTreeElement;
-        "cw-tree-item": HTMLCwTreeItemElement;
-        "cw-upload": HTMLCwUploadElement;
+        "ix-animated-tab": HTMLIxAnimatedTabElement;
+        "ix-animated-tabs": HTMLIxAnimatedTabsElement;
+        "ix-application-header": HTMLIxApplicationHeaderElement;
+        "ix-basic-navigation": HTMLIxBasicNavigationElement;
+        "ix-blind": HTMLIxBlindElement;
+        "ix-breadcrumb": HTMLIxBreadcrumbElement;
+        "ix-breadcrumb-item": HTMLIxBreadcrumbItemElement;
+        "ix-button": HTMLIxButtonElement;
+        "ix-category-filter": HTMLIxCategoryFilterElement;
+        "ix-chip": HTMLIxChipElement;
+        "ix-counter-pill": HTMLIxCounterPillElement;
+        "ix-date-picker": HTMLIxDatePickerElement;
+        "ix-date-time-card": HTMLIxDateTimeCardElement;
+        "ix-datetime-picker": HTMLIxDatetimePickerElement;
+        "ix-drawer": HTMLIxDrawerElement;
+        "ix-dropdown": HTMLIxDropdownElement;
+        "ix-dropdown-item": HTMLIxDropdownItemElement;
+        "ix-event-list": HTMLIxEventListElement;
+        "ix-event-list-item": HTMLIxEventListItemElement;
+        "ix-expanding-search": HTMLIxExpandingSearchElement;
+        "ix-filter-chip": HTMLIxFilterChipElement;
+        "ix-flip-tile": HTMLIxFlipTileElement;
+        "ix-flip-tile-content": HTMLIxFlipTileContentElement;
+        "ix-group": HTMLIxGroupElement;
+        "ix-group-dropdown-item": HTMLIxGroupDropdownItemElement;
+        "ix-group-item": HTMLIxGroupItemElement;
+        "ix-icon": HTMLIxIconElement;
+        "ix-icon-button": HTMLIxIconButtonElement;
+        "ix-input-group": HTMLIxInputGroupElement;
+        "ix-map-navigation": HTMLIxMapNavigationElement;
+        "ix-map-navigation-overlay": HTMLIxMapNavigationOverlayElement;
+        "ix-menu": HTMLIxMenuElement;
+        "ix-menu-about": HTMLIxMenuAboutElement;
+        "ix-menu-about-item": HTMLIxMenuAboutItemElement;
+        "ix-menu-about-news": HTMLIxMenuAboutNewsElement;
+        "ix-menu-avatar": HTMLIxMenuAvatarElement;
+        "ix-menu-avatar-item": HTMLIxMenuAvatarItemElement;
+        "ix-menu-item": HTMLIxMenuItemElement;
+        "ix-menu-settings": HTMLIxMenuSettingsElement;
+        "ix-menu-settings-item": HTMLIxMenuSettingsItemElement;
+        "ix-message-bar": HTMLIxMessageBarElement;
+        "ix-modal": HTMLIxModalElement;
+        "ix-modal-container": HTMLIxModalContainerElement;
+        "ix-modal-example": HTMLIxModalExampleElement;
+        "ix-pill": HTMLIxPillElement;
+        "ix-select": HTMLIxSelectElement;
+        "ix-select-item": HTMLIxSelectItemElement;
+        "ix-spinner": HTMLIxSpinnerElement;
+        "ix-split-button": HTMLIxSplitButtonElement;
+        "ix-split-button-item": HTMLIxSplitButtonItemElement;
+        "ix-tab-item": HTMLIxTabItemElement;
+        "ix-tabs": HTMLIxTabsElement;
+        "ix-tile": HTMLIxTileElement;
+        "ix-time-picker": HTMLIxTimePickerElement;
+        "ix-toast": HTMLIxToastElement;
+        "ix-toast-container": HTMLIxToastContainerElement;
+        "ix-toggle": HTMLIxToggleElement;
+        "ix-tree": HTMLIxTreeElement;
+        "ix-tree-item": HTMLIxTreeItemElement;
+        "ix-upload": HTMLIxUploadElement;
         "my-component": HTMLMyComponentElement;
     }
 }
 declare namespace LocalJSX {
-    interface CwAnimatedTab {
+    interface IxAnimatedTab {
         /**
           * Show notification number
          */
@@ -1726,7 +1753,7 @@ declare namespace LocalJSX {
          */
         "icon"?: string;
     }
-    interface CwAnimatedTabs {
+    interface IxAnimatedTabs {
         /**
           * @deprecated - For debugging purposes only
          */
@@ -1744,13 +1771,13 @@ declare namespace LocalJSX {
          */
         "tabPlacement"?: 'top' | 'bottom';
     }
-    interface CwApplicationHeader {
+    interface IxApplicationHeader {
         /**
           * Application name
          */
         "name"?: string;
     }
-    interface CwBasicNavigation {
+    interface IxBasicNavigation {
         /**
           * Application name
          */
@@ -1760,7 +1787,7 @@ declare namespace LocalJSX {
          */
         "hideHeader"?: boolean;
     }
-    interface CwBlind {
+    interface IxBlind {
         /**
           * Collapsed state
          */
@@ -1774,7 +1801,7 @@ declare namespace LocalJSX {
          */
         "onCollapsedChange"?: (event: CustomEvent<boolean>) => void;
     }
-    interface CwBreadcrumb {
+    interface IxBreadcrumb {
         /**
           * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
          */
@@ -1796,7 +1823,7 @@ declare namespace LocalJSX {
          */
         "visibleItemCount"?: number;
     }
-    interface CwBreadcrumbItem {
+    interface IxBreadcrumbItem {
         /**
           * Icon to be displayed next ot the label
          */
@@ -1806,7 +1833,7 @@ declare namespace LocalJSX {
          */
         "label"?: string;
     }
-    interface CwButton {
+    interface IxButton {
         /**
           * Disable the button
          */
@@ -1833,7 +1860,7 @@ declare namespace LocalJSX {
          */
         "variant"?: Buttons;
     }
-    interface CwCategoryFilter {
+    interface IxCategoryFilter {
         /**
           * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality. Each ID maps to an object with a label and an array of options to select from.
          */
@@ -1899,7 +1926,7 @@ declare namespace LocalJSX {
          */
         "tmpDisableScrollIntoView"?: boolean;
     }
-    interface CwChip {
+    interface IxChip {
         /**
           * Display chip in active state. Only working witht `variant="primary"`
          */
@@ -1931,9 +1958,16 @@ declare namespace LocalJSX {
         /**
           * Chip variant
          */
-        "variant"?: 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom';
+        "variant"?: | 'primary'
+    | 'alarm'
+    | 'critical'
+    | 'warning'
+    | 'info'
+    | 'neutral'
+    | 'success'
+    | 'custom';
     }
-    interface CwCounterPill {
+    interface IxCounterPill {
         /**
           * Align pill content left
          */
@@ -1953,9 +1987,16 @@ declare namespace LocalJSX {
         /**
           * Pill variant
          */
-        "variant"?: 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom';
+        "variant"?: | 'primary'
+    | 'alarm'
+    | 'critical'
+    | 'warning'
+    | 'info'
+    | 'neutral'
+    | 'success'
+    | 'custom';
     }
-    interface CwDatePicker {
+    interface IxDatePicker {
         /**
           * Set corners style
          */
@@ -1981,7 +2022,7 @@ declare namespace LocalJSX {
          */
         "range"?: boolean;
     }
-    interface CwDateTimeCard {
+    interface IxDateTimeCard {
         /**
           * Set corners style
          */
@@ -1991,7 +2032,7 @@ declare namespace LocalJSX {
          */
         "individual"?: boolean;
     }
-    interface CwDatetimePicker {
+    interface IxDatetimePicker {
         /**
           * Time event
          */
@@ -2017,7 +2058,7 @@ declare namespace LocalJSX {
          */
         "showTimeReference"?: boolean;
     }
-    interface CwDrawer {
+    interface IxDrawer {
         /**
           * Fired in case of an outside click during drawer showed state
          */
@@ -2051,7 +2092,7 @@ declare namespace LocalJSX {
          */
         "width"?: number | 'auto';
     }
-    interface CwDropdown {
+    interface IxDropdown {
         /**
           * Adjust dropdown width to the parent width
          */
@@ -2094,7 +2135,7 @@ declare namespace LocalJSX {
          */
         "trigger"?: string | HTMLElement;
     }
-    interface CwDropdownItem {
+    interface IxDropdownItem {
         /**
           * Whether the item is checked or not. If true a checkmark will mark the item as checked.
          */
@@ -2118,9 +2159,9 @@ declare namespace LocalJSX {
         /**
           * Click on item
          */
-        "onItemClick"?: (event: CustomEvent<HTMLCwDropdownItemElement>) => void;
+        "onItemClick"?: (event: CustomEvent<HTMLIxDropdownItemElement>) => void;
     }
-    interface CwEventList {
+    interface IxEventList {
         /**
           * Animate state change transitions. Defaults to 'true'.
          */
@@ -2138,7 +2179,7 @@ declare namespace LocalJSX {
          */
         "itemHeight"?: 'S' | 'L' | number;
     }
-    interface CwEventListItem {
+    interface IxEventListItem {
         /**
           * Show chevron on right side of the event list item
          */
@@ -2165,7 +2206,7 @@ declare namespace LocalJSX {
          */
         "selected"?: boolean;
     }
-    interface CwExpandingSearch {
+    interface IxExpandingSearch {
         /**
           * Search icon
          */
@@ -2183,7 +2224,7 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
-    interface CwFilterChip {
+    interface IxFilterChip {
         /**
           * If true the filter chip will be in disabled state
          */
@@ -2193,7 +2234,7 @@ declare namespace LocalJSX {
          */
         "onCloseClick"?: (event: CustomEvent<void>) => void;
     }
-    interface CwFlipTile {
+    interface IxFlipTile {
         /**
           * Tmp property name
          */
@@ -2203,9 +2244,9 @@ declare namespace LocalJSX {
          */
         "state"?: FlipTileState;
     }
-    interface CwFlipTileContent {
+    interface IxFlipTileContent {
     }
-    interface CwGroup {
+    interface IxGroup {
         /**
           * Whether the group is collapsed or expanded. Defaults to true.
          */
@@ -2247,7 +2288,7 @@ declare namespace LocalJSX {
          */
         "suppressHeaderSelection"?: boolean;
     }
-    interface CwGroupDropdownItem {
+    interface IxGroupDropdownItem {
         /**
           * Group dropdown icon
          */
@@ -2257,7 +2298,7 @@ declare namespace LocalJSX {
          */
         "label"?: string;
     }
-    interface CwGroupItem {
+    interface IxGroupItem {
         /**
           * The elements tabindex attribute will get set accordingly. If true tabindex will be 0, -1 otherwise.
          */
@@ -2273,7 +2314,7 @@ declare namespace LocalJSX {
         /**
           * Selection changed
          */
-        "onSelectedChanged"?: (event: CustomEvent<HTMLCwGroupItemElement>) => void;
+        "onSelectedChanged"?: (event: CustomEvent<HTMLIxGroupItemElement>) => void;
         /**
           * Group item secondary text
          */
@@ -2291,7 +2332,7 @@ declare namespace LocalJSX {
          */
         "text"?: string;
     }
-    interface CwIcon {
+    interface IxIcon {
         /**
           * Color of the icon
          */
@@ -2305,7 +2346,7 @@ declare namespace LocalJSX {
          */
         "size"?: '12' | '16' | '24' | '32';
     }
-    interface CwIconButton {
+    interface IxIconButton {
         /**
           * Color of icon in  button
          */
@@ -2348,9 +2389,9 @@ declare namespace LocalJSX {
          */
         "variant"?: 'Primary' | 'Secondary';
     }
-    interface CwInputGroup {
+    interface IxInputGroup {
     }
-    interface CwMapNavigation {
+    interface IxMapNavigation {
         /**
           * Application name
          */
@@ -2372,7 +2413,7 @@ declare namespace LocalJSX {
          */
         "onNavigationToggled"?: (event: CustomEvent<boolean>) => void;
     }
-    interface CwMapNavigationOverlay {
+    interface IxMapNavigationOverlay {
         /**
           * Color of icon
          */
@@ -2390,13 +2431,13 @@ declare namespace LocalJSX {
          */
         "onCloseClick"?: (event: CustomEvent<any>) => void;
     }
-    interface CwMenu {
+    interface IxMenu {
         /**
-          * Should only be set if you use cw-menu standalone
+          * Should only be set if you use ix-menu standalone
          */
         "applicationDescription"?: string;
         /**
-          * Should only be set if you use cw-menu standalone
+          * Should only be set if you use ix-menu standalone
          */
         "applicationName"?: string;
         /**
@@ -2442,17 +2483,17 @@ declare namespace LocalJSX {
          */
         "showSettings"?: boolean;
     }
-    interface CwMenuAbout {
+    interface IxMenuAbout {
         /**
           * Active tab
          */
         "activeTabLabel"?: string;
         /**
-          * Should only be set if you use cw-menu standalone
+          * Should only be set if you use ix-menu standalone
          */
         "applicationDescription"?: string;
         /**
-          * Should only be set if you use cw-menu standalone
+          * Should only be set if you use ix-menu standalone
          */
         "applicationName"?: string;
         /**
@@ -2482,13 +2523,13 @@ declare namespace LocalJSX {
          */
         "show"?: boolean;
     }
-    interface CwMenuAboutItem {
+    interface IxMenuAboutItem {
         /**
           * About Item label
          */
         "label"?: string;
     }
-    interface CwMenuAboutNews {
+    interface IxMenuAboutNews {
         /**
           * Subtitle of the about news
          */
@@ -2519,7 +2560,7 @@ declare namespace LocalJSX {
          */
         "show"?: boolean;
     }
-    interface CwMenuAvatar {
+    interface IxMenuAvatar {
         /**
           * Second line of text
          */
@@ -2534,7 +2575,7 @@ declare namespace LocalJSX {
          */
         "top"?: string;
     }
-    interface CwMenuAvatarItem {
+    interface IxMenuAvatarItem {
         /**
           * Avatar dropdown icon
          */
@@ -2548,7 +2589,7 @@ declare namespace LocalJSX {
          */
         "onItemClick"?: (event: CustomEvent<MouseEvent>) => void;
     }
-    interface CwMenuItem {
+    interface IxMenuItem {
         /**
           * State to display active
          */
@@ -2574,7 +2615,7 @@ declare namespace LocalJSX {
          */
         "tabIcon"?: string;
     }
-    interface CwMenuSettings {
+    interface IxMenuSettings {
         /**
           * active tab
          */
@@ -2592,13 +2633,13 @@ declare namespace LocalJSX {
          */
         "show"?: boolean;
     }
-    interface CwMenuSettingsItem {
+    interface IxMenuSettingsItem {
         /**
           * Label
          */
         "label"?: string;
     }
-    interface CwMessageBar {
+    interface IxMessageBar {
         /**
           * If true, close button is enabled and alert can be dismissed by the user
          */
@@ -2612,7 +2653,7 @@ declare namespace LocalJSX {
          */
         "type"?: 'danger' | 'warning' | 'info';
     }
-    interface CwModal {
+    interface IxModal {
         /**
           * Should the modal be animtated
          */
@@ -2680,15 +2721,15 @@ declare namespace LocalJSX {
          */
         "windowClass"?: string;
     }
-    interface CwModalContainer {
+    interface IxModalContainer {
     }
-    interface CwModalExample {
+    interface IxModalExample {
         /**
           * Emit close modal
          */
         "onClose"?: (event: CustomEvent<any>) => void;
     }
-    interface CwPill {
+    interface IxPill {
         /**
           * Align pill content left
          */
@@ -2712,9 +2753,16 @@ declare namespace LocalJSX {
         /**
           * Pill variant
          */
-        "variant"?: 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom';
+        "variant"?: | 'primary'
+    | 'alarm'
+    | 'critical'
+    | 'warning'
+    | 'info'
+    | 'neutral'
+    | 'success'
+    | 'custom';
     }
-    interface CwSelect {
+    interface IxSelect {
         /**
           * Show clear button
          */
@@ -2760,7 +2808,7 @@ declare namespace LocalJSX {
          */
         "selectedIndices"?: string | string[];
     }
-    interface CwSelectItem {
+    interface IxSelectItem {
         /**
           * ***Internal***
          */
@@ -2782,7 +2830,7 @@ declare namespace LocalJSX {
          */
         "value": any;
     }
-    interface CwSpinner {
+    interface IxSpinner {
         /**
           * Size of spinner
          */
@@ -2792,7 +2840,7 @@ declare namespace LocalJSX {
          */
         "variant"?: 'primary' | 'sencodary' | 'secondary';
     }
-    interface CwSplitButton {
+    interface IxSplitButton {
         /**
           * Disabled
          */
@@ -2835,7 +2883,7 @@ declare namespace LocalJSX {
          */
         "variant"?: Buttons;
     }
-    interface CwSplitButtonItem {
+    interface IxSplitButtonItem {
         /**
           * Dropdown icon
          */
@@ -2849,7 +2897,7 @@ declare namespace LocalJSX {
          */
         "onItemClick"?: (event: CustomEvent<MouseEvent>) => void;
     }
-    interface CwTabItem {
+    interface IxTabItem {
         /**
           * Set disabled tab
          */
@@ -2875,7 +2923,7 @@ declare namespace LocalJSX {
          */
         "small"?: boolean;
     }
-    interface CwTabs {
+    interface IxTabs {
         /**
           * Set layout width style
          */
@@ -2893,13 +2941,13 @@ declare namespace LocalJSX {
          */
         "small"?: boolean;
     }
-    interface CwTile {
+    interface IxTile {
         /**
           * Size of the tile - one of 'small', 'medium' or 'large'
          */
         "size"?: 'small' | 'medium' | 'big';
     }
-    interface CwTimePicker {
+    interface IxTimePicker {
         /**
           * Set corners style
          */
@@ -2933,7 +2981,7 @@ declare namespace LocalJSX {
          */
         "showTimeReference"?: boolean;
     }
-    interface CwToast {
+    interface IxToast {
         /**
           * Autoclose behavior
          */
@@ -2963,12 +3011,12 @@ declare namespace LocalJSX {
          */
         "type"?: ToastType;
     }
-    interface CwToastContainer {
+    interface IxToastContainer {
         "containerClass"?: string;
         "containerId"?: string;
         "position"?: string;
     }
-    interface CwToggle {
+    interface IxToggle {
         /**
           * Whether the slide-toggle element is checked or not.
          */
@@ -3007,7 +3055,7 @@ declare namespace LocalJSX {
          */
         "textOn"?: string;
     }
-    interface CwTree {
+    interface IxTree {
         /**
           * Selection and collapsed state management
          */
@@ -3023,13 +3071,19 @@ declare namespace LocalJSX {
         /**
           * Render function of tree items
          */
-        "renderItem"?: (index: number, data: any, dataList: Array<any>, context: TreeContext, update: (callback: UpdateCallback) => void) => HTMLElement;
+        "renderItem"?: (
+    index: number,
+    data: any,
+    dataList: Array<any>,
+    context: TreeContext,
+    update: (callback: UpdateCallback) => void
+  ) => HTMLElement;
         /**
           * Initial root element will not be rendered
          */
         "root"?: string;
     }
-    interface CwTreeItem {
+    interface IxTreeItem {
         /**
           * Context
          */
@@ -3051,7 +3105,7 @@ declare namespace LocalJSX {
          */
         "text"?: string;
     }
-    interface CwUpload {
+    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}
          */
@@ -3096,66 +3150,66 @@ declare namespace LocalJSX {
     interface MyComponent {
     }
     interface IntrinsicElements {
-        "cw-animated-tab": CwAnimatedTab;
-        "cw-animated-tabs": CwAnimatedTabs;
-        "cw-application-header": CwApplicationHeader;
-        "cw-basic-navigation": CwBasicNavigation;
-        "cw-blind": CwBlind;
-        "cw-breadcrumb": CwBreadcrumb;
-        "cw-breadcrumb-item": CwBreadcrumbItem;
-        "cw-button": CwButton;
-        "cw-category-filter": CwCategoryFilter;
-        "cw-chip": CwChip;
-        "cw-counter-pill": CwCounterPill;
-        "cw-date-picker": CwDatePicker;
-        "cw-date-time-card": CwDateTimeCard;
-        "cw-datetime-picker": CwDatetimePicker;
-        "cw-drawer": CwDrawer;
-        "cw-dropdown": CwDropdown;
-        "cw-dropdown-item": CwDropdownItem;
-        "cw-event-list": CwEventList;
-        "cw-event-list-item": CwEventListItem;
-        "cw-expanding-search": CwExpandingSearch;
-        "cw-filter-chip": CwFilterChip;
-        "cw-flip-tile": CwFlipTile;
-        "cw-flip-tile-content": CwFlipTileContent;
-        "cw-group": CwGroup;
-        "cw-group-dropdown-item": CwGroupDropdownItem;
-        "cw-group-item": CwGroupItem;
-        "cw-icon": CwIcon;
-        "cw-icon-button": CwIconButton;
-        "cw-input-group": CwInputGroup;
-        "cw-map-navigation": CwMapNavigation;
-        "cw-map-navigation-overlay": CwMapNavigationOverlay;
-        "cw-menu": CwMenu;
-        "cw-menu-about": CwMenuAbout;
-        "cw-menu-about-item": CwMenuAboutItem;
-        "cw-menu-about-news": CwMenuAboutNews;
-        "cw-menu-avatar": CwMenuAvatar;
-        "cw-menu-avatar-item": CwMenuAvatarItem;
-        "cw-menu-item": CwMenuItem;
-        "cw-menu-settings": CwMenuSettings;
-        "cw-menu-settings-item": CwMenuSettingsItem;
-        "cw-message-bar": CwMessageBar;
-        "cw-modal": CwModal;
-        "cw-modal-container": CwModalContainer;
-        "cw-modal-example": CwModalExample;
-        "cw-pill": CwPill;
-        "cw-select": CwSelect;
-        "cw-select-item": CwSelectItem;
-        "cw-spinner": CwSpinner;
-        "cw-split-button": CwSplitButton;
-        "cw-split-button-item": CwSplitButtonItem;
-        "cw-tab-item": CwTabItem;
-        "cw-tabs": CwTabs;
-        "cw-tile": CwTile;
-        "cw-time-picker": CwTimePicker;
-        "cw-toast": CwToast;
-        "cw-toast-container": CwToastContainer;
-        "cw-toggle": CwToggle;
-        "cw-tree": CwTree;
-        "cw-tree-item": CwTreeItem;
-        "cw-upload": CwUpload;
+        "ix-animated-tab": IxAnimatedTab;
+        "ix-animated-tabs": IxAnimatedTabs;
+        "ix-application-header": IxApplicationHeader;
+        "ix-basic-navigation": IxBasicNavigation;
+        "ix-blind": IxBlind;
+        "ix-breadcrumb": IxBreadcrumb;
+        "ix-breadcrumb-item": IxBreadcrumbItem;
+        "ix-button": IxButton;
+        "ix-category-filter": IxCategoryFilter;
+        "ix-chip": IxChip;
+        "ix-counter-pill": IxCounterPill;
+        "ix-date-picker": IxDatePicker;
+        "ix-date-time-card": IxDateTimeCard;
+        "ix-datetime-picker": IxDatetimePicker;
+        "ix-drawer": IxDrawer;
+        "ix-dropdown": IxDropdown;
+        "ix-dropdown-item": IxDropdownItem;
+        "ix-event-list": IxEventList;
+        "ix-event-list-item": IxEventListItem;
+        "ix-expanding-search": IxExpandingSearch;
+        "ix-filter-chip": IxFilterChip;
+        "ix-flip-tile": IxFlipTile;
+        "ix-flip-tile-content": IxFlipTileContent;
+        "ix-group": IxGroup;
+        "ix-group-dropdown-item": IxGroupDropdownItem;
+        "ix-group-item": IxGroupItem;
+        "ix-icon": IxIcon;
+        "ix-icon-button": IxIconButton;
+        "ix-input-group": IxInputGroup;
+        "ix-map-navigation": IxMapNavigation;
+        "ix-map-navigation-overlay": IxMapNavigationOverlay;
+        "ix-menu": IxMenu;
+        "ix-menu-about": IxMenuAbout;
+        "ix-menu-about-item": IxMenuAboutItem;
+        "ix-menu-about-news": IxMenuAboutNews;
+        "ix-menu-avatar": IxMenuAvatar;
+        "ix-menu-avatar-item": IxMenuAvatarItem;
+        "ix-menu-item": IxMenuItem;
+        "ix-menu-settings": IxMenuSettings;
+        "ix-menu-settings-item": IxMenuSettingsItem;
+        "ix-message-bar": IxMessageBar;
+        "ix-modal": IxModal;
+        "ix-modal-container": IxModalContainer;
+        "ix-modal-example": IxModalExample;
+        "ix-pill": IxPill;
+        "ix-select": IxSelect;
+        "ix-select-item": IxSelectItem;
+        "ix-spinner": IxSpinner;
+        "ix-split-button": IxSplitButton;
+        "ix-split-button-item": IxSplitButtonItem;
+        "ix-tab-item": IxTabItem;
+        "ix-tabs": IxTabs;
+        "ix-tile": IxTile;
+        "ix-time-picker": IxTimePicker;
+        "ix-toast": IxToast;
+        "ix-toast-container": IxToastContainer;
+        "ix-toggle": IxToggle;
+        "ix-tree": IxTree;
+        "ix-tree-item": IxTreeItem;
+        "ix-upload": IxUpload;
         "my-component": MyComponent;
     }
 }
@@ -3163,66 +3217,66 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
-            "cw-animated-tab": LocalJSX.CwAnimatedTab & JSXBase.HTMLAttributes<HTMLCwAnimatedTabElement>;
-            "cw-animated-tabs": LocalJSX.CwAnimatedTabs & JSXBase.HTMLAttributes<HTMLCwAnimatedTabsElement>;
-            "cw-application-header": LocalJSX.CwApplicationHeader & JSXBase.HTMLAttributes<HTMLCwApplicationHeaderElement>;
-            "cw-basic-navigation": LocalJSX.CwBasicNavigation & JSXBase.HTMLAttributes<HTMLCwBasicNavigationElement>;
-            "cw-blind": LocalJSX.CwBlind & JSXBase.HTMLAttributes<HTMLCwBlindElement>;
-            "cw-breadcrumb": LocalJSX.CwBreadcrumb & JSXBase.HTMLAttributes<HTMLCwBreadcrumbElement>;
-            "cw-breadcrumb-item": LocalJSX.CwBreadcrumbItem & JSXBase.HTMLAttributes<HTMLCwBreadcrumbItemElement>;
-            "cw-button": LocalJSX.CwButton & JSXBase.HTMLAttributes<HTMLCwButtonElement>;
-            "cw-category-filter": LocalJSX.CwCategoryFilter & JSXBase.HTMLAttributes<HTMLCwCategoryFilterElement>;
-            "cw-chip": LocalJSX.CwChip & JSXBase.HTMLAttributes<HTMLCwChipElement>;
-            "cw-counter-pill": LocalJSX.CwCounterPill & JSXBase.HTMLAttributes<HTMLCwCounterPillElement>;
-            "cw-date-picker": LocalJSX.CwDatePicker & JSXBase.HTMLAttributes<HTMLCwDatePickerElement>;
-            "cw-date-time-card": LocalJSX.CwDateTimeCard & JSXBase.HTMLAttributes<HTMLCwDateTimeCardElement>;
-            "cw-datetime-picker": LocalJSX.CwDatetimePicker & JSXBase.HTMLAttributes<HTMLCwDatetimePickerElement>;
-            "cw-drawer": LocalJSX.CwDrawer & JSXBase.HTMLAttributes<HTMLCwDrawerElement>;
-            "cw-dropdown": LocalJSX.CwDropdown & JSXBase.HTMLAttributes<HTMLCwDropdownElement>;
-            "cw-dropdown-item": LocalJSX.CwDropdownItem & JSXBase.HTMLAttributes<HTMLCwDropdownItemElement>;
-            "cw-event-list": LocalJSX.CwEventList & JSXBase.HTMLAttributes<HTMLCwEventListElement>;
-            "cw-event-list-item": LocalJSX.CwEventListItem & JSXBase.HTMLAttributes<HTMLCwEventListItemElement>;
-            "cw-expanding-search": LocalJSX.CwExpandingSearch & JSXBase.HTMLAttributes<HTMLCwExpandingSearchElement>;
-            "cw-filter-chip": LocalJSX.CwFilterChip & JSXBase.HTMLAttributes<HTMLCwFilterChipElement>;
-            "cw-flip-tile": LocalJSX.CwFlipTile & JSXBase.HTMLAttributes<HTMLCwFlipTileElement>;
-            "cw-flip-tile-content": LocalJSX.CwFlipTileContent & JSXBase.HTMLAttributes<HTMLCwFlipTileContentElement>;
-            "cw-group": LocalJSX.CwGroup & JSXBase.HTMLAttributes<HTMLCwGroupElement>;
-            "cw-group-dropdown-item": LocalJSX.CwGroupDropdownItem & JSXBase.HTMLAttributes<HTMLCwGroupDropdownItemElement>;
-            "cw-group-item": LocalJSX.CwGroupItem & JSXBase.HTMLAttributes<HTMLCwGroupItemElement>;
-            "cw-icon": LocalJSX.CwIcon & JSXBase.HTMLAttributes<HTMLCwIconElement>;
-            "cw-icon-button": LocalJSX.CwIconButton & JSXBase.HTMLAttributes<HTMLCwIconButtonElement>;
-            "cw-input-group": LocalJSX.CwInputGroup & JSXBase.HTMLAttributes<HTMLCwInputGroupElement>;
-            "cw-map-navigation": LocalJSX.CwMapNavigation & JSXBase.HTMLAttributes<HTMLCwMapNavigationElement>;
-            "cw-map-navigation-overlay": LocalJSX.CwMapNavigationOverlay & JSXBase.HTMLAttributes<HTMLCwMapNavigationOverlayElement>;
-            "cw-menu": LocalJSX.CwMenu & JSXBase.HTMLAttributes<HTMLCwMenuElement>;
-            "cw-menu-about": LocalJSX.CwMenuAbout & JSXBase.HTMLAttributes<HTMLCwMenuAboutElement>;
-            "cw-menu-about-item": LocalJSX.CwMenuAboutItem & JSXBase.HTMLAttributes<HTMLCwMenuAboutItemElement>;
-            "cw-menu-about-news": LocalJSX.CwMenuAboutNews & JSXBase.HTMLAttributes<HTMLCwMenuAboutNewsElement>;
-            "cw-menu-avatar": LocalJSX.CwMenuAvatar & JSXBase.HTMLAttributes<HTMLCwMenuAvatarElement>;
-            "cw-menu-avatar-item": LocalJSX.CwMenuAvatarItem & JSXBase.HTMLAttributes<HTMLCwMenuAvatarItemElement>;
-            "cw-menu-item": LocalJSX.CwMenuItem & JSXBase.HTMLAttributes<HTMLCwMenuItemElement>;
-            "cw-menu-settings": LocalJSX.CwMenuSettings & JSXBase.HTMLAttributes<HTMLCwMenuSettingsElement>;
-            "cw-menu-settings-item": LocalJSX.CwMenuSettingsItem & JSXBase.HTMLAttributes<HTMLCwMenuSettingsItemElement>;
-            "cw-message-bar": LocalJSX.CwMessageBar & JSXBase.HTMLAttributes<HTMLCwMessageBarElement>;
-            "cw-modal": LocalJSX.CwModal & JSXBase.HTMLAttributes<HTMLCwModalElement>;
-            "cw-modal-container": LocalJSX.CwModalContainer & JSXBase.HTMLAttributes<HTMLCwModalContainerElement>;
-            "cw-modal-example": LocalJSX.CwModalExample & JSXBase.HTMLAttributes<HTMLCwModalExampleElement>;
-            "cw-pill": LocalJSX.CwPill & JSXBase.HTMLAttributes<HTMLCwPillElement>;
-            "cw-select": LocalJSX.CwSelect & JSXBase.HTMLAttributes<HTMLCwSelectElement>;
-            "cw-select-item": LocalJSX.CwSelectItem & JSXBase.HTMLAttributes<HTMLCwSelectItemElement>;
-            "cw-spinner": LocalJSX.CwSpinner & JSXBase.HTMLAttributes<HTMLCwSpinnerElement>;
-            "cw-split-button": LocalJSX.CwSplitButton & JSXBase.HTMLAttributes<HTMLCwSplitButtonElement>;
-            "cw-split-button-item": LocalJSX.CwSplitButtonItem & JSXBase.HTMLAttributes<HTMLCwSplitButtonItemElement>;
-            "cw-tab-item": LocalJSX.CwTabItem & JSXBase.HTMLAttributes<HTMLCwTabItemElement>;
-            "cw-tabs": LocalJSX.CwTabs & JSXBase.HTMLAttributes<HTMLCwTabsElement>;
-            "cw-tile": LocalJSX.CwTile & JSXBase.HTMLAttributes<HTMLCwTileElement>;
-            "cw-time-picker": LocalJSX.CwTimePicker & JSXBase.HTMLAttributes<HTMLCwTimePickerElement>;
-            "cw-toast": LocalJSX.CwToast & JSXBase.HTMLAttributes<HTMLCwToastElement>;
-            "cw-toast-container": LocalJSX.CwToastContainer & JSXBase.HTMLAttributes<HTMLCwToastContainerElement>;
-            "cw-toggle": LocalJSX.CwToggle & JSXBase.HTMLAttributes<HTMLCwToggleElement>;
-            "cw-tree": LocalJSX.CwTree & JSXBase.HTMLAttributes<HTMLCwTreeElement>;
-            "cw-tree-item": LocalJSX.CwTreeItem & JSXBase.HTMLAttributes<HTMLCwTreeItemElement>;
-            "cw-upload": LocalJSX.CwUpload & JSXBase.HTMLAttributes<HTMLCwUploadElement>;
+            "ix-animated-tab": LocalJSX.IxAnimatedTab & JSXBase.HTMLAttributes<HTMLIxAnimatedTabElement>;
+            "ix-animated-tabs": LocalJSX.IxAnimatedTabs & JSXBase.HTMLAttributes<HTMLIxAnimatedTabsElement>;
+            "ix-application-header": LocalJSX.IxApplicationHeader & JSXBase.HTMLAttributes<HTMLIxApplicationHeaderElement>;
+            "ix-basic-navigation": LocalJSX.IxBasicNavigation & JSXBase.HTMLAttributes<HTMLIxBasicNavigationElement>;
+            "ix-blind": LocalJSX.IxBlind & JSXBase.HTMLAttributes<HTMLIxBlindElement>;
+            "ix-breadcrumb": LocalJSX.IxBreadcrumb & JSXBase.HTMLAttributes<HTMLIxBreadcrumbElement>;
+            "ix-breadcrumb-item": LocalJSX.IxBreadcrumbItem & JSXBase.HTMLAttributes<HTMLIxBreadcrumbItemElement>;
+            "ix-button": LocalJSX.IxButton & JSXBase.HTMLAttributes<HTMLIxButtonElement>;
+            "ix-category-filter": LocalJSX.IxCategoryFilter & JSXBase.HTMLAttributes<HTMLIxCategoryFilterElement>;
+            "ix-chip": LocalJSX.IxChip & JSXBase.HTMLAttributes<HTMLIxChipElement>;
+            "ix-counter-pill": LocalJSX.IxCounterPill & JSXBase.HTMLAttributes<HTMLIxCounterPillElement>;
+            "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-drawer": LocalJSX.IxDrawer & JSXBase.HTMLAttributes<HTMLIxDrawerElement>;
+            "ix-dropdown": LocalJSX.IxDropdown & JSXBase.HTMLAttributes<HTMLIxDropdownElement>;
+            "ix-dropdown-item": LocalJSX.IxDropdownItem & JSXBase.HTMLAttributes<HTMLIxDropdownItemElement>;
+            "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>;
+            "ix-filter-chip": LocalJSX.IxFilterChip & JSXBase.HTMLAttributes<HTMLIxFilterChipElement>;
+            "ix-flip-tile": LocalJSX.IxFlipTile & JSXBase.HTMLAttributes<HTMLIxFlipTileElement>;
+            "ix-flip-tile-content": LocalJSX.IxFlipTileContent & JSXBase.HTMLAttributes<HTMLIxFlipTileContentElement>;
+            "ix-group": LocalJSX.IxGroup & JSXBase.HTMLAttributes<HTMLIxGroupElement>;
+            "ix-group-dropdown-item": LocalJSX.IxGroupDropdownItem & JSXBase.HTMLAttributes<HTMLIxGroupDropdownItemElement>;
+            "ix-group-item": LocalJSX.IxGroupItem & JSXBase.HTMLAttributes<HTMLIxGroupItemElement>;
+            "ix-icon": LocalJSX.IxIcon & JSXBase.HTMLAttributes<HTMLIxIconElement>;
+            "ix-icon-button": LocalJSX.IxIconButton & JSXBase.HTMLAttributes<HTMLIxIconButtonElement>;
+            "ix-input-group": LocalJSX.IxInputGroup & JSXBase.HTMLAttributes<HTMLIxInputGroupElement>;
+            "ix-map-navigation": LocalJSX.IxMapNavigation & JSXBase.HTMLAttributes<HTMLIxMapNavigationElement>;
+            "ix-map-navigation-overlay": LocalJSX.IxMapNavigationOverlay & JSXBase.HTMLAttributes<HTMLIxMapNavigationOverlayElement>;
+            "ix-menu": LocalJSX.IxMenu & JSXBase.HTMLAttributes<HTMLIxMenuElement>;
+            "ix-menu-about": LocalJSX.IxMenuAbout & JSXBase.HTMLAttributes<HTMLIxMenuAboutElement>;
+            "ix-menu-about-item": LocalJSX.IxMenuAboutItem & JSXBase.HTMLAttributes<HTMLIxMenuAboutItemElement>;
+            "ix-menu-about-news": LocalJSX.IxMenuAboutNews & JSXBase.HTMLAttributes<HTMLIxMenuAboutNewsElement>;
+            "ix-menu-avatar": LocalJSX.IxMenuAvatar & JSXBase.HTMLAttributes<HTMLIxMenuAvatarElement>;
+            "ix-menu-avatar-item": LocalJSX.IxMenuAvatarItem & JSXBase.HTMLAttributes<HTMLIxMenuAvatarItemElement>;
+            "ix-menu-item": LocalJSX.IxMenuItem & JSXBase.HTMLAttributes<HTMLIxMenuItemElement>;
+            "ix-menu-settings": LocalJSX.IxMenuSettings & JSXBase.HTMLAttributes<HTMLIxMenuSettingsElement>;
+            "ix-menu-settings-item": LocalJSX.IxMenuSettingsItem & JSXBase.HTMLAttributes<HTMLIxMenuSettingsItemElement>;
+            "ix-message-bar": LocalJSX.IxMessageBar & JSXBase.HTMLAttributes<HTMLIxMessageBarElement>;
+            "ix-modal": LocalJSX.IxModal & JSXBase.HTMLAttributes<HTMLIxModalElement>;
+            "ix-modal-container": LocalJSX.IxModalContainer & JSXBase.HTMLAttributes<HTMLIxModalContainerElement>;
+            "ix-modal-example": LocalJSX.IxModalExample & JSXBase.HTMLAttributes<HTMLIxModalExampleElement>;
+            "ix-pill": LocalJSX.IxPill & JSXBase.HTMLAttributes<HTMLIxPillElement>;
+            "ix-select": LocalJSX.IxSelect & JSXBase.HTMLAttributes<HTMLIxSelectElement>;
+            "ix-select-item": LocalJSX.IxSelectItem & JSXBase.HTMLAttributes<HTMLIxSelectItemElement>;
+            "ix-spinner": LocalJSX.IxSpinner & JSXBase.HTMLAttributes<HTMLIxSpinnerElement>;
+            "ix-split-button": LocalJSX.IxSplitButton & JSXBase.HTMLAttributes<HTMLIxSplitButtonElement>;
+            "ix-split-button-item": LocalJSX.IxSplitButtonItem & JSXBase.HTMLAttributes<HTMLIxSplitButtonItemElement>;
+            "ix-tab-item": LocalJSX.IxTabItem & JSXBase.HTMLAttributes<HTMLIxTabItemElement>;
+            "ix-tabs": LocalJSX.IxTabs & JSXBase.HTMLAttributes<HTMLIxTabsElement>;
+            "ix-tile": LocalJSX.IxTile & JSXBase.HTMLAttributes<HTMLIxTileElement>;
+            "ix-time-picker": LocalJSX.IxTimePicker & JSXBase.HTMLAttributes<HTMLIxTimePickerElement>;
+            "ix-toast": LocalJSX.IxToast & JSXBase.HTMLAttributes<HTMLIxToastElement>;
+            "ix-toast-container": LocalJSX.IxToastContainer & JSXBase.HTMLAttributes<HTMLIxToastContainerElement>;
+            "ix-toggle": LocalJSX.IxToggle & JSXBase.HTMLAttributes<HTMLIxToggleElement>;
+            "ix-tree": LocalJSX.IxTree & JSXBase.HTMLAttributes<HTMLIxTreeElement>;
+            "ix-tree-item": LocalJSX.IxTreeItem & JSXBase.HTMLAttributes<HTMLIxTreeItemElement>;
+            "ix-upload": LocalJSX.IxUpload & JSXBase.HTMLAttributes<HTMLIxUploadElement>;
             "my-component": LocalJSX.MyComponent & JSXBase.HTMLAttributes<HTMLMyComponentElement>;
         }
     }
diff --git a/packages/core/src/components/animated-tab/animated-tab.tsx b/packages/core/src/components/animated-tab/animated-tab.tsx
index 4dc131c1fab..e7ea86c65ff 100644
--- a/packages/core/src/components/animated-tab/animated-tab.tsx
+++ b/packages/core/src/components/animated-tab/animated-tab.tsx
@@ -5,7 +5,7 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-animated-tab',
+  tag: 'ix-animated-tab',
   styleUrl: 'animated-tab.scss',
   scoped: true,
 })
diff --git a/packages/core/src/components/animated-tabs/animated-tabs.scss b/packages/core/src/components/animated-tabs/animated-tabs.scss
index 9e238e3addf..cc2c0021179 100644
--- a/packages/core/src/components/animated-tabs/animated-tabs.scss
+++ b/packages/core/src/components/animated-tabs/animated-tabs.scss
@@ -2,9 +2,9 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/fonts';
-@import '../../../scss/v7/mixins/hover';
+@import 'common-variables';
+@import 'mixins/fonts';
+@import 'mixins/hover';
 
 :host {
   --animate-duration: #{$medium-time};
@@ -36,7 +36,7 @@
 
       .tab-container {
         background: var(--theme-animated-tab-circle--background);
-        border: solid 1px  var(--theme-animated-tab-circle--border-color);
+        border: solid 1px var(--theme-animated-tab-circle--border-color);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -46,7 +46,7 @@
         position: relative;
         transition: $default-time;
 
-        cw-icon {
+        ix-icon {
           color: var(--theme-animated-tab-icon--color) !important;
         }
 
@@ -54,7 +54,7 @@
           background: var(--theme-animated-tab-circle--background--hover);
           border-color: var(--theme-animated-tab-circle--border-color--hover);
 
-          cw-icon {
+          ix-icon {
             color: var(--theme-animated-tab-icon--color--hover) !important;
           }
         }
@@ -63,28 +63,32 @@
           background: var(--theme-animated-tab-circle--background--active);
           border-color: var(--theme-animated-tab-circle--border-color--active);
 
-          cw-icon {
+          ix-icon {
             color: var(--theme-animated-tab-icon--color--active) !important;
           }
         }
 
         &.selected {
           background: var(--theme-animated-tab-circle--background--selected);
-          border-color: var(--theme-animated-tab-circle--border-color--selected) !important;
+          border-color: var(
+            --theme-animated-tab-circle--border-color--selected
+          ) !important;
 
-          cw-icon {
+          ix-icon {
             color: var(--theme-animated-tab-icon--color--selected) !important;
           }
 
           .count {
-            border-color: var(--theme-tab-pill--border-color--selected) !important;
+            border-color: var(
+              --theme-tab-pill--border-color--selected
+            ) !important;
           }
         }
 
         // TODO
         &.disabled,
         &:disabled {
-          cw-icon {
+          ix-icon {
             color: var(--theme-animated-tab-icon--color--disabled) !important;
           }
         }
diff --git a/packages/core/src/components/animated-tabs/animated-tabs.tsx b/packages/core/src/components/animated-tabs/animated-tabs.tsx
index a73b60367cf..0f2bf82cbf8 100644
--- a/packages/core/src/components/animated-tabs/animated-tabs.tsx
+++ b/packages/core/src/components/animated-tabs/animated-tabs.tsx
@@ -2,20 +2,31 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Listen,
+  Prop,
+  State,
+  Watch,
+} from '@stencil/core';
 import anime from 'animejs';
 import Animation from '../utils/animation';
 import { convertToAbbreviationString } from '../utils/rwd.util';
 
 @Component({
-  tag: 'cw-animated-tabs',
+  tag: 'ix-animated-tabs',
   styleUrl: 'animated-tabs.scss',
   scoped: true,
 })
 export class AnimatedTabs {
-  @Element() hostElement: HTMLCwAnimatedTabsElement;
+  @Element() hostElement: HTMLIxAnimatedTabsElement;
 
-  @State() tabs: HTMLCwAnimatedTabElement[];
+  @State() tabs: HTMLIxAnimatedTabElement[];
 
   @State() activeIndex: number;
 
@@ -54,7 +65,7 @@ export class AnimatedTabs {
   }
 
   get animatedTabs() {
-    return Array.from(this.hostElement.querySelectorAll('cw-animated-tab'));
+    return Array.from(this.hostElement.querySelectorAll('ix-animated-tab'));
   }
 
   get tabsContainer() {
@@ -228,14 +239,40 @@ export class AnimatedTabs {
       <Host class={{ 'flex-column-reverse': this.tabPlacement === 'bottom' }}>
         <ul class="tabs-container">
           {this.animatedTabs.map((element, index) => (
-            <li class={{ bottom: this.tabPlacement === 'bottom' }} onClick={() => this.onTabClick(index)} onMouseDown={() => this.onTabMouseDown(index)}>
-              <div class={{ 'tab-container': true, 'selected': this.selectedIndex === index }}>
-                <cw-icon name={element.icon}></cw-icon>
-                {element.count ? <span class={{ count: true, bottom: this.tabPlacement === 'bottom' }}>{convertToAbbreviationString(element.count)}</span> : ''}
+            <li
+              class={{ bottom: this.tabPlacement === 'bottom' }}
+              onClick={() => this.onTabClick(index)}
+              onMouseDown={() => this.onTabMouseDown(index)}
+            >
+              <div
+                class={{
+                  'tab-container': true,
+                  selected: this.selectedIndex === index,
+                }}
+              >
+                <ix-icon name={element.icon}></ix-icon>
+                {element.count ? (
+                  <span
+                    class={{
+                      count: true,
+                      bottom: this.tabPlacement === 'bottom',
+                    }}
+                  >
+                    {convertToAbbreviationString(element.count)}
+                  </span>
+                ) : (
+                  ''
+                )}
               </div>
             </li>
           ))}
-          <div class={{ 'tab-active-underline': true, 'bottom': this.tabPlacement === 'bottom' }} style={{ 'margin-left': `calc(${this.selectedIndex} * 5rem)` }}></div>
+          <div
+            class={{
+              'tab-active-underline': true,
+              bottom: this.tabPlacement === 'bottom',
+            }}
+            style={{ 'margin-left': `calc(${this.selectedIndex} * 5rem)` }}
+          ></div>
         </ul>
         <div class="content-container">
           <slot></slot>
diff --git a/packages/core/src/components/application-header/application-header.tsx b/packages/core/src/components/application-header/application-header.tsx
index c7e38db87fe..5f617227942 100644
--- a/packages/core/src/components/application-header/application-header.tsx
+++ b/packages/core/src/components/application-header/application-header.tsx
@@ -4,7 +4,7 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-application-header',
+  tag: 'ix-application-header',
   styleUrl: 'application-header.scss',
   scoped: true,
 })
@@ -17,7 +17,13 @@ export class CwApplicationHeader {
   render() {
     return (
       <Host>
-        <svg class="logo" width="76" height="12" viewBox="0 0 76 12" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          class="logo"
+          width="76"
+          height="12"
+          viewBox="0 0 76 12"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
             d="M.497 11.545v-2.27c1.292.407 2.435.61 3.43.61 1.373 0 2.06-.363 2.06-1.088 0-.27-.1-.498-.3-.682-.206-.195-.73-.466-1.573-.812C2.6 6.68 1.614 6.15 1.156 5.71.561 5.132.264 4.402.264 3.52c0-1.137.433-2.003 1.3-2.598.855-.59 1.97-.885 3.346-.885.758 0 1.854.14 3.289.419v2.183C7.132 2.213 6.141 2 5.225 2c-1.289 0-1.933.354-1.933 1.064 0 .265.13.481.39.649.216.136.811.422 1.785.86C6.87 5.198 7.804 5.739 8.27 6.2c.552.546.828 1.253.828 2.12 0 1.244-.541 2.194-1.624 2.849-.877.53-2.014.795-3.411.795-1.18 0-2.368-.139-3.565-.418zM10.91.237h3.211V11.73h-3.21V.237zm6.155 11.494V.237H25.3v2.079h-5.14V4.91h4.474v1.896H20.16v2.728h5.272v2.196h-8.367zm10.463 0V.237h4.163l2.892 7.344L37.547.237h3.954V11.73h-3.044V3.593l-3.37 8.255h-1.99L29.79 3.593v8.138h-2.262zm16.918 0V.237h8.234v2.079h-5.14V4.91h4.475v1.896H47.54v2.728h5.273v2.196h-8.368zm10.48 0V.237h3.721l3.948 7.694V.237h2.261V11.73h-3.615l-4.053-7.798v7.798h-2.262zm12.21-.186v-2.27c1.28.407 2.424.61 3.43.61 1.373 0 2.059-.363 2.059-1.088a.903.903 0 0 0-.29-.682c-.207-.195-.734-.466-1.582-.812-1.508-.617-2.495-1.147-2.958-1.592-.594-.573-.891-1.306-.891-2.2 0-1.13.432-1.994 1.299-2.59.855-.59 1.97-.884 3.346-.884.774 0 1.776.123 3.005.37l.284.049v2.183C73.77 2.213 72.776 2 71.856 2c-1.284 0-1.925.354-1.925 1.064 0 .265.13.481.389.649.206.13.804.417 1.794.86 1.392.624 2.324 1.165 2.793 1.625.553.547.829 1.254.829 2.12 0 1.245-.539 2.195-1.616 2.85-.882.53-2.022.795-3.419.795-1.18 0-2.37-.139-3.565-.418z"
             fill="#FFF"
diff --git a/packages/core/src/components/application-header/readme.md b/packages/core/src/components/application-header/readme.md
index 2aa8d1072d4..9a452cc8a89 100644
--- a/packages/core/src/components/application-header/readme.md
+++ b/packages/core/src/components/application-header/readme.md
@@ -1,6 +1,4 @@
-# cw-application-header
-
-
+# ix-application-header
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/application-header/test/basic/index.html b/packages/core/src/components/application-header/test/basic/index.html
index 3dfc72e8199..2f0a52d3cb4 100644
--- a/packages/core/src/components/application-header/test/basic/index.html
+++ b/packages/core/src/components/application-header/test/basic/index.html
@@ -11,7 +11,7 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-application-header name="Test app name"></cw-application-header>
+    <ix-application-header name="Test app name"></ix-application-header>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/application-header/test/cw-application-header.spec.tsx b/packages/core/src/components/application-header/test/cw-application-header.spec.tsx
index a0a7717c432..60b8b4b285f 100644
--- a/packages/core/src/components/application-header/test/cw-application-header.spec.tsx
+++ b/packages/core/src/components/application-header/test/cw-application-header.spec.tsx
@@ -1,19 +1,19 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { CwApplicationHeader } from '../application-header';
 
-describe('cw-application-header', () => {
+describe('ix-application-header', () => {
   it('renders', async () => {
     const page = await newSpecPage({
       components: [CwApplicationHeader],
-      html: `<cw-application-header></cw-application-header>`,
+      html: `<ix-application-header></ix-application-header>`,
     });
     expect(page.root).toEqualHtml(`
-      <cw-application-header>
+      <ix-application-header>
        <svg class="logo" height="12" viewBox="0 0 76 12" width="76" xmlns="http://www.w3.org/2000/svg">
          <path d="M.497 11.545v-2.27c1.292.407 2.435.61 3.43.61 1.373 0 2.06-.363 2.06-1.088 0-.27-.1-.498-.3-.682-.206-.195-.73-.466-1.573-.812C2.6 6.68 1.614 6.15 1.156 5.71.561 5.132.264 4.402.264 3.52c0-1.137.433-2.003 1.3-2.598.855-.59 1.97-.885 3.346-.885.758 0 1.854.14 3.289.419v2.183C7.132 2.213 6.141 2 5.225 2c-1.289 0-1.933.354-1.933 1.064 0 .265.13.481.39.649.216.136.811.422 1.785.86C6.87 5.198 7.804 5.739 8.27 6.2c.552.546.828 1.253.828 2.12 0 1.244-.541 2.194-1.624 2.849-.877.53-2.014.795-3.411.795-1.18 0-2.368-.139-3.565-.418zM10.91.237h3.211V11.73h-3.21V.237zm6.155 11.494V.237H25.3v2.079h-5.14V4.91h4.474v1.896H20.16v2.728h5.272v2.196h-8.367zm10.463 0V.237h4.163l2.892 7.344L37.547.237h3.954V11.73h-3.044V3.593l-3.37 8.255h-1.99L29.79 3.593v8.138h-2.262zm16.918 0V.237h8.234v2.079h-5.14V4.91h4.475v1.896H47.54v2.728h5.273v2.196h-8.368zm10.48 0V.237h3.721l3.948 7.694V.237h2.261V11.73h-3.615l-4.053-7.798v7.798h-2.262zm12.21-.186v-2.27c1.28.407 2.424.61 3.43.61 1.373 0 2.059-.363 2.059-1.088a.903.903 0 0 0-.29-.682c-.207-.195-.734-.466-1.582-.812-1.508-.617-2.495-1.147-2.958-1.592-.594-.573-.891-1.306-.891-2.2 0-1.13.432-1.994 1.299-2.59.855-.59 1.97-.884 3.346-.884.774 0 1.776.123 3.005.37l.284.049v2.183C73.77 2.213 72.776 2 71.856 2c-1.284 0-1.925.354-1.925 1.064 0 .265.13.481.389.649.206.13.804.417 1.794.86 1.392.624 2.324 1.165 2.793 1.625.553.547.829 1.254.829 2.12 0 1.245-.539 2.195-1.616 2.85-.882.53-2.022.795-3.419.795-1.18 0-2.37-.139-3.565-.418z" fill="#FFF" fill-opacity=".85" fill-rule="evenodd"></path>
        </svg>
        <span class="name"></span>
-      </cw-application-header>
+      </ix-application-header>
     `);
   });
 });
diff --git a/packages/core/src/components/basic-navigation/basic-navigation.scss b/packages/core/src/components/basic-navigation/basic-navigation.scss
index c97edf5d745..8474e2a0c13 100644
--- a/packages/core/src/components/basic-navigation/basic-navigation.scss
+++ b/packages/core/src/components/basic-navigation/basic-navigation.scss
@@ -10,7 +10,7 @@
 
   flex-direction: column;
 
-  cw-application-header {
+  ix-application-header {
     z-index: calc(var(--theme-z-index-sticky) + 1);
   }
 
diff --git a/packages/core/src/components/basic-navigation/basic-navigation.tsx b/packages/core/src/components/basic-navigation/basic-navigation.tsx
index 253c95499c6..b46843b21e2 100644
--- a/packages/core/src/components/basic-navigation/basic-navigation.tsx
+++ b/packages/core/src/components/basic-navigation/basic-navigation.tsx
@@ -5,12 +5,12 @@
 import { Component, Element, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-basic-navigation',
+  tag: 'ix-basic-navigation',
   styleUrl: 'basic-navigation.scss',
   scoped: true,
 })
 export class BasicNavigation {
-  @Element() hostElement: HTMLCwBasicNavigationElement;
+  @Element() hostElement: HTMLIxBasicNavigationElement;
 
   /**
    * Application name
@@ -22,8 +22,8 @@ export class BasicNavigation {
    */
   @Prop() hideHeader = false;
 
-  get menu(): HTMLCwMenuElement {
-    return this.hostElement.querySelector('cw-menu');
+  get menu(): HTMLIxMenuElement {
+    return this.hostElement.querySelector('ix-menu');
   }
 
   componentDidRender() {
@@ -51,7 +51,11 @@ export class BasicNavigation {
           'hide-header': this.hideHeader,
         }}
       >
-        {!this.hideHeader ? <cw-application-header name={this.applicationName}></cw-application-header> : null}
+        {!this.hideHeader ? (
+          <ix-application-header
+            name={this.applicationName}
+          ></ix-application-header>
+        ) : null}
         <div id="menu-placeholder"></div>
         <div class="content" onClick={() => this.menu.toggleMenu(false)}>
           <slot></slot>
diff --git a/packages/core/src/components/basic-navigation/readme.md b/packages/core/src/components/basic-navigation/readme.md
index 7a169b4eba4..e50955044af 100644
--- a/packages/core/src/components/basic-navigation/readme.md
+++ b/packages/core/src/components/basic-navigation/readme.md
@@ -1,6 +1,4 @@
-# cw-basic-navigation
-
-
+# ix-basic-navigation
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/basic-navigation/test/basic/index.html b/packages/core/src/components/basic-navigation/test/basic/index.html
index 8fd58acc7c1..7805c03b0ad 100644
--- a/packages/core/src/components/basic-navigation/test/basic/index.html
+++ b/packages/core/src/components/basic-navigation/test/basic/index.html
@@ -11,13 +11,13 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-basic-navigation>
-      <cw-menu>
-        <cw-menu-item tab-icon="star">Item 1</cw-menu-item>
-        <cw-menu-item tab-icon="print">Item 2</cw-menu-item>
-      </cw-menu>
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-item tab-icon="star">Item 1</ix-menu-item>
+        <ix-menu-item tab-icon="print">Item 2</ix-menu-item>
+      </ix-menu>
       <main>Example content</main>
-    </cw-basic-navigation>
+    </ix-basic-navigation>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/blind/blind.scss b/packages/core/src/components/blind/blind.scss
index e509b328084..db6d4c81738 100644
--- a/packages/core/src/components/blind/blind.scss
+++ b/packages/core/src/components/blind/blind.scss
@@ -2,16 +2,17 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/fonts';
-@import '../../../scss/v7/mixins/hover';
-@import '../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/fonts';
+@import 'mixins/hover';
+@import 'mixins/text-truncation';
 
 :host {
   display: flex;
   flex-direction: column;
   background-color: var(--theme-blind-base--background);
-  border: solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);
+  border: solid var(--theme-blind--border-thickness)
+    var(--theme-blind-base--border-color);
   border-radius: var(--theme-blind--border-radius);
   overflow: hidden;
 
@@ -23,7 +24,8 @@
     min-height: 3rem;
     height: 3rem;
     border: solid var(--theme-blind--border-thickness) transparent;
-    border-radius: var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;
+    border-radius: var(--theme-blind--border-radius)
+      var(--theme-blind--border-radius) 0 0;
     padding-right: $default-space;
     transition: border-radius $default-time;
     cursor: pointer;
diff --git a/packages/core/src/components/blind/blind.tsx b/packages/core/src/components/blind/blind.tsx
index fb2089e4655..11b191f4f81 100644
--- a/packages/core/src/components/blind/blind.tsx
+++ b/packages/core/src/components/blind/blind.tsx
@@ -2,11 +2,20 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+  Watch,
+} from '@stencil/core';
 import anime from 'animejs';
 
 @Component({
-  tag: 'cw-blind',
+  tag: 'ix-blind',
   styleUrl: 'blind.scss',
   scoped: true,
 })
@@ -26,7 +35,7 @@ export class Blind {
    */
   @Event() collapsedChange: EventEmitter<boolean>;
 
-  @Element() hostElement!: HTMLCwBlindElement;
+  @Element() hostElement!: HTMLIxBlindElement;
 
   private chevronRef: HTMLElement;
 
@@ -97,23 +106,29 @@ export class Blind {
         <div
           class={{
             'blind-header': true,
-            'closed': this.collapsed,
+            closed: this.collapsed,
           }}
-          onClick={e => this.onHeaderClick(e)}
+          onClick={(e) => this.onHeaderClick(e)}
         >
           <span
-            ref={ref => (this.chevronRef = ref)}
+            ref={(ref) => (this.chevronRef = ref)}
             class={{
-              'glyph': true,
+              glyph: true,
               'glyph-chevron-right-small': true,
             }}
           ></span>
-          <div class="blind-header-title">{this.label !== undefined ? <span class="blind-header-title-default">{this.label}</span> : <slot name="custom-header"></slot>}</div>
+          <div class="blind-header-title">
+            {this.label !== undefined ? (
+              <span class="blind-header-title-default">{this.label}</span>
+            ) : (
+              <slot name="custom-header"></slot>
+            )}
+          </div>
         </div>
         <div
           class={{
             'blind-content': true,
-            'hide': this.collapsed,
+            hide: this.collapsed,
           }}
         >
           <slot></slot>
diff --git a/packages/core/src/components/blind/readme.md b/packages/core/src/components/blind/readme.md
index 03bb0eb24e3..204cd7809de 100644
--- a/packages/core/src/components/blind/readme.md
+++ b/packages/core/src/components/blind/readme.md
@@ -1,6 +1,4 @@
-# cw-blind
-
-
+# ix-blind
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/blind/test/basic/index.html b/packages/core/src/components/blind/test/basic/index.html
index d27a87d1349..ac5bbae02e7 100644
--- a/packages/core/src/components/blind/test/basic/index.html
+++ b/packages/core/src/components/blind/test/basic/index.html
@@ -11,9 +11,9 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-blind label="Some label">
+    <ix-blind label="Some label">
       <div>Content!</div>
-    </cw-blind>
+    </ix-blind>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/breadcrumb-item/breadcrumb-item.tsx b/packages/core/src/components/breadcrumb-item/breadcrumb-item.tsx
index 1009521ebbe..a6db99fe430 100644
--- a/packages/core/src/components/breadcrumb-item/breadcrumb-item.tsx
+++ b/packages/core/src/components/breadcrumb-item/breadcrumb-item.tsx
@@ -5,7 +5,7 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-breadcrumb-item',
+  tag: 'ix-breadcrumb-item',
   styleUrl: 'breadcrumb-item.scss',
   scoped: true,
 })
diff --git a/packages/core/src/components/breadcrumb-item/readme.md b/packages/core/src/components/breadcrumb-item/readme.md
index 9b26ebfb458..b8f47c6f119 100644
--- a/packages/core/src/components/breadcrumb-item/readme.md
+++ b/packages/core/src/components/breadcrumb-item/readme.md
@@ -1,6 +1,4 @@
-# cw-breadcrumb-item
-
-
+# ix-breadcrumb-item
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/breadcrumb/breadcrumb.scss b/packages/core/src/components/breadcrumb/breadcrumb.scss
index 3d82746d149..2aa82515f63 100644
--- a/packages/core/src/components/breadcrumb/breadcrumb.scss
+++ b/packages/core/src/components/breadcrumb/breadcrumb.scss
@@ -2,9 +2,9 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import './../../../scss/v7/common-variables';
-@import './../../../scss/v7/mixins/hover';
-@import './../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/hover';
+@import 'mixins/text-truncation';
 
 @mixin breadcrumb($variant) {
   .crumb.#{$variant} {
@@ -27,7 +27,9 @@
 
     &.clickable:not(.remove-hover) {
       @include hover {
-        background-color: var(--theme-breadcrumb-#{$variant}--background--hover);
+        background-color: var(
+          --theme-breadcrumb-#{$variant}--background--hover
+        );
 
         .crumb-text,
         .glyph {
@@ -40,7 +42,9 @@
       }
 
       @include active {
-        background-color: var(--theme-breadcrumb-#{$variant}--background--active);
+        background-color: var(
+          --theme-breadcrumb-#{$variant}--background--active
+        );
 
         .crumb-text,
         .glyph {
@@ -85,7 +89,7 @@
       min-width: 0;
       font-weight: $font-weight-bold;
 
-      cw-icon {
+      ix-icon {
         margin-inline-end: $tiny-space;
       }
     }
diff --git a/packages/core/src/components/breadcrumb/breadcrumb.tsx b/packages/core/src/components/breadcrumb/breadcrumb.tsx
index 72fed70f9db..a4b9a3d7eaa 100644
--- a/packages/core/src/components/breadcrumb/breadcrumb.tsx
+++ b/packages/core/src/components/breadcrumb/breadcrumb.tsx
@@ -2,12 +2,21 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+  State,
+} from '@stencil/core';
 import animejs from 'animejs';
 import { createMutationObserver } from '../utils/mutation-observer';
 
 @Component({
-  tag: 'cw-breadcrumb',
+  tag: 'ix-breadcrumb',
   styleUrl: 'breadcrumb.scss',
   scoped: true,
 })
@@ -41,10 +50,10 @@ export class Breadcrumb {
 
   @State() nextButtonRef: HTMLElement;
 
-  @Element() hostElement: HTMLCwBreadcrumbElement;
+  @Element() hostElement: HTMLIxBreadcrumbElement;
 
   get cwBreadcrumbItems() {
-    return Array.from(this.hostElement.querySelectorAll('cw-breadcrumb-item'));
+    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));
   }
 
   get crumbItems() {
@@ -74,10 +83,13 @@ export class Breadcrumb {
       }
     });
 
-    this.mutationObserver.observe(this.hostElement.querySelector('.crumb-items'), {
-      subtree: true,
-      childList: true,
-    });
+    this.mutationObserver.observe(
+      this.hostElement.querySelector('.crumb-items'),
+      {
+        subtree: true,
+        childList: true,
+      }
+    );
   }
 
   componentWillLoad() {
@@ -85,7 +97,7 @@ export class Breadcrumb {
   }
 
   private getItems() {
-    return this.cwBreadcrumbItems.map(item => {
+    return this.cwBreadcrumbItems.map((item) => {
       return { label: item.label, icon: item.icon };
     });
   }
@@ -147,24 +159,26 @@ export class Breadcrumb {
       const isLastItem = last && !this.nextItems?.length;
       return (
         <div
-          ref={ref => this.handleLastButtonRef(ref, last)}
+          ref={(ref) => this.handleLastButtonRef(ref, last)}
           data-breadcrumb={index}
           class={{
-            'crumb': true,
-            'clickable': true,
-            'ghost': this.ghost,
-            'btn': !this.ghost,
-            'last': isLastItem,
+            crumb: true,
+            clickable: true,
+            ghost: this.ghost,
+            btn: !this.ghost,
+            last: isLastItem,
             'remove-hover': isLastItem,
           }}
           onClick={() => this.clickItem(item.label, last)}
           data-testid="item"
         >
           <span class="crumb-text remove-anchor">
-            {item.icon ? <cw-icon name={item.icon} size="16"></cw-icon> : ''}
+            {item.icon ? <ix-icon name={item.icon} size="16"></ix-icon> : ''}
             {item.label}
           </span>
-          {!isLastItem ? <span class="glyph glyph-16 glyph-chevron-right-small text-default-text"></span> : null}
+          {!isLastItem ? (
+            <span class="glyph glyph-16 glyph-chevron-right-small text-default-text"></span>
+          ) : null}
         </div>
       );
     });
@@ -173,13 +187,27 @@ export class Breadcrumb {
   render() {
     return (
       <Host>
-        <cw-dropdown trigger={this.items?.length > this.visibleItemCount ? this.previousButtonRef : null}>
-          {this.items.slice(0, this.items.length - this.visibleItemCount).map(item => (
-            <cw-dropdown-item label={item.label} onClick={() => this.onItemClick(item.label)}></cw-dropdown-item>
-          ))}
-        </cw-dropdown>
+        <ix-dropdown
+          trigger={
+            this.items?.length > this.visibleItemCount
+              ? this.previousButtonRef
+              : null
+          }
+        >
+          {this.items
+            .slice(0, this.items.length - this.visibleItemCount)
+            .map((item) => (
+              <ix-dropdown-item
+                label={item.label}
+                onClick={() => this.onItemClick(item.label)}
+              ></ix-dropdown-item>
+            ))}
+        </ix-dropdown>
         {this.items?.length > this.visibleItemCount ? (
-          <div class="crumb crumb-dropdown" ref={ref => (this.previousButtonRef = ref)}>
+          <div
+            class="crumb crumb-dropdown"
+            ref={(ref) => (this.previousButtonRef = ref)}
+          >
             <span class="remove-anchor more-text">
               <span class="more-text-ellipsis">...</span>
               <span class="glyph glyph-16 glyph-chevron-right"></span>
@@ -190,19 +218,19 @@ export class Breadcrumb {
           {this.renderBreadcrumbItems()}
           <slot></slot>
         </div>
-        <cw-dropdown trigger={this.nextButtonRef}>
-          {this.nextItems?.map(item => (
-            <cw-dropdown-item
+        <ix-dropdown trigger={this.nextButtonRef}>
+          {this.nextItems?.map((item) => (
+            <ix-dropdown-item
               label={item}
-              onClick={e => {
+              onClick={(e) => {
                 this.nextClick.emit({
                   event: e,
                   item,
                 });
               }}
-            ></cw-dropdown-item>
+            ></ix-dropdown-item>
           ))}
-        </cw-dropdown>
+        </ix-dropdown>
       </Host>
     );
   }
diff --git a/packages/core/src/components/breadcrumb/test/__snapshots__/cw-breadcrumb.spec.tsx.snap b/packages/core/src/components/breadcrumb/test/__snapshots__/cw-breadcrumb.spec.tsx.snap
index 4ac1388c830..92c4c8668da 100644
--- a/packages/core/src/components/breadcrumb/test/__snapshots__/cw-breadcrumb.spec.tsx.snap
+++ b/packages/core/src/components/breadcrumb/test/__snapshots__/cw-breadcrumb.spec.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`cw-breadcrumb renders 1`] = `
-<cw-breadcrumb>
+exports[`ix-breadcrumb renders 1`] = `
+<ix-breadcrumb>
   <!---->
-  <cw-dropdown></cw-dropdown>
+  <ix-dropdown></ix-dropdown>
   <div class="crumb-items">
     <div class="clickable crumb" data-breadcrumb="0" data-testid="item">
       <span class="crumb-text remove-anchor"></span>
@@ -20,14 +20,14 @@ exports[`cw-breadcrumb renders 1`] = `
     <div class="clickable crumb last remove-hover" data-breadcrumb="3" data-testid="item">
       <span class="crumb-text remove-anchor"></span>
     </div>
-    <cw-breadcrumb-item label="Test 1">
-      <cw-breadcrumb-item label="Test 2">
-        <cw-breadcrumb-item label="Test 3">
-          <cw-breadcrumb-item label="Test 4"></cw-breadcrumb-item>
-        </cw-breadcrumb-item>
-      </cw-breadcrumb-item>
-    </cw-breadcrumb-item>
+    <ix-breadcrumb-item label="Test 1">
+      <ix-breadcrumb-item label="Test 2">
+        <ix-breadcrumb-item label="Test 3">
+          <ix-breadcrumb-item label="Test 4"></ix-breadcrumb-item>
+        </ix-breadcrumb-item>
+      </ix-breadcrumb-item>
+    </ix-breadcrumb-item>
   </div>
-  <cw-dropdown></cw-dropdown>
-</cw-breadcrumb>
+  <ix-dropdown></ix-dropdown>
+</ix-breadcrumb>
 `;
diff --git a/packages/core/src/components/breadcrumb/test/basic/index.html b/packages/core/src/components/breadcrumb/test/basic/index.html
index 6b78b4bb24e..73a3b482b13 100644
--- a/packages/core/src/components/breadcrumb/test/basic/index.html
+++ b/packages/core/src/components/breadcrumb/test/basic/index.html
@@ -11,17 +11,17 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-breadcrumb>
-      <cw-breadcrumb-item icon="home" label="Root"></cw-breadcrumb-item>
-      <cw-breadcrumb-item label="Level 1"></cw-breadcrumb-item>
-      <cw-breadcrumb-item label="Level 2"></cw-breadcrumb-item>
-    </cw-breadcrumb>
+    <ix-breadcrumb>
+      <ix-breadcrumb-item icon="home" label="Root"></ix-breadcrumb-item>
+      <ix-breadcrumb-item label="Level 1"></ix-breadcrumb-item>
+      <ix-breadcrumb-item label="Level 2"></ix-breadcrumb-item>
+    </ix-breadcrumb>
 
-    <cw-breadcrumb ghost>
-      <cw-breadcrumb-item icon="home" label="Root"></cw-breadcrumb-item>
-      <cw-breadcrumb-item label="Level 1"></cw-breadcrumb-item>
-      <cw-breadcrumb-item label="Level 2"></cw-breadcrumb-item>
-    </cw-breadcrumb>
+    <ix-breadcrumb ghost>
+      <ix-breadcrumb-item icon="home" label="Root"></ix-breadcrumb-item>
+      <ix-breadcrumb-item label="Level 1"></ix-breadcrumb-item>
+      <ix-breadcrumb-item label="Level 2"></ix-breadcrumb-item>
+    </ix-breadcrumb>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/breadcrumb/test/cw-breadcrumb.spec.tsx b/packages/core/src/components/breadcrumb/test/cw-breadcrumb.spec.tsx
index b1ca0801811..d57ab310d5f 100644
--- a/packages/core/src/components/breadcrumb/test/cw-breadcrumb.spec.tsx
+++ b/packages/core/src/components/breadcrumb/test/cw-breadcrumb.spec.tsx
@@ -10,13 +10,13 @@ import { createMutationObserver } from './../../utils/mutation-observer';
 jest.mock('./../../utils/mutation-observer');
 jest.mock('animejs');
 
-describe('cw-breadcrumb', () => {
+describe('ix-breadcrumb', () => {
   let observerCallback: Function;
   let page: any;
 
   beforeEach(async () => {
     //@ts-ignore
-    createMutationObserver = jest.fn(callback => {
+    createMutationObserver = jest.fn((callback) => {
       observerCallback = callback;
       return {
         observe: jest.fn(),
@@ -25,12 +25,12 @@ describe('cw-breadcrumb', () => {
     page = await newSpecPage({
       components: [Breadcrumb],
       html: `
-        <cw-breadcrumb>
-          <cw-breadcrumb-item label="Test 1" />
-          <cw-breadcrumb-item label="Test 2" />
-          <cw-breadcrumb-item label="Test 3" />
-          <cw-breadcrumb-item label="Test 4" />
-        </cw-breadcrumb>
+        <ix-breadcrumb>
+          <ix-breadcrumb-item label="Test 1" />
+          <ix-breadcrumb-item label="Test 2" />
+          <ix-breadcrumb-item label="Test 3" />
+          <ix-breadcrumb-item label="Test 4" />
+        </ix-breadcrumb>
       `,
     });
   });
diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
index 9b38b04968f..8a0731db987 100644
--- a/packages/core/src/components/button/button.tsx
+++ b/packages/core/src/components/button/button.tsx
@@ -6,7 +6,7 @@ import { Buttons } from '../utils/button-variants';
 import { getButtonClasses } from './base-button';
 
 @Component({
-  tag: 'cw-button',
+  tag: 'ix-button',
   scoped: true,
   styleUrl: './button.scss',
 })
diff --git a/packages/core/src/components/button/readme.md b/packages/core/src/components/button/readme.md
index 9d4f5ea0fbc..d20f9079307 100644
--- a/packages/core/src/components/button/readme.md
+++ b/packages/core/src/components/button/readme.md
@@ -1,6 +1,4 @@
-# cw-button
-
-
+# ix-button
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/button/test/basic/index.html b/packages/core/src/components/button/test/basic/index.html
index 18ab7043515..71515780f8e 100644
--- a/packages/core/src/components/button/test/basic/index.html
+++ b/packages/core/src/components/button/test/basic/index.html
@@ -11,7 +11,7 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-button>Hallo</cw-button>
+    <ix-button>Hallo</ix-button>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/button/test/button-group/index.html b/packages/core/src/components/button/test/button-group/index.html
index 0cc3e1f8ef7..e2feae348b6 100644
--- a/packages/core/src/components/button/test/button-group/index.html
+++ b/packages/core/src/components/button/test/button-group/index.html
@@ -12,9 +12,9 @@
   </head>
   <body>
     <div class="btn-group">
-      <cw-button outline>Left</cw-button>
-      <cw-button>Middle</cw-button>
-      <cw-button outline>Right</cw-button>
+      <ix-button outline>Left</ix-button>
+      <ix-button>Middle</ix-button>
+      <ix-button outline>Right</ix-button>
     </div>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
diff --git a/packages/core/src/components/category-filter/category-filter.scss b/packages/core/src/components/category-filter/category-filter.scss
index b44b9897afa..b26f8924e74 100644
--- a/packages/core/src/components/category-filter/category-filter.scss
+++ b/packages/core/src/components/category-filter/category-filter.scss
@@ -1,7 +1,7 @@
 /**
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-@import 'variables';
+@import 'common-variables';
 @import 'mixins/fonts';
 @import 'mixins/hover';
 @import 'mixins/shadows';
@@ -69,13 +69,13 @@
     overflow-y: auto;
   }
 
-  cw-icon {
+  ix-icon {
     position: absolute;
     top: $small-space;
     left: $small-space;
   }
 
-  cw-filter-chip {
+  ix-filter-chip {
     margin-right: $small-space;
   }
 
@@ -125,7 +125,8 @@
     }
 
     .category-item {
-      @include generic-mouse-states;
+      // Needs to be replaced https://***REMOVED***/siemens-ix/siemens-ix/-/issues/1
+      // @include generic-mouse-states;
       cursor: pointer;
     }
 
diff --git a/packages/core/src/components/category-filter/category-filter.tsx b/packages/core/src/components/category-filter/category-filter.tsx
index 82487d572ff..e54d71dcafd 100644
--- a/packages/core/src/components/category-filter/category-filter.tsx
+++ b/packages/core/src/components/category-filter/category-filter.tsx
@@ -2,14 +2,25 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Listen,
+  Prop,
+  State,
+  Watch,
+} from '@stencil/core';
 import { convertToRemString } from '../utils/rwd.util';
 import { FilterState } from './filter-state';
 import { InputState } from './input-state';
 import { LogicalFilterOperator } from './logical-filter-operator';
 
 @Component({
-  tag: 'cw-category-filter',
+  tag: 'ix-category-filter',
   styleUrl: 'category-filter.scss',
   scoped: true,
 })
@@ -20,14 +31,18 @@ export class CwCategoryFilter {
   private formElement?: HTMLFormElement;
   private isScrollStateDirty: boolean;
 
-  @Element() hostElement: HTMLCwCategoryFilterElement;
+  @Element() hostElement: HTMLIxCategoryFilterElement;
 
   @State() hasFocus: boolean;
   @State() showCategorySelection: boolean;
   @State() categoryLogicalOperator = LogicalFilterOperator.EQUAL;
   @State() inputValue: string;
   @State() category: string;
-  @State() filterTokens: Array<{ id: string; value: string; operator: LogicalFilterOperator }> = [];
+  @State() filterTokens: Array<{
+    id: string;
+    value: string;
+    operator: LogicalFilterOperator;
+  }> = [];
   @State() offsetDropdownX: string;
   @State() offsetDropdownY: string;
   @State() maxHeightDropdown: string;
@@ -150,16 +165,24 @@ export class CwCategoryFilter {
       this.setFilterState(this.filterState);
     }
 
-    this.hostElement?.addEventListener('keydown', this.handleFormElementKeyDown.bind(this));
+    this.hostElement?.addEventListener(
+      'keydown',
+      this.handleFormElementKeyDown.bind(this)
+    );
 
-    this.formElement?.addEventListener('submit', e => e.preventDefault());
+    this.formElement?.addEventListener('submit', (e) => e.preventDefault());
 
     if (this.textInput == null) {
-      console.warn('Core UI category filter - unable to add event listeners to native input element');
+      console.warn(
+        'Core UI category filter - unable to add event listeners to native input element'
+      );
       return;
     }
 
-    this.textInput.addEventListener('click', () => (this.showCategorySelection = true));
+    this.textInput.addEventListener(
+      'click',
+      () => (this.showCategorySelection = true)
+    );
     this.textInput.addEventListener('focusin', () => {
       this.hasFocus = true;
     });
@@ -170,14 +193,22 @@ export class CwCategoryFilter {
       this.inputChanged.emit(inputState);
       this.showCategorySelection = true;
     });
-    this.textInput.addEventListener('keydown', this.handleInputElementKeyDown.bind(this));
+    this.textInput.addEventListener(
+      'keydown',
+      this.handleInputElementKeyDown.bind(this)
+    );
   }
 
   private setFilterState(state: FilterState) {
     this.filterTokens = [];
 
     for (const token of state.tokens) {
-      this.addToken(token, this.ID_CUSTOM_FILTER_VALUE, this.categoryLogicalOperator, false);
+      this.addToken(
+        token,
+        this.ID_CUSTOM_FILTER_VALUE,
+        this.categoryLogicalOperator,
+        false
+      );
     }
 
     for (const category of state.categories) {
@@ -204,11 +235,16 @@ export class CwCategoryFilter {
     switch (e.code) {
       case 'Enter':
       case 'NumpadEnter':
-        if (this.category || document.activeElement.classList.contains('plain-text-suggestion')) {
+        if (
+          this.category ||
+          document.activeElement.classList.contains('plain-text-suggestion')
+        ) {
           const token = document.activeElement.getAttribute('data-id');
 
           this.addToken(token, this.category);
-        } else if (document.activeElement.classList.contains('category-item-id')) {
+        } else if (
+          document.activeElement.classList.contains('category-item-id')
+        ) {
           this.selectCategory(document.activeElement.getAttribute('data-id'));
         }
         e.preventDefault();
@@ -287,8 +323,12 @@ export class CwCategoryFilter {
   }
 
   private emitFilterEvent() {
-    const tokens = this.filterTokens.filter(item => item.id === this.ID_CUSTOM_FILTER_VALUE).map(item => item.value);
-    const categories = this.filterTokens.filter(item => item.id !== this.ID_CUSTOM_FILTER_VALUE);
+    const tokens = this.filterTokens
+      .filter((item) => item.id === this.ID_CUSTOM_FILTER_VALUE)
+      .map((item) => item.value);
+    const categories = this.filterTokens.filter(
+      (item) => item.id !== this.ID_CUSTOM_FILTER_VALUE
+    );
     const filterState: FilterState = {
       tokens,
       categories,
@@ -297,7 +337,12 @@ export class CwCategoryFilter {
     this.filterChanged.emit(filterState);
   }
 
-  private addToken(token: string, category: string = this.ID_CUSTOM_FILTER_VALUE, operator = this.categoryLogicalOperator, emitEvent = true) {
+  private addToken(
+    token: string,
+    category: string = this.ID_CUSTOM_FILTER_VALUE,
+    operator = this.categoryLogicalOperator,
+    emitEvent = true
+  ) {
     if (token === undefined || token === null) {
       return;
     }
@@ -308,7 +353,7 @@ export class CwCategoryFilter {
       return;
     }
 
-    if (this.filterTokens.find(value => value?.value === newToken)) {
+    if (this.filterTokens.find((value) => value?.value === newToken)) {
       return;
     }
 
@@ -346,7 +391,7 @@ export class CwCategoryFilter {
   }
 
   private getCategoryLables() {
-    return this.getCategoryIds().map(id => this.categories[id].label);
+    return this.getCategoryIds().map((id) => this.categories[id].label);
   }
 
   private selectCategory(category: string) {
@@ -396,13 +441,17 @@ export class CwCategoryFilter {
       return true;
     }
 
-    const isCategoryAlreadySet = this.filterTokens.find(token => token.id === value);
+    const isCategoryAlreadySet = this.filterTokens.find(
+      (token) => token.id === value
+    );
 
     return !isCategoryAlreadySet;
   }
 
   private filterDuplicateTokens(value: string) {
-    const isTokenAlreadySet = this.filterTokens.some(token => token.value === value);
+    const isTokenAlreadySet = this.filterTokens.some(
+      (token) => token.value === value
+    );
     return !isTokenAlreadySet;
   }
 
@@ -426,13 +475,21 @@ export class CwCategoryFilter {
     }
   }
 
-  private getFilterChipLabel(value: { id: string; value: string; operator: LogicalFilterOperator }): string {
+  private getFilterChipLabel(value: {
+    id: string;
+    value: string;
+    operator: LogicalFilterOperator;
+  }): string {
     if (value.id === this.ID_CUSTOM_FILTER_VALUE) {
       return value.value;
     }
 
-    const operatorString = value.operator === LogicalFilterOperator.EQUAL ? '=' : '!=';
-    const label = this.categories[value.id]?.label ?? this.nonSelectableCategories[value.id] ?? value.id;
+    const operatorString =
+      value.operator === LogicalFilterOperator.EQUAL ? '=' : '!=';
+    const label =
+      this.categories[value.id]?.label ??
+      this.nonSelectableCategories[value.id] ??
+      value.id;
 
     return `${label} ${operatorString} ${value.value}`;
   }
@@ -442,7 +499,8 @@ export class CwCategoryFilter {
     const newOffsetY = this.calculateDropdownY();
     const newOffsetXRem = convertToRemString(newOffsetX);
     const newOffsetYRem = convertToRemString(newOffsetY);
-    const maxWidthDropdown = this.hostElement.getBoundingClientRect().width - newOffsetX;
+    const maxWidthDropdown =
+      this.hostElement.getBoundingClientRect().width - newOffsetX;
     const maxHeightDropdown = this.calculateDropdownHeight(newOffsetY);
     this.maxWidthDropdown = convertToRemString(maxWidthDropdown);
     this.maxHeightDropdown = convertToRemString(maxHeightDropdown);
@@ -468,9 +526,20 @@ export class CwCategoryFilter {
   render() {
     return (
       <Host>
-        <form ref={el => (this.formElement = el)}>
-          <div class={{ 'form-control': true, 'input-container': true, 'focus': this.hasFocus, 'no-icon': this.hideIcon }}>
-            <cw-icon class={{ 'd-none': this.hideIcon }} name={this.icon} size="16"></cw-icon>
+        <form ref={(el) => (this.formElement = el)}>
+          <div
+            class={{
+              'form-control': true,
+              'input-container': true,
+              focus: this.hasFocus,
+              'no-icon': this.hideIcon,
+            }}
+          >
+            <ix-icon
+              class={{ 'd-none': this.hideIcon }}
+              name={this.icon}
+              size="16"
+            ></ix-icon>
             <div class="token-container">
               <ul class="list-unstyled">
                 {this.filterTokens.map((value, index) => (
@@ -480,16 +549,31 @@ export class CwCategoryFilter {
                       animate__fadein: true,
                     }}
                   >
-                    <cw-filter-chip onCloseClick={() => this.removeToken(index)}>{this.getFilterChipLabel(value)}</cw-filter-chip>
+                    <ix-filter-chip
+                      onCloseClick={() => this.removeToken(index)}
+                    >
+                      {this.getFilterChipLabel(value)}
+                    </ix-filter-chip>
                   </li>
                 ))}
-                {this.categories === undefined ? '' : <li class={{ 'category-preview': true, 'd-none': !this.category }}>{this.categories[this.category]?.label}</li>}
+                {this.categories === undefined ? (
+                  ''
+                ) : (
+                  <li
+                    class={{
+                      'category-preview': true,
+                      'd-none': !this.category,
+                    }}
+                  >
+                    {this.categories[this.category]?.label}
+                  </li>
+                )}
                 <input
                   class={{
                     'text-input': true,
                     'hide-placeholder': this.category !== undefined,
                   }}
-                  ref={el => (this.textInput = el)}
+                  ref={(el) => (this.textInput = el)}
                   type="text"
                   placeholder={this.placeholder}
                   onFocus={() => this.openCategorySelection()}
@@ -498,7 +582,7 @@ export class CwCategoryFilter {
             </div>
             <button
               class={{
-                'btn': true,
+                btn: true,
                 'btn-invisible-secondary': true,
                 'btn-oval': true,
                 'btn-close': true,
@@ -515,28 +599,44 @@ export class CwCategoryFilter {
         <div
           class={{
             'category-selection-container': true,
-            'd-none': !this.showCategorySelection && this.category === undefined,
+            'd-none':
+              !this.showCategorySelection && this.category === undefined,
+          }}
+          style={{
+            left: this.offsetDropdownX,
+            top: this.offsetDropdownY,
+            'max-width': this.maxWidthDropdown,
+            'max-height': this.maxHeightDropdown,
           }}
-          style={{ 'left': this.offsetDropdownX, 'top': this.offsetDropdownY, 'max-width': this.maxWidthDropdown, 'max-height': this.maxHeightDropdown }}
         >
           <div
             class={{
-              'd-none': !this.showCategorySelection || this.category !== undefined,
+              'd-none':
+                !this.showCategorySelection || this.category !== undefined,
             }}
           >
             <div
               class={{
                 'category-item-header': true,
-                'd-none': this.getCategoryLables().filter(value => this.filterByInput(value)).length === 0,
+                'd-none':
+                  this.getCategoryLables().filter((value) =>
+                    this.filterByInput(value)
+                  ).length === 0,
               }}
             >
               {this.labelCategories}
             </div>
             {this.getCategoryIds()
-              ?.filter(id => this.filterByInput(this.categories[id].label))
-              .filter(id => this.filterMultiples(id))
-              .map(id => (
-                <div data-id={id} title={id} class="category-item category-item-id" onClick={() => this.selectCategory(id)} tabindex="0">
+              ?.filter((id) => this.filterByInput(this.categories[id].label))
+              .filter((id) => this.filterMultiples(id))
+              .map((id) => (
+                <div
+                  data-id={id}
+                  title={id}
+                  class="category-item category-item-id"
+                  onClick={() => this.selectCategory(id)}
+                  tabindex="0"
+                >
                   {this.categories[id]?.label}
                 </div>
               ))}
@@ -547,18 +647,41 @@ export class CwCategoryFilter {
               'd-none': this.category === undefined,
             }}
           >
-            <button class="btn btn-invisible-secondary btn-icon" onClick={() => this.toggleCategoryOperator()} tabindex="-1">
-              {this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL ? '=' : '!='}
+            <button
+              class="btn btn-invisible-secondary btn-icon"
+              onClick={() => this.toggleCategoryOperator()}
+              tabindex="-1"
+            >
+              {this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL
+                ? '='
+                : '!='}
             </button>
-            {this.categories === undefined ? '' : <div class="category-item-header">{this.categories[this.category]?.label}</div>}
+            {this.categories === undefined ? (
+              ''
+            ) : (
+              <div class="category-item-header">
+                {this.categories[this.category]?.label}
+              </div>
+            )}
             {this.categories === undefined
               ? ''
               : this.categories[this.category]?.options
-                  .filter(value => this.filterByInput(value))
-                  .filter(value => this.filterDuplicateTokens(value))
-                  .map(id => (
-                    <div data-id={id} title={id} class="category-item category-item-value" onClick={() => this.addToken(id, this.category)} tabindex="0">
-                      {`${this.categoryLogicalOperator === LogicalFilterOperator.EQUAL ? '=' : '!='} ${id}`}
+                  .filter((value) => this.filterByInput(value))
+                  .filter((value) => this.filterDuplicateTokens(value))
+                  .map((id) => (
+                    <div
+                      data-id={id}
+                      title={id}
+                      class="category-item category-item-value"
+                      onClick={() => this.addToken(id, this.category)}
+                      tabindex="0"
+                    >
+                      {`${
+                        this.categoryLogicalOperator ===
+                        LogicalFilterOperator.EQUAL
+                          ? '='
+                          : '!='
+                      } ${id}`}
                     </div>
                   ))}
           </div>
@@ -566,17 +689,31 @@ export class CwCategoryFilter {
           <div
             class={{
               'category-item-header': true,
-              'd-none': this.category !== undefined || this.getCategoryIds().filter(value => this.filterByInput(value)).length > 0,
+              'd-none':
+                this.category !== undefined ||
+                this.getCategoryIds().filter((value) =>
+                  this.filterByInput(value)
+                ).length > 0,
             }}
           >
             {this.i18nPlainText}
           </div>
-          <div class={{ 'd-none': !this.suggestions?.length || this.category !== undefined }}>
+          <div
+            class={{
+              'd-none':
+                !this.suggestions?.length || this.category !== undefined,
+            }}
+          >
             {this.suggestions
-              ?.filter(value => this.filterByInput(value))
-              .filter(value => this.filterDuplicateTokens(value))
-              .map(suggestion => (
-                <div data-id={suggestion} class="category-item plain-text-suggestion" onClick={() => this.addToken(suggestion)} tabindex="0">
+              ?.filter((value) => this.filterByInput(value))
+              .filter((value) => this.filterDuplicateTokens(value))
+              .map((suggestion) => (
+                <div
+                  data-id={suggestion}
+                  class="category-item plain-text-suggestion"
+                  onClick={() => this.addToken(suggestion)}
+                  tabindex="0"
+                >
                   {suggestion}
                 </div>
               ))}
diff --git a/packages/core/src/components/category-filter/readme.md b/packages/core/src/components/category-filter/readme.md
index 0fd7952a187..8ddc5d84e60 100644
--- a/packages/core/src/components/category-filter/readme.md
+++ b/packages/core/src/components/category-filter/readme.md
@@ -1,6 +1,4 @@
-# cw-category-filter
-
-
+# ix-category-filter
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/chip/chip.scss b/packages/core/src/components/chip/chip.scss
index e1163b219d3..f158c36dc7a 100644
--- a/packages/core/src/components/chip/chip.scss
+++ b/packages/core/src/components/chip/chip.scss
@@ -2,8 +2,8 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 @import './chip-mixin';
-@import './../../../scss/v7/common-variables';
-@import './../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/text-truncation';
 
 $border-radius: 100px;
 
diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx
index 6f2ae9946bf..7c6e7bcfa25 100644
--- a/packages/core/src/components/chip/chip.tsx
+++ b/packages/core/src/components/chip/chip.tsx
@@ -1,20 +1,36 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+} from '@stencil/core';
 
 @Component({
-  tag: 'cw-chip',
+  tag: 'ix-chip',
   styleUrl: 'chip.scss',
   scoped: true,
 })
 export class Chip {
-  @Element() el: HTMLCwChipElement;
+  @Element() el: HTMLIxChipElement;
 
   /**
    * Chip variant
    */
-  @Prop({ reflect: true }) variant: 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom' = 'primary';
+  @Prop({ reflect: true }) variant:
+    | 'primary'
+    | 'alarm'
+    | 'critical'
+    | 'warning'
+    | 'info'
+    | 'neutral'
+    | 'success'
+    | 'custom' = 'primary';
 
   /**
    * Display chip in active state. Only working witht `variant="primary"`
@@ -54,8 +70,19 @@ export class Chip {
   private getCloseButton() {
     return (
       <div class="close-button-container">
-        <button type="button" class="btn btn-invisible-secondary btn-icon btn-oval close-button" onClick={event => this.close.emit(event)}>
-          {this.variant === 'custom' ? <i class="glyph glyph-16 glyph-close-small" style={{ color: this.color }} /> : <cw-icon name={'close-small'} size={'16'} />}
+        <button
+          type="button"
+          class="btn btn-invisible-secondary btn-icon btn-oval close-button"
+          onClick={(event) => this.close.emit(event)}
+        >
+          {this.variant === 'custom' ? (
+            <i
+              class="glyph glyph-16 glyph-close-small"
+              style={{ color: this.color }}
+            />
+          ) : (
+            <ix-icon name={'close-small'} size={'16'} />
+          )}
         </button>
       </div>
     );
@@ -78,7 +105,9 @@ export class Chip {
             : {}
         }
       >
-        {this.icon ? <cw-icon class={'with-icon'} name={this.icon} size={'24'} /> : null}
+        {this.icon ? (
+          <ix-icon class={'with-icon'} name={this.icon} size={'24'} />
+        ) : null}
         <span class="slot-container">
           <slot></slot>
         </span>
diff --git a/packages/core/src/components/chip/test/basic/index.html b/packages/core/src/components/chip/test/basic/index.html
index 808be3d9697..10a87183784 100644
--- a/packages/core/src/components/chip/test/basic/index.html
+++ b/packages/core/src/components/chip/test/basic/index.html
@@ -19,9 +19,9 @@
         margin-top: 2rem;
       "
     >
-      <cw-chip closable outline> Primary </cw-chip>
-      <cw-chip icon="print">Primary with icon</cw-chip>
-      <cw-chip
+      <ix-chip closable outline> Primary </ix-chip>
+      <ix-chip icon="print">Primary with icon</ix-chip>
+      <ix-chip
         icon="print"
         style="width: 10rem"
         closable
@@ -29,11 +29,11 @@
         onClick="{console.log}"
       >
         Primary
-      </cw-chip>
+      </ix-chip>
 
-      <cw-chip variant="critical" closable outline> Alarm </cw-chip>
-      <cw-chip variant="alarm" icon="print"> Alarm with icon </cw-chip>
-      <cw-chip
+      <ix-chip variant="critical" closable outline> Alarm </ix-chip>
+      <ix-chip variant="alarm" icon="print"> Alarm with icon </ix-chip>
+      <ix-chip
         variant="alarm"
         icon="print"
         style="width: 10rem"
@@ -42,8 +42,8 @@
         onClick="{console.log}"
       >
         Alarm
-      </cw-chip>
-      <cw-chip
+      </ix-chip>
+      <ix-chip
         variant="warning"
         icon="print"
         style="width: 10rem"
@@ -52,8 +52,8 @@
         onClick="{console.log}"
       >
         Alarm
-      </cw-chip>
-      <cw-chip
+      </ix-chip>
+      <ix-chip
         background="purple"
         color="green"
         variant="custom"
@@ -64,7 +64,7 @@
         onClick="{console.log}"
       >
         Custom
-      </cw-chip>
+      </ix-chip>
     </div>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
diff --git a/packages/core/src/components/counter-pill/counter-pill.scss b/packages/core/src/components/counter-pill/counter-pill.scss
index 1b34ee4122a..ea4dfa875bf 100644
--- a/packages/core/src/components/counter-pill/counter-pill.scss
+++ b/packages/core/src/components/counter-pill/counter-pill.scss
@@ -1,6 +1,6 @@
 @import './../pill/pill.scss';
-@import './../../../scss/v7/common-variables';
-@import './../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/text-truncation';
 
 :host {
   .slot-container {
diff --git a/packages/core/src/components/counter-pill/counter-pill.tsx b/packages/core/src/components/counter-pill/counter-pill.tsx
index 067fb752716..c1e09476ec8 100644
--- a/packages/core/src/components/counter-pill/counter-pill.tsx
+++ b/packages/core/src/components/counter-pill/counter-pill.tsx
@@ -4,17 +4,25 @@
 import { Component, Element, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-counter-pill',
+  tag: 'ix-counter-pill',
   styleUrl: 'counter-pill.scss',
   scoped: true,
 })
 export class CounterPill {
-  @Element() el: HTMLCwCounterPillElement;
+  @Element() el: HTMLIxCounterPillElement;
 
   /**
    * Pill variant
    */
-  @Prop({ reflect: true }) variant: 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom' = 'primary';
+  @Prop({ reflect: true }) variant:
+    | 'primary'
+    | 'alarm'
+    | 'critical'
+    | 'warning'
+    | 'info'
+    | 'neutral'
+    | 'success'
+    | 'custom' = 'primary';
 
   /**
    * Show pill as outline
@@ -40,7 +48,7 @@ export class CounterPill {
     return (
       <Host
         class={{
-          'outline': this.outline,
+          outline: this.outline,
           'align-left': this.alignLeft,
         }}
         style={
diff --git a/packages/core/src/components/counter-pill/readme.md b/packages/core/src/components/counter-pill/readme.md
index 19a9a2e8e37..6b67c7663a4 100644
--- a/packages/core/src/components/counter-pill/readme.md
+++ b/packages/core/src/components/counter-pill/readme.md
@@ -1,6 +1,4 @@
-# cw-counter-pill
-
-
+# ix-counter-pill
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/counter-pill/test/basic/index.html b/packages/core/src/components/counter-pill/test/basic/index.html
index 23877b67f18..0a72a5daecc 100644
--- a/packages/core/src/components/counter-pill/test/basic/index.html
+++ b/packages/core/src/components/counter-pill/test/basic/index.html
@@ -19,17 +19,17 @@
         margin-top: 2rem;
       "
     >
-      <cw-counter-pill>1</cw-counter-pill>
-      <cw-counter-pill>12</cw-counter-pill>
-      <cw-counter-pill>123</cw-counter-pill>
-      <cw-counter-pill style="width: 8rem">123</cw-counter-pill>
+      <ix-counter-pill>1</ix-counter-pill>
+      <ix-counter-pill>12</ix-counter-pill>
+      <ix-counter-pill>123</ix-counter-pill>
+      <ix-counter-pill style="width: 8rem">123</ix-counter-pill>
 
-      <cw-counter-pill variant="success">1</cw-counter-pill>
-      <cw-counter-pill outline>12</cw-counter-pill>
-      <cw-counter-pill outline variant="alarm"> 123 </cw-counter-pill>
-      <cw-counter-pill alignLeft outline style="width: 8rem">
+      <ix-counter-pill variant="success">1</ix-counter-pill>
+      <ix-counter-pill outline>12</ix-counter-pill>
+      <ix-counter-pill outline variant="alarm"> 123 </ix-counter-pill>
+      <ix-counter-pill alignLeft outline style="width: 8rem">
         123
-      </cw-counter-pill>
+      </ix-counter-pill>
     </div>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
diff --git a/packages/core/src/components/date-picker/date-picker.scss b/packages/core/src/components/date-picker/date-picker.scss
index 14b7ac03497..466d65531d3 100644
--- a/packages/core/src/components/date-picker/date-picker.scss
+++ b/packages/core/src/components/date-picker/date-picker.scss
@@ -1,4 +1,4 @@
-@import '../../../scss/v7/common-variables';
+@import 'common-variables';
 
 .header {
   display: flex;
@@ -58,8 +58,6 @@
       margin-left: 10px;
     }
   }
-
-
 }
 
 .wrapper {
@@ -106,19 +104,25 @@
         box-shadow: inset 0 0 0 1px white;
 
         &:hover {
-          background-color: var(--theme-datepicker-day--background--selected-hover);
+          background-color: var(
+            --theme-datepicker-day--background--selected-hover
+          );
         }
 
         &:active {
-          background-color: var(--theme-datepicker-day--background--selected-active);
+          background-color: var(
+            --theme-datepicker-day--background--selected-active
+          );
         }
 
         &.disabled {
-          background-color: var(--theme-datepicker-day--background--selected-disabled);
-          border: 1px solid var(--theme-datepicker-day--background--selected-disabled);
+          background-color: var(
+            --theme-datepicker-day--background--selected-disabled
+          );
+          border: 1px solid
+            var(--theme-datepicker-day--background--selected-disabled);
           color: var(--theme-datepicker-day--color--selected-disabled);
         }
-
       }
 
       &.range {
@@ -128,20 +132,28 @@
         box-shadow: inset 0 0 0 1px white;
 
         &:hover {
-          background-color: var(--theme-datepicker-day--background--range-hover);
-          border: 1px solid var(--theme-datepicker-today--border-color--range-hover);
+          background-color: var(
+            --theme-datepicker-day--background--range-hover
+          );
+          border: 1px solid
+            var(--theme-datepicker-today--border-color--range-hover);
         }
 
         &:active {
-          background-color: var(--theme-datepicker-day--background--range-active);
-          border: 1px solid var(--theme-datepicker-today--border-color--range-active);
-
+          background-color: var(
+            --theme-datepicker-day--background--range-active
+          );
+          border: 1px solid
+            var(--theme-datepicker-today--border-color--range-active);
         }
 
         &.disabled {
-          background-color: var(--theme-datepicker-day--background--range-disabled);
+          background-color: var(
+            --theme-datepicker-day--background--range-disabled
+          );
           color: var(--theme-datepicker-day--color--range-disabled);
-          border: 1px solid var(--theme-datepicker-today--border-color--range-disabled);
+          border: 1px solid
+            var(--theme-datepicker-today--border-color--range-disabled);
         }
       }
 
@@ -165,18 +177,23 @@
       border: 1px solid var(--theme-datepicker-day--background--selected);
 
       &:hover {
-        background-color: var(--theme-datepicker-day--background--selected-hover);
+        background-color: var(
+          --theme-datepicker-day--background--selected-hover
+        );
       }
 
       &:active {
-        background-color: var(--theme-datepicker-day--background--selected-active);
+        background-color: var(
+          --theme-datepicker-day--background--selected-active
+        );
       }
 
       &.disabled {
-        background-color: var(--theme-datepicker-day--background--selected-disabled);
+        background-color: var(
+          --theme-datepicker-day--background--selected-disabled
+        );
         color: var(--theme-datepicker-day--color--selected-disabled);
       }
-
     }
 
     &.range {
@@ -192,7 +209,9 @@
       }
 
       &.disabled {
-        background-color: var(--theme-datepicker-day--background--range-disabled);
+        background-color: var(
+          --theme-datepicker-day--background--range-disabled
+        );
         color: var(--theme-datepicker-day--color--range-disabled);
       }
     }
@@ -220,7 +239,7 @@
     &.week-number {
       font-size: 10px;
       line-height: 14px;
-      color: var(--theme-datepicker-cw--color);
+      color: var(--theme-datepicker-ix--color);
       border: none;
       background: none;
       cursor: initial;
@@ -228,7 +247,8 @@
 
     &:focus-visible {
       background-color: var(--theme-datepicker-day--background--selected);
-      border: inset 1px solid var(--theme-datepicker-day--border-color--selected);
+      border: inset 1px solid
+        var(--theme-datepicker-day--border-color--selected);
       color: var(--theme-datepicker-day--color--selected);
       font-size: 14px;
       line-height: 20px;
diff --git a/packages/core/src/components/date-picker/date-picker.tsx b/packages/core/src/components/date-picker/date-picker.tsx
index a051c972d42..fbbd5aa3254 100644
--- a/packages/core/src/components/date-picker/date-picker.tsx
+++ b/packages/core/src/components/date-picker/date-picker.tsx
@@ -2,17 +2,25 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, Fragment, h, Host, Prop, State, Event, EventEmitter} from '@stencil/core';
-import { DateTime, Info, MonthNumbers } from "luxon";
+import {
+  Component,
+  Event,
+  EventEmitter,
+  Fragment,
+  h,
+  Host,
+  Prop,
+  State,
+} from '@stencil/core';
+import { DateTime, Info, MonthNumbers } from 'luxon';
 import { DateTimeCardCorners } from '../date-time-card/date-time-card';
 
 @Component({
-  tag: 'cw-date-picker',
+  tag: 'ix-date-picker',
   styleUrl: 'date-picker.scss',
   scoped: true,
 })
 export class DatePicker {
-
   /**
    * output date format
    */
@@ -41,13 +49,15 @@ export class DatePicker {
   @State() calendar: [number, number[]][] = [];
   @State() today = DateTime.now();
 
-  @State() years = [...Array(10).keys()].map(year => year + DateTime.now().year - 5);
-  @State() tempYear: number = this.year ;
-  @State() tempMonth: number = this.month ;
+  @State() years = [...Array(10).keys()].map(
+    (year) => year + DateTime.now().year - 5
+  );
+  @State() tempYear: number = this.year;
+  @State() tempMonth: number = this.month;
   @State() start: DateTime = null;
   @State() end: DateTime = null;
 
-  @State() dropdownButtonRef: HTMLElement
+  @State() dropdownButtonRef: HTMLElement;
   @State() yearContainerRef: HTMLElement;
 
   /**
@@ -60,26 +70,25 @@ export class DatePicker {
    */
   @Event() done: EventEmitter<string>;
 
-
   private getStartOfMonth(
-    year = DateTime.local().get("year"),
-    month = DateTime.local().get("month")
+    year = DateTime.local().get('year'),
+    month = DateTime.local().get('month')
   ) {
-    return DateTime.local(year, month).startOf("month");
+    return DateTime.local(year, month).startOf('month');
   }
 
   private getEndOfMonth(
-    year = DateTime.local().get("year"),
-    month = DateTime.local().get("month")
+    year = DateTime.local().get('year'),
+    month = DateTime.local().get('month')
   ) {
-    return DateTime.local(year, month).endOf("month");
+    return DateTime.local(year, month).endOf('month');
   }
 
   private getDaysInMonth(
     start = this.getStartOfMonth(),
     end = this.getEndOfMonth()
   ) {
-    return Math.ceil(end.diff(start, "days").days);
+    return Math.ceil(end.diff(start, 'days').days);
   }
 
   private calculateCalendar() {
@@ -116,84 +125,106 @@ export class DatePicker {
     }, []);
 
     for (let index = 1; index <= totalWeeks; index++) {
-      const week = weekdays[index - 1]
+      const week = weekdays[index - 1];
       const firstWeekDay = week.find((day) => day !== undefined);
-      const weekNumber = firstWeekDay ? DateTime.local(this.year, this.month, weekdays[index - 1][0]).weekNumber : undefined
+      const weekNumber = firstWeekDay
+        ? DateTime.local(this.year, this.month, weekdays[index - 1][0])
+            .weekNumber
+        : undefined;
       calendar.push([weekNumber, week]);
     }
 
-    this.calendar = calendar
+    this.calendar = calendar;
   }
 
   private changeMonth(number) {
     if (this.month + number < 1) {
       this.year--;
-      this.month = 12
-    }
-    else if (this.month + number > 12) {
+      this.month = 12;
+    } else if (this.month + number > 12) {
       this.year++;
-      this.month = 1
-    }
-    else {
+      this.month = 1;
+    } else {
       this.month += number;
     }
 
-    this.calculateCalendar()
+    this.calculateCalendar();
   }
 
   private selectMonth(month: MonthNumbers) {
-    this.month = month
+    this.month = month;
     this.year = this.tempYear;
-    this.tempMonth = month
+    this.tempMonth = month;
   }
 
   private infiniteScrollYears() {
     const scroll = this.yearContainerRef.scrollTop;
     const maxScroll = this.yearContainerRef.scrollHeight;
     const atTop = scroll === 0;
-    const atBottom = scroll + this.yearContainerRef.getBoundingClientRect().height === maxScroll;
+    const atBottom =
+      scroll + this.yearContainerRef.getBoundingClientRect().height ===
+      maxScroll;
     const limit = 200;
 
-    if (this.years.length > limit) return
+    if (this.years.length > limit) return;
 
     if (atTop) {
-      this.years = [...[...Array(5).keys()].map(year => year + this.years[0] - 5), ...this.years]
-      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll + 100 })
+      this.years = [
+        ...[...Array(5).keys()].map((year) => year + this.years[0] - 5),
+        ...this.years,
+      ];
+      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll + 100 });
     }
 
     if (atBottom) {
-      this.years = [...this.years, ...[...Array(5).keys()].map(year => year + this.years[this.years.length - 1])]
-      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll - 50 })
+      this.years = [
+        ...this.years,
+        ...[...Array(5).keys()].map(
+          (year) => year + this.years[this.years.length - 1]
+        ),
+      ];
+      this.yearContainerRef.scroll({ behavior: 'smooth', top: scroll - 50 });
     }
   }
 
   private selectTempYear(event: MouseEvent, year: number) {
-    event.stopPropagation()
+    event.stopPropagation();
     this.tempYear = year;
   }
 
   private todayClass(day: number) {
     const today = DateTime.local();
-    const daaay = DateTime.local(this.year, this.month, day)
-    const isToday = Math.ceil(daaay.diff(today, "days").days) === 0
+    const daaay = DateTime.local(this.year, this.month, day);
+    const isToday = Math.ceil(daaay.diff(today, 'days').days) === 0;
     return {
       'calendar-item': true,
       'empty-day': day === undefined,
-      'today': isToday,
-      'selected': this.start && daaay.toISO() === this.start.toISO() || this.end && daaay.toISO() === this.end.toISO(),
-      'range': this.start && this.end && daaay.toISO() > this.start.toISO() && daaay.toISO() < this.end.toISO(),
-      'disabled': this.start && daaay.toISO() < this.start.toISO() && this.end === null && this.range
+      today: isToday,
+      selected:
+        (this.start && daaay.toISO() === this.start.toISO()) ||
+        (this.end && daaay.toISO() === this.end.toISO()),
+      range:
+        this.start &&
+        this.end &&
+        daaay.toISO() > this.start.toISO() &&
+        daaay.toISO() < this.end.toISO(),
+      disabled:
+        this.start &&
+        daaay.toISO() < this.start.toISO() &&
+        this.end === null &&
+        this.range,
     };
   }
 
   private selectDay(day: number) {
-    const date = DateTime.local(this.year, this.month, day)
-    const isNotDay = day === undefined
-    const isFirstDay = this.start === null
-    const isLastDay = this.end === null
-    const isPeriod = this.start !== null && this.end !== null
-    const isStartBeforeEnd = this.start && this.start.toISO() < date.toISO()
-    const isSameDay = this.start && !this.end && this.start.toISO() === date.toISO()
+    const date = DateTime.local(this.year, this.month, day);
+    const isNotDay = day === undefined;
+    const isFirstDay = this.start === null;
+    const isLastDay = this.end === null;
+    const isPeriod = this.start !== null && this.end !== null;
+    const isStartBeforeEnd = this.start && this.start.toISO() < date.toISO();
+    const isSameDay =
+      this.start && !this.end && this.start.toISO() === date.toISO();
 
     if (isNotDay) return;
 
@@ -203,92 +234,156 @@ export class DatePicker {
       return;
     }
 
-    if (!this.range){
+    if (!this.range) {
       this.start = date;
     }
 
-    if(this.range && isFirstDay) {
+    if (this.range && isFirstDay) {
       this.start = date;
     }
 
-    if(this.range && isLastDay && isStartBeforeEnd){
+    if (this.range && isLastDay && isStartBeforeEnd) {
       this.end = date;
     }
 
-    if(this.range && isPeriod){
+    if (this.range && isPeriod) {
       this.start = date;
-      this.end = null
+      this.end = null;
     }
 
     this.dateChange.emit(this.getOutputFormat());
   }
 
   private getOutputFormat() {
-    if (!this.end) return this.start.toFormat(this.format)
+    if (!this.end) return this.start.toFormat(this.format);
 
-    return this.start.toFormat(this.format) + ' - ' + this.end.toFormat(this.format)
+    return (
+      this.start.toFormat(this.format) + ' - ' + this.end.toFormat(this.format)
+    );
   }
 
   componentWillRender() {
-    this.calculateCalendar()
+    this.calculateCalendar();
   }
 
   render() {
     return (
       <Host>
-        <cw-date-time-card individual={this.individual} corners={this.corners}>
+        <ix-date-time-card individual={this.individual} corners={this.corners}>
           <div class="header" slot="header">
-            <cw-icon-button onClick={() => this.changeMonth(-1)} ghost icon="chevron-left" variant="Primary" class="arrows"></cw-icon-button>
+            <ix-icon-button
+              onClick={() => this.changeMonth(-1)}
+              ghost
+              icon="chevron-left"
+              variant="Primary"
+              class="arrows"
+            ></ix-icon-button>
 
             <div class="selector">
-              <cw-button ghost ref={ref => this.dropdownButtonRef = ref }><span class="fontSize capitalize">{ this.monthNames[this.month - 1] } { this.year }</span></cw-button>
-              <cw-dropdown class="dropdown" trigger={this.dropdownButtonRef} placement="bottom">
+              <ix-button ghost ref={(ref) => (this.dropdownButtonRef = ref)}>
+                <span class="fontSize capitalize">
+                  {this.monthNames[this.month - 1]} {this.year}
+                </span>
+              </ix-button>
+              <ix-dropdown
+                class="dropdown"
+                trigger={this.dropdownButtonRef}
+                placement="bottom"
+              >
                 <div class="wrapper">
-                  <div class="overflow" onScroll={() => this.infiniteScrollYears()} ref={ref => this.yearContainerRef = ref}>
-                    { this.years.map(year => (
-                      <div class={{"arrowYear": true}} onClick={(event) => this.selectTempYear(event, year)}>
-                        <cw-icon class={{'hidden': this.tempYear !== year, 'arrowPosition': true}} name='chevron-right' size='12'></cw-icon>
-                        <div style={{"min-width": "max-content"}}>{`${year}`}</div>
+                  <div
+                    class="overflow"
+                    onScroll={() => this.infiniteScrollYears()}
+                    ref={(ref) => (this.yearContainerRef = ref)}
+                  >
+                    {this.years.map((year) => (
+                      <div
+                        class={{ arrowYear: true }}
+                        onClick={(event) => this.selectTempYear(event, year)}
+                      >
+                        <ix-icon
+                          class={{
+                            hidden: this.tempYear !== year,
+                            arrowPosition: true,
+                          }}
+                          name="chevron-right"
+                          size="12"
+                        ></ix-icon>
+                        <div
+                          style={{ 'min-width': 'max-content' }}
+                        >{`${year}`}</div>
                       </div>
-
                     ))}
                   </div>
                   <div class="overflow">
-                    { this.monthNames.map((month, index) => (
-                      <div class={{"arrowYear": true, 'selected': this.tempMonth - 1 === index}} onClick={() => this.selectMonth(index + 1 as MonthNumbers)}>
-                        <cw-icon class={{'hidden': this.tempMonth - 1 !== index, 'checkPosition': true}} name='single-check' size='16'></cw-icon>
-                        <div><span class={{"capitalize": true, 'monthMargin': true} }>{`${month} ${this.tempYear}`}</span></div>
+                    {this.monthNames.map((month, index) => (
+                      <div
+                        class={{
+                          arrowYear: true,
+                          selected: this.tempMonth - 1 === index,
+                        }}
+                        onClick={() =>
+                          this.selectMonth((index + 1) as MonthNumbers)
+                        }
+                      >
+                        <ix-icon
+                          class={{
+                            hidden: this.tempMonth - 1 !== index,
+                            checkPosition: true,
+                          }}
+                          name="single-check"
+                          size="16"
+                        ></ix-icon>
+                        <div>
+                          <span
+                            class={{ capitalize: true, monthMargin: true }}
+                          >{`${month} ${this.tempYear}`}</span>
+                        </div>
                       </div>
-                      )
-                    ) }
+                    ))}
                   </div>
                 </div>
-              </cw-dropdown>
+              </ix-dropdown>
             </div>
 
-            <cw-icon-button onClick={() => this.changeMonth(1)} ghost icon="chevron-right" variant="Primary" class="arrows"></cw-icon-button>
+            <ix-icon-button
+              onClick={() => this.changeMonth(1)}
+              ghost
+              icon="chevron-right"
+              variant="Primary"
+              class="arrows"
+            ></ix-icon-button>
           </div>
 
           <div class="grid">
             <div class="calendar-item week-day"></div>
-            {this.dayNames.map(name => <div class="calendar-item week-day">{ name.slice(0, 3) }</div> )}
+            {this.dayNames.map((name) => (
+              <div class="calendar-item week-day">{name.slice(0, 3)}</div>
+            ))}
 
-            { this.calendar.map((week) => {
+            {this.calendar.map((week) => {
               return (
                 <Fragment>
-                  <div class="calendar-item week-number">{ week[0] }</div>
-                  { week[1].map(day => (<div class={this.todayClass(day)} onClick={() => this.selectDay(day)}>{ day }</div>)) }
+                  <div class="calendar-item week-number">{week[0]}</div>
+                  {week[1].map((day) => (
+                    <div
+                      class={this.todayClass(day)}
+                      onClick={() => this.selectDay(day)}
+                    >
+                      {day}
+                    </div>
+                  ))}
                 </Fragment>
-              )
-            }) }
+              );
+            })}
           </div>
 
-          <div class={{ "button": true, "hidden": !this.individual}}>
-            <cw-button onClick={() => this.done.emit(this.getOutputFormat())}>
+          <div class={{ button: true, hidden: !this.individual }}>
+            <ix-button onClick={() => this.done.emit(this.getOutputFormat())}>
               Done
-            </cw-button>
+            </ix-button>
           </div>
-        </cw-date-time-card>
+        </ix-date-time-card>
       </Host>
     );
   }
diff --git a/packages/core/src/components/date-picker/readme.md b/packages/core/src/components/date-picker/readme.md
index 9516b9a093e..42420292727 100644
--- a/packages/core/src/components/date-picker/readme.md
+++ b/packages/core/src/components/date-picker/readme.md
@@ -1,6 +1,4 @@
-# cw-date-picker
-
-
+# ix-date-picker
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/date-time-card/date-time-card.scss b/packages/core/src/components/date-time-card/date-time-card.scss
index 1ea5adc5896..0a13ae3383f 100644
--- a/packages/core/src/components/date-time-card/date-time-card.scss
+++ b/packages/core/src/components/date-time-card/date-time-card.scss
@@ -1,4 +1,4 @@
-@import '../../../scss/v7/common-variables';
+@import 'common-variables';
 
 .card {
   background-color: var(--theme-menu--background);
@@ -8,7 +8,9 @@
   border-radius: unset;
 
   &.individual {
-    box-shadow: 0 0 2px 0 var(--theme-input--border-color-bottom--disabled), 0 4px 8px 0 var(--theme-input--border-color-bottom--disabled), 0 12px 18px 0px var(--theme-input--border-color-bottom--disabled);
+    box-shadow: 0 0 2px 0 var(--theme-input--border-color-bottom--disabled),
+      0 4px 8px 0 var(--theme-input--border-color-bottom--disabled),
+      0 12px 18px 0px var(--theme-input--border-color-bottom--disabled);
     border: 1px solid var(--theme-menu--border-color);
     border-radius: 4px;
   }
diff --git a/packages/core/src/components/date-time-card/date-time-card.tsx b/packages/core/src/components/date-time-card/date-time-card.tsx
index 01742a4f109..ac523b964a5 100644
--- a/packages/core/src/components/date-time-card/date-time-card.tsx
+++ b/packages/core/src/components/date-time-card/date-time-card.tsx
@@ -2,18 +2,17 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, h, Host, Prop, Element} from '@stencil/core';
+import { Component, Element, h, Host, Prop } from '@stencil/core';
 
-export type DateTimeCardCorners = 'rounded' | 'left' | 'right'
+export type DateTimeCardCorners = 'rounded' | 'left' | 'right';
 
 @Component({
-  tag: 'cw-date-time-card',
+  tag: 'ix-date-time-card',
   styleUrl: 'date-time-card.scss',
   scoped: true,
 })
 export class DateTimeCard {
-
-  @Element() hostElement: HTMLCwDateTimeCardElement;
+  @Element() hostElement: HTMLIxDateTimeCardElement;
 
   /**
    * set styles
@@ -23,14 +22,14 @@ export class DateTimeCard {
   /**
    * Set corners style
    */
-   @Prop() corners: DateTimeCardCorners = 'rounded';
+  @Prop() corners: DateTimeCardCorners = 'rounded';
 
-   private cardClasses() {
+  private cardClasses() {
     return {
-      'card': true,
-      'individual': this.individual,
-      'left': this.corners === 'left',
-      'right': this.corners === 'right'
+      card: true,
+      individual: this.individual,
+      left: this.corners === 'left',
+      right: this.corners === 'right',
     };
   }
 
@@ -38,15 +37,15 @@ export class DateTimeCard {
     return (
       <Host>
         <div class={this.cardClasses()}>
-            <div class="header">
-              <slot name="header"></slot>
-            </div>
+          <div class="header">
+            <slot name="header"></slot>
+          </div>
 
-            <div class="separator"></div>
+          <div class="separator"></div>
 
-            <div class="content">
-              <slot></slot>
-            </div>
+          <div class="content">
+            <slot></slot>
+          </div>
         </div>
       </Host>
     );
diff --git a/packages/core/src/components/date-time-card/readme.md b/packages/core/src/components/date-time-card/readme.md
index b13d3ada5b8..a9c1ed9941b 100644
--- a/packages/core/src/components/date-time-card/readme.md
+++ b/packages/core/src/components/date-time-card/readme.md
@@ -1,6 +1,4 @@
-# cw-date-time-card
-
-
+# ix-date-time-card
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/datetime-picker/datetime-picker.scss b/packages/core/src/components/datetime-picker/datetime-picker.scss
index 9350195535b..991653e3e26 100644
--- a/packages/core/src/components/datetime-picker/datetime-picker.scss
+++ b/packages/core/src/components/datetime-picker/datetime-picker.scss
@@ -1,8 +1,10 @@
-@import '../../../scss/v7/common-variables';
+@import 'common-variables';
 
 :host {
   background-color: var(--theme-menu--background);
-  box-shadow: 0 0 2px 0 var(--theme-input--border-color-bottom--disabled), 0 4px 8px 0 var(--theme-input--border-color-bottom--disabled), 0 12px 18px 0px var(--theme-input--border-color-bottom--disabled);
+  box-shadow: 0 0 2px 0 var(--theme-input--border-color-bottom--disabled),
+    0 4px 8px 0 var(--theme-input--border-color-bottom--disabled),
+    0 12px 18px 0px var(--theme-input--border-color-bottom--disabled);
   border-radius: 4px;
 }
 
diff --git a/packages/core/src/components/datetime-picker/datetime-picker.tsx b/packages/core/src/components/datetime-picker/datetime-picker.tsx
index 717d44ec057..e60dee582ff 100644
--- a/packages/core/src/components/datetime-picker/datetime-picker.tsx
+++ b/packages/core/src/components/datetime-picker/datetime-picker.tsx
@@ -2,19 +2,18 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, h, Host, Prop, Event, EventEmitter} from '@stencil/core';
+import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-datetime-picker',
+  tag: 'ix-datetime-picker',
   styleUrl: 'datetime-picker.scss',
   scoped: true,
 })
 export class DatePicker {
-
   /**
    * Set range size
    */
-   @Prop() range = true;
+  @Prop() range = true;
 
   /**
    * Show Hour Input
@@ -36,8 +35,8 @@ export class DatePicker {
    */
   @Prop() showTimeReference = false;
 
-  private date!: string
-  private time!: string
+  private date!: string;
+  private time!: string;
 
   /**
    * Time event
@@ -45,7 +44,7 @@ export class DatePicker {
   @Event() done: EventEmitter<string>;
 
   private doneEvent() {
-    console.log(this.date + ' ' + this.time)
+    console.log(this.date + ' ' + this.time);
     this.done.emit(this.date + ' ' + this.time);
   }
 
@@ -53,24 +52,24 @@ export class DatePicker {
     return (
       <Host>
         <div class="flex">
-          <cw-date-picker
+          <ix-date-picker
             corners="left"
             individual={false}
             range={this.range}
-            onDateChange={(date) => this.date = date.detail}
-          ></cw-date-picker>
-          <cw-time-picker
+            onDateChange={(date) => (this.date = date.detail)}
+          ></ix-date-picker>
+          <ix-time-picker
             corners="right"
             individual={false}
             showHour={this.showHour}
             showMinutes={this.showMinutes}
             showSeconds={this.showSeconds}
             showTimeReference={this.showTimeReference}
-            onTimeChange={(time) => this.time = time.detail}
-          ></cw-time-picker>
+            onTimeChange={(time) => (this.time = time.detail)}
+          ></ix-time-picker>
         </div>
         <div class="done">
-          <cw-button onClick={() => this.doneEvent()}>Done</cw-button>
+          <ix-button onClick={() => this.doneEvent()}>Done</ix-button>
         </div>
       </Host>
     );
diff --git a/packages/core/src/components/datetime-picker/readme.md b/packages/core/src/components/datetime-picker/readme.md
index 3a72ea1182a..16c55881b6e 100644
--- a/packages/core/src/components/datetime-picker/readme.md
+++ b/packages/core/src/components/datetime-picker/readme.md
@@ -1,6 +1,4 @@
-# cw-datetime-picker
-
-
+# ix-datetime-picker
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/drawer/drawer.scss b/packages/core/src/components/drawer/drawer.scss
index 899a288cfe0..d1da20b2305 100644
--- a/packages/core/src/components/drawer/drawer.scss
+++ b/packages/core/src/components/drawer/drawer.scss
@@ -2,8 +2,8 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import './../../../scss/mixins/shadows';
-@import './../../../scss/variables';
+@import 'mixins/shadows';
+@import 'common-variables';
 
 .drawer-container {
   top: 0;
diff --git a/packages/core/src/components/drawer/drawer.tsx b/packages/core/src/components/drawer/drawer.tsx
index 9572d32a2a6..8c9e8ab7257 100644
--- a/packages/core/src/components/drawer/drawer.tsx
+++ b/packages/core/src/components/drawer/drawer.tsx
@@ -2,11 +2,19 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, Event, EventEmitter, h, Method, Prop, Watch } from '@stencil/core';
+import {
+  Component,
+  Event,
+  EventEmitter,
+  h,
+  Method,
+  Prop,
+  Watch,
+} from '@stencil/core';
 import anime from 'animejs';
 
 @Component({
-  tag: 'cw-drawer',
+  tag: 'ix-drawer',
   styleUrl: 'drawer.scss',
   scoped: true,
 })
@@ -131,9 +139,18 @@ export class CwDrawer {
   render() {
     return (
       <div
-        class={{ 'drawer-container': true, 'toggle': this.show, 'full-height': this.fullHeight, 'd-none': true }}
-        style={{ 'width': this.width === 'auto' ? this.width : `${this.width}rem`, 'min-width': `${this.minWidth}rem`, 'max-width': `${this.maxWidth}rem` }}
-        ref={el => (this.divElement = el as HTMLElement)}
+        class={{
+          'drawer-container': true,
+          toggle: this.show,
+          'full-height': this.fullHeight,
+          'd-none': true,
+        }}
+        style={{
+          width: this.width === 'auto' ? this.width : `${this.width}rem`,
+          'min-width': `${this.minWidth}rem`,
+          'max-width': `${this.maxWidth}rem`,
+        }}
+        ref={(el) => (this.divElement = el as HTMLElement)}
         data-testid="container"
         id="div-container"
       >
@@ -141,7 +158,13 @@ export class CwDrawer {
           <div class="header-content">
             <slot name="header"></slot>
           </div>
-          <cw-icon-button icon="close" size="24" ghost onClick={() => this.onCloseClicked()} data-testid="close-button"></cw-icon-button>
+          <ix-icon-button
+            icon="close"
+            size="24"
+            ghost
+            onClick={() => this.onCloseClicked()}
+            data-testid="close-button"
+          ></ix-icon-button>
         </div>
         <div class="content">
           <slot></slot>
diff --git a/packages/core/src/components/drawer/readme.md b/packages/core/src/components/drawer/readme.md
index f3d55562947..d3462bfdc12 100644
--- a/packages/core/src/components/drawer/readme.md
+++ b/packages/core/src/components/drawer/readme.md
@@ -1,6 +1,4 @@
-# cw-drawer
-
-
+# ix-drawer
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/drawer/test/__snapshots__/drawer.spec.e2e.ts.snap b/packages/core/src/components/drawer/test/__snapshots__/drawer.spec.e2e.ts.snap
index 473223d5180..43b665a9e7b 100644
--- a/packages/core/src/components/drawer/test/__snapshots__/drawer.spec.e2e.ts.snap
+++ b/packages/core/src/components/drawer/test/__snapshots__/drawer.spec.e2e.ts.snap
@@ -1,22 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`drawer renders 1`] = `
-<cw-drawer class="hydrated sc-cw-drawer-h sc-cw-drawer-s">
+<ix-drawer class="hydrated sc-ix-drawer-h sc-ix-drawer-s">
   <!---->
-  <div class="d-none drawer-container sc-cw-drawer" data-testid="container" id="div-container">
-    <div class="header sc-cw-drawer sc-cw-drawer-s">
-      <cw-icon-button class="hydrated sc-cw-drawer sc-cw-icon-button-h sc-cw-icon-button-s" data-testid="close-button">
+  <div class="d-none drawer-container sc-ix-drawer" data-testid="container" id="div-container">
+    <div class="header sc-ix-drawer sc-ix-drawer-s">
+      <ix-icon-button class="hydrated sc-ix-drawer sc-ix-icon-button-h sc-ix-icon-button-s" data-testid="close-button">
         <!---->
-        <button class="btn btn-icon btn-invisible-secondary sc-cw-icon-button" style="color: inherit;">
-          <cw-icon class="hydrated sc-cw-icon-button sc-cw-icon-h sc-cw-icon-s size-24" name="close" style="color: inherit;">
+        <button class="btn btn-icon btn-invisible-secondary sc-ix-icon-button" style="color: inherit;">
+          <ix-icon class="hydrated sc-ix-icon-button sc-ix-icon-h sc-ix-icon-s size-24" name="close" style="color: inherit;">
             <!---->
-            <i class="glyph glyph-24 glyph-close sc-cw-icon sc-cw-icon-s"></i>
-          </cw-icon>
-          <div class="sc-cw-icon-button sc-cw-icon-button-s" style="display: none;"></div>
+            <i class="glyph glyph-24 glyph-close sc-ix-icon sc-ix-icon-s"></i>
+          </ix-icon>
+          <div class="sc-ix-icon-button sc-ix-icon-button-s" style="display: none;"></div>
         </button>
-      </cw-icon-button>
+      </ix-icon-button>
     </div>
-    <div class="content sc-cw-drawer sc-cw-drawer-s"></div>
+    <div class="content sc-ix-drawer sc-ix-drawer-s"></div>
   </div>
-</cw-drawer>
+</ix-drawer>
 `;
diff --git a/packages/core/src/components/drawer/test/__snapshots__/drawer.spec.tsx.snap b/packages/core/src/components/drawer/test/__snapshots__/drawer.spec.tsx.snap
index 390dea11908..038c594b057 100644
--- a/packages/core/src/components/drawer/test/__snapshots__/drawer.spec.tsx.snap
+++ b/packages/core/src/components/drawer/test/__snapshots__/drawer.spec.tsx.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`cw-drawer renders 1`] = `
-<cw-drawer>
+exports[`ix-drawer renders 1`] = `
+<ix-drawer>
   <!---->
   <div class="d-none drawer-container" data-testid="container" id="div-container" style="width: 16rem; min-width: 16rem; max-width: 28rem;">
     <div class="header">
       <div class="header-content"></div>
-      <cw-icon-button data-testid="close-button" icon="close" ghost="" size="24"></cw-icon-button>
+      <ix-icon-button data-testid="close-button" icon="close" ghost="" size="24"></ix-icon-button>
     </div>
     <div class="content"></div>
   </div>
-</cw-drawer>
+</ix-drawer>
 `;
diff --git a/packages/core/src/components/drawer/test/basic/index.html b/packages/core/src/components/drawer/test/basic/index.html
index db89eeca4f2..639f6792c4c 100644
--- a/packages/core/src/components/drawer/test/basic/index.html
+++ b/packages/core/src/components/drawer/test/basic/index.html
@@ -11,12 +11,12 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-drawer>Content</cw-drawer>
-    <cw-button>Click</cw-button>
+    <ix-drawer>Content</ix-drawer>
+    <ix-button>Click</ix-button>
     <script>
-      const button = document.querySelector('cw-button');
+      const button = document.querySelector('ix-button');
       button.addEventListener('click', () => {
-        document.querySelector('cw-drawer').toggleDrawer(true);
+        document.querySelector('ix-drawer').toggleDrawer(true);
       });
     </script>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
diff --git a/packages/core/src/components/drawer/test/drawer.e2e.ts b/packages/core/src/components/drawer/test/drawer.e2e.ts
index 477883328c5..5c4bef316fe 100644
--- a/packages/core/src/components/drawer/test/drawer.e2e.ts
+++ b/packages/core/src/components/drawer/test/drawer.e2e.ts
@@ -7,7 +7,7 @@ import { regressionTest } from '@utils/test';
 regressionTest.describe('drawer', () => {
   regressionTest('basic', async ({ page }) => {
     await page.goto(`drawer/test/basic`);
-    await page.locator('cw-button').click();
+    await page.locator('ix-button').click();
     await page.waitForTimeout(800);
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
diff --git a/packages/core/src/components/drawer/test/drawer.spec.tsx b/packages/core/src/components/drawer/test/drawer.spec.tsx
index 70acc7093c6..4d3ea9501ce 100644
--- a/packages/core/src/components/drawer/test/drawer.spec.tsx
+++ b/packages/core/src/components/drawer/test/drawer.spec.tsx
@@ -6,7 +6,7 @@ import { newSpecPage } from '@stencil/core/testing';
 import { fireEvent } from '@testing-library/dom';
 import { CwDrawer } from '../drawer';
 
-describe('cw-drawer', () => {
+describe('ix-drawer', () => {
   let page: any;
   let drawer: any;
   let container: HTMLDivElement;
@@ -14,10 +14,10 @@ describe('cw-drawer', () => {
   beforeEach(async () => {
     page = await newSpecPage({
       components: [CwDrawer],
-      html: `<cw-drawer></cw-drawer>`,
+      html: `<ix-drawer></ix-drawer>`,
     });
 
-    drawer = document.querySelector('cw-drawer');
+    drawer = document.querySelector('ix-drawer');
     container = document.querySelector('[data-testid="container"]');
   });
 
diff --git a/packages/core/src/components/dropdown-item/dropdown-item.scss b/packages/core/src/components/dropdown-item/dropdown-item.scss
index d8b7c99cf33..c8e93c77203 100644
--- a/packages/core/src/components/dropdown-item/dropdown-item.scss
+++ b/packages/core/src/components/dropdown-item/dropdown-item.scss
@@ -1,9 +1,9 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/hover';
-@import '../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/hover';
+@import 'mixins/text-truncation';
 
 :host {
   display: block;
diff --git a/packages/core/src/components/dropdown-item/dropdown-item.tsx b/packages/core/src/components/dropdown-item/dropdown-item.tsx
index 2eab8c7ca76..af1820a7d45 100644
--- a/packages/core/src/components/dropdown-item/dropdown-item.tsx
+++ b/packages/core/src/components/dropdown-item/dropdown-item.tsx
@@ -1,15 +1,24 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+} from '@stencil/core';
 
 @Component({
-  tag: 'cw-dropdown-item',
+  tag: 'ix-dropdown-item',
   styleUrl: 'dropdown-item.scss',
   scoped: true,
 })
 export class DropdownItem {
-  @Element() hostElement!: HTMLCwDropdownItemElement;
+  @Element() hostElement!: HTMLIxDropdownItemElement;
 
   /**
    * Label of dropdown item
@@ -39,7 +48,7 @@ export class DropdownItem {
   /**
    * Click on item
    */
-  @Event() itemClick: EventEmitter<HTMLCwDropdownItemElement>;
+  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;
 
   /**
    * Internal usage only
@@ -61,13 +70,13 @@ export class DropdownItem {
         <button
           class={{
             'dropdown-item': true,
-            'hover': this.hover,
-            'disabled': this.disabled,
+            hover: this.hover,
+            disabled: this.disabled,
           }}
           onClick={() => this.emitItemClick()}
         >
           {this.checked ? (
-            <cw-icon class="checkmark" name="single-check" size='16'></cw-icon>
+            <ix-icon class="checkmark" name="single-check" size="16"></ix-icon>
           ) : null}
           {this.icon ? (
             <span
diff --git a/packages/core/src/components/dropdown-item/readme.md b/packages/core/src/components/dropdown-item/readme.md
index 542b8544ca1..068113ecc29 100644
--- a/packages/core/src/components/dropdown-item/readme.md
+++ b/packages/core/src/components/dropdown-item/readme.md
@@ -1,6 +1,4 @@
-# cw-dropdown-item
-
-
+# ix-dropdown-item
 
 <!-- Auto Generated Below -->
 
@@ -20,7 +18,7 @@
 
 | Event       | Description   | Type                                     |
 | ----------- | ------------- | ---------------------------------------- |
-| `itemClick` | Click on item | `CustomEvent<HTMLCwDropdownItemElement>` |
+| `itemClick` | Click on item | `CustomEvent<HTMLIxDropdownItemElement>` |
 
 
 ## Methods
diff --git a/packages/core/src/components/dropdown/dropdown.scss b/packages/core/src/components/dropdown/dropdown.scss
index a7e4ac9ca6e..f89178ae2f5 100644
--- a/packages/core/src/components/dropdown/dropdown.scss
+++ b/packages/core/src/components/dropdown/dropdown.scss
@@ -1,12 +1,12 @@
 @import '~bootstrap/scss/functions';
-@import './../../../scss/v7/common-variables';
+@import 'common-variables';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
 @import '~bootstrap/scss/dropdown';
 
-@import './../../../scss/v7/mixins/fonts';
-@import './../../../scss/v7/mixins/text-truncation';
-@import './../../../scss/v7/components/dropdown';
+@import 'mixins/fonts';
+@import 'mixins/text-truncation';
+@import 'components/dropdown';
 
 :host {
   min-width: 0px;
diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx
index 8a5ce167d9a..199dc16e964 100644
--- a/packages/core/src/components/dropdown/dropdown.tsx
+++ b/packages/core/src/components/dropdown/dropdown.tsx
@@ -21,12 +21,12 @@ import {
 } from '@stencil/core';
 
 @Component({
-  tag: 'cw-dropdown',
+  tag: 'ix-dropdown',
   styleUrl: 'dropdown.scss',
   shadow: true,
 })
 export class Dropdown {
-  @Element() hostElement!: HTMLCwDropdownElement;
+  @Element() hostElement!: HTMLIxDropdownElement;
 
   /**
    * Show dropdown
@@ -93,7 +93,7 @@ export class Dropdown {
   }
 
   get dropdownItems() {
-    return Array.from(this.hostElement.querySelectorAll('cw-dropdown-item'));
+    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));
   }
 
   private resolveElement(prop: string | HTMLElement) {
diff --git a/packages/core/src/components/dropdown/readme.md b/packages/core/src/components/dropdown/readme.md
index 1c2b24d928c..a24563460c4 100644
--- a/packages/core/src/components/dropdown/readme.md
+++ b/packages/core/src/components/dropdown/readme.md
@@ -1,6 +1,4 @@
-# cw-dropdown
-
-
+# ix-dropdown
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/dropdown/test/__snapshots__/dropdown.spec.tsx.snap b/packages/core/src/components/dropdown/test/__snapshots__/dropdown.spec.tsx.snap
index de327a01934..699c733f482 100644
--- a/packages/core/src/components/dropdown/test/__snapshots__/dropdown.spec.tsx.snap
+++ b/packages/core/src/components/dropdown/test/__snapshots__/dropdown.spec.tsx.snap
@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`cw-dropdown renders 1`] = `
-<cw-dropdown class="dropdown-menu" style="margin: 0; min-width: 0px;">
+exports[`ix-dropdown renders 1`] = `
+<ix-dropdown class="dropdown-menu" style="margin: 0; min-width: 0px;">
   <!---->
   <div style="display: contents;">
-    <cw-dropdown-item></cw-dropdown-item>
+    <ix-dropdown-item></ix-dropdown-item>
   </div>
-</cw-dropdown>
+</ix-dropdown>
 `;
diff --git a/packages/core/src/components/dropdown/test/basic/index.html b/packages/core/src/components/dropdown/test/basic/index.html
index 73641ad0192..2ca270eb817 100644
--- a/packages/core/src/components/dropdown/test/basic/index.html
+++ b/packages/core/src/components/dropdown/test/basic/index.html
@@ -11,12 +11,12 @@
     <title>Stencil Component Starter</title>
   </head>
   <body style="width: 100vw; height: 100vh">
-    <cw-button id="trigger">Open</cw-button>
-    <cw-dropdown trigger="trigger">
-      <cw-dropdown-item label="Item 1" icon="print"></cw-dropdown-item>
-      <cw-dropdown-item label="Item 2"></cw-dropdown-item>
-      <cw-dropdown-item>Custom</cw-dropdown-item>
-    </cw-dropdown>
+    <ix-button id="trigger">Open</ix-button>
+    <ix-dropdown trigger="trigger">
+      <ix-dropdown-item label="Item 1" icon="print"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      <ix-dropdown-item>Custom</ix-dropdown-item>
+    </ix-dropdown>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/dropdown/test/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/dropdown.e2e.ts
index c67e7b1fbe5..cda5c5b0018 100644
--- a/packages/core/src/components/dropdown/test/dropdown.e2e.ts
+++ b/packages/core/src/components/dropdown/test/dropdown.e2e.ts
@@ -8,7 +8,7 @@ regressionTest.describe('dropdown', () => {
   regressionTest('basic', async ({ page }) => {
     await page.goto(`dropdown/test/basic`);
 
-    await page.locator('cw-button').click();
+    await page.locator('ix-button').click();
     await page.waitForSelector('.dropdown-menu.show');
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
       maxDiffPixelRatio: 0.05,
diff --git a/packages/core/src/components/dropdown/test/dropdown.spec.tsx b/packages/core/src/components/dropdown/test/dropdown.spec.tsx
index fca5d6cc92b..20bfd66a116 100644
--- a/packages/core/src/components/dropdown/test/dropdown.spec.tsx
+++ b/packages/core/src/components/dropdown/test/dropdown.spec.tsx
@@ -3,10 +3,10 @@
  */
 
 import { newSpecPage } from '@stencil/core/testing';
-import { Dropdown } from '../dropdown';
 import { fireEvent } from '@testing-library/dom';
+import { Dropdown } from '../dropdown';
 
-describe('cw-dropdown', () => {
+describe('ix-dropdown', () => {
   let page: any;
   let dropdown: any;
 
@@ -14,13 +14,13 @@ describe('cw-dropdown', () => {
     page = await newSpecPage({
       components: [Dropdown],
       html: `
-      <cw-dropdown>
-        <cw-dropdown-item></cw-dropdown-item>
-      </cw-dropdown>
+      <ix-dropdown>
+        <ix-dropdown-item></ix-dropdown-item>
+      </ix-dropdown>
       `,
     });
 
-    dropdown = document.querySelector('cw-dropdown');
+    dropdown = document.querySelector('ix-dropdown');
   });
 
   it('renders', async () => {
@@ -33,14 +33,14 @@ describe('cw-dropdown', () => {
       html: `<div></div>`,
     });
 
-    const anchor = page.doc.createElement('cw-button');
+    const anchor = page.doc.createElement('ix-button');
     anchor.setAttribute('id', 'test');
     anchor.innerText = 'Test';
 
-    const dropdown = page.doc.createElement('cw-dropdown');
+    const dropdown = page.doc.createElement('ix-dropdown');
     dropdown.show = true;
 
-    const dropdownItem = page.doc.createElement('cw-dropdown-item');
+    const dropdownItem = page.doc.createElement('ix-dropdown-item');
 
     dropdown.appendChild(dropdownItem);
 
@@ -50,11 +50,11 @@ describe('cw-dropdown', () => {
     await page.waitForChanges();
 
     expect(page.root).toEqualHtml(`
-    <cw-dropdown class="dropdown-menu show" show="" style="margin: 0; min-width: 0px;">
+    <ix-dropdown class="dropdown-menu show" show="" style="margin: 0; min-width: 0px;">
       <div style="display: contents;">
-        <cw-dropdown-item></cw-dropdown-item>
+        <ix-dropdown-item></ix-dropdown-item>
       </div>
-    </cw-dropdown>
+    </ix-dropdown>
     `);
   });
 
@@ -62,7 +62,7 @@ describe('cw-dropdown', () => {
     dropdown.show = true;
     await page.waitForChanges();
 
-    fireEvent.click(window);  //click outside
+    fireEvent.click(window); //click outside
     await page.waitForChanges();
 
     expect(dropdown.show).toBeFalsy();
@@ -75,9 +75,8 @@ describe('cw-dropdown', () => {
     dropdown.show = true;
     await page.waitForChanges();
 
-    fireEvent.click(window);  
-    await page.waitForChanges(); 
+    fireEvent.click(window);
+    await page.waitForChanges();
     expect(mockCallback).toHaveBeenCalled();
   });
-
-});
\ No newline at end of file
+});
diff --git a/packages/core/src/components/event-list-item/event-list-item.scss b/packages/core/src/components/event-list-item/event-list-item.scss
index b19550e4f60..1e3f9d43c0a 100644
--- a/packages/core/src/components/event-list-item/event-list-item.scss
+++ b/packages/core/src/components/event-list-item/event-list-item.scss
@@ -1,19 +1,13 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-// @import '../../../scss/variables';
-// @import '../../../scss/theme';
-// @import '../../../scss/mixins/theme';
-// @import '../../../scss/mixins/hover';
-// @import '../../../scss/mixins/text-truncation';
 @import 'mixins/text-truncation';
 @import 'mixins/hover';
-@import 'variables';
-@import 'theme-base-colors';
+@import 'common-variables';
 
 $height-single-line: 2.5rem;
 
-.cw-event-list-item {
+.ix-event-list-item {
   display: flex;
   align-items: center;
   position: relative;
@@ -61,8 +55,6 @@ $height-single-line: 2.5rem;
     margin-right: $small-space;
     opacity: 0.6;
     align-self: center;
-
-    // @include themed-font-color;
   }
 
   .event-content {
@@ -82,11 +74,7 @@ $height-single-line: 2.5rem;
   }
 
   &.selected {
-    background-color: $color-light-teal-15;
-
-    & .cui-event-list-item-content-container {
-      border-color: $color-light-teal;
-    }
+    background-color: var(--theme-event-item--background--selected);
   }
 
   &[disabled],
diff --git a/packages/core/src/components/event-list-item/event-list-item.tsx b/packages/core/src/components/event-list-item/event-list-item.tsx
index 66304333e15..debb3c7ff86 100644
--- a/packages/core/src/components/event-list-item/event-list-item.tsx
+++ b/packages/core/src/components/event-list-item/event-list-item.tsx
@@ -2,15 +2,23 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, Element, Event, EventEmitter, h, Listen, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Listen,
+  Prop,
+} from '@stencil/core';
 
 @Component({
-  tag: 'cw-event-list-item',
+  tag: 'ix-event-list-item',
   styleUrl: 'event-list-item.scss',
   scoped: false,
 })
 export class EventListItem {
-  @Element() el!: HTMLCwEventListItemElement;
+  @Element() el!: HTMLIxEventListItemElement;
 
   /**
    * Color of the status indicator.
@@ -55,14 +63,19 @@ export class EventListItem {
     return (
       <div
         class={{
-          'cw-event-list-item': true,
-          'selected': this.selected,
-          'disabled': this.disabled,
+          'ix-event-list-item': true,
+          selected: this.selected,
+          disabled: this.disabled,
         }}
       >
         <div
           class={`indicator ${!this.color ? 'indicator-empty' : ''}`}
-          style={{ 'background-color': this.color ? `var(--theme-${this.color})` : 'inherit', 'opacity': `${this.disabled ? 0.4 : this.opacity}` }}
+          style={{
+            'background-color': this.color
+              ? `var(--theme-${this.color})`
+              : 'inherit',
+            opacity: `${this.disabled ? 0.4 : this.opacity}`,
+          }}
         ></div>
 
         <div class="cui-event-list-item-content-container">
diff --git a/packages/core/src/components/event-list-item/readme.md b/packages/core/src/components/event-list-item/readme.md
index 2afbc1c3ee3..29e9a6735bf 100644
--- a/packages/core/src/components/event-list-item/readme.md
+++ b/packages/core/src/components/event-list-item/readme.md
@@ -1,4 +1,4 @@
-# cw-event-list-item
+# ix-event-list-item
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/event-list/event-list.scss b/packages/core/src/components/event-list/event-list.scss
index f513958109d..f3f870fd6ac 100644
--- a/packages/core/src/components/event-list/event-list.scss
+++ b/packages/core/src/components/event-list/event-list.scss
@@ -17,17 +17,17 @@ ul {
 
 :host:not(.item-size-s),
 :host:not(.item-size-l) {
-  ::slotted(& .cw-event-list-item) {
+  ::slotted(& .ix-event-list-item) {
     display: none;
   }
 }
 
-:host.chevron ::slotted(* .cw-event-list-item) .chevron-icon {
+:host.chevron ::slotted(* .ix-event-list-item) .chevron-icon {
   display: initial;
 }
 
 .item-size-l {
-  ::slotted(* .cw-event-list-item) {
+  ::slotted(* .ix-event-list-item) {
     height: $item-height-l;
     max-height: $item-height-l;
 
@@ -40,7 +40,7 @@ ul {
 }
 
 .compact {
-  ::slotted(* .cw-event-list-item) {
+  ::slotted(* .ix-event-list-item) {
     margin-bottom: 0px;
     border-radius: 0px;
 
diff --git a/packages/core/src/components/event-list/event-list.tsx b/packages/core/src/components/event-list/event-list.tsx
index 42abd3de3c7..6d7d90a406d 100644
--- a/packages/core/src/components/event-list/event-list.tsx
+++ b/packages/core/src/components/event-list/event-list.tsx
@@ -7,17 +7,19 @@ import { createMutationObserver } from '../utils/mutation-observer';
 import { convertToRemString } from '../utils/rwd.util';
 
 @Component({
-  tag: 'cw-event-list',
+  tag: 'ix-event-list',
   styleUrl: 'event-list.scss',
   scoped: true,
 })
 export class EventList {
-  private readonly mutationObserver = createMutationObserver(this.onMutation.bind(this));
+  private readonly mutationObserver = createMutationObserver(
+    this.onMutation.bind(this)
+  );
 
   private static readonly fadeOutDuration = 50;
   private static readonly fadeInDuration = 150;
 
-  @Element() el!: HTMLCwEventListElement;
+  @Element() el!: HTMLIxEventListElement;
 
   /**
    * Determines the height of list items.
@@ -49,7 +51,7 @@ export class EventList {
 
     if (typeof this.itemHeight === 'number') {
       const height = convertToRemString(this.itemHeight);
-      this.el.querySelectorAll('.cw-event-list-item').forEach(item => {
+      this.el.querySelectorAll('.ix-event-list-item').forEach((item) => {
         item.classList.add('d-flex');
         this.setCustomHeight(item as HTMLElement, height);
       });
@@ -64,17 +66,17 @@ export class EventList {
         const height = convertToRemString(this.itemHeight);
 
         mutationRecords
-          .filter(mutation => mutation.type === 'childList')
-          .forEach(mutation =>
-            mutation.addedNodes.forEach(item => {
+          .filter((mutation) => mutation.type === 'childList')
+          .forEach((mutation) =>
+            mutation.addedNodes.forEach((item) => {
               const itemHtml = item as HTMLElement;
-              if (!itemHtml.classList?.contains('cw-event-list-item')) {
+              if (!itemHtml.classList?.contains('ix-event-list-item')) {
                 return;
               }
 
               itemHtml.classList.add('d-flex');
               this.setCustomHeight(itemHtml, height);
-            }),
+            })
           );
       }
 
@@ -100,7 +102,9 @@ export class EventList {
       { opacity: 0 },
     ];
     const listElement = this.el.querySelector('ul');
-    return listElement.animate(keyframes, { duration: EventList.fadeOutDuration }).finished;
+    return listElement.animate(keyframes, {
+      duration: EventList.fadeOutDuration,
+    }).finished;
   }
 
   private triggerFadeIn() {
@@ -108,11 +112,15 @@ export class EventList {
       return;
     }
 
-    const listItems = this.el.querySelectorAll('.cw-event-list-item');
+    const listItems = this.el.querySelectorAll('.ix-event-list-item');
     listItems.forEach((e, i) => {
       const delay = i * 80;
       const offset = delay / (delay + EventList.fadeInDuration);
-      const keyframes = [{ opacity: 0 }, { opacity: 0, easing: 'ease-out', offset }, { opacity: 1 }];
+      const keyframes = [
+        { opacity: 0 },
+        { opacity: 0, easing: 'ease-out', offset },
+        { opacity: 1 },
+      ];
       const options = {
         duration: EventList.fadeInDuration + delay,
         iterations: 1,
@@ -123,7 +131,14 @@ export class EventList {
 
   render() {
     return (
-      <Host class={{ 'item-size-s': this.itemHeight === 'S', 'item-size-l': this.itemHeight === 'L', 'compact': this.compact, 'chevron': this.chevron }}>
+      <Host
+        class={{
+          'item-size-s': this.itemHeight === 'S',
+          'item-size-l': this.itemHeight === 'L',
+          compact: this.compact,
+          chevron: this.chevron,
+        }}
+      >
         <ul>
           <slot></slot>
         </ul>
diff --git a/packages/core/src/components/event-list/readme.md b/packages/core/src/components/event-list/readme.md
index c3aebf9f971..7c8b6fb2d07 100644
--- a/packages/core/src/components/event-list/readme.md
+++ b/packages/core/src/components/event-list/readme.md
@@ -1,4 +1,4 @@
-# cw-event-list
+# ix-event-list
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/event-list/test/basic/index.html b/packages/core/src/components/event-list/test/basic/index.html
index ef71fbb541c..26f22b3fa18 100644
--- a/packages/core/src/components/event-list/test/basic/index.html
+++ b/packages/core/src/components/event-list/test/basic/index.html
@@ -11,12 +11,12 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-event-list>
-      <cw-event-list-item color="color-primary">Text 1</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Text 2</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Text 3</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Text 4</cw-event-list-item>
-    </cw-event-list>
+    <ix-event-list>
+      <ix-event-list-item color="color-primary">Text 1</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 2</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 3</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 4</ix-event-list-item>
+    </ix-event-list>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/event-list/test/compact/index.html b/packages/core/src/components/event-list/test/compact/index.html
index d9456a5281e..b1ea2120273 100644
--- a/packages/core/src/components/event-list/test/compact/index.html
+++ b/packages/core/src/components/event-list/test/compact/index.html
@@ -11,12 +11,12 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-event-list compact>
-      <cw-event-list-item color="color-primary">Text 1</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Text 2</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Text 3</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Text 4</cw-event-list-item>
-    </cw-event-list>
+    <ix-event-list compact>
+      <ix-event-list-item color="color-primary">Text 1</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 2</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 3</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 4</ix-event-list-item>
+    </ix-event-list>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/event-list/test/custom-height/index.html b/packages/core/src/components/event-list/test/custom-height/index.html
index 00f0dead614..fe3653b0d1f 100644
--- a/packages/core/src/components/event-list/test/custom-height/index.html
+++ b/packages/core/src/components/event-list/test/custom-height/index.html
@@ -11,10 +11,10 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-event-list item-height="L">
-      <cw-event-list-item color="color-primary">Test 1</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Test 2</cw-event-list-item>
-    </cw-event-list>
+    <ix-event-list item-height="L">
+      <ix-event-list-item color="color-primary">Test 1</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Test 2</ix-event-list-item>
+    </ix-event-list>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/event-list/test/event-list.spec.tsx b/packages/core/src/components/event-list/test/event-list.spec.tsx
index 9275291f67d..81afab5a153 100644
--- a/packages/core/src/components/event-list/test/event-list.spec.tsx
+++ b/packages/core/src/components/event-list/test/event-list.spec.tsx
@@ -19,17 +19,17 @@ describe('event-list', () => {
     const page = await newSpecPage({
       components: [EventList],
       html: `
-        <cw-event-list>
-          <cw-event-list-item  />
-        </cw-event-list>
+        <ix-event-list>
+          <ix-event-list-item  />
+        </ix-event-list>
       `,
     });
     expect(page.root).toEqualHtml(`
-      <cw-event-list class="item-size-s">
+      <ix-event-list class="item-size-s">
         <ul>
-          <cw-event-list-item />
+          <ix-event-list-item />
         </ul>
-      </cw-event-list>
+      </ix-event-list>
     `);
   });
 
@@ -37,24 +37,26 @@ describe('event-list', () => {
     const page = await newSpecPage({
       components: [EventList],
       html: `
-        <cw-event-list>
-          <cw-event-list-item  />
-        </cw-event-list>
+        <ix-event-list>
+          <ix-event-list-item  />
+        </ix-event-list>
       `,
     });
 
-    const eventList = page.doc.querySelector('cw-event-list') as HTMLCwEventListElement;
+    const eventList = page.doc.querySelector(
+      'ix-event-list'
+    ) as HTMLIxEventListElement;
 
     eventList.compact = true;
 
     await page.waitForChanges();
 
     expect(page.root).toEqualHtml(`
-      <cw-event-list class="compact item-size-s">
+      <ix-event-list class="compact item-size-s">
         <ul>
-          <cw-event-list-item />
+          <ix-event-list-item />
         </ul>
-      </cw-event-list>
+      </ix-event-list>
     `);
   });
 
@@ -64,9 +66,9 @@ describe('event-list', () => {
       html: `<div></div>`,
     });
 
-    const eventList = page.doc.createElement('cw-event-list');
-    const eventListItem = page.doc.createElement('cw-event-list-item');
-    eventListItem.classList.add('cw-event-list-item');
+    const eventList = page.doc.createElement('ix-event-list');
+    const eventListItem = page.doc.createElement('ix-event-list-item');
+    eventListItem.classList.add('ix-event-list-item');
 
     eventListItem.animate = jest.fn();
 
@@ -78,11 +80,11 @@ describe('event-list', () => {
     expect(eventListItem.animate).toHaveBeenCalled();
 
     expect(page.root).toEqualHtml(`
-    <cw-event-list class="item-size-s">
+    <ix-event-list class="item-size-s">
       <ul>
-        <cw-event-list-item class="cw-event-list-item"></cw-event-list-item>
+        <ix-event-list-item class="ix-event-list-item"></ix-event-list-item>
       </ul>
-    </cw-event-list>
+    </ix-event-list>
     `);
   });
 
@@ -92,11 +94,11 @@ describe('event-list', () => {
       html: `<div></div>`,
     });
 
-    const eventList = page.doc.createElement('cw-event-list');
+    const eventList = page.doc.createElement('ix-event-list');
     eventList.animated = false;
 
-    const eventListItem = page.doc.createElement('cw-event-list-item');
-    eventListItem.classList.add('cw-event-list-item');
+    const eventListItem = page.doc.createElement('ix-event-list-item');
+    eventListItem.classList.add('ix-event-list-item');
 
     eventListItem.animate = jest.fn();
 
@@ -108,11 +110,11 @@ describe('event-list', () => {
     expect(eventListItem.animate).not.toHaveBeenCalled();
 
     expect(page.root).toEqualHtml(`
-    <cw-event-list class="item-size-s">
+    <ix-event-list class="item-size-s">
       <ul>
-        <cw-event-list-item class="cw-event-list-item"></cw-event-list-item>
+        <ix-event-list-item class="ix-event-list-item"></ix-event-list-item>
       </ul>
-    </cw-event-list>
+    </ix-event-list>
     `);
   });
 });
diff --git a/packages/core/src/components/expanding-search/expanding-search.scss b/packages/core/src/components/expanding-search/expanding-search.scss
index 859087a4e91..274a5600c51 100644
--- a/packages/core/src/components/expanding-search/expanding-search.scss
+++ b/packages/core/src/components/expanding-search/expanding-search.scss
@@ -2,9 +2,9 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/hover';
-@import '../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/hover';
+@import 'mixins/text-truncation';
 
 $container-width: 11.5625rem;
 
diff --git a/packages/core/src/components/expanding-search/expanding-search.tsx b/packages/core/src/components/expanding-search/expanding-search.tsx
index 3d6d040162c..8f538657844 100644
--- a/packages/core/src/components/expanding-search/expanding-search.tsx
+++ b/packages/core/src/components/expanding-search/expanding-search.tsx
@@ -13,7 +13,7 @@ import {
 } from '@stencil/core';
 
 @Component({
-  tag: 'cw-expanding-search',
+  tag: 'ix-expanding-search',
   styleUrl: 'expanding-search.scss',
   scoped: true,
 })
@@ -106,14 +106,14 @@ export class ExpandingSearch {
           onClick={() => this.expandInput()}
           tabindex={this.expanded ? -1 : 0}
         >
-          <cw-icon
+          <ix-icon
             class="btn-search-icon"
             name={this.icon}
             size={this.expanded ? '16' : '24'}
             color={
               this.hasFocus ? 'input-search-icon--color--focus' : undefined
             }
-          ></cw-icon>
+          ></ix-icon>
         </button>
 
         <div
@@ -148,7 +148,7 @@ export class ExpandingSearch {
           />
 
           {this.isFieldChanged ? (
-            <cw-icon-button
+            <ix-icon-button
               class="btn-clear"
               icon="clear"
               ghost={true}
diff --git a/packages/core/src/components/expanding-search/test/__snapshots__/expanding-search.spec.tsx.snap b/packages/core/src/components/expanding-search/test/__snapshots__/expanding-search.spec.tsx.snap
index 15847901405..77a1cf1a2e9 100644
--- a/packages/core/src/components/expanding-search/test/__snapshots__/expanding-search.spec.tsx.snap
+++ b/packages/core/src/components/expanding-search/test/__snapshots__/expanding-search.spec.tsx.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`cw-expanding-search renders 1`] = `
-<cw-expanding-search>
+exports[`ix-expanding-search renders 1`] = `
+<ix-expanding-search>
   <div class="exp-container">
     <button class="btn btn-icon btn-invisible-secondary btn-search" data-testid="button">
-      <cw-icon class="btn-search-icon" name="search" size="24"></cw-icon>
+      <ix-icon class="btn-search-icon" name="search" size="24"></ix-icon>
     </button>
     <div class="collapsed disable-pointer input-container" data-testid="input-wrapper">
       <input class="disable-pointer form-control opacityBefore" data-testid="input" placeholder="Enter text here" type="text" value="">
     </div>
   </div>
-</cw-expanding-search>
+</ix-expanding-search>
 `;
diff --git a/packages/core/src/components/expanding-search/test/basic/index.html b/packages/core/src/components/expanding-search/test/basic/index.html
index b8527d29ff6..3b6eedea0b9 100644
--- a/packages/core/src/components/expanding-search/test/basic/index.html
+++ b/packages/core/src/components/expanding-search/test/basic/index.html
@@ -11,7 +11,7 @@
     <title>Stencil Component Starter</title>
   </head>
   <body style="margin: 2rem">
-    <cw-expanding-search placeholder="Search..."></cw-expanding-search>
+    <ix-expanding-search placeholder="Search..."></ix-expanding-search>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/expanding-search/test/expanding-search.spec.tsx b/packages/core/src/components/expanding-search/test/expanding-search.spec.tsx
index 7615ba70a63..efee8ed7622 100644
--- a/packages/core/src/components/expanding-search/test/expanding-search.spec.tsx
+++ b/packages/core/src/components/expanding-search/test/expanding-search.spec.tsx
@@ -3,10 +3,10 @@
  */
 
 import { newSpecPage } from '@stencil/core/testing';
-import { ExpandingSearch } from '../expanding-search';
 import { fireEvent } from '@testing-library/dom';
+import { ExpandingSearch } from '../expanding-search';
 
-describe('cw-expanding-search', () => {
+describe('ix-expanding-search', () => {
   let page: any;
   let expandingSearch: any;
   let button: any;
@@ -16,9 +16,9 @@ describe('cw-expanding-search', () => {
   beforeEach(async () => {
     page = await newSpecPage({
       components: [ExpandingSearch],
-      html: `<cw-expanding-search></cw-expanding-search>`,
+      html: `<ix-expanding-search></ix-expanding-search>`,
     });
-    expandingSearch = page.doc.querySelector('cw-expanding-search');
+    expandingSearch = page.doc.querySelector('ix-expanding-search');
     button = page.doc.querySelector('[data-testid="button"]');
     input = page.doc.querySelector('[data-testid="input"]');
     inputWrapper = page.doc.querySelector('[data-testid="input-wrapper"]');
diff --git a/packages/core/src/components/filter-chip/filter-chip.scss b/packages/core/src/components/filter-chip/filter-chip.scss
index 56872d9d611..7deec5a8c7f 100644
--- a/packages/core/src/components/filter-chip/filter-chip.scss
+++ b/packages/core/src/components/filter-chip/filter-chip.scss
@@ -1,9 +1,9 @@
 /**
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-@import 'variables';
-@import '../../../scss/v7/mixins/hover';
-@import '../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/hover';
+@import 'mixins/text-truncation';
 
 :host {
   display: flex;
diff --git a/packages/core/src/components/filter-chip/filter-chip.tsx b/packages/core/src/components/filter-chip/filter-chip.tsx
index b0c53ac01da..c385b3b5444 100644
--- a/packages/core/src/components/filter-chip/filter-chip.tsx
+++ b/packages/core/src/components/filter-chip/filter-chip.tsx
@@ -1,15 +1,23 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+} from '@stencil/core';
 
 @Component({
-  tag: 'cw-filter-chip',
+  tag: 'ix-filter-chip',
   styleUrl: 'filter-chip.scss',
   scoped: true,
 })
 export class FilterChip {
-  @Element() el: HTMLCwFilterChipElement;
+  @Element() el: HTMLIxFilterChipElement;
 
   /**
    * If true the filter chip will be in disabled state
@@ -33,8 +41,12 @@ export class FilterChip {
         <div class="slot-container">
           <slot></slot>
         </div>
-        <button disabled={this.disabled} class="btn btn-invisible-secondary btn-oval" onClick={e => this.onCloseClick(e)}>
-          <cw-icon name="close-small" size="16"></cw-icon>
+        <button
+          disabled={this.disabled}
+          class="btn btn-invisible-secondary btn-oval"
+          onClick={(e) => this.onCloseClick(e)}
+        >
+          <ix-icon name="close-small" size="16"></ix-icon>
         </button>
       </Host>
     );
diff --git a/packages/core/src/components/flip-tile-content/flip-tile-content.tsx b/packages/core/src/components/flip-tile-content/flip-tile-content.tsx
index 012189a5b1a..6fa4feb4bdf 100644
--- a/packages/core/src/components/flip-tile-content/flip-tile-content.tsx
+++ b/packages/core/src/components/flip-tile-content/flip-tile-content.tsx
@@ -1,15 +1,14 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Host, h } from '@stencil/core';
+import { Component, h, Host } from '@stencil/core';
 
 @Component({
-  tag: 'cw-flip-tile-content',
+  tag: 'ix-flip-tile-content',
   styleUrl: 'flip-tile-content.css',
   shadow: true,
 })
 export class CwFlipTileContent {
-
   render() {
     return (
       <Host>
@@ -17,5 +16,4 @@ export class CwFlipTileContent {
       </Host>
     );
   }
-
 }
diff --git a/packages/core/src/components/flip-tile-content/readme.md b/packages/core/src/components/flip-tile-content/readme.md
index 7bd31b93313..d7bdaa6a11a 100644
--- a/packages/core/src/components/flip-tile-content/readme.md
+++ b/packages/core/src/components/flip-tile-content/readme.md
@@ -1,6 +1,4 @@
-# cw-flip-tile-content
-
-
+# ix-flip-tile-content
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/flip-tile/flip-tile.scss b/packages/core/src/components/flip-tile/flip-tile.scss
index bc2499257d6..be20766c066 100644
--- a/packages/core/src/components/flip-tile/flip-tile.scss
+++ b/packages/core/src/components/flip-tile/flip-tile.scss
@@ -1,9 +1,9 @@
 /**
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/animations';
-@import '../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/animations';
+@import 'mixins/text-truncation';
 
 @include keyframes(flip-animation) {
   0% {
@@ -53,7 +53,8 @@
     height: 100%;
     background-color: var(--theme-blind-base--background);
     border: solid 1px var(--theme-blind-base--border-color);
-    border-radius: var(--theme-flip-tile--border-radius) var(--theme-flip-tile--border-radius) 0 0;
+    border-radius: var(--theme-flip-tile--border-radius)
+      var(--theme-flip-tile--border-radius) 0 0;
     transform-style: preserve-3d;
 
     &.flip-animation-active {
@@ -120,7 +121,7 @@
     }
   }
 
-  &:hover .flip-tile-container .footer cw-icon {
+  &:hover .flip-tile-container .footer ix-icon {
     color: var(--theme-color-std-text);
   }
 }
diff --git a/packages/core/src/components/flip-tile/flip-tile.tsx b/packages/core/src/components/flip-tile/flip-tile.tsx
index d6e92aeb1ed..7b8912cd5d1 100644
--- a/packages/core/src/components/flip-tile/flip-tile.tsx
+++ b/packages/core/src/components/flip-tile/flip-tile.tsx
@@ -6,7 +6,7 @@ import { Component, Element, h, Host, Prop, State } from '@stencil/core';
 import { FlipTileState } from './flip-tile-state';
 
 @Component({
-  tag: 'cw-flip-tile',
+  tag: 'ix-flip-tile',
   styleUrl: 'flip-tile.scss',
   scoped: true,
 })
@@ -15,7 +15,7 @@ export class CwFlipTile {
   private contentContainerElement: HTMLDivElement;
   private contentItems: NodeList;
 
-  @Element() hostElement: HTMLCwFlipTileElement;
+  @Element() hostElement: HTMLIxFlipTileElement;
 
   @State() index = 0;
 
@@ -32,7 +32,9 @@ export class CwFlipTile {
   @Prop() footer: string;
 
   componentDidLoad() {
-    this.contentItems = this.contentContainerElement.querySelectorAll('cw-flip-tile-content');
+    this.contentItems = this.contentContainerElement.querySelectorAll(
+      'ix-flip-tile-content'
+    );
     this.contentItems.forEach((_, index) => {
       if (index !== this.index) {
         this.toggleContentItem(index);
@@ -75,10 +77,10 @@ export class CwFlipTile {
         <div
           class={{
             'flip-tile-container': true,
-            'info': this.state === FlipTileState.Info,
-            'warning': this.state === FlipTileState.Warning,
-            'alarm': this.state === FlipTileState.Alarm,
-            'primary': this.state === FlipTileState.Primary,
+            info: this.state === FlipTileState.Info,
+            warning: this.state === FlipTileState.Warning,
+            alarm: this.state === FlipTileState.Alarm,
+            primary: this.state === FlipTileState.Primary,
             'flip-animation-active': this.isFlipAnimationActive,
           }}
         >
@@ -86,18 +88,27 @@ export class CwFlipTile {
             <div class="header-slot-container text-l-title">
               <slot name="header"></slot>
             </div>
-            <cw-icon-button icon="eye" variant='Primary' ghost onClick={() => this.toggleIndex()}>
-            </cw-icon-button>
+            <ix-icon-button
+              icon="eye"
+              variant="Primary"
+              ghost
+              onClick={() => this.toggleIndex()}
+            ></ix-icon-button>
           </div>
 
-          <div class="content-container" ref={el => (this.contentContainerElement = el)}>
+          <div
+            class="content-container"
+            ref={(el) => (this.contentContainerElement = el)}
+          >
             <slot></slot>
           </div>
           <div
             class={{
-              'footer': true,
+              footer: true,
               'contrast-light': this.state === FlipTileState.Warning,
-              'contrast-dark': this.state === FlipTileState.Info || this.state === FlipTileState.Alarm,
+              'contrast-dark':
+                this.state === FlipTileState.Info ||
+                this.state === FlipTileState.Alarm,
             }}
           >
             <slot name="footer"></slot>
diff --git a/packages/core/src/components/flip-tile/readme.md b/packages/core/src/components/flip-tile/readme.md
index 7c1e1ff77bf..b8f18843a74 100644
--- a/packages/core/src/components/flip-tile/readme.md
+++ b/packages/core/src/components/flip-tile/readme.md
@@ -1,6 +1,4 @@
-# cw-flip-tile
-
-
+# ix-flip-tile
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/flip-tile/test/basic/index.html b/packages/core/src/components/flip-tile/test/basic/index.html
index 381cefe4f71..81db25c107d 100644
--- a/packages/core/src/components/flip-tile/test/basic/index.html
+++ b/packages/core/src/components/flip-tile/test/basic/index.html
@@ -19,51 +19,51 @@
         margin-top: '2rem';
       "
     >
-      <cw-flip-tile>
+      <ix-flip-tile>
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div class="d-flex align-items-center">
-            <cw-icon name="info" size="16"></cw-icon>2021-06-22
+            <ix-icon name="info" size="16"></ix-icon>2021-06-22
           </div>
         </div>
-      </cw-flip-tile>
-      <cw-flip-tile state="Primary">
+      </ix-flip-tile>
+      <ix-flip-tile state="Primary">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div class="d-flex align-items-center">
-            <cw-icon name="info" size="16"></cw-icon>2021-06-22
+            <ix-icon name="info" size="16"></ix-icon>2021-06-22
           </div>
         </div>
-      </cw-flip-tile>
-      <cw-flip-tile state="Info">
+      </ix-flip-tile>
+      <ix-flip-tile state="Info">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div class="d-flex align-items-center">
-            <cw-icon name="info" size="16"></cw-icon>2021-06-22
+            <ix-icon name="info" size="16"></ix-icon>2021-06-22
           </div>
         </div>
-      </cw-flip-tile>
-      <cw-flip-tile state="Warning">
+      </ix-flip-tile>
+      <ix-flip-tile state="Warning">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div class="d-flex align-items-center">
-            <cw-icon name="info" size="16"></cw-icon>2021-06-22
+            <ix-icon name="info" size="16"></ix-icon>2021-06-22
           </div>
         </div>
-      </cw-flip-tile>
-      <cw-flip-tile state="Alarm">
+      </ix-flip-tile>
+      <ix-flip-tile state="Alarm">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div class="d-flex align-items-center">
-            <cw-icon name="info" size="16"></cw-icon>2021-06-22
+            <ix-icon name="info" size="16"></ix-icon>2021-06-22
           </div>
         </div>
-      </cw-flip-tile>
+      </ix-flip-tile>
     </div>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
diff --git a/packages/core/src/components/group-dropdown-item/group-dropdown-item.tsx b/packages/core/src/components/group-dropdown-item/group-dropdown-item.tsx
index 26e924bf052..75614ce801e 100644
--- a/packages/core/src/components/group-dropdown-item/group-dropdown-item.tsx
+++ b/packages/core/src/components/group-dropdown-item/group-dropdown-item.tsx
@@ -4,7 +4,7 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-group-dropdown-item',
+  tag: 'ix-group-dropdown-item',
   styleUrl: 'group-dropdown-item.scss',
   scoped: true,
 })
@@ -22,9 +22,9 @@ export class GroupDropdownItem {
   render() {
     return (
       <Host>
-        <cw-dropdown-item label={this.label} icon={this.icon}>
+        <ix-dropdown-item label={this.label} icon={this.icon}>
           <slot></slot>
-        </cw-dropdown-item>
+        </ix-dropdown-item>
       </Host>
     );
   }
diff --git a/packages/core/src/components/group-dropdown-item/readme.md b/packages/core/src/components/group-dropdown-item/readme.md
index 6494be239a2..79fe43bb7ed 100644
--- a/packages/core/src/components/group-dropdown-item/readme.md
+++ b/packages/core/src/components/group-dropdown-item/readme.md
@@ -1,6 +1,4 @@
-# cw-group-dropdown-item
-
-
+# ix-group-dropdown-item
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/group-item/group-item.scss b/packages/core/src/components/group-item/group-item.scss
index ba4fa4d0c5e..1d631fecdea 100644
--- a/packages/core/src/components/group-item/group-item.scss
+++ b/packages/core/src/components/group-item/group-item.scss
@@ -2,10 +2,10 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/fonts';
-@import '../../../scss/v7/mixins/hover';
-@import '../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/fonts';
+@import 'mixins/hover';
+@import 'mixins/text-truncation';
 
 :host {
   display: flex;
@@ -26,7 +26,7 @@
     border-bottom-right-radius: 0.25rem;
   }
 
-  cw-icon {
+  ix-icon {
     margin-right: $tiny-space;
     margin-top: -0.125rem;
   }
@@ -44,7 +44,8 @@
   }
 
   .group-entry-text-secondary {
-    &, span {
+    &,
+    span {
       @include ellipsis;
     }
 
diff --git a/packages/core/src/components/group-item/group-item.tsx b/packages/core/src/components/group-item/group-item.tsx
index 6b23bebd18e..d7f99d49a46 100644
--- a/packages/core/src/components/group-item/group-item.tsx
+++ b/packages/core/src/components/group-item/group-item.tsx
@@ -1,15 +1,24 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Listen,
+  Prop,
+} from '@stencil/core';
 
 @Component({
-  tag: 'cw-group-item',
+  tag: 'ix-group-item',
   styleUrl: 'group-item.scss',
   scoped: true,
 })
 export class GroupItem {
-  @Element() hostElement!: HTMLCwGroupItemElement;
+  @Element() hostElement!: HTMLIxGroupItemElement;
 
   /**
    * Group item icon
@@ -45,7 +54,7 @@ export class GroupItem {
   /**
    * Selection changed
    */
-  @Event() selectedChanged: EventEmitter<HTMLCwGroupItemElement>;
+  @Event() selectedChanged: EventEmitter<HTMLIxGroupItemElement>;
 
   /**
    * Index
@@ -64,13 +73,13 @@ export class GroupItem {
     return (
       <Host
         class={{
-          'selected': this.selected && !this.suppressSelection,
+          selected: this.selected && !this.suppressSelection,
           'suppress-selection': this.suppressSelection,
         }}
         tabindex={this.focusable ? 0 : -1}
       >
         <div class="group-entry-selection-indicator"></div>
-        {this.icon ? <cw-icon size="16" name={this.icon}></cw-icon> : null}
+        {this.icon ? <ix-icon size="16" name={this.icon}></ix-icon> : null}
         {this.text ? (
           <span class="group-entry-text">
             <span title={this.text}>{this.text}</span>
diff --git a/packages/core/src/components/group-item/readme.md b/packages/core/src/components/group-item/readme.md
index e0e81f2ec82..ab13493cc83 100644
--- a/packages/core/src/components/group-item/readme.md
+++ b/packages/core/src/components/group-item/readme.md
@@ -1,6 +1,4 @@
-# cw-group-item
-
-
+# ix-group-item
 
 <!-- Auto Generated Below -->
 
@@ -22,7 +20,7 @@
 
 | Event             | Description       | Type                                  |
 | ----------------- | ----------------- | ------------------------------------- |
-| `selectedChanged` | Selection changed | `CustomEvent<HTMLCwGroupItemElement>` |
+| `selectedChanged` | Selection changed | `CustomEvent<HTMLIxGroupItemElement>` |
 
 
 ----------------------------------------------
diff --git a/packages/core/src/components/group/group.scss b/packages/core/src/components/group/group.scss
index b40d145c151..7a49da39c5f 100644
--- a/packages/core/src/components/group/group.scss
+++ b/packages/core/src/components/group/group.scss
@@ -2,10 +2,10 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/fonts';
-@import '../../../scss/v7/mixins/hover';
-@import '../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/fonts';
+@import 'mixins/hover';
+@import 'mixins/text-truncation';
 
 :host {
   @include ellipsis;
@@ -23,7 +23,7 @@
     margin-right: 5px;
     margin-left: auto;
 
-    cw-icon-button {
+    ix-icon-button {
       &::after {
         display: none;
       }
diff --git a/packages/core/src/components/group/group.tsx b/packages/core/src/components/group/group.tsx
index 9b9b5cb9f2f..7d29fd092ad 100644
--- a/packages/core/src/components/group/group.tsx
+++ b/packages/core/src/components/group/group.tsx
@@ -1,10 +1,20 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Listen,
+  Prop,
+  State,
+} from '@stencil/core';
 
 @Component({
-  tag: 'cw-group',
+  tag: 'ix-group',
   styleUrl: 'group.scss',
   scoped: true,
 })
@@ -60,14 +70,18 @@ export class Group {
    */
   @Event() collapsedChanged: EventEmitter<boolean>;
 
-  @Element() hostElement!: HTMLCwGroupElement;
+  @Element() hostElement!: HTMLIxGroupElement;
 
   get dropdownItems() {
-    return Array.from(this.hostElement.querySelectorAll('cw-group-dropdown-item'));
+    return Array.from(
+      this.hostElement.querySelectorAll('ix-group-dropdown-item')
+    );
   }
 
-  get groupItems(): Array<HTMLCwGroupItemElement> {
-    return Array.from(this.hostElement.querySelectorAll('cw-group-item:not(.footer)'));
+  get groupItems(): Array<HTMLIxGroupItemElement> {
+    return Array.from(
+      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')
+    );
   }
 
   get groupContent() {
@@ -99,8 +113,8 @@ export class Group {
         } else {
           this.selected = !this.selected;
         }
-      } else if (targetElement.matches('cw-group-item')) {
-        const groupItem = targetElement as HTMLCwGroupItemElement;
+      } else if (targetElement.matches('ix-group-item')) {
+        const groupItem = targetElement as HTMLIxGroupItemElement;
         groupItem.selected = !groupItem.selected;
       }
     }
@@ -151,7 +165,10 @@ export class Group {
       item.selected = index === this.index;
       item.index = index;
       item.classList.remove('last');
-      if (!this.footer?.children.length && index === this.groupItems.length - 1) {
+      if (
+        !this.footer?.children.length &&
+        index === this.groupItems.length - 1
+      ) {
         item.classList.add('last');
       }
     });
@@ -162,9 +179,12 @@ export class Group {
   }
 
   componentDidLoad() {
-    this.groupContent.addEventListener('selectedChanged', (evt: CustomEvent<HTMLCwGroupItemElement>) => {
-      this.onItemClick(evt.detail.index);
-    });
+    this.groupContent.addEventListener(
+      'selectedChanged',
+      (evt: CustomEvent<HTMLIxGroupItemElement>) => {
+        this.onItemClick(evt.detail.index);
+      }
+    );
   }
 
   render() {
@@ -173,14 +193,21 @@ export class Group {
         <div
           class={{
             'group-header': true,
-            'expand': !this.collapsed,
-            'selected': this.selected,
+            expand: !this.collapsed,
+            selected: this.selected,
           }}
           tabindex="0"
         >
-          <div class="group-header-clickable" onClick={e => this.onHeaderClick(e)}>
+          <div
+            class="group-header-clickable"
+            onClick={(e) => this.onHeaderClick(e)}
+          >
             <div class="group-header-selection-indicator"></div>
-            <cw-icon class="btn-expand-header" name={`chevron-${this.collapsed ? 'right' : 'down'}-small`} onClick={e => this.onExpandClick(e)}></cw-icon>
+            <ix-icon
+              class="btn-expand-header"
+              name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}
+              onClick={(e) => this.onExpandClick(e)}
+            ></ix-icon>
             <div class="group-header-content">
               {this.header ? (
                 <div class="group-header-props-container">
@@ -196,10 +223,15 @@ export class Group {
             </div>
           </div>
           <div class={{ 'group-header-context-button': true, 'd-none': false }}>
-            <cw-icon-button ref={ref => (this.dropdownTriggerRef = ref)} size="24" ghost={true} icon="context-menu"></cw-icon-button>
-            <cw-dropdown trigger={this.dropdownTriggerRef}>
+            <ix-icon-button
+              ref={(ref) => (this.dropdownTriggerRef = ref)}
+              size="24"
+              ghost={true}
+              icon="context-menu"
+            ></ix-icon-button>
+            <ix-dropdown trigger={this.dropdownTriggerRef}>
               <slot name="dropdown"></slot>
-            </cw-dropdown>
+            </ix-dropdown>
           </div>
         </div>
         <div
@@ -211,9 +243,13 @@ export class Group {
           <slot></slot>
         </div>
         <div class="d-none">
-          <cw-group-item class="footer last" suppressSelection={true} focusable={false}>
+          <ix-group-item
+            class="footer last"
+            suppressSelection={true}
+            focusable={false}
+          >
             <slot name="footer"></slot>
-          </cw-group-item>
+          </ix-group-item>
         </div>
       </Host>
     );
diff --git a/packages/core/src/components/group/readme.md b/packages/core/src/components/group/readme.md
index f17ffc551c1..a94e62b125c 100644
--- a/packages/core/src/components/group/readme.md
+++ b/packages/core/src/components/group/readme.md
@@ -1,6 +1,4 @@
-# cw-group
-
-
+# ix-group
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/group/test/basic/index.html b/packages/core/src/components/group/test/basic/index.html
index 138ff687979..7e54b8e27d8 100644
--- a/packages/core/src/components/group/test/basic/index.html
+++ b/packages/core/src/components/group/test/basic/index.html
@@ -11,11 +11,11 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-group header="Header text" sub-header="Subheader text">
-      <cw-group-item text="Example text 1"></cw-group-item>
-      <cw-group-item text="Example text 2"></cw-group-item>
-      <cw-group-item text="Example text 3"></cw-group-item>
-    </cw-group>
+    <ix-group header="Header text" sub-header="Subheader text">
+      <ix-group-item text="Example text 1"></ix-group-item>
+      <ix-group-item text="Example text 2"></ix-group-item>
+      <ix-group-item text="Example text 3"></ix-group-item>
+    </ix-group>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/icon-button/icon-button.tsx b/packages/core/src/components/icon-button/icon-button.tsx
index 4803662ed28..5ec753f87ff 100644
--- a/packages/core/src/components/icon-button/icon-button.tsx
+++ b/packages/core/src/components/icon-button/icon-button.tsx
@@ -6,7 +6,7 @@ import { getButtonClasses } from '../button/base-button';
 import { Button } from '../button/button';
 
 @Component({
-  tag: 'cw-icon-button',
+  tag: 'ix-icon-button',
   scoped: true,
 })
 export class IconButton implements Button {
@@ -66,14 +66,22 @@ export class IconButton implements Button {
     return {
       'btn-icon-xs': this.size === '12',
       'btn-icon-s': this.size === '16',
-      ...getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled),
+      ...getButtonClasses(
+        this.variant,
+        this.outline,
+        this.ghost || this.invisible,
+        true,
+        this.oval,
+        this.selected,
+        this.disabled
+      ),
     };
   }
 
   render() {
     return (
       <button class={this.getIconButtonClasses()}>
-        <cw-icon size={this.size} name={this.icon} color={this.color} />
+        <ix-icon size={this.size} name={this.icon} color={this.color} />
         <div style={{ display: 'none' }}>
           <slot></slot>
         </div>
diff --git a/packages/core/src/components/icon-button/readme.md b/packages/core/src/components/icon-button/readme.md
index fbac9c0741c..4914136b5e8 100644
--- a/packages/core/src/components/icon-button/readme.md
+++ b/packages/core/src/components/icon-button/readme.md
@@ -1,6 +1,4 @@
-# cw-icon-button
-
-
+# ix-icon-button
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/icon-button/test/basic/index.html b/packages/core/src/components/icon-button/test/basic/index.html
index b42046142bb..02042c2aae0 100644
--- a/packages/core/src/components/icon-button/test/basic/index.html
+++ b/packages/core/src/components/icon-button/test/basic/index.html
@@ -11,18 +11,18 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-icon-button icon="print"></cw-icon-button>
-    <cw-icon-button icon="print" size="16"></cw-icon-button>
-    <cw-icon-button icon="print" size="24"></cw-icon-button>
-    <cw-icon-button icon="print" size="32"></cw-icon-button>
+    <ix-icon-button icon="print"></ix-icon-button>
+    <ix-icon-button icon="print" size="16"></ix-icon-button>
+    <ix-icon-button icon="print" size="24"></ix-icon-button>
+    <ix-icon-button icon="print" size="32"></ix-icon-button>
 
-    <cw-icon-button icon="print" invisible size="16"></cw-icon-button>
-    <cw-icon-button icon="print" outline size="24"></cw-icon-button>
-    <cw-icon-button icon="print" size="32"></cw-icon-button>
+    <ix-icon-button icon="print" invisible size="16"></ix-icon-button>
+    <ix-icon-button icon="print" outline size="24"></ix-icon-button>
+    <ix-icon-button icon="print" size="32"></ix-icon-button>
 
-    <cw-icon-button icon="print" oval></cw-icon-button>
-    <cw-icon-button icon="print" oval invisible size="16"></cw-icon-button>
-    <cw-icon-button icon="print" oval outline size="24"></cw-icon-button>
+    <ix-icon-button icon="print" oval></ix-icon-button>
+    <ix-icon-button icon="print" oval invisible size="16"></ix-icon-button>
+    <ix-icon-button icon="print" oval outline size="24"></ix-icon-button>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/icon/icon.scss b/packages/core/src/components/icon/icon.scss
index e9a99b4ce93..f5a8b3825bd 100644
--- a/packages/core/src/components/icon/icon.scss
+++ b/packages/core/src/components/icon/icon.scss
@@ -2,7 +2,7 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import 'variables';
+@import 'common-variables';
 
 :host {
   display: inline-flex;
diff --git a/packages/core/src/components/icon/icon.tsx b/packages/core/src/components/icon/icon.tsx
index c4edc397702..806775e4217 100644
--- a/packages/core/src/components/icon/icon.tsx
+++ b/packages/core/src/components/icon/icon.tsx
@@ -4,7 +4,7 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-icon',
+  tag: 'ix-icon',
   styleUrl: 'icon.scss',
   scoped: true,
 })
@@ -39,7 +39,7 @@ export class CwIcon {
       >
         <i
           class={{
-            'glyph': true,
+            glyph: true,
             [`glyph-${this.name}`]: true,
             'glyph-12': this.size === '12',
             'glyph-16': this.size === '16',
diff --git a/packages/core/src/components/icon/readme.md b/packages/core/src/components/icon/readme.md
index 6b4da075f68..e82bc55e1cc 100644
--- a/packages/core/src/components/icon/readme.md
+++ b/packages/core/src/components/icon/readme.md
@@ -1,4 +1,4 @@
-# cw-icon
+# ix-icon
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/icon/test/basic/index.html b/packages/core/src/components/icon/test/basic/index.html
index 7279de87c60..0add8ec3e8d 100644
--- a/packages/core/src/components/icon/test/basic/index.html
+++ b/packages/core/src/components/icon/test/basic/index.html
@@ -11,10 +11,10 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-icon name="print"></cw-icon>
-    <cw-icon name="print" size="16"></cw-icon>
-    <cw-icon name="print" size="24"></cw-icon>
-    <cw-icon name="print" size="32"></cw-icon>
+    <ix-icon name="print"></ix-icon>
+    <ix-icon name="print" size="16"></ix-icon>
+    <ix-icon name="print" size="24"></ix-icon>
+    <ix-icon name="print" size="32"></ix-icon>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/icon/test/cw-icon.spec.tsx b/packages/core/src/components/icon/test/cw-icon.spec.tsx
index a48dc757bb8..d7c3e39167a 100644
--- a/packages/core/src/components/icon/test/cw-icon.spec.tsx
+++ b/packages/core/src/components/icon/test/cw-icon.spec.tsx
@@ -4,32 +4,32 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { CwIcon } from '../icon';
 
-describe('cw-icon', () => {
+describe('ix-icon', () => {
   it('renders', async () => {
     const page = await newSpecPage({
       components: [CwIcon],
-      html: `<cw-icon name="star"></cw-icon>`,
+      html: `<ix-icon name="star"></ix-icon>`,
     });
 
     expect(page.root).toEqualHtml(`
-      <cw-icon name="star" style="color: inherit;">
+      <ix-icon name="star" style="color: inherit;">
         <i class="glyph glyph-star"></i>
-      </cw-icon>
+      </ix-icon>
     `);
   });
 
   it('renders different sizes', async () => {
     const page = await newSpecPage({
       components: [CwIcon],
-      html: `<cw-icon name="star" size="16"></cw-icon>`,
+      html: `<ix-icon name="star" size="16"></ix-icon>`,
     });
 
     expect(page.root).toEqualHtml(
       `
-      <cw-icon name="star" class="size-16" size="16" style="color: inherit;">
+      <ix-icon name="star" class="size-16" size="16" style="color: inherit;">
         <i class="glyph glyph-16 glyph-star"></i>
-      </cw-icon>
-      `,
+      </ix-icon>
+      `
     );
   });
 });
diff --git a/packages/core/src/components/input-group/input-group.tsx b/packages/core/src/components/input-group/input-group.tsx
index 635932ea0fa..be484f27231 100644
--- a/packages/core/src/components/input-group/input-group.tsx
+++ b/packages/core/src/components/input-group/input-group.tsx
@@ -4,33 +4,35 @@
 import { Component, Element, h, Host } from '@stencil/core';
 
 @Component({
-  tag: 'cw-input-group',
+  tag: 'ix-input-group',
   styleUrl: 'input-group.scss',
   scoped: true,
 })
 export class InputGroup {
-  @Element() host!: HTMLCwInputGroupElement;
+  @Element() host!: HTMLIxInputGroupElement;
 
   componentDidRender() {
     let paddingRight = 15;
     let paddingLeft = 15;
-    this.host.querySelectorAll('[slot="input-end"]').forEach(item => {
+    this.host.querySelectorAll('[slot="input-end"]').forEach((item) => {
       item.classList.add('input-group-label');
       paddingRight += item.getBoundingClientRect().width;
     });
 
-    this.host.querySelectorAll('[slot="input-start"]').forEach(item => {
+    this.host.querySelectorAll('[slot="input-start"]').forEach((item) => {
       item.classList.add('input-group-label');
       paddingLeft += item.getBoundingClientRect().width;
     });
 
-    const inputElement = this.host.querySelector('input.form-control') as HTMLInputElement;
+    const inputElement = this.host.querySelector(
+      'input.form-control'
+    ) as HTMLInputElement;
 
     if (inputElement) {
       inputElement.style.paddingRight = paddingRight + 'px';
       inputElement.style.paddingLeft = paddingLeft + 'px';
     } else {
-      console.warn('You used the cw-input-group without an input-tag!');
+      console.warn('You used the ix-input-group without an input-tag!');
     }
   }
 
diff --git a/packages/core/src/components/input-group/readme.md b/packages/core/src/components/input-group/readme.md
index 46bdffbeb50..b6e92edecc8 100644
--- a/packages/core/src/components/input-group/readme.md
+++ b/packages/core/src/components/input-group/readme.md
@@ -1,6 +1,4 @@
-# cw-input-group
-
-
+# ix-input-group
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/input-group/test/basic/index.html b/packages/core/src/components/input-group/test/basic/index.html
index 6ea4afafc95..cfc3f6a6702 100644
--- a/packages/core/src/components/input-group/test/basic/index.html
+++ b/packages/core/src/components/input-group/test/basic/index.html
@@ -11,7 +11,7 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-input-group>
+    <ix-input-group>
       <span slot="input-start">Name</span>
       <input
         type="text"
@@ -20,7 +20,7 @@
       />
       <span slot="input-end">.00</span>
       <span slot="input-end">$</span>
-    </cw-input-group>
+    </ix-input-group>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss
index 2997615d49c..bb98dd1587d 100644
--- a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss
+++ b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.scss
@@ -2,9 +2,9 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/variables';
-@import '../../../scss/fonts';
-@import '../../../scss/mixins/text-truncation';
+@import 'common-variables';
+@import 'fonts';
+@import 'mixins/text-truncation';
 
 :host {
   position: absolute;
@@ -29,8 +29,7 @@
     align-items: center;
     min-width: 0;
 
-
-    cw-icon {
+    ix-icon {
       margin-left: $default-space;
       color: var(--theme-overlay-header--color);
     }
diff --git a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx
index d18ec24294c..b8d1c0757ce 100644
--- a/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx
+++ b/packages/core/src/components/map-navigation-overlay/map-navigation-overlay.tsx
@@ -4,7 +4,7 @@
 import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-map-navigation-overlay',
+  tag: 'ix-map-navigation-overlay',
   styleUrl: 'map-navigation-overlay.scss',
   scoped: true,
 })
@@ -39,16 +39,24 @@ export class MapNavigationOverlay {
               'd-none': this.color === 'undefined' || this.color === undefined,
             }}
             style={{
-              'background-color': this.color ? `var(--theme-${this.color})` : '',
+              'background-color': this.color
+                ? `var(--theme-${this.color})`
+                : '',
             }}
           ></div>
           <div class="overlay-header-content">
-            <cw-icon size="32" name={this.icon}></cw-icon>
+            <ix-icon size="32" name={this.icon}></ix-icon>
             <span class="overlay-header-title" title={this.name}>
               {this.name}
             </span>
           </div>
-          <cw-icon-button class="overlay-close" invisible icon="close" size="24" onClick={() => this.closeClick.emit()}></cw-icon-button>
+          <ix-icon-button
+            class="overlay-close"
+            invisible
+            icon="close"
+            size="24"
+            onClick={() => this.closeClick.emit()}
+          ></ix-icon-button>
         </div>
 
         <slot></slot>
diff --git a/packages/core/src/components/map-navigation-overlay/readme.md b/packages/core/src/components/map-navigation-overlay/readme.md
index a8788cfeaea..c47a10aec54 100644
--- a/packages/core/src/components/map-navigation-overlay/readme.md
+++ b/packages/core/src/components/map-navigation-overlay/readme.md
@@ -1,6 +1,4 @@
-# cw-map-navigation-overlay
-
-
+# ix-map-navigation-overlay
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/map-navigation-overlay/test/map-navigation-overlay.spec.tsx b/packages/core/src/components/map-navigation-overlay/test/map-navigation-overlay.spec.tsx
index 8597fbd91ca..8ce8c5828fd 100644
--- a/packages/core/src/components/map-navigation-overlay/test/map-navigation-overlay.spec.tsx
+++ b/packages/core/src/components/map-navigation-overlay/test/map-navigation-overlay.spec.tsx
@@ -13,11 +13,10 @@ describe('map-navigation-overlay', () => {
       components: [MapNavigationOverlay],
       html: `<map-navigation-overlay></map-navigation-overlay>`,
     });
-    mapNavigationOverlay = page.doc.querySelector('cw-map-navigation');
+    mapNavigationOverlay = page.doc.querySelector('ix-map-navigation');
   });
 
   it('renders', async () => {
     expect(page.root).toMatchSnapshot();
   });
-  
 });
diff --git a/packages/core/src/components/map-navigation/map-navigation.scss b/packages/core/src/components/map-navigation/map-navigation.scss
index 785eab1a83c..2827c2a5a58 100644
--- a/packages/core/src/components/map-navigation/map-navigation.scss
+++ b/packages/core/src/components/map-navigation/map-navigation.scss
@@ -2,9 +2,9 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/fonts';
-@import '../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/fonts';
+@import 'mixins/text-truncation';
 
 :host {
   $appHeaderHeight: 3.5rem;
@@ -36,7 +36,8 @@
     height: 100%;
     left: 4rem;
     background-color: var(--theme-color-1);
-    border-inline-end: 1px solid var(--theme-map-navigation-separator--background);
+    border-inline-end: 1px solid
+      var(--theme-map-navigation-separator--background);
     z-index: 99;
   }
 
diff --git a/packages/core/src/components/map-navigation/map-navigation.tsx b/packages/core/src/components/map-navigation/map-navigation.tsx
index 94ffe35d221..4b810876ee9 100644
--- a/packages/core/src/components/map-navigation/map-navigation.tsx
+++ b/packages/core/src/components/map-navigation/map-navigation.tsx
@@ -1,11 +1,21 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+  State,
+} from '@stencil/core';
 import anime from 'animejs';
 
 @Component({
-  tag: 'cw-map-navigation',
+  tag: 'ix-map-navigation',
   styleUrl: 'map-navigation.scss',
   scoped: true,
 })
@@ -13,7 +23,7 @@ export class MapNavigation {
   private static readonly defaultTime = 150;
   private static readonly slowTime = 500;
 
-  @Element() hostElement: HTMLCwMapNavigationElement;
+  @Element() hostElement: HTMLIxMapNavigationElement;
 
   /**
    * Application name
@@ -47,27 +57,27 @@ export class MapNavigation {
   @Event() contextMenuClick: EventEmitter<void>;
 
   get menu() {
-    return this.hostElement.querySelector('cw-menu');
+    return this.hostElement.querySelector('ix-menu');
   }
 
   get menuOverlay() {
-    return this.hostElement.querySelector('cw-menu-overlay')
+    return this.hostElement.querySelector('ix-menu-overlay');
   }
 
   get about() {
-    return this.hostElement.querySelector('cw-menu-about');
+    return this.hostElement.querySelector('ix-menu-about');
   }
 
   get aboutItems() {
-    return this.hostElement.querySelector('cw-menu-about-item');
+    return this.hostElement.querySelector('ix-menu-about-item');
   }
 
   get settings() {
-    return this.hostElement.querySelector('cw-menu-settings');
+    return this.hostElement.querySelector('ix-menu-settings');
   }
 
   get settingsItems() {
-    return this.hostElement.querySelector('cw-menu-settings-item');
+    return this.hostElement.querySelector('ix-menu-settings-item');
   }
 
   get mapNavMenu() {
@@ -86,22 +96,25 @@ export class MapNavigation {
     this.appendMenu();
     this.appendAbout();
     this.appendSettings();
-    // this.openOverlay('Test', document.createElement('cw-breadcrumb'), 'info', 'color-warning');
+    // this.openOverlay('Test', document.createElement('ix-breadcrumb'), 'info', 'color-warning');
     this.closeOverlay();
   }
 
   private appendMenu() {
     this.hostElement.querySelector('#menu-placeholder').appendChild(this.menu);
-    this.menu.addEventListener('mapExpandChange', (event: CustomEvent<boolean>) => {
-      const state = !event.detail;
-      this.toggleSidebar(state);
-      this.menu.toggleMapExpand(state);
-    });
+    this.menu.addEventListener(
+      'mapExpandChange',
+      (event: CustomEvent<boolean>) => {
+        const state = !event.detail;
+        this.toggleSidebar(state);
+        this.menu.toggleMapExpand(state);
+      }
+    );
     this.menu.enableMapExpand = true;
   }
 
   private appendAbout() {
-    const about = this.about || document.createElement('cw-menu-about');
+    const about = this.about || document.createElement('ix-menu-about');
     about.append(this.aboutItems);
     this.menu.appendChild(about);
   }
@@ -164,7 +177,12 @@ export class MapNavigation {
    * @param color
    */
   @Method()
-  async openOverlay(name: string, component: HTMLElement, icon?: string, color?: string) {
+  async openOverlay(
+    name: string,
+    component: HTMLElement,
+    icon?: string,
+    color?: string
+  ) {
     anime({
       targets: this.overlay,
       duration: MapNavigation.slowTime,
@@ -177,7 +195,7 @@ export class MapNavigation {
       },
     });
 
-    const overlayInstance = document.createElement('cw-map-navigation-overlay');
+    const overlayInstance = document.createElement('ix-map-navigation-overlay');
     overlayInstance.setAttribute('color', color);
     overlayInstance.setAttribute('name', name);
     overlayInstance.setAttribute('icon', icon);
@@ -220,7 +238,17 @@ export class MapNavigation {
             <div class="map-nav-sidebar-content">
               <div class="map-nav-sidebar-static-content">
                 <div class="map-nav-title">{this.navTitle}</div>
-                {this.hideContextMenu ? '' : <cw-icon-button icon="context-menu" ghost size="24" variant="Secondary" onClick={_ => this.contextMenuClick.emit()}></cw-icon-button>}
+                {this.hideContextMenu ? (
+                  ''
+                ) : (
+                  <ix-icon-button
+                    icon="context-menu"
+                    ghost
+                    size="24"
+                    variant="Secondary"
+                    onClick={(_) => this.contextMenuClick.emit()}
+                  ></ix-icon-button>
+                )}
               </div>
               <div class="map-nav-sidebar-user-content">
                 <slot name="sidebar-content"></slot>
diff --git a/packages/core/src/components/map-navigation/readme.md b/packages/core/src/components/map-navigation/readme.md
index 2129ea19d4a..a37b9efa976 100644
--- a/packages/core/src/components/map-navigation/readme.md
+++ b/packages/core/src/components/map-navigation/readme.md
@@ -1,6 +1,4 @@
-# cw-map-navigation
-
-
+# ix-map-navigation
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/map-navigation/test/basic/index.html b/packages/core/src/components/map-navigation/test/basic/index.html
index f29ab884de4..2d450a516b3 100644
--- a/packages/core/src/components/map-navigation/test/basic/index.html
+++ b/packages/core/src/components/map-navigation/test/basic/index.html
@@ -11,15 +11,15 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-map-navigation>
-      <cw-menu>
-        <cw-menu-item>Item 1</cw-menu-item>
-        <cw-menu-item>Item 2</cw-menu-item>
-        <cw-menu-item>Item 3</cw-menu-item>
-      </cw-menu>
+    <ix-map-navigation>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+        <ix-menu-item>Item 3</ix-menu-item>
+      </ix-menu>
       <div slot="sidebar-content">Sidebar content</div>
       <div>Sidebar content</div>
-    </cw-map-navigation>
+    </ix-map-navigation>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/map-navigation/test/map-navigation.spec.tsx b/packages/core/src/components/map-navigation/test/map-navigation.spec.tsx
index d088555aea5..0f5b2e64a92 100644
--- a/packages/core/src/components/map-navigation/test/map-navigation.spec.tsx
+++ b/packages/core/src/components/map-navigation/test/map-navigation.spec.tsx
@@ -2,22 +2,20 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-
 import { newSpecPage } from '@stencil/core/testing';
 import { MapNavigation } from '../map-navigation';
 // import { fireEvent } from '@testing-library/dom';
 
-
 describe('map-navigation', () => {
-  let page : any;
-  let mapNavigation : any;
+  let page: any;
+  let mapNavigation: any;
 
   beforeEach(async () => {
     page = await newSpecPage({
       components: [MapNavigation],
       html: `<map-navigation></map-navigation>`,
     });
-    mapNavigation = page.doc.querySelector('cw-map-navigation');
+    mapNavigation = page.doc.querySelector('ix-map-navigation');
   });
 
   it('renders', async () => {
diff --git a/packages/core/src/components/menu-about-item/cw-menu-about-item.css b/packages/core/src/components/menu-about-item/menu-about-item.css
similarity index 100%
rename from packages/core/src/components/menu-about-item/cw-menu-about-item.css
rename to packages/core/src/components/menu-about-item/menu-about-item.css
diff --git a/packages/core/src/components/menu-about-item/cw-menu-about-item.tsx b/packages/core/src/components/menu-about-item/menu-about-item.tsx
similarity index 84%
rename from packages/core/src/components/menu-about-item/cw-menu-about-item.tsx
rename to packages/core/src/components/menu-about-item/menu-about-item.tsx
index e1b56983530..9c298799c0b 100644
--- a/packages/core/src/components/menu-about-item/cw-menu-about-item.tsx
+++ b/packages/core/src/components/menu-about-item/menu-about-item.tsx
@@ -4,8 +4,8 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-menu-about-item',
-  styleUrl: 'cw-menu-about-item.css',
+  tag: 'ix-menu-about-item',
+  styleUrl: 'menu-about-item.css',
   scoped: true,
 })
 export class CwMenuAboutItem {
diff --git a/packages/core/src/components/menu-about-item/readme.md b/packages/core/src/components/menu-about-item/readme.md
index f6ea0f06eff..a868b5529df 100644
--- a/packages/core/src/components/menu-about-item/readme.md
+++ b/packages/core/src/components/menu-about-item/readme.md
@@ -1,6 +1,4 @@
-# cw-menu-about-item
-
-
+# ix-menu-about-item
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/menu-about-news/menu-about-news.scss b/packages/core/src/components/menu-about-news/menu-about-news.scss
index cb447bf02a0..636af6cb7b6 100644
--- a/packages/core/src/components/menu-about-news/menu-about-news.scss
+++ b/packages/core/src/components/menu-about-news/menu-about-news.scss
@@ -1,8 +1,8 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-@import '../../../scss/variables';
-@import '../../../scss/mixins/shadows';
+@import 'common-variables';
+@import 'mixins/shadows';
 
 :host {
   $left: 4rem;
@@ -45,7 +45,7 @@
       }
     }
 
-    cw-icon {
+    ix-icon {
       margin: $small-space;
       position: absolute;
       z-index: 1;
@@ -74,7 +74,7 @@
     left: -10px;
   }
 
-  cw-icon-button {
+  ix-icon-button {
     top: $small-space;
     right: $small-space;
     position: absolute;
diff --git a/packages/core/src/components/menu-about-news/menu-about-news.tsx b/packages/core/src/components/menu-about-news/menu-about-news.tsx
index c861e22cf94..5fbd9236f4f 100644
--- a/packages/core/src/components/menu-about-news/menu-about-news.tsx
+++ b/packages/core/src/components/menu-about-news/menu-about-news.tsx
@@ -4,7 +4,7 @@
 import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-menu-about-news',
+  tag: 'ix-menu-about-news',
   styleUrl: 'menu-about-news.scss',
   scoped: true,
 })
@@ -58,7 +58,11 @@ export class MenuAboutNews {
         }}
       >
         <div class="banner-container">
-          <cw-icon color="color-inv-contrast-text" name="shout" size="32"></cw-icon>
+          <ix-icon
+            color="color-inv-contrast-text"
+            name="shout"
+            size="32"
+          ></ix-icon>
           <svg viewBox="0 0 48 56" xmlns="http://www.w3.org/2000/svg">
             <polygon points="0 0 48 0 48 56 24 48 0 56" />
           </svg>
@@ -68,7 +72,7 @@ export class MenuAboutNews {
           <span class="text-l-title">{this.label}</span>
         </div>
 
-        <cw-icon-button
+        <ix-icon-button
           size="24"
           icon="close-small"
           ghost
@@ -76,13 +80,13 @@ export class MenuAboutNews {
             this.show = false;
             this.closePopover.emit();
           }}
-        ></cw-icon-button>
+        ></ix-icon-button>
         <slot></slot>
         {this.aboutItemLabel ? (
           <div class="cui-popover-news-footer">
             <button
               class="btn btn-primary"
-              onClick={e => {
+              onClick={(e) => {
                 this.show = false;
                 this.showMore.emit(e);
               }}
@@ -91,7 +95,13 @@ export class MenuAboutNews {
             </button>
           </div>
         ) : null}
-        <svg id="arrow" xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12">
+        <svg
+          id="arrow"
+          xmlns="http://www.w3.org/2000/svg"
+          width="8"
+          height="12"
+          viewBox="0 0 8 12"
+        >
           <path d="M8 0 L0 6 L8 12" />
         </svg>
       </Host>
diff --git a/packages/core/src/components/menu-about-news/readme.md b/packages/core/src/components/menu-about-news/readme.md
index 1c7e9e92a20..9e02f5dccee 100644
--- a/packages/core/src/components/menu-about-news/readme.md
+++ b/packages/core/src/components/menu-about-news/readme.md
@@ -1,6 +1,4 @@
-# cw-menu-about-news
-
-
+# ix-menu-about-news
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/menu-about-news/test/basic/index.html b/packages/core/src/components/menu-about-news/test/basic/index.html
index d26a6d6144c..af6752944ff 100644
--- a/packages/core/src/components/menu-about-news/test/basic/index.html
+++ b/packages/core/src/components/menu-about-news/test/basic/index.html
@@ -11,20 +11,20 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-basic-navigation>
-      <cw-menu>
-        <cw-menu-item>Item 1</cw-menu-item>
-        <cw-menu-item>Item 2</cw-menu-item>
-        <cw-menu-item>Item 3</cw-menu-item>
-        <cw-menu-about>
-          <cw-menu-about-item label="Tab 1">Content 1</cw-menu-about-item>
-          <cw-menu-about-item label="Tab 2">Content 2</cw-menu-about-item>
-        </cw-menu-about>
-        <cw-menu-about-news label="Test " show about-item-label="Example">
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+        <ix-menu-item>Item 3</ix-menu-item>
+        <ix-menu-about>
+          <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
+          <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
+        </ix-menu-about>
+        <ix-menu-about-news label="Test " show about-item-label="Example">
           Test
-        </cw-menu-about-news>
-      </cw-menu>
-    </cw-basic-navigation>
+        </ix-menu-about-news>
+      </ix-menu>
+    </ix-basic-navigation>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/menu-about/default-imprint.tsx b/packages/core/src/components/menu-about/default-imprint.tsx
index 6839c653229..5784484be34 100644
--- a/packages/core/src/components/menu-about/default-imprint.tsx
+++ b/packages/core/src/components/menu-about/default-imprint.tsx
@@ -12,10 +12,10 @@ export const defaultImprint = (
   labelTermsOfUse: string,
   labelCookieNotice: string,
   labelDigitalId: string,
-  legalLinkLanguage: LegalLinkLanguage,
+  legalLinkLanguage: LegalLinkLanguage
 ) => {
   return (
-    <cw-menu-about-item label={tabName}>
+    <ix-menu-about-item label={tabName}>
       <div id="cui-imprint">
         <div class="cui-imprint-product-name">
           {productName}
@@ -54,6 +54,6 @@ export const defaultImprint = (
           </a>
         </div>
       </div>
-    </cw-menu-about-item>
+    </ix-menu-about-item>
   );
 };
diff --git a/packages/core/src/components/menu-about/cw-menu-about.scss b/packages/core/src/components/menu-about/menu-about.scss
similarity index 91%
rename from packages/core/src/components/menu-about/cw-menu-about.scss
rename to packages/core/src/components/menu-about/menu-about.scss
index fa3ff694cfb..2f4790c228b 100644
--- a/packages/core/src/components/menu-about/cw-menu-about.scss
+++ b/packages/core/src/components/menu-about/menu-about.scss
@@ -1,8 +1,8 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/fonts';
+@import 'common-variables';
+@import 'fonts';
 
 :host {
   display: block;
@@ -52,7 +52,7 @@
     }
   }
 
-  cw-menu-about-item {
+  ix-menu-about-item {
     display: none;
   }
 }
diff --git a/packages/core/src/components/menu-about/cw-menu-about.tsx b/packages/core/src/components/menu-about/menu-about.tsx
similarity index 64%
rename from packages/core/src/components/menu-about/cw-menu-about.tsx
rename to packages/core/src/components/menu-about/menu-about.tsx
index 18df5b1bbd4..4ae49567c33 100644
--- a/packages/core/src/components/menu-about/cw-menu-about.tsx
+++ b/packages/core/src/components/menu-about/menu-about.tsx
@@ -1,22 +1,33 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Element, Event, EventEmitter, forceUpdate, h, Host, Prop, State, Watch } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  forceUpdate,
+  h,
+  Host,
+  Prop,
+  State,
+  Watch,
+} from '@stencil/core';
 import { LegalLinkLanguage, resolveLink } from './imprint-language';
 
 @Component({
-  tag: 'cw-menu-about',
-  styleUrl: 'cw-menu-about.scss',
+  tag: 'ix-menu-about',
+  styleUrl: 'menu-about.scss',
   scoped: true,
 })
 export class CwMenuAbout {
   /**
-   * Should only be set if you use cw-menu standalone
+   * Should only be set if you use ix-menu standalone
    */
   @Prop() applicationName: string;
 
   /**
-   * Should only be set if you use cw-menu standalone
+   * Should only be set if you use ix-menu standalone
    */
   @Prop() applicationDescription = '';
 
@@ -63,7 +74,8 @@ export class CwMenuAbout {
   /**
    * Active tab
    */
-  @Prop({ mutable: true, reflect: true }) activeTabLabel: string = this.i18nImprintLabel;
+  @Prop({ mutable: true, reflect: true }) activeTabLabel: string =
+    this.i18nImprintLabel;
 
   /**
    * Label of first tab
@@ -75,7 +87,7 @@ export class CwMenuAbout {
    */
   @Prop() show = false;
 
-  @Element() el!: HTMLCwMenuAboutElement;
+  @Element() el!: HTMLIxMenuAboutElement;
 
   /**
    * About and Legal closed
@@ -84,13 +96,13 @@ export class CwMenuAbout {
 
   @State() labels: string[] = [];
 
-  get aboutItems(): HTMLCwMenuAboutItemElement[] {
-    return Array.from(this.el.querySelectorAll('cw-menu-about-item'));
+  get aboutItems(): HTMLIxMenuAboutItemElement[] {
+    return Array.from(this.el.querySelectorAll('ix-menu-about-item'));
   }
 
   private setTab(label: string) {
     this.activeTabLabel = label;
-    this.aboutItems.forEach(i => {
+    this.aboutItems.forEach((i) => {
       i.style.display = 'none';
       if (i.label === this.activeTabLabel) {
         i.style.display = 'block';
@@ -112,7 +124,7 @@ export class CwMenuAbout {
   }
 
   private updateLabels() {
-    this.labels = this.aboutItems.map(i => i.label);
+    this.labels = this.aboutItems.map((i) => i.label);
   }
 
   @Watch('activeTabLabel')
@@ -131,7 +143,7 @@ export class CwMenuAbout {
   }
 
   private getSelectedTabIndex(label: string) {
-    const selectedItem = this.aboutItems.find(item => item.label=== label);
+    const selectedItem = this.aboutItems.find((item) => item.label === label);
     return this.aboutItems.indexOf(selectedItem);
   }
 
@@ -146,54 +158,86 @@ export class CwMenuAbout {
       >
         <div class="about-header">
           <h2 class="text-h2">{this.label}</h2>
-          <cw-icon-button ghost size="24" icon="close" onClick={e => this.close.emit(e)}></cw-icon-button>
+          <ix-icon-button
+            ghost
+            size="24"
+            icon="close"
+            onClick={(e) => this.close.emit(e)}
+          ></ix-icon-button>
         </div>
-        <cw-tabs selected={this.getSelectedTabIndex(this.activeTabLabel)} class="about-tabs">
-          {this.labels.map(label => (
-            <cw-tab-item onClick={() => this.setTab(label)}>{label}</cw-tab-item>
+        <ix-tabs
+          selected={this.getSelectedTabIndex(this.activeTabLabel)}
+          class="about-tabs"
+        >
+          {this.labels.map((label) => (
+            <ix-tab-item onClick={() => this.setTab(label)}>
+              {label}
+            </ix-tab-item>
           ))}
-        </cw-tabs>
+        </ix-tabs>
         <div class="about-items">
-          <cw-menu-about-item label={this.i18nImprintLabel}>
+          <ix-menu-about-item label={this.i18nImprintLabel}>
             <div id="cui-imprint">
               <div class="cui-imprint-product-name">
                 {this.applicationName}
                 <br />
                 &copy; Siemens {this.copyrightYears}
               </div>
-              <div class={{ 'd-none': !this.applicationDescription, 'cui-imprint-product-description': true }}>{this.applicationDescription}</div>
+              <div
+                class={{
+                  'd-none': !this.applicationDescription,
+                  'cui-imprint-product-description': true,
+                }}
+              >
+                {this.applicationDescription}
+              </div>
               <div class="cui-imprint-link-container">
-                <a href={resolveLink(this.imprintLanguage, 'general')} target="_blank">
+                <a
+                  href={resolveLink(this.imprintLanguage, 'general')}
+                  target="_blank"
+                >
                   <span class="glyph glyph-16 glyph-chevron-right-small"></span>
                   {this.i18nCorporateLabel}
                 </a>
               </div>
               <div class="cui-imprint-link-container">
-                <a href={resolveLink(this.imprintLanguage, 'privacy')} target="_blank">
+                <a
+                  href={resolveLink(this.imprintLanguage, 'privacy')}
+                  target="_blank"
+                >
                   <span class="glyph glyph-16 glyph-chevron-right-small"></span>
                   {this.i18nPrivacyNoticeLabel}
                 </a>
               </div>
               <div class="cui-imprint-link-container">
-                <a href={resolveLink(this.imprintLanguage, 'terms')} target="_blank">
+                <a
+                  href={resolveLink(this.imprintLanguage, 'terms')}
+                  target="_blank"
+                >
                   <span class="glyph glyph-16 glyph-chevron-right-small"></span>
                   {this.i18nTermsOfUseLabel}
                 </a>
               </div>
               <div class="cui-imprint-link-container">
-                <a href={resolveLink(this.imprintLanguage, 'cookie')} target="_blank">
+                <a
+                  href={resolveLink(this.imprintLanguage, 'cookie')}
+                  target="_blank"
+                >
                   <span class="glyph glyph-16 glyph-chevron-right-small"></span>
                   {this.i18nCookieNoticeLabel}
                 </a>
               </div>
               <div class="cui-imprint-link-container">
-                <a href={resolveLink(this.imprintLanguage, 'digital')} target="_blank">
+                <a
+                  href={resolveLink(this.imprintLanguage, 'digital')}
+                  target="_blank"
+                >
                   <span class="glyph glyph-16 glyph-chevron-right-small"></span>
                   {this.i18nDigitalId}
                 </a>
               </div>
             </div>
-          </cw-menu-about-item>
+          </ix-menu-about-item>
           <slot></slot>
         </div>
       </Host>
diff --git a/packages/core/src/components/menu-about/readme.md b/packages/core/src/components/menu-about/readme.md
index 5f398628aa0..9aa094e77bb 100644
--- a/packages/core/src/components/menu-about/readme.md
+++ b/packages/core/src/components/menu-about/readme.md
@@ -1,6 +1,4 @@
-# cw-menu-about
-
-
+# ix-menu-about
 
 <!-- Auto Generated Below -->
 
@@ -10,8 +8,8 @@
 | Property                 | Attribute                     | Description                                      | Type                                               | Default                       |
 | ------------------------ | ----------------------------- | ------------------------------------------------ | -------------------------------------------------- | ----------------------------- |
 | `activeTabLabel`         | `active-tab-label`            | Active tab                                       | `string`                                           | `this.i18nImprintLabel`       |
-| `applicationDescription` | `application-description`     | Should only be set if you use cw-menu standalone | `string`                                           | `''`                          |
-| `applicationName`        | `application-name`            | Should only be set if you use cw-menu standalone | `string`                                           | `undefined`                   |
+| `applicationDescription` | `application-description`     | Should only be set if you use ix-menu standalone | `string`                                           | `''`                          |
+| `applicationName`        | `application-name`            | Should only be set if you use ix-menu standalone | `string`                                           | `undefined`                   |
 | `copyrightYears`         | `copyright-years`             | Copyright                                        | `string`                                           | `'1996 - 2022'`               |
 | `i18nCookieNoticeLabel`  | `i-1-8n-cookie-notice-label`  |                                                  | `string`                                           | `'Cookie Notice'`             |
 | `i18nCorporateLabel`     | `i-1-8n-corporate-label`      |                                                  | `string`                                           | `'Corporate Information'`     |
diff --git a/packages/core/src/components/menu-about/test/basic/index.html b/packages/core/src/components/menu-about/test/basic/index.html
index dee4e018879..6b78ee67822 100644
--- a/packages/core/src/components/menu-about/test/basic/index.html
+++ b/packages/core/src/components/menu-about/test/basic/index.html
@@ -11,17 +11,17 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-basic-navigation>
-      <cw-menu>
-        <cw-menu-item>Item 1</cw-menu-item>
-        <cw-menu-item>Item 2</cw-menu-item>
-        <cw-menu-item>Item 3</cw-menu-item>
-        <cw-menu-about>
-          <cw-menu-about-item label="Tab 1">Content 1</cw-menu-about-item>
-          <cw-menu-about-item label="Tab 2">Content 2</cw-menu-about-item>
-        </cw-menu-about>
-      </cw-menu>
-    </cw-basic-navigation>
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+        <ix-menu-item>Item 3</ix-menu-item>
+        <ix-menu-about>
+          <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
+          <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
+        </ix-menu-about>
+      </ix-menu>
+    </ix-basic-navigation>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/menu-avatar-item/menu-avatar-item.tsx b/packages/core/src/components/menu-avatar-item/menu-avatar-item.tsx
index 9e3c217821c..634abd0b05d 100644
--- a/packages/core/src/components/menu-avatar-item/menu-avatar-item.tsx
+++ b/packages/core/src/components/menu-avatar-item/menu-avatar-item.tsx
@@ -1,10 +1,17 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Prop,
+} from '@stencil/core';
 
 @Component({
-  tag: 'cw-menu-avatar-item',
+  tag: 'ix-menu-avatar-item',
   styleUrl: 'menu-avatar-item.css',
   scoped: true,
 })
@@ -24,9 +31,15 @@ export class MenuAvatarItem {
    */
   @Event() itemClick: EventEmitter<MouseEvent>;
 
-  @Element() hostElement: HTMLCwMenuAvatarItemElement;
+  @Element() hostElement: HTMLIxMenuAvatarItemElement;
 
   render() {
-    return <cw-dropdown-item icon={this.icon} label={this.label} onClick={e => this.itemClick.emit(e)}></cw-dropdown-item>;
+    return (
+      <ix-dropdown-item
+        icon={this.icon}
+        label={this.label}
+        onClick={(e) => this.itemClick.emit(e)}
+      ></ix-dropdown-item>
+    );
   }
 }
diff --git a/packages/core/src/components/menu-avatar-item/readme.md b/packages/core/src/components/menu-avatar-item/readme.md
index 3aa3b215127..c0d6a69db16 100644
--- a/packages/core/src/components/menu-avatar-item/readme.md
+++ b/packages/core/src/components/menu-avatar-item/readme.md
@@ -1,6 +1,4 @@
-# cw-menu-avatar-item
-
-
+# ix-menu-avatar-item
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/menu-avatar/menu-avatar.scss b/packages/core/src/components/menu-avatar/menu-avatar.scss
index 4042bb137b7..4975f13b1d4 100644
--- a/packages/core/src/components/menu-avatar/menu-avatar.scss
+++ b/packages/core/src/components/menu-avatar/menu-avatar.scss
@@ -2,12 +2,9 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/variables';
-@import '../../../scss/colors';
-@import '../../../scss/icons';
-@import '../../../scss/mixins/text-truncation';
-@import '../../../scss/mixins/hover';
-@import '../../../scss/mixins/shadows';
+@import 'common-variables';
+@import 'mixins/text-truncation';
+@import 'mixins/hover';
 
 :host {
   display: block;
@@ -64,17 +61,4 @@
       color: var(--theme-avatar-btn--color--active);
     }
   }
-
-  cui-menu {
-    position: absolute;
-    top: 0;
-    left: 16rem - 0.86rem;
-    z-index: 9999;
-  }
-
-  :host-context(.cui-vertical-tabs-collapsed) {
-    cui-menu {
-      left: 4rem;
-    }
-  }
 }
diff --git a/packages/core/src/components/menu-avatar/menu-avatar.tsx b/packages/core/src/components/menu-avatar/menu-avatar.tsx
index fa7dcb3228e..8ccc0630fa2 100644
--- a/packages/core/src/components/menu-avatar/menu-avatar.tsx
+++ b/packages/core/src/components/menu-avatar/menu-avatar.tsx
@@ -1,16 +1,26 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Listen,
+  Prop,
+  State,
+} from '@stencil/core';
 import { Popover } from '../utils/popover.util';
 
 @Component({
-  tag: 'cw-menu-avatar',
+  tag: 'ix-menu-avatar',
   styleUrl: 'menu-avatar.scss',
   scoped: true,
 })
 export class MenuAvatar {
-  @Element() hostElement: HTMLCwMenuAvatarElement;
+  @Element() hostElement: HTMLIxMenuAvatarElement;
 
   @State() displayMenu: boolean;
 
@@ -43,9 +53,13 @@ export class MenuAvatar {
   }
 
   componentDidLoad() {
-    this.outsideListener = new Popover(this.hostElement, this.hostElement.querySelector('cw-dropdown'), () => {
-      this.displayMenu = false;
-    });
+    this.outsideListener = new Popover(
+      this.hostElement,
+      this.hostElement.querySelector('ix-dropdown'),
+      () => {
+        this.displayMenu = false;
+      }
+    );
   }
 
   disconnectedCallback() {
@@ -56,7 +70,12 @@ export class MenuAvatar {
     return (
       <Host>
         <li class="nav-item top-item avatar no-hover" title={this.top}>
-          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            viewBox="0 0 32 32"
+          >
             <g fill="none" fill-rule="evenodd">
               <path
                 id="avatar-path-background"
@@ -81,16 +100,16 @@ export class MenuAvatar {
             </span>
           </div>
         </li>
-        <cw-dropdown show={this.displayMenu}>
+        <ix-dropdown show={this.displayMenu}>
           <slot></slot>
-          <cw-menu-avatar-item
+          <ix-menu-avatar-item
             label={this.i18nLogout}
             icon="log-out"
-            onClick={e => {
+            onClick={(e) => {
               this.logoutClick.emit(e);
             }}
-          ></cw-menu-avatar-item>
-        </cw-dropdown>
+          ></ix-menu-avatar-item>
+        </ix-dropdown>
       </Host>
     );
   }
diff --git a/packages/core/src/components/menu-avatar/readme.md b/packages/core/src/components/menu-avatar/readme.md
index 8859fe4e327..b15490bbd3e 100644
--- a/packages/core/src/components/menu-avatar/readme.md
+++ b/packages/core/src/components/menu-avatar/readme.md
@@ -1,4 +1,4 @@
-# cw-menu-avatar
+# ix-menu-avatar
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/menu-avatar/test/basic/index.html b/packages/core/src/components/menu-avatar/test/basic/index.html
index 8a9b44489b7..c5617a83d66 100644
--- a/packages/core/src/components/menu-avatar/test/basic/index.html
+++ b/packages/core/src/components/menu-avatar/test/basic/index.html
@@ -11,16 +11,16 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-basic-navigation>
-      <cw-menu>
-        <cw-menu-avatar top="top name" bottom="bottom name">
-          <cw-menu-avatar-item label="Option 1"></cw-menu-avatar-item>
-        </cw-menu-avatar>
-        <cw-menu-item>Item 1</cw-menu-item>
-        <cw-menu-item>Item 2</cw-menu-item>
-        <cw-menu-item>Item 3</cw-menu-item>
-      </cw-menu>
-    </cw-basic-navigation>
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-avatar top="top name" bottom="bottom name">
+          <ix-menu-avatar-item label="Option 1"></ix-menu-avatar-item>
+        </ix-menu-avatar>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+        <ix-menu-item>Item 3</ix-menu-item>
+      </ix-menu>
+    </ix-basic-navigation>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/menu-avatar/test/menu-about-avatar.e2e.ts b/packages/core/src/components/menu-avatar/test/menu-about-avatar.e2e.ts
index e170d1e3e71..46e7679b181 100644
--- a/packages/core/src/components/menu-avatar/test/menu-about-avatar.e2e.ts
+++ b/packages/core/src/components/menu-avatar/test/menu-about-avatar.e2e.ts
@@ -9,8 +9,8 @@ regressionTest.describe('menu-avatar', () => {
     await page.goto(`menu-avatar/test/basic`);
     await page.locator('.burger-menu-button').click();
     await page.waitForSelector('.expanded');
-    await page.locator('cw-menu-avatar').click();
-    await page.waitForSelector('cw-dropdown.show');
+    await page.locator('ix-menu-avatar').click();
+    await page.waitForSelector('ix-dropdown.show');
     await page.waitForTimeout(1000);
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
diff --git a/packages/core/src/components/menu-item/menu-item.scss b/packages/core/src/components/menu-item/menu-item.scss
index fb64d6814f5..ccd345f81fa 100644
--- a/packages/core/src/components/menu-item/menu-item.scss
+++ b/packages/core/src/components/menu-item/menu-item.scss
@@ -2,11 +2,11 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/hover';
-@import '../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/hover';
+@import 'mixins/text-truncation';
 
-cw-menu-item {
+ix-menu-item {
   position: relative;
   display: block;
 
diff --git a/packages/core/src/components/menu-item/menu-item.tsx b/packages/core/src/components/menu-item/menu-item.tsx
index be506d71b54..f01f82b8367 100644
--- a/packages/core/src/components/menu-item/menu-item.tsx
+++ b/packages/core/src/components/menu-item/menu-item.tsx
@@ -4,7 +4,7 @@
 import { Component, Element, h, Host, Prop, State } from '@stencil/core';
 
 @Component({
-  tag: 'cw-menu-item',
+  tag: 'ix-menu-item',
   styleUrl: 'menu-item.scss',
   scoped: false,
 })
@@ -39,7 +39,7 @@ export class MenuItem {
    */
   @Prop() disabled: boolean;
 
-  @Element() hostElement: HTMLCwMenuItemElement;
+  @Element() hostElement: HTMLIxMenuItemElement;
 
   @State() title: string;
 
@@ -57,10 +57,21 @@ export class MenuItem {
 
   render() {
     return (
-      <Host class={{ 'disabled': this.disabled, 'home-tab': this.home, 'bottom-tab': this.bottom, 'active': this.active }}>
+      <Host
+        class={{
+          disabled: this.disabled,
+          'home-tab': this.home,
+          'bottom-tab': this.bottom,
+          active: this.active,
+        }}
+      >
         <li class="tab" title={this.title}>
           <i class={`glyph glyph-${this.tabIcon}`}>
-            <div class="notification">{this.notifications ? <div class="pill">{this.notifications}</div> : null}</div>
+            <div class="notification">
+              {this.notifications ? (
+                <div class="pill">{this.notifications}</div>
+              ) : null}
+            </div>
           </i>
           <span class="tab-text text-default">
             <slot></slot>
diff --git a/packages/core/src/components/menu-item/readme.md b/packages/core/src/components/menu-item/readme.md
index b1f3c1c5fd0..7d198c746ba 100644
--- a/packages/core/src/components/menu-item/readme.md
+++ b/packages/core/src/components/menu-item/readme.md
@@ -1,4 +1,4 @@
-# cw-menu-item
+# ix-menu-item
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/menu-settings-item/cw-menu-settings-item.css b/packages/core/src/components/menu-settings-item/menu-settings-item.css
similarity index 100%
rename from packages/core/src/components/menu-settings-item/cw-menu-settings-item.css
rename to packages/core/src/components/menu-settings-item/menu-settings-item.css
diff --git a/packages/core/src/components/menu-settings-item/cw-menu-settings-item.tsx b/packages/core/src/components/menu-settings-item/menu-settings-item.tsx
similarity index 81%
rename from packages/core/src/components/menu-settings-item/cw-menu-settings-item.tsx
rename to packages/core/src/components/menu-settings-item/menu-settings-item.tsx
index a452d189d41..73e3f6998c7 100644
--- a/packages/core/src/components/menu-settings-item/cw-menu-settings-item.tsx
+++ b/packages/core/src/components/menu-settings-item/menu-settings-item.tsx
@@ -4,8 +4,8 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-menu-settings-item',
-  styleUrl: 'cw-menu-settings-item.css',
+  tag: 'ix-menu-settings-item',
+  styleUrl: 'menu-settings-item.css',
   scoped: true,
 })
 export class CwMenuSettingsItem {
diff --git a/packages/core/src/components/menu-settings-item/readme.md b/packages/core/src/components/menu-settings-item/readme.md
index 1eb5aeef493..fb71ea2de42 100644
--- a/packages/core/src/components/menu-settings-item/readme.md
+++ b/packages/core/src/components/menu-settings-item/readme.md
@@ -1,6 +1,4 @@
-# cw-menu-settings-item
-
-
+# ix-menu-settings-item
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/menu-settings/cw-menu-settings.scss b/packages/core/src/components/menu-settings/menu-settings.scss
similarity index 88%
rename from packages/core/src/components/menu-settings/cw-menu-settings.scss
rename to packages/core/src/components/menu-settings/menu-settings.scss
index 9f1071c41fa..c903dfa0135 100644
--- a/packages/core/src/components/menu-settings/cw-menu-settings.scss
+++ b/packages/core/src/components/menu-settings/menu-settings.scss
@@ -1,8 +1,8 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/fonts';
+@import 'common-variables';
+@import 'fonts';
 
 :host {
   display: block;
diff --git a/packages/core/src/components/menu-settings/cw-menu-settings.tsx b/packages/core/src/components/menu-settings/menu-settings.tsx
similarity index 69%
rename from packages/core/src/components/menu-settings/cw-menu-settings.tsx
rename to packages/core/src/components/menu-settings/menu-settings.tsx
index 98fd8a9887d..f0532d7d009 100644
--- a/packages/core/src/components/menu-settings/cw-menu-settings.tsx
+++ b/packages/core/src/components/menu-settings/menu-settings.tsx
@@ -1,11 +1,21 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Element, Event, EventEmitter, forceUpdate, h, Host, Prop, Watch } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  forceUpdate,
+  h,
+  Host,
+  Prop,
+  Watch,
+} from '@stencil/core';
 
 @Component({
-  tag: 'cw-menu-settings',
-  styleUrl: 'cw-menu-settings.scss',
+  tag: 'ix-menu-settings',
+  styleUrl: 'menu-settings.scss',
   scoped: true,
 })
 export class CwMenuAbout {
@@ -24,20 +34,20 @@ export class CwMenuAbout {
    */
   @Prop() show = false;
 
-  @Element() el!: HTMLCwMenuSettingsElement;
+  @Element() el!: HTMLIxMenuSettingsElement;
 
   /**
    * Popover closed
    */
   @Event() close: EventEmitter<MouseEvent>;
 
-  get settingsItems(): HTMLCwMenuSettingsItemElement[] {
-    return Array.from(this.el.querySelectorAll('cw-menu-settings-item'));
+  get settingsItems(): HTMLIxMenuSettingsItemElement[] {
+    return Array.from(this.el.querySelectorAll('ix-menu-settings-item'));
   }
 
   private setTab(label: string) {
     this.activeTabLabel = label;
-    this.settingsItems.forEach(i => {
+    this.settingsItems.forEach((i) => {
       i.style.display = 'none';
 
       if (i.label === this.activeTabLabel) {
@@ -64,14 +74,14 @@ export class CwMenuAbout {
   private getTabItems() {
     return this.settingsItems.map(({ label }) => {
       return (
-        <cw-tab-item
+        <ix-tab-item
           class={{
             active: label === this.activeTabLabel,
           }}
           onClick={() => this.setTab(label)}
         >
           {label}
-        </cw-tab-item>
+        </ix-tab-item>
       );
     });
   }
@@ -87,9 +97,14 @@ export class CwMenuAbout {
       >
         <div class="settings-header">
           <h2 class="text-h2">{this.label}</h2>
-          <cw-icon-button ghost size="24" icon="close" onClick={e => this.close.emit(e)}></cw-icon-button>
+          <ix-icon-button
+            ghost
+            size="24"
+            icon="close"
+            onClick={(e) => this.close.emit(e)}
+          ></ix-icon-button>
         </div>
-        <cw-tabs>{this.getTabItems()}</cw-tabs>
+        <ix-tabs>{this.getTabItems()}</ix-tabs>
         <slot></slot>
       </Host>
     );
diff --git a/packages/core/src/components/menu-settings/readme.md b/packages/core/src/components/menu-settings/readme.md
index 7833fff4611..ba8bef50a2a 100644
--- a/packages/core/src/components/menu-settings/readme.md
+++ b/packages/core/src/components/menu-settings/readme.md
@@ -1,6 +1,4 @@
-# cw-menu-settings
-
-
+# ix-menu-settings
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/menu-settings/test/basic/index.html b/packages/core/src/components/menu-settings/test/basic/index.html
index 49feff9b4fb..b08a294e56a 100644
--- a/packages/core/src/components/menu-settings/test/basic/index.html
+++ b/packages/core/src/components/menu-settings/test/basic/index.html
@@ -11,21 +11,21 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-basic-navigation>
-      <cw-menu>
-        <cw-menu-item>Item 1</cw-menu-item>
-        <cw-menu-item>Item 2</cw-menu-item>
-        <cw-menu-item>Item 3</cw-menu-item>
-        <cw-menu-settings>
-          <cw-menu-settings-item label="Test 1"
-            >Content test 1</cw-menu-settings-item
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+        <ix-menu-item>Item 3</ix-menu-item>
+        <ix-menu-settings>
+          <ix-menu-settings-item label="Test 1"
+            >Content test 1</ix-menu-settings-item
           >
-          <cw-menu-settings-item label="Test 2"
-            >Content test 2</cw-menu-settings-item
+          <ix-menu-settings-item label="Test 2"
+            >Content test 2</ix-menu-settings-item
           >
-        </cw-menu-settings>
-      </cw-menu>
-    </cw-basic-navigation>
+        </ix-menu-settings>
+      </ix-menu>
+    </ix-basic-navigation>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/menu/menu.scss b/packages/core/src/components/menu/menu.scss
index cbe7464d6df..2777802eecc 100644
--- a/packages/core/src/components/menu/menu.scss
+++ b/packages/core/src/components/menu/menu.scss
@@ -2,10 +2,10 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/hover';
+@import 'common-variables';
+@import 'mixins/hover';
 
-cw-menu {
+ix-menu {
   display: flex;
   flex-direction: row;
   position: absolute;
diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx
index ab36f1cdd81..533321e7e2b 100644
--- a/packages/core/src/components/menu/menu.tsx
+++ b/packages/core/src/components/menu/menu.tsx
@@ -18,12 +18,12 @@ import { convertToRemString } from '../utils/rwd.util';
 import { toggleTheme } from '../utils/toggle-theme';
 
 @Component({
-  tag: 'cw-menu',
+  tag: 'ix-menu',
   styleUrl: 'menu.scss',
   scoped: false,
 })
 export class Menu {
-  @Element() hostElement!: HTMLCwMenuElement;
+  @Element() hostElement!: HTMLIxMenuElement;
 
   /**
    * Is settings tab visible
@@ -52,12 +52,12 @@ export class Menu {
   @Prop() enableMapExpand = false;
 
   /**
-   * Should only be set if you use cw-menu standalone
+   * Should only be set if you use ix-menu standalone
    */
   @Prop() applicationName: string;
 
   /**
-   * Should only be set if you use cw-menu standalone
+   * Should only be set if you use ix-menu standalone
    */
   @Prop() applicationDescription = '';
 
@@ -114,7 +114,7 @@ export class Menu {
 
   @State() mapExpand = true;
 
-  @State() activeTab: HTMLCwMenuItemElement;
+  @State() activeTab: HTMLIxMenuItemElement;
 
   @State() isMoreTabEmpty = false;
 
@@ -136,11 +136,11 @@ export class Menu {
       this.onWindowResize();
     }
 
-    if (node.matches('cw-menu-about') && this.menu.contains(node)) {
+    if (node.matches('ix-menu-about') && this.menu.contains(node)) {
       this.appendAbout();
     }
 
-    if (node.matches('cw-menu-settings') && this.menu.contains(node)) {
+    if (node.matches('ix-menu-settings') && this.menu.contains(node)) {
       this.appendSettings();
     }
   }
@@ -179,7 +179,7 @@ export class Menu {
   get menuItems() {
     return Array.from(
       this.hostElement.querySelectorAll(
-        'cw-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab)'
+        'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab)'
       )
     ).filter(this.isVisible);
   }
@@ -187,29 +187,29 @@ export class Menu {
   get menuBottomItems() {
     return Array.from(
       this.hostElement.querySelectorAll(
-        'cw-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'
+        'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'
       )
     ).filter(this.isVisible);
   }
 
   get homeTab() {
-    return this.hostElement.querySelector('cw-menu-item.home-tab');
+    return this.hostElement.querySelector('ix-menu-item.home-tab');
   }
 
   get moreItemsDropdown(): HTMLElement {
-    return this.hostElement.querySelector('.internal-tab cw-dropdown');
+    return this.hostElement.querySelector('.internal-tab ix-dropdown');
   }
 
   get isMoreItemsDropdownEmpty(): boolean {
     return (
-      this.hostElement.querySelectorAll('.internal-tab cw-dropdown .appended')
+      this.hostElement.querySelectorAll('.internal-tab ix-dropdown .appended')
         .length === 0
     );
   }
 
   get moreItemsDropdownItems() {
     return this.hostElement.querySelectorAll(
-      '.internal-tab cw-dropdown cw-menu-item'
+      '.internal-tab ix-dropdown ix-menu-item'
     );
   }
 
@@ -218,38 +218,38 @@ export class Menu {
   }
 
   get activeMoreTab() {
-    return this.hostElement.querySelector('.active-more-tab cw-menu-item');
+    return this.hostElement.querySelector('.active-more-tab ix-menu-item');
   }
 
   get aboutPopoverContainer(): HTMLElement {
     return this.hostElement.querySelector('.about-news');
   }
 
-  get aboutPopover(): HTMLCwMenuAboutNewsElement {
-    return document.querySelector('cw-menu-about-news');
+  get aboutPopover(): HTMLIxMenuAboutNewsElement {
+    return document.querySelector('ix-menu-about-news');
   }
 
   get aboutTab(): HTMLElement {
     return this.hostElement.querySelector('#aboutAndLegal');
   }
 
-  get about(): HTMLCwMenuAboutElement {
-    return this.hostElement.querySelector('cw-menu-about');
+  get about(): HTMLIxMenuAboutElement {
+    return this.hostElement.querySelector('ix-menu-about');
   }
 
-  get settings(): HTMLCwMenuSettingsElement {
-    return this.hostElement.querySelector('cw-menu-settings');
+  get settings(): HTMLIxMenuSettingsElement {
+    return this.hostElement.querySelector('ix-menu-settings');
   }
 
   get isSettingsEmpty(): boolean {
     return (
-      Array.from(this.hostElement.querySelectorAll('cw-menu-settings-item'))
+      Array.from(this.hostElement.querySelectorAll('ix-menu-settings-item'))
         .length === 0
     );
   }
 
-  get avatarItem(): HTMLCwMenuAvatarElement {
-    return this.hostElement.querySelector('cw-menu-avatar');
+  get avatarItem(): HTMLIxMenuAvatarElement {
+    return this.hostElement.querySelector('ix-menu-avatar');
   }
 
   private popoverListener: Popover;
@@ -332,7 +332,7 @@ export class Menu {
     this.activeTab = null;
   }
 
-  private isMenuItemActive(item: HTMLCwMenuItemElement) {
+  private isMenuItemActive(item: HTMLIxMenuItemElement) {
     return item.active || item.classList.contains('active');
   }
 
@@ -344,7 +344,7 @@ export class Menu {
       this.homeTab.addEventListener('click', this.resetOverlay);
     }
 
-    this.menuItems.forEach((item: HTMLCwMenuItemElement, index) => {
+    this.menuItems.forEach((item: HTMLIxMenuItemElement, index) => {
       if (this.showTab(index)) {
         item.classList.remove('d-none');
       } else {
@@ -713,16 +713,16 @@ export class Menu {
           <slot></slot>
           <div class="active-more-tab">
             {this.activeTab ? (
-              <cw-menu-item
+              <ix-menu-item
                 class="internal-tab"
                 active={true}
                 tabIcon={this.activeTab.tabIcon}
               >
                 {this.activeTab.innerText}
-              </cw-menu-item>
+              </ix-menu-item>
             ) : null}
           </div>
-          <cw-menu-item
+          <ix-menu-item
             id="more-tab"
             tabIcon="more-menu"
             class={{
@@ -736,31 +736,31 @@ export class Menu {
             onClick={() => this.toggleShowMoreDropdown()}
           >
             {this.i18nMore}
-            <cw-dropdown show={this.showMoreItems}>
+            <ix-dropdown show={this.showMoreItems}>
               {this.menuItems
                 .filter(
-                  (elm: HTMLCwMenuItemElement, index) =>
+                  (elm: HTMLIxMenuItemElement, index) =>
                     !this.showTab(index) &&
                     !this.isMenuItemActive(elm) &&
                     this.isVisible(elm)
                 )
-                .map((e: HTMLCwMenuItemElement) => {
+                .map((e: HTMLIxMenuItemElement) => {
                   return (
-                    <cw-menu-item
+                    <ix-menu-item
                       tabIcon={e.tabIcon}
                       active={e.active}
                       class="internal-tab appended"
                       onClick={() => e.dispatchEvent(new CustomEvent('click'))}
                     >
                       {e.innerText}
-                    </cw-menu-item>
+                    </ix-menu-item>
                   );
                 })}
-            </cw-dropdown>
-          </cw-menu-item>
+            </ix-dropdown>
+          </ix-menu-item>
           <div class="bottom-tab-divider"></div>
           {this.enableSettings && !this.isSettingsEmpty ? (
-            <cw-menu-item
+            <ix-menu-item
               class={{
                 'internal-tab': true,
                 'bottom-tab': true,
@@ -770,12 +770,12 @@ export class Menu {
               onClick={async () => this.toggleSettings(!this.showSettings)}
             >
               {this.i18nSettings}
-            </cw-menu-item>
+            </ix-menu-item>
           ) : null}
           <slot name="bottom"></slot>
           <div id="popover-area"></div>
           {this.about ? (
-            <cw-menu-item
+            <ix-menu-item
               id="aboutAndLegal"
               class={{
                 'internal-tab': true,
@@ -786,27 +786,27 @@ export class Menu {
               onClick={async () => this.toggleAbout(!this.showAbout)}
             >
               {this.i18nLegal}
-            </cw-menu-item>
+            </ix-menu-item>
           ) : null}
           {this.enableToggleTheme ? (
-            <cw-menu-item
+            <ix-menu-item
               id="toggleTheme"
               onClick={() => toggleTheme()}
               class="internal-tab bottom-tab"
               tabIcon="bulb"
             >
               {this.i18nToggleTheme}
-            </cw-menu-item>
+            </ix-menu-item>
           ) : null}
           {this.enableMapExpand ? (
-            <cw-menu-item
+            <ix-menu-item
               id="menu-collapse"
               onClick={() => this.mapExpandChange.emit(this.mapExpand)}
               class="internal-tab bottom-tab"
               tabIcon={`${this.getCollapseIcon()}`}
             >
               {this.getCollapseText()}
-            </cw-menu-item>
+            </ix-menu-item>
           ) : null}
         </div>
         <div
diff --git a/packages/core/src/components/menu/readme.md b/packages/core/src/components/menu/readme.md
index 4086a99e524..85109a12cf8 100644
--- a/packages/core/src/components/menu/readme.md
+++ b/packages/core/src/components/menu/readme.md
@@ -1,6 +1,4 @@
-# cw-menu
-
-
+# ix-menu
 
 <!-- Auto Generated Below -->
 
@@ -9,8 +7,8 @@
 
 | Property                 | Attribute                 | Description                                                                                                                                   | Type      | Default                       |
 | ------------------------ | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------------------------- |
-| `applicationDescription` | `application-description` | Should only be set if you use cw-menu standalone                                                                                              | `string`  | `''`                          |
-| `applicationName`        | `application-name`        | Should only be set if you use cw-menu standalone                                                                                              | `string`  | `undefined`                   |
+| `applicationDescription` | `application-description` | Should only be set if you use ix-menu standalone                                                                                              | `string`  | `''`                          |
+| `applicationName`        | `application-name`        | Should only be set if you use ix-menu standalone                                                                                              | `string`  | `undefined`                   |
 | `enableMapExpand`        | `enable-map-expand`       | Internal                                                                                                                                      | `boolean` | `false`                       |
 | `enableSettings`         | `enable-settings`         | Is settings tab is visible                                                                                                                    | `boolean` | `true`                        |
 | `enableToggleTheme`      | `enable-toggle-theme`     | <span style="color:red">**[DEPRECATED]**</span> Show toggle theme button<br/><br/>                                                            | `boolean` | `false`                       |
diff --git a/packages/core/src/components/message-bar/message-bar.scss b/packages/core/src/components/message-bar/message-bar.scss
index 3c0a2107985..2ac12ce8bf2 100644
--- a/packages/core/src/components/message-bar/message-bar.scss
+++ b/packages/core/src/components/message-bar/message-bar.scss
@@ -2,8 +2,8 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import './../../../scss/v7/common-variables';
-@import './../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/text-truncation';
 
 .message-container {
   display: flex;
@@ -46,6 +46,6 @@
   white-space: normal;
 }
 
-cw-icon {
+ix-icon {
   margin-top: $tiny-space;
 }
diff --git a/packages/core/src/components/message-bar/message-bar.tsx b/packages/core/src/components/message-bar/message-bar.tsx
index a12a692b5e9..96a4338d415 100644
--- a/packages/core/src/components/message-bar/message-bar.tsx
+++ b/packages/core/src/components/message-bar/message-bar.tsx
@@ -2,12 +2,20 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';
+import {
+  Component,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+  State,
+} from '@stencil/core';
 import anime from 'animejs';
 import { NotificationColor } from '../utils/notification-color';
 
 @Component({
-  tag: 'cw-message-bar',
+  tag: 'ix-message-bar',
   styleUrl: 'message-bar.scss',
   scoped: true,
 })
@@ -68,13 +76,17 @@ export class CwMessageBar {
   render() {
     return (
       <Host>
-        <div class={{ 'message-container': true, [this.type]: true }} role="alert" ref={el => (this.divElement = el as HTMLElement)}>
-          <cw-icon color={this.color} name={this.icon}></cw-icon>
+        <div
+          class={{ 'message-container': true, [this.type]: true }}
+          role="alert"
+          ref={(el) => (this.divElement = el as HTMLElement)}
+        >
+          <ix-icon color={this.color} name={this.icon}></ix-icon>
           <div class="message-content">
             <slot></slot>
           </div>
           {this.dismissible ? (
-            <cw-icon-button
+            <ix-icon-button
               icon="close"
               size="24"
               ghost={true}
@@ -82,7 +94,7 @@ export class CwMessageBar {
                 this.closeAlert(this.divElement);
               }}
               data-testid="close-btn"
-            ></cw-icon-button>
+            ></ix-icon-button>
           ) : (
             ''
           )}
diff --git a/packages/core/src/components/message-bar/test/__snapshots__/message-bar.spec.tsx.snap b/packages/core/src/components/message-bar/test/__snapshots__/message-bar.spec.tsx.snap
index e6f0fddf635..236228bea62 100644
--- a/packages/core/src/components/message-bar/test/__snapshots__/message-bar.spec.tsx.snap
+++ b/packages/core/src/components/message-bar/test/__snapshots__/message-bar.spec.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`cw-message-bar renders 1`] = `
-<cw-message-bar type="danger">
+exports[`ix-message-bar renders 1`] = `
+<ix-message-bar type="danger">
   <!---->
   <div class="danger message-container" role="alert">
-    <cw-icon color="color-alarm" name="alarm-filled" size="32"></cw-icon>
+    <ix-icon color="color-alarm" name="alarm-filled" size="32"></ix-icon>
     <div class="message-content"></div>
-    <cw-icon-button class="btn-close" data-testid="close-btn" icon="close" ghost="" size="24"></cw-icon-button>
+    <ix-icon-button class="btn-close" data-testid="close-btn" icon="close" ghost="" size="24"></ix-icon-button>
   </div>
-</cw-message-bar>
+</ix-message-bar>
 `;
diff --git a/packages/core/src/components/message-bar/test/basic/index.html b/packages/core/src/components/message-bar/test/basic/index.html
index 745ee149df2..7a52d1731a9 100644
--- a/packages/core/src/components/message-bar/test/basic/index.html
+++ b/packages/core/src/components/message-bar/test/basic/index.html
@@ -11,13 +11,13 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-message-bar>Message text</cw-message-bar>
-    <cw-message-bar type="warning">Message text</cw-message-bar>
-    <cw-message-bar type="danger">
+    <ix-message-bar>Message text</ix-message-bar>
+    <ix-message-bar type="warning">Message text</ix-message-bar>
+    <ix-message-bar type="danger">
       <div class="d-flex align-items-center justify-content-between">
-        Message text <cw-button>Action</cw-button>
+        Message text <ix-button>Action</ix-button>
       </div>
-    </cw-message-bar>
+    </ix-message-bar>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/message-bar/test/message-bar.spec.tsx b/packages/core/src/components/message-bar/test/message-bar.spec.tsx
index c0e4979336d..f723213bbc8 100644
--- a/packages/core/src/components/message-bar/test/message-bar.spec.tsx
+++ b/packages/core/src/components/message-bar/test/message-bar.spec.tsx
@@ -6,18 +6,18 @@ import { newSpecPage } from '@stencil/core/testing';
 import { fireEvent } from '@testing-library/dom';
 import { CwMessageBar } from '../message-bar';
 
-describe('cw-message-bar', () => {
+describe('ix-message-bar', () => {
   let page: any;
   let messageBar: any;
-  let closeButton: HTMLCwIconButtonElement;
+  let closeButton: HTMLIxIconButtonElement;
 
   beforeEach(async () => {
     page = await newSpecPage({
       components: [CwMessageBar],
-      html: `<cw-message-bar type="danger"></cw-message-bar>`,
+      html: `<ix-message-bar type="danger"></ix-message-bar>`,
     });
 
-    messageBar = document.querySelector('cw-message-bar');
+    messageBar = document.querySelector('ix-message-bar');
     closeButton = document.querySelector('[data-testid="close-btn"]');
   });
 
diff --git a/packages/core/src/components/modal-container/modal-container.tsx b/packages/core/src/components/modal-container/modal-container.tsx
index 23234a7b75f..2db3dd402dd 100644
--- a/packages/core/src/components/modal-container/modal-container.tsx
+++ b/packages/core/src/components/modal-container/modal-container.tsx
@@ -3,17 +3,17 @@
  */
 
 import { Component, Element, h, Host, Method } from '@stencil/core';
-import { Modal } from '../modal/cw-modal';
-import { ModalConfig, ModalContainerEvents } from '../modal/modal';
+import { Modal } from '../modal/modal';
+import { ModalConfig, ModalContainerEvents } from '../modal/modal-utils';
 import { Disposable, TypedEvent } from '../utils/typed-event';
 
 @Component({
-  tag: 'cw-modal-container',
+  tag: 'ix-modal-container',
   styleUrl: 'modal-container.scss',
   scoped: true,
 })
 export class ModalContainer {
-  @Element() hostElement: HTMLCwModalContainerElement;
+  @Element() hostElement: HTMLIxModalContainerElement;
 
   // eslint-disable-next-line @stencil/own-props-must-be-private
   public static readonly DOM_TAG_EVENT_BUS = 'cui-modal-event-bus';
@@ -48,7 +48,7 @@ export class ModalContainer {
    */
   @Method()
   async showModal(config: ModalConfig): Promise<void> {
-    const modal = document.createElement('cw-modal');
+    const modal = document.createElement('ix-modal');
     let { title, content, ...modifiedConfig } = config;
     Object.assign(modal, { headerTitle: title, ...modifiedConfig });
 
diff --git a/packages/core/src/components/modal-container/test/modal-container.spec.tsx b/packages/core/src/components/modal-container/test/modal-container.spec.tsx
index e6ee8ce08c1..8bd8e70beae 100644
--- a/packages/core/src/components/modal-container/test/modal-container.spec.tsx
+++ b/packages/core/src/components/modal-container/test/modal-container.spec.tsx
@@ -1,12 +1,12 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { ModalContainer } from '../modal-container';
 
-describe('cw-modal-container', () => {
+describe('ix-modal-container', () => {
   it('renders', async () => {
     const page = await newSpecPage({
       components: [ModalContainer],
-      html: `<cw-modal-container></cw-modal-container>`,
+      html: `<ix-modal-container></ix-modal-container>`,
     });
-    expect(page.root).toEqualHtml(`<cw-modal-container></cw-modal-container>`);
+    expect(page.root).toEqualHtml(`<ix-modal-container></ix-modal-container>`);
   });
 });
diff --git a/packages/core/src/components/modal/modal.ts b/packages/core/src/components/modal/modal-utils.ts
similarity index 88%
rename from packages/core/src/components/modal/modal.ts
rename to packages/core/src/components/modal/modal-utils.ts
index 56c21f549aa..253748fc041 100644
--- a/packages/core/src/components/modal/modal.ts
+++ b/packages/core/src/components/modal/modal-utils.ts
@@ -1,10 +1,10 @@
 /**
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { TypedEvent } from '../utils/typed-event';
 import { ModalContainer } from '../..';
-import { Modal } from './cw-modal';
 import { NotificationColor } from '../utils/notification-color';
+import { TypedEvent } from '../utils/typed-event';
+import { Modal } from './modal';
 
 export interface ModalConfig {
   animation?: boolean;
@@ -39,8 +39,8 @@ function getModalContext() {
 }
 
 function modal(config: ModalConfig): Promise<Modal> {
-  const result = new Promise<Modal>(resolve => {
-    getModalContext().onModalOpened.on(m => resolve(m));
+  const result = new Promise<Modal>((resolve) => {
+    getModalContext().onModalOpened.on((m) => resolve(m));
   });
   getModalContext().onShowModal.emit(config);
   return result;
diff --git a/packages/core/src/components/modal/cw-modal.scss b/packages/core/src/components/modal/modal.scss
similarity index 92%
rename from packages/core/src/components/modal/cw-modal.scss
rename to packages/core/src/components/modal/modal.scss
index 70514e37f90..e10afccd25e 100644
--- a/packages/core/src/components/modal/cw-modal.scss
+++ b/packages/core/src/components/modal/modal.scss
@@ -5,7 +5,7 @@
 @import '~bootstrap/scss/mixins/_breakpoints.scss';
 @import '~bootstrap/scss/_variables.scss';
 
-@import '../../../scss/v7/common-variables';
+@import 'common-variables';
 
 :host {
   position: relative;
@@ -45,7 +45,8 @@
       //@include box-shadow(4);
       flex-direction: row;
       background-color: var(--theme-modal--background);
-      border: var(--modal--border-thickness) solid var(--theme-modal--border-color);
+      border: var(--modal--border-thickness) solid
+        var(--theme-modal--border-color);
       padding: $large-space;
 
       .state-icon-container {
diff --git a/packages/core/src/components/modal/cw-modal.tsx b/packages/core/src/components/modal/modal.tsx
similarity index 83%
rename from packages/core/src/components/modal/cw-modal.tsx
rename to packages/core/src/components/modal/modal.tsx
index f673be3b03e..91f15ea447d 100644
--- a/packages/core/src/components/modal/cw-modal.tsx
+++ b/packages/core/src/components/modal/modal.tsx
@@ -1,18 +1,27 @@
 /**
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+} from '@stencil/core';
 import anime from 'animejs';
 import Animation from '../utils/animation';
 import { NotificationColor } from '../utils/notification-color';
 
 @Component({
-  tag: 'cw-modal',
-  styleUrl: 'cw-modal.scss',
+  tag: 'ix-modal',
+  styleUrl: 'modal.scss',
   scoped: true,
 })
 export class Modal {
-  @Element() hostElement: HTMLCwModalElement;
+  @Element() hostElement: HTMLIxModalElement;
 
   /**
    * Should the modal be animtated
@@ -200,12 +209,14 @@ export class Modal {
       const dismiss = this.beforeDismiss();
       if (this.isPromise(dismiss)) {
         dismiss.then(
-          result => {
+          (result) => {
             if (result !== false) {
-              this.slideUp(this.modalContent, () => this.dismissed.emit(reason));
+              this.slideUp(this.modalContent, () =>
+                this.dismissed.emit(reason)
+              );
             }
           },
-          () => {},
+          () => {}
         );
       } else if (dismiss !== false) {
         this.slideUp(this.modalContent, () => this.dismissed.emit(reason));
@@ -227,22 +238,33 @@ export class Modal {
       <Host>
         <div
           class={{
-            'animation': this.animation,
-            'modal': true,
-            'backdrop': this.backdrop === 'static' || this.backdrop,
+            animation: this.animation,
+            modal: true,
+            backdrop: this.backdrop === 'static' || this.backdrop,
             'align-items-center': this.centered,
-            'scrollable': this.scrollable,
+            scrollable: this.scrollable,
           }}
           aria-describedby={this.ariaDescribedBy}
           aria-labelledby={this.ariaLabelledBy}
         >
-          <div class={{ 'modal-dialog': true, 'modal-sm': this.size === 'sm', 'modal-lg': this.size === 'lg', 'modal-xl': this.size === 'xl' }}>
+          <div
+            class={{
+              'modal-dialog': true,
+              'modal-sm': this.size === 'sm',
+              'modal-lg': this.size === 'lg',
+              'modal-xl': this.size === 'xl',
+            }}
+          >
             <div class="modal-content">
               {this.icon === undefined || this.icon === '' ? (
                 ''
               ) : (
                 <div class="state-icon-container">
-                  <cw-icon name={this.icon} size="32" color={this.iconColor}></cw-icon>
+                  <ix-icon
+                    name={this.icon}
+                    size="32"
+                    color={this.iconColor}
+                  ></ix-icon>
                 </div>
               )}
               <div class="slot-container">
diff --git a/packages/core/src/components/modal/readme.md b/packages/core/src/components/modal/readme.md
index 75066480f6e..9c8d6d11528 100644
--- a/packages/core/src/components/modal/readme.md
+++ b/packages/core/src/components/modal/readme.md
@@ -1,6 +1,4 @@
-# cw-modal
-
-
+# ix-modal
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/modal/test/__snapshots__/modal.spec.tsx.snap b/packages/core/src/components/modal/test/__snapshots__/modal.spec.tsx.snap
index 024b2229339..bffa9faa9d5 100644
--- a/packages/core/src/components/modal/test/__snapshots__/modal.spec.tsx.snap
+++ b/packages/core/src/components/modal/test/__snapshots__/modal.spec.tsx.snap
@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`modal renders 1`] = `
-<cw-modal>
+<ix-modal>
   <!---->
   <div aria-labelledby="modal-title" class="animation backdrop modal scrollable">
     <div class="modal-dialog modal-sm">
       <div class="modal-content"></div>
     </div>
   </div>
-</cw-modal>
+</ix-modal>
 `;
diff --git a/packages/core/src/components/modal/test/basic/index.html b/packages/core/src/components/modal/test/basic/index.html
index 1feb89ee1de..50a8272fb5b 100644
--- a/packages/core/src/components/modal/test/basic/index.html
+++ b/packages/core/src/components/modal/test/basic/index.html
@@ -11,12 +11,12 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-modal-container></cw-modal-container>
+    <ix-modal-container></ix-modal-container>
     <script>
       (async () => {
-        await window.customElements.whenDefined('cw-modal-container');
-        const modalContainer = document.querySelector('cw-modal-container');
-        const div = document.createElement('cw-modal-example');
+        await window.customElements.whenDefined('ix-modal-container');
+        const modalContainer = document.querySelector('ix-modal-container');
+        const div = document.createElement('ix-modal-example');
 
         modalContainer.showModal({
           content: div,
diff --git a/packages/core/src/components/modal/test/modal.e2e.ts b/packages/core/src/components/modal/test/modal.e2e.ts
index 8a7b86a5e47..3638ddd5a30 100644
--- a/packages/core/src/components/modal/test/modal.e2e.ts
+++ b/packages/core/src/components/modal/test/modal.e2e.ts
@@ -7,7 +7,7 @@ import { regressionTest } from '@utils/test';
 regressionTest.describe('modal', () => {
   regressionTest('basic', async ({ page }) => {
     await page.goto(`modal/test/basic`);
-    await page.waitForSelector('cw-modal-example');
+    await page.waitForSelector('ix-modal-example');
     await page.waitForTimeout(500);
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
diff --git a/packages/core/src/components/modal/test/modal.spec.tsx b/packages/core/src/components/modal/test/modal.spec.tsx
index 23511a6a4e0..c02654fa37d 100644
--- a/packages/core/src/components/modal/test/modal.spec.tsx
+++ b/packages/core/src/components/modal/test/modal.spec.tsx
@@ -1,11 +1,11 @@
 import { newSpecPage } from '@stencil/core/testing';
-import { Modal } from '../cw-modal';
+import { Modal } from '../modal';
 
 describe('modal', () => {
   it('renders', async () => {
     const page = await newSpecPage({
       components: [Modal],
-      html: `<cw-modal></cw-modal>`,
+      html: `<ix-modal></ix-modal>`,
     });
     expect(page.root).toMatchSnapshot();
   });
diff --git a/packages/core/src/components/my-component/example-modal.tsx b/packages/core/src/components/my-component/example-modal.tsx
index 4ae378131ae..91509252bf6 100644
--- a/packages/core/src/components/my-component/example-modal.tsx
+++ b/packages/core/src/components/my-component/example-modal.tsx
@@ -1,7 +1,7 @@
 import { Component, Event, EventEmitter, h, Host } from '@stencil/core';
 
 @Component({
-  tag: 'cw-modal-example',
+  tag: 'ix-modal-example',
 })
 export class ModalExample {
   /**
@@ -20,14 +20,18 @@ export class ModalExample {
         <div>
           <div class="modal-header">
             Message headline
-            <cw-icon-button ghost icon="close" onClick={() => this.closeClick()}></cw-icon-button>
+            <ix-icon-button
+              ghost
+              icon="close"
+              onClick={() => this.closeClick()}
+            ></ix-icon-button>
           </div>
           <div class="modal-body">Message text lorem ipsum</div>
           <div class="modal-footer">
-            <cw-button outline onClick={() => this.closeClick()}>
+            <ix-button outline onClick={() => this.closeClick()}>
               Cancel
-            </cw-button>
-            <cw-button>OK</cw-button>
+            </ix-button>
+            <ix-button>OK</ix-button>
           </div>
         </div>
       </Host>
diff --git a/packages/core/src/components/my-component/my-component.scss b/packages/core/src/components/my-component/my-component.scss
index 4745363fd1a..37847e5787f 100644
--- a/packages/core/src/components/my-component/my-component.scss
+++ b/packages/core/src/components/my-component/my-component.scss
@@ -1,4 +1,4 @@
-@import '../../../scss/v7/common-variables';
+@import 'common-variables';
 
 :host {
   display: flex;
@@ -11,7 +11,7 @@
     padding: 2rem;
   }
 
-  cw-chip {
+  ix-chip {
     margin-block-end: $default-space;
   }
 }
diff --git a/packages/core/src/components/my-component/my-component.tsx b/packages/core/src/components/my-component/my-component.tsx
index 5fe1cf3afcb..fb0fbbf721d 100644
--- a/packages/core/src/components/my-component/my-component.tsx
+++ b/packages/core/src/components/my-component/my-component.tsx
@@ -3,8 +3,8 @@
  */
 import { Component, h, Host, State } from '@stencil/core';
 import { FlipTileState } from '../flip-tile/flip-tile-state';
-import { modal } from '../modal/modal';
-import { toast } from '../toast/toast';
+import { modal } from '../modal/modal-utils';
+import { toast } from '../toast/toast-utils';
 
 type Themes = 'brand-light' | 'brand-dark' | 'classic-light' | 'classic-dark';
 
@@ -45,7 +45,7 @@ export class MyComponent {
   }
 
   private showModal(showIcon = false) {
-    const content = document.createElement('cw-modal-example');
+    const content = document.createElement('ix-modal-example');
     const modal$ = modal({
       content,
       title: 'title',
@@ -64,33 +64,33 @@ export class MyComponent {
   render() {
     return (
       <Host>
-        <cw-basic-navigation>
-          <cw-menu>
-            <cw-menu-item
+        <ix-basic-navigation>
+          <ix-menu>
+            <ix-menu-item
               active={this.theme === 'brand-light'}
               onClick={() => this.changeTheme('brand-light')}
             >
               Brand 2022 Light
-            </cw-menu-item>
-            <cw-menu-item
+            </ix-menu-item>
+            <ix-menu-item
               active={this.theme === 'brand-dark'}
               onClick={() => this.changeTheme('brand-dark')}
             >
               Brand 2022 Dark
-            </cw-menu-item>
-            <cw-menu-item
+            </ix-menu-item>
+            <ix-menu-item
               active={this.theme === 'classic-light'}
               onClick={() => this.changeTheme('classic-light')}
             >
               Classic Light
-            </cw-menu-item>
-            <cw-menu-item
+            </ix-menu-item>
+            <ix-menu-item
               active={this.theme === 'classic-dark'}
               onClick={() => this.changeTheme('classic-dark')}
             >
               Classic Dark
-            </cw-menu-item>
-          </cw-menu>
+            </ix-menu-item>
+          </ix-menu>
 
           <main>
             <div
@@ -103,28 +103,28 @@ export class MyComponent {
                 width: '100%',
               }}
             >
-              <cw-date-picker></cw-date-picker>
+              <ix-date-picker></ix-date-picker>
             </div>
-            <cw-button
+            <ix-button
               style={{ marginInlineStart: '1rem' }}
               onClick={this.showToasts.bind(this)}
             >
               Show toasts
-            </cw-button>
-            <cw-button
+            </ix-button>
+            <ix-button
               style={{ marginInlineStart: '1rem' }}
               onClick={this.showModal.bind(this)}
             >
               Show modal
-            </cw-button>
-            <cw-button
+            </ix-button>
+            <ix-button
               style={{ marginInlineStart: '1rem' }}
               onClick={this.showModalWithIcon.bind(this)}
             >
               Show modal w/ icon
-            </cw-button>
+            </ix-button>
 
-            <cw-modal-container></cw-modal-container>
+            <ix-modal-container></ix-modal-container>
 
             <div
               style={{
@@ -132,12 +132,12 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-toggle></cw-toggle>
-              <cw-toggle checked></cw-toggle>
-              <cw-toggle disabled></cw-toggle>
-              <cw-toggle indeterminate></cw-toggle>
-              <cw-toggle textOff="Lorem ipsum" textOn="dolor sit"></cw-toggle>
-              <cw-toggle hideText></cw-toggle>
+              <ix-toggle></ix-toggle>
+              <ix-toggle checked></ix-toggle>
+              <ix-toggle disabled></ix-toggle>
+              <ix-toggle indeterminate></ix-toggle>
+              <ix-toggle textOff="Lorem ipsum" textOn="dolor sit"></ix-toggle>
+              <ix-toggle hideText></ix-toggle>
             </div>
 
             <div
@@ -146,40 +146,40 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-group
+              <ix-group
                 header="Header text"
                 sub-header="Subheader text"
                 index={0}
                 suppressHeaderSelection
               >
-                <cw-group-item text="Example text 1"></cw-group-item>
-                <cw-group-item
+                <ix-group-item text="Example text 1"></ix-group-item>
+                <ix-group-item
                   text="Example text 2"
                   secondaryText="26 sub items"
-                ></cw-group-item>
+                ></ix-group-item>
                 <div slot="footer">
-                  <cw-button>
-                    <cw-icon name="plus"></cw-icon>Add item
-                  </cw-button>
+                  <ix-button>
+                    <ix-icon name="plus"></ix-icon>Add item
+                  </ix-button>
                 </div>
-              </cw-group>
+              </ix-group>
 
-              <cw-group
+              <ix-group
                 header="Header text"
                 sub-header="Subheader text"
                 index={0}
               >
-                <cw-group-item text="Example text 1"></cw-group-item>
-                <cw-group-item
+                <ix-group-item text="Example text 1"></ix-group-item>
+                <ix-group-item
                   text="Example text 2"
                   secondaryText="26 sub items"
-                ></cw-group-item>
+                ></ix-group-item>
                 <div slot="footer">
-                  <cw-button>
-                    <cw-icon name="plus"></cw-icon>Add item
-                  </cw-button>
+                  <ix-button>
+                    <ix-icon name="plus"></ix-icon>Add item
+                  </ix-button>
                 </div>
-              </cw-group>
+              </ix-group>
             </div>
 
             <div
@@ -192,43 +192,43 @@ export class MyComponent {
                 width: '100%',
               }}
             >
-              <cw-tabs layout={'stretched'}>
-                <cw-tab-item>stretched tab 1</cw-tab-item>
-                <cw-tab-item>stretched tab 2</cw-tab-item>
-              </cw-tabs>
+              <ix-tabs layout={'stretched'}>
+                <ix-tab-item>stretched tab 1</ix-tab-item>
+                <ix-tab-item>stretched tab 2</ix-tab-item>
+              </ix-tabs>
 
-              <cw-tabs
+              <ix-tabs
                 style={{
                   marginTop: '2rem',
                 }}
               >
-                <cw-tab-item>tab 1</cw-tab-item>
-                <cw-tab-item>tab 2</cw-tab-item>
-                <cw-tab-item>tab 3</cw-tab-item>
-                <cw-tab-item>tab 4</cw-tab-item>
-                <cw-tab-item>tab 5</cw-tab-item>
-                <cw-tab-item>tab 6</cw-tab-item>
-                <cw-tab-item>tab 7</cw-tab-item>
-                <cw-tab-item>tab 8</cw-tab-item>
-                <cw-tab-item>tab 9</cw-tab-item>
-                <cw-tab-item>tab 10</cw-tab-item>
-                <cw-tab-item>tab 11</cw-tab-item>
-                <cw-tab-item>tab 12</cw-tab-item>
-                <cw-tab-item>tab 13</cw-tab-item>
-                <cw-tab-item>tab 14</cw-tab-item>
-                <cw-tab-item>tab 15</cw-tab-item>
-                <cw-tab-item>tab 16</cw-tab-item>
-                <cw-tab-item>tab 17</cw-tab-item>
-                <cw-tab-item>tab 18</cw-tab-item>
-                <cw-tab-item>tab 19</cw-tab-item>
-                <cw-tab-item>tab 20</cw-tab-item>
-                <cw-tab-item>tab 21</cw-tab-item>
-                <cw-tab-item>tab 22</cw-tab-item>
-                <cw-tab-item>tab 23</cw-tab-item>
-                <cw-tab-item>tab 24</cw-tab-item>
-                <cw-tab-item>tab 25</cw-tab-item>
-                <cw-tab-item>tab 26</cw-tab-item>
-              </cw-tabs>
+                <ix-tab-item>tab 1</ix-tab-item>
+                <ix-tab-item>tab 2</ix-tab-item>
+                <ix-tab-item>tab 3</ix-tab-item>
+                <ix-tab-item>tab 4</ix-tab-item>
+                <ix-tab-item>tab 5</ix-tab-item>
+                <ix-tab-item>tab 6</ix-tab-item>
+                <ix-tab-item>tab 7</ix-tab-item>
+                <ix-tab-item>tab 8</ix-tab-item>
+                <ix-tab-item>tab 9</ix-tab-item>
+                <ix-tab-item>tab 10</ix-tab-item>
+                <ix-tab-item>tab 11</ix-tab-item>
+                <ix-tab-item>tab 12</ix-tab-item>
+                <ix-tab-item>tab 13</ix-tab-item>
+                <ix-tab-item>tab 14</ix-tab-item>
+                <ix-tab-item>tab 15</ix-tab-item>
+                <ix-tab-item>tab 16</ix-tab-item>
+                <ix-tab-item>tab 17</ix-tab-item>
+                <ix-tab-item>tab 18</ix-tab-item>
+                <ix-tab-item>tab 19</ix-tab-item>
+                <ix-tab-item>tab 20</ix-tab-item>
+                <ix-tab-item>tab 21</ix-tab-item>
+                <ix-tab-item>tab 22</ix-tab-item>
+                <ix-tab-item>tab 23</ix-tab-item>
+                <ix-tab-item>tab 24</ix-tab-item>
+                <ix-tab-item>tab 25</ix-tab-item>
+                <ix-tab-item>tab 26</ix-tab-item>
+              </ix-tabs>
 
               <div
                 style={{
@@ -236,67 +236,67 @@ export class MyComponent {
                   display: 'flex',
                 }}
               >
-                <cw-tabs>
-                  <cw-tab-item icon>
-                    <cw-icon name="maintenance" size="16"></cw-icon>
-                  </cw-tab-item>
-                  <cw-tab-item icon>
-                    <cw-icon name="info" size="16"></cw-icon>
-                  </cw-tab-item>
-                  <cw-tab-item icon>
-                    <cw-icon name="info" size="16"></cw-icon>
-                  </cw-tab-item>
-                </cw-tabs>
+                <ix-tabs>
+                  <ix-tab-item icon>
+                    <ix-icon name="maintenance" size="16"></ix-icon>
+                  </ix-tab-item>
+                  <ix-tab-item icon>
+                    <ix-icon name="info" size="16"></ix-icon>
+                  </ix-tab-item>
+                  <ix-tab-item icon>
+                    <ix-icon name="info" size="16"></ix-icon>
+                  </ix-tab-item>
+                </ix-tabs>
 
-                <cw-tabs
+                <ix-tabs
                   small
                   style={{
                     marginLeft: '2rem',
                   }}
                 >
-                  <cw-tab-item icon>
-                    <cw-icon name="maintenance" size="16"></cw-icon>
-                  </cw-tab-item>
-                  <cw-tab-item icon>
-                    <cw-icon name="info" size="16"></cw-icon>
-                  </cw-tab-item>
-                  <cw-tab-item icon>
-                    <cw-icon name="info" size="16"></cw-icon>
-                  </cw-tab-item>
-                </cw-tabs>
+                  <ix-tab-item icon>
+                    <ix-icon name="maintenance" size="16"></ix-icon>
+                  </ix-tab-item>
+                  <ix-tab-item icon>
+                    <ix-icon name="info" size="16"></ix-icon>
+                  </ix-tab-item>
+                  <ix-tab-item icon>
+                    <ix-icon name="info" size="16"></ix-icon>
+                  </ix-tab-item>
+                </ix-tabs>
 
-                <cw-tabs
+                <ix-tabs
                   small
                   style={{
                     marginLeft: '2rem',
                   }}
                 >
-                  <cw-tab-item>small tab 1</cw-tab-item>
-                  <cw-tab-item>small tab 2</cw-tab-item>
-                  <cw-tab-item>small tab 3</cw-tab-item>
-                </cw-tabs>
+                  <ix-tab-item>small tab 1</ix-tab-item>
+                  <ix-tab-item>small tab 2</ix-tab-item>
+                  <ix-tab-item>small tab 3</ix-tab-item>
+                </ix-tabs>
 
-                <cw-tabs
+                <ix-tabs
                   placement="top"
                   style={{
                     marginLeft: '2rem',
                   }}
                 >
-                  <cw-tab-item>inverted tab 1</cw-tab-item>
-                  <cw-tab-item>inverted tab 2</cw-tab-item>
-                  <cw-tab-item>inverted tab 3</cw-tab-item>
-                </cw-tabs>
+                  <ix-tab-item>inverted tab 1</ix-tab-item>
+                  <ix-tab-item>inverted tab 2</ix-tab-item>
+                  <ix-tab-item>inverted tab 3</ix-tab-item>
+                </ix-tabs>
 
-                <cw-tabs
+                <ix-tabs
                   selected={1}
                   style={{
                     marginLeft: '2rem',
                   }}
                 >
-                  <cw-tab-item disabled>disabled tab 1</cw-tab-item>
-                  <cw-tab-item>tab 2</cw-tab-item>
-                  <cw-tab-item disabled>disabled tab 3</cw-tab-item>
-                </cw-tabs>
+                  <ix-tab-item disabled>disabled tab 1</ix-tab-item>
+                  <ix-tab-item>tab 2</ix-tab-item>
+                  <ix-tab-item disabled>disabled tab 3</ix-tab-item>
+                </ix-tabs>
               </div>
             </div>
 
@@ -309,13 +309,13 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-message-bar>Message text</cw-message-bar>
-              <cw-message-bar type="warning">Message text</cw-message-bar>
-              <cw-message-bar type="danger">
+              <ix-message-bar>Message text</ix-message-bar>
+              <ix-message-bar type="warning">Message text</ix-message-bar>
+              <ix-message-bar type="danger">
                 <div class="d-flex align-items-center justify-content-between">
-                  Message text <cw-button>Action</cw-button>
+                  Message text <ix-button>Action</ix-button>
                 </div>
-              </cw-message-bar>
+              </ix-message-bar>
             </div>
 
             <div
@@ -326,15 +326,15 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-animated-tabs>
-                <cw-animated-tab icon="maintenance" count={21}>
+              <ix-animated-tabs>
+                <ix-animated-tab icon="maintenance" count={21}>
                   Tab one content
-                </cw-animated-tab>
-                <cw-animated-tab icon="info">Tab two content</cw-animated-tab>
-                <cw-animated-tab class="disabled" icon="info">
+                </ix-animated-tab>
+                <ix-animated-tab icon="info">Tab two content</ix-animated-tab>
+                <ix-animated-tab class="disabled" icon="info">
                   Tab two content
-                </cw-animated-tab>
-              </cw-animated-tabs>
+                </ix-animated-tab>
+              </ix-animated-tabs>
             </div>
 
             <div
@@ -345,51 +345,51 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-flip-tile>
+              <ix-flip-tile>
                 <div slot="header">Flip header</div>
                 <div slot="footer">
                   <div>Predicted maintenance date</div>
                   <div class="d-flex align-items-center">
-                    <cw-icon name="info" size="16"></cw-icon>2021-06-22
+                    <ix-icon name="info" size="16"></ix-icon>2021-06-22
                   </div>
                 </div>
-              </cw-flip-tile>
-              <cw-flip-tile state={FlipTileState.Primary}>
+              </ix-flip-tile>
+              <ix-flip-tile state={FlipTileState.Primary}>
                 <div slot="header">Flip header</div>
                 <div slot="footer">
                   <div>Predicted maintenance date</div>
                   <div class="d-flex align-items-center">
-                    <cw-icon name="info" size="16"></cw-icon>2021-06-22
+                    <ix-icon name="info" size="16"></ix-icon>2021-06-22
                   </div>
                 </div>
-              </cw-flip-tile>
-              <cw-flip-tile state={FlipTileState.Info}>
+              </ix-flip-tile>
+              <ix-flip-tile state={FlipTileState.Info}>
                 <div slot="header">Flip header</div>
                 <div slot="footer">
                   <div>Predicted maintenance date</div>
                   <div class="d-flex align-items-center">
-                    <cw-icon name="info" size="16"></cw-icon>2021-06-22
+                    <ix-icon name="info" size="16"></ix-icon>2021-06-22
                   </div>
                 </div>
-              </cw-flip-tile>
-              <cw-flip-tile state={FlipTileState.Warning}>
+              </ix-flip-tile>
+              <ix-flip-tile state={FlipTileState.Warning}>
                 <div slot="header">Flip header</div>
                 <div slot="footer">
                   <div>Predicted maintenance date</div>
                   <div class="d-flex align-items-center">
-                    <cw-icon name="info" size="16"></cw-icon>2021-06-22
+                    <ix-icon name="info" size="16"></ix-icon>2021-06-22
                   </div>
                 </div>
-              </cw-flip-tile>
-              <cw-flip-tile state={FlipTileState.Alarm}>
+              </ix-flip-tile>
+              <ix-flip-tile state={FlipTileState.Alarm}>
                 <div slot="header">Flip header</div>
                 <div slot="footer">
                   <div>Predicted maintenance date</div>
                   <div class="d-flex align-items-center">
-                    <cw-icon name="info" size="16"></cw-icon>2021-06-22
+                    <ix-icon name="info" size="16"></ix-icon>2021-06-22
                   </div>
                 </div>
-              </cw-flip-tile>
+              </ix-flip-tile>
             </div>
 
             <div
@@ -400,20 +400,20 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-tile size="small">92.8 °C</cw-tile>
+              <ix-tile size="small">92.8 °C</ix-tile>
 
-              <cw-tile size="medium" class="mr-1">
+              <ix-tile size="medium" class="mr-1">
                 <div slot="header">Tile header</div>
                 <div class="text-l">92.8 °C</div>
-              </cw-tile>
+              </ix-tile>
 
-              <cw-tile size="big">
+              <ix-tile size="big">
                 <div
                   class="d-flex flex-grow-1 align-items-center justify-content-between"
                   slot="header"
                 >
                   Tile header
-                  <cw-icon-button ghost icon="context-menu"></cw-icon-button>
+                  <ix-icon-button ghost icon="context-menu"></ix-icon-button>
                 </div>
                 <div slot="subheader">Temperature</div>
                 <div
@@ -431,11 +431,11 @@ export class MyComponent {
                   class="d-flex h-100 align-items-center justify-content-end"
                   slot="footer"
                 >
-                  <cw-button ghost slot="footer">
-                    <cw-icon name="chevron-right-small"></cw-icon>Details
-                  </cw-button>
+                  <ix-button ghost slot="footer">
+                    <ix-icon name="chevron-right-small"></ix-icon>Details
+                  </ix-button>
                 </div>
-              </cw-tile>
+              </ix-tile>
             </div>
 
             <div
@@ -446,26 +446,26 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-select selectedIndices="2">
-                <cw-select-item label="Item 1" value="1"></cw-select-item>
-                <cw-select-item label="Item 2" value="2"></cw-select-item>
-                <cw-select-item label="Item 3" value="3"></cw-select-item>
-                <cw-select-item label="Item 4" value="4"></cw-select-item>
-              </cw-select>
+              <ix-select selectedIndices="2">
+                <ix-select-item label="Item 1" value="1"></ix-select-item>
+                <ix-select-item label="Item 2" value="2"></ix-select-item>
+                <ix-select-item label="Item 3" value="3"></ix-select-item>
+                <ix-select-item label="Item 4" value="4"></ix-select-item>
+              </ix-select>
 
-              <cw-select mode="multiple" selectedIndices="2">
-                <cw-select-item label="Item 1" value="1"></cw-select-item>
-                <cw-select-item label="Item 2" value="2"></cw-select-item>
-                <cw-select-item label="Item 3" value="3"></cw-select-item>
-                <cw-select-item label="Item 4" value="4"></cw-select-item>
-              </cw-select>
+              <ix-select mode="multiple" selectedIndices="2">
+                <ix-select-item label="Item 1" value="1"></ix-select-item>
+                <ix-select-item label="Item 2" value="2"></ix-select-item>
+                <ix-select-item label="Item 3" value="3"></ix-select-item>
+                <ix-select-item label="Item 4" value="4"></ix-select-item>
+              </ix-select>
 
-              <cw-select editable selectedIndices="2" allowClear>
-                <cw-select-item label="Item 1" value="1"></cw-select-item>
-                <cw-select-item label="Item 2" value="2"></cw-select-item>
-                <cw-select-item label="Item 3" value="3"></cw-select-item>
-                <cw-select-item label="Item 4" value="4"></cw-select-item>
-              </cw-select>
+              <ix-select editable selectedIndices="2" allowClear>
+                <ix-select-item label="Item 1" value="1"></ix-select-item>
+                <ix-select-item label="Item 2" value="2"></ix-select-item>
+                <ix-select-item label="Item 3" value="3"></ix-select-item>
+                <ix-select-item label="Item 4" value="4"></ix-select-item>
+              </ix-select>
             </div>
 
             <div
@@ -476,7 +476,7 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-filter-chip>Test</cw-filter-chip>
+              <ix-filter-chip>Test</ix-filter-chip>
             </div>
 
             <div
@@ -488,23 +488,23 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-breadcrumb>
-                <cw-breadcrumb-item
+              <ix-breadcrumb>
+                <ix-breadcrumb-item
                   icon="home"
                   label="Root"
-                ></cw-breadcrumb-item>
-                <cw-breadcrumb-item label="Level 1"></cw-breadcrumb-item>
-                <cw-breadcrumb-item label="Level 2"></cw-breadcrumb-item>
-              </cw-breadcrumb>
+                ></ix-breadcrumb-item>
+                <ix-breadcrumb-item label="Level 1"></ix-breadcrumb-item>
+                <ix-breadcrumb-item label="Level 2"></ix-breadcrumb-item>
+              </ix-breadcrumb>
 
-              <cw-breadcrumb ghost>
-                <cw-breadcrumb-item
+              <ix-breadcrumb ghost>
+                <ix-breadcrumb-item
                   icon="home"
                   label="Root"
-                ></cw-breadcrumb-item>
-                <cw-breadcrumb-item label="Level 1"></cw-breadcrumb-item>
-                <cw-breadcrumb-item label="Level 2"></cw-breadcrumb-item>
-              </cw-breadcrumb>
+                ></ix-breadcrumb-item>
+                <ix-breadcrumb-item label="Level 1"></ix-breadcrumb-item>
+                <ix-breadcrumb-item label="Level 2"></ix-breadcrumb-item>
+              </ix-breadcrumb>
             </div>
 
             <div
@@ -515,19 +515,19 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-counter-pill>1</cw-counter-pill>
-              <cw-counter-pill>12</cw-counter-pill>
-              <cw-counter-pill>123</cw-counter-pill>
-              <cw-counter-pill style={{ width: '8rem' }}>123</cw-counter-pill>
+              <ix-counter-pill>1</ix-counter-pill>
+              <ix-counter-pill>12</ix-counter-pill>
+              <ix-counter-pill>123</ix-counter-pill>
+              <ix-counter-pill style={{ width: '8rem' }}>123</ix-counter-pill>
 
-              <cw-counter-pill variant="success">1</cw-counter-pill>
-              <cw-counter-pill outline>12</cw-counter-pill>
-              <cw-counter-pill outline variant="alarm">
+              <ix-counter-pill variant="success">1</ix-counter-pill>
+              <ix-counter-pill outline>12</ix-counter-pill>
+              <ix-counter-pill outline variant="alarm">
                 123
-              </cw-counter-pill>
-              <cw-counter-pill alignLeft outline style={{ width: '8rem' }}>
+              </ix-counter-pill>
+              <ix-counter-pill alignLeft outline style={{ width: '8rem' }}>
                 123
-              </cw-counter-pill>
+              </ix-counter-pill>
             </div>
             <div
               style={{
@@ -537,37 +537,37 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-pill variant="custom" color="white" background="purple">
+              <ix-pill variant="custom" color="white" background="purple">
                 Label
-              </cw-pill>
+              </ix-pill>
 
-              <cw-pill>Label</cw-pill>
-              <cw-pill outline>Label</cw-pill>
-              <cw-pill style={{ width: '8rem' }}>Label</cw-pill>
+              <ix-pill>Label</ix-pill>
+              <ix-pill outline>Label</ix-pill>
+              <ix-pill style={{ width: '8rem' }}>Label</ix-pill>
 
-              <cw-pill icon="star">Label</cw-pill>
-              <cw-pill icon="star" style={{ width: '8rem' }}>
+              <ix-pill icon="star">Label</ix-pill>
+              <ix-pill icon="star" style={{ width: '8rem' }}>
                 Label
-              </cw-pill>
-              <cw-pill outline alignLeft icon="star" style={{ width: '8rem' }}>
+              </ix-pill>
+              <ix-pill outline alignLeft icon="star" style={{ width: '8rem' }}>
                 Label
-              </cw-pill>
+              </ix-pill>
 
-              <cw-pill variant="alarm">Label</cw-pill>
-              <cw-pill variant="alarm" outline>
+              <ix-pill variant="alarm">Label</ix-pill>
+              <ix-pill variant="alarm" outline>
                 Label
-              </cw-pill>
-              <cw-pill variant="alarm" style={{ width: '8rem' }}>
+              </ix-pill>
+              <ix-pill variant="alarm" style={{ width: '8rem' }}>
                 Label
-              </cw-pill>
+              </ix-pill>
 
-              <cw-pill variant="alarm" icon="star">
+              <ix-pill variant="alarm" icon="star">
                 Label
-              </cw-pill>
-              <cw-pill variant="alarm" icon="star" style={{ width: '8rem' }}>
+              </ix-pill>
+              <ix-pill variant="alarm" icon="star" style={{ width: '8rem' }}>
                 Label
-              </cw-pill>
-              <cw-pill
+              </ix-pill>
+              <ix-pill
                 variant="alarm"
                 outline
                 alignLeft
@@ -575,7 +575,7 @@ export class MyComponent {
                 style={{ width: '8rem' }}
               >
                 Label
-              </cw-pill>
+              </ix-pill>
             </div>
 
             <div
@@ -587,11 +587,11 @@ export class MyComponent {
                 flexWrap: 'wrap',
               }}
             >
-              <cw-chip closable outline>
+              <ix-chip closable outline>
                 Primary
-              </cw-chip>
-              <cw-chip icon="print">Primary with icon</cw-chip>
-              <cw-chip
+              </ix-chip>
+              <ix-chip icon="print">Primary with icon</ix-chip>
+              <ix-chip
                 icon="print"
                 style={{ width: '10rem' }}
                 closable
@@ -599,15 +599,15 @@ export class MyComponent {
                 onClick={console.log}
               >
                 Primary
-              </cw-chip>
+              </ix-chip>
 
-              <cw-chip variant="critical" closable outline>
+              <ix-chip variant="critical" closable outline>
                 Alarm
-              </cw-chip>
-              <cw-chip variant="alarm" icon="print">
+              </ix-chip>
+              <ix-chip variant="alarm" icon="print">
                 Alarm with icon
-              </cw-chip>
-              <cw-chip
+              </ix-chip>
+              <ix-chip
                 variant="alarm"
                 icon="print"
                 style={{ width: '10rem' }}
@@ -616,8 +616,8 @@ export class MyComponent {
                 onClick={console.log}
               >
                 Alarm
-              </cw-chip>
-              <cw-chip
+              </ix-chip>
+              <ix-chip
                 variant="warning"
                 icon="print"
                 style={{ width: '10rem' }}
@@ -626,8 +626,8 @@ export class MyComponent {
                 onClick={console.log}
               >
                 Warning
-              </cw-chip>
-              <cw-chip
+              </ix-chip>
+              <ix-chip
                 variant="info"
                 icon="print"
                 style={{ width: '10rem' }}
@@ -636,8 +636,8 @@ export class MyComponent {
                 onClick={console.log}
               >
                 Info
-              </cw-chip>
-              <cw-chip
+              </ix-chip>
+              <ix-chip
                 variant="neutral"
                 icon="print"
                 style={{ width: '10rem' }}
@@ -646,8 +646,8 @@ export class MyComponent {
                 onClick={console.log}
               >
                 Neutral
-              </cw-chip>
-              <cw-chip
+              </ix-chip>
+              <ix-chip
                 variant="critical"
                 icon="print"
                 style={{ width: '10rem' }}
@@ -656,8 +656,8 @@ export class MyComponent {
                 onClick={console.log}
               >
                 Critical
-              </cw-chip>
-              <cw-chip
+              </ix-chip>
+              <ix-chip
                 variant="success"
                 icon="print"
                 style={{ width: '10rem' }}
@@ -666,8 +666,8 @@ export class MyComponent {
                 onClick={console.log}
               >
                 Success
-              </cw-chip>
-              <cw-chip
+              </ix-chip>
+              <ix-chip
                 background="purple"
                 color="green"
                 variant="custom"
@@ -678,7 +678,7 @@ export class MyComponent {
                 onClick={console.log}
               >
                 Custom
-              </cw-chip>
+              </ix-chip>
             </div>
             <div
               style={{
@@ -689,13 +689,13 @@ export class MyComponent {
               }}
             >
               <div class="btn-group">
-                <cw-button variant="Primary" outline>
+                <ix-button variant="Primary" outline>
                   Left
-                </cw-button>
-                <cw-button variant="Primary">Middle</cw-button>
-                <cw-button variant="Primary" outline>
+                </ix-button>
+                <ix-button variant="Primary">Middle</ix-button>
+                <ix-button variant="Primary" outline>
                   Right
-                </cw-button>
+                </ix-button>
               </div>
             </div>
             <div
@@ -706,7 +706,7 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-blind label="Blind">Blind content</cw-blind>
+              <ix-blind label="Blind">Blind content</ix-blind>
             </div>
             <div
               style={{
@@ -725,21 +725,21 @@ export class MyComponent {
                   marginTop: '2rem',
                 }}
               >
-                <cw-button>Button</cw-button>
+                <ix-button>Button</ix-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-button disabled>Button</cw-button>
+                <ix-button disabled>Button</ix-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-button outline>Button</cw-button>
+                <ix-button outline>Button</ix-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-button disabled outline>
+                <ix-button disabled outline>
                   Button
-                </cw-button>
+                </ix-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-button ghost>Button</cw-button>
+                <ix-button ghost>Button</ix-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-button disabled ghost>
+                <ix-button disabled ghost>
                   Button
-                </cw-button>
+                </ix-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
               </div>
 
@@ -752,27 +752,27 @@ export class MyComponent {
                   marginTop: '2rem',
                 }}
               >
-                <cw-button variant="Secondary">Button</cw-button>
+                <ix-button variant="Secondary">Button</ix-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-button variant="Secondary" disabled>
+                <ix-button variant="Secondary" disabled>
                   Button
-                </cw-button>
+                </ix-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-button variant="Secondary" outline>
+                <ix-button variant="Secondary" outline>
                   Button
-                </cw-button>
+                </ix-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-button variant="Secondary" disabled outline>
+                <ix-button variant="Secondary" disabled outline>
                   Button
-                </cw-button>
+                </ix-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-button variant="Secondary" ghost>
+                <ix-button variant="Secondary" ghost>
                   Button
-                </cw-button>
+                </ix-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-button variant="Secondary" disabled ghost>
+                <ix-button variant="Secondary" disabled ghost>
                   Button
-                </cw-button>
+                </ix-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
               </div>
 
@@ -785,9 +785,9 @@ export class MyComponent {
                   marginTop: '2rem',
                 }}
               >
-                <cw-button variant="Secondary" ghost selected>
+                <ix-button variant="Secondary" ghost selected>
                   Button
-                </cw-button>
+                </ix-button>
               </div>
 
               <div
@@ -799,33 +799,33 @@ export class MyComponent {
                   marginTop: '2rem',
                 }}
               >
-                <cw-icon-button icon="print" oval></cw-icon-button>
+                <ix-icon-button icon="print" oval></ix-icon-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-icon-button
+                <ix-icon-button
                   icon="print"
                   oval
                   variant="Primary"
-                ></cw-icon-button>
+                ></ix-icon-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-icon-button
+                <ix-icon-button
                   icon="print"
                   oval
                   variant="Primary"
                   outline
-                ></cw-icon-button>
+                ></ix-icon-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-icon-button
+                <ix-icon-button
                   icon="print"
                   oval
                   variant="Primary"
                   ghost
-                ></cw-icon-button>
+                ></ix-icon-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-icon-button icon="print" oval size="24"></cw-icon-button>
+                <ix-icon-button icon="print" oval size="24"></ix-icon-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-icon-button icon="print" oval size="16"></cw-icon-button>
+                <ix-icon-button icon="print" oval size="16"></ix-icon-button>
                 <div style={{ marginRight: '0.25rem' }}></div>
-                <cw-icon-button icon="print" oval size="12"></cw-icon-button>
+                <ix-icon-button icon="print" oval size="12"></ix-icon-button>
               </div>
             </div>
             <div
@@ -845,11 +845,11 @@ export class MyComponent {
                   marginTop: '2rem',
                 }}
               >
-                <cw-split-button label="Test">
-                  <cw-split-button-item label="Item 1" icon="print" />
-                  <cw-split-button-item label="Item 2" icon="print" />
-                  <cw-split-button-item label="Item 3" icon="print" />
-                </cw-split-button>
+                <ix-split-button label="Test">
+                  <ix-split-button-item label="Item 1" icon="print" />
+                  <ix-split-button-item label="Item 2" icon="print" />
+                  <ix-split-button-item label="Item 3" icon="print" />
+                </ix-split-button>
               </div>
               <div
                 style={{
@@ -962,23 +962,23 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-button id="triggerId">Dropdown</cw-button>
-              <cw-dropdown
+              <ix-button id="triggerId">Dropdown</ix-button>
+              <ix-dropdown
                 trigger="triggerId"
                 placement="bottom-start"
                 header="Header"
               >
                 <div class="dropdown-buttons">
-                  <cw-icon-button invisible icon="cut"></cw-icon-button>
-                  <cw-icon-button invisible icon="copy"></cw-icon-button>
-                  <cw-icon-button invisible icon="paste"></cw-icon-button>
-                  <cw-icon-button invisible icon="trashcan"></cw-icon-button>
+                  <ix-icon-button invisible icon="cut"></ix-icon-button>
+                  <ix-icon-button invisible icon="copy"></ix-icon-button>
+                  <ix-icon-button invisible icon="paste"></ix-icon-button>
+                  <ix-icon-button invisible icon="trashcan"></ix-icon-button>
                 </div>
                 <div class="dropdown-divider"></div>
-                <cw-dropdown-item label="Item 1"></cw-dropdown-item>
-                <cw-dropdown-item label="Item 2"></cw-dropdown-item>
-                <cw-dropdown-item disabled label="Item 3"></cw-dropdown-item>
-              </cw-dropdown>
+                <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+                <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+                <ix-dropdown-item disabled label="Item 3"></ix-dropdown-item>
+              </ix-dropdown>
             </div>
 
             <div
@@ -1006,16 +1006,16 @@ export class MyComponent {
                   type="number"
                   style={{ marginBottom: '2rem' }}
                 />
-                <cw-input-group style={{ marginBottom: '1rem' }}>
+                <ix-input-group style={{ marginBottom: '1rem' }}>
                   <span slot="input-start">Name</span>
                   <input
                     type="text"
                     class="form-control"
                     aria-label="Dollar amount (with dot and two decimal places)"
                   />
-                </cw-input-group>
+                </ix-input-group>
 
-                <cw-input-group style={{ marginBottom: '2rem' }}>
+                <ix-input-group style={{ marginBottom: '2rem' }}>
                   <span slot="input-start">Price</span>
                   <input
                     type="number"
@@ -1024,7 +1024,7 @@ export class MyComponent {
                   />
                   <span slot="input-end">.00</span>
                   <span slot="input-end">$</span>
-                </cw-input-group>
+                </ix-input-group>
 
                 <input
                   style={{ marginBottom: '2rem' }}
@@ -1069,7 +1069,7 @@ export class MyComponent {
                 marginTop: '2rem',
               }}
             >
-              <cw-expanding-search placeholder="Test..." />
+              <ix-expanding-search placeholder="Test..." />
             </div>
             <div
               style={{
@@ -1087,7 +1087,7 @@ export class MyComponent {
               ></textarea>
             </div>
           </main>
-        </cw-basic-navigation>
+        </ix-basic-navigation>
       </Host>
     );
   }
diff --git a/packages/core/src/components/pill/pill.scss b/packages/core/src/components/pill/pill.scss
index f743bb6ba58..94d29449afd 100644
--- a/packages/core/src/components/pill/pill.scss
+++ b/packages/core/src/components/pill/pill.scss
@@ -2,8 +2,8 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 @import './../chip/chip-mixin';
-@import './../../../scss/v7/common-variables';
-@import './../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/text-truncation';
 
 $border-radius: 100px;
 $chip-height: 1.25rem;
diff --git a/packages/core/src/components/pill/pill.tsx b/packages/core/src/components/pill/pill.tsx
index 036e758eb1d..bb3dfb2ff75 100644
--- a/packages/core/src/components/pill/pill.tsx
+++ b/packages/core/src/components/pill/pill.tsx
@@ -4,17 +4,25 @@
 import { Component, Element, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-pill',
+  tag: 'ix-pill',
   styleUrl: 'pill.scss',
   scoped: true,
 })
 export class Pill {
-  @Element() el: HTMLCwPillElement;
+  @Element() el: HTMLIxPillElement;
 
   /**
    * Pill variant
    */
-  @Prop({ reflect: true }) variant: 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom' = 'primary';
+  @Prop({ reflect: true }) variant:
+    | 'primary'
+    | 'alarm'
+    | 'critical'
+    | 'warning'
+    | 'info'
+    | 'neutral'
+    | 'success'
+    | 'custom' = 'primary';
 
   /**
    * Show pill as outline
@@ -45,7 +53,7 @@ export class Pill {
     return (
       <Host
         class={{
-          'outline': this.outline,
+          outline: this.outline,
           'align-left': this.alignLeft,
         }}
         style={
@@ -58,7 +66,9 @@ export class Pill {
         }
         title={this.el.textContent}
       >
-        {this.icon ? <cw-icon class={'with-icon'} name={this.icon} size={'16'} /> : null}
+        {this.icon ? (
+          <ix-icon class={'with-icon'} name={this.icon} size={'16'} />
+        ) : null}
         <div class="slot">
           <slot></slot>
         </div>
diff --git a/packages/core/src/components/pill/readme.md b/packages/core/src/components/pill/readme.md
index 92510ef7d06..dd6f6ce3f7a 100644
--- a/packages/core/src/components/pill/readme.md
+++ b/packages/core/src/components/pill/readme.md
@@ -1,6 +1,4 @@
-# cw-pill
-
-
+# ix-pill
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/pill/test/basic/index.html b/packages/core/src/components/pill/test/basic/index.html
index 3a4cf6304bb..24ef1b009bf 100644
--- a/packages/core/src/components/pill/test/basic/index.html
+++ b/packages/core/src/components/pill/test/basic/index.html
@@ -19,9 +19,9 @@
         margin-top: 2rem;
       "
     >
-      <cw-pill closable outline> Primary </cw-pill>
-      <cw-pill icon="print">Primary with icon</cw-pill>
-      <cw-pill
+      <ix-pill closable outline> Primary </ix-pill>
+      <ix-pill icon="print">Primary with icon</ix-pill>
+      <ix-pill
         icon="print"
         style="width: 10rem"
         closable
@@ -29,11 +29,11 @@
         onClick="{console.log}"
       >
         Primary
-      </cw-pill>
+      </ix-pill>
 
-      <cw-pill variant="critical" closable outline> Alarm </cw-pill>
-      <cw-pill variant="alarm" icon="print"> Alarm with icon </cw-pill>
-      <cw-pill
+      <ix-pill variant="critical" closable outline> Alarm </ix-pill>
+      <ix-pill variant="alarm" icon="print"> Alarm with icon </ix-pill>
+      <ix-pill
         variant="alarm"
         icon="print"
         style="width: 10rem"
@@ -42,8 +42,8 @@
         onClick="{console.log}"
       >
         Alarm
-      </cw-pill>
-      <cw-pill
+      </ix-pill>
+      <ix-pill
         variant="warning"
         icon="print"
         style="width: 10rem"
@@ -52,8 +52,8 @@
         onClick="{console.log}"
       >
         Alarm
-      </cw-pill>
-      <cw-pill
+      </ix-pill>
+      <ix-pill
         background="purple"
         color="green"
         variant="custom"
@@ -64,7 +64,7 @@
         onClick="{console.log}"
       >
         Custom
-      </cw-pill>
+      </ix-pill>
     </div>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
diff --git a/packages/core/src/components/select-item/readme.md b/packages/core/src/components/select-item/readme.md
index 359277aa338..04d658006b4 100644
--- a/packages/core/src/components/select-item/readme.md
+++ b/packages/core/src/components/select-item/readme.md
@@ -1,6 +1,4 @@
-# cw-select-item
-
-
+# ix-select-item
 
 <!-- Auto Generated Below -->
 
@@ -24,7 +22,7 @@
 
 ## Methods
 
-### `onItemClick(event?: CustomEvent<HTMLCwDropdownItemElement>) => Promise<void>`
+### `onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) => Promise<void>`
 
 Internal
 
diff --git a/packages/core/src/components/select-item/select-item.scss b/packages/core/src/components/select-item/select-item.scss
index a200e0201d1..fd0f1c203e5 100644
--- a/packages/core/src/components/select-item/select-item.scss
+++ b/packages/core/src/components/select-item/select-item.scss
@@ -5,7 +5,7 @@
 :host {
   display: block;
 
-  cw-dropdown-item {
+  ix-dropdown-item {
     button {
       margin-left: 1rem;
     }
diff --git a/packages/core/src/components/select-item/select-item.tsx b/packages/core/src/components/select-item/select-item.tsx
index bc2647e7b8e..3fa280e95bb 100644
--- a/packages/core/src/components/select-item/select-item.tsx
+++ b/packages/core/src/components/select-item/select-item.tsx
@@ -2,15 +2,24 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+} from '@stencil/core';
 
 @Component({
-  tag: 'cw-select-item',
+  tag: 'ix-select-item',
   styleUrl: 'select-item.scss',
   scoped: true,
 })
 export class SelectItem {
-  @Element() hostElement: HTMLCwSelectItemElement;
+  @Element() hostElement: HTMLIxSelectItemElement;
 
   /**
    * Displayed name of the item
@@ -42,7 +51,7 @@ export class SelectItem {
    * @param event
    */
   @Method()
-  async onItemClick(event?: CustomEvent<HTMLCwDropdownItemElement>) {
+  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {
     event?.preventDefault();
     event?.stopPropagation();
 
@@ -51,19 +60,19 @@ export class SelectItem {
 
   componentDidRender() {
     if (!this.value) {
-      throw Error('cw-select-item must have a `value` property');
+      throw Error('ix-select-item must have a `value` property');
     }
   }
 
   render() {
     return (
       <Host>
-        <cw-dropdown-item
+        <ix-dropdown-item
           checked={this.selected}
           hover={this.hover}
           label={this.label ? this.label : this.value}
-          onItemClick={e => this.onItemClick(e)}
-        ></cw-dropdown-item>
+          onItemClick={(e) => this.onItemClick(e)}
+        ></ix-dropdown-item>
       </Host>
     );
   }
diff --git a/packages/core/src/components/select-item/test/select-item.spec.tsx b/packages/core/src/components/select-item/test/select-item.spec.tsx
index 398bf6acb72..187fa51da3a 100644
--- a/packages/core/src/components/select-item/test/select-item.spec.tsx
+++ b/packages/core/src/components/select-item/test/select-item.spec.tsx
@@ -10,22 +10,22 @@ describe('select-item', () => {
   it('renders', async () => {
     const page = await newSpecPage({
       components: [SelectItem],
-      html: `<cw-select-item value="test" label="Test"></cw-select-item>`,
+      html: `<ix-select-item value="test" label="Test"></ix-select-item>`,
     });
 
     expect(page.root).toEqualHtml(`
-      <cw-select-item value="test" label="Test">
-        <cw-dropdown-item icon="empty" label="Test" />
-      </cw-select-item>
+      <ix-select-item value="test" label="Test">
+        <ix-dropdown-item icon="empty" label="Test" />
+      </ix-select-item>
     `);
   });
 
-  it('should throw exception if value is missing', done => {
+  it('should throw exception if value is missing', (done) => {
     newSpecPage({
       components: [SelectItem],
-      html: `<cw-select-item></cw-select-item>`,
+      html: `<ix-select-item></ix-select-item>`,
     }).catch((e: Error) => {
-      expect(e.message).toBe('cw-select-item must have a `value` property');
+      expect(e.message).toBe('ix-select-item must have a `value` property');
       done();
     });
   });
@@ -35,12 +35,16 @@ describe('select-item', () => {
 
     const page = await newSpecPage({
       components: [DropdownItem, SelectItem],
-      html: `<cw-select-item value="test" label="Test"></cw-select-item>`,
+      html: `<ix-select-item value="test" label="Test"></ix-select-item>`,
     });
 
-    page.doc.querySelector('cw-select-item').addEventListener('itemClick', eventSpy);
+    page.doc
+      .querySelector('ix-select-item')
+      .addEventListener('itemClick', eventSpy);
 
-    const dropdownItem = page.doc.querySelector('cw-dropdown-item button') as HTMLElement;
+    const dropdownItem = page.doc.querySelector(
+      'ix-dropdown-item button'
+    ) as HTMLElement;
     dropdownItem.click();
 
     expect(eventSpy).toHaveBeenCalled();
diff --git a/packages/core/src/components/select/readme.md b/packages/core/src/components/select/readme.md
index 9fb67da19be..78be4aa440a 100644
--- a/packages/core/src/components/select/readme.md
+++ b/packages/core/src/components/select/readme.md
@@ -1,6 +1,4 @@
-# cw-select
-
-
+# ix-select
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss
index 09ea71d9fec..4e1c2bf15fc 100644
--- a/packages/core/src/components/select/select.scss
+++ b/packages/core/src/components/select/select.scss
@@ -1,10 +1,10 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/fonts';
-@import '../../../scss/v7/mixins/hover';
-@import '../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/fonts';
+@import 'mixins/hover';
+@import 'mixins/text-truncation';
 
 :host {
   display: inline-block;
@@ -18,7 +18,8 @@
     align-items: center;
     height: auto;
     background-color: var(--theme-input--background);
-    border: var(--theme-input--border-thickness) solid var(--theme-input--border-color);
+    border: var(--theme-input--border-thickness) solid
+      var(--theme-input--border-color);
     border-radius: var(--theme-input--border-radius);
     padding: 0 0 0 $small-space;
 
@@ -64,7 +65,7 @@
 
       margin: auto;
 
-      >cw-filter-chip {
+      > ix-filter-chip {
         margin: 0.1rem;
       }
     }
@@ -106,11 +107,15 @@
   .editable {
     .chevron-down-container {
       @include hover {
-        background-color: var(--theme-btn-invisible-secondary--background--hover);
+        background-color: var(
+          --theme-btn-invisible-secondary--background--hover
+        );
       }
 
       @include active {
-        background-color: var(--theme-btn-invisible-secondary--background--active);
+        background-color: var(
+          --theme-btn-invisible-secondary--background--active
+        );
       }
     }
   }
@@ -136,7 +141,7 @@
     margin: 0 $small-space 0 $x-large-space;
   }
 
-  cw-dropdown {
+  ix-dropdown {
     background-color: var(--theme-select-list--background);
   }
 }
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
index 2a78faf73a0..85bc062df6f 100644
--- a/packages/core/src/components/select/select.tsx
+++ b/packages/core/src/components/select/select.tsx
@@ -2,15 +2,26 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Listen,
+  Prop,
+  State,
+  Watch,
+} from '@stencil/core';
 
 @Component({
-  tag: 'cw-select',
+  tag: 'ix-select',
   styleUrl: 'select.scss',
   scoped: true,
 })
 export class Select {
-  @Element() hostElement!: HTMLCwSelectElement;
+  @Element() hostElement!: HTMLIxSelectElement;
 
   /**
    * Indices of selected items
@@ -75,23 +86,23 @@ export class Select {
   @State() dropdownAnchor!: HTMLElement;
 
   private inputRef!: HTMLInputElement;
-  private dropdownRef!: HTMLCwDropdownElement;
+  private dropdownRef!: HTMLIxDropdownElement;
   private addItemRef!: HTMLDivElement;
 
   @State() isDropdownEmpty = false;
 
   @State() hasFocus = false;
 
-  @State() navigationItem: HTMLCwSelectItemElement;
+  @State() navigationItem: HTMLIxSelectItemElement;
 
   @State() inputText: string;
 
   get items() {
-    return Array.from(this.hostElement.querySelectorAll('cw-select-item'));
+    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
   }
 
   get selectedItems() {
-    return this.items.filter(item => item.selected);
+    return this.items.filter((item) => item.selected);
   }
 
   get addItemButton() {
@@ -133,7 +144,7 @@ export class Select {
   private emitItemClick(newId: string) {
     if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {
       if (this.selectedIndices.includes(newId)) {
-        this.selectedIndices = this.selectedIndices.filter(i => i !== newId);
+        this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);
       } else {
         this.selectedIndices = [...this.selectedIndices, newId];
       }
@@ -150,7 +161,7 @@ export class Select {
       return;
     }
 
-    const test = document.createElement('cw-select-item');
+    const test = document.createElement('ix-select-item');
     test.value = value;
     test.label = value;
 
@@ -162,21 +173,25 @@ export class Select {
   }
 
   private selectValue(ids: string[]) {
-    this.items.forEach(item => {
-      item.selected = ids.some(i => i === item.value);
+    this.items.forEach((item) => {
+      item.selected = ids.some((i) => i === item.value);
     });
 
-    this.value = this.selectedItems.map(item => item.label);
+    this.value = this.selectedItems.map((item) => item.label);
   }
 
   componentWillLoad() {
     if (this.selectedIndices) {
-      this.selectValue(Array.isArray(this.selectedIndices) ? this.selectedIndices : [this.selectedIndices]);
+      this.selectValue(
+        Array.isArray(this.selectedIndices)
+          ? this.selectedIndices
+          : [this.selectedIndices]
+      );
     }
   }
 
   private itemExists(item: string) {
-    return this.items.find(i => i.label === item);
+    return this.items.find((i) => i.label === item);
   }
 
   private dropdownVisibilityChanged(event: CustomEvent<boolean>) {
@@ -232,7 +247,9 @@ export class Select {
     event.stopPropagation();
     event.preventDefault();
 
-    const selectItems = this.items.filter(i => !i.classList.contains('d-none'));
+    const selectItems = this.items.filter(
+      (i) => !i.classList.contains('d-none')
+    );
 
     const index = selectItems.indexOf(this.navigationItem);
 
@@ -246,7 +263,7 @@ export class Select {
   }
 
   private setHoverEffectForNavigatedSelectItem() {
-    this.items.forEach((item: HTMLCwSelectItemElement) => {
+    this.items.forEach((item: HTMLIxSelectItemElement) => {
       item.hover = item === this.navigationItem;
     });
   }
@@ -254,7 +271,7 @@ export class Select {
   private filterItemsWithTypeahead() {
     this.inputText = this.inputRef.value;
     if (this.inputText) {
-      this.items.forEach(item => {
+      this.items.forEach((item) => {
         item.classList.remove('d-none');
         if (!item.label.toLowerCase().includes(this.inputText.toLowerCase())) {
           item.classList.add('d-none');
@@ -263,11 +280,13 @@ export class Select {
     } else {
       this.removeHiddenFromItems();
     }
-    this.isDropdownEmpty = this.items.every(item => item.classList.contains('d-none'));
+    this.isDropdownEmpty = this.items.every((item) =>
+      item.classList.contains('d-none')
+    );
   }
 
   private removeHiddenFromItems() {
-    this.items.forEach(item => {
+    this.items.forEach((item) => {
       item.classList.remove('d-none');
     });
   }
@@ -297,29 +316,31 @@ export class Select {
         <div
           class={{
             'form-control': true,
-            'select': true,
-            'focus': this.hasFocus,
-            'editable': this.editable,
-            'disabled': this.disabled,
-            'readonly': this.readonly,
+            select: true,
+            focus: this.hasFocus,
+            editable: this.editable,
+            disabled: this.disabled,
+            readonly: this.readonly,
+          }}
+          ref={(ref) => {
+            this.dropdownAnchor = ref;
+            if (!this.editable) this.dropdownWrapperRef = ref;
           }}
-
-          ref={ref => { this.dropdownAnchor = ref; if (!this.editable) (this.dropdownWrapperRef = ref)}}
         >
           <div class="input-container">
             {this.isMultipleMode ? (
               <div class="chips">
-                {this.selectedItems?.map(item => (
-                  <cw-filter-chip
+                {this.selectedItems?.map((item) => (
+                  <ix-filter-chip
                     disabled={this.disabled || this.readonly}
-                    onCloseClick={e => {
+                    onCloseClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
                       this.emitItemClick(item.value);
                     }}
                   >
                     {item.label}
-                  </cw-filter-chip>
+                  </ix-filter-chip>
                 ))}
               </div>
             ) : null}
@@ -332,28 +353,35 @@ export class Select {
                 class={{
                   'allow-clear': this.allowClear && !!this.value?.length,
                 }}
-                placeholder={this.editable ? this.i18nPlaceholderEditable : this.i18nPlaceholder}
+                placeholder={
+                  this.editable
+                    ? this.i18nPlaceholderEditable
+                    : this.i18nPlaceholder
+                }
                 value={this.getInputValue()}
-                ref={ref => (this.inputRef = ref)}
+                ref={(ref) => (this.inputRef = ref)}
                 onInput={() => this.filterItemsWithTypeahead()}
               />
               {this.disabled || this.readonly ? null : (
-                <div class="chevron-down-container"
-          ref={ref => {if (this.editable) (this.dropdownWrapperRef = ref)}}
+                <div
+                  class="chevron-down-container"
+                  ref={(ref) => {
+                    if (this.editable) this.dropdownWrapperRef = ref;
+                  }}
                 >
-                  <cw-icon class="chevron" name="chevron-down-small" />
+                  <ix-icon class="chevron" name="chevron-down-small" />
                 </div>
               )}
             </div>
           </div>
           {this.allowClear && (this.value?.length || this.inputText) ? (
-            <cw-icon-button
+            <ix-icon-button
               class="clear"
               icon="clear"
               ghost
               oval
               size="24"
-              onClick={e => {
+              onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.clear();
@@ -361,27 +389,32 @@ export class Select {
             />
           ) : null}
         </div>
-        <cw-dropdown
-          ref={ref => (this.dropdownRef = ref)}
+        <ix-dropdown
+          ref={(ref) => (this.dropdownRef = ref)}
           show={this.dropdownShow}
           style={{
             width: '100%',
           }}
-          class={{ 'd-none': this.disabled || this.readonly || (this.isDropdownEmpty && !this.editable) }}
+          class={{
+            'd-none':
+              this.disabled ||
+              this.readonly ||
+              (this.isDropdownEmpty && !this.editable),
+          }}
           anchor={this.dropdownAnchor}
           trigger={this.dropdownWrapperRef}
-          onShowChanged={e => this.dropdownVisibilityChanged(e)}
+          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}
           placement="bottom"
           positioningStrategy={'fixed'}
           adjustDropdownWidthToReferenceWidth={true}
         >
           <div class="select-list-header">{this.i18nSelectListHeader}</div>
           <slot></slot>
-          <div ref={ref => (this.addItemRef = ref)} class="d-contents"></div>
+          <div ref={(ref) => (this.addItemRef = ref)} class="d-contents"></div>
           {this.itemExists(this.inputText) ? (
             ''
           ) : (
-            <cw-dropdown-item
+            <ix-dropdown-item
               data-testid="add-item"
               icon="plus"
               class={{
@@ -389,14 +422,14 @@ export class Select {
                 'd-none': !(this.editable && this.inputText),
               }}
               label={this.inputText}
-              onItemClick={e => {
+              onItemClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.emitAddItem(this.inputText);
               }}
-            ></cw-dropdown-item>
+            ></ix-dropdown-item>
           )}
-        </cw-dropdown>
+        </ix-dropdown>
       </Host>
     );
   }
diff --git a/packages/core/src/components/select/test/basic/index.html b/packages/core/src/components/select/test/basic/index.html
index d171133a2d5..edc28092aa7 100644
--- a/packages/core/src/components/select/test/basic/index.html
+++ b/packages/core/src/components/select/test/basic/index.html
@@ -11,11 +11,11 @@
     <title>Stencil Component Starter</title>
   </head>
   <body style="padding: 2rem">
-    <cw-select selected-indices="2">
-      <cw-select-item label="Item 1" value="1"></cw-select-item>
-      <cw-select-item label="Item 2" value="2"></cw-select-item>
-      <cw-select-item label="Item 3" value="3"></cw-select-item>
-    </cw-select>
+    <ix-select selected-indices="2">
+      <ix-select-item label="Item 1" value="1"></ix-select-item>
+      <ix-select-item label="Item 2" value="2"></ix-select-item>
+      <ix-select-item label="Item 3" value="3"></ix-select-item>
+    </ix-select>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/select/test/cw-select.spec.tsx b/packages/core/src/components/select/test/cw-select.spec.tsx
index 9cb00b4ffe5..d5e50885cf4 100644
--- a/packages/core/src/components/select/test/cw-select.spec.tsx
+++ b/packages/core/src/components/select/test/cw-select.spec.tsx
@@ -7,39 +7,39 @@ import { fireEvent, screen } from '@testing-library/dom';
 import { SelectItem } from '../../select-item/select-item';
 import { Select } from '../select';
 
-describe('cw-select', () => {
+describe('ix-select', () => {
   it('renders', async () => {
     const page = await newSpecPage({
       components: [Select],
-      html: `<cw-select></cw-select>`,
+      html: `<ix-select></ix-select>`,
     });
     expect(page.root).toEqualHtml(`
-    <cw-select>
+    <ix-select>
      <div class="form-control select">
        <div class="input-container">
          <div class="trigger">
            <input type="text" data-testid="input">
-           <cw-icon class="chevron" name="chevron-down" size="16"></cw-icon>
+           <ix-icon class="chevron" name="chevron-down" size="16"></ix-icon>
          </div>
        </div>
      </div>
-     <cw-dropdown adjustdropdownwidthtoreferencewith="" placement="bottom" positioningstrategy="fixed" style="width: 100%;">
+     <ix-dropdown adjustdropdownwidthtoreferencewith="" placement="bottom" positioningstrategy="fixed" style="width: 100%;">
         <div class="d-contents"></div>
-        <cw-dropdown-item data-testid="add-item" class="d-none" icon="plus"></cw-dropdown-item>
-     </cw-dropdown>
-    </cw-select>
+        <ix-dropdown-item data-testid="add-item" class="d-none" icon="plus"></ix-dropdown-item>
+     </ix-dropdown>
+    </ix-select>
     `);
   });
 
   it('show add item button in list', async () => {
     const page = await newSpecPage({
       components: [Select],
-      html: `<cw-select></cw-select>`,
+      html: `<ix-select></ix-select>`,
     });
 
     (page.win as any).SVGElement = class {};
 
-    const select = page.doc.querySelector('cw-select');
+    const select = page.doc.querySelector('ix-select');
     select.editable = true;
     await page.waitForChanges();
 
@@ -47,7 +47,7 @@ describe('cw-select', () => {
 
     const dropdownItem = screen.getByTestId('add-item');
     expect(dropdownItem.classList.contains('d-none')).toBeTruthy();
-    const dropdown = page.root.querySelector('cw-dropdown');
+    const dropdown = page.root.querySelector('ix-dropdown');
 
     fireEvent(dropdown, new CustomEvent('showChanged'));
     await page.waitForChanges();
@@ -61,12 +61,12 @@ describe('cw-select', () => {
   it('show not show add item button in list if editing is false', async () => {
     const page = await newSpecPage({
       components: [Select],
-      html: `<cw-select></cw-select>`,
+      html: `<ix-select></ix-select>`,
     });
 
     (page.win as any).SVGElement = class {};
 
-    const select = page.doc.querySelector('cw-select');
+    const select = page.doc.querySelector('ix-select');
     select.editable = false;
     await page.waitForChanges();
 
@@ -75,7 +75,7 @@ describe('cw-select', () => {
     const dropdownItem = screen.getByTestId('add-item');
     expect(dropdownItem).toHaveClass('d-none');
 
-    const dropdown = page.root.querySelector('cw-dropdown');
+    const dropdown = page.root.querySelector('ix-dropdown');
 
     fireEvent(dropdown, new CustomEvent('showChanged'));
     await page.waitForChanges();
@@ -90,14 +90,14 @@ describe('cw-select', () => {
     const page = await newSpecPage({
       components: [Select, SelectItem],
       html: `
-      <cw-select>
-        <cw-select-item data-testid="select-1" value="1" label="ABC"></cw-select-item>
-        <cw-select-item data-testid="select-2" value="2" label="ABC 2"></cw-select-item>
-        <cw-select-item data-testid="select-3" value="3" label="XYZ"></cw-select-item>
-      </cw-select>`,
+      <ix-select>
+        <ix-select-item data-testid="select-1" value="1" label="ABC"></ix-select-item>
+        <ix-select-item data-testid="select-2" value="2" label="ABC 2"></ix-select-item>
+        <ix-select-item data-testid="select-3" value="3" label="XYZ"></ix-select-item>
+      </ix-select>`,
     });
 
-    const dropdown = page.root.querySelector('cw-dropdown');
+    const dropdown = page.root.querySelector('ix-dropdown');
     fireEvent(dropdown, new CustomEvent('showChanged'));
 
     const input = screen.getByTestId('input');
@@ -115,21 +115,28 @@ describe('cw-select', () => {
       const page = await newSpecPage({
         components: [Select, SelectItem],
         html: `
-        <cw-select data-testid="select">
-          <cw-select-item data-testid="select-1" value="1" label="ABC"></cw-select-item>
-          <cw-select-item data-testid="select-2" value="2" label="ABC 2"></cw-select-item>
-          <cw-select-item data-testid="select-3" value="3" label="XYZ"></cw-select-item>
-        </cw-select>`,
+        <ix-select data-testid="select">
+          <ix-select-item data-testid="select-1" value="1" label="ABC"></ix-select-item>
+          <ix-select-item data-testid="select-2" value="2" label="ABC 2"></ix-select-item>
+          <ix-select-item data-testid="select-3" value="3" label="XYZ"></ix-select-item>
+        </ix-select>`,
       });
 
       const selectionChange = jest.fn();
 
-      screen.getByTestId('select').addEventListener('itemSelectionChange', selectionChange);
+      screen
+        .getByTestId('select')
+        .addEventListener('itemSelectionChange', selectionChange);
 
-      fireEvent(screen.getByTestId('select-2').querySelector('cw-dropdown-item'), new CustomEvent('itemClick'));
+      fireEvent(
+        screen.getByTestId('select-2').querySelector('ix-dropdown-item'),
+        new CustomEvent('itemClick')
+      );
       await page.waitForChanges();
 
-      expect((screen.getByTestId('input') as HTMLInputElement).value).toBe('ABC 2');
+      expect((screen.getByTestId('input') as HTMLInputElement).value).toBe(
+        'ABC 2'
+      );
       expect(selectionChange).toHaveBeenCalled();
     });
 
@@ -137,14 +144,14 @@ describe('cw-select', () => {
       const page = await newSpecPage({
         components: [Select, SelectItem],
         html: `
-        <cw-select data-testid="select">
-          <cw-select-item data-testid="select-1" value="1" label="ABC"></cw-select-item>
-          <cw-select-item data-testid="select-2" value="2" label="ABC 2"></cw-select-item>
-          <cw-select-item data-testid="select-3" value="3" label="XYZ"></cw-select-item>
-        </cw-select>`,
+        <ix-select data-testid="select">
+          <ix-select-item data-testid="select-1" value="1" label="ABC"></ix-select-item>
+          <ix-select-item data-testid="select-2" value="2" label="ABC 2"></ix-select-item>
+          <ix-select-item data-testid="select-3" value="3" label="XYZ"></ix-select-item>
+        </ix-select>`,
       });
 
-      const selectElement: HTMLCwSelectElement = screen.getByTestId('select');
+      const selectElement: HTMLIxSelectElement = screen.getByTestId('select');
       selectElement.editable = true;
 
       await page.waitForChanges();
@@ -158,21 +165,29 @@ describe('cw-select', () => {
 
       await page.waitForChanges();
 
-      expect((page.root.querySelector(`cw-select-item[value='NEWITEM']`) as HTMLCwSelectItemElement).label).toBe('NEWITEM');
+      expect(
+        (
+          page.root.querySelector(
+            `ix-select-item[value='NEWITEM']`
+          ) as HTMLIxSelectItemElement
+        ).label
+      ).toBe('NEWITEM');
     });
 
     it('select default', async () => {
       const page = await newSpecPage({
         components: [Select, SelectItem],
         html: `
-        <cw-select data-testid="select" default-value="2">
-          <cw-select-item data-testid="select-1" value="1" label="ABC"></cw-select-item>
-          <cw-select-item data-testid="select-2" value="2" label="ABC 2"></cw-select-item>
-          <cw-select-item data-testid="select-3" value="3" label="XYZ"></cw-select-item>
-        </cw-select>`,
+        <ix-select data-testid="select" default-value="2">
+          <ix-select-item data-testid="select-1" value="1" label="ABC"></ix-select-item>
+          <ix-select-item data-testid="select-2" value="2" label="ABC 2"></ix-select-item>
+          <ix-select-item data-testid="select-3" value="3" label="XYZ"></ix-select-item>
+        </ix-select>`,
       });
 
-      expect((screen.getByTestId('input') as HTMLInputElement).value).toStrictEqual('ABC 2');
+      expect(
+        (screen.getByTestId('input') as HTMLInputElement).value
+      ).toStrictEqual('ABC 2');
     });
   });
 
@@ -181,25 +196,33 @@ describe('cw-select', () => {
       const page = await newSpecPage({
         components: [Select, SelectItem],
         html: `
-        <cw-select data-testid="select" mode="multiple">
-          <cw-select-item data-testid="select-1" value="1" label="ABC"></cw-select-item>
-          <cw-select-item data-testid="select-2" value="2" label="ABC 2"></cw-select-item>
-          <cw-select-item data-testid="select-3" value="3" label="XYZ"></cw-select-item>
-        </cw-select>`,
+        <ix-select data-testid="select" mode="multiple">
+          <ix-select-item data-testid="select-1" value="1" label="ABC"></ix-select-item>
+          <ix-select-item data-testid="select-2" value="2" label="ABC 2"></ix-select-item>
+          <ix-select-item data-testid="select-3" value="3" label="XYZ"></ix-select-item>
+        </ix-select>`,
       });
 
       const selectionChange = jest.fn();
 
-      screen.getByTestId('select').addEventListener('itemSelectionChange', selectionChange);
-
-      fireEvent(screen.getByTestId('select-1').querySelector('cw-dropdown-item'), new CustomEvent('itemClick'));
-      fireEvent(screen.getByTestId('select-3').querySelector('cw-dropdown-item'), new CustomEvent('itemClick'));
+      screen
+        .getByTestId('select')
+        .addEventListener('itemSelectionChange', selectionChange);
+
+      fireEvent(
+        screen.getByTestId('select-1').querySelector('ix-dropdown-item'),
+        new CustomEvent('itemClick')
+      );
+      fireEvent(
+        screen.getByTestId('select-3').querySelector('ix-dropdown-item'),
+        new CustomEvent('itemClick')
+      );
       await page.waitForChanges();
 
       expect(selectionChange.mock.calls[0][0].detail).toStrictEqual(['1']);
       expect(selectionChange.mock.calls[1][0].detail).toStrictEqual(['1', '3']);
 
-      const chips = page.root.querySelectorAll('cw-filter-chip');
+      const chips = page.root.querySelectorAll('ix-filter-chip');
 
       expect(chips[0].innerText).toBe('ABC');
       expect(chips[1].innerText).toBe('XYZ');
@@ -209,24 +232,32 @@ describe('cw-select', () => {
       const page = await newSpecPage({
         components: [Select, SelectItem],
         html: `
-        <cw-select data-testid="select" mode="multiple">
-          <cw-select-item data-testid="select-1" value="1" label="ABC"></cw-select-item>
-          <cw-select-item data-testid="select-2" value="2" label="ABC 2"></cw-select-item>
-          <cw-select-item data-testid="select-3" value="3" label="XYZ"></cw-select-item>
-        </cw-select>`,
+        <ix-select data-testid="select" mode="multiple">
+          <ix-select-item data-testid="select-1" value="1" label="ABC"></ix-select-item>
+          <ix-select-item data-testid="select-2" value="2" label="ABC 2"></ix-select-item>
+          <ix-select-item data-testid="select-3" value="3" label="XYZ"></ix-select-item>
+        </ix-select>`,
       });
 
       const selectionChangeHandle = jest.fn();
       const itemAddHandle = jest.fn();
 
-      screen.getByTestId('select').addEventListener('itemSelectionChange', selectionChangeHandle);
+      screen
+        .getByTestId('select')
+        .addEventListener('itemSelectionChange', selectionChangeHandle);
       screen.getByTestId('select').addEventListener('addItem', itemAddHandle);
 
-      fireEvent(screen.getByTestId('select-1').querySelector('cw-dropdown-item'), new CustomEvent('itemClick'));
-      fireEvent(screen.getByTestId('select-3').querySelector('cw-dropdown-item'), new CustomEvent('itemClick'));
+      fireEvent(
+        screen.getByTestId('select-1').querySelector('ix-dropdown-item'),
+        new CustomEvent('itemClick')
+      );
+      fireEvent(
+        screen.getByTestId('select-3').querySelector('ix-dropdown-item'),
+        new CustomEvent('itemClick')
+      );
       await page.waitForChanges();
 
-      const dropdown = page.root.querySelector('cw-dropdown');
+      const dropdown = page.root.querySelector('ix-dropdown');
       fireEvent(dropdown, new CustomEvent('showChanged'));
       await page.waitForChanges();
 
@@ -238,27 +269,37 @@ describe('cw-select', () => {
       await page.waitForChanges();
 
       expect(itemAddHandle.mock.calls[0][0].detail).toStrictEqual('NEW ITEM');
-      expect(selectionChangeHandle.mock.calls[2][0].detail).toStrictEqual(['1', '3', 'NEW ITEM']);
-      expect((page.root.querySelector(`cw-select-item[value='NEW ITEM']`) as HTMLCwSelectItemElement).label).toBe('NEW ITEM');
+      expect(selectionChangeHandle.mock.calls[2][0].detail).toStrictEqual([
+        '1',
+        '3',
+        'NEW ITEM',
+      ]);
+      expect(
+        (
+          page.root.querySelector(
+            `ix-select-item[value='NEW ITEM']`
+          ) as HTMLIxSelectItemElement
+        ).label
+      ).toBe('NEW ITEM');
     });
 
     it('select default items', async () => {
       const page = await newSpecPage({
         components: [Select, SelectItem],
         html: `
-        <cw-select data-testid="select" mode="multiple">
-          <cw-select-item data-testid="select-1" value="1" label="ABC"></cw-select-item>
-          <cw-select-item data-testid="select-2" value="2" label="ABC 2"></cw-select-item>
-          <cw-select-item data-testid="select-3" value="3" label="XYZ"></cw-select-item>
-        </cw-select>`,
+        <ix-select data-testid="select" mode="multiple">
+          <ix-select-item data-testid="select-1" value="1" label="ABC"></ix-select-item>
+          <ix-select-item data-testid="select-2" value="2" label="ABC 2"></ix-select-item>
+          <ix-select-item data-testid="select-3" value="3" label="XYZ"></ix-select-item>
+        </ix-select>`,
       });
 
-      const selectElement: HTMLCwSelectElement = screen.getByTestId('select');
+      const selectElement: HTMLIxSelectElement = screen.getByTestId('select');
       selectElement.selectedIndices = ['1', '3'];
 
       await page.waitForChanges();
 
-      const chips = page.root.querySelectorAll('cw-filter-chip');
+      const chips = page.root.querySelectorAll('ix-filter-chip');
 
       expect(chips[0].innerText).toBe('ABC');
       expect(chips[1].innerText).toBe('XYZ');
diff --git a/packages/core/src/components/select/test/mode-multiple/index.html b/packages/core/src/components/select/test/mode-multiple/index.html
index 4af3d3d29ba..a8088d9952a 100644
--- a/packages/core/src/components/select/test/mode-multiple/index.html
+++ b/packages/core/src/components/select/test/mode-multiple/index.html
@@ -11,18 +11,18 @@
     <title>Stencil Component Starter</title>
   </head>
   <bodyp padding="2rem">
-    <cw-select selected-indices="2" mode="multiple">
-      <cw-select-item label="Item 1" value="1"></cw-select-item>
-      <cw-select-item label="Item 2" value="2"></cw-select-item>
-      <cw-select-item label="Item 3" value="3"></cw-select-item>
-    </cw-select>
+    <ix-select selected-indices="2" mode="multiple">
+      <ix-select-item label="Item 1" value="1"></ix-select-item>
+      <ix-select-item label="Item 2" value="2"></ix-select-item>
+      <ix-select-item label="Item 3" value="3"></ix-select-item>
+    </ix-select>
 
     <script>
       (async () => {
-        await window.customElements.whenDefined('cw-select');
-        await window.customElements.whenDefined('cw-select-item');
+        await window.customElements.whenDefined('ix-select');
+        await window.customElements.whenDefined('ix-select-item');
 
-        const select = document.querySelector('cw-select');
+        const select = document.querySelector('ix-select');
         select.selectedIndices = ['1', '3'];
       })();
     </script>
diff --git a/packages/core/src/components/spinner/readme.md b/packages/core/src/components/spinner/readme.md
index 53d4de73645..d6c2fc2671d 100644
--- a/packages/core/src/components/spinner/readme.md
+++ b/packages/core/src/components/spinner/readme.md
@@ -1,6 +1,4 @@
-# cw-spinner
-
-
+# ix-spinner
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx
index 20e825a40a6..061e0fe6d7c 100644
--- a/packages/core/src/components/spinner/spinner.tsx
+++ b/packages/core/src/components/spinner/spinner.tsx
@@ -4,7 +4,7 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-spinner',
+  tag: 'ix-spinner',
   styleUrl: 'spinner.scss',
   scoped: true,
 })
@@ -27,11 +27,35 @@ export class Spinner {
           large: this.size === 'large',
         }}
       >
-        <svg viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
-          <g id="waiting-anim" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <g id="stroke" transform="translate(4.5, 3)" fill-rule="nonzero" stroke="#0F8287" stroke-linejoin="round">
-              <polygon id="w1" points="11.2583302 0 11.2583302 6.5 11.2583302 13" visibility="hidden">
-                <set attributeName="visibility" begin="0s;w6ul.end" to="visible" />
+        <svg
+          viewBox="0 0 32 32"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g
+            id="waiting-anim"
+            stroke="none"
+            stroke-width="1"
+            fill="none"
+            fill-rule="evenodd"
+          >
+            <g
+              id="stroke"
+              transform="translate(4.5, 3)"
+              fill-rule="nonzero"
+              stroke="#0F8287"
+              stroke-linejoin="round"
+            >
+              <polygon
+                id="w1"
+                points="11.2583302 0 11.2583302 6.5 11.2583302 13"
+                visibility="hidden"
+              >
+                <set
+                  attributeName="visibility"
+                  begin="0s;w6ul.end"
+                  to="visible"
+                />
                 <animate
                   id="w1l"
                   attributeName="points"
@@ -59,7 +83,11 @@ export class Spinner {
                 <set attributeName="visibility" begin="w1ul.end" to="hidden" />
               </polygon>
 
-              <polygon id="w2" points="22.5166605 6.5 16.88749535 10 11.2583302 13" visibility="hidden">
+              <polygon
+                id="w2"
+                points="22.5166605 6.5 16.88749535 10 11.2583302 13"
+                visibility="hidden"
+              >
                 <set attributeName="visibility" begin="w1l.end" to="visible" />
                 <animate
                   id="w2l"
@@ -88,7 +116,11 @@ export class Spinner {
                 <set attributeName="visibility" begin="w2ul.end" to="hidden" />
               </polygon>
 
-              <polygon id="w3" points="11.2583302 13 22.5166605 19.5 16.88749535 16.75" visibility="hidden">
+              <polygon
+                id="w3"
+                points="11.2583302 13 22.5166605 19.5 16.88749535 16.75"
+                visibility="hidden"
+              >
                 <set attributeName="visibility" begin="w2l.end" to="visible" />
                 <animate
                   id="w3l"
@@ -117,7 +149,11 @@ export class Spinner {
                 <set attributeName="visibility" begin="w3ul.end" to="hidden" />
               </polygon>
 
-              <polygon id="w4" points="11.2583302 26 11.2583302 19.5 11.2583302 13" visibility="hidden">
+              <polygon
+                id="w4"
+                points="11.2583302 26 11.2583302 19.5 11.2583302 13"
+                visibility="hidden"
+              >
                 <set attributeName="visibility" begin="w3l.end" to="visible" />
                 <animate
                   id="w4l"
@@ -146,7 +182,11 @@ export class Spinner {
                 <set attributeName="visibility" begin="w4ul.end" to="hidden" />
               </polygon>
 
-              <polygon id="w5" points="11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25" visibility="hidden">
+              <polygon
+                id="w5"
+                points="11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25"
+                visibility="hidden"
+              >
                 <set attributeName="visibility" begin="w4l.end" to="visible" />
                 <animate
                   id="w5l"
@@ -175,7 +215,11 @@ export class Spinner {
                 <set attributeName="visibility" begin="w5ul.end" to="hidden" />
               </polygon>
 
-              <polygon id="w6" points="5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5" visibility="hidden">
+              <polygon
+                id="w6"
+                points="5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5"
+                visibility="hidden"
+              >
                 <set attributeName="visibility" begin="w5l.end" to="visible" />
                 <animate
                   id="w6l"
@@ -204,8 +248,17 @@ export class Spinner {
                 <set attributeName="visibility" begin="w6ul.end" to="hidden" />
               </polygon>
             </g>
-            <g id="fill" transform="translate(4.5, 3)" fill="#0F8287" fill-rule="nonzero">
-              <polygon id="f1" points="11.2583302 0 11.2583302 6.5 11.2583302 13" visibility="hidden">
+            <g
+              id="fill"
+              transform="translate(4.5, 3)"
+              fill="#0F8287"
+              fill-rule="nonzero"
+            >
+              <polygon
+                id="f1"
+                points="11.2583302 0 11.2583302 6.5 11.2583302 13"
+                visibility="hidden"
+              >
                 <set attributeName="visibility" begin="w6l.end" to="visible" />
                 <animate
                   id="f1f"
@@ -234,7 +287,11 @@ export class Spinner {
                 <set attributeName="visibility" begin="f1uf.end" to="hidden" />
               </polygon>
 
-              <polygon id="f2" points="22.5166605 6.5 16.88749535 10 11.2583302 13" visibility="hidden">
+              <polygon
+                id="f2"
+                points="22.5166605 6.5 16.88749535 10 11.2583302 13"
+                visibility="hidden"
+              >
                 <set attributeName="visibility" begin="f1f.end" to="visible" />
                 <animate
                   id="f2f"
@@ -263,7 +320,11 @@ export class Spinner {
                 <set attributeName="visibility" begin="f2uf.end" to="hidden" />
               </polygon>
 
-              <polygon id="f3" points="11.2583302 13 22.5166605 19.5 16.88749535 16.75" visibility="hidden">
+              <polygon
+                id="f3"
+                points="11.2583302 13 22.5166605 19.5 16.88749535 16.75"
+                visibility="hidden"
+              >
                 <set attributeName="visibility" begin="f2f.end" to="visible" />
                 <animate
                   id="f3f"
@@ -292,7 +353,11 @@ export class Spinner {
                 <set attributeName="visibility" begin="f3uf.end" to="hidden" />
               </polygon>
 
-              <polygon id="f4" points="11.2583302 26 11.2583302 19.5 11.2583302 13" visibility="hidden">
+              <polygon
+                id="f4"
+                points="11.2583302 26 11.2583302 19.5 11.2583302 13"
+                visibility="hidden"
+              >
                 <set attributeName="visibility" begin="f3f.end" to="visible" />
                 <animate
                   id="f4f"
@@ -321,7 +386,11 @@ export class Spinner {
                 <set attributeName="visibility" begin="f4uf.end" to="hidden" />
               </polygon>
 
-              <polygon id="f5" points="11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25" visibility="hidden">
+              <polygon
+                id="f5"
+                points="11.2583302 13 2.4062463e-14 19.5 5.6291651 16.25"
+                visibility="hidden"
+              >
                 <set attributeName="visibility" begin="f4f.end" to="visible" />
                 <animate
                   id="f5f"
@@ -350,7 +419,11 @@ export class Spinner {
                 <set attributeName="visibility" begin="f5uf.end" to="hidden" />
               </polygon>
 
-              <polygon id="f6" points="5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5" visibility="hidden">
+              <polygon
+                id="f6"
+                points="5.6291651 9.75 11.2583302 13 2.66453526e-15 6.5"
+                visibility="hidden"
+              >
                 <set attributeName="visibility" begin="f5f.end" to="visible" />
                 <animate
                   id="f6f"
diff --git a/packages/core/src/components/split-button-item/readme.md b/packages/core/src/components/split-button-item/readme.md
index 753b5f6b27b..66159592017 100644
--- a/packages/core/src/components/split-button-item/readme.md
+++ b/packages/core/src/components/split-button-item/readme.md
@@ -1,6 +1,4 @@
-# cw-split-button-item
-
-
+# ix-split-button-item
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/split-button-item/split-button-item.tsx b/packages/core/src/components/split-button-item/split-button-item.tsx
index d9dea91441c..e476e8bdc65 100644
--- a/packages/core/src/components/split-button-item/split-button-item.tsx
+++ b/packages/core/src/components/split-button-item/split-button-item.tsx
@@ -1,10 +1,17 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Prop,
+} from '@stencil/core';
 
 @Component({
-  tag: 'cw-split-button-item',
+  tag: 'ix-split-button-item',
   styleUrl: 'split-button-item.css',
   scoped: true,
 })
@@ -24,9 +31,15 @@ export class SplitButtonItem {
    */
   @Event() itemClick: EventEmitter<MouseEvent>;
 
-  @Element() hostElement: HTMLCwSplitButtonItemElement;
+  @Element() hostElement: HTMLIxSplitButtonItemElement;
 
   render() {
-    return <cw-dropdown-item icon={this.icon} label={this.label} onClick={e => this.itemClick.emit(e)}></cw-dropdown-item>;
+    return (
+      <ix-dropdown-item
+        icon={this.icon}
+        label={this.label}
+        onClick={(e) => this.itemClick.emit(e)}
+      ></ix-dropdown-item>
+    );
   }
 }
diff --git a/packages/core/src/components/split-button/readme.md b/packages/core/src/components/split-button/readme.md
index 71a3543ca50..c7eba49bd6e 100644
--- a/packages/core/src/components/split-button/readme.md
+++ b/packages/core/src/components/split-button/readme.md
@@ -1,6 +1,4 @@
-# cw-split-button
-
-
+# ix-split-button
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/split-button/split-button.tsx b/packages/core/src/components/split-button/split-button.tsx
index c0d66fe0324..d831004e779 100644
--- a/packages/core/src/components/split-button/split-button.tsx
+++ b/packages/core/src/components/split-button/split-button.tsx
@@ -1,18 +1,31 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { createPopper, Instance as PopperInstance, Placement } from '@popperjs/core';
-import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';
+import {
+  createPopper,
+  Instance as PopperInstance,
+  Placement,
+} from '@popperjs/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+  State,
+} from '@stencil/core';
 import { getButtonClasses } from '../button/base-button';
 import { Buttons } from '../utils/button-variants';
 
 @Component({
-  tag: 'cw-split-button',
+  tag: 'ix-split-button',
   styleUrl: 'split-button.scss',
   scoped: true,
 })
 export class CwSplitButton {
-  @Element() hostElement: HTMLCwSplitButtonElement;
+  @Element() hostElement: HTMLIxSplitButtonElement;
 
   /**
    * Color variant of button
@@ -68,11 +81,13 @@ export class CwSplitButton {
    */
   @Event() buttonClick: EventEmitter<MouseEvent>;
 
-  private popover: HTMLCwDropdownElement;
+  private popover: HTMLIxDropdownElement;
   private popperInstance: PopperInstance;
 
   get splitItems() {
-    return Array.from(this.hostElement.querySelectorAll('cw-split-button-item'));
+    return Array.from(
+      this.hostElement.querySelectorAll('ix-split-button-item')
+    );
   }
 
   private clickOutside(e: Event) {
@@ -83,7 +98,7 @@ export class CwSplitButton {
 
   componentDidLoad() {
     const element = this.hostElement.querySelector('.anchor');
-    this.popover = this.hostElement.querySelector('cw-dropdown');
+    this.popover = this.hostElement.querySelector('ix-dropdown');
     this.popperInstance = createPopper(element, this.popover, {
       strategy: 'fixed',
       placement: this.placement,
@@ -119,24 +134,40 @@ export class CwSplitButton {
     return (
       <Host class="btn-group">
         <button
-          class={getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, !this.label, false, false, this.disabled)}
-          onClick={e => this.buttonClick.emit(e)}
+          class={getButtonClasses(
+            this.variant,
+            this.outline,
+            this.ghost || this.invisible,
+            !this.label,
+            false,
+            false,
+            this.disabled
+          )}
+          onClick={(e) => this.buttonClick.emit(e)}
         >
-          {this.icon ? <cw-icon name={this.icon} /> : null} {this.label}
+          {this.icon ? <ix-icon name={this.icon} /> : null} {this.label}
         </button>
         <button
           class={{
-            ...getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, false, false, this.disabled),
+            ...getButtonClasses(
+              this.variant,
+              this.outline,
+              this.ghost || this.invisible,
+              true,
+              false,
+              false,
+              this.disabled
+            ),
             ...{
               anchor: true,
             },
           }}
           onClick={() => this.toggleDropdown()}
         >
-          <cw-icon name={this.splitIcon} />
-          <cw-dropdown show={this.toggle}>
+          <ix-icon name={this.splitIcon} />
+          <ix-dropdown show={this.toggle}>
             <slot></slot>
-          </cw-dropdown>
+          </ix-dropdown>
         </button>
       </Host>
     );
diff --git a/packages/core/src/components/split-button/test/basic/index.html b/packages/core/src/components/split-button/test/basic/index.html
index 0cf9fc9db3a..2e0dcfbfd54 100644
--- a/packages/core/src/components/split-button/test/basic/index.html
+++ b/packages/core/src/components/split-button/test/basic/index.html
@@ -11,11 +11,11 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-split-button label="Test">
-      <cw-split-button-item label="Item 1" icon="print" />
-      <cw-split-button-item label="Item 2" icon="print" />
-      <cw-split-button-item label="Item 3" icon="print" />
-    </cw-split-button>
+    <ix-split-button label="Test">
+      <ix-split-button-item label="Item 1" icon="print" />
+      <ix-split-button-item label="Item 2" icon="print" />
+      <ix-split-button-item label="Item 3" icon="print" />
+    </ix-split-button>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/split-button/test/split-button.e2e.ts b/packages/core/src/components/split-button/test/split-button.e2e.ts
index 352d2d3181e..a5fcd57b281 100644
--- a/packages/core/src/components/split-button/test/split-button.e2e.ts
+++ b/packages/core/src/components/split-button/test/split-button.e2e.ts
@@ -9,6 +9,8 @@ regressionTest.describe('split-button', () => {
     await page.goto(`split-button/test/basic`);
     await page.locator('button:nth-child(2)').click();
     await page.waitForSelector('.dropdown-menu.show');
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      maxDiffPixelRatio: 0.02,
+    });
   });
 });
diff --git a/packages/core/src/components/tab-item/readme.md b/packages/core/src/components/tab-item/readme.md
index 8ee47fa481b..21896dc520f 100644
--- a/packages/core/src/components/tab-item/readme.md
+++ b/packages/core/src/components/tab-item/readme.md
@@ -1,6 +1,4 @@
-# cw-tab-item
-
-
+# ix-tab-item
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/tab-item/tab-item.scss b/packages/core/src/components/tab-item/tab-item.scss
index b714dc2c113..03233140543 100644
--- a/packages/core/src/components/tab-item/tab-item.scss
+++ b/packages/core/src/components/tab-item/tab-item.scss
@@ -2,12 +2,11 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/variables';
-@import '../../../scss/colors';
-@import '../../../scss/mixins/text-truncation';
-@import '../../../scss/mixins/hover';
+@import 'common-variables';
+@import 'mixins/text-truncation';
+@import 'mixins/hover';
 
-cw-tab-item {
+ix-tab-item {
   position: relative;
   display: flex;
   align-items: center;
@@ -19,8 +18,6 @@ cw-tab-item {
   font-weight: bold;
   background-color: var(--theme-tab--background);
   color: var(--theme-tab--color);
-  @include hover;
-  @include active;
 
   &.top {
     &::after {
diff --git a/packages/core/src/components/tab-item/tab-item.tsx b/packages/core/src/components/tab-item/tab-item.tsx
index 377c476d7f4..e0bdfa4d58d 100644
--- a/packages/core/src/components/tab-item/tab-item.tsx
+++ b/packages/core/src/components/tab-item/tab-item.tsx
@@ -1,7 +1,7 @@
 import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-tab-item',
+  tag: 'ix-tab-item',
   styleUrl: 'tab-item.scss',
   scoped: false,
 })
@@ -36,15 +36,22 @@ export class TabItem {
    */
   @Prop() placement: 'bottom' | 'top' = 'bottom';
 
-  private tabItemClasses(props: { selected: boolean; disabled: boolean; small: boolean; icon: boolean; layout: 'auto' | 'stretched'; placement: 'bottom' | 'top' }) {
+  private tabItemClasses(props: {
+    selected: boolean;
+    disabled: boolean;
+    small: boolean;
+    icon: boolean;
+    layout: 'auto' | 'stretched';
+    placement: 'bottom' | 'top';
+  }) {
     return {
-      'selected': props.selected,
-      'disabled': props.disabled,
+      selected: props.selected,
+      disabled: props.disabled,
       'small-tab': props.small,
-      'icon': props.small,
-      'stretched': props.layout === 'stretched',
-      'bottom': props.placement === 'bottom',
-      'top': props.placement === 'top',
+      icon: props.small,
+      stretched: props.layout === 'stretched',
+      bottom: props.placement === 'bottom',
+      top: props.placement === 'top',
     };
   }
 
diff --git a/packages/core/src/components/tabs/readme.md b/packages/core/src/components/tabs/readme.md
index 18cd4f057f7..7c6791e45b4 100644
--- a/packages/core/src/components/tabs/readme.md
+++ b/packages/core/src/components/tabs/readme.md
@@ -1,6 +1,4 @@
-# cw-tabs
-
-
+# ix-tabs
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/tabs/tabs.scss b/packages/core/src/components/tabs/tabs.scss
index 32845bb405b..528085fcc08 100644
--- a/packages/core/src/components/tabs/tabs.scss
+++ b/packages/core/src/components/tabs/tabs.scss
@@ -2,11 +2,10 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/variables';
-@import '../../../scss/colors';
-@import '../../../scss/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/text-truncation';
 
-cw-tabs {
+ix-tabs {
   width: auto;
   display: flex;
   align-items: center;
diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx
index a63400c55da..68af392a68f 100644
--- a/packages/core/src/components/tabs/tabs.tsx
+++ b/packages/core/src/components/tabs/tabs.tsx
@@ -1,14 +1,22 @@
-import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';
+import {
+  Component,
+  Element,
+  h,
+  Host,
+  Listen,
+  Prop,
+  State,
+} from '@stencil/core';
 
 let windowStartSize = window.innerWidth;
 
 @Component({
-  tag: 'cw-tabs',
+  tag: 'ix-tabs',
   styleUrl: 'tabs.scss',
   scoped: false,
 })
 export class CwTabs {
-  @Element() hostElement!: HTMLCwTabsElement;
+  @Element() hostElement!: HTMLIxTabsElement;
 
   /**
    * Set tab items to small size
@@ -54,7 +62,7 @@ export class CwTabs {
   }
 
   private getTabs() {
-    return Array.from(this.hostElement.querySelectorAll('cw-tab-item'));
+    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));
   }
 
   private getTab(tabIndex: number) {
@@ -68,7 +76,11 @@ export class CwTabs {
   private showArrows() {
     try {
       const tabWrapper = this.getTabsWrapper();
-      return tabWrapper.scrollWidth > Math.ceil(tabWrapper.getBoundingClientRect().width) && this.layout === 'auto';
+      return (
+        tabWrapper.scrollWidth >
+          Math.ceil(tabWrapper.getBoundingClientRect().width) &&
+        this.layout === 'auto'
+      );
     } catch (error) {
       return false;
     }
@@ -86,7 +98,12 @@ export class CwTabs {
     try {
       const tabWrapper = this.getTabsWrapper();
       const tabWrapperRect = tabWrapper.getBoundingClientRect();
-      return this.showArrows() && this.scrollActionAmount > (tabWrapper.scrollWidth - tabWrapperRect.width) * -1 && window.innerWidth <= tabWrapper.scrollWidth;
+      return (
+        this.showArrows() &&
+        this.scrollActionAmount >
+          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1 &&
+        window.innerWidth <= tabWrapper.scrollWidth
+      );
     } catch (error) {
       return false;
     }
@@ -101,12 +118,16 @@ export class CwTabs {
 
   private move(amount: number, click = false) {
     const tabWrapper = this.getTabsWrapper();
-    const maxScrollWidth = (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;
+    const maxScrollWidth =
+      (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;
 
     amount = this.currentScrollAmount + amount;
     amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;
 
-    const styles = [`transform: translateX(${amount}px);`, click ? `transition: all ease-in-out 400ms;` : ''].join('');
+    const styles = [
+      `transform: translateX(${amount}px);`,
+      click ? `transition: all ease-in-out 400ms;` : '',
+    ].join('');
 
     tabWrapper.setAttribute('style', styles);
 
@@ -133,15 +154,19 @@ export class CwTabs {
     this.moveTabToView(index);
   }
 
-  private dragStart(element: HTMLCwTabItemElement, event: MouseEvent) {
+  private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {
     if (!this.showArrows()) return;
     if (event.button > 0) return; // ignore right click
 
-    this.clickAction.timeout = this.clickAction.timeout === null ? setTimeout(() => (this.clickAction.isClick = false), 300) : null;
+    this.clickAction.timeout =
+      this.clickAction.timeout === null
+        ? setTimeout(() => (this.clickAction.isClick = false), 300)
+        : null;
 
     const tabPositionX = parseFloat(window.getComputedStyle(element).left);
     const mousedownPositionX = event.clientX;
-    const move = (event: MouseEvent) => this.dragMove(event, tabPositionX, mousedownPositionX);
+    const move = (event: MouseEvent) =>
+      this.dragMove(event, tabPositionX, mousedownPositionX);
 
     window.addEventListener('mouseup', () => {
       window.removeEventListener('mousemove', move, false);
@@ -174,7 +199,10 @@ export class CwTabs {
       if (this.small) element.setAttribute('small', 'true');
 
       element.setAttribute('layout', this.layout);
-      element.setAttribute('selected', index === this.selected ? 'true' : 'false');
+      element.setAttribute(
+        'selected',
+        index === this.selected ? 'true' : 'false'
+      );
       element.setAttribute('placement', this.placement);
     });
   }
@@ -183,17 +211,27 @@ export class CwTabs {
     const tabs = this.getTabs();
     tabs.forEach((element, index) => {
       const isDisabled = element.getAttribute('disabled') !== null;
-      if (!isDisabled) element.addEventListener('click', () => this.clickTab(index));
+      if (!isDisabled)
+        element.addEventListener('click', () => this.clickTab(index));
 
-      element.addEventListener('mousedown', event => this.dragStart(element, event));
+      element.addEventListener('mousedown', (event) =>
+        this.dragStart(element, event)
+      );
     });
   }
 
   render() {
     return (
       <Host>
-        <div class="overflow-shadow" style={this.getArrowStyle(this.showPreviousArrow())}></div>
-        <div class="arrow" style={this.getArrowStyle(this.showPreviousArrow())} onClick={() => this.move(this.scrollAmount, true)}>
+        <div
+          class="overflow-shadow"
+          style={this.getArrowStyle(this.showPreviousArrow())}
+        ></div>
+        <div
+          class="arrow"
+          style={this.getArrowStyle(this.showPreviousArrow())}
+          onClick={() => this.move(this.scrollAmount, true)}
+        >
           <span class="glyph glyph-chevron-left-small"></span>
         </div>
         <div class="tab-items">
@@ -201,8 +239,15 @@ export class CwTabs {
             <slot></slot>
           </div>
         </div>
-        <div class="overflow-shadow right" style={this.getArrowStyle(this.showNextArrow())}></div>
-        <div class="arrow right" style={this.getArrowStyle(this.showNextArrow())} onClick={() => this.move(-this.scrollAmount, true)}>
+        <div
+          class="overflow-shadow right"
+          style={this.getArrowStyle(this.showNextArrow())}
+        ></div>
+        <div
+          class="arrow right"
+          style={this.getArrowStyle(this.showNextArrow())}
+          onClick={() => this.move(-this.scrollAmount, true)}
+        >
           <span class="glyph glyph-chevron-right-small"></span>
         </div>
       </Host>
diff --git a/packages/core/src/components/tabs/test/basic/index.html b/packages/core/src/components/tabs/test/basic/index.html
index 5d40bd4caf2..cbd4f35789f 100644
--- a/packages/core/src/components/tabs/test/basic/index.html
+++ b/packages/core/src/components/tabs/test/basic/index.html
@@ -11,11 +11,11 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-tabs selected="1">
-      <cw-tab-item>Tab 1</cw-tab-item>
-      <cw-tab-item>Tab 2</cw-tab-item>
-      <cw-tab-item>Tab 3</cw-tab-item>
-    </cw-tabs>
+    <ix-tabs selected="1">
+      <ix-tab-item>Tab 1</ix-tab-item>
+      <ix-tab-item>Tab 2</ix-tab-item>
+      <ix-tab-item>Tab 3</ix-tab-item>
+    </ix-tabs>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/tabs/test/cw-tabs.spec.tsx b/packages/core/src/components/tabs/test/cw-tabs.spec.tsx
index ffd0ab11cb2..163b2edd5f8 100644
--- a/packages/core/src/components/tabs/test/cw-tabs.spec.tsx
+++ b/packages/core/src/components/tabs/test/cw-tabs.spec.tsx
@@ -1,18 +1,18 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { CwTabs } from '../tabs';
 
-describe('cw-tabs', () => {
+describe('ix-tabs', () => {
   it('renders', async () => {
     const page = await newSpecPage({
       components: [CwTabs],
-      html: `<cw-tabs></cw-tabs>`,
+      html: `<ix-tabs></ix-tabs>`,
     });
     expect(page.root).toEqualHtml(`
-      <cw-tabs>
+      <ix-tabs>
         <mock:shadow-root>
           <slot></slot>
         </mock:shadow-root>
-      </cw-tabs>
+      </ix-tabs>
     `);
   });
 });
diff --git a/packages/core/src/components/tile/readme.md b/packages/core/src/components/tile/readme.md
index 15a3325f16f..a9239e6b2c7 100644
--- a/packages/core/src/components/tile/readme.md
+++ b/packages/core/src/components/tile/readme.md
@@ -1,6 +1,4 @@
-# cw-tile
-
-
+# ix-tile
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/tile/test/basic/index.html b/packages/core/src/components/tile/test/basic/index.html
index a8ab8d8316e..c524be8167a 100644
--- a/packages/core/src/components/tile/test/basic/index.html
+++ b/packages/core/src/components/tile/test/basic/index.html
@@ -11,21 +11,21 @@
     <title>Stencil Component Starter</title>
   </head>
   <body style="padding: 2rem">
-    <cw-tile size="small">92.8 °C</cw-tile>
+    <ix-tile size="small">92.8 °C</ix-tile>
     <div class="mb-3"></div>
-    <cw-tile size="medium" class="mr-1">
+    <ix-tile size="medium" class="mr-1">
       <div slot="header">Tile header</div>
       <div class="text-l">92.8 °C</div>
-    </cw-tile>
+    </ix-tile>
     <div class="mb-3"></div>
 
-    <cw-tile size="big">
+    <ix-tile size="big">
       <div
         class="d-flex flex-grow-1 align-items-center justify-content-between"
         slot="header"
       >
         Tile header
-        <cw-icon-button ghost icon="context-menu"></cw-icon-button>
+        <ix-icon-button ghost icon="context-menu"></ix-icon-button>
       </div>
       <div slot="subheader">Temperature</div>
       <div
@@ -43,11 +43,11 @@
         class="d-flex h-100 align-items-center justify-content-end"
         slot="footer"
       >
-        <cw-button ghost slot="footer">
-          <cw-icon name="chevron-right-small"></cw-icon>Details
-        </cw-button>
+        <ix-button ghost slot="footer">
+          <ix-icon name="chevron-right-small"></ix-icon>Details
+        </ix-button>
       </div>
-    </cw-tile>
+    </ix-tile>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/tile/tile.scss b/packages/core/src/components/tile/tile.scss
index 658b30e4316..7779c8bde22 100644
--- a/packages/core/src/components/tile/tile.scss
+++ b/packages/core/src/components/tile/tile.scss
@@ -1,8 +1,8 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/text-truncation';
 
 :host {
   @mixin set-height($height) {
@@ -63,7 +63,6 @@
   .tile-subheader,
   .tile-content,
   .tile-footer {
-
     &:not(:empty) {
       padding: 0 $default-space;
     }
@@ -71,12 +70,10 @@
 
   .tile-header,
   .tile-subheader,
-  .tile-content
-   {
+  .tile-content {
     flex-grow: 1;
   }
 
-
   .tile-header:not(:empty) {
     display: flex;
     height: $large-control-height;
diff --git a/packages/core/src/components/tile/tile.tsx b/packages/core/src/components/tile/tile.tsx
index ff64aa1ac3b..1d4082a7a3b 100644
--- a/packages/core/src/components/tile/tile.tsx
+++ b/packages/core/src/components/tile/tile.tsx
@@ -1,7 +1,7 @@
-import { Component, Host, h, Prop } from '@stencil/core';
+import { Component, h, Host, Prop } from '@stencil/core';
 
 @Component({
-  tag: 'cw-tile',
+  tag: 'ix-tile',
   styleUrl: 'tile.scss',
   scoped: true,
 })
diff --git a/packages/core/src/components/time-picker/readme.md b/packages/core/src/components/time-picker/readme.md
index b4aa831377b..bff8e0989db 100644
--- a/packages/core/src/components/time-picker/readme.md
+++ b/packages/core/src/components/time-picker/readme.md
@@ -1,6 +1,4 @@
-# cw-time-picker
-
-
+# ix-time-picker
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/time-picker/time-picker.scss b/packages/core/src/components/time-picker/time-picker.scss
index 9f013e32c84..6d081a8588c 100644
--- a/packages/core/src/components/time-picker/time-picker.scss
+++ b/packages/core/src/components/time-picker/time-picker.scss
@@ -1,4 +1,4 @@
-@import '../../../scss/v7/common-variables';
+@import 'common-variables';
 
 .header {
   display: flex;
@@ -28,7 +28,7 @@ input {
   background-color: var(--theme-input--background);
   border-radius: 2px;
   border: 1px solid var(--theme-input--border-color);
-  box-shadow: inset 0 2px 4px 0 var(--theme-color-1)12;
+  box-shadow: inset 0 2px 4px 0 var(--theme-color-1) 12;
   width: 42px;
   height: 32px;
   text-align: right;
@@ -44,7 +44,7 @@ input {
   }
 
   /* Firefox */
-  &[type=number] {
+  &[type='number'] {
     -moz-appearance: textfield;
   }
 }
diff --git a/packages/core/src/components/time-picker/time-picker.tsx b/packages/core/src/components/time-picker/time-picker.tsx
index 0d1a4d04e14..c6a0bc24e0a 100644
--- a/packages/core/src/components/time-picker/time-picker.tsx
+++ b/packages/core/src/components/time-picker/time-picker.tsx
@@ -16,12 +16,12 @@ import { DateTime } from 'luxon';
 import { DateTimeCardCorners } from '../date-time-card/date-time-card';
 
 @Component({
-  tag: 'cw-time-picker',
+  tag: 'ix-time-picker',
   styleUrl: 'time-picker.scss',
   scoped: true,
 })
 export class TimePicker {
-  @Element() hostElement!: HTMLCwTimePickerElement;
+  @Element() hostElement!: HTMLIxTimePickerElement;
 
   /**
    * Set corners style
@@ -129,21 +129,21 @@ export class TimePicker {
 
     return (
       <Host>
-        <cw-date-time-card individual={this.individual} corners={this.corners}>
+        <ix-date-time-card individual={this.individual} corners={this.corners}>
           <div class="header" slot="header">
             <div class="title">Time</div>
           </div>
 
           <div class="clock">
             <div class={{ columns: true, hidden: hideHour }}>
-              <cw-icon-button
+              <ix-icon-button
                 size="16"
                 onClick={() => this.updateInput('up', { hours: true })}
                 ghost
                 icon="chevron-up"
                 variant="Primary"
                 class="arrows"
-              ></cw-icon-button>
+              ></ix-icon-button>
               <input
                 name="hours"
                 type="number"
@@ -153,14 +153,14 @@ export class TimePicker {
                 max={this.showTimeReference === true ? 11 : 23}
                 ref={(ref) => (this.hourInputRef = ref)}
               ></input>
-              <cw-icon-button
+              <ix-icon-button
                 size="16"
                 onClick={() => this.updateInput('down', { hours: true })}
                 ghost
                 icon="chevron-down"
                 variant="Primary"
                 class="arrows"
-              ></cw-icon-button>
+              ></ix-icon-button>
             </div>
 
             <div
@@ -170,14 +170,14 @@ export class TimePicker {
             </div>
 
             <div class={{ columns: true, hidden: hideMinutes }}>
-              <cw-icon-button
+              <ix-icon-button
                 size="16"
                 onClick={() => this.updateInput('up', { minutes: true })}
                 ghost
                 icon="chevron-up"
                 variant="Primary"
                 class="arrows"
-              ></cw-icon-button>
+              ></ix-icon-button>
               <input
                 name="minutes"
                 type="number"
@@ -187,14 +187,14 @@ export class TimePicker {
                 disabled
                 ref={(ref) => (this.minuteInputRef = ref)}
               ></input>
-              <cw-icon-button
+              <ix-icon-button
                 size="16"
                 onClick={() => this.updateInput('down', { minutes: true })}
                 ghost
                 icon="chevron-down"
                 variant="Primary"
                 class="arrows"
-              ></cw-icon-button>
+              ></ix-icon-button>
             </div>
 
             <div
@@ -204,14 +204,14 @@ export class TimePicker {
             </div>
 
             <div class={{ columns: true, hidden: hideSeconds }}>
-              <cw-icon-button
+              <ix-icon-button
                 size="16"
                 onClick={() => this.updateInput('up', { seconds: true })}
                 ghost
                 icon="chevron-up"
                 variant="Primary"
                 class="arrows"
-              ></cw-icon-button>
+              ></ix-icon-button>
               <input
                 name="seconds"
                 type="number"
@@ -221,14 +221,14 @@ export class TimePicker {
                 max="59"
                 ref={(ref) => (this.secondInputRef = ref)}
               ></input>
-              <cw-icon-button
+              <ix-icon-button
                 size="16"
                 onClick={() => this.updateInput('down', { seconds: true })}
                 ghost
                 icon="chevron-down"
                 variant="Primary"
                 class="arrows"
-              ></cw-icon-button>
+              ></ix-icon-button>
             </div>
 
             <div
@@ -238,14 +238,14 @@ export class TimePicker {
                 hidden: hideTimeReference,
               }}
             >
-              <cw-icon-button
+              <ix-icon-button
                 size="16"
                 onClick={() => this.changeReference()}
                 ghost
                 icon="chevron-up"
                 variant="Primary"
                 class="arrows"
-              ></cw-icon-button>
+              ></ix-icon-button>
               <input
                 name="reference"
                 type="text"
@@ -254,23 +254,23 @@ export class TimePicker {
                 disabled
                 class="text-align"
               ></input>
-              <cw-icon-button
+              <ix-icon-button
                 size="16"
                 onClick={() => this.changeReference()}
                 ghost
                 icon="chevron-down"
                 variant="Primary"
                 class="arrows"
-              ></cw-icon-button>
+              ></ix-icon-button>
             </div>
           </div>
 
           <div class={{ button: true, hidden: hideIndividual }}>
-            <cw-button onClick={() => this.done.emit(this.time.toFormat('TT'))}>
+            <ix-button onClick={() => this.done.emit(this.time.toFormat('TT'))}>
               Done
-            </cw-button>
+            </ix-button>
           </div>
-        </cw-date-time-card>
+        </ix-date-time-card>
       </Host>
     );
   }
diff --git a/packages/core/src/components/toast/readme.md b/packages/core/src/components/toast/readme.md
index 89d7e744035..7d7607539af 100644
--- a/packages/core/src/components/toast/readme.md
+++ b/packages/core/src/components/toast/readme.md
@@ -1,6 +1,4 @@
-# cw-toast-container
-
-
+# ix-toast-container
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/toast/test/basic/index.html b/packages/core/src/components/toast/test/basic/index.html
index 3c8846911f2..06929be4299 100644
--- a/packages/core/src/components/toast/test/basic/index.html
+++ b/packages/core/src/components/toast/test/basic/index.html
@@ -11,11 +11,11 @@
     <title>Stencil Component Starter</title>
   </head>
   <body>
-    <cw-toast-container></cw-toast-container>
+    <ix-toast-container></ix-toast-container>
     <script>
       (async () => {
-        await window.customElements.whenDefined('cw-toast-container');
-        const toastContainer = document.querySelector('cw-toast-container');
+        await window.customElements.whenDefined('ix-toast-container');
+        const toastContainer = document.querySelector('ix-toast-container');
 
         toast = {};
         toast.info = (config) => {
diff --git a/packages/core/src/components/toast/test/cw-toast.spec.tsx b/packages/core/src/components/toast/test/cw-toast.spec.tsx
index dcf94388419..72176e1529c 100644
--- a/packages/core/src/components/toast/test/cw-toast.spec.tsx
+++ b/packages/core/src/components/toast/test/cw-toast.spec.tsx
@@ -3,19 +3,19 @@
  */
 
 import { newSpecPage } from '@stencil/core/testing';
-import { CwToast } from '../cw-toast';
+import { CwToast } from '../ix-toast';
 
-describe('cw-toast', () => {
+describe('ix-toast', () => {
   it('renders', async () => {
     const page = await newSpecPage({
       components: [CwToast],
-      html: `<cw-toast toast-title="Test title">Test message</cw-toast>`,
+      html: `<ix-toast toast-title="Test title">Test message</ix-toast>`,
     });
 
     await page.waitForChanges();
 
     expect(page.root).toEqualHtml(`
-      <cw-toast class=\"animate__animated animate__fadeIn\" toast-title=\"Test title\">
+      <ix-toast class=\"animate__animated animate__fadeIn\" toast-title=\"Test title\">
       <div class=\"toast-body\">
         <div class=\"toast-content\">
           <div class=\"text-default-title-single toast-title\">
@@ -26,11 +26,11 @@ describe('cw-toast', () => {
           </div>
         </div>
         <div class=\"toast-close\">
-          <cw-icon-button icon=\"close\" ghost=\"\" size=\"24\"></cw-icon-button>
+          <ix-icon-button icon=\"close\" ghost=\"\" size=\"24\"></ix-icon-button>
         </div>
       </div>
       <div class=\"toast-progress-bar toast-progress-bar--animated\" style=\"animation-duration: 5000ms; animation-play-state: running;\"></div>
-    </cw-toast>
+    </ix-toast>
       `);
   });
 });
diff --git a/packages/core/src/components/toast/toast-container.tsx b/packages/core/src/components/toast/toast-container.tsx
index 89968e45085..6d9b5f610db 100644
--- a/packages/core/src/components/toast/toast-container.tsx
+++ b/packages/core/src/components/toast/toast-container.tsx
@@ -4,14 +4,14 @@
 
 import { Component, Element, h, Host, Method, Prop } from '@stencil/core';
 import { Disposable, TypedEvent } from '../utils/typed-event';
-import { ToastConfig } from './toast';
+import { ToastConfig } from './toast-utils';
 
 @Component({
-  tag: 'cw-toast-container',
+  tag: 'ix-toast-container',
   scoped: true,
 })
 export class CwToastContainer {
-  @Element() host!: HTMLCwToastContainerElement;
+  @Element() host!: HTMLIxToastContainerElement;
 
   /**
    */
@@ -64,7 +64,7 @@ export class CwToastContainer {
    */
   @Method()
   async showToast(config: ToastConfig) {
-    const toast = document.createElement('cw-toast');
+    const toast = document.createElement('ix-toast');
 
     function removeToast() {
       toast.remove();
diff --git a/packages/core/src/components/toast/toast.ts b/packages/core/src/components/toast/toast-utils.ts
similarity index 78%
rename from packages/core/src/components/toast/toast.ts
rename to packages/core/src/components/toast/toast-utils.ts
index df2fd194739..43dc1126c2d 100644
--- a/packages/core/src/components/toast/toast.ts
+++ b/packages/core/src/components/toast/toast-utils.ts
@@ -15,14 +15,18 @@ export interface ToastConfig {
 }
 
 function getToastContext() {
-  const containerList = Array.from(document.querySelectorAll('cw-toast-container'));
+  const containerList = Array.from(
+    document.querySelectorAll('ix-toast-container')
+  );
   const [container] = containerList;
   if (containerList.length > 1) {
-    console.warn('Multiple toast container are found. Only there first is used.');
+    console.warn(
+      'Multiple toast container are found. Only there first is used.'
+    );
     return container.getEvents();
   }
   if (!container) {
-    const toastContainer = document.createElement('cw-toast-container');
+    const toastContainer = document.createElement('ix-toast-container');
     document.body.appendChild(toastContainer);
 
     return toastContainer.getEvents();
@@ -31,7 +35,7 @@ function getToastContext() {
 }
 
 function toast(config: ToastConfig) {
-  getToastContext().then(onShowToast => {
+  getToastContext().then((onShowToast) => {
     onShowToast.emit(config);
   });
 }
diff --git a/packages/core/src/components/toast/cw-toast.scss b/packages/core/src/components/toast/toast.scss
similarity index 93%
rename from packages/core/src/components/toast/cw-toast.scss
rename to packages/core/src/components/toast/toast.scss
index 9f19f206a4d..608651ede6b 100644
--- a/packages/core/src/components/toast/cw-toast.scss
+++ b/packages/core/src/components/toast/toast.scss
@@ -2,8 +2,8 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/text-truncation';
 
 :host {
   display: flex;
diff --git a/packages/core/src/components/toast/cw-toast.tsx b/packages/core/src/components/toast/toast.tsx
similarity index 71%
rename from packages/core/src/components/toast/cw-toast.tsx
rename to packages/core/src/components/toast/toast.tsx
index 0572905cbe2..fb06ccf0b1f 100644
--- a/packages/core/src/components/toast/cw-toast.tsx
+++ b/packages/core/src/components/toast/toast.tsx
@@ -2,12 +2,21 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';
-import { ToastType } from './toast';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+  State,
+} from '@stencil/core';
+import { ToastType } from './toast-utils';
 
 @Component({
-  tag: 'cw-toast',
-  styleUrl: 'cw-toast.scss',
+  tag: 'ix-toast',
+  styleUrl: 'toast.scss',
   scoped: true,
 })
 export class CwToast {
@@ -50,25 +59,25 @@ export class CwToast {
   @State() isRunning = true;
   @State() touched = false;
 
-  @Element() host!: HTMLCwToastElement;
+  @Element() host!: HTMLIxToastElement;
 
   private getIcon() {
     if (this.icon) {
-      return <cw-icon name={this.icon} color={this.iconColor} size="24" />;
+      return <ix-icon name={this.icon} color={this.iconColor} size="24" />;
     }
 
     switch (this.type) {
       case 'info':
-        return <cw-icon name={'info'} size="24" color="color-std-text" />;
+        return <ix-icon name={'info'} size="24" color="color-std-text" />;
 
       case 'error':
-        return <cw-icon name={'error'} size="24" color="color-alarm" />;
+        return <ix-icon name={'error'} size="24" color="color-alarm" />;
 
       case 'success':
-        return <cw-icon name={'success'} size="24" color="color-success" />;
+        return <ix-icon name={'success'} size="24" color="color-success" />;
 
       case 'warning':
-        return <cw-icon name={'warning'} size="24" color="color-warning" />;
+        return <ix-icon name={'warning'} size="24" color="color-warning" />;
 
       default:
         return '';
@@ -122,22 +131,33 @@ export class CwToast {
             updateProgress();
           }}
         >
-          {this.type || this.icon ? <div class="toast-icon">{this.getIcon()}</div> : null}
+          {this.type || this.icon ? (
+            <div class="toast-icon">{this.getIcon()}</div>
+          ) : null}
           <div class="toast-content">
-            {this.toastTitle ? <div class="toast-title text-default-title-single">{this.toastTitle}</div> : null}
+            {this.toastTitle ? (
+              <div class="toast-title text-default-title-single">
+                {this.toastTitle}
+              </div>
+            ) : null}
             <div class="toast-message text-default">
               <slot></slot>
             </div>
           </div>
           <div class="toast-close">
-            <cw-icon-button icon="close" size="24" ghost onClick={() => this.closeToast.emit()} />
+            <ix-icon-button
+              icon="close"
+              size="24"
+              ghost
+              onClick={() => this.closeToast.emit()}
+            />
           </div>
         </div>
         {this.autoClose ? (
           <div
             class={progressBarClass.join(' ')}
             style={progressBarStyle}
-            ref={r => (progressBarElement = r)}
+            ref={(r) => (progressBarElement = r)}
             onAnimationEnd={() => this.close()}
             onTransitionEnd={() => {
               if (this.progress === 0) {
diff --git a/packages/core/src/components/toggle/readme.md b/packages/core/src/components/toggle/readme.md
index c0e1e60ba46..7db3cc996d5 100644
--- a/packages/core/src/components/toggle/readme.md
+++ b/packages/core/src/components/toggle/readme.md
@@ -1,6 +1,4 @@
-# cw-toggle
-
-
+# ix-toggle
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/toggle/test/basic/index.html b/packages/core/src/components/toggle/test/basic/index.html
index 887de75d129..621b1114fa8 100644
--- a/packages/core/src/components/toggle/test/basic/index.html
+++ b/packages/core/src/components/toggle/test/basic/index.html
@@ -11,9 +11,9 @@
     <title>Stencil Component Starter</title>
   </head>
   <body style="padding: 2rem">
-    <cw-toggle></cw-toggle>
+    <ix-toggle></ix-toggle>
     <br />
-    <cw-toggle checked></cw-toggle>
+    <ix-toggle checked></ix-toggle>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/toggle/toggle.scss b/packages/core/src/components/toggle/toggle.scss
index d347aab18f9..144c15cf353 100644
--- a/packages/core/src/components/toggle/toggle.scss
+++ b/packages/core/src/components/toggle/toggle.scss
@@ -2,9 +2,9 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/v7/common-variables';
-@import '../../../scss/v7/mixins/hover';
-@import '../../../scss/v7/mixins/text-truncation';
+@import 'common-variables';
+@import 'mixins/hover';
+@import 'mixins/text-truncation';
 
 @mixin toggle($state, $suffix: '') {
   .slider {
diff --git a/packages/core/src/components/toggle/toggle.tsx b/packages/core/src/components/toggle/toggle.tsx
index 30bf1bb87ec..322495a0eb1 100644
--- a/packages/core/src/components/toggle/toggle.tsx
+++ b/packages/core/src/components/toggle/toggle.tsx
@@ -13,7 +13,7 @@ import {
 } from '@stencil/core';
 
 @Component({
-  tag: 'cw-toggle',
+  tag: 'ix-toggle',
   styleUrl: 'toggle.scss',
   scoped: true,
 })
@@ -64,7 +64,7 @@ export class CuiToggle {
    */
   @Event() checkedChange: EventEmitter<boolean>;
 
-  @Element() hostElement!: HTMLCwToggleElement;
+  @Element() hostElement!: HTMLIxToggleElement;
 
   @Listen('keydown', { target: 'window' })
   async onKeyDown(event: KeyboardEvent) {
diff --git a/packages/core/src/components/tree-item/default-tree-item.ts b/packages/core/src/components/tree-item/default-tree-item.ts
index 60a341d306b..148010f2e1a 100644
--- a/packages/core/src/components/tree-item/default-tree-item.ts
+++ b/packages/core/src/components/tree-item/default-tree-item.ts
@@ -8,13 +8,17 @@ export interface DefaultTreeItemData {
 }
 export type DefaultTreeItem = TreeItem<DefaultTreeItemData>;
 
-export function renderDefaultItem(item: DefaultTreeItem, context: TreeItemContext, update: (_: UpdateCallback) => void) {
-  const el = document.createElement('cw-tree-item');
+export function renderDefaultItem(
+  item: DefaultTreeItem,
+  context: TreeItemContext,
+  update: (_: UpdateCallback) => void
+) {
+  const el = document.createElement('ix-tree-item');
   el.hasChildren = item.hasChildren;
   el.context = context;
   el.text = item.data.name;
 
-  update(updateTreeItem => {
+  update((updateTreeItem) => {
     el.text = updateTreeItem.data.name;
   });
   return el;
diff --git a/packages/core/src/components/tree-item/readme.md b/packages/core/src/components/tree-item/readme.md
index 07e495fa341..b8b28c76803 100644
--- a/packages/core/src/components/tree-item/readme.md
+++ b/packages/core/src/components/tree-item/readme.md
@@ -1,6 +1,4 @@
-# cw-tree-item
-
-
+# ix-tree-item
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/tree-item/tree-item.scss b/packages/core/src/components/tree-item/tree-item.scss
index 2289f7923b1..f13b640656a 100644
--- a/packages/core/src/components/tree-item/tree-item.scss
+++ b/packages/core/src/components/tree-item/tree-item.scss
@@ -1,8 +1,7 @@
-@import './../../../scss/mixins/hover';
-@import './../../../scss/variables.scss';
-@import './../../../scss/colors.scss';
-@import './../../../scss/mixins/hover';
-@import './../../../scss/mixins/text-truncation';
+@import 'mixins/hover';
+@import 'common-variables';
+@import 'mixins/hover';
+@import 'mixins/text-truncation';
 
 :host {
   display: flex;
@@ -44,7 +43,7 @@
     width: 2rem;
     height: 2rem;
 
-    cw-icon {
+    ix-icon {
       transition: transform $default-time ease-in-out;
 
       &.icon-toggle-down {
diff --git a/packages/core/src/components/tree-item/tree-item.tsx b/packages/core/src/components/tree-item/tree-item.tsx
index 3d95af97484..b14df473620 100644
--- a/packages/core/src/components/tree-item/tree-item.tsx
+++ b/packages/core/src/components/tree-item/tree-item.tsx
@@ -6,7 +6,7 @@ import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';
 import { TreeItemContext } from '../tree/tree-model';
 
 @Component({
-  tag: 'cw-tree-item',
+  tag: 'ix-tree-item',
   styleUrl: 'tree-item.scss',
   scoped: true,
 })
@@ -45,25 +45,27 @@ export class CwTreeItem {
       >
         <div
           class="icon-toggle-container"
-          onClick={e => {
+          onClick={(e) => {
             e.preventDefault();
             this.toggle.emit();
           }}
         >
           {this.hasChildren ? (
-            <cw-icon
+            <ix-icon
               name="chevron-right"
               size="16"
               class={{
                 ['icon-toggle-down']: this.context?.isExpanded,
               }}
-              color={`color-${this.context?.isExpanded ? 'primary' : 'std-text'}`}
+              color={`color-${
+                this.context?.isExpanded ? 'primary' : 'std-text'
+              }`}
             />
           ) : null}
         </div>
         <div
           class="tree-node-container"
-          onClick={e => {
+          onClick={(e) => {
             e.preventDefault();
             this.itemClick.emit();
           }}
diff --git a/packages/core/src/components/tree/readme.md b/packages/core/src/components/tree/readme.md
index 5d38cbc416c..dd8fad19f09 100644
--- a/packages/core/src/components/tree/readme.md
+++ b/packages/core/src/components/tree/readme.md
@@ -1,6 +1,4 @@
-# cw-tree
-
-
+# ix-tree
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/tree/tree.tsx b/packages/core/src/components/tree/tree.tsx
index e2c8c52ab56..b8e71c9a3b8 100644
--- a/packages/core/src/components/tree/tree.tsx
+++ b/packages/core/src/components/tree/tree.tsx
@@ -2,18 +2,34 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { Component, Element, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Prop,
+  Watch,
+} from '@stencil/core';
 import Hyperlist from 'hyperlist';
 import { renderDefaultItem } from '../tree-item/default-tree-item';
-import { TreeContext, TreeItem, TreeItemContext, TreeItemVisual, TreeModel, UpdateCallback } from './tree-model';
+import {
+  TreeContext,
+  TreeItem,
+  TreeItemContext,
+  TreeItemVisual,
+  TreeModel,
+  UpdateCallback,
+} from './tree-model';
 
 @Component({
-  tag: 'cw-tree',
+  tag: 'ix-tree',
   styleUrl: 'tree.css',
   scoped: true,
 })
 export class CwTree {
-  @Element() host!: HTMLCwTreeElement;
+  @Element() host!: HTMLIxTreeElement;
 
   /**
    * Initial root element will not be rendered
@@ -28,7 +44,13 @@ export class CwTree {
   /**
    * Render function of tree items
    */
-  @Prop() renderItem: (index: number, data: any, dataList: Array<any>, context: TreeContext, update: (callback: UpdateCallback) => void) => HTMLElement;
+  @Prop() renderItem: (
+    index: number,
+    data: any,
+    dataList: Array<any>,
+    context: TreeContext,
+    update: (callback: UpdateCallback) => void
+  ) => HTMLElement;
 
   /**
    * Selection and collapsed state management
@@ -54,7 +76,9 @@ export class CwTree {
       total: list.length,
       generate: (index: number) => {
         const item = list[index];
-        const renderedTreeItem = this.host.querySelector(`[data-tree-node-id="${item.id}"]`) as HTMLCwTreeItemElement;
+        const renderedTreeItem = this.host.querySelector(
+          `[data-tree-node-id="${item.id}"]`
+        ) as HTMLIxTreeItemElement;
 
         const context = this.getContext(item.id);
 
@@ -76,7 +100,13 @@ export class CwTree {
 
         let innerElement: HTMLElement | null = null;
         if (this.renderItem) {
-          innerElement = this.renderItem(index, item, list, { ...this.context }, update);
+          innerElement = this.renderItem(
+            index,
+            item,
+            list,
+            { ...this.context },
+            update
+          );
         }
 
         if (innerElement === null) {
@@ -92,7 +122,7 @@ export class CwTree {
           const itemClickCallback = (e: Event) => {
             e.preventDefault();
             e.stopPropagation();
-            Object.values(this.context).forEach(c => (c.isSelected = false));
+            Object.values(this.context).forEach((c) => (c.isSelected = false));
             const context = this.getContext(item.id);
             context.isSelected = true;
             this.setContext(item.id, context);
@@ -143,7 +173,10 @@ export class CwTree {
     return this.context[id];
   }
 
-  private buildTreeList(root: TreeItem<any>, level: number = 0): TreeItemVisual<any>[] {
+  private buildTreeList(
+    root: TreeItem<any>,
+    level: number = 0
+  ): TreeItemVisual<any>[] {
     const itemList: TreeItemVisual<any>[] = [];
 
     if (root?.hasChildren) {
diff --git a/packages/core/src/components/upload/readme.md b/packages/core/src/components/upload/readme.md
index 1fad642385f..d0ce506b072 100644
--- a/packages/core/src/components/upload/readme.md
+++ b/packages/core/src/components/upload/readme.md
@@ -1,6 +1,4 @@
-# cw-upload
-
-
+# ix-upload
 
 <!-- Auto Generated Below -->
 
diff --git a/packages/core/src/components/upload/test/basic/index.html b/packages/core/src/components/upload/test/basic/index.html
index b34af63c67e..ceb949a7147 100644
--- a/packages/core/src/components/upload/test/basic/index.html
+++ b/packages/core/src/components/upload/test/basic/index.html
@@ -11,7 +11,7 @@
     <title>Stencil Component Starter</title>
   </head>
   <body style="padding: 2rem">
-    <cw-upload></cw-upload>
+    <ix-upload></ix-upload>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>
diff --git a/packages/core/src/components/upload/upload.scss b/packages/core/src/components/upload/upload.scss
index ccee33ade54..ea2210b71b9 100644
--- a/packages/core/src/components/upload/upload.scss
+++ b/packages/core/src/components/upload/upload.scss
@@ -2,10 +2,6 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-@import '../../../scss/mixins/border';
-@import '../../../scss/mixins/shadows';
-@import '../../../scss/variables';
-
 :host {
   display: block;
   min-height: 4rem;
@@ -28,8 +24,9 @@
     border-style: dashed;
 
     &.file-over {
-      @include primary-border-2;
-      @include primary-glow;
+      //TODO: Implement theme
+      // @include primary-border-2;
+      // @include primary-glow;
     }
 
     &.pending {
@@ -73,11 +70,11 @@
         margin-right: 0.625rem;
 
         &.glyph-error {
-          color: $color-red;
+          color: var(--theme-color-alarm);
         }
 
         &.glyph-success {
-          color: $color-green;
+          color: var(--theme-color-success);
         }
       }
     }
diff --git a/packages/core/src/components/upload/upload.tsx b/packages/core/src/components/upload/upload.tsx
index b4b42a5609f..a0af79318be 100644
--- a/packages/core/src/components/upload/upload.tsx
+++ b/packages/core/src/components/upload/upload.tsx
@@ -1,11 +1,21 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+  State,
+} from '@stencil/core';
 import { UploadFileState } from './upload-file-state';
 
 @Component({
-  tag: 'cw-upload',
+  tag: 'ix-upload',
   styleUrl: 'upload.scss',
   scoped: true,
 })
@@ -61,7 +71,7 @@ export class Upload {
    */
   @Event() filesChanged: EventEmitter<Array<File>>;
 
-  @Element() hostElement!: HTMLCwUploadElement;
+  @Element() hostElement!: HTMLIxUploadElement;
 
   get inputElement(): HTMLInputElement {
     return this.hostElement.querySelector('#upload-browser');
@@ -126,11 +136,15 @@ export class Upload {
   private renderUploadState() {
     switch (this.state) {
       case UploadFileState.SELECT_FILE:
-        return <span class="state">{this.selectFileText ? this.selectFileText : '+ Drag files here or'}</span>;
+        return (
+          <span class="state">
+            {this.selectFileText ? this.selectFileText : '+ Drag files here or'}
+          </span>
+        );
       case UploadFileState.LOADING:
         return (
           <span class="state">
-            <cw-spinner variant="primary"></cw-spinner>
+            <ix-spinner variant="primary"></ix-spinner>
             {this.loadingText ? this.loadingText : 'Checking files...'}
           </span>
         );
@@ -138,14 +152,18 @@ export class Upload {
         return (
           <span class="state">
             <i class="glyph glyph-error"></i>
-            {this.uploadFailedText ? this.uploadFailedText : 'Upload failed. Please try again.'}
+            {this.uploadFailedText
+              ? this.uploadFailedText
+              : 'Upload failed. Please try again.'}
           </span>
         );
       case UploadFileState.UPLOAD_SUCCESSED:
         return (
           <span class="state">
             <i class="glyph glyph-success"></i>
-            {this.uploadSuccessText ? this.uploadSuccessText : 'Upload successful'}
+            {this.uploadSuccessText
+              ? this.uploadSuccessText
+              : 'Upload successful'}
           </span>
         );
       default:
@@ -170,8 +188,8 @@ export class Upload {
             'file-upload-area': true,
             'file-over': this.isFileOver,
           }}
-          onDrop={e => this.fileDroped(e)}
-          onDragOver={e => this.fileOver(e)}
+          onDrop={(e) => this.fileDroped(e)}
+          onDragOver={(e) => this.fileOver(e)}
           onDragLeave={() => this.fileLeave()}
           draggable={!this.disabled}
         >
@@ -182,7 +200,7 @@ export class Upload {
               type="file"
               class="upload-browser"
               id="upload-browser"
-              onChange={e => {
+              onChange={(e) => {
                 this.fileChangeEvent(e);
               }}
               accept={this.accept}
diff --git a/packages/core/src/components/utils/debug.ts b/packages/core/src/components/utils/debug.ts
index e104f624966..968b71d4790 100644
--- a/packages/core/src/components/utils/debug.ts
+++ b/packages/core/src/components/utils/debug.ts
@@ -5,7 +5,9 @@ import { version } from './../../env';
 
 export function addVersion() {
   if (document?.head) {
-    const commentVersion = document.createComment(btoa(`coreui-webcomponents: ${version}`));
+    const commentVersion = document.createComment(
+      btoa(`ix-webcomponents: ${version}`)
+    );
     document.body.appendChild(commentVersion);
   }
 }
diff --git a/packages/core/src/exports.ts b/packages/core/src/exports.ts
index 0fe4587c5d5..279edccca98 100644
--- a/packages/core/src/exports.ts
+++ b/packages/core/src/exports.ts
@@ -1,8 +1,9 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-export * from './components/modal/modal';
-export * from './components/toast/toast';
+export * from './components/modal/modal-utils';
+export * from './components/toast/toast-utils';
 export * from './components/tree-item/default-tree-item';
 export * from './components/tree/tree-model';
 export * from './components/upload/upload-file-state';
+
diff --git a/packages/core/src/index.html b/packages/core/src/index.html
index 49e9882bd85..639c55c7e5b 100644
--- a/packages/core/src/index.html
+++ b/packages/core/src/index.html
@@ -2,14 +2,20 @@
 <html dir="ltr" lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
     <title>Stencil Component Starter</title>
 
-    <script type="module" src="/build/core-ui-core.esm.js"></script>
-    <script nomodule src="/build/core-ui-core.js"></script>
+    <script type="module" src="/build/siemens-ix.esm.js"></script>
+    <script nomodule src="/build/siemens-ix.js"></script>
 
-    <link rel="stylesheet" href="/build/core-ui-core.css" />
-    <link rel="stylesheet" href="/build/core-ui-webfont/css/core-ui-webfont.css" />
+    <link rel="stylesheet" href="/build/siemens-ix.css" />
+    <link
+      rel="stylesheet"
+      href="/build/core-ui-webfont/css/core-ui-webfont.css"
+    />
   </head>
   <body style="margin: 0px; height: 100vh">
     <my-component />
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 8d387f203a6..ff83685033d 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -11,9 +11,11 @@ export { InputState } from './components/category-filter/input-state';
 export { LogicalFilterOperator } from './components/category-filter/logical-filter-operator';
 export { FlipTileState } from './components/flip-tile/flip-tile-state';
 export { ModalContainer } from './components/modal-container/modal-container';
-export { Modal } from './components/modal/cw-modal';
+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 {
+  convertToAbbreviationString,
+  convertToRemString,
+} from './components/utils/rwd.util';
 export * from './exports';
-export * from './theme';
diff --git a/packages/core/src/theme.ts b/packages/core/src/theme.ts
deleted file mode 100644
index a4038e4faf2..00000000000
--- a/packages/core/src/theme.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-/*
- * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
- */
-
-// tslint:disable-next-line: variable-name
-/**
- * @deprecated Will be removed in 7.0.0 and will not be updated anymore. (See https://***REMOVED***/pd-de/ui-library/core-ui/-/issues/547)
- */
-export const theme_base_colors = {
-  color_1: '#fff',
-  color_1_85: 'rgba(255, 255, 255, 0.85)',
-  color_1_60: 'rgba(255, 255, 255, 0.6)',
-  color_1_40: 'rgba(255, 255, 255, 0.4)',
-  color_1_25: 'rgba(255, 255, 255, 0.25)',
-  color_1_10: 'rgba(255, 255, 255, 0.14)',
-  color_1_05: 'rgba(255, 255, 255, 0.07)',
-  color_2: '#f5f8fa',
-  color_3: '#ebf0f5',
-  color_3_60: 'rgba(235, 240, 245, 0.6)',
-  color_3_40: 'rgba(235, 240, 245, 0.4)',
-  color_3_25: 'rgba(235, 240, 245, 0.25)',
-  color_3_15: 'rgba(235, 240, 245, 0.15)',
-  color_4: '#dfe6ed',
-  color_4a: '#d6dfe7',
-  color_5: '#ced9e2',
-  color_6: '#becdd7',
-  color_7: '#879baa',
-  color_8: '#6e7d89',
-  color_8_60: 'rgba(65, 95, 117, 0.6)',
-  color_8_40: 'rgba(65, 95, 117, 0.4)',
-  color_9: '#555f69',
-  color_9a: '#3e4b51',
-  color_10: '#3c464b',
-  color_11: '#293339',
-  color_12: '#172126',
-  color_12_55: 'rgba(23, 33, 38, 0.55)',
-  color_12_40: 'rgba(23, 33, 38, 0.4)',
-  color_12_25: 'rgba(23, 33, 38, 0.25)',
-  color_12_15: 'rgba(23, 33, 38, 0.15)',
-  color_13: '#10181c',
-  color_14: 'rgba(0, 0, 0, 1)',
-  color_14_75: 'rgba(0, 0, 0, 0.75)',
-  color_14_55: 'rgba(0, 0, 0, 0.55)',
-  color_14_40: 'rgba(0, 0, 0, 0.4)',
-  color_14_30: 'rgba(0, 0, 0, 0.3)',
-  color_14_15: 'rgba(0, 0, 0, 0.15)',
-  color_14_10: 'rgba(0, 0, 0, 0.1)',
-  color_14_05: 'rgba(0, 0, 0, 0.05)',
-  color_teal: '#0e777c',
-  color_light_teal: '#41aaaa',
-  color_light_teal_25: 'rgba(50, 160, 160, 0.25)',
-  color_light_teal_15: 'rgba(50, 160, 160, 0.15)',
-  color_red: '#dc0031',
-  color_orange: '#eb780a',
-  color_yellow: '#ffb900',
-  color_green: '#339b00',
-  color_marine: '#1e54b3',
-};
-
-// tslint:disable-next-line: variable-name
-/**
- * @deprecated Will be removed in 7.0.0 and will not be updated anymore. (See https://***REMOVED***/pd-de/ui-library/core-ui/-/issues/547)
- */
-export const theme_colors = {
-  'color-primary': {
-    light: theme_base_colors.color_teal,
-    dark: theme_base_colors.color_light_teal,
-  },
-  'color-1': {
-    light: theme_base_colors.color_1,
-    dark: theme_base_colors.color_13,
-  },
-  'color-2': {
-    light: theme_base_colors.color_2,
-    dark: theme_base_colors.color_12,
-  },
-  'color-3': {
-    light: theme_base_colors.color_3,
-    dark: theme_base_colors.color_11,
-  },
-  'color-4': {
-    light: theme_base_colors.color_4,
-    dark: theme_base_colors.color_10,
-  },
-  'color-4-a': {
-    light: theme_base_colors.color_4a,
-    dark: theme_base_colors.color_9a,
-  },
-  'color-5': {
-    light: theme_base_colors.color_5,
-    dark: theme_base_colors.color_9,
-  },
-  'color-6': {
-    light: theme_base_colors.color_6,
-    dark: theme_base_colors.color_8,
-  },
-  'color-7': {
-    light: theme_base_colors.color_7,
-    dark: theme_base_colors.color_7,
-  },
-  'color-alarm': {
-    light: theme_base_colors.color_red,
-    dark: theme_base_colors.color_red,
-  },
-  'color-critical': {
-    light: theme_base_colors.color_orange,
-    dark: theme_base_colors.color_orange,
-  },
-  'color-info': {
-    light: theme_base_colors.color_marine,
-    dark: theme_base_colors.color_marine,
-  },
-  'color-neutral': {
-    light: theme_base_colors.color_7,
-    dark: theme_base_colors.color_7,
-  },
-  'color-success': {
-    light: theme_base_colors.color_green,
-    dark: theme_base_colors.color_green,
-  },
-  'color-warning': {
-    light: theme_base_colors.color_yellow,
-    dark: theme_base_colors.color_yellow,
-  },
-  'color-contrast-text': {
-    light: theme_base_colors.color_14,
-    dark: theme_base_colors.color_1,
-  },
-  'color-std-text': {
-    light: theme_base_colors.color_14_75,
-    dark: theme_base_colors.color_1_85,
-  },
-  'color-soft-text': {
-    light: theme_base_colors.color_14_55,
-    dark: theme_base_colors.color_1_60,
-  },
-  'color-weak-text': {
-    light: theme_base_colors.color_14_30,
-    dark: theme_base_colors.color_1_40,
-  },
-  'color-inv-contrast-text': {
-    light: theme_base_colors.color_1,
-    dark: theme_base_colors.color_14,
-  },
-  'color-inv-std-text': {
-    light: theme_base_colors.color_1_85,
-    dark: theme_base_colors.color_14_75,
-  },
-  'color-inv-soft-text': {
-    light: theme_base_colors.color_1_60,
-    dark: theme_base_colors.color_14_55,
-  },
-  'color-inv-weak-text': {
-    light: theme_base_colors.color_1_40,
-    dark: theme_base_colors.color_14_30,
-  },
-  'color-disabled-btn': {
-    light: theme_base_colors.color_12_25,
-    dark: theme_base_colors.color_1_25,
-  },
-};
diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts
index acca6fb49c8..8f6eee1e356 100644
--- a/packages/core/stencil.config.ts
+++ b/packages/core/stencil.config.ts
@@ -7,123 +7,122 @@ import autoprefixer from 'autoprefixer';
 export const config: Config = {
   bundles: [
     {
-      components: ['cw-animated-tabs', 'cw-animated-tab'],
+      components: ['ix-animated-tabs', 'ix-animated-tab'],
     },
     {
-      components: ['cw-application-header'],
+      components: ['ix-application-header'],
     },
     {
-      components: ['cw-basic-navigation'],
+      components: ['ix-basic-navigation'],
     },
     {
-      components: ['cw-blind'],
+      components: ['ix-blind'],
     },
     {
-      components: ['cw-breadcrumb', 'cw-breadcrumb-item'],
+      components: ['ix-breadcrumb', 'ix-breadcrumb-item'],
     },
     {
-      components: ['cw-button'],
+      components: ['ix-button'],
     },
     {
-      components: ['cw-category-filter'],
+      components: ['ix-category-filter'],
     },
     {
-      components: ['cw-chip'],
+      components: ['ix-chip'],
     },
     {
-      components: ['cw-counter-pill'],
+      components: ['ix-counter-pill'],
     },
     {
-      components: ['cw-drawer'],
+      components: ['ix-drawer'],
     },
     {
-      components: ['cw-dropdown', 'cw-dropdown-item'],
+      components: ['ix-dropdown', 'ix-dropdown-item'],
     },
     {
-      components: ['cw-event-list', 'cw-event-list-item'],
+      components: ['ix-event-list', 'ix-event-list-item'],
     },
     {
-      components: ['cw-expanding-search'],
+      components: ['ix-expanding-search'],
     },
     {
-      components: ['cw-filter-chip'],
+      components: ['ix-filter-chip'],
     },
     {
-      components: ['cw-flip-tile', 'cw-flip-tile-content'],
+      components: ['ix-flip-tile', 'ix-flip-tile-content'],
     },
     {
-      components: ['cw-group', 'cw-group-dropdown-item', 'cw-group-item'],
+      components: ['ix-group', 'ix-group-dropdown-item', 'ix-group-item'],
     },
     {
-      components: ['cw-icon'],
+      components: ['ix-icon'],
     },
     {
-      components: ['cw-icon-button'],
+      components: ['ix-icon-button'],
     },
     {
-      components: ['cw-input-group'],
+      components: ['ix-input-group'],
     },
     {
-      components: ['cw-map-navigation', 'cw-map-navigation-overlay'],
+      components: ['ix-map-navigation', 'ix-map-navigation-overlay'],
     },
     {
       components: [
-        'cw-menu',
-        'cw-menu-item',
-        'cw-menu-about',
-        'cw-menu-about-item',
-        'cw-menu-about-news',
-        'cw-menu-avatar',
-        'cw-menu-avatar-item',
-        'cw-menu-settings',
-        'cw-menu-settings-item',
+        'ix-menu',
+        'ix-menu-item',
+        'ix-menu-about',
+        'ix-menu-about-item',
+        'ix-menu-about-news',
+        'ix-menu-avatar',
+        'ix-menu-avatar-item',
+        'ix-menu-settings',
+        'ix-menu-settings-item',
       ],
     },
     {
-      components: ['cw-message-bar'],
+      components: ['ix-message-bar'],
     },
     {
-      components: ['cw-modal', 'cw-modal-container'],
+      components: ['ix-modal', 'ix-modal-container'],
     },
     {
-      components: ['cw-pill'],
+      components: ['ix-pill'],
     },
     {
-      components: ['cw-select', 'cw-select-item'],
+      components: ['ix-select', 'ix-select-item'],
     },
     {
-      components: ['cw-spinner'],
+      components: ['ix-spinner'],
     },
     {
-      components: ['cw-split-button', 'cw-split-button-item'],
+      components: ['ix-split-button', 'ix-split-button-item'],
     },
     {
-      components: ['cw-tile'],
+      components: ['ix-tile'],
     },
     {
-      components: ['cw-toast', 'cw-toast-container'],
+      components: ['ix-toast', 'ix-toast-container'],
     },
     {
-      components: ['cw-toggle'],
+      components: ['ix-toggle'],
     },
     {
-      components: ['cw-tree', 'cw-tree-item'],
+      components: ['ix-tree', 'ix-tree-item'],
     },
     {
-      components: ['cw-upload'],
+      components: ['ix-upload'],
     },
   ],
   extras: {
     appendChildSlotFix: true,
     slotChildNodesFix: true,
   },
-  namespace: 'core-ui-core',
-  globalStyle: './scss/v7/core-ui.scss',
-  // globalStyle: 'scss/core-ui.scss',
+  namespace: 'siemens-ix',
+  globalStyle: './scss/ix.scss',
   minifyCss: false,
   plugins: [
     sass({
-      includePaths: ['./scss/v7', './scss'],
+      includePaths: ['./scss'],
     }),
     postcss({
       plugins: [autoprefixer()],
@@ -148,7 +147,7 @@ export const config: Config = {
       copy: [
         {
           src: '../scss/fonts',
-          dest: '../core-ui-core/fonts',
+          dest: '../siemens-ix/fonts',
         },
       ],
     },
diff --git a/packages/documentation/docs/auto-generated/cw-animated-tab/events.md b/packages/documentation/docs/auto-generated/ix-animated-tab/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-animated-tab/events.md
rename to packages/documentation/docs/auto-generated/ix-animated-tab/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-animated-tab/props.md b/packages/documentation/docs/auto-generated/ix-animated-tab/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-animated-tab/props.md
rename to packages/documentation/docs/auto-generated/ix-animated-tab/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-animated-tabs/events.md b/packages/documentation/docs/auto-generated/ix-animated-tabs/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-animated-tabs/events.md
rename to packages/documentation/docs/auto-generated/ix-animated-tabs/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-animated-tabs/props.md b/packages/documentation/docs/auto-generated/ix-animated-tabs/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-animated-tabs/props.md
rename to packages/documentation/docs/auto-generated/ix-animated-tabs/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-application-header/events.md b/packages/documentation/docs/auto-generated/ix-application-header/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-application-header/events.md
rename to packages/documentation/docs/auto-generated/ix-application-header/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-application-header/props.md b/packages/documentation/docs/auto-generated/ix-application-header/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-application-header/props.md
rename to packages/documentation/docs/auto-generated/ix-application-header/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-basic-navigation/events.md b/packages/documentation/docs/auto-generated/ix-basic-navigation/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-basic-navigation/events.md
rename to packages/documentation/docs/auto-generated/ix-basic-navigation/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-basic-navigation/props.md b/packages/documentation/docs/auto-generated/ix-basic-navigation/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-basic-navigation/props.md
rename to packages/documentation/docs/auto-generated/ix-basic-navigation/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-blind/events.md b/packages/documentation/docs/auto-generated/ix-blind/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-blind/events.md
rename to packages/documentation/docs/auto-generated/ix-blind/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-blind/props.md b/packages/documentation/docs/auto-generated/ix-blind/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-blind/props.md
rename to packages/documentation/docs/auto-generated/ix-blind/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-breadcrumb-item/events.md b/packages/documentation/docs/auto-generated/ix-breadcrumb-item/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-breadcrumb-item/events.md
rename to packages/documentation/docs/auto-generated/ix-breadcrumb-item/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-breadcrumb-item/props.md b/packages/documentation/docs/auto-generated/ix-breadcrumb-item/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-breadcrumb-item/props.md
rename to packages/documentation/docs/auto-generated/ix-breadcrumb-item/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-breadcrumb/events.md b/packages/documentation/docs/auto-generated/ix-breadcrumb/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-breadcrumb/events.md
rename to packages/documentation/docs/auto-generated/ix-breadcrumb/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-breadcrumb/props.md b/packages/documentation/docs/auto-generated/ix-breadcrumb/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-breadcrumb/props.md
rename to packages/documentation/docs/auto-generated/ix-breadcrumb/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-button/events.md b/packages/documentation/docs/auto-generated/ix-button/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-button/events.md
rename to packages/documentation/docs/auto-generated/ix-button/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-button/props.md b/packages/documentation/docs/auto-generated/ix-button/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-button/props.md
rename to packages/documentation/docs/auto-generated/ix-button/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-category-filter/events.md b/packages/documentation/docs/auto-generated/ix-category-filter/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-category-filter/events.md
rename to packages/documentation/docs/auto-generated/ix-category-filter/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-category-filter/props.md b/packages/documentation/docs/auto-generated/ix-category-filter/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-category-filter/props.md
rename to packages/documentation/docs/auto-generated/ix-category-filter/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-chip/events.md b/packages/documentation/docs/auto-generated/ix-chip/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-chip/events.md
rename to packages/documentation/docs/auto-generated/ix-chip/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-chip/props.md b/packages/documentation/docs/auto-generated/ix-chip/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-chip/props.md
rename to packages/documentation/docs/auto-generated/ix-chip/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-counter-pill/events.md b/packages/documentation/docs/auto-generated/ix-counter-pill/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-counter-pill/events.md
rename to packages/documentation/docs/auto-generated/ix-counter-pill/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-counter-pill/props.md b/packages/documentation/docs/auto-generated/ix-counter-pill/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-counter-pill/props.md
rename to packages/documentation/docs/auto-generated/ix-counter-pill/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-date-picker/events.md b/packages/documentation/docs/auto-generated/ix-date-picker/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-date-picker/events.md
rename to packages/documentation/docs/auto-generated/ix-date-picker/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-date-picker/props.md b/packages/documentation/docs/auto-generated/ix-date-picker/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-date-picker/props.md
rename to packages/documentation/docs/auto-generated/ix-date-picker/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-date-time-card/events.md b/packages/documentation/docs/auto-generated/ix-date-time-card/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-date-time-card/events.md
rename to packages/documentation/docs/auto-generated/ix-date-time-card/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-date-time-card/props.md b/packages/documentation/docs/auto-generated/ix-date-time-card/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-date-time-card/props.md
rename to packages/documentation/docs/auto-generated/ix-date-time-card/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-datetime-picker/events.md b/packages/documentation/docs/auto-generated/ix-datetime-picker/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-datetime-picker/events.md
rename to packages/documentation/docs/auto-generated/ix-datetime-picker/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-datetime-picker/props.md b/packages/documentation/docs/auto-generated/ix-datetime-picker/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-datetime-picker/props.md
rename to packages/documentation/docs/auto-generated/ix-datetime-picker/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-drawer/events.md b/packages/documentation/docs/auto-generated/ix-drawer/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-drawer/events.md
rename to packages/documentation/docs/auto-generated/ix-drawer/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-drawer/props.md b/packages/documentation/docs/auto-generated/ix-drawer/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-drawer/props.md
rename to packages/documentation/docs/auto-generated/ix-drawer/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-dropdown-item/events.md b/packages/documentation/docs/auto-generated/ix-dropdown-item/events.md
similarity index 72%
rename from packages/documentation/docs/auto-generated/cw-dropdown-item/events.md
rename to packages/documentation/docs/auto-generated/ix-dropdown-item/events.md
index 12dde162f78..6fd514dea3f 100644
--- a/packages/documentation/docs/auto-generated/cw-dropdown-item/events.md
+++ b/packages/documentation/docs/auto-generated/ix-dropdown-item/events.md
@@ -1,3 +1,3 @@
 | Name       | Description                   | Attribute        | Detail |
 |------------|-------------------------------|------------------|--------|
-|itemClick| Click on item | `HTMLCwDropdownItemElement`
+|itemClick| Click on item | `HTMLIxDropdownItemElement`
diff --git a/packages/documentation/docs/auto-generated/cw-dropdown-item/props.md b/packages/documentation/docs/auto-generated/ix-dropdown-item/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-dropdown-item/props.md
rename to packages/documentation/docs/auto-generated/ix-dropdown-item/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-dropdown/events.md b/packages/documentation/docs/auto-generated/ix-dropdown/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-dropdown/events.md
rename to packages/documentation/docs/auto-generated/ix-dropdown/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-dropdown/props.md b/packages/documentation/docs/auto-generated/ix-dropdown/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-dropdown/props.md
rename to packages/documentation/docs/auto-generated/ix-dropdown/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-event-list-item/events.md b/packages/documentation/docs/auto-generated/ix-event-list-item/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-event-list-item/events.md
rename to packages/documentation/docs/auto-generated/ix-event-list-item/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-event-list-item/props.md b/packages/documentation/docs/auto-generated/ix-event-list-item/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-event-list-item/props.md
rename to packages/documentation/docs/auto-generated/ix-event-list-item/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-event-list/events.md b/packages/documentation/docs/auto-generated/ix-event-list/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-event-list/events.md
rename to packages/documentation/docs/auto-generated/ix-event-list/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-event-list/props.md b/packages/documentation/docs/auto-generated/ix-event-list/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-event-list/props.md
rename to packages/documentation/docs/auto-generated/ix-event-list/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-expanding-search/events.md b/packages/documentation/docs/auto-generated/ix-expanding-search/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-expanding-search/events.md
rename to packages/documentation/docs/auto-generated/ix-expanding-search/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-expanding-search/props.md b/packages/documentation/docs/auto-generated/ix-expanding-search/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-expanding-search/props.md
rename to packages/documentation/docs/auto-generated/ix-expanding-search/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-filter-chip/events.md b/packages/documentation/docs/auto-generated/ix-filter-chip/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-filter-chip/events.md
rename to packages/documentation/docs/auto-generated/ix-filter-chip/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-filter-chip/props.md b/packages/documentation/docs/auto-generated/ix-filter-chip/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-filter-chip/props.md
rename to packages/documentation/docs/auto-generated/ix-filter-chip/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-flip-tile-content/events.md b/packages/documentation/docs/auto-generated/ix-flip-tile-content/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-flip-tile-content/events.md
rename to packages/documentation/docs/auto-generated/ix-flip-tile-content/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-flip-tile-content/props.md b/packages/documentation/docs/auto-generated/ix-flip-tile-content/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-flip-tile-content/props.md
rename to packages/documentation/docs/auto-generated/ix-flip-tile-content/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-flip-tile/events.md b/packages/documentation/docs/auto-generated/ix-flip-tile/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-flip-tile/events.md
rename to packages/documentation/docs/auto-generated/ix-flip-tile/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-flip-tile/props.md b/packages/documentation/docs/auto-generated/ix-flip-tile/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-flip-tile/props.md
rename to packages/documentation/docs/auto-generated/ix-flip-tile/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-group-dropdown-item/events.md b/packages/documentation/docs/auto-generated/ix-group-dropdown-item/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-group-dropdown-item/events.md
rename to packages/documentation/docs/auto-generated/ix-group-dropdown-item/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-group-dropdown-item/props.md b/packages/documentation/docs/auto-generated/ix-group-dropdown-item/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-group-dropdown-item/props.md
rename to packages/documentation/docs/auto-generated/ix-group-dropdown-item/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-group-item/events.md b/packages/documentation/docs/auto-generated/ix-group-item/events.md
similarity index 70%
rename from packages/documentation/docs/auto-generated/cw-group-item/events.md
rename to packages/documentation/docs/auto-generated/ix-group-item/events.md
index 17ccb5ffdc4..e6727e3b2f8 100644
--- a/packages/documentation/docs/auto-generated/cw-group-item/events.md
+++ b/packages/documentation/docs/auto-generated/ix-group-item/events.md
@@ -1,3 +1,3 @@
 | Name       | Description                   | Attribute        | Detail |
 |------------|-------------------------------|------------------|--------|
-|selectedChanged| Selection changed | `HTMLCwGroupItemElement`
+|selectedChanged| Selection changed | `HTMLIxGroupItemElement`
diff --git a/packages/documentation/docs/auto-generated/cw-group-item/props.md b/packages/documentation/docs/auto-generated/ix-group-item/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-group-item/props.md
rename to packages/documentation/docs/auto-generated/ix-group-item/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-group/events.md b/packages/documentation/docs/auto-generated/ix-group/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-group/events.md
rename to packages/documentation/docs/auto-generated/ix-group/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-group/props.md b/packages/documentation/docs/auto-generated/ix-group/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-group/props.md
rename to packages/documentation/docs/auto-generated/ix-group/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-icon-button/events.md b/packages/documentation/docs/auto-generated/ix-icon-button/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-icon-button/events.md
rename to packages/documentation/docs/auto-generated/ix-icon-button/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-icon-button/props.md b/packages/documentation/docs/auto-generated/ix-icon-button/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-icon-button/props.md
rename to packages/documentation/docs/auto-generated/ix-icon-button/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-icon/events.md b/packages/documentation/docs/auto-generated/ix-icon/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-icon/events.md
rename to packages/documentation/docs/auto-generated/ix-icon/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-icon/props.md b/packages/documentation/docs/auto-generated/ix-icon/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-icon/props.md
rename to packages/documentation/docs/auto-generated/ix-icon/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-input-group/events.md b/packages/documentation/docs/auto-generated/ix-input-group/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-input-group/events.md
rename to packages/documentation/docs/auto-generated/ix-input-group/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-input-group/props.md b/packages/documentation/docs/auto-generated/ix-input-group/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-input-group/props.md
rename to packages/documentation/docs/auto-generated/ix-input-group/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-map-navigation-overlay/events.md b/packages/documentation/docs/auto-generated/ix-map-navigation-overlay/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-map-navigation-overlay/events.md
rename to packages/documentation/docs/auto-generated/ix-map-navigation-overlay/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-map-navigation-overlay/props.md b/packages/documentation/docs/auto-generated/ix-map-navigation-overlay/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-map-navigation-overlay/props.md
rename to packages/documentation/docs/auto-generated/ix-map-navigation-overlay/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-map-navigation/events.md b/packages/documentation/docs/auto-generated/ix-map-navigation/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-map-navigation/events.md
rename to packages/documentation/docs/auto-generated/ix-map-navigation/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-map-navigation/props.md b/packages/documentation/docs/auto-generated/ix-map-navigation/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-map-navigation/props.md
rename to packages/documentation/docs/auto-generated/ix-map-navigation/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-about-item/events.md b/packages/documentation/docs/auto-generated/ix-menu-about-item/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-about-item/events.md
rename to packages/documentation/docs/auto-generated/ix-menu-about-item/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-about-item/props.md b/packages/documentation/docs/auto-generated/ix-menu-about-item/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-about-item/props.md
rename to packages/documentation/docs/auto-generated/ix-menu-about-item/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-about-news/events.md b/packages/documentation/docs/auto-generated/ix-menu-about-news/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-about-news/events.md
rename to packages/documentation/docs/auto-generated/ix-menu-about-news/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-about-news/props.md b/packages/documentation/docs/auto-generated/ix-menu-about-news/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-about-news/props.md
rename to packages/documentation/docs/auto-generated/ix-menu-about-news/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-about/events.md b/packages/documentation/docs/auto-generated/ix-menu-about/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-about/events.md
rename to packages/documentation/docs/auto-generated/ix-menu-about/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-about/props.md b/packages/documentation/docs/auto-generated/ix-menu-about/props.md
similarity index 91%
rename from packages/documentation/docs/auto-generated/cw-menu-about/props.md
rename to packages/documentation/docs/auto-generated/ix-menu-about/props.md
index 2a8fe143648..479a6d0a062 100644
--- a/packages/documentation/docs/auto-generated/cw-menu-about/props.md
+++ b/packages/documentation/docs/auto-generated/ix-menu-about/props.md
@@ -1,8 +1,8 @@
 | Name       | Description                   | Attribute        | Type                                      | Default             |
 |------------|-------------------------------|------------------|-------------------------------------------|---------------------|
 |activeTabLabel| Active tab | `active-tab-label` | `string` | `this.i18nImprintLabel` |
-|applicationDescription| Should only be set if you use cw-menu standalone | `application-description` | `string` | `''` |
-|applicationName| Should only be set if you use cw-menu standalone | `application-name` | `string` | `undefined` |
+|applicationDescription| Should only be set if you use ix-menu standalone | `application-description` | `string` | `''` |
+|applicationName| Should only be set if you use ix-menu standalone | `application-name` | `string` | `undefined` |
 |copyrightYears| Copyright | `copyright-years` | `string` | `'1996 - 2022'` |
 |i18nCookieNoticeLabel|  | `i-1-8n-cookie-notice-label` | `string` | `'Cookie Notice'` |
 |i18nCorporateLabel|  | `i-1-8n-corporate-label` | `string` | `'Corporate Information'` |
diff --git a/packages/documentation/docs/auto-generated/cw-menu-avatar-item/events.md b/packages/documentation/docs/auto-generated/ix-menu-avatar-item/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-avatar-item/events.md
rename to packages/documentation/docs/auto-generated/ix-menu-avatar-item/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-avatar-item/props.md b/packages/documentation/docs/auto-generated/ix-menu-avatar-item/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-avatar-item/props.md
rename to packages/documentation/docs/auto-generated/ix-menu-avatar-item/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-avatar/events.md b/packages/documentation/docs/auto-generated/ix-menu-avatar/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-avatar/events.md
rename to packages/documentation/docs/auto-generated/ix-menu-avatar/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-avatar/props.md b/packages/documentation/docs/auto-generated/ix-menu-avatar/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-avatar/props.md
rename to packages/documentation/docs/auto-generated/ix-menu-avatar/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-item/events.md b/packages/documentation/docs/auto-generated/ix-menu-item/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-item/events.md
rename to packages/documentation/docs/auto-generated/ix-menu-item/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-item/props.md b/packages/documentation/docs/auto-generated/ix-menu-item/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-item/props.md
rename to packages/documentation/docs/auto-generated/ix-menu-item/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-settings-item/events.md b/packages/documentation/docs/auto-generated/ix-menu-settings-item/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-settings-item/events.md
rename to packages/documentation/docs/auto-generated/ix-menu-settings-item/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-settings-item/props.md b/packages/documentation/docs/auto-generated/ix-menu-settings-item/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-settings-item/props.md
rename to packages/documentation/docs/auto-generated/ix-menu-settings-item/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-settings/events.md b/packages/documentation/docs/auto-generated/ix-menu-settings/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-settings/events.md
rename to packages/documentation/docs/auto-generated/ix-menu-settings/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu-settings/props.md b/packages/documentation/docs/auto-generated/ix-menu-settings/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu-settings/props.md
rename to packages/documentation/docs/auto-generated/ix-menu-settings/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu/events.md b/packages/documentation/docs/auto-generated/ix-menu/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-menu/events.md
rename to packages/documentation/docs/auto-generated/ix-menu/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-menu/props.md b/packages/documentation/docs/auto-generated/ix-menu/props.md
similarity index 91%
rename from packages/documentation/docs/auto-generated/cw-menu/props.md
rename to packages/documentation/docs/auto-generated/ix-menu/props.md
index f4d838c9d37..50f2b4bc2da 100644
--- a/packages/documentation/docs/auto-generated/cw-menu/props.md
+++ b/packages/documentation/docs/auto-generated/ix-menu/props.md
@@ -1,7 +1,7 @@
 | Name       | Description                   | Attribute        | Type                                      | Default             |
 |------------|-------------------------------|------------------|-------------------------------------------|---------------------|
-|applicationDescription| Should only be set if you use cw-menu standalone | `application-description` | `string` | `''` |
-|applicationName| Should only be set if you use cw-menu standalone | `application-name` | `string` | `undefined` |
+|applicationDescription| Should only be set if you use ix-menu standalone | `application-description` | `string` | `''` |
+|applicationName| Should only be set if you use ix-menu standalone | `application-name` | `string` | `undefined` |
 |enableMapExpand| Internal | `enable-map-expand` | `boolean` | `false` |
 |enableSettings| Is settings tab is visible | `enable-settings` | `boolean` | `true` |
 |enableToggleTheme|  | `enable-toggle-theme` | `boolean` | `false` |
diff --git a/packages/documentation/docs/auto-generated/cw-message-bar/events.md b/packages/documentation/docs/auto-generated/ix-message-bar/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-message-bar/events.md
rename to packages/documentation/docs/auto-generated/ix-message-bar/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-message-bar/props.md b/packages/documentation/docs/auto-generated/ix-message-bar/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-message-bar/props.md
rename to packages/documentation/docs/auto-generated/ix-message-bar/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-modal-container/events.md b/packages/documentation/docs/auto-generated/ix-modal-container/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-modal-container/events.md
rename to packages/documentation/docs/auto-generated/ix-modal-container/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-modal-container/props.md b/packages/documentation/docs/auto-generated/ix-modal-container/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-modal-container/props.md
rename to packages/documentation/docs/auto-generated/ix-modal-container/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-modal-example/events.md b/packages/documentation/docs/auto-generated/ix-modal-example/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-modal-example/events.md
rename to packages/documentation/docs/auto-generated/ix-modal-example/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-modal-example/props.md b/packages/documentation/docs/auto-generated/ix-modal-example/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-modal-example/props.md
rename to packages/documentation/docs/auto-generated/ix-modal-example/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-modal/events.md b/packages/documentation/docs/auto-generated/ix-modal/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-modal/events.md
rename to packages/documentation/docs/auto-generated/ix-modal/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-modal/props.md b/packages/documentation/docs/auto-generated/ix-modal/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-modal/props.md
rename to packages/documentation/docs/auto-generated/ix-modal/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-pill/events.md b/packages/documentation/docs/auto-generated/ix-pill/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-pill/events.md
rename to packages/documentation/docs/auto-generated/ix-pill/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-pill/props.md b/packages/documentation/docs/auto-generated/ix-pill/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-pill/props.md
rename to packages/documentation/docs/auto-generated/ix-pill/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-select-item/events.md b/packages/documentation/docs/auto-generated/ix-select-item/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-select-item/events.md
rename to packages/documentation/docs/auto-generated/ix-select-item/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-select-item/props.md b/packages/documentation/docs/auto-generated/ix-select-item/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-select-item/props.md
rename to packages/documentation/docs/auto-generated/ix-select-item/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-select/events.md b/packages/documentation/docs/auto-generated/ix-select/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-select/events.md
rename to packages/documentation/docs/auto-generated/ix-select/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-select/props.md b/packages/documentation/docs/auto-generated/ix-select/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-select/props.md
rename to packages/documentation/docs/auto-generated/ix-select/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-spinner/events.md b/packages/documentation/docs/auto-generated/ix-spinner/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-spinner/events.md
rename to packages/documentation/docs/auto-generated/ix-spinner/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-spinner/props.md b/packages/documentation/docs/auto-generated/ix-spinner/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-spinner/props.md
rename to packages/documentation/docs/auto-generated/ix-spinner/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-split-button-item/events.md b/packages/documentation/docs/auto-generated/ix-split-button-item/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-split-button-item/events.md
rename to packages/documentation/docs/auto-generated/ix-split-button-item/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-split-button-item/props.md b/packages/documentation/docs/auto-generated/ix-split-button-item/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-split-button-item/props.md
rename to packages/documentation/docs/auto-generated/ix-split-button-item/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-split-button/events.md b/packages/documentation/docs/auto-generated/ix-split-button/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-split-button/events.md
rename to packages/documentation/docs/auto-generated/ix-split-button/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-split-button/props.md b/packages/documentation/docs/auto-generated/ix-split-button/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-split-button/props.md
rename to packages/documentation/docs/auto-generated/ix-split-button/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-tab-item/events.md b/packages/documentation/docs/auto-generated/ix-tab-item/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-tab-item/events.md
rename to packages/documentation/docs/auto-generated/ix-tab-item/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-tab-item/props.md b/packages/documentation/docs/auto-generated/ix-tab-item/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-tab-item/props.md
rename to packages/documentation/docs/auto-generated/ix-tab-item/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-tabs/events.md b/packages/documentation/docs/auto-generated/ix-tabs/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-tabs/events.md
rename to packages/documentation/docs/auto-generated/ix-tabs/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-tabs/props.md b/packages/documentation/docs/auto-generated/ix-tabs/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-tabs/props.md
rename to packages/documentation/docs/auto-generated/ix-tabs/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-tile/events.md b/packages/documentation/docs/auto-generated/ix-tile/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-tile/events.md
rename to packages/documentation/docs/auto-generated/ix-tile/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-tile/props.md b/packages/documentation/docs/auto-generated/ix-tile/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-tile/props.md
rename to packages/documentation/docs/auto-generated/ix-tile/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-time-picker/events.md b/packages/documentation/docs/auto-generated/ix-time-picker/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-time-picker/events.md
rename to packages/documentation/docs/auto-generated/ix-time-picker/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-time-picker/props.md b/packages/documentation/docs/auto-generated/ix-time-picker/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-time-picker/props.md
rename to packages/documentation/docs/auto-generated/ix-time-picker/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-toast-container/events.md b/packages/documentation/docs/auto-generated/ix-toast-container/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-toast-container/events.md
rename to packages/documentation/docs/auto-generated/ix-toast-container/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-toast-container/props.md b/packages/documentation/docs/auto-generated/ix-toast-container/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-toast-container/props.md
rename to packages/documentation/docs/auto-generated/ix-toast-container/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-toast/events.md b/packages/documentation/docs/auto-generated/ix-toast/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-toast/events.md
rename to packages/documentation/docs/auto-generated/ix-toast/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-toast/props.md b/packages/documentation/docs/auto-generated/ix-toast/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-toast/props.md
rename to packages/documentation/docs/auto-generated/ix-toast/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-toggle/events.md b/packages/documentation/docs/auto-generated/ix-toggle/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-toggle/events.md
rename to packages/documentation/docs/auto-generated/ix-toggle/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-toggle/props.md b/packages/documentation/docs/auto-generated/ix-toggle/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-toggle/props.md
rename to packages/documentation/docs/auto-generated/ix-toggle/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-tree-item/events.md b/packages/documentation/docs/auto-generated/ix-tree-item/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-tree-item/events.md
rename to packages/documentation/docs/auto-generated/ix-tree-item/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-tree-item/props.md b/packages/documentation/docs/auto-generated/ix-tree-item/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-tree-item/props.md
rename to packages/documentation/docs/auto-generated/ix-tree-item/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-tree/events.md b/packages/documentation/docs/auto-generated/ix-tree/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-tree/events.md
rename to packages/documentation/docs/auto-generated/ix-tree/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-tree/props.md b/packages/documentation/docs/auto-generated/ix-tree/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-tree/props.md
rename to packages/documentation/docs/auto-generated/ix-tree/props.md
diff --git a/packages/documentation/docs/auto-generated/cw-upload/events.md b/packages/documentation/docs/auto-generated/ix-upload/events.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-upload/events.md
rename to packages/documentation/docs/auto-generated/ix-upload/events.md
diff --git a/packages/documentation/docs/auto-generated/cw-upload/props.md b/packages/documentation/docs/auto-generated/ix-upload/props.md
similarity index 100%
rename from packages/documentation/docs/auto-generated/cw-upload/props.md
rename to packages/documentation/docs/auto-generated/ix-upload/props.md
diff --git a/packages/documentation/docs/auto-generated/previews/angular/button-group.md b/packages/documentation/docs/auto-generated/previews/angular/button-group.md
index 46d84e0f33d..1f099ead6df 100644
--- a/packages/documentation/docs/auto-generated/previews/angular/button-group.md
+++ b/packages/documentation/docs/auto-generated/previews/angular/button-group.md
@@ -9,9 +9,9 @@ import { Component } from '@angular/core';
   selector: 'app-button-group',
   template: `
     <div class="btn-group">
-      <cw-button variant="Primary" outline> Left </cw-button>
-      <cw-button variant="Primary">Middle</cw-button>
-      <cw-button variant="Primary" outline> Right </cw-button>
+      <ix-button variant="Primary" outline> Left </ix-button>
+      <ix-button variant="Primary">Middle</ix-button>
+      <ix-button variant="Primary" outline> Right </ix-button>
     </div>
   `,
 })
diff --git a/packages/documentation/docs/auto-generated/previews/angular/buttons.md b/packages/documentation/docs/auto-generated/previews/angular/buttons.md
index 45b501b0bf5..aebf19f8127 100644
--- a/packages/documentation/docs/auto-generated/previews/angular/buttons.md
+++ b/packages/documentation/docs/auto-generated/previews/angular/buttons.md
@@ -8,10 +8,10 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-buttons',
   template: `
-    <cw-button class="m-1" variant="primary">Webcomponents button</cw-button>
-    <cw-button class="m-1" variant="secondary">Webcomponents button</cw-button>
-    <cw-button class="m-1" outline>Webcomponents button</cw-button>
-    <cw-button class="m-1" invisible>Webcomponents button</cw-button>
+    <ix-button class="m-1" variant="primary">Webcomponents button</ix-button>
+    <ix-button class="m-1" variant="secondary">Webcomponents button</ix-button>
+    <ix-button class="m-1" outline>Webcomponents button</ix-button>
+    <ix-button class="m-1" invisible>Webcomponents button</ix-button>
   `,
 })
 export class Buttons {}
diff --git a/packages/documentation/docs/auto-generated/previews/react/basic-navigation-without-header.md b/packages/documentation/docs/auto-generated/previews/react/basic-navigation-without-header.md
index 65d3b815e0e..0c4353135c0 100644
--- a/packages/documentation/docs/auto-generated/previews/react/basic-navigation-without-header.md
+++ b/packages/documentation/docs/auto-generated/previews/react/basic-navigation-without-header.md
@@ -3,17 +3,17 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { CwBasicNavigation, CwMenu, CwMenuItem } from '@siemens/ix-react';
+import { IxBasicNavigation, IxMenu, IxMenuItem } from '@siemens/ix-react';
 import React from 'react';
 
 export const BasicNavigation: React.FC = () => {
   return (
-    <CwBasicNavigation hideHeader>
-      <CwMenu>
-        <CwMenuItem>Item 1</CwMenuItem>
-        <CwMenuItem>Item 2</CwMenuItem>
-      </CwMenu>
-    </CwBasicNavigation>
+    <IxBasicNavigation hideHeader>
+      <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+      </IxMenu>
+    </IxBasicNavigation>
   );
 };
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/react/basic-navigation.md b/packages/documentation/docs/auto-generated/previews/react/basic-navigation.md
index 3bc40aee32f..8161137c058 100644
--- a/packages/documentation/docs/auto-generated/previews/react/basic-navigation.md
+++ b/packages/documentation/docs/auto-generated/previews/react/basic-navigation.md
@@ -3,17 +3,17 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { CwBasicNavigation, CwMenu, CwMenuItem } from '@siemens/ix-react';
+import { IxBasicNavigation, IxMenu, IxMenuItem } from '@siemens/ix-react';
 import React from 'react';
 
 export const BasicNavigation: React.FC = () => {
   return (
-    <CwBasicNavigation>
-      <CwMenu>
-        <CwMenuItem>Item 1</CwMenuItem>
-        <CwMenuItem>Item 2</CwMenuItem>
-      </CwMenu>
-    </CwBasicNavigation>
+    <IxBasicNavigation>
+      <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+      </IxMenu>
+    </IxBasicNavigation>
   );
 };
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/react/button-group.md b/packages/documentation/docs/auto-generated/previews/react/button-group.md
index 4954990143d..e7935445f85 100644
--- a/packages/documentation/docs/auto-generated/previews/react/button-group.md
+++ b/packages/documentation/docs/auto-generated/previews/react/button-group.md
@@ -4,19 +4,19 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { CwButton } from '@siemens/ix-react';
+import { IxButton } from '@siemens/ix-react';
 import React from 'react';
 
 export const ButtonGroup: React.FC = () => (
   <>
     <div className="btn-group">
-      <CwButton variant="Primary" outline>
+      <IxButton variant="Primary" outline>
         Left
-      </CwButton>
-      <CwButton variant="Primary">Middle</CwButton>
-      <CwButton variant="Primary" outline>
+      </IxButton>
+      <IxButton variant="Primary">Middle</IxButton>
+      <IxButton variant="Primary" outline>
         Right
-      </CwButton>
+      </IxButton>
     </div>
   </>
 );
diff --git a/packages/documentation/docs/auto-generated/previews/react/buttons.md b/packages/documentation/docs/auto-generated/previews/react/buttons.md
index 6b04942fa27..665979b8cdc 100644
--- a/packages/documentation/docs/auto-generated/previews/react/buttons.md
+++ b/packages/documentation/docs/auto-generated/previews/react/buttons.md
@@ -3,24 +3,24 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { CwButton } from '@siemens/ix-react';
+import { IxButton } from '@siemens/ix-react';
 import React from 'react';
 
 export const Buttons: React.FC = () => {
   return (
     <>
-      <CwButton className="m-1" variant="Primary">
+      <IxButton className="m-1" variant="Primary">
         Webcomponents button
-      </CwButton>
-      <CwButton className="m-1" variant="Secondary">
+      </IxButton>
+      <IxButton className="m-1" variant="Secondary">
         Webcomponents button
-      </CwButton>
-      <CwButton className="m-1" outline>
+      </IxButton>
+      <IxButton className="m-1" outline>
         Webcomponents button
-      </CwButton>
-      <CwButton className="m-1" invisible>
+      </IxButton>
+      <IxButton className="m-1" invisible>
         Webcomponents button
-      </CwButton>
+      </IxButton>
     </>
   );
 };
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/about-and-legal.md b/packages/documentation/docs/auto-generated/previews/web-component/about-and-legal.md
index c50e728eab0..73a1c822fd9 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/about-and-legal.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/about-and-legal.md
@@ -1,18 +1,18 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/about-and-legal.html -->
 ```html
-<cw-basic-navigation>
-  <cw-menu>
-    <cw-menu-about>
-      <cw-menu-about-item label="Tab 1">Content 1</cw-menu-about-item>
-      <cw-menu-about-item label="Tab 2">Content 2</cw-menu-about-item>
-    </cw-menu-about>
-  </cw-menu>
-</cw-basic-navigation>
+<ix-basic-navigation>
+  <ix-menu>
+    <ix-menu-about>
+      <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
+      <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
+    </ix-menu-about>
+  </ix-menu>
+</ix-basic-navigation>
 
 <script>
   (async function () {
-    await window.customElements.whenDefined('cw-menu');
-    const instance = document.querySelector('cw-menu');
+    await window.customElements.whenDefined('ix-menu');
+    const instance = document.querySelector('ix-menu');
     await instance.toggleAbout(true);
   })();
 </script>
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/animated-tabs.md b/packages/documentation/docs/auto-generated/previews/web-component/animated-tabs.md
index 1efa107655a..a2c28e5340f 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/animated-tabs.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/animated-tabs.md
@@ -1,14 +1,14 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/animated-tabs.html -->
 ```html
-<cw-animated-tabs>
-  <cw-animated-tab icon="document">
+<ix-animated-tabs>
+  <ix-animated-tab icon="document">
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr
-  </cw-animated-tab>
-  <cw-animated-tab icon="cut" count="10">
+  </ix-animated-tab>
+  <ix-animated-tab icon="cut" count="10">
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr
-  </cw-animated-tab>
-  <cw-animated-tab icon="star">
+  </ix-animated-tab>
+  <ix-animated-tab icon="star">
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr
-  </cw-animated-tab>
-</cw-animated-tabs>
+  </ix-animated-tab>
+</ix-animated-tabs>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/basic-navigation-without-header.md b/packages/documentation/docs/auto-generated/previews/web-component/basic-navigation-without-header.md
index 7406bff63e3..8272a1beba3 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/basic-navigation-without-header.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/basic-navigation-without-header.md
@@ -1,9 +1,9 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/basic-navigation-without-header.html -->
 ```html
-<cw-basic-navigation hide-header>
-  <cw-menu>
-    <cw-menu-item>Item 1</cw-menu-item>
-    <cw-menu-item>Item 2</cw-menu-item>
-  </cw-menu>
-</cw-basic-navigation>
+<ix-basic-navigation hide-header>
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+</ix-basic-navigation>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/basic-navigation.md b/packages/documentation/docs/auto-generated/previews/web-component/basic-navigation.md
index eac2cf5188c..8a68924a118 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/basic-navigation.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/basic-navigation.md
@@ -1,9 +1,9 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/basic-navigation.html -->
 ```html
-<cw-basic-navigation>
-  <cw-menu>
-    <cw-menu-item>Item 1</cw-menu-item>
-    <cw-menu-item>Item 2</cw-menu-item>
-  </cw-menu>
-</cw-basic-navigation>
+<ix-basic-navigation>
+  <ix-menu>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+  </ix-menu>
+</ix-basic-navigation>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/blind.md b/packages/documentation/docs/auto-generated/previews/web-component/blind.md
index c8b3d59802f..2013fa18647 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/blind.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/blind.md
@@ -1,6 +1,6 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/blind.html -->
 ```html
-<cw-blind label="Example">
+<ix-blind label="Example">
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
   eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
   voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
@@ -10,5 +10,5 @@
   diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
   Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
   sit amet.
-</cw-blind>
+</ix-blind>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/breadcrumb-next-items.md b/packages/documentation/docs/auto-generated/previews/web-component/breadcrumb-next-items.md
index 2ba36381841..eb3e4783d95 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/breadcrumb-next-items.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/breadcrumb-next-items.md
@@ -1,13 +1,13 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/breadcrumb-next-items.html -->
 ```html
-<cw-breadcrumb>
-  <cw-breadcrumb-item label="Item 1"></cw-breadcrumb-item>
-  <cw-breadcrumb-item label="Item 2"></cw-breadcrumb-item>
-  <cw-breadcrumb-item label="Item 3"></cw-breadcrumb-item>
-</cw-breadcrumb>
+<ix-breadcrumb>
+  <ix-breadcrumb-item label="Item 1"></ix-breadcrumb-item>
+  <ix-breadcrumb-item label="Item 2"></ix-breadcrumb-item>
+  <ix-breadcrumb-item label="Item 3"></ix-breadcrumb-item>
+</ix-breadcrumb>
 
 <script>
-  const instance = document.querySelector('cw-breadcrumb');
+  const instance = document.querySelector('ix-breadcrumb');
   instance.nextItems = ['Next Item 1'];
 </script>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/breadcrumb-truncate.md b/packages/documentation/docs/auto-generated/previews/web-component/breadcrumb-truncate.md
index c14160e7aa1..6f3bef139fa 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/breadcrumb-truncate.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/breadcrumb-truncate.md
@@ -1,10 +1,10 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/breadcrumb-truncate.html -->
 ```html
-<cw-breadcrumb visible-item-count="3">
-  <cw-breadcrumb-item label="Item 1"></cw-breadcrumb-item>
-  <cw-breadcrumb-item label="Item 2"></cw-breadcrumb-item>
-  <cw-breadcrumb-item label="Item 3"></cw-breadcrumb-item>
-  <cw-breadcrumb-item label="Item 4"></cw-breadcrumb-item>
-  <cw-breadcrumb-item label="Item 5"></cw-breadcrumb-item>
-</cw-breadcrumb>
+<ix-breadcrumb visible-item-count="3">
+  <ix-breadcrumb-item label="Item 1"></ix-breadcrumb-item>
+  <ix-breadcrumb-item label="Item 2"></ix-breadcrumb-item>
+  <ix-breadcrumb-item label="Item 3"></ix-breadcrumb-item>
+  <ix-breadcrumb-item label="Item 4"></ix-breadcrumb-item>
+  <ix-breadcrumb-item label="Item 5"></ix-breadcrumb-item>
+</ix-breadcrumb>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/breadcrumb.md b/packages/documentation/docs/auto-generated/previews/web-component/breadcrumb.md
index 07b36ca8010..d549de9f9f8 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/breadcrumb.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/breadcrumb.md
@@ -1,8 +1,8 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/breadcrumb.html -->
 ```html
-<cw-breadcrumb>
-  <cw-breadcrumb-item label="Item 1"></cw-breadcrumb-item>
-  <cw-breadcrumb-item label="Item 2"></cw-breadcrumb-item>
-  <cw-breadcrumb-item label="Item 3"></cw-breadcrumb-item>
-</cw-breadcrumb>
+<ix-breadcrumb>
+  <ix-breadcrumb-item label="Item 1"></ix-breadcrumb-item>
+  <ix-breadcrumb-item label="Item 2"></ix-breadcrumb-item>
+  <ix-breadcrumb-item label="Item 3"></ix-breadcrumb-item>
+</ix-breadcrumb>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/button-group.md b/packages/documentation/docs/auto-generated/previews/web-component/button-group.md
index 515ea6f04d4..a17bd1b2f25 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/button-group.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/button-group.md
@@ -1,8 +1,8 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/button-group.html -->
 ```html
 <div class="btn-group">
-  <cw-button outline>Left</cw-button>
-  <cw-button>Middle</cw-button>
-  <cw-button outline>Right</cw-button>
+  <ix-button outline>Left</ix-button>
+  <ix-button>Middle</ix-button>
+  <ix-button outline>Right</ix-button>
 </div>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/button-selected.md b/packages/documentation/docs/auto-generated/previews/web-component/button-selected.md
index 7c6c84b38c7..94e3b28c1c3 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/button-selected.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/button-selected.md
@@ -1,9 +1,9 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/button-selected.html -->
 ```html
-<cw-button class="m-1" variant="Secondary" invisible
-  >Not selected</cw-button
+<ix-button class="m-1" variant="Secondary" invisible
+  >Not selected</ix-button
 >
-<cw-button class="m-1" variant="Secondary" invisible selected
-  >Selected</cw-button
+<ix-button class="m-1" variant="Secondary" invisible selected
+  >Selected</ix-button
 >
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/button-with-icon.md b/packages/documentation/docs/auto-generated/previews/web-component/button-with-icon.md
index 755d9dd2549..0653f701cb7 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/button-with-icon.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/button-with-icon.md
@@ -1,5 +1,5 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/button-with-icon.html -->
 ```html
 
-<cw-icon-button icon="star"> </cw-icon-button>
+<ix-icon-button icon="star"> </ix-icon-button>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/buttons.md b/packages/documentation/docs/auto-generated/previews/web-component/buttons.md
index 52aaf2cf1de..e1eb9b08bcd 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/buttons.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/buttons.md
@@ -1,7 +1,7 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/buttons.html -->
 ```html
-<cw-button class="m-1" variant="primary">Webcomponents button</cw-button>
-<cw-button class="m-1" variant="secondary">Webcomponents button</cw-button>
-<cw-button class="m-1" outline>Webcomponents button</cw-button>
-<cw-button class="m-1" invisible>Webcomponents button</cw-button>
+<ix-button class="m-1" variant="primary">Webcomponents button</ix-button>
+<ix-button class="m-1" variant="secondary">Webcomponents button</ix-button>
+<ix-button class="m-1" outline>Webcomponents button</ix-button>
+<ix-button class="m-1" invisible>Webcomponents button</ix-button>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/category-filter-suggestions.md b/packages/documentation/docs/auto-generated/previews/web-component/category-filter-suggestions.md
index abecc7dc884..2b5239ff4b7 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/category-filter-suggestions.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/category-filter-suggestions.md
@@ -1,8 +1,8 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/category-filter-suggestions.html -->
 ```html
-<cw-category-filter placeholder="Filter by"></cw-category-filter>
+<ix-category-filter placeholder="Filter by"></ix-category-filter>
 <script>
-  const categoryFilter = document.querySelector('cw-category-filter');
+  const categoryFilter = document.querySelector('ix-category-filter');
   categoryFilter.suggestions = ['Item 1', 'Item 2'];
 </script>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/category-filter.md b/packages/documentation/docs/auto-generated/previews/web-component/category-filter.md
index ac876d0e195..522ca7c4412 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/category-filter.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/category-filter.md
@@ -1,6 +1,6 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/category-filter.html -->
 ```html
-<cw-category-filter placeholder="Filter by"></cw-category-filter>
+<ix-category-filter placeholder="Filter by"></ix-category-filter>
 <script>
   const repeatCategories = false;
   const filterState = {
@@ -24,7 +24,7 @@
     },
   };
 
-  const categoryFilter = document.querySelector('cw-category-filter');
+  const categoryFilter = document.querySelector('ix-category-filter');
   categoryFilter.repeatCategories = repeatCategories;
   categoryFilter.filterState = filterState;
   categoryFilter.categories = categories;
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/chip.md b/packages/documentation/docs/auto-generated/previews/web-component/chip.md
index 947f3f17a71..6c9e5fb996a 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/chip.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/chip.md
@@ -1,19 +1,19 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/chip.html -->
 ```html
 <div class="example">
-  <cw-chip closable outline> Primary </cw-chip>
-  <cw-chip icon="print">Primary with icon</cw-chip>
-  <cw-chip icon="print" style="width: 10rem" closable> Primary </cw-chip>
+  <ix-chip closable outline> Primary </ix-chip>
+  <ix-chip icon="print">Primary with icon</ix-chip>
+  <ix-chip icon="print" style="width: 10rem" closable> Primary </ix-chip>
 
-  <cw-chip variant="critical" closable outline> Alarm </cw-chip>
-  <cw-chip variant="alarm" icon="print"> Alarm with icon </cw-chip>
-  <cw-chip variant="alarm" icon="print" style="width: 10rem" closable>
+  <ix-chip variant="critical" closable outline> Alarm </ix-chip>
+  <ix-chip variant="alarm" icon="print"> Alarm with icon </ix-chip>
+  <ix-chip variant="alarm" icon="print" style="width: 10rem" closable>
     Alarm
-  </cw-chip>
-  <cw-chip variant="warning" icon="print" style="width: 10rem" closable>
+  </ix-chip>
+  <ix-chip variant="warning" icon="print" style="width: 10rem" closable>
     Alarm
-  </cw-chip>
-  <cw-chip
+  </ix-chip>
+  <ix-chip
     background="purple"
     color="green"
     variant="custom"
@@ -22,6 +22,6 @@
     closable
   >
     Custom
-  </cw-chip>
+  </ix-chip>
 </div>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/datepicker.md b/packages/documentation/docs/auto-generated/previews/web-component/datepicker.md
index af22c8e93dc..7e36afce9b9 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/datepicker.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/datepicker.md
@@ -1,4 +1,4 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/datepicker.html -->
 ```html
-<cw-date-picker style="display: block; width: 25rem"></cw-date-picker>
+<ix-date-picker style="display: block; width: 25rem"></ix-date-picker>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/datetimepicker.md b/packages/documentation/docs/auto-generated/previews/web-component/datetimepicker.md
index 7d04ed347cb..2245755eb6a 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/datetimepicker.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/datetimepicker.md
@@ -1,4 +1,6 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/datetimepicker.html -->
 ```html
-<cw-date-time-picker></cw-date-time-picker>
+<ix-datetime-picker
+  style="display: block; width: 35rem; height: 26rem"
+></ix-datetime-picker>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/drawer-full-height.md b/packages/documentation/docs/auto-generated/previews/web-component/drawer-full-height.md
index d24955603af..2205e94bd5b 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/drawer-full-height.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/drawer-full-height.md
@@ -1,20 +1,20 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/drawer-full-height.html -->
 ```html
 
-<cw-drawer>
+<ix-drawer>
   <span>Some content of drawer</span>
-</cw-drawer>
+</ix-drawer>
 
-<cw-button>Toggle drawer</cw-button>
+<ix-button>Toggle drawer</ix-button>
 
 <script>
   (async function () {
-    await window.customElements.whenDefined('cw-drawer');
-    const drawer = document.querySelector('cw-drawer');
+    await window.customElements.whenDefined('ix-drawer');
+    const drawer = document.querySelector('ix-drawer');
     drawer.fullHeight = true;
     drawer.closeOnClickOutside = true;
 
-    const button = document.querySelector('cw-button');
+    const button = document.querySelector('ix-button');
     button.addEventListener('click', () => {
       drawer.show = !drawer.show;
     });
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/drawer.md b/packages/documentation/docs/auto-generated/previews/web-component/drawer.md
index 843251845ad..71416aa53b9 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/drawer.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/drawer.md
@@ -1,21 +1,21 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/drawer.html -->
 ```html
 
-<cw-drawer>
+<ix-drawer>
   <span>Some content of drawer</span>
-</cw-drawer>
+</ix-drawer>
 
-<cw-button>Toggle drawer</cw-button>
+<ix-button>Toggle drawer</ix-button>
 
 <script>
   (async function () {
-    await window.customElements.whenDefined('cw-drawer');
+    await window.customElements.whenDefined('ix-drawer');
 
-    const drawer = document.querySelector('cw-drawer');
+    const drawer = document.querySelector('ix-drawer');
     drawer.fullHeight = false;
     drawer.closeOnClickOutside = true;
 
-    const button = document.querySelector('cw-button');
+    const button = document.querySelector('ix-button');
     button.addEventListener('click', () => {
       drawer.show = !drawer.show;
     });
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/dropdown-icon.md b/packages/documentation/docs/auto-generated/previews/web-component/dropdown-icon.md
index 196e00b2d7f..99c6a2bc3ce 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/dropdown-icon.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/dropdown-icon.md
@@ -1,9 +1,9 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/dropdown-icon.html -->
 ```html
-<cw-button id="iconTriggerId">Open</cw-button>
-<cw-dropdown trigger="iconTriggerId">
-  <cw-dropdown-item icon="star" label="Item 1"></cw-dropdown-item>
-  <cw-dropdown-item icon="document" label="Item 2"></cw-dropdown-item>
-  <cw-dropdown-item icon="bulb" label="Item 3"></cw-dropdown-item>
-</cw-dropdown>
+<ix-button id="iconTriggerId">Open</ix-button>
+<ix-dropdown trigger="iconTriggerId">
+  <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
+  <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
+  <ix-dropdown-item icon="bulb" label="Item 3"></ix-dropdown-item>
+</ix-dropdown>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/dropdown.md b/packages/documentation/docs/auto-generated/previews/web-component/dropdown.md
index dbae9d0a031..88e4b719b24 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/dropdown.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/dropdown.md
@@ -1,9 +1,9 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/dropdown.html -->
 ```html
-<cw-button id="triggerId">Open</cw-button>
-<cw-dropdown trigger="triggerId">
-  <cw-dropdown-item label="Item 1"></cw-dropdown-item>
-  <cw-dropdown-item label="Item 2"></cw-dropdown-item>
-  <cw-dropdown-item label="Item 3"></cw-dropdown-item>
-</cw-dropdown>
+<ix-button id="triggerId">Open</ix-button>
+<ix-dropdown trigger="triggerId">
+  <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+  <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+  <ix-dropdown-item label="Item 3"></ix-dropdown-item>
+</ix-dropdown>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/event-list-compact.md b/packages/documentation/docs/auto-generated/previews/web-component/event-list-compact.md
index 5e920548200..f06946700f9 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/event-list-compact.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/event-list-compact.md
@@ -1,9 +1,9 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/event-list-compact.html -->
 ```html
-<cw-event-list compact>
-  <cw-event-list-item color="color-primary">Text 1</cw-event-list-item>
-  <cw-event-list-item color="color-primary">Text 2</cw-event-list-item>
-  <cw-event-list-item color="color-primary">Text 3</cw-event-list-item>
-  <cw-event-list-item color="color-primary">Text 4</cw-event-list-item>
-</cw-event-list>
+<ix-event-list compact>
+  <ix-event-list-item color="color-primary">Text 1</ix-event-list-item>
+  <ix-event-list-item color="color-primary">Text 2</ix-event-list-item>
+  <ix-event-list-item color="color-primary">Text 3</ix-event-list-item>
+  <ix-event-list-item color="color-primary">Text 4</ix-event-list-item>
+</ix-event-list>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/event-list-custom-item-height.md b/packages/documentation/docs/auto-generated/previews/web-component/event-list-custom-item-height.md
index 0d0f8105566..f04bfbbeaa8 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/event-list-custom-item-height.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/event-list-custom-item-height.md
@@ -1,7 +1,7 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/event-list-custom-item-height.html -->
 ```html
-<cw-event-list item-height="L">
-  <cw-event-list-item color="color-primary">Test 1</cw-event-list-item>
-  <cw-event-list-item color="color-primary">Test 2</cw-event-list-item>
-</cw-event-list>
+<ix-event-list item-height="L">
+  <ix-event-list-item color="color-primary">Test 1</ix-event-list-item>
+  <ix-event-list-item color="color-primary">Test 2</ix-event-list-item>
+</ix-event-list>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/event-list-selected.md b/packages/documentation/docs/auto-generated/previews/web-component/event-list-selected.md
index 5afda54cd08..40eac3b26f3 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/event-list-selected.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/event-list-selected.md
@@ -1,11 +1,11 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/event-list-selected.html -->
 ```html
-<cw-event-list>
-  <cw-event-list-item color="color-primary">Text 1</cw-event-list-item>
-  <cw-event-list-item color="color-primary" selected
-    >Text 2</cw-event-list-item
+<ix-event-list>
+  <ix-event-list-item color="color-primary">Text 1</ix-event-list-item>
+  <ix-event-list-item color="color-primary" selected
+    >Text 2</ix-event-list-item
   >
-  <cw-event-list-item color="color-primary">Text 3</cw-event-list-item>
-  <cw-event-list-item color="color-primary">Text 4</cw-event-list-item>
-</cw-event-list>
+  <ix-event-list-item color="color-primary">Text 3</ix-event-list-item>
+  <ix-event-list-item color="color-primary">Text 4</ix-event-list-item>
+</ix-event-list>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/event-list.md b/packages/documentation/docs/auto-generated/previews/web-component/event-list.md
index e591ce0bcf6..ce9e3c0b68b 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/event-list.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/event-list.md
@@ -1,9 +1,9 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/event-list.html -->
 ```html
-<cw-event-list>
-  <cw-event-list-item color="color-primary">Text 1</cw-event-list-item>
-  <cw-event-list-item color="color-primary">Text 2</cw-event-list-item>
-  <cw-event-list-item color="color-primary">Text 3</cw-event-list-item>
-  <cw-event-list-item color="color-primary">Text 4</cw-event-list-item>
-</cw-event-list>
+<ix-event-list>
+  <ix-event-list-item color="color-primary">Text 1</ix-event-list-item>
+  <ix-event-list-item color="color-primary">Text 2</ix-event-list-item>
+  <ix-event-list-item color="color-primary">Text 3</ix-event-list-item>
+  <ix-event-list-item color="color-primary">Text 4</ix-event-list-item>
+</ix-event-list>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/expanding-search.md b/packages/documentation/docs/auto-generated/previews/web-component/expanding-search.md
index 70f0a0a108a..eee62611016 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/expanding-search.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/expanding-search.md
@@ -1,4 +1,4 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/expanding-search.html -->
 ```html
-<cw-expanding-search placeholder="Search..."></cw-expanding-search>
+<ix-expanding-search placeholder="Search..."></ix-expanding-search>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/flip-tile.md b/packages/documentation/docs/auto-generated/previews/web-component/flip-tile.md
index 9c790a4493f..6ef3aadebbc 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/flip-tile.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/flip-tile.md
@@ -1,66 +1,66 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/flip-tile.html -->
 ```html
 <div class="example">
-  <cw-flip-tile>
+  <ix-flip-tile>
     <div slot="header">Flip header</div>
 
     <div slot="footer">
       <div>Predicted maintenance date</div>
       <div class="d-flex align-items-center">
-        <cw-icon name="info" size="16"></cw-icon>2021-06-22
+        <ix-icon name="info" size="16"></ix-icon>2021-06-22
       </div>
     </div>
 
-    <cw-flip-tile-content> Example 1 </cw-flip-tile-content>
-    <cw-flip-tile-content> Example 2 </cw-flip-tile-content>
-  </cw-flip-tile>
+    <ix-flip-tile-content> Example 1 </ix-flip-tile-content>
+    <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
+  </ix-flip-tile>
 
-  <cw-flip-tile state="Primary">
+  <ix-flip-tile state="Primary">
     <div slot="header">Flip header</div>
     <div slot="footer">
       <div>Predicted maintenance date</div>
       <div class="d-flex align-items-center">
-        <cw-icon name="info" size="16"></cw-icon>2021-06-22
+        <ix-icon name="info" size="16"></ix-icon>2021-06-22
       </div>
     </div>
-    <cw-flip-tile-content> Example 1 </cw-flip-tile-content>
-    <cw-flip-tile-content> Example 2 </cw-flip-tile-content>
-  </cw-flip-tile>
+    <ix-flip-tile-content> Example 1 </ix-flip-tile-content>
+    <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
+  </ix-flip-tile>
 
-  <cw-flip-tile state="Info">
+  <ix-flip-tile state="Info">
     <div slot="header">Flip header</div>
     <div slot="footer">
       <div>Predicted maintenance date</div>
       <div class="d-flex align-items-center">
-        <cw-icon name="info" size="16"></cw-icon>2021-06-22
+        <ix-icon name="info" size="16"></ix-icon>2021-06-22
       </div>
     </div>
-    <cw-flip-tile-content> Example 1 </cw-flip-tile-content>
-    <cw-flip-tile-content> Example 2 </cw-flip-tile-content>
-  </cw-flip-tile>
+    <ix-flip-tile-content> Example 1 </ix-flip-tile-content>
+    <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
+  </ix-flip-tile>
 
-  <cw-flip-tile state="Warning">
+  <ix-flip-tile state="Warning">
     <div slot="header">Flip header</div>
     <div slot="footer">
       <div>Predicted maintenance date</div>
       <div class="d-flex align-items-center">
-        <cw-icon name="info" size="16"></cw-icon>2021-06-22
+        <ix-icon name="info" size="16"></ix-icon>2021-06-22
       </div>
     </div>
-    <cw-flip-tile-content> Example 1 </cw-flip-tile-content>
-    <cw-flip-tile-content> Example 2 </cw-flip-tile-content>
-  </cw-flip-tile>
+    <ix-flip-tile-content> Example 1 </ix-flip-tile-content>
+    <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
+  </ix-flip-tile>
 
-  <cw-flip-tile state="Alarm">
+  <ix-flip-tile state="Alarm">
     <div slot="header">Flip header</div>
     <div slot="footer">
       <div>Predicted maintenance date</div>
       <div class="d-flex align-items-center">
-        <cw-icon name="info" size="16"></cw-icon>2021-06-22
+        <ix-icon name="info" size="16"></ix-icon>2021-06-22
       </div>
     </div>
-    <cw-flip-tile-content> Example 1 </cw-flip-tile-content>
-    <cw-flip-tile-content> Example 2 </cw-flip-tile-content>
-  </cw-flip-tile>
+    <ix-flip-tile-content> Example 1 </ix-flip-tile-content>
+    <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
+  </ix-flip-tile>
 </div>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/group-context-menu.md b/packages/documentation/docs/auto-generated/previews/web-component/group-context-menu.md
index 3b9025ab5f4..d5a4e271575 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/group-context-menu.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/group-context-menu.md
@@ -1,12 +1,12 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/group-context-menu.html -->
 ```html
-<cw-group header="Header text" sub-header="Subheader text">
+<ix-group header="Header text" sub-header="Subheader text">
   <div slot="dropdown">
-    <cw-group-dropdown-item label="Item 1"></cw-group-dropdown-item>
-    <cw-group-dropdown-item label="Item 2"></cw-group-dropdown-item>
+    <ix-group-dropdown-item label="Item 1"></ix-group-dropdown-item>
+    <ix-group-dropdown-item label="Item 2"></ix-group-dropdown-item>
   </div>
-  <cw-group-item text="Example text 1"></cw-group-item>
-  <cw-group-item text="Example text 2"></cw-group-item>
-  <cw-group-item text="Example text 3"></cw-group-item>
-</cw-group>
+  <ix-group-item text="Example text 1"></ix-group-item>
+  <ix-group-item text="Example text 2"></ix-group-item>
+  <ix-group-item text="Example text 3"></ix-group-item>
+</ix-group>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/group-custom-entry.md b/packages/documentation/docs/auto-generated/previews/web-component/group-custom-entry.md
index 96af244f89a..f75edac012e 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/group-custom-entry.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/group-custom-entry.md
@@ -1,8 +1,8 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/group-custom-entry.html -->
 ```html
-<cw-group header="Header text" sub-header="Subheader text">
-  <cw-group-item text="Example text 1"></cw-group-item>
-  <cw-group-item text="Example text 2"></cw-group-item>
-  <cw-group-item><cw-button>Test</cw-button></cw-group-item>
-</cw-group>
+<ix-group header="Header text" sub-header="Subheader text">
+  <ix-group-item text="Example text 1"></ix-group-item>
+  <ix-group-item text="Example text 2"></ix-group-item>
+  <ix-group-item><ix-button>Test</ix-button></ix-group-item>
+</ix-group>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/group-header-suppressed.md b/packages/documentation/docs/auto-generated/previews/web-component/group-header-suppressed.md
index 4ecf790934f..66e2f2cf058 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/group-header-suppressed.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/group-header-suppressed.md
@@ -1,12 +1,12 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/group-header-suppressed.html -->
 ```html
-<cw-group
+<ix-group
   header="Header text"
   sub-header="Subheader text"
   suppress-header-selection
 >
-  <cw-group-item text="Example text 1"></cw-group-item>
-  <cw-group-item text="Example text 2"></cw-group-item>
-  <cw-group-item text="Example text 3"></cw-group-item>
-</cw-group>
+  <ix-group-item text="Example text 1"></ix-group-item>
+  <ix-group-item text="Example text 2"></ix-group-item>
+  <ix-group-item text="Example text 3"></ix-group-item>
+</ix-group>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/group.md b/packages/documentation/docs/auto-generated/previews/web-component/group.md
index ef991d2edc5..12152e6956c 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/group.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/group.md
@@ -1,8 +1,8 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/group.html -->
 ```html
-<cw-group header="Header text" sub-header="Subheader text">
-  <cw-group-item text="Example text 1"></cw-group-item>
-  <cw-group-item text="Example text 2"></cw-group-item>
-  <cw-group-item text="Example text 3"></cw-group-item>
-</cw-group>
+<ix-group header="Header text" sub-header="Subheader text">
+  <ix-group-item text="Example text 1"></ix-group-item>
+  <ix-group-item text="Example text 2"></ix-group-item>
+  <ix-group-item text="Example text 3"></ix-group-item>
+</ix-group>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/input-with-icon.md b/packages/documentation/docs/auto-generated/previews/web-component/input-with-icon.md
index 3d0a4d00458..0ec7999c746 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/input-with-icon.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/input-with-icon.md
@@ -1,11 +1,11 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/input-with-icon.html -->
 ```html
 <form class="needs-validation m-2">
-  <cw-input-group>
+  <ix-input-group>
     <span slot="input-start">Price</span>
     <input type="number" class="form-control" />
     <span slot="input-end">.00</span>
     <span slot="input-end">$</span>
-  </cw-input-group>
+  </ix-input-group>
 </form>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/install.md b/packages/documentation/docs/auto-generated/previews/web-component/install.md
index 261658832e6..92aa5bbd650 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/install.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/install.md
@@ -11,14 +11,14 @@ COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
     </script>
   </head>
   <body class="theme-brand-dark">
-    <cw-button onclick="alert('Button clicked!')">Hello World!</cw-button>
+    <ix-button onclick="alert('Button clicked!')">Hello World!</ix-button>
   </body>
 </html>
 
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/message-bar.md b/packages/documentation/docs/auto-generated/previews/web-component/message-bar.md
index c6e6b8ad826..2a710ba86b7 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/message-bar.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/message-bar.md
@@ -1,10 +1,10 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/message-bar.html -->
 ```html
-<cw-message-bar>Message text</cw-message-bar>
-<cw-message-bar type="warning">Message text</cw-message-bar>
-<cw-message-bar type="danger">
+<ix-message-bar>Message text</ix-message-bar>
+<ix-message-bar type="warning">Message text</ix-message-bar>
+<ix-message-bar type="danger">
   <div class="d-flex align-items-center justify-content-between">
-    Message text <cw-button>Action</cw-button>
+    Message text <ix-button>Action</ix-button>
   </div>
-</cw-message-bar>
+</ix-message-bar>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/pill.md b/packages/documentation/docs/auto-generated/previews/web-component/pill.md
index 51876e5edd5..f708682d73c 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/pill.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/pill.md
@@ -1,24 +1,24 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/pill.html -->
 ```html
-<cw-pill variant="custom" color="white" background="purple">
+<ix-pill variant="custom" color="white" background="purple">
   Label
-</cw-pill>
+</ix-pill>
 
-<cw-pill>Label</cw-pill>
-<cw-pill outline>Label</cw-pill>
-<cw-pill style="width: 8rem">Label</cw-pill>
+<ix-pill>Label</ix-pill>
+<ix-pill outline>Label</ix-pill>
+<ix-pill style="width: 8rem">Label</ix-pill>
 
-<cw-pill icon="star">Label</cw-pill>
-<cw-pill icon="star" style="width: 8rem"> Label </cw-pill>
-<cw-pill outline alignLeft icon="star" style="width: 8rem"> Label </cw-pill>
+<ix-pill icon="star">Label</ix-pill>
+<ix-pill icon="star" style="width: 8rem"> Label </ix-pill>
+<ix-pill outline alignLeft icon="star" style="width: 8rem"> Label </ix-pill>
 
-<cw-pill variant="alarm">Label</cw-pill>
-<cw-pill variant="alarm" outline> Label </cw-pill>
-<cw-pill variant="alarm" style="width: 8rem"> Label </cw-pill>
+<ix-pill variant="alarm">Label</ix-pill>
+<ix-pill variant="alarm" outline> Label </ix-pill>
+<ix-pill variant="alarm" style="width: 8rem"> Label </ix-pill>
 
-<cw-pill variant="alarm" icon="star"> Label </cw-pill>
-<cw-pill variant="alarm" icon="star" style="width: 8rem"> Label </cw-pill>
-<cw-pill variant="alarm" outline alignLeft icon="star" style="width: 8rem">
+<ix-pill variant="alarm" icon="star"> Label </ix-pill>
+<ix-pill variant="alarm" icon="star" style="width: 8rem"> Label </ix-pill>
+<ix-pill variant="alarm" outline alignLeft icon="star" style="width: 8rem">
   Label
-</cw-pill>
+</ix-pill>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/popover-news.md b/packages/documentation/docs/auto-generated/previews/web-component/popover-news.md
index b667aa0b149..52d204570cc 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/popover-news.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/popover-news.md
@@ -1,13 +1,13 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/popover-news.html -->
 ```html
-<cw-basic-navigation>
-  <cw-menu>
-    <cw-menu-about>
-      <cw-menu-about-item label="Example"> </cw-menu-about-item>
-    </cw-menu-about>
-    <cw-menu-about-news label="Test" show about-item-label="Example">
+<ix-basic-navigation>
+  <ix-menu>
+    <ix-menu-about>
+      <ix-menu-about-item label="Example"> </ix-menu-about-item>
+    </ix-menu-about>
+    <ix-menu-about-news label="Test" show about-item-label="Example">
       Test
-    </cw-menu-about-news>
-  </cw-menu>
-</cw-basic-navigation>
+    </ix-menu-about-news>
+  </ix-menu>
+</ix-basic-navigation>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/radio-button-disabled.md b/packages/documentation/docs/auto-generated/previews/web-component/radio-button-disabled.md
deleted file mode 100644
index d78ba4fb24a..00000000000
--- a/packages/documentation/docs/auto-generated/previews/web-component/radio-button-disabled.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/radio-button-disabled.html -->
-```html
-<div class="example-list">
-  <input defaultChecked id="checkbox_1_1" name="group_1" type="radio" />
-  <label for="checkbox_1_1"> Checked </label>
-  <input id="checkbox_1_2" name="group_1" type="radio" />
-  <label for="checkbox_1_2"> Normal </label>
-  <input id="checkbox_1_3" name="group_1" type="radio" />
-  <label for="checkbox_1_3"> Disabled </label>
-</div>
-```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/select-editable.md b/packages/documentation/docs/auto-generated/previews/web-component/select-editable.md
index e1219867e55..125645dde6e 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/select-editable.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/select-editable.md
@@ -1,9 +1,9 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/select-editable.html -->
 ```html
-<cw-select editable selected-indices="1">
-  <cw-select-item label="Item 1" value="1"></cw-select-item>
-  <cw-select-item label="Item 2" value="2"></cw-select-item>
-  <cw-select-item label="Item 3" value="3"></cw-select-item>
-  <cw-select-item label="Item 4" value="4"></cw-select-item>
-</cw-select>
+<ix-select editable selected-indices="1">
+  <ix-select-item label="Item 1" value="1"></ix-select-item>
+  <ix-select-item label="Item 2" value="2"></ix-select-item>
+  <ix-select-item label="Item 3" value="3"></ix-select-item>
+  <ix-select-item label="Item 4" value="4"></ix-select-item>
+</ix-select>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/select-multiple.md b/packages/documentation/docs/auto-generated/previews/web-component/select-multiple.md
index 7ce0ddce78c..3b4e6ca97be 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/select-multiple.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/select-multiple.md
@@ -1,15 +1,15 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/select-multiple.html -->
 ```html
-<cw-select mode="multiple">
-  <cw-select-item label="Item 1" value="1"></cw-select-item>
-  <cw-select-item label="Item 2" value="2"></cw-select-item>
-  <cw-select-item label="Item 3" value="3"></cw-select-item>
-  <cw-select-item label="Item 4" value="4"></cw-select-item>
-</cw-select>
+<ix-select mode="multiple">
+  <ix-select-item label="Item 1" value="1"></ix-select-item>
+  <ix-select-item label="Item 2" value="2"></ix-select-item>
+  <ix-select-item label="Item 3" value="3"></ix-select-item>
+  <ix-select-item label="Item 4" value="4"></ix-select-item>
+</ix-select>
 <script>
   (async function () {
-    await window.customElements.whenDefined('cw-select');
-    const select = document.querySelector('cw-select');
+    await window.customElements.whenDefined('ix-select');
+    const select = document.querySelector('ix-select');
     select.selectedIndices = ['1', '3'];
   })();
 </script>
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/select.md b/packages/documentation/docs/auto-generated/previews/web-component/select.md
index 9d8e908f3e0..fd53a680eab 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/select.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/select.md
@@ -1,9 +1,9 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/select.html -->
 ```html
-<cw-select selected-indices="1">
-  <cw-select-item label="Item 1" value="1"></cw-select-item>
-  <cw-select-item label="Item 2" value="2"></cw-select-item>
-  <cw-select-item label="Item 3" value="3"></cw-select-item>
-  <cw-select-item label="Item 4" value="4"></cw-select-item>
-</cw-select>
+<ix-select selected-indices="1">
+  <ix-select-item label="Item 1" value="1"></ix-select-item>
+  <ix-select-item label="Item 2" value="2"></ix-select-item>
+  <ix-select-item label="Item 3" value="3"></ix-select-item>
+  <ix-select-item label="Item 4" value="4"></ix-select-item>
+</ix-select>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/settings.md b/packages/documentation/docs/auto-generated/previews/web-component/settings.md
index c5636832090..621f450418c 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/settings.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/settings.md
@@ -1,21 +1,21 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/settings.html -->
 ```html
-<cw-basic-navigation>
-  <cw-menu>
-    <cw-menu-settings>
-      <cw-menu-settings-item
+<ix-basic-navigation>
+  <ix-menu>
+    <ix-menu-settings>
+      <ix-menu-settings-item
         label="Example Setting 1"
-      ></cw-menu-settings-item>
-      <cw-menu-settings-item
+      ></ix-menu-settings-item>
+      <ix-menu-settings-item
         label="Example Setting 2"
-      ></cw-menu-settings-item>
-    </cw-menu-settings>
-  </cw-menu>
-</cw-basic-navigation>
+      ></ix-menu-settings-item>
+    </ix-menu-settings>
+  </ix-menu>
+</ix-basic-navigation>
 <script>
   (async function () {
-    await window.customElements.whenDefined('cw-menu');
-    const menu = document.querySelector('cw-menu');
+    await window.customElements.whenDefined('ix-menu');
+    const menu = document.querySelector('ix-menu');
     await menu.toggleSettings(true);
   })();
 </script>
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/spinner-large.md b/packages/documentation/docs/auto-generated/previews/web-component/spinner-large.md
index 3a5f228f4ec..885604c4b6c 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/spinner-large.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/spinner-large.md
@@ -1,4 +1,4 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/spinner-large.html -->
 ```html
-<cw-spinner size="large"></cw-spinner>
+<ix-spinner size="large"></ix-spinner>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/spinner.md b/packages/documentation/docs/auto-generated/previews/web-component/spinner.md
index daf4e040b6d..483c6400b2b 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/spinner.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/spinner.md
@@ -1,4 +1,4 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/spinner.html -->
 ```html
-<cw-spinner></cw-spinner>
+<ix-spinner></ix-spinner>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/split-button-icons.md b/packages/documentation/docs/auto-generated/previews/web-component/split-button-icons.md
index 926cb11101d..02051e9ca40 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/split-button-icons.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/split-button-icons.md
@@ -1,7 +1,7 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/split-button-icons.html -->
 ```html
-<cw-split-button icon="document">
-  <cw-split-button-item icon="cut"></cw-split-button-item>
-  <cw-split-button-item icon="bulb"></cw-split-button-item>
-</cw-split-button>
+<ix-split-button icon="document">
+  <ix-split-button-item icon="cut"></ix-split-button-item>
+  <ix-split-button-item icon="bulb"></ix-split-button-item>
+</ix-split-button>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/split-button.md b/packages/documentation/docs/auto-generated/previews/web-component/split-button.md
index 5b4749c291f..75dc9f7f53b 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/split-button.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/split-button.md
@@ -1,7 +1,7 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/split-button.html -->
 ```html
-<cw-split-button label="Action text">
-  <cw-split-button-item label="Item 1"></cw-split-button-item>
-  <cw-split-button-item label="Item 2"></cw-split-button-item>
-</cw-split-button>
+<ix-split-button label="Action text">
+  <ix-split-button-item label="Item 1"></ix-split-button-item>
+  <ix-split-button-item label="Item 2"></ix-split-button-item>
+</ix-split-button>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/tabs.md b/packages/documentation/docs/auto-generated/previews/web-component/tabs.md
index 483a2215163..9c82a6fc5df 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/tabs.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/tabs.md
@@ -1,8 +1,8 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/tabs.html -->
 ```html
-<cw-tabs selected="1">
-  <cw-tab-item>Tab 1</cw-tab-item>
-  <cw-tab-item>Tab 2</cw-tab-item>
-  <cw-tab-item>Tab 3</cw-tab-item>
-</cw-tabs>
+<ix-tabs selected="1">
+  <ix-tab-item>Tab 1</ix-tab-item>
+  <ix-tab-item>Tab 2</ix-tab-item>
+  <ix-tab-item>Tab 3</ix-tab-item>
+</ix-tabs>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/tile.md b/packages/documentation/docs/auto-generated/previews/web-component/tile.md
index c05ef8538bd..d851f121dc8 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/tile.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/tile.md
@@ -1,19 +1,19 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/tile.html -->
 ```html
-<cw-tile size="small">92.8 °C</cw-tile>
+<ix-tile size="small">92.8 °C</ix-tile>
 
-<cw-tile size="medium" class="mr-1">
+<ix-tile size="medium" class="mr-1">
   <div slot="header">Tile header</div>
   <div class="text-l">92.8 °C</div>
-</cw-tile>
+</ix-tile>
 
-<cw-tile size="big">
+<ix-tile size="big">
   <div
     class="d-flex flex-grow-1 align-items-center justify-content-between"
     slot="header"
   >
     Tile header
-    <cw-icon-button ghost icon="context-menu"></cw-icon-button>
+    <ix-icon-button ghost icon="context-menu"></ix-icon-button>
   </div>
   <div slot="subheader">Temperature</div>
   <div
@@ -31,9 +31,9 @@
     class="d-flex h-100 align-items-center justify-content-end"
     slot="footer"
   >
-    <cw-button ghost slot="footer">
-      <cw-icon name="chevron-right-small"></cw-icon>Details
-    </cw-button>
+    <ix-button ghost slot="footer">
+      <ix-icon name="chevron-right-small"></ix-icon>Details
+    </ix-button>
   </div>
-</cw-tile>
+</ix-tile>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/timepicker.md b/packages/documentation/docs/auto-generated/previews/web-component/timepicker.md
index a192393afc1..392fe2143fb 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/timepicker.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/timepicker.md
@@ -1,4 +1,4 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/timepicker.html -->
 ```html
-<cw-time-picker style="display: block; width: 25rem"></cw-time-picker>
+<ix-time-picker style="display: block; width: 20rem"></ix-time-picker>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/toast-v2.md b/packages/documentation/docs/auto-generated/previews/web-component/toast-v2.md
deleted file mode 100644
index b87156d138c..00000000000
--- a/packages/documentation/docs/auto-generated/previews/web-component/toast-v2.md
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/toast-v2.html -->
-```html
-<cw-toast-container></cw-toast-container>
-
-<cw-button id="toastButton">Trigger toast</cw-button>
-<script type="module">
-  import { toast } from './lib/core-ui-core/dist/index.js';
-
-  document.getElementById('toastButton').addEventListener('click', () => {
-    toast({
-      message: 'My toast message!',
-    });
-  });
-</script>
-```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/toast.md b/packages/documentation/docs/auto-generated/previews/web-component/toast.md
index 4656e17bce7..68b96572da8 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/toast.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/toast.md
@@ -1,13 +1,13 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/toast.html -->
 ```html
-<cw-toast-container></cw-toast-container>
+<ix-toast-container></ix-toast-container>
 
-<cw-button id="toastButton">Trigger toast</cw-button>
+<ix-button id="toastButton">Trigger toast</ix-button>
 <script type="module">
   import { toast } from './lib/ix/dist/index.js';
 
   (async function () {
-    await window.customElements.whenDefined('cw-toast-container');
+    await window.customElements.whenDefined('ix-toast-container');
     document.getElementById('toastButton').addEventListener('click', () => {
       toast({
         message: 'My toast message!',
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/toggle-color.md b/packages/documentation/docs/auto-generated/previews/web-component/toggle-color.md
index 4357f843d5a..a84a6c446ea 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/toggle-color.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/toggle-color.md
@@ -1,4 +1,4 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/toggle-color.html -->
 ```html
-<cw-toggle color="warning"></cw-toggle>
+<ix-toggle color="warning"></ix-toggle>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/toggle-custom-disable.md b/packages/documentation/docs/auto-generated/previews/web-component/toggle-custom-disable.md
index fc597766ee0..a53f22d8104 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/toggle-custom-disable.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/toggle-custom-disable.md
@@ -1,4 +1,4 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/toggle-custom-disable.html -->
 ```html
-<cw-toggle disabled></cw-toggle>
+<ix-toggle disabled></ix-toggle>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/toggle-custom-label.md b/packages/documentation/docs/auto-generated/previews/web-component/toggle-custom-label.md
index 3c43b1525d5..6f17b0e68d9 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/toggle-custom-label.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/toggle-custom-label.md
@@ -1,4 +1,4 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/toggle-custom-label.html -->
 ```html
-<cw-toggle text-off="Offline" text-on="Online"></cw-toggle>
+<ix-toggle text-off="Offline" text-on="Online"></ix-toggle>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/toggle.md b/packages/documentation/docs/auto-generated/previews/web-component/toggle.md
index 80fe26204ea..941a1a6812c 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/toggle.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/toggle.md
@@ -1,4 +1,4 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/toggle.html -->
 ```html
-<cw-toggle></cw-toggle>
+<ix-toggle></ix-toggle>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/tree-custom.md b/packages/documentation/docs/auto-generated/previews/web-component/tree-custom.md
index d087caadc8d..ddca486988a 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/tree-custom.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/tree-custom.md
@@ -2,16 +2,16 @@
 ```html
 
 <div style="height: 8rem; width: 100%">
-  <cw-tree root="root" id="tree"></cw-tree>
+  <ix-tree root="root" id="tree"></ix-tree>
 </div>
 
 <script type="text/javascript">
   (async function () {
-    await window.customElements.whenDefined('cw-tree');
+    await window.customElements.whenDefined('ix-tree');
     const tree = document.getElementById('tree');
 
     tree.renderItem = (index, item, dataList, context, update) => {
-      const el = document.createElement('cw-tree-item');
+      const el = document.createElement('ix-tree-item');
       el.hasChildren = item.hasChildren;
       el.context = context;
 
@@ -19,7 +19,7 @@
       div.style.display = 'flex';
 
       const name = document.createElement('span');
-      const icon = document.createElement('cw-icon');
+      const icon = document.createElement('ix-icon');
       icon.name = 'print';
       icon.style.marginRight = '1rem';
 
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/tree.md b/packages/documentation/docs/auto-generated/previews/web-component/tree.md
index b34e945f0e7..6d004b1c707 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/tree.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/tree.md
@@ -2,12 +2,12 @@
 ```html
 
 <div style="height: 8rem; width: 100%">
-  <cw-tree root="root" id="tree"></cw-tree>
+  <ix-tree root="root" id="tree"></ix-tree>
 </div>
 
 <script type="text/javascript">
   (async function () {
-    await window.customElements.whenDefined('cw-tree');
+    await window.customElements.whenDefined('ix-tree');
     const tree = document.getElementById('tree');
 
     tree.model = {
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/upload.md b/packages/documentation/docs/auto-generated/previews/web-component/upload.md
index d92fb50f7af..f0bc9dd0b8b 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/upload.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/upload.md
@@ -1,4 +1,4 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/upload.html -->
 ```html
-<cw-upload></cw-upload>
+<ix-upload></ix-upload>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/vertical-tabs-with-avatar.md b/packages/documentation/docs/auto-generated/previews/web-component/vertical-tabs-with-avatar.md
index aa42bca1462..38b9e10fe87 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/vertical-tabs-with-avatar.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/vertical-tabs-with-avatar.md
@@ -1,15 +1,15 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/vertical-tabs-with-avatar.html -->
 ```html
-<cw-menu>
-  <cw-menu-avatar>
-    <cw-menu-avatar-item label="Option 1"></cw-menu-avatar-item>
-  </cw-menu-avatar>
-  <cw-menu-item home-tab tab-icon="home"> Home </cw-menu-item>
-  <cw-menu-item tab-icon="globe"> Normal Tab </cw-menu-item>
-  <cw-menu-item tab-icon="star" disabled> Disabled Tab </cw-menu-item>
-  <cw-menu-item tab-icon="star"> With other Icon </cw-menu-item>
-  <cw-menu-item tab-icon="globe" style="display: none">
+<ix-menu>
+  <ix-menu-avatar>
+    <ix-menu-avatar-item label="Option 1"></ix-menu-avatar-item>
+  </ix-menu-avatar>
+  <ix-menu-item home-tab tab-icon="home"> Home </ix-menu-item>
+  <ix-menu-item tab-icon="globe"> Normal Tab </ix-menu-item>
+  <ix-menu-item tab-icon="star" disabled> Disabled Tab </ix-menu-item>
+  <ix-menu-item tab-icon="star"> With other Icon </ix-menu-item>
+  <ix-menu-item tab-icon="globe" style="display: none">
     Should not visible
-  </cw-menu-item>
-</cw-menu>
+  </ix-menu-item>
+</ix-menu>
 ```
diff --git a/packages/documentation/docs/auto-generated/previews/web-component/vertical-tabs.md b/packages/documentation/docs/auto-generated/previews/web-component/vertical-tabs.md
index a327e03be86..3b218671731 100644
--- a/packages/documentation/docs/auto-generated/previews/web-component/vertical-tabs.md
+++ b/packages/documentation/docs/auto-generated/previews/web-component/vertical-tabs.md
@@ -1,12 +1,12 @@
 <!-- Auto generated! Please edit here: siemens-ix/packages/documentation/static/webcomponent-examples/vertical-tabs.html -->
 ```html
-<cw-menu>
-  <cw-menu-item home-tab tab-icon="home"> Home </cw-menu-item>
-  <cw-menu-item tab-icon="globe"> Normal Tab </cw-menu-item>
-  <cw-menu-item tab-icon="star" disabled> Disabled Tab </cw-menu-item>
-  <cw-menu-item tab-icon="star"> With other Icon </cw-menu-item>
-  <cw-menu-item tab-icon="globe" style="display: none">
+<ix-menu>
+  <ix-menu-item home-tab tab-icon="home"> Home </ix-menu-item>
+  <ix-menu-item tab-icon="globe"> Normal Tab </ix-menu-item>
+  <ix-menu-item tab-icon="star" disabled> Disabled Tab </ix-menu-item>
+  <ix-menu-item tab-icon="star"> With other Icon </ix-menu-item>
+  <ix-menu-item tab-icon="globe" style="display: none">
     Should not visible
-  </cw-menu-item>
-</cw-menu>
+  </ix-menu-item>
+</ix-menu>
 ```
diff --git a/packages/documentation/docs/components/animated-tabs.md b/packages/documentation/docs/components/animated-tabs.md
index 21cadc03daf..d180edbbc6b 100644
--- a/packages/documentation/docs/components/animated-tabs.md
+++ b/packages/documentation/docs/components/animated-tabs.md
@@ -8,5 +8,5 @@ import ComponentApi from '@site/src/components/ComponentApi';
 <ComponentApi name="cui-animated-tabs"></ComponentApi>
 <ComponentApi name="cui-animated-tab"></ComponentApi>
 
-<ComponentApi name="cw-animated-tabs"></ComponentApi>
-<ComponentApi name="cw-animated-tab"></ComponentApi>
+<ComponentApi name="ix-animated-tabs"></ComponentApi>
+<ComponentApi name="ix-animated-tab"></ComponentApi>
diff --git a/packages/documentation/docs/components/category-filter.md b/packages/documentation/docs/components/category-filter.md
index e08dc2a8e5d..862dc084ec3 100644
--- a/packages/documentation/docs/components/category-filter.md
+++ b/packages/documentation/docs/components/category-filter.md
@@ -15,4 +15,4 @@ For every set filter parameter a pill will appear inside of the text input.
 <LivePreview name="category-filter-suggestions" height="12rem"></LivePreview>
 
 <ComponentApi name="cui-category-filter"></ComponentApi>
-<ComponentApi name="cw-category-filter"></ComponentApi>
+<ComponentApi name="ix-category-filter"></ComponentApi>
diff --git a/packages/documentation/docs/controls/blind.md b/packages/documentation/docs/controls/blind.md
index c1302a2caf1..87c6f1cb0a1 100644
--- a/packages/documentation/docs/controls/blind.md
+++ b/packages/documentation/docs/controls/blind.md
@@ -1,7 +1,7 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
-import Props from './../auto-generated/cw-blind/props.md';
-import Events from './../auto-generated/cw-blind/events.md';
+import Props from './../auto-generated/ix-blind/props.md';
+import Events from './../auto-generated/ix-blind/events.md';
 
 import WebComponent from './../auto-generated/previews/web-component/blind.md'
 
diff --git a/packages/documentation/docs/controls/breadcrumb.md b/packages/documentation/docs/controls/breadcrumb.md
index 843d24685dc..3a6bf8667ae 100644
--- a/packages/documentation/docs/controls/breadcrumb.md
+++ b/packages/documentation/docs/controls/breadcrumb.md
@@ -1,10 +1,10 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 
-import Props from './../auto-generated/cw-breadcrumb/props.md';
-import Events from './../auto-generated/cw-breadcrumb/events.md';
+import Props from './../auto-generated/ix-breadcrumb/props.md';
+import Events from './../auto-generated/ix-breadcrumb/events.md';
 
-import ItemProps from './../auto-generated/cw-breadcrumb-item/props.md';
+import ItemProps from './../auto-generated/ix-breadcrumb-item/props.md';
 
 import SourceBreadcrumb from './../auto-generated/previews/web-component/breadcrumb.md'
 import SourceBreadcrumbTruncate from './../auto-generated/previews/web-component/breadcrumb-truncate.md'
@@ -36,7 +36,7 @@ import SourceBreadcrumbNextItems from './../auto-generated/previews/web-componen
   </TabItem>
 </Preview>
 
-## Properties (cw-breadcrumb)
+## Properties (ix-breadcrumb)
 
 ### Props
 
@@ -46,7 +46,7 @@ import SourceBreadcrumbNextItems from './../auto-generated/previews/web-componen
 
 <Events />
 
-## Properties (cw-breadcrumb-item)
+## Properties (ix-breadcrumb-item)
 
 ### Props
 
diff --git a/packages/documentation/docs/controls/button.md b/packages/documentation/docs/controls/button.md
index f99764b0a23..334e1b0aae2 100644
--- a/packages/documentation/docs/controls/button.md
+++ b/packages/documentation/docs/controls/button.md
@@ -4,7 +4,7 @@ title: Button
 
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
-import Props from './../auto-generated/cw-button/props.md';
+import Props from './../auto-generated/ix-button/props.md';
 
 import WebComponentButtons from './../auto-generated/previews/web-component/buttons.md'
 import WebComponentButtonGroup from './../auto-generated/previews/web-component/button-group.md'
diff --git a/packages/documentation/docs/controls/chip.md b/packages/documentation/docs/controls/chip.md
index 00443b3d359..65751104e78 100644
--- a/packages/documentation/docs/controls/chip.md
+++ b/packages/documentation/docs/controls/chip.md
@@ -1,7 +1,7 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
-import Props from './../auto-generated/cw-chip/props.md';
-import Events from './../auto-generated/cw-chip/events.md';
+import Props from './../auto-generated/ix-chip/props.md';
+import Events from './../auto-generated/ix-chip/events.md';
 
 import SourceChip from './../auto-generated/previews/web-component/chip.md'
 
diff --git a/packages/documentation/docs/controls/date-picker.md b/packages/documentation/docs/controls/date-picker.md
index ef0339ff71c..c9864f8d804 100644
--- a/packages/documentation/docs/controls/date-picker.md
+++ b/packages/documentation/docs/controls/date-picker.md
@@ -1,7 +1,7 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
-import Props from './../auto-generated/cw-date-picker/props.md';
-import Events from './../auto-generated/cw-date-picker/events.md';
+import Props from './../auto-generated/ix-date-picker/props.md';
+import Events from './../auto-generated/ix-date-picker/events.md';
 
 import SourceDatepicker from './../auto-generated/previews/web-component/datepicker.md'
 
diff --git a/packages/documentation/docs/controls/date-time-picker.md b/packages/documentation/docs/controls/date-time-picker.md
index 15bfa37850c..6c668e7a841 100644
--- a/packages/documentation/docs/controls/date-time-picker.md
+++ b/packages/documentation/docs/controls/date-time-picker.md
@@ -1,7 +1,7 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
-import Props from './../auto-generated/cw-datetime-picker/props.md';
-import Events from './../auto-generated/cw-datetime-picker/events.md';
+import Props from './../auto-generated/ix-datetime-picker/props.md';
+import Events from './../auto-generated/ix-datetime-picker/events.md';
 
 import SourceDatetimepicker from './../auto-generated/previews/web-component/datetimepicker.md'
 
diff --git a/packages/documentation/docs/controls/drawer.md b/packages/documentation/docs/controls/drawer.md
index 0b9c92d2bde..b1c459d81ce 100644
--- a/packages/documentation/docs/controls/drawer.md
+++ b/packages/documentation/docs/controls/drawer.md
@@ -1,7 +1,7 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
-import Props from './../auto-generated/cw-drawer/props.md';
-import Events from './../auto-generated/cw-drawer/events.md';
+import Props from './../auto-generated/ix-drawer/props.md';
+import Events from './../auto-generated/ix-drawer/events.md';
 
 import SourceDrawer from './../auto-generated/previews/web-component/drawer.md'
 import SourceDrawerFullHeight from './../auto-generated/previews/web-component/drawer-full-height.md'
diff --git a/packages/documentation/docs/controls/dropdown.md b/packages/documentation/docs/controls/dropdown.md
index 4bad748e98a..e538667296c 100644
--- a/packages/documentation/docs/controls/dropdown.md
+++ b/packages/documentation/docs/controls/dropdown.md
@@ -1,11 +1,11 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 
-import Props from './../auto-generated/cw-dropdown/props.md';
-import Events from './../auto-generated/cw-dropdown/events.md';
+import Props from './../auto-generated/ix-dropdown/props.md';
+import Events from './../auto-generated/ix-dropdown/events.md';
 
-import ItemProps from './../auto-generated/cw-dropdown/props.md';
-import ItemEvents from './../auto-generated/cw-dropdown/events.md';
+import ItemProps from './../auto-generated/ix-dropdown/props.md';
+import ItemEvents from './../auto-generated/ix-dropdown/events.md';
 
 import SourceDropdown from './../auto-generated/previews/web-component/dropdown.md'
 import SourceDropdownIcon from './../auto-generated/previews/web-component/dropdown-icon.md'
@@ -28,7 +28,7 @@ import SourceDropdownIcon from './../auto-generated/previews/web-component/dropd
   </TabItem>
 </Preview>
 
-## Properties (cw-dropdown)
+## Properties (ix-dropdown)
 
 ### Props
 
@@ -38,7 +38,7 @@ import SourceDropdownIcon from './../auto-generated/previews/web-component/dropd
 
 <Events />
 
-## Properties (cw-dropdown-item)
+## Properties (ix-dropdown-item)
 
 ### Props
 
diff --git a/packages/documentation/docs/controls/event-list.md b/packages/documentation/docs/controls/event-list.md
index 7186723e8d8..8ade41739eb 100644
--- a/packages/documentation/docs/controls/event-list.md
+++ b/packages/documentation/docs/controls/event-list.md
@@ -1,11 +1,11 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 
-import Props from './../auto-generated/cw-event-list/props.md';
-import Events from './../auto-generated/cw-event-list/events.md';
+import Props from './../auto-generated/ix-event-list/props.md';
+import Events from './../auto-generated/ix-event-list/events.md';
 
-import ItemProps from './../auto-generated/cw-event-list-item/props.md';
-import ItemEvents from './../auto-generated/cw-event-list-item/events.md';
+import ItemProps from './../auto-generated/ix-event-list-item/props.md';
+import ItemEvents from './../auto-generated/ix-event-list-item/events.md';
 
 import SourceEventList from './../auto-generated/previews/web-component/event-list.md'
 import SourceEventListSelected from './../auto-generated/previews/web-component/event-list-selected.md'
@@ -46,7 +46,7 @@ import SourceEventListCompact from './../auto-generated/previews/web-component/e
   </TabItem>
 </Preview>
 
-## Properties (cw-event-list)
+## Properties (ix-event-list)
 
 ### Props
 
@@ -56,7 +56,7 @@ import SourceEventListCompact from './../auto-generated/previews/web-component/e
 
 <Events />
 
-## Properties (cw-event-list-item)
+## Properties (ix-event-list-item)
 
 ### Props
 
diff --git a/packages/documentation/docs/controls/expanding-search.md b/packages/documentation/docs/controls/expanding-search.md
index 132731bd2e1..29624681bed 100644
--- a/packages/documentation/docs/controls/expanding-search.md
+++ b/packages/documentation/docs/controls/expanding-search.md
@@ -1,7 +1,7 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
-import Props from './../auto-generated/cw-expanding-search/props.md';
-import Events from './../auto-generated/cw-expanding-search/events.md';
+import Props from './../auto-generated/ix-expanding-search/props.md';
+import Events from './../auto-generated/ix-expanding-search/events.md';
 
 import SourceExpandingSearch from './../auto-generated/previews/web-component/expanding-search.md'
 
diff --git a/packages/documentation/docs/controls/flip.md b/packages/documentation/docs/controls/flip.md
index ffb042ee332..2cbf9d99df3 100644
--- a/packages/documentation/docs/controls/flip.md
+++ b/packages/documentation/docs/controls/flip.md
@@ -1,7 +1,7 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
-import Props from './../auto-generated/cw-flip-tile/props.md';
-import Events from './../auto-generated/cw-flip-tile/events.md';
+import Props from './../auto-generated/ix-flip-tile/props.md';
+import Events from './../auto-generated/ix-flip-tile/events.md';
 
 import SourceFlip from './../auto-generated/previews/web-component/flip-tile.md'
 
diff --git a/packages/documentation/docs/controls/group.md b/packages/documentation/docs/controls/group.md
index 985219b79fd..2dc8d4670e0 100644
--- a/packages/documentation/docs/controls/group.md
+++ b/packages/documentation/docs/controls/group.md
@@ -1,14 +1,14 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 
-import Props from './../auto-generated/cw-group/props.md';
-import Events from './../auto-generated/cw-group/events.md';
+import Props from './../auto-generated/ix-group/props.md';
+import Events from './../auto-generated/ix-group/events.md';
 
-import ItemProps from './../auto-generated/cw-group-item/props.md';
-import ItemEvents from './../auto-generated/cw-group-item/events.md';
+import ItemProps from './../auto-generated/ix-group-item/props.md';
+import ItemEvents from './../auto-generated/ix-group-item/events.md';
 
-import DropdownItemProps from './../auto-generated/cw-group-dropdown-item/props.md';
-import DropdownItemEvents from './../auto-generated/cw-group-dropdown-item/events.md';
+import DropdownItemProps from './../auto-generated/ix-group-dropdown-item/props.md';
+import DropdownItemEvents from './../auto-generated/ix-group-dropdown-item/events.md';
 
 import SourceGroup from './../auto-generated/previews/web-component/group.md'
 import SourceGroupSuppressed from './../auto-generated/previews/web-component/group-header-suppressed.md'
@@ -49,7 +49,7 @@ import SourceGroupContext from './../auto-generated/previews/web-component/group
   </TabItem>
 </Preview>
 
-## Properties (cw-group)
+## Properties (ix-group)
 
 ### Props
 
@@ -59,7 +59,7 @@ import SourceGroupContext from './../auto-generated/previews/web-component/group
 
 <Events />
 
-## Properties (cw-group-item)
+## Properties (ix-group-item)
 
 ### Props
 
@@ -69,7 +69,7 @@ import SourceGroupContext from './../auto-generated/previews/web-component/group
 
 <ItemEvents />
 
-## Properties (cw-group-dropdown-item)
+## Properties (ix-group-dropdown-item)
 
 ### Props
 
diff --git a/packages/documentation/docs/controls/messagebar.md b/packages/documentation/docs/controls/messagebar.md
index 4edd406410e..04e4ecde743 100644
--- a/packages/documentation/docs/controls/messagebar.md
+++ b/packages/documentation/docs/controls/messagebar.md
@@ -1,8 +1,8 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 
-import Props from './../auto-generated/cw-message-bar/props.md';
-import Events from './../auto-generated/cw-message-bar/events.md';
+import Props from './../auto-generated/ix-message-bar/props.md';
+import Events from './../auto-generated/ix-message-bar/events.md';
 
 import SourceMessage from './../auto-generated/previews/web-component/message-bar.md';
 
diff --git a/packages/documentation/docs/controls/navigation/about-and-legal.md b/packages/documentation/docs/controls/navigation/about-and-legal.md
index 65bf1f7aeed..b254db9878a 100644
--- a/packages/documentation/docs/controls/navigation/about-and-legal.md
+++ b/packages/documentation/docs/controls/navigation/about-and-legal.md
@@ -6,9 +6,9 @@ title: About and legal
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Demo from '@site/src/components/Demo';
-import Props from './../../auto-generated/cw-menu-about/props.md';
-import Events from './../../auto-generated/cw-menu-about/events.md';
-import PropsItem from './../../auto-generated/cw-menu-about-item/props.md';
+import Props from './../../auto-generated/ix-menu-about/props.md';
+import Events from './../../auto-generated/ix-menu-about/events.md';
+import PropsItem from './../../auto-generated/ix-menu-about-item/props.md';
 
 import WebComponent from './../../auto-generated/previews/web-component/about-and-legal.md'
 
@@ -34,7 +34,7 @@ import WebComponent from './../../auto-generated/previews/web-component/about-an
 
 Supported language codes are `'global/en' | 'global/es' | 'de/de' | 'cn/zh'`
 
-### cw-menu-about
+### ix-menu-about
 
 #### Props
 
@@ -44,7 +44,7 @@ Supported language codes are `'global/en' | 'global/es' | 'de/de' | 'cn/zh'`
 
 <Events />
 
-### cw-menu-about-item
+### ix-menu-about-item
 
 #### Props
 
diff --git a/packages/documentation/docs/controls/navigation/basic-navigation.md b/packages/documentation/docs/controls/navigation/basic-navigation.md
index 45a621a7f18..462fad0b72d 100644
--- a/packages/documentation/docs/controls/navigation/basic-navigation.md
+++ b/packages/documentation/docs/controls/navigation/basic-navigation.md
@@ -6,7 +6,7 @@ title: Basic Navigation
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
-import Props from './../../auto-generated/cw-basic-navigation/props.md';
+import Props from './../../auto-generated/ix-basic-navigation/props.md';
 
 import WebComponent from './../../auto-generated/previews/web-component/basic-navigation.md'
 import ReactComponent from './../../auto-generated/previews/react/basic-navigation.md'
@@ -38,7 +38,7 @@ import ReactComponentWithoutHeader from './../../auto-generated/previews/react/b
   </TabItem>
 </Preview>
 
-### cw-basic-navigation
+### ix-basic-navigation
 
 #### Props
 
diff --git a/packages/documentation/docs/controls/navigation/popover-news.md b/packages/documentation/docs/controls/navigation/popover-news.md
index 070b188ccce..6cc1f4d7714 100644
--- a/packages/documentation/docs/controls/navigation/popover-news.md
+++ b/packages/documentation/docs/controls/navigation/popover-news.md
@@ -1,7 +1,7 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
-import Props from './../../auto-generated/cw-menu-about-news/props.md';
-import Events from './../../auto-generated/cw-menu-about-news/events.md';
+import Props from './../../auto-generated/ix-menu-about-news/props.md';
+import Events from './../../auto-generated/ix-menu-about-news/events.md';
 
 import WebComponent from './../../auto-generated/previews/web-component/popover-news.md'
 
diff --git a/packages/documentation/docs/controls/navigation/settings.md b/packages/documentation/docs/controls/navigation/settings.md
index eca78b7da32..203b32b306c 100644
--- a/packages/documentation/docs/controls/navigation/settings.md
+++ b/packages/documentation/docs/controls/navigation/settings.md
@@ -4,9 +4,9 @@ sidebar_position: 4
 
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
-import Props from './../../auto-generated/cw-menu-settings/props.md';
-import Events from './../../auto-generated/cw-menu-settings/events.md';
-import ItemProps from './../../auto-generated/cw-menu-settings-item/props.md';
+import Props from './../../auto-generated/ix-menu-settings/props.md';
+import Events from './../../auto-generated/ix-menu-settings/events.md';
+import ItemProps from './../../auto-generated/ix-menu-settings-item/props.md';
 
 import WebComponent from './../../auto-generated/previews/web-component/settings.md'
 
@@ -20,7 +20,7 @@ import WebComponent from './../../auto-generated/previews/web-component/settings
   </TabItem>
 </Preview>
 
-## Properties (cw-menu-settings)
+## Properties (ix-menu-settings)
 
 ### Props
 
@@ -30,7 +30,7 @@ import WebComponent from './../../auto-generated/previews/web-component/settings
 
 <Events />
 
-## Properties (cw-menu-settings-item)
+## Properties (ix-menu-settings-item)
 
 ### Props
 
diff --git a/packages/documentation/docs/controls/navigation/vertical-tabs.md b/packages/documentation/docs/controls/navigation/vertical-tabs.md
index 9b07a28efda..bce4a8091ce 100644
--- a/packages/documentation/docs/controls/navigation/vertical-tabs.md
+++ b/packages/documentation/docs/controls/navigation/vertical-tabs.md
@@ -4,17 +4,17 @@ sidebar_position: 2
 
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
-import Props from './../../auto-generated/cw-menu-settings/props.md';
+import Props from './../../auto-generated/ix-menu-settings/props.md';
 
-import MenuProps from './../../auto-generated/cw-menu/props.md';
-import MenuEvents from './../../auto-generated/cw-menu/events.md';
-import ItemProps from './../../auto-generated/cw-menu-item/props.md';
-import ItemEvents from './../../auto-generated/cw-menu-item/events.md';
+import MenuProps from './../../auto-generated/ix-menu/props.md';
+import MenuEvents from './../../auto-generated/ix-menu/events.md';
+import ItemProps from './../../auto-generated/ix-menu-item/props.md';
+import ItemEvents from './../../auto-generated/ix-menu-item/events.md';
 
-import AvatarProps from './../../auto-generated/cw-menu-avatar/props.md';
-import AvatarEvents from './../../auto-generated/cw-menu-avatar/events.md';
-import AvatarItemProps from './../../auto-generated/cw-menu-avatar-item/props.md';
-import AvatarItemEvents from './../../auto-generated/cw-menu-avatar-item/events.md';
+import AvatarProps from './../../auto-generated/ix-menu-avatar/props.md';
+import AvatarEvents from './../../auto-generated/ix-menu-avatar/events.md';
+import AvatarItemProps from './../../auto-generated/ix-menu-avatar-item/props.md';
+import AvatarItemEvents from './../../auto-generated/ix-menu-avatar-item/events.md';
 
 import WebComponent from './../../auto-generated/previews/web-component/vertical-tabs.md'
 import WebComponentWithAvatar from './../../auto-generated/previews/web-component/vertical-tabs-with-avatar.md'
@@ -37,7 +37,7 @@ import WebComponentWithAvatar from './../../auto-generated/previews/web-componen
   </TabItem>
 </Preview>
 
-## Properties (cw-menu)
+## Properties (ix-menu)
 
 ### Props
 
@@ -47,13 +47,13 @@ import WebComponentWithAvatar from './../../auto-generated/previews/web-componen
 
 <MenuEvents />
 
-## Properties (cw-menu-item)
+## Properties (ix-menu-item)
 
 ### Props
 
 <ItemProps />
 
-## Properties (cw-menu-avatar)
+## Properties (ix-menu-avatar)
 
 ### Props
 
@@ -63,7 +63,7 @@ import WebComponentWithAvatar from './../../auto-generated/previews/web-componen
 
 <AvatarEvents />
 
-## Properties (cw-menu-avatar-item)
+## Properties (ix-menu-avatar-item)
 
 ### Props
 
diff --git a/packages/documentation/docs/controls/pill.md b/packages/documentation/docs/controls/pill.md
index f85e1bc2756..e4e81fb6b99 100644
--- a/packages/documentation/docs/controls/pill.md
+++ b/packages/documentation/docs/controls/pill.md
@@ -1,8 +1,8 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 
-import Props from './../auto-generated/cw-pill/props.md';
-import Events from './../auto-generated/cw-pill/events.md';
+import Props from './../auto-generated/ix-pill/props.md';
+import Events from './../auto-generated/ix-pill/events.md';
 
 import SourcePill from './../auto-generated/previews/web-component/pill.md';
 
diff --git a/packages/documentation/docs/controls/select.md b/packages/documentation/docs/controls/select.md
index e43b02c97f5..45a41c85f88 100644
--- a/packages/documentation/docs/controls/select.md
+++ b/packages/documentation/docs/controls/select.md
@@ -1,11 +1,11 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 
-import Props from './../auto-generated/cw-select/props.md';
-import Events from './../auto-generated/cw-select/events.md';
+import Props from './../auto-generated/ix-select/props.md';
+import Events from './../auto-generated/ix-select/events.md';
 
-import ItemProps from './../auto-generated/cw-select-item/props.md';
-import ItemEvents from './../auto-generated/cw-select-item/events.md';
+import ItemProps from './../auto-generated/ix-select-item/props.md';
+import ItemEvents from './../auto-generated/ix-select-item/events.md';
 
 import SourceSelect from './../auto-generated/previews/web-component/select.md';
 import SourceEditable from './../auto-generated/previews/web-component/select-editable.md';
@@ -37,7 +37,7 @@ import SourceMultiple from './../auto-generated/previews/web-component/select-mu
   </TabItem>
 </Preview>
 
-## Properties (cw-select)
+## Properties (ix-select)
 
 ### Props
 
@@ -47,7 +47,7 @@ import SourceMultiple from './../auto-generated/previews/web-component/select-mu
 
 <Events />
 
-## Properties (cw-select-item)
+## Properties (ix-select-item)
 
 ### Props
 
diff --git a/packages/documentation/docs/controls/spinner.md b/packages/documentation/docs/controls/spinner.md
index f8e57ef8737..27f71821458 100644
--- a/packages/documentation/docs/controls/spinner.md
+++ b/packages/documentation/docs/controls/spinner.md
@@ -1,8 +1,8 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 
-import Props from './../auto-generated/cw-spinner/props.md';
-import Events from './../auto-generated/cw-spinner/events.md';
+import Props from './../auto-generated/ix-spinner/props.md';
+import Events from './../auto-generated/ix-spinner/events.md';
 
 import SourceSpinner from './../auto-generated/previews/web-component/spinner.md';
 import SourceSpinnerLarge from './../auto-generated/previews/web-component/spinner-large.md';
diff --git a/packages/documentation/docs/controls/split-button.md b/packages/documentation/docs/controls/split-button.md
index 69007c6c49f..336f1e8b0b0 100644
--- a/packages/documentation/docs/controls/split-button.md
+++ b/packages/documentation/docs/controls/split-button.md
@@ -1,11 +1,11 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 
-import Props from './../auto-generated/cw-select/props.md';
-import Events from './../auto-generated/cw-select/events.md';
+import Props from './../auto-generated/ix-select/props.md';
+import Events from './../auto-generated/ix-select/events.md';
 
-import ItemProps from './../auto-generated/cw-select-item/props.md';
-import ItemEvents from './../auto-generated/cw-select-item/events.md';
+import ItemProps from './../auto-generated/ix-select-item/props.md';
+import ItemEvents from './../auto-generated/ix-select-item/events.md';
 
 import SourceSplitButton from './../auto-generated/previews/web-component/split-button.md';
 import SourceSplitButtonIcons from './../auto-generated/previews/web-component/split-button-icons.md';
@@ -28,7 +28,7 @@ import SourceSplitButtonIcons from './../auto-generated/previews/web-component/s
   </TabItem>
 </Preview>
 
-## Properties (cw-split-button)
+## Properties (ix-split-button)
 
 ### Props
 
@@ -38,7 +38,7 @@ import SourceSplitButtonIcons from './../auto-generated/previews/web-component/s
 
 <Events />
 
-## Properties (cw-split-button-item)
+## Properties (ix-split-button-item)
 
 ### Props
 
diff --git a/packages/documentation/docs/controls/tabs.md b/packages/documentation/docs/controls/tabs.md
index ded4085c4ec..c8bf94f0ef6 100644
--- a/packages/documentation/docs/controls/tabs.md
+++ b/packages/documentation/docs/controls/tabs.md
@@ -1,11 +1,11 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 
-import Props from './../auto-generated/cw-tabs/props.md';
-import Events from './../auto-generated/cw-tabs/events.md';
+import Props from './../auto-generated/ix-tabs/props.md';
+import Events from './../auto-generated/ix-tabs/events.md';
 
-import ItemProps from './../auto-generated/cw-tab-item/props.md';
-import ItemEvents from './../auto-generated/cw-tab-item/events.md';
+import ItemProps from './../auto-generated/ix-tab-item/props.md';
+import ItemEvents from './../auto-generated/ix-tab-item/events.md';
 
 import SourceTabs from './../auto-generated/previews/web-component/tabs.md';
 
@@ -19,7 +19,7 @@ import SourceTabs from './../auto-generated/previews/web-component/tabs.md';
   </TabItem>
 </Preview>
 
-## Properties (cw-tabs)
+## Properties (ix-tabs)
 
 ### Props
 
@@ -29,7 +29,7 @@ import SourceTabs from './../auto-generated/previews/web-component/tabs.md';
 
 <Events />
 
-## Properties (cw-tab-item)
+## Properties (ix-tab-item)
 
 ### Props
 
diff --git a/packages/documentation/docs/controls/tile.md b/packages/documentation/docs/controls/tile.md
index 568d2c86167..2b1b47558c3 100644
--- a/packages/documentation/docs/controls/tile.md
+++ b/packages/documentation/docs/controls/tile.md
@@ -1,8 +1,8 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 
-import Props from './../auto-generated/cw-tile/props.md';
-import Events from './../auto-generated/cw-tile/events.md';
+import Props from './../auto-generated/ix-tile/props.md';
+import Events from './../auto-generated/ix-tile/events.md';
 
 import SourceTile from './../auto-generated/previews/web-component/tile.md';
 
diff --git a/packages/documentation/docs/controls/time-picker.md b/packages/documentation/docs/controls/time-picker.md
index d45df2fb3cf..36465e9faab 100644
--- a/packages/documentation/docs/controls/time-picker.md
+++ b/packages/documentation/docs/controls/time-picker.md
@@ -1,7 +1,7 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
-import Props from './../auto-generated/cw-time-picker/props.md';
-import Events from './../auto-generated/cw-time-picker/events.md';
+import Props from './../auto-generated/ix-time-picker/props.md';
+import Events from './../auto-generated/ix-time-picker/events.md';
 
 import SourceTimepicker from './../auto-generated/previews/web-component/timepicker.md'
 
diff --git a/packages/documentation/docs/controls/toggle.md b/packages/documentation/docs/controls/toggle.md
index 9d41087fc23..801e2db8f5e 100644
--- a/packages/documentation/docs/controls/toggle.md
+++ b/packages/documentation/docs/controls/toggle.md
@@ -1,8 +1,8 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 
-import Props from './../auto-generated/cw-toggle/props.md';
-import Events from './../auto-generated/cw-toggle/events.md';
+import Props from './../auto-generated/ix-toggle/props.md';
+import Events from './../auto-generated/ix-toggle/events.md';
 
 import SourceToggle from './../auto-generated/previews/web-component/toggle.md';
 import SourceToggleLabel from './../auto-generated/previews/web-component/toggle-custom-label.md';
diff --git a/packages/documentation/docs/controls/tree.md b/packages/documentation/docs/controls/tree.md
index 663e391b913..86c8418dfe0 100644
--- a/packages/documentation/docs/controls/tree.md
+++ b/packages/documentation/docs/controls/tree.md
@@ -1,8 +1,8 @@
 import Preview from '@site/src/components/Preview';
 import SourceTree from './../auto-generated/previews/web-component/tree.md';
 import SourceTreeCustom from './../auto-generated/previews/web-component/tree-custom.md';
-import Props from './../auto-generated/cw-tree/props.md';
-import Events from './../auto-generated/cw-tree/events.md';
+import Props from './../auto-generated/ix-tree/props.md';
+import Events from './../auto-generated/ix-tree/events.md';
 import TabItem from '@theme/TabItem';
 
 # Tree
diff --git a/packages/documentation/docs/controls/upload.md b/packages/documentation/docs/controls/upload.md
index 9cdd9238068..49366080ec1 100644
--- a/packages/documentation/docs/controls/upload.md
+++ b/packages/documentation/docs/controls/upload.md
@@ -1,8 +1,8 @@
 import TabItem from '@theme/TabItem';
 import Preview from '@site/src/components/Preview';
 
-import Props from './../auto-generated/cw-upload/props.md';
-import Events from './../auto-generated/cw-upload/events.md';
+import Props from './../auto-generated/ix-upload/props.md';
+import Events from './../auto-generated/ix-upload/events.md';
 
 import SourceUpload from './../auto-generated/previews/web-component/upload.md';
 
diff --git a/packages/documentation/docs/icon-library/icons.md b/packages/documentation/docs/icon-library/icons.md
index 4535348135c..543c86000c5 100644
--- a/packages/documentation/docs/icon-library/icons.md
+++ b/packages/documentation/docs/icon-library/icons.md
@@ -25,9 +25,9 @@ Using icons within your project. We need to:
 ### Web component
 
 ```html
-<cw-icon name="star" size="16"></cw-icon>
-<cw-icon name="star" size="24"></cw-icon>
-<cw-icon name="star" size="32"></cw-icon>
+<ix-icon name="star" size="16"></ix-icon>
+<ix-icon name="star" size="24"></ix-icon>
+<ix-icon name="star" size="32"></ix-icon>
 ```
 
 ## Example Angular style.scss
diff --git a/packages/documentation/docs/installation/angular.md b/packages/documentation/docs/installation/angular.md
index c5d09d68115..eb75bd99b69 100644
--- a/packages/documentation/docs/installation/angular.md
+++ b/packages/documentation/docs/installation/angular.md
@@ -19,7 +19,7 @@ npm i -S @siemens/ix-icons@latest
 
 ```css
 @import '../node_modules/@siemens/ix-icons/dist/scss/ix-webfont.scss';
-@import '../node_modules/@siemens/ix/dist/ix/ix.css';
+@import '../node_modules/@siemens/ix/dist/siemens-ix/siemens-ix.css';
 ```
 
 Import `IxModule` and `BrowserAnimationsModule` (in some cases also the `RouterModule.forRoot([/** your routes **/])`) to your application module.
diff --git a/packages/documentation/docs/installation/javascript.md b/packages/documentation/docs/installation/javascript.md
index e758caa1b7a..fb7983d8415 100644
--- a/packages/documentation/docs/installation/javascript.md
+++ b/packages/documentation/docs/installation/javascript.md
@@ -28,7 +28,7 @@ npm i -S @siemens/ix-icons@latest
 ### Load common style sheet
 
 ```html
-<link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+<link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
 ```
 
 ### Load `ix` Web Components
diff --git a/packages/documentation/docs/installation/react.md b/packages/documentation/docs/installation/react.md
index d1cec0b9daa..3575840ea2e 100644
--- a/packages/documentation/docs/installation/react.md
+++ b/packages/documentation/docs/installation/react.md
@@ -19,5 +19,5 @@ npm i -S @siemens/ix-icons@latest
 
 ```css
 @import '../node_modules/@siemens/ix-icons/dist/scss/ix-webfont.scss';
-@import '../node_modules/@siemens/ix/dist/ix/ix.css';
+@import '../node_modules/@siemens/ix/dist/siemens-ix/siemens-ix.css';
 ```
diff --git a/packages/documentation/docusaurus.config.js b/packages/documentation/docusaurus.config.js
index bddbba267a9..e5a3048bf72 100644
--- a/packages/documentation/docusaurus.config.js
+++ b/packages/documentation/docusaurus.config.js
@@ -31,7 +31,7 @@ const config = {
         theme: {
           customCss: [
             require.resolve(
-              './../../node_modules/@siemens/ix/dist/core-ui-core/core-ui-core.css'
+              './../../node_modules/@siemens/ix/dist/siemens-ix/siemens-ix.css'
             ),
             require.resolve(
               './../../node_modules/@siemens/core-ui-icons/dist/css/core-ui-webfont.css'
diff --git a/packages/documentation/src/components/Card.module.css b/packages/documentation/src/components/Card.module.css
index 5516b55be09..ea36ef5128b 100644
--- a/packages/documentation/src/components/Card.module.css
+++ b/packages/documentation/src/components/Card.module.css
@@ -25,7 +25,6 @@
   height: 19.25rem;
 }
 
-
 .Splitter {
   height: 2px;
   width: 100%;
@@ -49,12 +48,12 @@
   height: 100%;
 }
 
-.Icon cw-icon {
+.Icon ix-icon {
   width: 100%;
   height: 100%;
 }
 
-.Icon cw-icon i {
+.Icon ix-icon i {
   width: 100%;
   height: 100%;
   display: flex;
@@ -64,7 +63,6 @@
   color: var(--theme-color-std-text) !important;
 }
 
-
 .Card__Primary {
   background-color: var(--theme-color-primary);
 }
@@ -73,6 +71,6 @@
   color: var(--theme-color-inv-std-text);
 }
 
-.Card__Primary .Icon cw-icon i {
+.Card__Primary .Icon ix-icon i {
   color: var(--theme-color-inv-std-text) !important;
-}
\ No newline at end of file
+}
diff --git a/packages/documentation/src/components/Card.tsx b/packages/documentation/src/components/Card.tsx
index 7b1b3267c5e..f1e269a1a85 100644
--- a/packages/documentation/src/components/Card.tsx
+++ b/packages/documentation/src/components/Card.tsx
@@ -25,7 +25,7 @@ export function Card(props: {
 
   function getIcon() {
     //@ts-ignore
-    return <cw-icon name={props.icon}></cw-icon>;
+    return <ix-icon name={props.icon}></ix-icon>;
   }
 
   return (
diff --git a/packages/documentation/src/components/FrameworkSelection.tsx b/packages/documentation/src/components/FrameworkSelection.tsx
index 295c67009fb..8b170b7797f 100644
--- a/packages/documentation/src/components/FrameworkSelection.tsx
+++ b/packages/documentation/src/components/FrameworkSelection.tsx
@@ -5,7 +5,7 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 export default function FrameworkSelection(): JSX.Element {
-  const ref = useRef<HTMLCwSelectElement>();
+  const ref = useRef<HTMLIxSelectElement>();
 
   const [framework, setFramework] = useState<'angular' | 'webcomponent'>(
     'angular'
@@ -30,18 +30,18 @@ export default function FrameworkSelection(): JSX.Element {
   }, [ref]);
 
   return (
-    <cw-select
+    <ix-select
       ref={ref}
       default-value={framework}
       style={{
         width: '100%',
       }}
     >
-      <cw-select-item
+      <ix-select-item
         value="webcomponent"
         label="Webcomponent"
-      ></cw-select-item>
-      <cw-select-item value="angular" label="Angular"></cw-select-item>
-    </cw-select>
+      ></ix-select-item>
+      <ix-select-item value="angular" label="Angular"></ix-select-item>
+    </ix-select>
   );
 }
diff --git a/packages/documentation/src/components/Guideline.tsx b/packages/documentation/src/components/Guideline.tsx
index 9035dad9499..f7116b77387 100644
--- a/packages/documentation/src/components/Guideline.tsx
+++ b/packages/documentation/src/components/Guideline.tsx
@@ -8,15 +8,17 @@ import styles from './Guideline.module.css';
 export function Guideline(props: { label: string; do?: boolean }) {
   function getIcon() {
     if (props.do) {
-      return <cw-icon name="single-check" size="16" color="color-success"></cw-icon>;
+      return (
+        <ix-icon name="single-check" size="16" color="color-success"></ix-icon>
+      );
     } else {
-      return <cw-icon name="close" size="16" color="color-alarm"></cw-icon>;
+      return <ix-icon name="close" size="16" color="color-alarm"></ix-icon>;
     }
   }
 
   return (
-    <div className={ clsx(styles.Guideline)}>
-      <div className={ clsx(styles.Icon)}>{getIcon()}</div>
+    <div className={clsx(styles.Guideline)}>
+      <div className={clsx(styles.Icon)}>{getIcon()}</div>
       <div>{props.label}</div>
     </div>
   );
diff --git a/packages/documentation/src/components/Icons.tsx b/packages/documentation/src/components/Icons.tsx
index 347ad05dd98..ac9afc003c9 100644
--- a/packages/documentation/src/components/Icons.tsx
+++ b/packages/documentation/src/components/Icons.tsx
@@ -16,7 +16,7 @@ export default function Icons() {
 
   const copyToClipboard = useCopyToClipboard({
     angular: (data: any) => `<i class="glyph glyph-${data}"></i>`,
-    webcomponent: (data: any) => `<cw-icon name="${data}"></cw-icon>`,
+    webcomponent: (data: any) => `<ix-icon name="${data}"></ix-icon>`,
   });
   return (
     <>
@@ -39,7 +39,7 @@ export default function Icons() {
               onClick={() => copyToClipboard(refs.current[icon])}
             >
               <div>
-                <cw-icon name={icon}></cw-icon>
+                <ix-icon name={icon}></ix-icon>
               </div>
               <input
                 ref={(r) => {
diff --git a/packages/documentation/src/components/SwitchTheme.tsx b/packages/documentation/src/components/SwitchTheme.tsx
index d2fd4712c28..3cb9c567fb5 100644
--- a/packages/documentation/src/components/SwitchTheme.tsx
+++ b/packages/documentation/src/components/SwitchTheme.tsx
@@ -1,7 +1,7 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { CwIcon } from '@siemens/ix-react';
+import { IxIcon } from '@siemens/ix-react';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { DEFAULT_THEME } from './config';
@@ -71,11 +71,11 @@ export function SwitchTheme(props: { icon: string; label: string }) {
         onClick={() => setOpen(!open)}
       >
         <div className={styles.Icon}>
-          <CwIcon name={props.icon} size="16"></CwIcon>
+          <IxIcon name={props.icon} size="16"></IxIcon>
         </div>
         <div>{props.label}</div>
         <div className={styles.Chevron}>
-          <CwIcon name="chevron-down-small"></CwIcon>
+          <IxIcon name="chevron-down-small"></IxIcon>
         </div>
       </div>
       {open ? (
diff --git a/packages/documentation/src/theme/DocSidebarItem/Category/index.js b/packages/documentation/src/theme/DocSidebarItem/Category/index.js
index bbea0d674b1..fa599ba57ce 100644
--- a/packages/documentation/src/theme/DocSidebarItem/Category/index.js
+++ b/packages/documentation/src/theme/DocSidebarItem/Category/index.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
 import clsx from 'clsx';
-import { CwIcon } from '@siemens/ix-react';
+import { IxIcon } from '@siemens/ix-react';
 import {
   ThemeClassNames,
   useThemeConfig,
@@ -18,7 +18,7 @@ import Link from '@docusaurus/Link';
 import { translate } from '@docusaurus/Translate';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import DocSidebarItems from '@theme/DocSidebarItems';
-// import { CwIcon } from '@siemens/ix-react';
+// import { IxIcon } from '@siemens/ix-react';
 
 // If we navigate to a category and it becomes active, it should automatically
 // expand itself
@@ -119,9 +119,9 @@ export default function DocSidebarItemCategory({
 
   const Icon = () =>
     collapsed ? (
-      <CwIcon name="chevron-right-small" />
+      <IxIcon name="chevron-right-small" />
     ) : (
-      <CwIcon name="chevron-down-small" />
+      <IxIcon name="chevron-down-small" />
     );
 
   return (
diff --git a/packages/documentation/static/webcomponent-examples/about-and-legal.html b/packages/documentation/static/webcomponent-examples/about-and-legal.html
index a231dea01b0..6b6a2f34921 100644
--- a/packages/documentation/static/webcomponent-examples/about-and-legal.html
+++ b/packages/documentation/static/webcomponent-examples/about-and-legal.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,19 +17,19 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-basic-navigation>
-      <cw-menu>
-        <cw-menu-about>
-          <cw-menu-about-item label="Tab 1">Content 1</cw-menu-about-item>
-          <cw-menu-about-item label="Tab 2">Content 2</cw-menu-about-item>
-        </cw-menu-about>
-      </cw-menu>
-    </cw-basic-navigation>
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-about>
+          <ix-menu-about-item label="Tab 1">Content 1</ix-menu-about-item>
+          <ix-menu-about-item label="Tab 2">Content 2</ix-menu-about-item>
+        </ix-menu-about>
+      </ix-menu>
+    </ix-basic-navigation>
 
     <script>
       (async function () {
-        await window.customElements.whenDefined('cw-menu');
-        const instance = document.querySelector('cw-menu');
+        await window.customElements.whenDefined('ix-menu');
+        const instance = document.querySelector('ix-menu');
         await instance.toggleAbout(true);
       })();
     </script>
diff --git a/packages/documentation/static/webcomponent-examples/aggrid.html b/packages/documentation/static/webcomponent-examples/aggrid.html
index 022c1bf6f19..8ad84097765 100644
--- a/packages/documentation/static/webcomponent-examples/aggrid.html
+++ b/packages/documentation/static/webcomponent-examples/aggrid.html
@@ -23,7 +23,7 @@
     </script>
 
     <!-- Load Siemens IX -->
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
diff --git a/packages/documentation/static/webcomponent-examples/animated-tabs.html b/packages/documentation/static/webcomponent-examples/animated-tabs.html
index d70f07f9942..62bb1ea16a4 100644
--- a/packages/documentation/static/webcomponent-examples/animated-tabs.html
+++ b/packages/documentation/static/webcomponent-examples/animated-tabs.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,17 +17,17 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-animated-tabs>
-      <cw-animated-tab icon="document">
+    <ix-animated-tabs>
+      <ix-animated-tab icon="document">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr
-      </cw-animated-tab>
-      <cw-animated-tab icon="cut" count="10">
+      </ix-animated-tab>
+      <ix-animated-tab icon="cut" count="10">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr
-      </cw-animated-tab>
-      <cw-animated-tab icon="star">
+      </ix-animated-tab>
+      <ix-animated-tab icon="star">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr
-      </cw-animated-tab>
-    </cw-animated-tabs>
+      </ix-animated-tab>
+    </ix-animated-tabs>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/basic-navigation-without-header.html b/packages/documentation/static/webcomponent-examples/basic-navigation-without-header.html
index 1c1b31c079d..2378621dfd9 100644
--- a/packages/documentation/static/webcomponent-examples/basic-navigation-without-header.html
+++ b/packages/documentation/static/webcomponent-examples/basic-navigation-without-header.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,12 +17,12 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-basic-navigation hide-header>
-      <cw-menu>
-        <cw-menu-item>Item 1</cw-menu-item>
-        <cw-menu-item>Item 2</cw-menu-item>
-      </cw-menu>
-    </cw-basic-navigation>
+    <ix-basic-navigation hide-header>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+      </ix-menu>
+    </ix-basic-navigation>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/basic-navigation.html b/packages/documentation/static/webcomponent-examples/basic-navigation.html
index 758f788f8d7..fa588e1262e 100644
--- a/packages/documentation/static/webcomponent-examples/basic-navigation.html
+++ b/packages/documentation/static/webcomponent-examples/basic-navigation.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,12 +17,12 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-basic-navigation>
-      <cw-menu>
-        <cw-menu-item>Item 1</cw-menu-item>
-        <cw-menu-item>Item 2</cw-menu-item>
-      </cw-menu>
-    </cw-basic-navigation>
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-item>Item 2</ix-menu-item>
+      </ix-menu>
+    </ix-basic-navigation>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/blind.html b/packages/documentation/static/webcomponent-examples/blind.html
index c7a89ba6916..b75bb54e6b5 100644
--- a/packages/documentation/static/webcomponent-examples/blind.html
+++ b/packages/documentation/static/webcomponent-examples/blind.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,7 +17,7 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-blind label="Example">
+    <ix-blind label="Example">
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
       eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
       voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
@@ -27,7 +27,7 @@
       diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
       Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
       sit amet.
-    </cw-blind>
+    </ix-blind>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/breadcrumb-next-items.html b/packages/documentation/static/webcomponent-examples/breadcrumb-next-items.html
index 101a678e587..9576de4f8f6 100644
--- a/packages/documentation/static/webcomponent-examples/breadcrumb-next-items.html
+++ b/packages/documentation/static/webcomponent-examples/breadcrumb-next-items.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,14 +17,14 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-breadcrumb>
-      <cw-breadcrumb-item label="Item 1"></cw-breadcrumb-item>
-      <cw-breadcrumb-item label="Item 2"></cw-breadcrumb-item>
-      <cw-breadcrumb-item label="Item 3"></cw-breadcrumb-item>
-    </cw-breadcrumb>
+    <ix-breadcrumb>
+      <ix-breadcrumb-item label="Item 1"></ix-breadcrumb-item>
+      <ix-breadcrumb-item label="Item 2"></ix-breadcrumb-item>
+      <ix-breadcrumb-item label="Item 3"></ix-breadcrumb-item>
+    </ix-breadcrumb>
 
     <script>
-      const instance = document.querySelector('cw-breadcrumb');
+      const instance = document.querySelector('ix-breadcrumb');
       instance.nextItems = ['Next Item 1'];
     </script>
     <!-- Preview code -->
diff --git a/packages/documentation/static/webcomponent-examples/breadcrumb-truncate.html b/packages/documentation/static/webcomponent-examples/breadcrumb-truncate.html
index 4f0e97ee7ce..54cda663a89 100644
--- a/packages/documentation/static/webcomponent-examples/breadcrumb-truncate.html
+++ b/packages/documentation/static/webcomponent-examples/breadcrumb-truncate.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,13 +17,13 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-breadcrumb visible-item-count="3">
-      <cw-breadcrumb-item label="Item 1"></cw-breadcrumb-item>
-      <cw-breadcrumb-item label="Item 2"></cw-breadcrumb-item>
-      <cw-breadcrumb-item label="Item 3"></cw-breadcrumb-item>
-      <cw-breadcrumb-item label="Item 4"></cw-breadcrumb-item>
-      <cw-breadcrumb-item label="Item 5"></cw-breadcrumb-item>
-    </cw-breadcrumb>
+    <ix-breadcrumb visible-item-count="3">
+      <ix-breadcrumb-item label="Item 1"></ix-breadcrumb-item>
+      <ix-breadcrumb-item label="Item 2"></ix-breadcrumb-item>
+      <ix-breadcrumb-item label="Item 3"></ix-breadcrumb-item>
+      <ix-breadcrumb-item label="Item 4"></ix-breadcrumb-item>
+      <ix-breadcrumb-item label="Item 5"></ix-breadcrumb-item>
+    </ix-breadcrumb>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/breadcrumb.html b/packages/documentation/static/webcomponent-examples/breadcrumb.html
index 5510cfcbda2..bf1637b4a81 100644
--- a/packages/documentation/static/webcomponent-examples/breadcrumb.html
+++ b/packages/documentation/static/webcomponent-examples/breadcrumb.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,11 +17,11 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-breadcrumb>
-      <cw-breadcrumb-item label="Item 1"></cw-breadcrumb-item>
-      <cw-breadcrumb-item label="Item 2"></cw-breadcrumb-item>
-      <cw-breadcrumb-item label="Item 3"></cw-breadcrumb-item>
-    </cw-breadcrumb>
+    <ix-breadcrumb>
+      <ix-breadcrumb-item label="Item 1"></ix-breadcrumb-item>
+      <ix-breadcrumb-item label="Item 2"></ix-breadcrumb-item>
+      <ix-breadcrumb-item label="Item 3"></ix-breadcrumb-item>
+    </ix-breadcrumb>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/button-group.html b/packages/documentation/static/webcomponent-examples/button-group.html
index e32992eb18c..bd8ea0b3364 100644
--- a/packages/documentation/static/webcomponent-examples/button-group.html
+++ b/packages/documentation/static/webcomponent-examples/button-group.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -18,9 +18,9 @@
   <body class="theme-brand-dark">
     <!-- Preview code -->
     <div class="btn-group">
-      <cw-button outline>Left</cw-button>
-      <cw-button>Middle</cw-button>
-      <cw-button outline>Right</cw-button>
+      <ix-button outline>Left</ix-button>
+      <ix-button>Middle</ix-button>
+      <ix-button outline>Right</ix-button>
     </div>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
diff --git a/packages/documentation/static/webcomponent-examples/button-selected.html b/packages/documentation/static/webcomponent-examples/button-selected.html
index b46b2c85af5..754efa3d13e 100644
--- a/packages/documentation/static/webcomponent-examples/button-selected.html
+++ b/packages/documentation/static/webcomponent-examples/button-selected.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,11 +17,11 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-button class="m-1" variant="Secondary" invisible
-      >Not selected</cw-button
+    <ix-button class="m-1" variant="Secondary" invisible
+      >Not selected</ix-button
     >
-    <cw-button class="m-1" variant="Secondary" invisible selected
-      >Selected</cw-button
+    <ix-button class="m-1" variant="Secondary" invisible selected
+      >Selected</ix-button
     >
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
diff --git a/packages/documentation/static/webcomponent-examples/button-with-icon.html b/packages/documentation/static/webcomponent-examples/button-with-icon.html
index ff44cbe06a5..b6c6574fd66 100644
--- a/packages/documentation/static/webcomponent-examples/button-with-icon.html
+++ b/packages/documentation/static/webcomponent-examples/button-with-icon.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -18,7 +18,7 @@
   <body class="theme-brand-dark">
     <!-- Preview code -->
 
-    <cw-icon-button icon="star"> </cw-icon-button>
+    <ix-icon-button icon="star"> </ix-icon-button>
 
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
diff --git a/packages/documentation/static/webcomponent-examples/buttons.html b/packages/documentation/static/webcomponent-examples/buttons.html
index 3bdd3938e72..e4722eb7d41 100644
--- a/packages/documentation/static/webcomponent-examples/buttons.html
+++ b/packages/documentation/static/webcomponent-examples/buttons.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,10 +17,10 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-button class="m-1" variant="primary">Webcomponents button</cw-button>
-    <cw-button class="m-1" variant="secondary">Webcomponents button</cw-button>
-    <cw-button class="m-1" outline>Webcomponents button</cw-button>
-    <cw-button class="m-1" invisible>Webcomponents button</cw-button>
+    <ix-button class="m-1" variant="primary">Webcomponents button</ix-button>
+    <ix-button class="m-1" variant="secondary">Webcomponents button</ix-button>
+    <ix-button class="m-1" outline>Webcomponents button</ix-button>
+    <ix-button class="m-1" invisible>Webcomponents button</ix-button>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/category-filter-suggestions.html b/packages/documentation/static/webcomponent-examples/category-filter-suggestions.html
index 9b3b134f81b..3208a00aa07 100644
--- a/packages/documentation/static/webcomponent-examples/category-filter-suggestions.html
+++ b/packages/documentation/static/webcomponent-examples/category-filter-suggestions.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,9 +17,9 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-category-filter placeholder="Filter by"></cw-category-filter>
+    <ix-category-filter placeholder="Filter by"></ix-category-filter>
     <script>
-      const categoryFilter = document.querySelector('cw-category-filter');
+      const categoryFilter = document.querySelector('ix-category-filter');
       categoryFilter.suggestions = ['Item 1', 'Item 2'];
     </script>
     <!-- Preview code -->
diff --git a/packages/documentation/static/webcomponent-examples/category-filter.html b/packages/documentation/static/webcomponent-examples/category-filter.html
index a189de8dcff..4991c6a2cfa 100644
--- a/packages/documentation/static/webcomponent-examples/category-filter.html
+++ b/packages/documentation/static/webcomponent-examples/category-filter.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,7 +17,7 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-category-filter placeholder="Filter by"></cw-category-filter>
+    <ix-category-filter placeholder="Filter by"></ix-category-filter>
     <script>
       const repeatCategories = false;
       const filterState = {
@@ -41,7 +41,7 @@
         },
       };
 
-      const categoryFilter = document.querySelector('cw-category-filter');
+      const categoryFilter = document.querySelector('ix-category-filter');
       categoryFilter.repeatCategories = repeatCategories;
       categoryFilter.filterState = filterState;
       categoryFilter.categories = categories;
diff --git a/packages/documentation/static/webcomponent-examples/checkbox-indeterminate.html b/packages/documentation/static/webcomponent-examples/checkbox-indeterminate.html
index 23a2429fdca..3adaed6f929 100644
--- a/packages/documentation/static/webcomponent-examples/checkbox-indeterminate.html
+++ b/packages/documentation/static/webcomponent-examples/checkbox-indeterminate.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
diff --git a/packages/documentation/static/webcomponent-examples/checkbox.html b/packages/documentation/static/webcomponent-examples/checkbox.html
index f5ba33b40ac..2ef32487db3 100644
--- a/packages/documentation/static/webcomponent-examples/checkbox.html
+++ b/packages/documentation/static/webcomponent-examples/checkbox.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
diff --git a/packages/documentation/static/webcomponent-examples/chip.html b/packages/documentation/static/webcomponent-examples/chip.html
index 3013fb8f77e..dba98fc5c7a 100644
--- a/packages/documentation/static/webcomponent-examples/chip.html
+++ b/packages/documentation/static/webcomponent-examples/chip.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -23,7 +23,7 @@
         max-width: 20rem;
       }
 
-      .example > cw-chip {
+      .example > ix-chip {
         margin-bottom: 0.5rem;
       }
     </style>
@@ -31,19 +31,19 @@
   <body class="theme-brand-dark">
     <!-- Preview code -->
     <div class="example">
-      <cw-chip closable outline> Primary </cw-chip>
-      <cw-chip icon="print">Primary with icon</cw-chip>
-      <cw-chip icon="print" style="width: 10rem" closable> Primary </cw-chip>
+      <ix-chip closable outline> Primary </ix-chip>
+      <ix-chip icon="print">Primary with icon</ix-chip>
+      <ix-chip icon="print" style="width: 10rem" closable> Primary </ix-chip>
 
-      <cw-chip variant="critical" closable outline> Alarm </cw-chip>
-      <cw-chip variant="alarm" icon="print"> Alarm with icon </cw-chip>
-      <cw-chip variant="alarm" icon="print" style="width: 10rem" closable>
+      <ix-chip variant="critical" closable outline> Alarm </ix-chip>
+      <ix-chip variant="alarm" icon="print"> Alarm with icon </ix-chip>
+      <ix-chip variant="alarm" icon="print" style="width: 10rem" closable>
         Alarm
-      </cw-chip>
-      <cw-chip variant="warning" icon="print" style="width: 10rem" closable>
+      </ix-chip>
+      <ix-chip variant="warning" icon="print" style="width: 10rem" closable>
         Alarm
-      </cw-chip>
-      <cw-chip
+      </ix-chip>
+      <ix-chip
         background="purple"
         color="green"
         variant="custom"
@@ -52,7 +52,7 @@
         closable
       >
         Custom
-      </cw-chip>
+      </ix-chip>
     </div>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
diff --git a/packages/documentation/static/webcomponent-examples/datepicker.html b/packages/documentation/static/webcomponent-examples/datepicker.html
index 1d536db00a1..0b1dfe4ab42 100644
--- a/packages/documentation/static/webcomponent-examples/datepicker.html
+++ b/packages/documentation/static/webcomponent-examples/datepicker.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,7 +17,7 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-date-picker style="display: block; width: 25rem"></cw-date-picker>
+    <ix-date-picker style="display: block; width: 25rem"></ix-date-picker>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/datetimepicker.html b/packages/documentation/static/webcomponent-examples/datetimepicker.html
index 885f877ec97..656aaa0a749 100644
--- a/packages/documentation/static/webcomponent-examples/datetimepicker.html
+++ b/packages/documentation/static/webcomponent-examples/datetimepicker.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,9 +17,9 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-datetime-picker
+    <ix-datetime-picker
       style="display: block; width: 35rem; height: 26rem"
-    ></cw-datetime-picker>
+    ></ix-datetime-picker>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/drawer-full-height.html b/packages/documentation/static/webcomponent-examples/drawer-full-height.html
index 8dd0504aae0..a0b361dee04 100644
--- a/packages/documentation/static/webcomponent-examples/drawer-full-height.html
+++ b/packages/documentation/static/webcomponent-examples/drawer-full-height.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -18,20 +18,20 @@
   <body class="theme-brand-dark">
     <!-- Preview code -->
 
-    <cw-drawer>
+    <ix-drawer>
       <span>Some content of drawer</span>
-    </cw-drawer>
+    </ix-drawer>
 
-    <cw-button>Toggle drawer</cw-button>
+    <ix-button>Toggle drawer</ix-button>
 
     <script>
       (async function () {
-        await window.customElements.whenDefined('cw-drawer');
-        const drawer = document.querySelector('cw-drawer');
+        await window.customElements.whenDefined('ix-drawer');
+        const drawer = document.querySelector('ix-drawer');
         drawer.fullHeight = true;
         drawer.closeOnClickOutside = true;
 
-        const button = document.querySelector('cw-button');
+        const button = document.querySelector('ix-button');
         button.addEventListener('click', () => {
           drawer.show = !drawer.show;
         });
diff --git a/packages/documentation/static/webcomponent-examples/drawer.html b/packages/documentation/static/webcomponent-examples/drawer.html
index 62e6b84e8f1..4b5c50641d3 100644
--- a/packages/documentation/static/webcomponent-examples/drawer.html
+++ b/packages/documentation/static/webcomponent-examples/drawer.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -18,21 +18,21 @@
   <body class="theme-brand-dark">
     <!-- Preview code -->
 
-    <cw-drawer>
+    <ix-drawer>
       <span>Some content of drawer</span>
-    </cw-drawer>
+    </ix-drawer>
 
-    <cw-button>Toggle drawer</cw-button>
+    <ix-button>Toggle drawer</ix-button>
 
     <script>
       (async function () {
-        await window.customElements.whenDefined('cw-drawer');
+        await window.customElements.whenDefined('ix-drawer');
 
-        const drawer = document.querySelector('cw-drawer');
+        const drawer = document.querySelector('ix-drawer');
         drawer.fullHeight = false;
         drawer.closeOnClickOutside = true;
 
-        const button = document.querySelector('cw-button');
+        const button = document.querySelector('ix-button');
         button.addEventListener('click', () => {
           drawer.show = !drawer.show;
         });
diff --git a/packages/documentation/static/webcomponent-examples/dropdown-icon.html b/packages/documentation/static/webcomponent-examples/dropdown-icon.html
index 1995dec1eb2..0972ce7d382 100644
--- a/packages/documentation/static/webcomponent-examples/dropdown-icon.html
+++ b/packages/documentation/static/webcomponent-examples/dropdown-icon.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,12 +17,12 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-button id="iconTriggerId">Open</cw-button>
-    <cw-dropdown trigger="iconTriggerId">
-      <cw-dropdown-item icon="star" label="Item 1"></cw-dropdown-item>
-      <cw-dropdown-item icon="document" label="Item 2"></cw-dropdown-item>
-      <cw-dropdown-item icon="bulb" label="Item 3"></cw-dropdown-item>
-    </cw-dropdown>
+    <ix-button id="iconTriggerId">Open</ix-button>
+    <ix-dropdown trigger="iconTriggerId">
+      <ix-dropdown-item icon="star" label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item icon="document" label="Item 2"></ix-dropdown-item>
+      <ix-dropdown-item icon="bulb" label="Item 3"></ix-dropdown-item>
+    </ix-dropdown>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/dropdown.html b/packages/documentation/static/webcomponent-examples/dropdown.html
index bb37ddfeeec..e6679805893 100644
--- a/packages/documentation/static/webcomponent-examples/dropdown.html
+++ b/packages/documentation/static/webcomponent-examples/dropdown.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,12 +17,12 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-button id="triggerId">Open</cw-button>
-    <cw-dropdown trigger="triggerId">
-      <cw-dropdown-item label="Item 1"></cw-dropdown-item>
-      <cw-dropdown-item label="Item 2"></cw-dropdown-item>
-      <cw-dropdown-item label="Item 3"></cw-dropdown-item>
-    </cw-dropdown>
+    <ix-button id="triggerId">Open</ix-button>
+    <ix-dropdown trigger="triggerId">
+      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 3"></ix-dropdown-item>
+    </ix-dropdown>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/event-list-compact.html b/packages/documentation/static/webcomponent-examples/event-list-compact.html
index 1c2461d9e76..fe644024ee0 100644
--- a/packages/documentation/static/webcomponent-examples/event-list-compact.html
+++ b/packages/documentation/static/webcomponent-examples/event-list-compact.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,12 +17,12 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-event-list compact>
-      <cw-event-list-item color="color-primary">Text 1</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Text 2</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Text 3</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Text 4</cw-event-list-item>
-    </cw-event-list>
+    <ix-event-list compact>
+      <ix-event-list-item color="color-primary">Text 1</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 2</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 3</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 4</ix-event-list-item>
+    </ix-event-list>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/event-list-custom-item-height.html b/packages/documentation/static/webcomponent-examples/event-list-custom-item-height.html
index bc1ef9d453e..c7624827b73 100644
--- a/packages/documentation/static/webcomponent-examples/event-list-custom-item-height.html
+++ b/packages/documentation/static/webcomponent-examples/event-list-custom-item-height.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,10 +17,10 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-event-list item-height="L">
-      <cw-event-list-item color="color-primary">Test 1</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Test 2</cw-event-list-item>
-    </cw-event-list>
+    <ix-event-list item-height="L">
+      <ix-event-list-item color="color-primary">Test 1</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Test 2</ix-event-list-item>
+    </ix-event-list>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/event-list-selected.html b/packages/documentation/static/webcomponent-examples/event-list-selected.html
index 19d301cb843..fdd36e4fb08 100644
--- a/packages/documentation/static/webcomponent-examples/event-list-selected.html
+++ b/packages/documentation/static/webcomponent-examples/event-list-selected.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,14 +17,14 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-event-list>
-      <cw-event-list-item color="color-primary">Text 1</cw-event-list-item>
-      <cw-event-list-item color="color-primary" selected
-        >Text 2</cw-event-list-item
+    <ix-event-list>
+      <ix-event-list-item color="color-primary">Text 1</ix-event-list-item>
+      <ix-event-list-item color="color-primary" selected
+        >Text 2</ix-event-list-item
       >
-      <cw-event-list-item color="color-primary">Text 3</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Text 4</cw-event-list-item>
-    </cw-event-list>
+      <ix-event-list-item color="color-primary">Text 3</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 4</ix-event-list-item>
+    </ix-event-list>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/event-list.html b/packages/documentation/static/webcomponent-examples/event-list.html
index 068401b45f0..46138737a4a 100644
--- a/packages/documentation/static/webcomponent-examples/event-list.html
+++ b/packages/documentation/static/webcomponent-examples/event-list.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,12 +17,12 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-event-list>
-      <cw-event-list-item color="color-primary">Text 1</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Text 2</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Text 3</cw-event-list-item>
-      <cw-event-list-item color="color-primary">Text 4</cw-event-list-item>
-    </cw-event-list>
+    <ix-event-list>
+      <ix-event-list-item color="color-primary">Text 1</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 2</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 3</ix-event-list-item>
+      <ix-event-list-item color="color-primary">Text 4</ix-event-list-item>
+    </ix-event-list>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/expanding-search.html b/packages/documentation/static/webcomponent-examples/expanding-search.html
index 564c9819d2a..a387e6419aa 100644
--- a/packages/documentation/static/webcomponent-examples/expanding-search.html
+++ b/packages/documentation/static/webcomponent-examples/expanding-search.html
@@ -8,7 +8,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -16,7 +16,7 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-expanding-search placeholder="Search..."></cw-expanding-search>
+    <ix-expanding-search placeholder="Search..."></ix-expanding-search>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/flip-tile.html b/packages/documentation/static/webcomponent-examples/flip-tile.html
index 65b7832eefc..a231aa1d938 100644
--- a/packages/documentation/static/webcomponent-examples/flip-tile.html
+++ b/packages/documentation/static/webcomponent-examples/flip-tile.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -25,7 +25,7 @@
         flex-wrap: wrap;
       }
 
-      .example > cw-flip-tile {
+      .example > ix-flip-tile {
         margin: 0 0.5rem 0.5rem 0;
       }
     </style>
@@ -33,67 +33,67 @@
   <body class="theme-brand-dark">
     <!-- Preview code -->
     <div class="example">
-      <cw-flip-tile>
+      <ix-flip-tile>
         <div slot="header">Flip header</div>
 
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div class="d-flex align-items-center">
-            <cw-icon name="info" size="16"></cw-icon>2021-06-22
+            <ix-icon name="info" size="16"></ix-icon>2021-06-22
           </div>
         </div>
 
-        <cw-flip-tile-content> Example 1 </cw-flip-tile-content>
-        <cw-flip-tile-content> Example 2 </cw-flip-tile-content>
-      </cw-flip-tile>
+        <ix-flip-tile-content> Example 1 </ix-flip-tile-content>
+        <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
+      </ix-flip-tile>
 
-      <cw-flip-tile state="Primary">
+      <ix-flip-tile state="Primary">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div class="d-flex align-items-center">
-            <cw-icon name="info" size="16"></cw-icon>2021-06-22
+            <ix-icon name="info" size="16"></ix-icon>2021-06-22
           </div>
         </div>
-        <cw-flip-tile-content> Example 1 </cw-flip-tile-content>
-        <cw-flip-tile-content> Example 2 </cw-flip-tile-content>
-      </cw-flip-tile>
+        <ix-flip-tile-content> Example 1 </ix-flip-tile-content>
+        <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
+      </ix-flip-tile>
 
-      <cw-flip-tile state="Info">
+      <ix-flip-tile state="Info">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div class="d-flex align-items-center">
-            <cw-icon name="info" size="16"></cw-icon>2021-06-22
+            <ix-icon name="info" size="16"></ix-icon>2021-06-22
           </div>
         </div>
-        <cw-flip-tile-content> Example 1 </cw-flip-tile-content>
-        <cw-flip-tile-content> Example 2 </cw-flip-tile-content>
-      </cw-flip-tile>
+        <ix-flip-tile-content> Example 1 </ix-flip-tile-content>
+        <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
+      </ix-flip-tile>
 
-      <cw-flip-tile state="Warning">
+      <ix-flip-tile state="Warning">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div class="d-flex align-items-center">
-            <cw-icon name="info" size="16"></cw-icon>2021-06-22
+            <ix-icon name="info" size="16"></ix-icon>2021-06-22
           </div>
         </div>
-        <cw-flip-tile-content> Example 1 </cw-flip-tile-content>
-        <cw-flip-tile-content> Example 2 </cw-flip-tile-content>
-      </cw-flip-tile>
+        <ix-flip-tile-content> Example 1 </ix-flip-tile-content>
+        <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
+      </ix-flip-tile>
 
-      <cw-flip-tile state="Alarm">
+      <ix-flip-tile state="Alarm">
         <div slot="header">Flip header</div>
         <div slot="footer">
           <div>Predicted maintenance date</div>
           <div class="d-flex align-items-center">
-            <cw-icon name="info" size="16"></cw-icon>2021-06-22
+            <ix-icon name="info" size="16"></ix-icon>2021-06-22
           </div>
         </div>
-        <cw-flip-tile-content> Example 1 </cw-flip-tile-content>
-        <cw-flip-tile-content> Example 2 </cw-flip-tile-content>
-      </cw-flip-tile>
+        <ix-flip-tile-content> Example 1 </ix-flip-tile-content>
+        <ix-flip-tile-content> Example 2 </ix-flip-tile-content>
+      </ix-flip-tile>
     </div>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
diff --git a/packages/documentation/static/webcomponent-examples/group-context-menu.html b/packages/documentation/static/webcomponent-examples/group-context-menu.html
index 730378f14d2..b2be89d580d 100644
--- a/packages/documentation/static/webcomponent-examples/group-context-menu.html
+++ b/packages/documentation/static/webcomponent-examples/group-context-menu.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,15 +17,15 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-group header="Header text" sub-header="Subheader text">
+    <ix-group header="Header text" sub-header="Subheader text">
       <div slot="dropdown">
-        <cw-group-dropdown-item label="Item 1"></cw-group-dropdown-item>
-        <cw-group-dropdown-item label="Item 2"></cw-group-dropdown-item>
+        <ix-group-dropdown-item label="Item 1"></ix-group-dropdown-item>
+        <ix-group-dropdown-item label="Item 2"></ix-group-dropdown-item>
       </div>
-      <cw-group-item text="Example text 1"></cw-group-item>
-      <cw-group-item text="Example text 2"></cw-group-item>
-      <cw-group-item text="Example text 3"></cw-group-item>
-    </cw-group>
+      <ix-group-item text="Example text 1"></ix-group-item>
+      <ix-group-item text="Example text 2"></ix-group-item>
+      <ix-group-item text="Example text 3"></ix-group-item>
+    </ix-group>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/group-custom-entry.html b/packages/documentation/static/webcomponent-examples/group-custom-entry.html
index c0af096aa31..b73e2d17807 100644
--- a/packages/documentation/static/webcomponent-examples/group-custom-entry.html
+++ b/packages/documentation/static/webcomponent-examples/group-custom-entry.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,11 +17,11 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-group header="Header text" sub-header="Subheader text">
-      <cw-group-item text="Example text 1"></cw-group-item>
-      <cw-group-item text="Example text 2"></cw-group-item>
-      <cw-group-item><cw-button>Test</cw-button></cw-group-item>
-    </cw-group>
+    <ix-group header="Header text" sub-header="Subheader text">
+      <ix-group-item text="Example text 1"></ix-group-item>
+      <ix-group-item text="Example text 2"></ix-group-item>
+      <ix-group-item><ix-button>Test</ix-button></ix-group-item>
+    </ix-group>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/group-header-suppressed.html b/packages/documentation/static/webcomponent-examples/group-header-suppressed.html
index 551654020d6..7dbbb07ac8f 100644
--- a/packages/documentation/static/webcomponent-examples/group-header-suppressed.html
+++ b/packages/documentation/static/webcomponent-examples/group-header-suppressed.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,15 +17,15 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-group
+    <ix-group
       header="Header text"
       sub-header="Subheader text"
       suppress-header-selection
     >
-      <cw-group-item text="Example text 1"></cw-group-item>
-      <cw-group-item text="Example text 2"></cw-group-item>
-      <cw-group-item text="Example text 3"></cw-group-item>
-    </cw-group>
+      <ix-group-item text="Example text 1"></ix-group-item>
+      <ix-group-item text="Example text 2"></ix-group-item>
+      <ix-group-item text="Example text 3"></ix-group-item>
+    </ix-group>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/group.html b/packages/documentation/static/webcomponent-examples/group.html
index 5771a4b109b..f946a36aab0 100644
--- a/packages/documentation/static/webcomponent-examples/group.html
+++ b/packages/documentation/static/webcomponent-examples/group.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,11 +17,11 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-group header="Header text" sub-header="Subheader text">
-      <cw-group-item text="Example text 1"></cw-group-item>
-      <cw-group-item text="Example text 2"></cw-group-item>
-      <cw-group-item text="Example text 3"></cw-group-item>
-    </cw-group>
+    <ix-group header="Header text" sub-header="Subheader text">
+      <ix-group-item text="Example text 1"></ix-group-item>
+      <ix-group-item text="Example text 2"></ix-group-item>
+      <ix-group-item text="Example text 3"></ix-group-item>
+    </ix-group>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/input-disabled.html b/packages/documentation/static/webcomponent-examples/input-disabled.html
index c84d7ab1f64..ca089a401b2 100644
--- a/packages/documentation/static/webcomponent-examples/input-disabled.html
+++ b/packages/documentation/static/webcomponent-examples/input-disabled.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
diff --git a/packages/documentation/static/webcomponent-examples/input-readonly.html b/packages/documentation/static/webcomponent-examples/input-readonly.html
index 95c73e1734e..7c915a22947 100644
--- a/packages/documentation/static/webcomponent-examples/input-readonly.html
+++ b/packages/documentation/static/webcomponent-examples/input-readonly.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
diff --git a/packages/documentation/static/webcomponent-examples/input-with-icon.html b/packages/documentation/static/webcomponent-examples/input-with-icon.html
index 3d216c0d080..c218898a88b 100644
--- a/packages/documentation/static/webcomponent-examples/input-with-icon.html
+++ b/packages/documentation/static/webcomponent-examples/input-with-icon.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -18,12 +18,12 @@
   <body class="theme-brand-dark">
     <!-- Preview code -->
     <form class="needs-validation m-2">
-      <cw-input-group>
+      <ix-input-group>
         <span slot="input-start">Price</span>
         <input type="number" class="form-control" />
         <span slot="input-end">.00</span>
         <span slot="input-end">$</span>
-      </cw-input-group>
+      </ix-input-group>
     </form>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
diff --git a/packages/documentation/static/webcomponent-examples/input.html b/packages/documentation/static/webcomponent-examples/input.html
index 2010dd7d541..d642d647e16 100644
--- a/packages/documentation/static/webcomponent-examples/input.html
+++ b/packages/documentation/static/webcomponent-examples/input.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
diff --git a/packages/documentation/static/webcomponent-examples/install.html b/packages/documentation/static/webcomponent-examples/install.html
index 7c23444c2cd..ea0a3d7d23d 100644
--- a/packages/documentation/static/webcomponent-examples/install.html
+++ b/packages/documentation/static/webcomponent-examples/install.html
@@ -9,13 +9,13 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
     </script>
   </head>
   <body class="theme-brand-dark">
-    <cw-button onclick="alert('Button clicked!')">Hello World!</cw-button>
+    <ix-button onclick="alert('Button clicked!')">Hello World!</ix-button>
   </body>
 </html>
diff --git a/packages/documentation/static/webcomponent-examples/message-bar.html b/packages/documentation/static/webcomponent-examples/message-bar.html
index 415b9d3d62a..1840f62c5fd 100644
--- a/packages/documentation/static/webcomponent-examples/message-bar.html
+++ b/packages/documentation/static/webcomponent-examples/message-bar.html
@@ -8,7 +8,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -16,13 +16,13 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-message-bar>Message text</cw-message-bar>
-    <cw-message-bar type="warning">Message text</cw-message-bar>
-    <cw-message-bar type="danger">
+    <ix-message-bar>Message text</ix-message-bar>
+    <ix-message-bar type="warning">Message text</ix-message-bar>
+    <ix-message-bar type="danger">
       <div class="d-flex align-items-center justify-content-between">
-        Message text <cw-button>Action</cw-button>
+        Message text <ix-button>Action</ix-button>
       </div>
-    </cw-message-bar>
+    </ix-message-bar>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/oss-licenses-pipe.html b/packages/documentation/static/webcomponent-examples/oss-licenses-pipe.html
index 170d88ad32d..62db4895f44 100644
--- a/packages/documentation/static/webcomponent-examples/oss-licenses-pipe.html
+++ b/packages/documentation/static/webcomponent-examples/oss-licenses-pipe.html
@@ -8,7 +8,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
diff --git a/packages/documentation/static/webcomponent-examples/pill.html b/packages/documentation/static/webcomponent-examples/pill.html
index 58bf86a055d..0ac83e8b035 100644
--- a/packages/documentation/static/webcomponent-examples/pill.html
+++ b/packages/documentation/static/webcomponent-examples/pill.html
@@ -9,40 +9,40 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
     </script>
     <style>
-      cw-pill {
+      ix-pill {
         margin: 0 0.5rem 0.5rem 0;
       }
     </style>
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-pill variant="custom" color="white" background="purple">
+    <ix-pill variant="custom" color="white" background="purple">
       Label
-    </cw-pill>
+    </ix-pill>
 
-    <cw-pill>Label</cw-pill>
-    <cw-pill outline>Label</cw-pill>
-    <cw-pill style="width: 8rem">Label</cw-pill>
+    <ix-pill>Label</ix-pill>
+    <ix-pill outline>Label</ix-pill>
+    <ix-pill style="width: 8rem">Label</ix-pill>
 
-    <cw-pill icon="star">Label</cw-pill>
-    <cw-pill icon="star" style="width: 8rem"> Label </cw-pill>
-    <cw-pill outline alignLeft icon="star" style="width: 8rem"> Label </cw-pill>
+    <ix-pill icon="star">Label</ix-pill>
+    <ix-pill icon="star" style="width: 8rem"> Label </ix-pill>
+    <ix-pill outline alignLeft icon="star" style="width: 8rem"> Label </ix-pill>
 
-    <cw-pill variant="alarm">Label</cw-pill>
-    <cw-pill variant="alarm" outline> Label </cw-pill>
-    <cw-pill variant="alarm" style="width: 8rem"> Label </cw-pill>
+    <ix-pill variant="alarm">Label</ix-pill>
+    <ix-pill variant="alarm" outline> Label </ix-pill>
+    <ix-pill variant="alarm" style="width: 8rem"> Label </ix-pill>
 
-    <cw-pill variant="alarm" icon="star"> Label </cw-pill>
-    <cw-pill variant="alarm" icon="star" style="width: 8rem"> Label </cw-pill>
-    <cw-pill variant="alarm" outline alignLeft icon="star" style="width: 8rem">
+    <ix-pill variant="alarm" icon="star"> Label </ix-pill>
+    <ix-pill variant="alarm" icon="star" style="width: 8rem"> Label </ix-pill>
+    <ix-pill variant="alarm" outline alignLeft icon="star" style="width: 8rem">
       Label
-    </cw-pill>
+    </ix-pill>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/popover-news.html b/packages/documentation/static/webcomponent-examples/popover-news.html
index 368def80fd1..41564f3959e 100644
--- a/packages/documentation/static/webcomponent-examples/popover-news.html
+++ b/packages/documentation/static/webcomponent-examples/popover-news.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,16 +17,16 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-basic-navigation>
-      <cw-menu>
-        <cw-menu-about>
-          <cw-menu-about-item label="Example"> </cw-menu-about-item>
-        </cw-menu-about>
-        <cw-menu-about-news label="Test" show about-item-label="Example">
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-about>
+          <ix-menu-about-item label="Example"> </ix-menu-about-item>
+        </ix-menu-about>
+        <ix-menu-about-news label="Test" show about-item-label="Example">
           Test
-        </cw-menu-about-news>
-      </cw-menu>
-    </cw-basic-navigation>
+        </ix-menu-about-news>
+      </ix-menu>
+    </ix-basic-navigation>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/radio-button.html b/packages/documentation/static/webcomponent-examples/radio-button.html
index 99ac7de8181..726312383fc 100644
--- a/packages/documentation/static/webcomponent-examples/radio-button.html
+++ b/packages/documentation/static/webcomponent-examples/radio-button.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
diff --git a/packages/documentation/static/webcomponent-examples/select-editable.html b/packages/documentation/static/webcomponent-examples/select-editable.html
index 09679345307..2672ef1c759 100644
--- a/packages/documentation/static/webcomponent-examples/select-editable.html
+++ b/packages/documentation/static/webcomponent-examples/select-editable.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,12 +17,12 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-select editable selected-indices="1">
-      <cw-select-item label="Item 1" value="1"></cw-select-item>
-      <cw-select-item label="Item 2" value="2"></cw-select-item>
-      <cw-select-item label="Item 3" value="3"></cw-select-item>
-      <cw-select-item label="Item 4" value="4"></cw-select-item>
-    </cw-select>
+    <ix-select editable selected-indices="1">
+      <ix-select-item label="Item 1" value="1"></ix-select-item>
+      <ix-select-item label="Item 2" value="2"></ix-select-item>
+      <ix-select-item label="Item 3" value="3"></ix-select-item>
+      <ix-select-item label="Item 4" value="4"></ix-select-item>
+    </ix-select>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/select-multiple.html b/packages/documentation/static/webcomponent-examples/select-multiple.html
index 4f2d966f5b8..cc6d9082c13 100644
--- a/packages/documentation/static/webcomponent-examples/select-multiple.html
+++ b/packages/documentation/static/webcomponent-examples/select-multiple.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,16 +17,16 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-select mode="multiple">
-      <cw-select-item label="Item 1" value="1"></cw-select-item>
-      <cw-select-item label="Item 2" value="2"></cw-select-item>
-      <cw-select-item label="Item 3" value="3"></cw-select-item>
-      <cw-select-item label="Item 4" value="4"></cw-select-item>
-    </cw-select>
+    <ix-select mode="multiple">
+      <ix-select-item label="Item 1" value="1"></ix-select-item>
+      <ix-select-item label="Item 2" value="2"></ix-select-item>
+      <ix-select-item label="Item 3" value="3"></ix-select-item>
+      <ix-select-item label="Item 4" value="4"></ix-select-item>
+    </ix-select>
     <script>
       (async function () {
-        await window.customElements.whenDefined('cw-select');
-        const select = document.querySelector('cw-select');
+        await window.customElements.whenDefined('ix-select');
+        const select = document.querySelector('ix-select');
         select.selectedIndices = ['1', '3'];
       })();
     </script>
diff --git a/packages/documentation/static/webcomponent-examples/select.html b/packages/documentation/static/webcomponent-examples/select.html
index 7e854dc7297..a3e95b20fcc 100644
--- a/packages/documentation/static/webcomponent-examples/select.html
+++ b/packages/documentation/static/webcomponent-examples/select.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,12 +17,12 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-select selected-indices="1">
-      <cw-select-item label="Item 1" value="1"></cw-select-item>
-      <cw-select-item label="Item 2" value="2"></cw-select-item>
-      <cw-select-item label="Item 3" value="3"></cw-select-item>
-      <cw-select-item label="Item 4" value="4"></cw-select-item>
-    </cw-select>
+    <ix-select selected-indices="1">
+      <ix-select-item label="Item 1" value="1"></ix-select-item>
+      <ix-select-item label="Item 2" value="2"></ix-select-item>
+      <ix-select-item label="Item 3" value="3"></ix-select-item>
+      <ix-select-item label="Item 4" value="4"></ix-select-item>
+    </ix-select>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/settings.html b/packages/documentation/static/webcomponent-examples/settings.html
index ef9e96ea525..e0b5f4c3f4e 100644
--- a/packages/documentation/static/webcomponent-examples/settings.html
+++ b/packages/documentation/static/webcomponent-examples/settings.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,22 +17,22 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-basic-navigation>
-      <cw-menu>
-        <cw-menu-settings>
-          <cw-menu-settings-item
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-settings>
+          <ix-menu-settings-item
             label="Example Setting 1"
-          ></cw-menu-settings-item>
-          <cw-menu-settings-item
+          ></ix-menu-settings-item>
+          <ix-menu-settings-item
             label="Example Setting 2"
-          ></cw-menu-settings-item>
-        </cw-menu-settings>
-      </cw-menu>
-    </cw-basic-navigation>
+          ></ix-menu-settings-item>
+        </ix-menu-settings>
+      </ix-menu>
+    </ix-basic-navigation>
     <script>
       (async function () {
-        await window.customElements.whenDefined('cw-menu');
-        const menu = document.querySelector('cw-menu');
+        await window.customElements.whenDefined('ix-menu');
+        const menu = document.querySelector('ix-menu');
         await menu.toggleSettings(true);
       })();
     </script>
diff --git a/packages/documentation/static/webcomponent-examples/spinner-large.html b/packages/documentation/static/webcomponent-examples/spinner-large.html
index faebb8cd724..68b6471cdea 100644
--- a/packages/documentation/static/webcomponent-examples/spinner-large.html
+++ b/packages/documentation/static/webcomponent-examples/spinner-large.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,7 +17,7 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-spinner size="large"></cw-spinner>
+    <ix-spinner size="large"></ix-spinner>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/spinner.html b/packages/documentation/static/webcomponent-examples/spinner.html
index 1da3f5f3d44..a06824e63ea 100644
--- a/packages/documentation/static/webcomponent-examples/spinner.html
+++ b/packages/documentation/static/webcomponent-examples/spinner.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,7 +17,7 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-spinner></cw-spinner>
+    <ix-spinner></ix-spinner>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/split-button-icons.html b/packages/documentation/static/webcomponent-examples/split-button-icons.html
index ac778df7c88..23366110f41 100644
--- a/packages/documentation/static/webcomponent-examples/split-button-icons.html
+++ b/packages/documentation/static/webcomponent-examples/split-button-icons.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,10 +17,10 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-split-button icon="document">
-      <cw-split-button-item icon="cut"></cw-split-button-item>
-      <cw-split-button-item icon="bulb"></cw-split-button-item>
-    </cw-split-button>
+    <ix-split-button icon="document">
+      <ix-split-button-item icon="cut"></ix-split-button-item>
+      <ix-split-button-item icon="bulb"></ix-split-button-item>
+    </ix-split-button>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/split-button.html b/packages/documentation/static/webcomponent-examples/split-button.html
index 7d148b6da04..be507d9ce84 100644
--- a/packages/documentation/static/webcomponent-examples/split-button.html
+++ b/packages/documentation/static/webcomponent-examples/split-button.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,10 +17,10 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-split-button label="Action text">
-      <cw-split-button-item label="Item 1"></cw-split-button-item>
-      <cw-split-button-item label="Item 2"></cw-split-button-item>
-    </cw-split-button>
+    <ix-split-button label="Action text">
+      <ix-split-button-item label="Item 1"></ix-split-button-item>
+      <ix-split-button-item label="Item 2"></ix-split-button-item>
+    </ix-split-button>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/tabs.html b/packages/documentation/static/webcomponent-examples/tabs.html
index 0e3adbc4056..6cfa9111618 100644
--- a/packages/documentation/static/webcomponent-examples/tabs.html
+++ b/packages/documentation/static/webcomponent-examples/tabs.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,11 +17,11 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-tabs selected="1">
-      <cw-tab-item>Tab 1</cw-tab-item>
-      <cw-tab-item>Tab 2</cw-tab-item>
-      <cw-tab-item>Tab 3</cw-tab-item>
-    </cw-tabs>
+    <ix-tabs selected="1">
+      <ix-tab-item>Tab 1</ix-tab-item>
+      <ix-tab-item>Tab 2</ix-tab-item>
+      <ix-tab-item>Tab 3</ix-tab-item>
+    </ix-tabs>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/test.html b/packages/documentation/static/webcomponent-examples/test.html
index 38c58351ff7..934658dbe14 100644
--- a/packages/documentation/static/webcomponent-examples/test.html
+++ b/packages/documentation/static/webcomponent-examples/test.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
diff --git a/packages/documentation/static/webcomponent-examples/textarea-disabled.html b/packages/documentation/static/webcomponent-examples/textarea-disabled.html
index 797f487bfeb..2489c04ee6d 100644
--- a/packages/documentation/static/webcomponent-examples/textarea-disabled.html
+++ b/packages/documentation/static/webcomponent-examples/textarea-disabled.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
diff --git a/packages/documentation/static/webcomponent-examples/textarea-readonly.html b/packages/documentation/static/webcomponent-examples/textarea-readonly.html
index f7570743eed..3896b3a7337 100644
--- a/packages/documentation/static/webcomponent-examples/textarea-readonly.html
+++ b/packages/documentation/static/webcomponent-examples/textarea-readonly.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
diff --git a/packages/documentation/static/webcomponent-examples/textarea.html b/packages/documentation/static/webcomponent-examples/textarea.html
index d206194567d..529cbf093e1 100644
--- a/packages/documentation/static/webcomponent-examples/textarea.html
+++ b/packages/documentation/static/webcomponent-examples/textarea.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
diff --git a/packages/documentation/static/webcomponent-examples/tile.html b/packages/documentation/static/webcomponent-examples/tile.html
index 03e0eed1c11..40678ac79bb 100644
--- a/packages/documentation/static/webcomponent-examples/tile.html
+++ b/packages/documentation/static/webcomponent-examples/tile.html
@@ -9,33 +9,33 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
     </script>
     <style>
-      cw-tile {
+      ix-tile {
         margin-bottom: 0.5rem;
       }
     </style>
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-tile size="small">92.8 °C</cw-tile>
+    <ix-tile size="small">92.8 °C</ix-tile>
 
-    <cw-tile size="medium" class="mr-1">
+    <ix-tile size="medium" class="mr-1">
       <div slot="header">Tile header</div>
       <div class="text-l">92.8 °C</div>
-    </cw-tile>
+    </ix-tile>
 
-    <cw-tile size="big">
+    <ix-tile size="big">
       <div
         class="d-flex flex-grow-1 align-items-center justify-content-between"
         slot="header"
       >
         Tile header
-        <cw-icon-button ghost icon="context-menu"></cw-icon-button>
+        <ix-icon-button ghost icon="context-menu"></ix-icon-button>
       </div>
       <div slot="subheader">Temperature</div>
       <div
@@ -53,11 +53,11 @@
         class="d-flex h-100 align-items-center justify-content-end"
         slot="footer"
       >
-        <cw-button ghost slot="footer">
-          <cw-icon name="chevron-right-small"></cw-icon>Details
-        </cw-button>
+        <ix-button ghost slot="footer">
+          <ix-icon name="chevron-right-small"></ix-icon>Details
+        </ix-button>
       </div>
-    </cw-tile>
+    </ix-tile>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/timepicker.html b/packages/documentation/static/webcomponent-examples/timepicker.html
index 59dfa05ef5c..22ec0274e9c 100644
--- a/packages/documentation/static/webcomponent-examples/timepicker.html
+++ b/packages/documentation/static/webcomponent-examples/timepicker.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,7 +17,7 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-time-picker style="display: block; width: 20rem"></cw-time-picker>
+    <ix-time-picker style="display: block; width: 20rem"></ix-time-picker>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/toast.html b/packages/documentation/static/webcomponent-examples/toast.html
index 0e552c4a0f0..0c113f2e92a 100644
--- a/packages/documentation/static/webcomponent-examples/toast.html
+++ b/packages/documentation/static/webcomponent-examples/toast.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,14 +17,14 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-toast-container></cw-toast-container>
+    <ix-toast-container></ix-toast-container>
 
-    <cw-button id="toastButton">Trigger toast</cw-button>
+    <ix-button id="toastButton">Trigger toast</ix-button>
     <script type="module">
       import { toast } from './lib/ix/dist/index.js';
 
       (async function () {
-        await window.customElements.whenDefined('cw-toast-container');
+        await window.customElements.whenDefined('ix-toast-container');
         document.getElementById('toastButton').addEventListener('click', () => {
           toast({
             message: 'My toast message!',
diff --git a/packages/documentation/static/webcomponent-examples/toggle-color.html b/packages/documentation/static/webcomponent-examples/toggle-color.html
index 57c78fba066..8b304ee1588 100644
--- a/packages/documentation/static/webcomponent-examples/toggle-color.html
+++ b/packages/documentation/static/webcomponent-examples/toggle-color.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,7 +17,7 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-toggle color="warning"></cw-toggle>
+    <ix-toggle color="warning"></ix-toggle>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/toggle-custom-disable.html b/packages/documentation/static/webcomponent-examples/toggle-custom-disable.html
index 29111ae6914..b1f31cd3291 100644
--- a/packages/documentation/static/webcomponent-examples/toggle-custom-disable.html
+++ b/packages/documentation/static/webcomponent-examples/toggle-custom-disable.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,7 +17,7 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-toggle disabled></cw-toggle>
+    <ix-toggle disabled></ix-toggle>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/toggle-custom-label.html b/packages/documentation/static/webcomponent-examples/toggle-custom-label.html
index b63b15050f0..8440e09cc70 100644
--- a/packages/documentation/static/webcomponent-examples/toggle-custom-label.html
+++ b/packages/documentation/static/webcomponent-examples/toggle-custom-label.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,7 +17,7 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-toggle text-off="Offline" text-on="Online"></cw-toggle>
+    <ix-toggle text-off="Offline" text-on="Online"></ix-toggle>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/toggle.html b/packages/documentation/static/webcomponent-examples/toggle.html
index 7b7a46719b5..4aee0d05694 100644
--- a/packages/documentation/static/webcomponent-examples/toggle.html
+++ b/packages/documentation/static/webcomponent-examples/toggle.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,7 +17,7 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-toggle></cw-toggle>
+    <ix-toggle></ix-toggle>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/tree-custom.html b/packages/documentation/static/webcomponent-examples/tree-custom.html
index ccb4d811b3c..7ca4d5cea03 100644
--- a/packages/documentation/static/webcomponent-examples/tree-custom.html
+++ b/packages/documentation/static/webcomponent-examples/tree-custom.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -19,16 +19,16 @@
     <!-- Preview code -->
 
     <div style="height: 8rem; width: 100%">
-      <cw-tree root="root" id="tree"></cw-tree>
+      <ix-tree root="root" id="tree"></ix-tree>
     </div>
 
     <script type="text/javascript">
       (async function () {
-        await window.customElements.whenDefined('cw-tree');
+        await window.customElements.whenDefined('ix-tree');
         const tree = document.getElementById('tree');
 
         tree.renderItem = (index, item, dataList, context, update) => {
-          const el = document.createElement('cw-tree-item');
+          const el = document.createElement('ix-tree-item');
           el.hasChildren = item.hasChildren;
           el.context = context;
 
@@ -36,7 +36,7 @@
           div.style.display = 'flex';
 
           const name = document.createElement('span');
-          const icon = document.createElement('cw-icon');
+          const icon = document.createElement('ix-icon');
           icon.name = 'print';
           icon.style.marginRight = '1rem';
 
diff --git a/packages/documentation/static/webcomponent-examples/tree.html b/packages/documentation/static/webcomponent-examples/tree.html
index f428faa829e..ff460fb1f8a 100644
--- a/packages/documentation/static/webcomponent-examples/tree.html
+++ b/packages/documentation/static/webcomponent-examples/tree.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -19,12 +19,12 @@
     <!-- Preview code -->
 
     <div style="height: 8rem; width: 100%">
-      <cw-tree root="root" id="tree"></cw-tree>
+      <ix-tree root="root" id="tree"></ix-tree>
     </div>
 
     <script type="text/javascript">
       (async function () {
-        await window.customElements.whenDefined('cw-tree');
+        await window.customElements.whenDefined('ix-tree');
         const tree = document.getElementById('tree');
 
         tree.model = {
diff --git a/packages/documentation/static/webcomponent-examples/upload.html b/packages/documentation/static/webcomponent-examples/upload.html
index d7c93bb5e42..bc67cb7e7f9 100644
--- a/packages/documentation/static/webcomponent-examples/upload.html
+++ b/packages/documentation/static/webcomponent-examples/upload.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,7 +17,7 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-upload></cw-upload>
+    <ix-upload></ix-upload>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/vertical-tabs-with-avatar.html b/packages/documentation/static/webcomponent-examples/vertical-tabs-with-avatar.html
index df6eef76427..ab9b42fd813 100644
--- a/packages/documentation/static/webcomponent-examples/vertical-tabs-with-avatar.html
+++ b/packages/documentation/static/webcomponent-examples/vertical-tabs-with-avatar.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,18 +17,18 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-menu>
-      <cw-menu-avatar>
-        <cw-menu-avatar-item label="Option 1"></cw-menu-avatar-item>
-      </cw-menu-avatar>
-      <cw-menu-item home-tab tab-icon="home"> Home </cw-menu-item>
-      <cw-menu-item tab-icon="globe"> Normal Tab </cw-menu-item>
-      <cw-menu-item tab-icon="star" disabled> Disabled Tab </cw-menu-item>
-      <cw-menu-item tab-icon="star"> With other Icon </cw-menu-item>
-      <cw-menu-item tab-icon="globe" style="display: none">
+    <ix-menu>
+      <ix-menu-avatar>
+        <ix-menu-avatar-item label="Option 1"></ix-menu-avatar-item>
+      </ix-menu-avatar>
+      <ix-menu-item home-tab tab-icon="home"> Home </ix-menu-item>
+      <ix-menu-item tab-icon="globe"> Normal Tab </ix-menu-item>
+      <ix-menu-item tab-icon="star" disabled> Disabled Tab </ix-menu-item>
+      <ix-menu-item tab-icon="star"> With other Icon </ix-menu-item>
+      <ix-menu-item tab-icon="globe" style="display: none">
         Should not visible
-      </cw-menu-item>
-    </cw-menu>
+      </ix-menu-item>
+    </ix-menu>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/documentation/static/webcomponent-examples/vertical-tabs.html b/packages/documentation/static/webcomponent-examples/vertical-tabs.html
index 1a3454edda3..da2e01bc15c 100644
--- a/packages/documentation/static/webcomponent-examples/vertical-tabs.html
+++ b/packages/documentation/static/webcomponent-examples/vertical-tabs.html
@@ -9,7 +9,7 @@
       rel="stylesheet"
       href="lib/core-ui-icons/dist/css/core-ui-webfont.css"
     />
-    <link rel="stylesheet" href="lib/ix/dist/core-ui-core/core-ui-core.css" />
+    <link rel="stylesheet" href="lib/ix/dist/siemens-ix/siemens-ix.css" />
     <script type="module">
       import { defineCustomElements } from './lib/ix/loader/index.js';
       defineCustomElements();
@@ -17,15 +17,15 @@
   </head>
   <body class="theme-brand-dark">
     <!-- Preview code -->
-    <cw-menu>
-      <cw-menu-item home-tab tab-icon="home"> Home </cw-menu-item>
-      <cw-menu-item tab-icon="globe"> Normal Tab </cw-menu-item>
-      <cw-menu-item tab-icon="star" disabled> Disabled Tab </cw-menu-item>
-      <cw-menu-item tab-icon="star"> With other Icon </cw-menu-item>
-      <cw-menu-item tab-icon="globe" style="display: none">
+    <ix-menu>
+      <ix-menu-item home-tab tab-icon="home"> Home </ix-menu-item>
+      <ix-menu-item tab-icon="globe"> Normal Tab </ix-menu-item>
+      <ix-menu-item tab-icon="star" disabled> Disabled Tab </ix-menu-item>
+      <ix-menu-item tab-icon="star"> With other Icon </ix-menu-item>
+      <ix-menu-item tab-icon="globe" style="display: none">
         Should not visible
-      </cw-menu-item>
-    </cw-menu>
+      </ix-menu-item>
+    </ix-menu>
     <!-- Preview code -->
     <script type="text/javascript" src="lib/utils/demo.js"></script>
   </body>
diff --git a/packages/react-test-app/src/App.tsx b/packages/react-test-app/src/App.tsx
index af9807c4b0d..d05082fcecf 100644
--- a/packages/react-test-app/src/App.tsx
+++ b/packages/react-test-app/src/App.tsx
@@ -1,4 +1,4 @@
-import { CwDropdown, CwDropdownItem, CwIcon } from '@siemens/ix-react';
+import { IxDropdown, IxDropdownItem, IxIcon } from '@siemens/ix-react';
 import { useState } from 'react';
 
 function App() {
@@ -7,8 +7,8 @@ function App() {
 
   return (
     <div>
-      <CwIcon name="print" style={{ color: 'red' }} id="test" />
-      <CwDropdown trigger={'test'} closeBehavior="outside">
+      <IxIcon name="print" style={{ color: 'red' }} id="test" />
+      <IxDropdown trigger={'test'} closeBehavior="outside">
         <input
           onInput={(e) => setFilter((e.target as HTMLInputElement).value)}
         />
@@ -22,9 +22,9 @@ function App() {
             return i.includes(filter);
           })
           .map((i) => (
-            <CwDropdownItem label={i} key={i} />
+            <IxDropdownItem label={i} key={i} />
           ))}
-      </CwDropdown>
+      </IxDropdown>
     </div>
   );
 }
diff --git a/packages/react-test-app/src/index.tsx b/packages/react-test-app/src/index.tsx
index f04b00c5c90..4f6fa245aca 100644
--- a/packages/react-test-app/src/index.tsx
+++ b/packages/react-test-app/src/index.tsx
@@ -3,7 +3,7 @@ import 'ag-grid-community/styles/ag-theme-alpine.css'; // Optional theme CSS
 
 import '@siemens/core-ui-icons/dist/css/core-ui-webfont.css';
 import '@siemens/ix-aggrid/dist/ix-aggrid/ix-aggrid.css';
-import '@siemens/ix/dist/core-ui-core/core-ui-core.css';
+import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
 
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
diff --git a/packages/react-test-app/src/preview-examples/basic-navigation-without-header.tsx b/packages/react-test-app/src/preview-examples/basic-navigation-without-header.tsx
index ccac89b324d..7328288cb1f 100644
--- a/packages/react-test-app/src/preview-examples/basic-navigation-without-header.tsx
+++ b/packages/react-test-app/src/preview-examples/basic-navigation-without-header.tsx
@@ -1,16 +1,16 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { CwBasicNavigation, CwMenu, CwMenuItem } from '@siemens/ix-react';
+import { IxBasicNavigation, IxMenu, IxMenuItem } from '@siemens/ix-react';
 import React from 'react';
 
 export const BasicNavigation: React.FC = () => {
   return (
-    <CwBasicNavigation hideHeader>
-      <CwMenu>
-        <CwMenuItem>Item 1</CwMenuItem>
-        <CwMenuItem>Item 2</CwMenuItem>
-      </CwMenu>
-    </CwBasicNavigation>
+    <IxBasicNavigation hideHeader>
+      <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+      </IxMenu>
+    </IxBasicNavigation>
   );
 };
diff --git a/packages/react-test-app/src/preview-examples/basic-navigation.tsx b/packages/react-test-app/src/preview-examples/basic-navigation.tsx
index de87d503d14..84a0fe276b3 100644
--- a/packages/react-test-app/src/preview-examples/basic-navigation.tsx
+++ b/packages/react-test-app/src/preview-examples/basic-navigation.tsx
@@ -1,16 +1,16 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { CwBasicNavigation, CwMenu, CwMenuItem } from '@siemens/ix-react';
+import { IxBasicNavigation, IxMenu, IxMenuItem } from '@siemens/ix-react';
 import React from 'react';
 
 export const BasicNavigation: React.FC = () => {
   return (
-    <CwBasicNavigation>
-      <CwMenu>
-        <CwMenuItem>Item 1</CwMenuItem>
-        <CwMenuItem>Item 2</CwMenuItem>
-      </CwMenu>
-    </CwBasicNavigation>
+    <IxBasicNavigation>
+      <IxMenu>
+        <IxMenuItem>Item 1</IxMenuItem>
+        <IxMenuItem>Item 2</IxMenuItem>
+      </IxMenu>
+    </IxBasicNavigation>
   );
 };
diff --git a/packages/react-test-app/src/preview-examples/button-group.tsx b/packages/react-test-app/src/preview-examples/button-group.tsx
index e1c41648975..b7f6b942974 100644
--- a/packages/react-test-app/src/preview-examples/button-group.tsx
+++ b/packages/react-test-app/src/preview-examples/button-group.tsx
@@ -2,19 +2,19 @@
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
 
-import { CwButton } from '@siemens/ix-react';
+import { IxButton } from '@siemens/ix-react';
 import React from 'react';
 
 export const ButtonGroup: React.FC = () => (
   <>
     <div className="btn-group">
-      <CwButton variant="Primary" outline>
+      <IxButton variant="Primary" outline>
         Left
-      </CwButton>
-      <CwButton variant="Primary">Middle</CwButton>
-      <CwButton variant="Primary" outline>
+      </IxButton>
+      <IxButton variant="Primary">Middle</IxButton>
+      <IxButton variant="Primary" outline>
         Right
-      </CwButton>
+      </IxButton>
     </div>
   </>
 );
diff --git a/packages/react-test-app/src/preview-examples/buttons.tsx b/packages/react-test-app/src/preview-examples/buttons.tsx
index 1f752cbdeda..aea63fba7a3 100644
--- a/packages/react-test-app/src/preview-examples/buttons.tsx
+++ b/packages/react-test-app/src/preview-examples/buttons.tsx
@@ -1,24 +1,24 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { CwButton } from '@siemens/ix-react';
+import { IxButton } from '@siemens/ix-react';
 import React from 'react';
 
 export const Buttons: React.FC = () => {
   return (
     <>
-      <CwButton className="m-1" variant="Primary">
+      <IxButton className="m-1" variant="Primary">
         Webcomponents button
-      </CwButton>
-      <CwButton className="m-1" variant="Secondary">
+      </IxButton>
+      <IxButton className="m-1" variant="Secondary">
         Webcomponents button
-      </CwButton>
-      <CwButton className="m-1" outline>
+      </IxButton>
+      <IxButton className="m-1" outline>
         Webcomponents button
-      </CwButton>
-      <CwButton className="m-1" invisible>
+      </IxButton>
+      <IxButton className="m-1" invisible>
         Webcomponents button
-      </CwButton>
+      </IxButton>
     </>
   );
 };
diff --git a/packages/react/src/components.ts b/packages/react/src/components.ts
index 775ce0619d4..0cc0932f328 100644
--- a/packages/react/src/components.ts
+++ b/packages/react/src/components.ts
@@ -8,63 +8,63 @@ import type { JSX } from '@siemens/ix';
 import { defineCustomElements } from '@siemens/ix/loader';
 
 defineCustomElements();
-export const CwAnimatedTab = /*@__PURE__*/createReactComponent<JSX.CwAnimatedTab, HTMLCwAnimatedTabElement>('cw-animated-tab');
-export const CwAnimatedTabs = /*@__PURE__*/createReactComponent<JSX.CwAnimatedTabs, HTMLCwAnimatedTabsElement>('cw-animated-tabs');
-export const CwApplicationHeader = /*@__PURE__*/createReactComponent<JSX.CwApplicationHeader, HTMLCwApplicationHeaderElement>('cw-application-header');
-export const CwBasicNavigation = /*@__PURE__*/createReactComponent<JSX.CwBasicNavigation, HTMLCwBasicNavigationElement>('cw-basic-navigation');
-export const CwBlind = /*@__PURE__*/createReactComponent<JSX.CwBlind, HTMLCwBlindElement>('cw-blind');
-export const CwBreadcrumb = /*@__PURE__*/createReactComponent<JSX.CwBreadcrumb, HTMLCwBreadcrumbElement>('cw-breadcrumb');
-export const CwBreadcrumbItem = /*@__PURE__*/createReactComponent<JSX.CwBreadcrumbItem, HTMLCwBreadcrumbItemElement>('cw-breadcrumb-item');
-export const CwButton = /*@__PURE__*/createReactComponent<JSX.CwButton, HTMLCwButtonElement>('cw-button');
-export const CwCategoryFilter = /*@__PURE__*/createReactComponent<JSX.CwCategoryFilter, HTMLCwCategoryFilterElement>('cw-category-filter');
-export const CwChip = /*@__PURE__*/createReactComponent<JSX.CwChip, HTMLCwChipElement>('cw-chip');
-export const CwCounterPill = /*@__PURE__*/createReactComponent<JSX.CwCounterPill, HTMLCwCounterPillElement>('cw-counter-pill');
-export const CwDatePicker = /*@__PURE__*/createReactComponent<JSX.CwDatePicker, HTMLCwDatePickerElement>('cw-date-picker');
-export const CwDateTimeCard = /*@__PURE__*/createReactComponent<JSX.CwDateTimeCard, HTMLCwDateTimeCardElement>('cw-date-time-card');
-export const CwDatetimePicker = /*@__PURE__*/createReactComponent<JSX.CwDatetimePicker, HTMLCwDatetimePickerElement>('cw-datetime-picker');
-export const CwDrawer = /*@__PURE__*/createReactComponent<JSX.CwDrawer, HTMLCwDrawerElement>('cw-drawer');
-export const CwDropdown = /*@__PURE__*/createReactComponent<JSX.CwDropdown, HTMLCwDropdownElement>('cw-dropdown');
-export const CwDropdownItem = /*@__PURE__*/createReactComponent<JSX.CwDropdownItem, HTMLCwDropdownItemElement>('cw-dropdown-item');
-export const CwEventList = /*@__PURE__*/createReactComponent<JSX.CwEventList, HTMLCwEventListElement>('cw-event-list');
-export const CwEventListItem = /*@__PURE__*/createReactComponent<JSX.CwEventListItem, HTMLCwEventListItemElement>('cw-event-list-item');
-export const CwExpandingSearch = /*@__PURE__*/createReactComponent<JSX.CwExpandingSearch, HTMLCwExpandingSearchElement>('cw-expanding-search');
-export const CwFilterChip = /*@__PURE__*/createReactComponent<JSX.CwFilterChip, HTMLCwFilterChipElement>('cw-filter-chip');
-export const CwFlipTile = /*@__PURE__*/createReactComponent<JSX.CwFlipTile, HTMLCwFlipTileElement>('cw-flip-tile');
-export const CwFlipTileContent = /*@__PURE__*/createReactComponent<JSX.CwFlipTileContent, HTMLCwFlipTileContentElement>('cw-flip-tile-content');
-export const CwGroup = /*@__PURE__*/createReactComponent<JSX.CwGroup, HTMLCwGroupElement>('cw-group');
-export const CwGroupDropdownItem = /*@__PURE__*/createReactComponent<JSX.CwGroupDropdownItem, HTMLCwGroupDropdownItemElement>('cw-group-dropdown-item');
-export const CwGroupItem = /*@__PURE__*/createReactComponent<JSX.CwGroupItem, HTMLCwGroupItemElement>('cw-group-item');
-export const CwIcon = /*@__PURE__*/createReactComponent<JSX.CwIcon, HTMLCwIconElement>('cw-icon');
-export const CwIconButton = /*@__PURE__*/createReactComponent<JSX.CwIconButton, HTMLCwIconButtonElement>('cw-icon-button');
-export const CwInputGroup = /*@__PURE__*/createReactComponent<JSX.CwInputGroup, HTMLCwInputGroupElement>('cw-input-group');
-export const CwMapNavigation = /*@__PURE__*/createReactComponent<JSX.CwMapNavigation, HTMLCwMapNavigationElement>('cw-map-navigation');
-export const CwMapNavigationOverlay = /*@__PURE__*/createReactComponent<JSX.CwMapNavigationOverlay, HTMLCwMapNavigationOverlayElement>('cw-map-navigation-overlay');
-export const CwMenu = /*@__PURE__*/createReactComponent<JSX.CwMenu, HTMLCwMenuElement>('cw-menu');
-export const CwMenuAbout = /*@__PURE__*/createReactComponent<JSX.CwMenuAbout, HTMLCwMenuAboutElement>('cw-menu-about');
-export const CwMenuAboutItem = /*@__PURE__*/createReactComponent<JSX.CwMenuAboutItem, HTMLCwMenuAboutItemElement>('cw-menu-about-item');
-export const CwMenuAboutNews = /*@__PURE__*/createReactComponent<JSX.CwMenuAboutNews, HTMLCwMenuAboutNewsElement>('cw-menu-about-news');
-export const CwMenuAvatar = /*@__PURE__*/createReactComponent<JSX.CwMenuAvatar, HTMLCwMenuAvatarElement>('cw-menu-avatar');
-export const CwMenuAvatarItem = /*@__PURE__*/createReactComponent<JSX.CwMenuAvatarItem, HTMLCwMenuAvatarItemElement>('cw-menu-avatar-item');
-export const CwMenuItem = /*@__PURE__*/createReactComponent<JSX.CwMenuItem, HTMLCwMenuItemElement>('cw-menu-item');
-export const CwMenuSettings = /*@__PURE__*/createReactComponent<JSX.CwMenuSettings, HTMLCwMenuSettingsElement>('cw-menu-settings');
-export const CwMenuSettingsItem = /*@__PURE__*/createReactComponent<JSX.CwMenuSettingsItem, HTMLCwMenuSettingsItemElement>('cw-menu-settings-item');
-export const CwMessageBar = /*@__PURE__*/createReactComponent<JSX.CwMessageBar, HTMLCwMessageBarElement>('cw-message-bar');
-export const CwModal = /*@__PURE__*/createReactComponent<JSX.CwModal, HTMLCwModalElement>('cw-modal');
-export const CwModalContainer = /*@__PURE__*/createReactComponent<JSX.CwModalContainer, HTMLCwModalContainerElement>('cw-modal-container');
-export const CwModalExample = /*@__PURE__*/createReactComponent<JSX.CwModalExample, HTMLCwModalExampleElement>('cw-modal-example');
-export const CwPill = /*@__PURE__*/createReactComponent<JSX.CwPill, HTMLCwPillElement>('cw-pill');
-export const CwSelect = /*@__PURE__*/createReactComponent<JSX.CwSelect, HTMLCwSelectElement>('cw-select');
-export const CwSelectItem = /*@__PURE__*/createReactComponent<JSX.CwSelectItem, HTMLCwSelectItemElement>('cw-select-item');
-export const CwSpinner = /*@__PURE__*/createReactComponent<JSX.CwSpinner, HTMLCwSpinnerElement>('cw-spinner');
-export const CwSplitButton = /*@__PURE__*/createReactComponent<JSX.CwSplitButton, HTMLCwSplitButtonElement>('cw-split-button');
-export const CwSplitButtonItem = /*@__PURE__*/createReactComponent<JSX.CwSplitButtonItem, HTMLCwSplitButtonItemElement>('cw-split-button-item');
-export const CwTabItem = /*@__PURE__*/createReactComponent<JSX.CwTabItem, HTMLCwTabItemElement>('cw-tab-item');
-export const CwTabs = /*@__PURE__*/createReactComponent<JSX.CwTabs, HTMLCwTabsElement>('cw-tabs');
-export const CwTile = /*@__PURE__*/createReactComponent<JSX.CwTile, HTMLCwTileElement>('cw-tile');
-export const CwTimePicker = /*@__PURE__*/createReactComponent<JSX.CwTimePicker, HTMLCwTimePickerElement>('cw-time-picker');
-export const CwToast = /*@__PURE__*/createReactComponent<JSX.CwToast, HTMLCwToastElement>('cw-toast');
-export const CwToastContainer = /*@__PURE__*/createReactComponent<JSX.CwToastContainer, HTMLCwToastContainerElement>('cw-toast-container');
-export const CwToggle = /*@__PURE__*/createReactComponent<JSX.CwToggle, HTMLCwToggleElement>('cw-toggle');
-export const CwTree = /*@__PURE__*/createReactComponent<JSX.CwTree, HTMLCwTreeElement>('cw-tree');
-export const CwTreeItem = /*@__PURE__*/createReactComponent<JSX.CwTreeItem, HTMLCwTreeItemElement>('cw-tree-item');
-export const CwUpload = /*@__PURE__*/createReactComponent<JSX.CwUpload, HTMLCwUploadElement>('cw-upload');
+export const IxAnimatedTab = /*@__PURE__*/createReactComponent<JSX.IxAnimatedTab, HTMLIxAnimatedTabElement>('ix-animated-tab');
+export const IxAnimatedTabs = /*@__PURE__*/createReactComponent<JSX.IxAnimatedTabs, HTMLIxAnimatedTabsElement>('ix-animated-tabs');
+export const IxApplicationHeader = /*@__PURE__*/createReactComponent<JSX.IxApplicationHeader, HTMLIxApplicationHeaderElement>('ix-application-header');
+export const IxBasicNavigation = /*@__PURE__*/createReactComponent<JSX.IxBasicNavigation, HTMLIxBasicNavigationElement>('ix-basic-navigation');
+export const IxBlind = /*@__PURE__*/createReactComponent<JSX.IxBlind, HTMLIxBlindElement>('ix-blind');
+export const IxBreadcrumb = /*@__PURE__*/createReactComponent<JSX.IxBreadcrumb, HTMLIxBreadcrumbElement>('ix-breadcrumb');
+export const IxBreadcrumbItem = /*@__PURE__*/createReactComponent<JSX.IxBreadcrumbItem, HTMLIxBreadcrumbItemElement>('ix-breadcrumb-item');
+export const IxButton = /*@__PURE__*/createReactComponent<JSX.IxButton, HTMLIxButtonElement>('ix-button');
+export const IxCategoryFilter = /*@__PURE__*/createReactComponent<JSX.IxCategoryFilter, HTMLIxCategoryFilterElement>('ix-category-filter');
+export const IxChip = /*@__PURE__*/createReactComponent<JSX.IxChip, HTMLIxChipElement>('ix-chip');
+export const IxCounterPill = /*@__PURE__*/createReactComponent<JSX.IxCounterPill, HTMLIxCounterPillElement>('ix-counter-pill');
+export const IxDatePicker = /*@__PURE__*/createReactComponent<JSX.IxDatePicker, HTMLIxDatePickerElement>('ix-date-picker');
+export const IxDateTimeCard = /*@__PURE__*/createReactComponent<JSX.IxDateTimeCard, HTMLIxDateTimeCardElement>('ix-date-time-card');
+export const IxDatetimePicker = /*@__PURE__*/createReactComponent<JSX.IxDatetimePicker, HTMLIxDatetimePickerElement>('ix-datetime-picker');
+export const IxDrawer = /*@__PURE__*/createReactComponent<JSX.IxDrawer, HTMLIxDrawerElement>('ix-drawer');
+export const IxDropdown = /*@__PURE__*/createReactComponent<JSX.IxDropdown, HTMLIxDropdownElement>('ix-dropdown');
+export const IxDropdownItem = /*@__PURE__*/createReactComponent<JSX.IxDropdownItem, HTMLIxDropdownItemElement>('ix-dropdown-item');
+export const IxEventList = /*@__PURE__*/createReactComponent<JSX.IxEventList, HTMLIxEventListElement>('ix-event-list');
+export const IxEventListItem = /*@__PURE__*/createReactComponent<JSX.IxEventListItem, HTMLIxEventListItemElement>('ix-event-list-item');
+export const IxExpandingSearch = /*@__PURE__*/createReactComponent<JSX.IxExpandingSearch, HTMLIxExpandingSearchElement>('ix-expanding-search');
+export const IxFilterChip = /*@__PURE__*/createReactComponent<JSX.IxFilterChip, HTMLIxFilterChipElement>('ix-filter-chip');
+export const IxFlipTile = /*@__PURE__*/createReactComponent<JSX.IxFlipTile, HTMLIxFlipTileElement>('ix-flip-tile');
+export const IxFlipTileContent = /*@__PURE__*/createReactComponent<JSX.IxFlipTileContent, HTMLIxFlipTileContentElement>('ix-flip-tile-content');
+export const IxGroup = /*@__PURE__*/createReactComponent<JSX.IxGroup, HTMLIxGroupElement>('ix-group');
+export const IxGroupDropdownItem = /*@__PURE__*/createReactComponent<JSX.IxGroupDropdownItem, HTMLIxGroupDropdownItemElement>('ix-group-dropdown-item');
+export const IxGroupItem = /*@__PURE__*/createReactComponent<JSX.IxGroupItem, HTMLIxGroupItemElement>('ix-group-item');
+export const IxIcon = /*@__PURE__*/createReactComponent<JSX.IxIcon, HTMLIxIconElement>('ix-icon');
+export const IxIconButton = /*@__PURE__*/createReactComponent<JSX.IxIconButton, HTMLIxIconButtonElement>('ix-icon-button');
+export const IxInputGroup = /*@__PURE__*/createReactComponent<JSX.IxInputGroup, HTMLIxInputGroupElement>('ix-input-group');
+export const IxMapNavigation = /*@__PURE__*/createReactComponent<JSX.IxMapNavigation, HTMLIxMapNavigationElement>('ix-map-navigation');
+export const IxMapNavigationOverlay = /*@__PURE__*/createReactComponent<JSX.IxMapNavigationOverlay, HTMLIxMapNavigationOverlayElement>('ix-map-navigation-overlay');
+export const IxMenu = /*@__PURE__*/createReactComponent<JSX.IxMenu, HTMLIxMenuElement>('ix-menu');
+export const IxMenuAbout = /*@__PURE__*/createReactComponent<JSX.IxMenuAbout, HTMLIxMenuAboutElement>('ix-menu-about');
+export const IxMenuAboutItem = /*@__PURE__*/createReactComponent<JSX.IxMenuAboutItem, HTMLIxMenuAboutItemElement>('ix-menu-about-item');
+export const IxMenuAboutNews = /*@__PURE__*/createReactComponent<JSX.IxMenuAboutNews, HTMLIxMenuAboutNewsElement>('ix-menu-about-news');
+export const IxMenuAvatar = /*@__PURE__*/createReactComponent<JSX.IxMenuAvatar, HTMLIxMenuAvatarElement>('ix-menu-avatar');
+export const IxMenuAvatarItem = /*@__PURE__*/createReactComponent<JSX.IxMenuAvatarItem, HTMLIxMenuAvatarItemElement>('ix-menu-avatar-item');
+export const IxMenuItem = /*@__PURE__*/createReactComponent<JSX.IxMenuItem, HTMLIxMenuItemElement>('ix-menu-item');
+export const IxMenuSettings = /*@__PURE__*/createReactComponent<JSX.IxMenuSettings, HTMLIxMenuSettingsElement>('ix-menu-settings');
+export const IxMenuSettingsItem = /*@__PURE__*/createReactComponent<JSX.IxMenuSettingsItem, HTMLIxMenuSettingsItemElement>('ix-menu-settings-item');
+export const IxMessageBar = /*@__PURE__*/createReactComponent<JSX.IxMessageBar, HTMLIxMessageBarElement>('ix-message-bar');
+export const IxModal = /*@__PURE__*/createReactComponent<JSX.IxModal, HTMLIxModalElement>('ix-modal');
+export const IxModalContainer = /*@__PURE__*/createReactComponent<JSX.IxModalContainer, HTMLIxModalContainerElement>('ix-modal-container');
+export const IxModalExample = /*@__PURE__*/createReactComponent<JSX.IxModalExample, HTMLIxModalExampleElement>('ix-modal-example');
+export const IxPill = /*@__PURE__*/createReactComponent<JSX.IxPill, HTMLIxPillElement>('ix-pill');
+export const IxSelect = /*@__PURE__*/createReactComponent<JSX.IxSelect, HTMLIxSelectElement>('ix-select');
+export const IxSelectItem = /*@__PURE__*/createReactComponent<JSX.IxSelectItem, HTMLIxSelectItemElement>('ix-select-item');
+export const IxSpinner = /*@__PURE__*/createReactComponent<JSX.IxSpinner, HTMLIxSpinnerElement>('ix-spinner');
+export const IxSplitButton = /*@__PURE__*/createReactComponent<JSX.IxSplitButton, HTMLIxSplitButtonElement>('ix-split-button');
+export const IxSplitButtonItem = /*@__PURE__*/createReactComponent<JSX.IxSplitButtonItem, HTMLIxSplitButtonItemElement>('ix-split-button-item');
+export const IxTabItem = /*@__PURE__*/createReactComponent<JSX.IxTabItem, HTMLIxTabItemElement>('ix-tab-item');
+export const IxTabs = /*@__PURE__*/createReactComponent<JSX.IxTabs, HTMLIxTabsElement>('ix-tabs');
+export const IxTile = /*@__PURE__*/createReactComponent<JSX.IxTile, HTMLIxTileElement>('ix-tile');
+export const IxTimePicker = /*@__PURE__*/createReactComponent<JSX.IxTimePicker, HTMLIxTimePickerElement>('ix-time-picker');
+export const IxToast = /*@__PURE__*/createReactComponent<JSX.IxToast, HTMLIxToastElement>('ix-toast');
+export const IxToastContainer = /*@__PURE__*/createReactComponent<JSX.IxToastContainer, HTMLIxToastContainerElement>('ix-toast-container');
+export const IxToggle = /*@__PURE__*/createReactComponent<JSX.IxToggle, HTMLIxToggleElement>('ix-toggle');
+export const IxTree = /*@__PURE__*/createReactComponent<JSX.IxTree, HTMLIxTreeElement>('ix-tree');
+export const IxTreeItem = /*@__PURE__*/createReactComponent<JSX.IxTreeItem, HTMLIxTreeItemElement>('ix-tree-item');
+export const IxUpload = /*@__PURE__*/createReactComponent<JSX.IxUpload, HTMLIxUploadElement>('ix-upload');