From 048951289dc12682813c980b2b07e43d481ba695 Mon Sep 17 00:00:00 2001
From: jul-lam <julian.lamplmair.ext@siemens.com>
Date: Tue, 10 Dec 2024 14:16:21 +0100
Subject: [PATCH 1/4] feat(core/application): full vh and vw for host element

---
 packages/core/src/components/application/application.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/components/application/application.scss b/packages/core/src/components/application/application.scss
index 74d0b93ecea..afdcaa34008 100644
--- a/packages/core/src/components/application/application.scss
+++ b/packages/core/src/components/application/application.scss
@@ -14,8 +14,8 @@
 
   display: flex;
   position: relative;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
 
   flex-direction: column;
 

From 797da1b73e2bc9ed1e5079239ee4f5129c403226 Mon Sep 17 00:00:00 2001
From: Julian Lamplmair <151610373+jul-lam@users.noreply.github.com>
Date: Tue, 10 Dec 2024 14:29:51 +0100
Subject: [PATCH 2/4] changeset

---
 .changeset/silly-carrots-complain.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/silly-carrots-complain.md

diff --git a/.changeset/silly-carrots-complain.md b/.changeset/silly-carrots-complain.md
new file mode 100644
index 00000000000..d4fe211ce02
--- /dev/null
+++ b/.changeset/silly-carrots-complain.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": major
+---
+
+__ix-application__ now utilizes full view height and full view width

From 38409354cbf4394e426594be26bad9f92ff66b6d Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Tue, 10 Dec 2024 14:34:11 +0100
Subject: [PATCH 3/4] Update .changeset/silly-carrots-complain.md

---
 .changeset/silly-carrots-complain.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/silly-carrots-complain.md b/.changeset/silly-carrots-complain.md
index d4fe211ce02..025de977c42 100644
--- a/.changeset/silly-carrots-complain.md
+++ b/.changeset/silly-carrots-complain.md
@@ -2,4 +2,4 @@
 "@siemens/ix": major
 ---
 
-__ix-application__ now utilizes full view height and full view width
+__ix-application__ now utilizes full viewport height and full viewport width

From 8c60180684a6faa65eb4eeb6c0884b567db48741 Mon Sep 17 00:00:00 2001
From: jul-lam <julian.lamplmair.ext@siemens.com>
Date: Tue, 10 Dec 2024 17:33:04 +0100
Subject: [PATCH 4/4] docs: remove unnecessary css files

---
 .../src/preview-examples/about-and-legal.css    | 17 -----------------
 .../src/preview-examples/about-and-legal.ts     |  1 -
 .../preview-examples/application-app-switch.css | 17 -----------------
 .../preview-examples/application-app-switch.ts  |  1 -
 .../application-breakpoints.css                 | 17 -----------------
 .../preview-examples/application-breakpoints.ts |  1 -
 .../src/preview-examples/application.css        | 17 -----------------
 .../src/preview-examples/application.ts         |  1 -
 .../src/preview-examples/menu-category.css      | 17 -----------------
 .../src/preview-examples/menu-category.ts       |  1 -
 .../preview-examples/menu-with-bottom-tabs.css  | 17 -----------------
 .../preview-examples/menu-with-bottom-tabs.ts   |  1 -
 .../src/preview-examples/popover-news.css       | 17 -----------------
 .../src/preview-examples/popover-news.ts        |  1 -
 .../src/preview-examples/settings.css           | 17 -----------------
 .../src/preview-examples/settings.ts            |  1 -
 .../src/preview-examples/about-and-legal.css    | 17 -----------------
 .../src/preview-examples/about-and-legal.html   |  1 -
 .../preview-examples/application-app-switch.css | 17 -----------------
 .../application-app-switch.html                 |  1 -
 .../application-breakpoints.css                 | 17 -----------------
 .../application-breakpoints.html                |  1 -
 .../src/preview-examples/application.css        | 17 -----------------
 .../src/preview-examples/application.html       |  1 -
 .../src/preview-examples/menu-category.css      | 17 -----------------
 .../src/preview-examples/menu-category.html     |  1 -
 .../preview-examples/menu-with-bottom-tabs.css  | 17 -----------------
 .../preview-examples/menu-with-bottom-tabs.html |  1 -
 .../src/preview-examples/popover-news.css       | 17 -----------------
 .../src/preview-examples/popover-news.html      |  1 -
 .../src/preview-examples/settings.css           | 17 -----------------
 .../src/preview-examples/settings.html          |  1 -
 .../preview-examples/about-and-legal.scoped.css | 17 -----------------
 .../src/preview-examples/about-and-legal.tsx    |  2 --
 .../application-app-switch.scoped.css           | 17 -----------------
 .../preview-examples/application-app-switch.tsx |  2 --
 .../application-breakpoints.scoped.css          | 17 -----------------
 .../application-breakpoints.tsx                 |  2 --
 .../src/preview-examples/application.scoped.css | 17 -----------------
 .../src/preview-examples/application.tsx        |  2 --
 .../preview-examples/menu-category.scoped.css   | 17 -----------------
 .../src/preview-examples/menu-category.tsx      |  2 --
 .../menu-with-bottom-tabs.scoped.css            | 17 -----------------
 .../preview-examples/menu-with-bottom-tabs.tsx  |  2 --
 .../preview-examples/popover-news.scoped.css    | 17 -----------------
 .../src/preview-examples/popover-news.tsx       |  2 --
 .../src/preview-examples/settings.scoped.css    | 17 -----------------
 .../src/preview-examples/settings.tsx           |  2 --
 .../src/preview-examples/about-and-legal.css    | 17 -----------------
 .../src/preview-examples/about-and-legal.vue    |  2 --
 .../preview-examples/application-app-switch.css | 17 -----------------
 .../preview-examples/application-app-switch.vue |  2 --
 .../application-breakpoints.css                 | 17 -----------------
 .../application-breakpoints.vue                 |  2 --
 .../src/preview-examples/application.css        | 17 -----------------
 .../src/preview-examples/application.vue        |  2 --
 .../src/preview-examples/menu-category.css      | 17 -----------------
 .../src/preview-examples/menu-category.vue      |  2 --
 .../preview-examples/menu-with-bottom-tabs.css  | 17 -----------------
 .../preview-examples/menu-with-bottom-tabs.vue  |  2 --
 .../src/preview-examples/popover-news.css       | 17 -----------------
 .../src/preview-examples/popover-news.vue       |  4 +---
 .../src/preview-examples/settings.css           | 17 -----------------
 .../src/preview-examples/settings.vue           |  2 --
 64 files changed, 1 insertion(+), 593 deletions(-)
 delete mode 100644 packages/angular-test-app/src/preview-examples/about-and-legal.css
 delete mode 100644 packages/angular-test-app/src/preview-examples/application-app-switch.css
 delete mode 100644 packages/angular-test-app/src/preview-examples/application-breakpoints.css
 delete mode 100644 packages/angular-test-app/src/preview-examples/application.css
 delete mode 100644 packages/angular-test-app/src/preview-examples/menu-category.css
 delete mode 100644 packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.css
 delete mode 100644 packages/angular-test-app/src/preview-examples/popover-news.css
 delete mode 100644 packages/angular-test-app/src/preview-examples/settings.css
 delete mode 100644 packages/html-test-app/src/preview-examples/about-and-legal.css
 delete mode 100644 packages/html-test-app/src/preview-examples/application-app-switch.css
 delete mode 100644 packages/html-test-app/src/preview-examples/application-breakpoints.css
 delete mode 100644 packages/html-test-app/src/preview-examples/application.css
 delete mode 100644 packages/html-test-app/src/preview-examples/menu-category.css
 delete mode 100644 packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.css
 delete mode 100644 packages/html-test-app/src/preview-examples/popover-news.css
 delete mode 100644 packages/html-test-app/src/preview-examples/settings.css
 delete mode 100644 packages/react-test-app/src/preview-examples/about-and-legal.scoped.css
 delete mode 100644 packages/react-test-app/src/preview-examples/application-app-switch.scoped.css
 delete mode 100644 packages/react-test-app/src/preview-examples/application-breakpoints.scoped.css
 delete mode 100644 packages/react-test-app/src/preview-examples/application.scoped.css
 delete mode 100644 packages/react-test-app/src/preview-examples/menu-category.scoped.css
 delete mode 100644 packages/react-test-app/src/preview-examples/menu-with-bottom-tabs.scoped.css
 delete mode 100644 packages/react-test-app/src/preview-examples/popover-news.scoped.css
 delete mode 100644 packages/react-test-app/src/preview-examples/settings.scoped.css
 delete mode 100644 packages/vue-test-app/src/preview-examples/about-and-legal.css
 delete mode 100644 packages/vue-test-app/src/preview-examples/application-app-switch.css
 delete mode 100644 packages/vue-test-app/src/preview-examples/application-breakpoints.css
 delete mode 100644 packages/vue-test-app/src/preview-examples/application.css
 delete mode 100644 packages/vue-test-app/src/preview-examples/menu-category.css
 delete mode 100644 packages/vue-test-app/src/preview-examples/menu-with-bottom-tabs.css
 delete mode 100644 packages/vue-test-app/src/preview-examples/popover-news.css
 delete mode 100644 packages/vue-test-app/src/preview-examples/settings.css

diff --git a/packages/angular-test-app/src/preview-examples/about-and-legal.css b/packages/angular-test-app/src/preview-examples/about-and-legal.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/angular-test-app/src/preview-examples/about-and-legal.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/angular-test-app/src/preview-examples/about-and-legal.ts b/packages/angular-test-app/src/preview-examples/about-and-legal.ts
index 5a7e7b82950..ed70033a4fa 100644
--- a/packages/angular-test-app/src/preview-examples/about-and-legal.ts
+++ b/packages/angular-test-app/src/preview-examples/about-and-legal.ts
@@ -12,7 +12,6 @@ import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './about-and-legal.html',
-  styleUrls: ['./about-and-legal.css'],
 })
 export default class AboutAndLegal implements AfterViewInit {
   @ViewChild('menu', { read: ElementRef })
diff --git a/packages/angular-test-app/src/preview-examples/application-app-switch.css b/packages/angular-test-app/src/preview-examples/application-app-switch.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/angular-test-app/src/preview-examples/application-app-switch.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/angular-test-app/src/preview-examples/application-app-switch.ts b/packages/angular-test-app/src/preview-examples/application-app-switch.ts
index 56c311dabb7..22379064303 100644
--- a/packages/angular-test-app/src/preview-examples/application-app-switch.ts
+++ b/packages/angular-test-app/src/preview-examples/application-app-switch.ts
@@ -13,7 +13,6 @@ import { AppSwitchConfiguration } from '@siemens/ix';
 @Component({
   selector: 'app-example',
   templateUrl: './application-app-switch.html',
-  styleUrls: ['./application-app-switch.css'],
 })
 export default class ApplicationAppSwitchExample {
   appSwitchConfig: AppSwitchConfiguration = {
diff --git a/packages/angular-test-app/src/preview-examples/application-breakpoints.css b/packages/angular-test-app/src/preview-examples/application-breakpoints.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/angular-test-app/src/preview-examples/application-breakpoints.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/angular-test-app/src/preview-examples/application-breakpoints.ts b/packages/angular-test-app/src/preview-examples/application-breakpoints.ts
index 521c7cb09b0..dffa491c0ec 100644
--- a/packages/angular-test-app/src/preview-examples/application-breakpoints.ts
+++ b/packages/angular-test-app/src/preview-examples/application-breakpoints.ts
@@ -11,7 +11,6 @@ import { Breakpoint } from '@siemens/ix';
 
 @Component({
   selector: 'app-example',
-  styleUrls: ['./application-breakpoints.css'],
   templateUrl: './application-breakpoints.html',
 })
 export default class ApplicationBreakpointExample {
diff --git a/packages/angular-test-app/src/preview-examples/application.css b/packages/angular-test-app/src/preview-examples/application.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/angular-test-app/src/preview-examples/application.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/angular-test-app/src/preview-examples/application.ts b/packages/angular-test-app/src/preview-examples/application.ts
index f7d097de768..da012a39d72 100644
--- a/packages/angular-test-app/src/preview-examples/application.ts
+++ b/packages/angular-test-app/src/preview-examples/application.ts
@@ -12,6 +12,5 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './application.html',
-  styleUrls: ['./application.css'],
 })
 export default class ApplicationExample {}
diff --git a/packages/angular-test-app/src/preview-examples/menu-category.css b/packages/angular-test-app/src/preview-examples/menu-category.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/angular-test-app/src/preview-examples/menu-category.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/angular-test-app/src/preview-examples/menu-category.ts b/packages/angular-test-app/src/preview-examples/menu-category.ts
index 3a6c1584a46..36ee522d952 100644
--- a/packages/angular-test-app/src/preview-examples/menu-category.ts
+++ b/packages/angular-test-app/src/preview-examples/menu-category.ts
@@ -12,6 +12,5 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './menu-category.html',
-  styleUrls: ['./menu-category.css'],
 })
 export default class MenuCategory {}
diff --git a/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.css b/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts b/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts
index 94c30d43584..c84189c3589 100644
--- a/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts
+++ b/packages/angular-test-app/src/preview-examples/menu-with-bottom-tabs.ts
@@ -17,6 +17,5 @@ import { Component } from '@angular/core';
       <ix-menu-item tab-icon="info" slot="bottom"> Bottom tab </ix-menu-item>
     </ix-menu>
   `,
-  styleUrls: ['./menu-with-bottom-tabs.css'],
 })
 export default class VerticalTabs {}
diff --git a/packages/angular-test-app/src/preview-examples/popover-news.css b/packages/angular-test-app/src/preview-examples/popover-news.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/angular-test-app/src/preview-examples/popover-news.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/angular-test-app/src/preview-examples/popover-news.ts b/packages/angular-test-app/src/preview-examples/popover-news.ts
index 818ed9c0ddf..c42358f5b63 100644
--- a/packages/angular-test-app/src/preview-examples/popover-news.ts
+++ b/packages/angular-test-app/src/preview-examples/popover-news.ts
@@ -12,6 +12,5 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './popover-news.html',
-  styleUrls: ['./popover-news.css'],
 })
 export default class PopoverNews {}
diff --git a/packages/angular-test-app/src/preview-examples/settings.css b/packages/angular-test-app/src/preview-examples/settings.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/angular-test-app/src/preview-examples/settings.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/angular-test-app/src/preview-examples/settings.ts b/packages/angular-test-app/src/preview-examples/settings.ts
index 0f157c0b63e..de97b40e612 100644
--- a/packages/angular-test-app/src/preview-examples/settings.ts
+++ b/packages/angular-test-app/src/preview-examples/settings.ts
@@ -12,7 +12,6 @@ import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './settings.html',
-  styleUrls: ['./settings.css'],
 })
 export default class Settings implements AfterViewInit {
   @ViewChild('menu', { read: ElementRef })
diff --git a/packages/html-test-app/src/preview-examples/about-and-legal.css b/packages/html-test-app/src/preview-examples/about-and-legal.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/html-test-app/src/preview-examples/about-and-legal.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/html-test-app/src/preview-examples/about-and-legal.html b/packages/html-test-app/src/preview-examples/about-and-legal.html
index c1c0d5e4cbe..e1d46109d39 100644
--- a/packages/html-test-app/src/preview-examples/about-and-legal.html
+++ b/packages/html-test-app/src/preview-examples/about-and-legal.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>About and legal example</title>
-    <link rel="stylesheet" href="./about-and-legal.css" />
   </head>
   <body>
     <ix-application>
diff --git a/packages/html-test-app/src/preview-examples/application-app-switch.css b/packages/html-test-app/src/preview-examples/application-app-switch.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/html-test-app/src/preview-examples/application-app-switch.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/html-test-app/src/preview-examples/application-app-switch.html b/packages/html-test-app/src/preview-examples/application-app-switch.html
index 414acca78ca..30d00109eb6 100644
--- a/packages/html-test-app/src/preview-examples/application-app-switch.html
+++ b/packages/html-test-app/src/preview-examples/application-app-switch.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Application app switch example</title>
-    <link rel="stylesheet" href="./application-app-switch.css" />
   </head>
   <body>
     <ix-application>
diff --git a/packages/html-test-app/src/preview-examples/application-breakpoints.css b/packages/html-test-app/src/preview-examples/application-breakpoints.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/html-test-app/src/preview-examples/application-breakpoints.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/html-test-app/src/preview-examples/application-breakpoints.html b/packages/html-test-app/src/preview-examples/application-breakpoints.html
index 65cc6d946d0..e975752563c 100644
--- a/packages/html-test-app/src/preview-examples/application-breakpoints.html
+++ b/packages/html-test-app/src/preview-examples/application-breakpoints.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Application breakpoints example</title>
-    <link rel="stylesheet" href="./application-breakpoints.css" />
   </head>
   <body>
     <ix-application application-name="Application name">
diff --git a/packages/html-test-app/src/preview-examples/application.css b/packages/html-test-app/src/preview-examples/application.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/html-test-app/src/preview-examples/application.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/html-test-app/src/preview-examples/application.html b/packages/html-test-app/src/preview-examples/application.html
index 683b3e10f76..2654080a16d 100644
--- a/packages/html-test-app/src/preview-examples/application.html
+++ b/packages/html-test-app/src/preview-examples/application.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Application example</title>
-    <link rel="stylesheet" href="./application.css" />
   </head>
   <body>
     <ix-application>
diff --git a/packages/html-test-app/src/preview-examples/menu-category.css b/packages/html-test-app/src/preview-examples/menu-category.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/html-test-app/src/preview-examples/menu-category.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/html-test-app/src/preview-examples/menu-category.html b/packages/html-test-app/src/preview-examples/menu-category.html
index 0d01d2fc80c..f822ac624ee 100644
--- a/packages/html-test-app/src/preview-examples/menu-category.html
+++ b/packages/html-test-app/src/preview-examples/menu-category.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Menu category example</title>
-    <link rel="stylesheet" href="./menu-category.css" />
   </head>
   <body>
     <ix-application force-breakpoint="lg">
diff --git a/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.css b/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.html b/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.html
index 98d703e1753..1beba91fd7d 100644
--- a/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.html
+++ b/packages/html-test-app/src/preview-examples/menu-with-bottom-tabs.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Menu with bottom tabs example</title>
-    <link rel="stylesheet" href="./menu-with-bottom-tabs.css" />
   </head>
   <body>
     <ix-menu>
diff --git a/packages/html-test-app/src/preview-examples/popover-news.css b/packages/html-test-app/src/preview-examples/popover-news.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/html-test-app/src/preview-examples/popover-news.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/html-test-app/src/preview-examples/popover-news.html b/packages/html-test-app/src/preview-examples/popover-news.html
index ad248ff05af..0308dbd18ca 100644
--- a/packages/html-test-app/src/preview-examples/popover-news.html
+++ b/packages/html-test-app/src/preview-examples/popover-news.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Popover news example</title>
-    <link rel="stylesheet" href="./popover-news.css" />
   </head>
   <body>
     <ix-application>
diff --git a/packages/html-test-app/src/preview-examples/settings.css b/packages/html-test-app/src/preview-examples/settings.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/html-test-app/src/preview-examples/settings.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/html-test-app/src/preview-examples/settings.html b/packages/html-test-app/src/preview-examples/settings.html
index 177e1d20adf..48e8caa5e2c 100644
--- a/packages/html-test-app/src/preview-examples/settings.html
+++ b/packages/html-test-app/src/preview-examples/settings.html
@@ -13,7 +13,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Settings example</title>
-    <link rel="stylesheet" href="./settings.css" />
   </head>
   <body>
     <ix-application>
diff --git a/packages/react-test-app/src/preview-examples/about-and-legal.scoped.css b/packages/react-test-app/src/preview-examples/about-and-legal.scoped.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/react-test-app/src/preview-examples/about-and-legal.scoped.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/react-test-app/src/preview-examples/about-and-legal.tsx b/packages/react-test-app/src/preview-examples/about-and-legal.tsx
index 1152784961c..01622ad10c4 100644
--- a/packages/react-test-app/src/preview-examples/about-and-legal.tsx
+++ b/packages/react-test-app/src/preview-examples/about-and-legal.tsx
@@ -7,8 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import './about-and-legal.scoped.css';
-
 import {
   IxApplication,
   IxApplicationHeader,
diff --git a/packages/react-test-app/src/preview-examples/application-app-switch.scoped.css b/packages/react-test-app/src/preview-examples/application-app-switch.scoped.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/react-test-app/src/preview-examples/application-app-switch.scoped.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/react-test-app/src/preview-examples/application-app-switch.tsx b/packages/react-test-app/src/preview-examples/application-app-switch.tsx
index e27e7d995a2..0235f96086d 100644
--- a/packages/react-test-app/src/preview-examples/application-app-switch.tsx
+++ b/packages/react-test-app/src/preview-examples/application-app-switch.tsx
@@ -7,8 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import './application-app-switch.scoped.css';
-
 import { AppSwitchConfiguration } from '@siemens/ix';
 import {
   IxApplication,
diff --git a/packages/react-test-app/src/preview-examples/application-breakpoints.scoped.css b/packages/react-test-app/src/preview-examples/application-breakpoints.scoped.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/react-test-app/src/preview-examples/application-breakpoints.scoped.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/react-test-app/src/preview-examples/application-breakpoints.tsx b/packages/react-test-app/src/preview-examples/application-breakpoints.tsx
index 846ebd29bec..97118616850 100644
--- a/packages/react-test-app/src/preview-examples/application-breakpoints.tsx
+++ b/packages/react-test-app/src/preview-examples/application-breakpoints.tsx
@@ -7,8 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import './application-breakpoints.scoped.css';
-
 import { Breakpoint } from '@siemens/ix';
 import {
   IxApplication,
diff --git a/packages/react-test-app/src/preview-examples/application.scoped.css b/packages/react-test-app/src/preview-examples/application.scoped.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/react-test-app/src/preview-examples/application.scoped.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/react-test-app/src/preview-examples/application.tsx b/packages/react-test-app/src/preview-examples/application.tsx
index 4d2f145be15..da98550d068 100644
--- a/packages/react-test-app/src/preview-examples/application.tsx
+++ b/packages/react-test-app/src/preview-examples/application.tsx
@@ -7,8 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import './application.scoped.css';
-
 import {
   IxApplication,
   IxApplicationHeader,
diff --git a/packages/react-test-app/src/preview-examples/menu-category.scoped.css b/packages/react-test-app/src/preview-examples/menu-category.scoped.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/react-test-app/src/preview-examples/menu-category.scoped.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/react-test-app/src/preview-examples/menu-category.tsx b/packages/react-test-app/src/preview-examples/menu-category.tsx
index aededccc0a6..6e78050ceef 100644
--- a/packages/react-test-app/src/preview-examples/menu-category.tsx
+++ b/packages/react-test-app/src/preview-examples/menu-category.tsx
@@ -7,8 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import './menu-category.scoped.css';
-
 import {
   IxApplication,
   IxMenu,
diff --git a/packages/react-test-app/src/preview-examples/menu-with-bottom-tabs.scoped.css b/packages/react-test-app/src/preview-examples/menu-with-bottom-tabs.scoped.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/react-test-app/src/preview-examples/menu-with-bottom-tabs.scoped.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/react-test-app/src/preview-examples/menu-with-bottom-tabs.tsx b/packages/react-test-app/src/preview-examples/menu-with-bottom-tabs.tsx
index 3e48ef31567..5f40bd0a0d1 100644
--- a/packages/react-test-app/src/preview-examples/menu-with-bottom-tabs.tsx
+++ b/packages/react-test-app/src/preview-examples/menu-with-bottom-tabs.tsx
@@ -7,8 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import './menu-with-bottom-tabs.scoped.css';
-
 import { IxMenu, IxMenuItem } from '@siemens/ix-react';
 
 export default () => {
diff --git a/packages/react-test-app/src/preview-examples/popover-news.scoped.css b/packages/react-test-app/src/preview-examples/popover-news.scoped.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/react-test-app/src/preview-examples/popover-news.scoped.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/react-test-app/src/preview-examples/popover-news.tsx b/packages/react-test-app/src/preview-examples/popover-news.tsx
index 2704e4fde4d..1031adc4774 100644
--- a/packages/react-test-app/src/preview-examples/popover-news.tsx
+++ b/packages/react-test-app/src/preview-examples/popover-news.tsx
@@ -7,8 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import './popover-news.scoped.css';
-
 import {
   IxApplication,
   IxApplicationHeader,
diff --git a/packages/react-test-app/src/preview-examples/settings.scoped.css b/packages/react-test-app/src/preview-examples/settings.scoped.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/react-test-app/src/preview-examples/settings.scoped.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/react-test-app/src/preview-examples/settings.tsx b/packages/react-test-app/src/preview-examples/settings.tsx
index d353200953d..a3114f616af 100644
--- a/packages/react-test-app/src/preview-examples/settings.tsx
+++ b/packages/react-test-app/src/preview-examples/settings.tsx
@@ -7,8 +7,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import './settings.scoped.css';
-
 import {
   IxApplication,
   IxApplicationHeader,
diff --git a/packages/vue-test-app/src/preview-examples/about-and-legal.css b/packages/vue-test-app/src/preview-examples/about-and-legal.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/vue-test-app/src/preview-examples/about-and-legal.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/vue-test-app/src/preview-examples/about-and-legal.vue b/packages/vue-test-app/src/preview-examples/about-and-legal.vue
index 1d3013c48c8..d7afdc254bc 100644
--- a/packages/vue-test-app/src/preview-examples/about-and-legal.vue
+++ b/packages/vue-test-app/src/preview-examples/about-and-legal.vue
@@ -22,8 +22,6 @@ const menu = ref<HTMLIxMenuElement>();
 watch(menu, () => menu.value?.toggleAbout(true));
 </script>
 
-<style scoped src="./about-and-legal.css"></style>
-
 <template>
   <IxApplication>
     <IxApplicationHeader>
diff --git a/packages/vue-test-app/src/preview-examples/application-app-switch.css b/packages/vue-test-app/src/preview-examples/application-app-switch.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/vue-test-app/src/preview-examples/application-app-switch.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/vue-test-app/src/preview-examples/application-app-switch.vue b/packages/vue-test-app/src/preview-examples/application-app-switch.vue
index 68de86e5559..c515ce225a8 100644
--- a/packages/vue-test-app/src/preview-examples/application-app-switch.vue
+++ b/packages/vue-test-app/src/preview-examples/application-app-switch.vue
@@ -46,8 +46,6 @@ const appSwitchConfig: AppSwitchConfiguration = {
 };
 </script>
 
-<style scoped src="./application-app-switch.css"></style>
-
 <template>
   <IxApplication :appSwitchConfig="appSwitchConfig">
     <IxApplicationHeader name="My Application">
diff --git a/packages/vue-test-app/src/preview-examples/application-breakpoints.css b/packages/vue-test-app/src/preview-examples/application-breakpoints.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/vue-test-app/src/preview-examples/application-breakpoints.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/vue-test-app/src/preview-examples/application-breakpoints.vue b/packages/vue-test-app/src/preview-examples/application-breakpoints.vue
index 386c5fe11ac..cd5f8c12668 100644
--- a/packages/vue-test-app/src/preview-examples/application-breakpoints.vue
+++ b/packages/vue-test-app/src/preview-examples/application-breakpoints.vue
@@ -23,8 +23,6 @@ import {
 } from '@siemens/ix-vue';
 </script>
 
-<style scoped src="./application-breakpoints.css"></style>
-
 <script lang="ts">
 export default {
   data(): {
diff --git a/packages/vue-test-app/src/preview-examples/application.css b/packages/vue-test-app/src/preview-examples/application.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/vue-test-app/src/preview-examples/application.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/vue-test-app/src/preview-examples/application.vue b/packages/vue-test-app/src/preview-examples/application.vue
index a4bd778bcf0..d057a276d25 100644
--- a/packages/vue-test-app/src/preview-examples/application.vue
+++ b/packages/vue-test-app/src/preview-examples/application.vue
@@ -18,8 +18,6 @@ import {
 } from '@siemens/ix-vue';
 </script>
 
-<style scoped src="./application.css"></style>
-
 <template>
   <IxApplication>
     <IxApplicationHeader name="My Application">
diff --git a/packages/vue-test-app/src/preview-examples/menu-category.css b/packages/vue-test-app/src/preview-examples/menu-category.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/vue-test-app/src/preview-examples/menu-category.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/vue-test-app/src/preview-examples/menu-category.vue b/packages/vue-test-app/src/preview-examples/menu-category.vue
index 48e79f3be89..7f42c12cde7 100644
--- a/packages/vue-test-app/src/preview-examples/menu-category.vue
+++ b/packages/vue-test-app/src/preview-examples/menu-category.vue
@@ -16,8 +16,6 @@ import {
 } from '@siemens/ix-vue';
 </script>
 
-<style scoped src="./menu-category.css"></style>
-
 <template>
   <IxApplication>
     <IxMenu>
diff --git a/packages/vue-test-app/src/preview-examples/menu-with-bottom-tabs.css b/packages/vue-test-app/src/preview-examples/menu-with-bottom-tabs.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/vue-test-app/src/preview-examples/menu-with-bottom-tabs.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/vue-test-app/src/preview-examples/menu-with-bottom-tabs.vue b/packages/vue-test-app/src/preview-examples/menu-with-bottom-tabs.vue
index 0cf8dec17f6..71971073361 100644
--- a/packages/vue-test-app/src/preview-examples/menu-with-bottom-tabs.vue
+++ b/packages/vue-test-app/src/preview-examples/menu-with-bottom-tabs.vue
@@ -11,8 +11,6 @@
 import { IxMenu, IxMenuItem } from '@siemens/ix-vue';
 </script>
 
-<style scoped src="./menu-with-bottom-tabs.css"></style>
-
 <template>
   <IxMenu>
     <IxMenuItem home-tab tab-icon="home"> Home </IxMenuItem>
diff --git a/packages/vue-test-app/src/preview-examples/popover-news.css b/packages/vue-test-app/src/preview-examples/popover-news.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/vue-test-app/src/preview-examples/popover-news.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/vue-test-app/src/preview-examples/popover-news.vue b/packages/vue-test-app/src/preview-examples/popover-news.vue
index e2c831ae42a..b91941d6d7e 100644
--- a/packages/vue-test-app/src/preview-examples/popover-news.vue
+++ b/packages/vue-test-app/src/preview-examples/popover-news.vue
@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import {
-IxApplication,
+  IxApplication,
   IxApplicationHeader,
   IxBasicNavigation,
   IxMenu,
@@ -19,8 +19,6 @@ IxApplication,
 } from '@siemens/ix-vue';
 </script>
 
-<style scoped src="./popover-news.css"></style>
-
 <template>
   <IxApplication>
     <IxApplicationHeader>
diff --git a/packages/vue-test-app/src/preview-examples/settings.css b/packages/vue-test-app/src/preview-examples/settings.css
deleted file mode 100644
index a726a2876a5..00000000000
--- a/packages/vue-test-app/src/preview-examples/settings.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 Siemens AG
- *
- * SPDX-License-Identifier: MIT
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/*
- * Styles get overwritten by html-test-app css files each build or dev task.
- * If you want to modify the example styles do this only inside the html-test-app
- */
-
-ix-application {
-  width: 100vw;
-  height: 100vh;
-}
diff --git a/packages/vue-test-app/src/preview-examples/settings.vue b/packages/vue-test-app/src/preview-examples/settings.vue
index 3b1edd5d841..b60161f2344 100644
--- a/packages/vue-test-app/src/preview-examples/settings.vue
+++ b/packages/vue-test-app/src/preview-examples/settings.vue
@@ -27,8 +27,6 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped src="./settings.css"></style>
-
 <template>
   <IxApplication>
     <IxApplicationHeader>