From 473e6097c9886a73678276c42024366d39f8b233 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Mon, 21 Oct 2024 14:17:37 +0300
Subject: [PATCH 01/11] chore: add testing package

---
 package.json                                  |  1 +
 packages/main/cypress.config.js               |  9 +---
 packages/main/cypress/support/component.ts    |  2 +-
 packages/main/package.json                    |  1 +
 packages/testing/package.json                 | 45 +++++++++++++++++++
 packages/testing/src/cypress.config.js        | 38 ++++++++++++++++
 .../src}/cypress/support/commands.js          | 35 ++++++++++++++-
 .../src}/cypress/support/component-index.html |  0
 .../src}/cypress/support/component.d.ts       |  0
 .../testing/src/cypress/support/component.js  |  1 +
 packages/{tools => testing}/types/index.d.ts  |  0
 .../components-package/cypress.config.js      | 19 --------
 .../cypress/support/component.js              | 34 --------------
 packages/tools/package.json                   |  1 -
 vite.config.js                                |  2 +
 15 files changed, 124 insertions(+), 64 deletions(-)
 create mode 100644 packages/testing/package.json
 create mode 100644 packages/testing/src/cypress.config.js
 rename packages/{tools/components-package => testing/src}/cypress/support/commands.js (63%)
 rename packages/{tools/components-package => testing/src}/cypress/support/component-index.html (100%)
 rename packages/{tools/components-package => testing/src}/cypress/support/component.d.ts (100%)
 create mode 100644 packages/testing/src/cypress/support/component.js
 rename packages/{tools => testing}/types/index.d.ts (100%)
 delete mode 100644 packages/tools/components-package/cypress.config.js
 delete mode 100644 packages/tools/components-package/cypress/support/component.js

diff --git a/package.json b/package.json
index 857323ea161a..208e80630f07 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "packages/main",
     "packages/compat",
     "packages/ai",
+    "packages/testing",
     "packages/fiori",
     "packages/icons",
     "packages/icons-business-suite",
diff --git a/packages/main/cypress.config.js b/packages/main/cypress.config.js
index 0f37fc0d4714..ad5f5b26f342 100644
--- a/packages/main/cypress.config.js
+++ b/packages/main/cypress.config.js
@@ -1,10 +1,3 @@
-import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
-import path from "path";
-import { fileURLToPath } from "node:url";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-cypressConfig.component.supportFile = path.join(__dirname, "cypress/support/component.ts");
+import cypressConfig from "@ui5/webcomponents-testing/src/cypress.config.js"
 
 export default cypressConfig;
diff --git a/packages/main/cypress/support/component.ts b/packages/main/cypress/support/component.ts
index 66be9484be83..a59ffa05a6e7 100644
--- a/packages/main/cypress/support/component.ts
+++ b/packages/main/cypress/support/component.ts
@@ -1,3 +1,3 @@
-import "@ui5/webcomponents-tools/components-package/cypress/support/component.js";
+import "@ui5/webcomponents-testing/src/cypress/support/component.js";
 
 import "./commands.js";
diff --git a/packages/main/package.json b/packages/main/package.json
index 1df755146185..6dd74524643c 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -59,6 +59,7 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "2.4.0-rc.1",
+    "@ui5/webcomponents-testing": "0.0.0",
     "chromedriver": "^128.0.3",
     "lit": "^2.0.0"
   }
diff --git a/packages/testing/package.json b/packages/testing/package.json
new file mode 100644
index 000000000000..1c771d509735
--- /dev/null
+++ b/packages/testing/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "@ui5/webcomponents-testing",
+  "version": "0.0.0",
+  "description": "UI5 Web Components: webcomponents.testing",
+  "author": "SAP SE (https://www.sap.com)",
+  "license": "Apache-2.0",
+  "private": false,
+  "type": "module",
+  "keywords": [
+    "openui5",
+    "sapui5",
+    "ui5"
+  ],
+  "types": "./types/index.d.ts",
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SAP/ui5-webcomponents.git",
+    "directory": "packages/tools"
+  },
+  "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "cypress": "^13.11.0",
+    "cypress-real-events": "^1.12.0",
+    "eslint": "^7.22.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-cypress": "^3.4.0",
+    "eslint-plugin-import": "^2.22.1",
+    "vite": "^5.4.8"
+  },
+  "peerDependencies": {
+    "chromedriver": "*",
+    "typescript": "^5.6.2"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "cypress-ct-lit": "^0.4.0",
+    "cypress-real-events": "^1.12.0"
+  }
+}
diff --git a/packages/testing/src/cypress.config.js b/packages/testing/src/cypress.config.js
new file mode 100644
index 000000000000..76616c88b6ec
--- /dev/null
+++ b/packages/testing/src/cypress.config.js
@@ -0,0 +1,38 @@
+import { defineConfig } from 'cypress';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { existsSync } from "fs";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const supportFile = () => {
+	const supportFilePath = "cypress/support/component";
+	const supportedExtension = [".js", ".ts"]
+	let supportFile = path.join(__dirname, `${supportFilePath}.js`);
+	let packageFileExtension = supportedExtension.find(extension => existsSync(path.join(process.cwd(), `${supportFilePath}${extension}`)));
+
+	if (packageFileExtension) {
+		supportFile = path.join(process.cwd(), `${supportFilePath}${packageFileExtension}`);
+	}
+
+	return supportFile;
+}
+
+export default defineConfig({
+	component: {
+		supportFile: supportFile(),
+		indexHtmlFile: path.join(__dirname, "cypress/support/component-index.html"),
+		specPattern: ["**/specs/*.cy.{js,ts}", "**/specs/**/*.cy.{js,ts}"],
+		devServer: {
+			framework: 'cypress-ct-lit',
+			bundler: 'vite',
+		}
+	},
+	video: false,
+	screenshotOnRunFailure: false,
+	scrollBehavior: false,
+	viewportHeight: 1080,
+	viewportWidth: 1440,
+})
+
diff --git a/packages/tools/components-package/cypress/support/commands.js b/packages/testing/src/cypress/support/commands.js
similarity index 63%
rename from packages/tools/components-package/cypress/support/commands.js
rename to packages/testing/src/cypress/support/commands.js
index 073649d1bc49..8848759e7444 100644
--- a/packages/tools/components-package/cypress/support/commands.js
+++ b/packages/testing/src/cypress/support/commands.js
@@ -36,4 +36,37 @@
 //   }
 // }
 
-import "cypress-real-events";
\ No newline at end of file
+import "cypress-real-events";
+import { setupHooks } from '@cypress/mount-utils';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { mount } from 'cypress-ct-lit'
+
+let dispose;
+
+function cleanup() {
+	dispose?.();
+}
+
+function ui5Mount(component, options = {}) {
+	const configurationScript = document.head.querySelector("script[data-ui5-config]")
+	cleanup();
+
+	if (options.ui5Configuration) {
+		configurationScript.innerHTML = JSON.stringify(options.ui5Configuration);
+
+	}
+
+	dispose = () => {
+		configurationScript.innerHTML = "{}";
+	}
+
+	if (typeof component === "string") {
+		return mount(unsafeHTML(component), options)
+	}
+
+	return mount(component, options)
+}
+
+setupHooks(cleanup);
+
+Cypress.Commands.add('mount', ui5Mount)
\ No newline at end of file
diff --git a/packages/tools/components-package/cypress/support/component-index.html b/packages/testing/src/cypress/support/component-index.html
similarity index 100%
rename from packages/tools/components-package/cypress/support/component-index.html
rename to packages/testing/src/cypress/support/component-index.html
diff --git a/packages/tools/components-package/cypress/support/component.d.ts b/packages/testing/src/cypress/support/component.d.ts
similarity index 100%
rename from packages/tools/components-package/cypress/support/component.d.ts
rename to packages/testing/src/cypress/support/component.d.ts
diff --git a/packages/testing/src/cypress/support/component.js b/packages/testing/src/cypress/support/component.js
new file mode 100644
index 000000000000..2c364d59c316
--- /dev/null
+++ b/packages/testing/src/cypress/support/component.js
@@ -0,0 +1 @@
+import "./commands.js";
\ No newline at end of file
diff --git a/packages/tools/types/index.d.ts b/packages/testing/types/index.d.ts
similarity index 100%
rename from packages/tools/types/index.d.ts
rename to packages/testing/types/index.d.ts
diff --git a/packages/tools/components-package/cypress.config.js b/packages/tools/components-package/cypress.config.js
deleted file mode 100644
index d30fab8cd2c1..000000000000
--- a/packages/tools/components-package/cypress.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-const { defineConfig } = require('cypress')
-const path = require("path");
-
-module.exports = defineConfig({
-	component: {
-		supportFile: path.join(__dirname, "cypress/support/component.js"),
-		indexHtmlFile: path.join(__dirname, "cypress/support/component-index.html"),
-		specPattern: ["**/specs/*.cy.{js,ts}", "**/specs/**/*.cy.{js,ts}"],
-		devServer: {
-			framework: 'cypress-ct-lit',
-			bundler: 'vite',
-		}
-	},
-	video: false,
-	screenshotOnRunFailure: false,
-	scrollBehavior: false,
-	viewportHeight: 1080,
-	viewportWidth: 1440,
-})
\ No newline at end of file
diff --git a/packages/tools/components-package/cypress/support/component.js b/packages/tools/components-package/cypress/support/component.js
deleted file mode 100644
index ed6c435c1f61..000000000000
--- a/packages/tools/components-package/cypress/support/component.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { setupHooks } from '@cypress/mount-utils';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { mount } from 'cypress-ct-lit'
-import "./commands.js";
-
-let dispose;
-
-function cleanup() {
-	dispose?.();
-}
-
-function ui5Mount(component, options = {}) {
-	const configurationScript = document.head.querySelector("script[data-ui5-config]")
-	cleanup();
-
-	if (options.ui5Configuration) {
-		configurationScript.innerHTML = JSON.stringify(options.ui5Configuration);
-
-	}
-
-	dispose = () => {
-		configurationScript.innerHTML = "{}";
-	}
-
-	if (typeof component === "string") {
-		return mount(unsafeHTML(component), options)
-	}
-
-	return mount(component, options)
-}
-
-setupHooks(cleanup);
-
-Cypress.Commands.add('mount', ui5Mount)
\ No newline at end of file
diff --git a/packages/tools/package.json b/packages/tools/package.json
index 691a0d919a24..7d3a0e61961c 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -10,7 +10,6 @@
     "sapui5",
     "ui5"
   ],
-  "types": "./types/index.d.ts",
   "scripts": {},
   "bin": {
     "wc-dev": "bin/dev.js",
diff --git a/vite.config.js b/vite.config.js
index 3af4dd565686..c655f9b3baad 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -93,6 +93,8 @@ const customResolver = (id, source, options) => {
 	}
 }
 
+console.log("=============", "asdasdasd")
+
 export default defineConfig(async () => {
 	return {
 		build: {

From a79666d16d4e0ecb547b2c337ca2bfa7277a0927 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Mon, 21 Oct 2024 14:22:16 +0300
Subject: [PATCH 02/11] chore: clean

---
 packages/main/cypress.config.js        | 11 +++++++++--
 packages/testing/src/cypress.config.js | 19 ++-----------------
 vite.config.js                         |  2 --
 3 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/packages/main/cypress.config.js b/packages/main/cypress.config.js
index ad5f5b26f342..5e0308b0d522 100644
--- a/packages/main/cypress.config.js
+++ b/packages/main/cypress.config.js
@@ -1,3 +1,10 @@
-import cypressConfig from "@ui5/webcomponents-testing/src/cypress.config.js"
+import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
+import path from "path";
+import { fileURLToPath } from "node:url";
 
-export default cypressConfig;
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+cypressConfig.component.supportFile = path.join(__dirname, "cypress/support/component.ts");
+
+export default cypressConfig;
\ No newline at end of file
diff --git a/packages/testing/src/cypress.config.js b/packages/testing/src/cypress.config.js
index 76616c88b6ec..219501597573 100644
--- a/packages/testing/src/cypress.config.js
+++ b/packages/testing/src/cypress.config.js
@@ -1,27 +1,13 @@
 import { defineConfig } from 'cypress';
 import path from 'path';
 import { fileURLToPath } from 'url';
-import { existsSync } from "fs";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const supportFile = () => {
-	const supportFilePath = "cypress/support/component";
-	const supportedExtension = [".js", ".ts"]
-	let supportFile = path.join(__dirname, `${supportFilePath}.js`);
-	let packageFileExtension = supportedExtension.find(extension => existsSync(path.join(process.cwd(), `${supportFilePath}${extension}`)));
-
-	if (packageFileExtension) {
-		supportFile = path.join(process.cwd(), `${supportFilePath}${packageFileExtension}`);
-	}
-
-	return supportFile;
-}
-
 export default defineConfig({
 	component: {
-		supportFile: supportFile(),
+		supportFile: path.join(__dirname, "cypress/support/component.js"),
 		indexHtmlFile: path.join(__dirname, "cypress/support/component-index.html"),
 		specPattern: ["**/specs/*.cy.{js,ts}", "**/specs/**/*.cy.{js,ts}"],
 		devServer: {
@@ -34,5 +20,4 @@ export default defineConfig({
 	scrollBehavior: false,
 	viewportHeight: 1080,
 	viewportWidth: 1440,
-})
-
+})
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index c655f9b3baad..3af4dd565686 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -93,8 +93,6 @@ const customResolver = (id, source, options) => {
 	}
 }
 
-console.log("=============", "asdasdasd")
-
 export default defineConfig(async () => {
 	return {
 		build: {

From cd1880096dfa88544e6df354adfdeaa3b60d8eba Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Mon, 21 Oct 2024 14:32:41 +0300
Subject: [PATCH 03/11] chore: clean

---
 packages/main/.eslintrc.cjs                 |  5 ++++
 packages/testing/src/eslint.js              | 32 +++++++++++++++++++++
 packages/tools/components-package/eslint.js | 32 ---------------------
 packages/tools/package.json                 |  5 ----
 4 files changed, 37 insertions(+), 37 deletions(-)
 create mode 100644 packages/testing/src/eslint.js

diff --git a/packages/main/.eslintrc.cjs b/packages/main/.eslintrc.cjs
index 2d19042b2aba..c6167fce221f 100644
--- a/packages/main/.eslintrc.cjs
+++ b/packages/main/.eslintrc.cjs
@@ -1,3 +1,8 @@
 const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
+const testEslint = require("@ui5/webcomponents-testing/src/eslint.js");
+
+testEslint.forEach(override => {
+    config.overrides?.push(override);
+});
 
 module.exports = config;
diff --git a/packages/testing/src/eslint.js b/packages/testing/src/eslint.js
new file mode 100644
index 000000000000..17fa15c2c3d8
--- /dev/null
+++ b/packages/testing/src/eslint.js
@@ -0,0 +1,32 @@
+export default [{
+	"files": ["**/cypress/**/*.ts"],
+
+	"plugins": [
+		"cypress"
+	],
+	extends: [
+		"plugin:cypress/recommended"
+	],
+	"env": {
+		"cypress/globals": true
+	},
+	"rules": {
+		"max-nested-callbacks": 0,
+		"@typescript-eslint/no-namespace": "off",
+		"cypress/no-assigning-return-values": "error",
+		"cypress/no-unnecessary-waiting": "error",
+		"cypress/assertion-before-screenshot": "warn",
+		"cypress/no-force": "warn",
+		"cypress/no-async-tests": "error",
+		"cypress/no-async-before": "error",
+		"cypress/no-pause": "error",
+		"import/no-extraneous-dependencies": [
+			"error",
+			{
+				"devDependencies": [
+					"**/cypress/**/*.ts"
+				]
+			}
+		]
+	}
+}];
diff --git a/packages/tools/components-package/eslint.js b/packages/tools/components-package/eslint.js
index e5a957a2d141..23dce98efdcf 100644
--- a/packages/tools/components-package/eslint.js
+++ b/packages/tools/components-package/eslint.js
@@ -36,38 +36,6 @@ const overrides = tsMode ? [
 			"@typescript-eslint/no-empty-interface": "off",
 			"lines-between-class-members": "off",
 		}
-	},
-	{
-		"files": ["**/cypress/**/*.ts"],
-
-		"plugins": [
-			"cypress"
-		],
-		extends: [
-			"plugin:cypress/recommended"
-		],
-		"env": {
-			"cypress/globals": true
-		},
-		"rules": {
-			"max-nested-callbacks": 0,
-			"@typescript-eslint/no-namespace": "off",
-			"cypress/no-assigning-return-values": "error",
-			"cypress/no-unnecessary-waiting": "error",
-			"cypress/assertion-before-screenshot": "warn",
-			"cypress/no-force": "warn",
-			"cypress/no-async-tests": "error",
-			"cypress/no-async-before": "error",
-			"cypress/no-pause": "error",
-			"import/no-extraneous-dependencies": [
-				"error",
-				{
-					"devDependencies": [
-						"**/cypress/**/*.ts"
-					]
-				}
-			]
-		}
 	}
 ] : [];
 
diff --git a/packages/tools/package.json b/packages/tools/package.json
index 7d3a0e61961c..04200ce065cd 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -41,12 +41,9 @@
     "concurrently": "^6.0.0",
     "cross-env": "^7.0.3",
     "custom-element-jet-brains-integration": "^1.4.4",
-    "cypress": "^13.11.0",
-    "cypress-real-events": "^1.12.0",
     "escodegen": "^2.0.0",
     "eslint": "^7.22.0",
     "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-plugin-cypress": "^3.4.0",
     "eslint-plugin-import": "^2.22.1",
     "esprima": "^4.0.1",
     "getopts": "^2.3.0",
@@ -80,8 +77,6 @@
     }
   },
   "devDependencies": {
-    "cypress-ct-lit": "^0.4.0",
-    "cypress-real-events": "^1.12.0",
     "esbuild": "^0.19.9",
     "yargs": "^17.5.1"
   }

From 0a60863c9c4c8977bafcbd8224e70deb17036b42 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Mon, 21 Oct 2024 14:41:31 +0300
Subject: [PATCH 04/11] chore: clean

---
 packages/main/.eslintrc.cjs                   |  2 +-
 packages/testing/package.json                 | 19 +------------------
 .../testing/src/{eslint.js => eslint.cjs}     |  2 +-
 3 files changed, 3 insertions(+), 20 deletions(-)
 rename packages/testing/src/{eslint.js => eslint.cjs} (97%)

diff --git a/packages/main/.eslintrc.cjs b/packages/main/.eslintrc.cjs
index c6167fce221f..d0463b6ee3e5 100644
--- a/packages/main/.eslintrc.cjs
+++ b/packages/main/.eslintrc.cjs
@@ -1,5 +1,5 @@
 const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
-const testEslint = require("@ui5/webcomponents-testing/src/eslint.js");
+const testEslint = require("@ui5/webcomponents-testing/src/eslint.cjs");
 
 testEslint.forEach(override => {
     config.overrides?.push(override);
diff --git a/packages/testing/package.json b/packages/testing/package.json
index 1c771d509735..a1298a22a281 100644
--- a/packages/testing/package.json
+++ b/packages/testing/package.json
@@ -16,30 +16,13 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/SAP/ui5-webcomponents.git",
-    "directory": "packages/tools"
+    "directory": "packages/testing"
   },
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
     "cypress": "^13.11.0",
     "cypress-real-events": "^1.12.0",
     "eslint": "^7.22.0",
-    "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-cypress": "^3.4.0",
-    "eslint-plugin-import": "^2.22.1",
     "vite": "^5.4.8"
-  },
-  "peerDependencies": {
-    "chromedriver": "*",
-    "typescript": "^5.6.2"
-  },
-  "peerDependenciesMeta": {
-    "typescript": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "cypress-ct-lit": "^0.4.0",
-    "cypress-real-events": "^1.12.0"
   }
 }
diff --git a/packages/testing/src/eslint.js b/packages/testing/src/eslint.cjs
similarity index 97%
rename from packages/testing/src/eslint.js
rename to packages/testing/src/eslint.cjs
index 17fa15c2c3d8..607921e3605e 100644
--- a/packages/testing/src/eslint.js
+++ b/packages/testing/src/eslint.cjs
@@ -1,4 +1,4 @@
-export default [{
+module.exports = [{
 	"files": ["**/cypress/**/*.ts"],
 
 	"plugins": [

From a7afe553cccc147d80de7b20c0152f8644995b38 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Mon, 21 Oct 2024 15:02:58 +0300
Subject: [PATCH 05/11] chore: enable split

---
 packages/base/.eslintrc.cjs            | 5 +++++
 packages/base/cypress.config.js        | 2 +-
 packages/base/package.json             | 1 +
 packages/base/tsconfig.json            | 1 -
 packages/fiori/.eslintrc.cjs           | 5 +++++
 packages/main/cypress.config.js        | 2 +-
 packages/main/package.json             | 3 ++-
 packages/testing/package.json          | 1 +
 packages/testing/src/cypress.config.js | 2 +-
 9 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/base/.eslintrc.cjs b/packages/base/.eslintrc.cjs
index 2d19042b2aba..d0463b6ee3e5 100644
--- a/packages/base/.eslintrc.cjs
+++ b/packages/base/.eslintrc.cjs
@@ -1,3 +1,8 @@
 const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
+const testEslint = require("@ui5/webcomponents-testing/src/eslint.cjs");
+
+testEslint.forEach(override => {
+    config.overrides?.push(override);
+});
 
 module.exports = config;
diff --git a/packages/base/cypress.config.js b/packages/base/cypress.config.js
index 31db8bfbff65..1b57200a6c8a 100644
--- a/packages/base/cypress.config.js
+++ b/packages/base/cypress.config.js
@@ -1,3 +1,3 @@
-import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
+import cypressConfig from "@ui5/webcomponents-testing/src/cypress.config.js";
 
 export default cypressConfig;
diff --git a/packages/base/package.json b/packages/base/package.json
index aa3642463388..b0436ba3faf4 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -53,6 +53,7 @@
   "devDependencies": {
     "@openui5/sap.ui.core": "1.120.17",
     "@ui5/webcomponents-tools": "2.4.0-rc.1",
+    "@ui5/webcomponents-testing": "0.0.0",
     "chromedriver": "^128.0.3",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
diff --git a/packages/base/tsconfig.json b/packages/base/tsconfig.json
index 5fae63f93e91..be4d242a568e 100644
--- a/packages/base/tsconfig.json
+++ b/packages/base/tsconfig.json
@@ -5,7 +5,6 @@
 		"src/global.d.ts",
 	],
 	"compilerOptions": {
-		"types": ["@ui5/webcomponents-tools"],
 		"outDir": "dist",
 		"composite": true,
 		"rootDir": "src",
diff --git a/packages/fiori/.eslintrc.cjs b/packages/fiori/.eslintrc.cjs
index 2d19042b2aba..d0463b6ee3e5 100644
--- a/packages/fiori/.eslintrc.cjs
+++ b/packages/fiori/.eslintrc.cjs
@@ -1,3 +1,8 @@
 const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
+const testEslint = require("@ui5/webcomponents-testing/src/eslint.cjs");
+
+testEslint.forEach(override => {
+    config.overrides?.push(override);
+});
 
 module.exports = config;
diff --git a/packages/main/cypress.config.js b/packages/main/cypress.config.js
index 5e0308b0d522..88ea924d3dd1 100644
--- a/packages/main/cypress.config.js
+++ b/packages/main/cypress.config.js
@@ -1,4 +1,4 @@
-import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
+import "@ui5/webcomponents-testing/src/cypress/support/component.js";
 import path from "path";
 import { fileURLToPath } from "node:url";
 
diff --git a/packages/main/package.json b/packages/main/package.json
index 6dd74524643c..3decdd1488f2 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -55,7 +55,8 @@
     "@ui5/webcomponents-icons-business-suite": "2.4.0-rc.1",
     "@ui5/webcomponents-icons-tnt": "2.4.0-rc.1",
     "@ui5/webcomponents-localization": "2.4.0-rc.1",
-    "@ui5/webcomponents-theming": "2.4.0-rc.1"
+    "@ui5/webcomponents-theming": "2.4.0-rc.1",
+    "@ui5/webcomponents-testing": "0.0.0"
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "2.4.0-rc.1",
diff --git a/packages/testing/package.json b/packages/testing/package.json
index a1298a22a281..79e786d36c75 100644
--- a/packages/testing/package.json
+++ b/packages/testing/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "cypress": "^13.11.0",
     "cypress-real-events": "^1.12.0",
+    "cypress-ct-lit": "^0.4.0",
     "eslint": "^7.22.0",
     "eslint-plugin-cypress": "^3.4.0",
     "vite": "^5.4.8"
diff --git a/packages/testing/src/cypress.config.js b/packages/testing/src/cypress.config.js
index 219501597573..3efda8643cdf 100644
--- a/packages/testing/src/cypress.config.js
+++ b/packages/testing/src/cypress.config.js
@@ -20,4 +20,4 @@ export default defineConfig({
 	scrollBehavior: false,
 	viewportHeight: 1080,
 	viewportWidth: 1440,
-})
\ No newline at end of file
+});

From 7de53ffa65867685fd11d8cafc5b30cd39d1c8df Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Mon, 21 Oct 2024 15:58:17 +0300
Subject: [PATCH 06/11] chore: fix config

---
 packages/fiori/cypress.config.js            | 2 +-
 packages/fiori/cypress/support/component.ts | 2 +-
 packages/main/cypress.config.js             | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/fiori/cypress.config.js b/packages/fiori/cypress.config.js
index 5e0308b0d522..ff4de3e6a7ad 100644
--- a/packages/fiori/cypress.config.js
+++ b/packages/fiori/cypress.config.js
@@ -1,4 +1,4 @@
-import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
+import cypressConfig from "@ui5/webcomponents-testing/src/cypress.config.js";
 import path from "path";
 import { fileURLToPath } from "node:url";
 
diff --git a/packages/fiori/cypress/support/component.ts b/packages/fiori/cypress/support/component.ts
index 66be9484be83..a59ffa05a6e7 100644
--- a/packages/fiori/cypress/support/component.ts
+++ b/packages/fiori/cypress/support/component.ts
@@ -1,3 +1,3 @@
-import "@ui5/webcomponents-tools/components-package/cypress/support/component.js";
+import "@ui5/webcomponents-testing/src/cypress/support/component.js";
 
 import "./commands.js";
diff --git a/packages/main/cypress.config.js b/packages/main/cypress.config.js
index 88ea924d3dd1..ff4de3e6a7ad 100644
--- a/packages/main/cypress.config.js
+++ b/packages/main/cypress.config.js
@@ -1,4 +1,4 @@
-import "@ui5/webcomponents-testing/src/cypress/support/component.js";
+import cypressConfig from "@ui5/webcomponents-testing/src/cypress.config.js";
 import path from "path";
 import { fileURLToPath } from "node:url";
 

From ae6abeb02fd5867879d461787039dfc1da14dd0d Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Mon, 21 Oct 2024 16:19:58 +0300
Subject: [PATCH 07/11] fix: lint and ts

---
 packages/base/cypress/tsconfig.json  | 2 +-
 packages/fiori/cypress/tsconfig.json | 2 +-
 packages/fiori/package.json          | 1 +
 packages/main/cypress/tsconfig.json  | 2 +-
 packages/main/package.json           | 3 +--
 packages/testing/types/index.d.ts    | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/base/cypress/tsconfig.json b/packages/base/cypress/tsconfig.json
index dfe420b8c947..c5f5fdf63d2d 100644
--- a/packages/base/cypress/tsconfig.json
+++ b/packages/base/cypress/tsconfig.json
@@ -4,7 +4,7 @@
 		"./**/*"
 	],
 	"compilerOptions": {
-		"types": ["@ui5/webcomponents-tools"],
+		"types": ["@ui5/webcomponents-testing"],
 		"outDir": "dist",
 		"composite": true,
 		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
diff --git a/packages/fiori/cypress/tsconfig.json b/packages/fiori/cypress/tsconfig.json
index ff28f5edf5c4..04dc2d73663f 100644
--- a/packages/fiori/cypress/tsconfig.json
+++ b/packages/fiori/cypress/tsconfig.json
@@ -4,7 +4,7 @@
 		"./**/*"
 	],
 	"compilerOptions": {
-		"types": ["@ui5/webcomponents-tools"],
+		"types": ["@ui5/webcomponents-testing"],
 		"composite": true,
 		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
 		"paths": {
diff --git a/packages/fiori/package.json b/packages/fiori/package.json
index 523e2864a9d8..b3debc0ca680 100644
--- a/packages/fiori/package.json
+++ b/packages/fiori/package.json
@@ -61,6 +61,7 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "2.4.0-rc.1",
+    "@ui5/webcomponents-testing": "0.0.0",
     "chromedriver": "^128.0.3",
     "lit": "^2.0.0"
   }
diff --git a/packages/main/cypress/tsconfig.json b/packages/main/cypress/tsconfig.json
index 127b8ad1bbc3..2a3cab33a423 100644
--- a/packages/main/cypress/tsconfig.json
+++ b/packages/main/cypress/tsconfig.json
@@ -4,7 +4,7 @@
 		"./**/*"
 	],
 	"compilerOptions": {
-		"types": ["@ui5/webcomponents-tools"],
+		"types": ["@ui5/webcomponents-testing"],
 		"composite": true,
 		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
 		"paths": {
diff --git a/packages/main/package.json b/packages/main/package.json
index 3decdd1488f2..6dd74524643c 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -55,8 +55,7 @@
     "@ui5/webcomponents-icons-business-suite": "2.4.0-rc.1",
     "@ui5/webcomponents-icons-tnt": "2.4.0-rc.1",
     "@ui5/webcomponents-localization": "2.4.0-rc.1",
-    "@ui5/webcomponents-theming": "2.4.0-rc.1",
-    "@ui5/webcomponents-testing": "0.0.0"
+    "@ui5/webcomponents-theming": "2.4.0-rc.1"
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "2.4.0-rc.1",
diff --git a/packages/testing/types/index.d.ts b/packages/testing/types/index.d.ts
index ff22cdd6e628..7b14da45d578 100644
--- a/packages/testing/types/index.d.ts
+++ b/packages/testing/types/index.d.ts
@@ -1 +1 @@
-import "../components-package/cypress/support/component"
+import "../src/cypress/support/component"

From f7a843b841202c23b14f4ce7395b2052f3a08508 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Mon, 21 Oct 2024 16:29:53 +0300
Subject: [PATCH 08/11] chore: update depedencies

---
 docs/4-development/10-testing.md              |  3 +-
 .../cypress/specs/BarcodeScannerDialog.cy.ts  |  3 +-
 packages/fiori/cypress/specs/FCL.cy.ts        |  3 +-
 packages/fiori/cypress/specs/Page.cy.ts       |  3 +-
 packages/fiori/package.json                   |  3 +-
 packages/main/cypress/specs/Button.cy.ts      | 39 ++++++-----
 packages/main/cypress/specs/Eventing.cy.ts    |  5 +-
 packages/main/cypress/specs/F6.cy.ts          | 29 ++++----
 packages/main/cypress/specs/Form.cy.ts        | 13 ++--
 packages/main/cypress/specs/FormSupport.cy.ts | 43 ++++++------
 packages/main/cypress/specs/List.cy.ts        |  3 +-
 .../main/cypress/specs/LitKeyFunction.cy.ts   |  3 +-
 packages/main/cypress/specs/Menu.cy.ts        | 33 +++++----
 packages/main/cypress/specs/RTL.cy.ts         |  3 +-
 .../specs/ResponsivePopover.mobile.cy.ts      | 11 ++-
 packages/main/cypress/specs/Select.cy.ts      |  3 +-
 .../main/cypress/specs/TableLoading.cy.ts     |  3 +-
 packages/main/cypress/specs/TextArea.cy.ts    | 67 +++++++++----------
 .../cypress/specs/base/AriaLabelHelper.cy.ts  | 11 ++-
 packages/main/cypress/specs/base/Events.cy.ts |  9 ++-
 .../cypress/specs/base/IconCollection.cy.ts   |  5 +-
 .../specs/base/IgnoreCustomElements.cy.ts     |  3 +-
 .../main/cypress/specs/base/Tooltips.cy.ts    |  3 +-
 packages/main/package.json                    |  3 +-
 packages/testing/package.json                 |  5 +-
 yarn.lock                                     | 10 ++-
 26 files changed, 147 insertions(+), 172 deletions(-)

diff --git a/docs/4-development/10-testing.md b/docs/4-development/10-testing.md
index bc7e046cf989..59dfb4c11264 100644
--- a/docs/4-development/10-testing.md
+++ b/docs/4-development/10-testing.md
@@ -233,11 +233,10 @@ We utilize component testing for UI5 web components, which involves mounting the
 **Example Test File:**
 
 ```typescript
-import { html } from "lit";
 
 describe("Demo", () => {
   it("Button exists", () => {
-    cy.mount(html`<ui5-test-generic></ui5-test-generic>`);
+    cy.mount(`<ui5-test-generic></ui5-test-generic>`);
 
     cy.get("[ui5-button]").should("exist");
   });
diff --git a/packages/fiori/cypress/specs/BarcodeScannerDialog.cy.ts b/packages/fiori/cypress/specs/BarcodeScannerDialog.cy.ts
index e87df3fb908a..e9a90b9a9e74 100644
--- a/packages/fiori/cypress/specs/BarcodeScannerDialog.cy.ts
+++ b/packages/fiori/cypress/specs/BarcodeScannerDialog.cy.ts
@@ -1,4 +1,3 @@
-import { html } from "lit";
 import "@ui5/webcomponents-icons/dist/camera.js";
 import "../../src/BarcodeScannerDialog.js";
 import type BarcodeScannerDialog from "../../src/BarcodeScannerDialog.js";
@@ -8,7 +7,7 @@ describe("BarcodeScannerDialog", () => {
 	let handleScanError: (event: CustomEvent) => void;
 
 	beforeEach(() => {
-		cy.mount(html`
+		cy.mount(`
 			<ui5-barcode-scanner-dialog id="dlgScan"></ui5-barcode-scanner-dialog>
 			<ui5-button id="btnScan" icon="camera">Open Scanner Dialog</ui5-button>
 
diff --git a/packages/fiori/cypress/specs/FCL.cy.ts b/packages/fiori/cypress/specs/FCL.cy.ts
index 87239036a149..4345096b5107 100644
--- a/packages/fiori/cypress/specs/FCL.cy.ts
+++ b/packages/fiori/cypress/specs/FCL.cy.ts
@@ -1,4 +1,3 @@
-import { html } from "lit";
 import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import "../../src/FlexibleColumnLayout.js";
 
@@ -7,7 +6,7 @@ describe("Columns resize", () => {
 		cy.wrap({ setAnimationMode })
 			.invoke("setAnimationMode", "none");
 
-		cy.mount(html`
+		cy.mount(`
 <ui5-flexible-column-layout id="fcl" style="height: 300px;" layout="TwoColumnsMidExpanded">
 	<div class="column" id="startColumn" slot="startColumn">some content</div>
 	<div class="column" id="midColumn" slot="midColumn">some content</div>
diff --git a/packages/fiori/cypress/specs/Page.cy.ts b/packages/fiori/cypress/specs/Page.cy.ts
index 8f4fd9b2a6a8..abc62ce8e0a6 100644
--- a/packages/fiori/cypress/specs/Page.cy.ts
+++ b/packages/fiori/cypress/specs/Page.cy.ts
@@ -1,11 +1,10 @@
-import { html } from "lit";
 import "../../src/Page.js";
 import "@ui5/webcomponents/dist/Bar.js";
 import "@ui5/webcomponents/dist/Button.js";
 
 describe("Page general interaction", () => {
 	beforeEach(() => {
-		cy.mount(html`
+		cy.mount(`
 <ui5-page style="height: 300px;" show-footer>
 	<ui5-bar slot="header">
 		<ui5-button slot="startContent">Header button</ui5-button>
diff --git a/packages/fiori/package.json b/packages/fiori/package.json
index b3debc0ca680..6540409309be 100644
--- a/packages/fiori/package.json
+++ b/packages/fiori/package.json
@@ -62,7 +62,6 @@
   "devDependencies": {
     "@ui5/webcomponents-tools": "2.4.0-rc.1",
     "@ui5/webcomponents-testing": "0.0.0",
-    "chromedriver": "^128.0.3",
-    "lit": "^2.0.0"
+    "chromedriver": "^128.0.3"
   }
 }
diff --git a/packages/main/cypress/specs/Button.cy.ts b/packages/main/cypress/specs/Button.cy.ts
index 2a6673582d60..e99953321f85 100644
--- a/packages/main/cypress/specs/Button.cy.ts
+++ b/packages/main/cypress/specs/Button.cy.ts
@@ -1,4 +1,3 @@
-import { html } from "lit";
 import "../../src/Button.js";
 import type Button from "../../src/Button.js";
 import "@ui5/webcomponents-icons/dist/download.js";
@@ -6,7 +5,7 @@ import "@ui5/webcomponents-icons/dist/employee.js";
 
 describe("Button general interaction", () => {
 	it("tests button's text rendering", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
 
 		cy.get<Button>("[ui5-button]")
 			.shadow()
@@ -15,7 +14,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button's icon rendering", () => {
-		cy.mount(html`<ui5-button>Action Bar Button</ui5-button>`);
+		cy.mount(`<ui5-button>Action Bar Button</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -42,7 +41,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button's endIon rendering", () => {
-		cy.mount(html`<ui5-button>Action Bar Button</ui5-button>`);
+		cy.mount(`<ui5-button>Action Bar Button</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -69,7 +68,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests click event", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -91,7 +90,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests keyboard shortcuts used to prevent a click event", () => {
-		cy.mount(html`<ui5-button>Text</ui5-button>`);
+		cy.mount(`<ui5-button>Text</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -112,7 +111,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("aria-expanded is properly applied on the button tag", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -143,7 +142,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("not setting accessible-role on the host keeps the correct role on the button tag", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -155,21 +154,21 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button's icon only rendering", () => {
-		cy.mount(html`<ui5-button icon="home"><!----><!----></ui5-button>`);
+		cy.mount(`<ui5-button icon="home"><!----><!----></ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.should("have.attr", "icon-only");
 	});
 
 	it("tests button's icon only rendering", () => {
-		cy.mount(html`<ui5-button icon="text"> </ui5-button>`);
+		cy.mount(`<ui5-button icon="text"> </ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.should("have.attr", "icon-only");
 	});
 
 	it("tests button's slot rendering", () => {
-		cy.mount(html`
+		cy.mount(`
 	<ui5-button>
 		<ui5-avatar id="btnImage" size="XS">
 			<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
@@ -180,7 +179,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests clicking on disabled button", () => {
-		cy.mount(html`<ui5-button disabled>Inactive</ui5-button>`);
+		cy.mount(`<ui5-button disabled>Inactive</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -212,7 +211,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests clicking on disabled button with Icon", () => {
-		cy.mount(html`<ui5-button icon="employee" disabled></ui5-button>`);
+		cy.mount(`<ui5-button icon="employee" disabled></ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -242,7 +241,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button with text icon role", () => {
-		cy.mount(html`<ui5-button design="Attention" icon="message-warning">Warning</ui5-button>`);
+		cy.mount(`<ui5-button design="Attention" icon="message-warning">Warning</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -256,7 +255,7 @@ describe("Button general interaction", () => {
 	it("aria-describedby properly applied on the button tag", () => {
 		const hiddenTextTypeId = "ui5-button-hiddenText-type";
 
-		cy.mount(html`<ui5-button design="Attention">Content</ui5-button>`);
+		cy.mount(`<ui5-button design="Attention">Content</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -273,7 +272,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("setting accessible-name-ref on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button icon="download" accessible-name="Help me" accessible-name-ref="1download-text"></ui5-button>
+		cy.mount(`<ui5-button icon="download" accessible-name="Help me" accessible-name-ref="1download-text"></ui5-button>
 		<ui5-label id="1download-text">Download Application</ui5-label>`);
 
 		cy.get("[ui5-button]")
@@ -286,7 +285,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("aria-haspopup and aria-controls are properly applied on the button tag", () => {
-		cy.mount(html`<ui5-button>Show Registration Dialog</ui5-button>`);
+		cy.mount(`<ui5-button>Show Registration Dialog</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -311,7 +310,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("setting tooltip on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
+		cy.mount(`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -323,7 +322,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tooltip from inner icon is propagated", () => {
-		cy.mount(html`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
+		cy.mount(`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -335,7 +334,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("setting accessible-role on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button accessible-role="Link"> Navigation Button </ui5-button>`);
+		cy.mount(`<ui5-button accessible-role="Link"> Navigation Button </ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.shadow()
diff --git a/packages/main/cypress/specs/Eventing.cy.ts b/packages/main/cypress/specs/Eventing.cy.ts
index 2f4f1886e4ba..38a18e8b39db 100644
--- a/packages/main/cypress/specs/Eventing.cy.ts
+++ b/packages/main/cypress/specs/Eventing.cy.ts
@@ -1,9 +1,8 @@
-// import { html } from "lit";
 import "../../src/Button.js";
 
 describe("Eventing", () => {
 	it("Default prevented", () => {
-		// 		cy.mount(html`<form method="get">
+		// 		cy.mount(`<form method="get">
 		// 	<ui5-button submits>Submit</ui5-button>
 		// </form>`);
 
@@ -25,7 +24,7 @@ describe("Eventing", () => {
 	});
 
 	// 	it("Default not prevented", () => {
-	// 		cy.mount(html`<form>
+	// 		cy.mount(`<form>
 	// 	<ui5-button submits>Submit</ui5-button>
 	// </form>`);
 
diff --git a/packages/main/cypress/specs/F6.cy.ts b/packages/main/cypress/specs/F6.cy.ts
index 31ae4d7b5e8d..52fc744f63f8 100644
--- a/packages/main/cypress/specs/F6.cy.ts
+++ b/packages/main/cypress/specs/F6.cy.ts
@@ -1,11 +1,10 @@
-import { html } from "lit";
 import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
 import "../../src/Button.js";
 
 describe("F6 navigation", () => {
 	describe("F6 Forward navigation", () => {
 		it("tests navigation", () => {
-			cy.mount(html`<div>
+			cy.mount(`<div>
 				<div class="section">
 					<button id="before">Before element</button>
 				</div>
@@ -60,7 +59,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with empty group", () => {
-			cy.mount(html`<div>
+			cy.mount(`<div>
 				<div class="section">
 					<button id="before">Before element</button>
 				</div>
@@ -108,7 +107,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with nested groups", () => {
-			cy.mount(html`<div class="section">
+			cy.mount(`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -158,7 +157,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with nesting inside empty fastnav-group parent", () => {
-			cy.mount(html`<div class="section">
+			cy.mount(`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -215,7 +214,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with group as a focusable element", () => {
-			cy.mount(html`<div class="section">
+			cy.mount(`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -268,7 +267,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation without a focusable element", () => {
-			cy.mount(html`<div class="section">
+			cy.mount(`<div class="section">
 				<ui5-button id="first">Before element</ui5-button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -304,7 +303,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with a single group", () => {
-			cy.mount(html`<div class="section">
+			cy.mount(`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -332,7 +331,7 @@ describe("F6 navigation", () => {
 
 	describe("F6 Backward navigation", () => {
 		it("tests navigation", () => {
-			cy.mount(html`<div>
+			cy.mount(`<div>
 				<div class="section">
 					<button id="before">Before element</button>
 				</div>
@@ -387,7 +386,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with empty group", () => {
-			cy.mount(html`<div>
+			cy.mount(`<div>
 				<div class="section">
 					<button id="before">Before element</button>
 				</div>
@@ -435,7 +434,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with nested groups", () => {
-			cy.mount(html`<div class="section">
+			cy.mount(`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -485,7 +484,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with nesting inside empty fastnav-group parent", () => {
-			cy.mount(html`<div class="section">
+			cy.mount(`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -542,7 +541,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with group as a focusable element", () => {
-			cy.mount(html`<div class="section">
+			cy.mount(`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -595,7 +594,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation without a focusable element", () => {
-			cy.mount(html`<div class="section">
+			cy.mount(`<div class="section">
 				<ui5-button id="first">Before element</ui5-button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -631,7 +630,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with a single group", () => {
-			cy.mount(html`<div class="section">
+			cy.mount(`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
diff --git a/packages/main/cypress/specs/Form.cy.ts b/packages/main/cypress/specs/Form.cy.ts
index 2519abcf643d..6a93300a9448 100644
--- a/packages/main/cypress/specs/Form.cy.ts
+++ b/packages/main/cypress/specs/Form.cy.ts
@@ -1,11 +1,10 @@
-import { html } from "lit";
 import "../../src/Form.js";
 import "../../src/FormItem.js";
 import "../../src/FormGroup.js";
 
 describe("General API", () => {
 	it("tests calculated state of Form with default layout and label-span", () => {
-		cy.mount(html`<ui5-form class="addressForm" header-text="Default form">
+		cy.mount(`<ui5-form class="addressForm" header-text="Default form">
 			<ui5-form-group header-text="Address">
 				<ui5-form-item>
 					<span slot="labelContent">Name:</span>
@@ -57,7 +56,7 @@ describe("General API", () => {
 	});
 
 	it("tests calculated state of Form with layout='S1 M2 L3 XL6' and label-span='S12 M4 L4 XL4'", () => {
-		cy.mount(html`<ui5-form class="addressForm" header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
+		cy.mount(`<ui5-form class="addressForm" header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
 	<ui5-form-group header-text="Address">
 		<ui5-form-item>
 			<span slot="labelContent">Name:</span>
@@ -109,7 +108,7 @@ describe("General API", () => {
 	});
 
 	it("tests calculated state of Form with layout='S1 M2 L2 XL3' label-span='S12 M12 L12 XL12'", () => {
-		cy.mount(html`<ui5-form header-text="Labels on top" layout="S1 M2 L2 XL3" label-span="S12 M12 L12 XL12">
+		cy.mount(`<ui5-form header-text="Labels on top" layout="S1 M2 L2 XL3" label-span="S12 M12 L12 XL12">
 	<ui5-form-item>
 		<span slot="labelContent">Name:</span>
 		<input />
@@ -172,7 +171,7 @@ describe("General API", () => {
 	});
 
 	it("tests calculated state of two FormGroups in layout='S1 M2 L3 XL4'", () => {
-		cy.mount(html`<ui5-form header-text="WebC :: Supplier 2gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
+		cy.mount(`<ui5-form header-text="WebC :: Supplier 2gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
 	<ui5-form-group id="testFormGroup4" header-text="Address">
 		<ui5-form-item>
 			<span slot="labelContent">Name:</span>
@@ -224,7 +223,7 @@ describe("General API", () => {
 	});
 
 	it("tests calculated state of three FormGroups in layout='S1 M2 L3 XL6'", () => {
-		cy.mount(html`<ui5-form header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
+		cy.mount(`<ui5-form header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
 	<ui5-form-group id="testFormGroup1" header-text="Address">
 		<ui5-form-item>
 			<span slot="labelContent">Name:</span>
@@ -309,7 +308,7 @@ describe("General API", () => {
 	});
 
 	it("tests calculated state of three FormGroups in layout='S1 M2 L3 XL4'", () => {
-		cy.mount(html`<ui5-form header-text="WebC :: Supplier 3gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
+		cy.mount(`<ui5-form header-text="WebC :: Supplier 3gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
 	<ui5-form-group id="testFormGroup6" header-text="Address">
 		<ui5-form-item>
 			<span slot="labelContent">Name:</span>
diff --git a/packages/main/cypress/specs/FormSupport.cy.ts b/packages/main/cypress/specs/FormSupport.cy.ts
index cbd3c4664bbf..a6707832c812 100644
--- a/packages/main/cypress/specs/FormSupport.cy.ts
+++ b/packages/main/cypress/specs/FormSupport.cy.ts
@@ -1,4 +1,3 @@
-import { html } from "lit";
 import "../../src/Button.js";
 import "../../src/CheckBox.js";
 import "../../src/ColorPicker.js";
@@ -32,7 +31,7 @@ const getFormData = ($form: HTMLFormElement) => {
 
 describe("Form support", () => {
 	it("ui5-checkbox in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-checkbox id="cb1" text="ui5-checkbox without name"></ui5-checkbox>
 	<ui5-checkbox id="cb2" text="ui5-checkbox without name and value" checked></ui5-checkbox>
 	<ui5-checkbox id="cb3" name="checkbox3" text="ui5-checkbox with name and without value"></ui5-checkbox>
@@ -70,7 +69,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-color-picker in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-color-picker id="color_picker1"></ui5-color-picker>
 	<ui5-color-picker id="color_picker2" value="blue"></ui5-color-picker>
 	<ui5-color-picker id="color_picker3" name="color_picker3"></ui5-color-picker>
@@ -98,7 +97,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-combobox in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-combobox id="combobox1"></ui5-combobox>
 	<ui5-combobox id="combobox2" value="ok"></ui5-combobox>
 	<ui5-combobox id="combobox3" name="combobox3"></ui5-combobox>
@@ -139,7 +138,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-date-picker in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-date-picker id="date_picker1"></ui5-date-picker>
 	<ui5-date-picker id="date_picker2" value="ok"></ui5-date-picker>
 	<ui5-date-picker id="date_picker3" name="date_picker3"></ui5-date-picker>
@@ -180,7 +179,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-daterange-picker in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-daterange-picker id="daterange_picker1"></ui5-daterange-picker>
 	<ui5-daterange-picker id="daterange_picker2" value="ok"></ui5-daterange-picker>
 	<ui5-daterange-picker id="daterange_picker3" name="daterange_picker3"></ui5-daterange-picker>
@@ -221,7 +220,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-datetime-picker in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-datetime-picker id="datetime_picker1"></ui5-datetime-picker>
 	<ui5-datetime-picker id="datetime_picker2" value="ok"></ui5-datetime-picker>
 	<ui5-datetime-picker id="datetime_picker3" name="datetime_picker3"></ui5-datetime-picker>
@@ -262,7 +261,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-input in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-input id="input1"></ui5-input>
 	<ui5-input id="input2" value="ok"></ui5-input>
 	<ui5-input id="input3" name="input3"></ui5-input>
@@ -303,7 +302,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-multi-combobox in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-multi-combobox id="multi_combobox1"></ui5-multi-combobox>
 	<ui5-multi-combobox id="multi_combobox2" value="ok"></ui5-multi-combobox>
 	<ui5-multi-combobox id="multi_combobox3">
@@ -367,7 +366,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-multi-input in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-multi-input id="multi_input1"></ui5-multi-input>
 	<ui5-multi-input id="multi_input2" value="ok"></ui5-multi-input>
 	<ui5-multi-input id="multi_input3">
@@ -428,7 +427,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-radio-button in form 1", () => {
-		cy.mount(html`<form  method="get">
+		cy.mount(`<form  method="get">
 	<ui5-radio-button id="rb_1" required name="rb1"></ui5-radio-button>
 	<button type="submit">Submits forms</button>
 </form>`);
@@ -465,7 +464,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-radio-button in form 2", () => {
-		cy.mount(html`<form  method="get">
+		cy.mount(`<form  method="get">
 	<ui5-title>ui5-radio-button</ui5-title>
 	<ui5-radio-button required id="rb_2" required checked></ui5-radio-button>
 	<button type="submit">Submits forms</button>
@@ -491,7 +490,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-radio-button in form 3", () => {
-		cy.mount(html`<form  method="get">
+		cy.mount(`<form  method="get">
 	<ui5-radio-button required name="rb3" id="rb_3" value="A" text="A"></ui5-radio-button>
 	<ui5-radio-button required name="rb3" id="rb_4" value="B" text="B"></ui5-radio-button>
 	<ui5-radio-button required value="C" text="C" checked></ui5-radio-button>
@@ -530,7 +529,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-range-slider in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-range-slider id="range_slider1"></ui5-range-slider>
 	<ui5-range-slider id="range_slider2" start-value="25" end-value="75"></ui5-range-slider>
 	<ui5-range-slider id="range_slider3" name="range_slider3"></ui5-range-slider>
@@ -558,7 +557,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-select in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-select id="select1">
 		<ui5-option selected>Option 1</ui5-option>
 		<ui5-option value="option2">Option 2</ui5-option>
@@ -647,7 +646,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-slider in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-slider id="slider1"></ui5-slider>
 	<ui5-slider id="slider2" value="100"></ui5-slider>
 	<ui5-slider id="slider3" name="slider3"></ui5-slider>
@@ -675,7 +674,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-step-input in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-step-input id="step_input1"></ui5-step-input>
 	<ui5-step-input id="step_input2" value="4"></ui5-step-input>
 	<ui5-step-input id="step_input3" name="step_input3"></ui5-step-input>
@@ -703,7 +702,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-switch in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-switch id="switch1" text="ui5-switch without name"></ui5-switch>
 	<ui5-switch id="switch2" text="ui5-switch without name and value" checked></ui5-switch>
 	<ui5-switch id="switch3" name="switch3" text="ui5-switch with name and without value"></ui5-switch>
@@ -741,7 +740,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-textarea in form", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-textarea id="textarea1"></ui5-textarea>
 	<ui5-textarea id="textarea2" value="ok"></ui5-textarea>
 	<ui5-textarea id="textarea3" name="textarea3"></ui5-textarea>
@@ -783,7 +782,7 @@ describe("Form support", () => {
 
 	it("ui5-time-picker in form", () => {
 		/* eslint-disable no-irregular-whitespace */
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-time-picker id="time_picker1"></ui5-time-picker>
 	<ui5-time-picker id="time_picker2" value="1:10:10 PM"></ui5-time-picker>
 	<ui5-time-picker id="time_picker3" name="time_picker3" required></ui5-time-picker>
@@ -824,7 +823,7 @@ describe("Form support", () => {
 	});
 
 	it("Normal button does not submit forms", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-button id="b1">Does not submit forms</ui5-button>
 </form>`);
 
@@ -842,7 +841,7 @@ describe("Form support", () => {
 	});
 
 	it("Submit button does submit forms", () => {
-		cy.mount(html`<form method="get">
+		cy.mount(`<form method="get">
 	<ui5-input name="input" value="ok"></ui5-input>
 	<ui5-input name="input_disabled" disabled value="ok"></ui5-input>
 	<ui5-select name="sel">
diff --git a/packages/main/cypress/specs/List.cy.ts b/packages/main/cypress/specs/List.cy.ts
index 343e721ee48b..ddd4d41ec908 100644
--- a/packages/main/cypress/specs/List.cy.ts
+++ b/packages/main/cypress/specs/List.cy.ts
@@ -1,10 +1,9 @@
-import { html } from "lit";
 import "../../src/List.js";
 import type List from "../../src/List.js";
 
 describe("List Tests", () => {
 	it("tests 'loadMore' event fired upon infinite scroll", () => {
-		cy.mount(html`
+		cy.mount(`
 		<ui5-list style="height: 300px;"  growing="Scroll">
 			<ui5-li>Laptop Lenovo</ui5-li>
 			<ui5-li>IPhone 3</ui5-li>
diff --git a/packages/main/cypress/specs/LitKeyFunction.cy.ts b/packages/main/cypress/specs/LitKeyFunction.cy.ts
index 367b47cf0609..34cf2cae7315 100644
--- a/packages/main/cypress/specs/LitKeyFunction.cy.ts
+++ b/packages/main/cypress/specs/LitKeyFunction.cy.ts
@@ -1,10 +1,9 @@
-import { html } from "lit";
 import "../../src/MultiComboBox.js";
 import "../../src/MultiComboBoxItem.js";
 
 describe("Lit HTML key function for #each", () => {
 	it("LIT HTML does not mess up keys when looping over lists", () => {
-		cy.mount(html`<ui5-multi-combobox id="mcb">
+		cy.mount(`<ui5-multi-combobox id="mcb">
 			<ui5-mcb-item text="<empty>"></ui5-mcb-item>
 			<ui5-mcb-item text="Algeria"></ui5-mcb-item>
 			<ui5-mcb-item text="China"></ui5-mcb-item>
diff --git a/packages/main/cypress/specs/Menu.cy.ts b/packages/main/cypress/specs/Menu.cy.ts
index 0c76d2bc781e..1342890d212d 100644
--- a/packages/main/cypress/specs/Menu.cy.ts
+++ b/packages/main/cypress/specs/Menu.cy.ts
@@ -1,4 +1,3 @@
-import { html } from "lit";
 import "../../src/Button.js";
 import "../../src/Menu.js";
 import "../../src/MenuItem.js";
@@ -6,7 +5,7 @@ import type MenuItem from "../../src/MenuItem.js";
 
 describe("Menu interaction", () => {
 	it("Menu opens after button click", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu id="menu" opener="btnOpen">
 			<ui5-menu-item text="New File"></ui5-menu-item>
 		</ui5-menu>`);
@@ -16,7 +15,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Menu opens after button click", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu>
 			<ui5-menu-item text="New File"></ui5-menu-item>
 		</ui5-menu>`);
@@ -26,7 +25,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Menu icons appearance", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu open opener="btnOpen">
 			<ui5-menu-item text="Item 1.0" icon="open-folder">
 				<ui5-menu-item text="1.1"></ui5-menu-item>
@@ -54,7 +53,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Restore focus to previous element after close", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu open opener="btnOpen">
 			<ui5-menu-item text="Item 1.0" icon="open-folder">
 				<ui5-menu-item text="1.1"></ui5-menu-item>
@@ -75,7 +74,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Enable navigaion over disabled items", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu id="menu" opener="btnOpen" open>
 			<ui5-menu-item text="Item 1"></ui5-menu-item>
 			<ui5-menu-item text="Item 2" disabled></ui5-menu-item>
@@ -99,7 +98,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Add endContent to a menu item", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu id="menu" opener="btnOpen" open>
 			<ui5-menu-item text="Item 1">
 				<ui5-button slot="endContent">endContent</ui5-button>
@@ -128,7 +127,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Menu and Menu items busy indication - with items", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu id="menu" opener="btnOpen" open>
 			<ui5-menu-item text="Item 1" loading-delay="500" loading>
 				<ui5-menu-item text="Item 1.1"></ui5-menu-item>
@@ -146,7 +145,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Menu and Menu items busy indication - without items", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu id="menu" opener="btnOpen" open>
 			<ui5-menu-item text="Item 1" loading-delay="500" loading></ui5-menu-item>
 		</ui5-menu>`);
@@ -159,7 +158,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Restore focus on close", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu id="menu">
 			<ui5-menu-item text="Item 1"></ui5-menu-item>
 		</ui5-menu>`);
@@ -189,7 +188,7 @@ describe("Menu interaction", () => {
 
 	describe("Event firing", () => {
 		it("Event firing - 'ui5-item-click' after 'click' on menu item", () => {
-			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu open opener="btnOpen">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
@@ -210,7 +209,7 @@ describe("Menu interaction", () => {
 		});
 
 		it("Event firing - 'ui5-item-click' after 'Space' on menu item", () => {
-			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu open opener="btnOpen">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
@@ -231,7 +230,7 @@ describe("Menu interaction", () => {
 		});
 
 		it("Event firing - 'ui5-item-click' after 'Enter' on menu item", () => {
-			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu open opener="btnOpen">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
@@ -252,7 +251,7 @@ describe("Menu interaction", () => {
 		});
 
 		it("Prevent menu closing on item press", () => {
-			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu open opener="btnOpen" @ui5-item-click="${(e: CustomEvent) => e.preventDefault()}">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
@@ -280,7 +279,7 @@ describe("Menu interaction", () => {
 		});
 
 		it("Events firing on open/close of the menu", () => {
-			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu id="menu" opener="btnOpen">
 				<ui5-menu-item text="New File"></ui5-menu-item>
 			</ui5-menu>`);
@@ -334,7 +333,7 @@ describe("Menu interaction", () => {
 
 	describe("Accessibility", () => {
 		it("Menu and Menu items accessibility attributes", () => {
-			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu open opener="btnOpen">
 				<ui5-menu-item text="Item 1.0" accessible-name="test accessible name">
 					<ui5-menu-item text="Item 1.1"></ui5-menu-item>
@@ -396,7 +395,7 @@ describe("Menu interaction", () => {
 		});
 
 		it("Menu popover has an accessible name", () => {
-			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu open opener="btnOpen">
 				<ui5-menu-item text="Item 1.0" icon="open-folder">
 					<ui5-menu-item text="1.1"></ui5-menu-item>
diff --git a/packages/main/cypress/specs/RTL.cy.ts b/packages/main/cypress/specs/RTL.cy.ts
index 95cf8a30d28e..53eb5ef60a24 100644
--- a/packages/main/cypress/specs/RTL.cy.ts
+++ b/packages/main/cypress/specs/RTL.cy.ts
@@ -1,9 +1,8 @@
-import { html } from "lit";
 import "../../src/CheckBox.js";
 
 describe("RTL", () => {
 	it("tests effectiveDir", () => {
-		cy.mount(html`<section dir="rtl">
+		cy.mount(`<section dir="rtl">
 	<ui5-checkbox id="cbRTL" text="Click me"></ui5-checkbox>
 	<ui5-checkbox id="cbLTR" text="This checkbox however defines dir=ltr" dir="ltr"></ui5-checkbox>
 </section>`);
diff --git a/packages/main/cypress/specs/ResponsivePopover.mobile.cy.ts b/packages/main/cypress/specs/ResponsivePopover.mobile.cy.ts
index 6531663b9df1..9592d9edd399 100644
--- a/packages/main/cypress/specs/ResponsivePopover.mobile.cy.ts
+++ b/packages/main/cypress/specs/ResponsivePopover.mobile.cy.ts
@@ -1,4 +1,3 @@
-import { html } from "lit";
 import "../../src/ResponsivePopover.js";
 import "../../src/Button.js";
 import "../../src/Input.js";
@@ -9,7 +8,7 @@ describe("ResponsivePopover mobile general interaction", () => {
 	});
 
 	it("tests opening a popover from a responsive popover", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open me</ui5-button>
 		<ui5-responsive-popover open opener="btnOpen"></ui5-responsive-popover>`);
 
 		cy.get("[ui5-responsive-popover]")
@@ -25,7 +24,7 @@ describe("Accessibility", () => {
 	});
 
 	it("tests accessible-role - Default", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open me</ui5-button>
 		<ui5-responsive-popover open opener="btnOpen"></ui5-responsive-popover>`);
 
 		cy.get("[ui5-responsive-popover]")
@@ -44,7 +43,7 @@ describe("Accessibility", () => {
 	});
 
 	it("tests accessible-role - AlertDialog", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open me</ui5-button>
 		<ui5-responsive-popover open opener="btnOpen" accessible-role="AlertDialog"></ui5-responsive-popover>`);
 
 		cy.get("[ui5-responsive-popover]")
@@ -63,7 +62,7 @@ describe("Accessibility", () => {
 	});
 
 	it("tests accessible-role - None", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open me</ui5-button>
 		<ui5-responsive-popover open opener="btnOpen" accessible-role="None"></ui5-responsive-popover>`);
 
 		cy.get("[ui5-responsive-popover]")
@@ -82,7 +81,7 @@ describe("Accessibility", () => {
 	});
 
 	it("tests initial focus", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
+		cy.mount(`<ui5-button id="btnOpen">Open me</ui5-button>
 		<ui5-responsive-popover open opener="btnOpen" initial-focus="emailInput">
 			<ui5-input id="emailInput"></ui5-input>
 		</ui5-responsive-popover>`);
diff --git a/packages/main/cypress/specs/Select.cy.ts b/packages/main/cypress/specs/Select.cy.ts
index e1d6214ff55b..ff65520a9bab 100644
--- a/packages/main/cypress/specs/Select.cy.ts
+++ b/packages/main/cypress/specs/Select.cy.ts
@@ -1,4 +1,3 @@
-import { html } from "lit";
 import "../../src/Select.js";
 import "../../src/Option.js";
 import "../../src/OptionCustom.js";
@@ -7,7 +6,7 @@ describe("Select - Accessibility", () => {
 	it("tests options tooltip is set displayed", () => {
 		const EXPECTED_TOOLTIP = "Tooltip";
 		const EXPECTED_ROLE = "option";
-		cy.mount(html`
+		cy.mount(`
 			<ui5-select>
 				<ui5-option value="1" tooltip="${EXPECTED_TOOLTIP}">Option 1</ui5-option>
 				<ui5-option-custom value="2" tooltip="${EXPECTED_TOOLTIP}">Option 2</ui5-option-custom>
diff --git a/packages/main/cypress/specs/TableLoading.cy.ts b/packages/main/cypress/specs/TableLoading.cy.ts
index 2feeebc6c0d1..f0ac0e444bd0 100644
--- a/packages/main/cypress/specs/TableLoading.cy.ts
+++ b/packages/main/cypress/specs/TableLoading.cy.ts
@@ -1,4 +1,3 @@
-import { html } from "lit";
 import "../../src/Table.js";
 import "../../src/TableHeaderRow.js";
 import "../../src/TableCell.js";
@@ -6,7 +5,7 @@ import "../../src/TableRow.js";
 
 describe("Table - loading", () => {
 	it("tests busy indicator is displayed", () => {
-		cy.mount(html`
+		cy.mount(`
 		<input id="before">
 		<ui5-table loading loading-delay="0">
 		<ui5-table-header-row slot="headerRow">
diff --git a/packages/main/cypress/specs/TextArea.cy.ts b/packages/main/cypress/specs/TextArea.cy.ts
index 0956cdf45262..55c6acf28798 100644
--- a/packages/main/cypress/specs/TextArea.cy.ts
+++ b/packages/main/cypress/specs/TextArea.cy.ts
@@ -1,4 +1,3 @@
-import { html } from "lit";
 import "../../src/TextArea.js";
 import "../../src/Label.js";
 
@@ -7,7 +6,7 @@ describe("TextArea general interaction", () => {
 		it("Should change the placeholder of the inner textarea", () => {
 			const attributeValue = "test";
 
-			cy.mount(html`<ui5-textarea placeholder=${attributeValue}></ui5-textarea>`);
+			cy.mount(`<ui5-textarea placeholder=${attributeValue}></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -16,7 +15,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("Disabled attribute is propagated properly", () => {
-			cy.mount(html`<ui5-textarea disabled></ui5-textarea>`);
+			cy.mount(`<ui5-textarea disabled></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -25,7 +24,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("Redonly attribute is propagated properly", () => {
-			cy.mount(html`<ui5-textarea readonly></ui5-textarea>`);
+			cy.mount(`<ui5-textarea readonly></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -34,14 +33,14 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("Required attribute is propagated properly", () => {
-			cy.mount(html`<ui5-textarea required></ui5-textarea>`);
+			cy.mount(`<ui5-textarea required></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
 				.find("textarea")
 				.should("have.attr", "aria-required", "true");
 
-			cy.mount(html`<ui5-textarea></ui5-textarea>`);
+			cy.mount(`<ui5-textarea></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -52,7 +51,7 @@ describe("TextArea general interaction", () => {
 		it("Value attribute is propagated properly", () => {
 			const attributeValue = "test";
 
-			cy.mount(html`<ui5-textarea value=${attributeValue}></ui5-textarea>`);
+			cy.mount(`<ui5-textarea value=${attributeValue}></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -63,7 +62,7 @@ describe("TextArea general interaction", () => {
 		it("Tests aria-label", () => {
 			const attributeValue = "test";
 
-			cy.mount(html`<ui5-textarea accessible-name=${attributeValue}></ui5-textarea>`);
+			cy.mount(`<ui5-textarea accessible-name=${attributeValue}></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -74,7 +73,7 @@ describe("TextArea general interaction", () => {
 		it("Tests aria-labelledby", () => {
 			const attributeValue = "test";
 
-			cy.mount(html`<span id="ref">${attributeValue}</span>
+			cy.mount(`<span id="ref">${attributeValue}</span>
 			<ui5-textarea accessible-name-ref="ref"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
@@ -84,14 +83,14 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("Checks if aria-invalid is set correctly", () => {
-			cy.mount(html`<ui5-textarea value-state="Negative"></ui5-textarea>`);
+			cy.mount(`<ui5-textarea value-state="Negative"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
 				.find("textarea")
 				.should("have.attr", "aria-invalid", "true");
 
-			cy.mount(html`<ui5-textarea value-state="Critical"></ui5-textarea>`);
+			cy.mount(`<ui5-textarea value-state="Critical"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -102,7 +101,7 @@ describe("TextArea general interaction", () => {
 		it("Tests aria-label is set to match the label text when label is for that text area", () => {
 			const attributeValue = "test";
 
-			cy.mount(html`<ui5-label for="ref">${attributeValue}</ui5-label>
+			cy.mount(`<ui5-label for="ref">${attributeValue}</ui5-label>
 			<ui5-textarea id="ref"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
@@ -114,7 +113,7 @@ describe("TextArea general interaction", () => {
 		it("Tests aria-label is set directly from the property accessible-name of the text-area", () => {
 			const attributeValue = "test";
 
-			cy.mount(html`<ui5-label for="ref">some text</ui5-label>
+			cy.mount(`<ui5-label for="ref">some text</ui5-label>
 			<ui5-textarea id="ref" accessible-name="${attributeValue}"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
@@ -126,7 +125,7 @@ describe("TextArea general interaction", () => {
 
 	describe("disabled and readonly textarea", () => {
 		it("can not be edited when disabled", () => {
-			cy.mount(html`<ui5-textarea disabled></ui5-textarea>`);
+			cy.mount(`<ui5-textarea disabled></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -146,7 +145,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("can not be edited when readonly", () => {
-			cy.mount(html`<ui5-textarea readonly></ui5-textarea>`);
+			cy.mount(`<ui5-textarea readonly></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -171,7 +170,7 @@ describe("TextArea general interaction", () => {
 
 	describe("when enabled", () => {
 		it("shows value state message", () => {
-			cy.mount(html`<ui5-textarea value-state="Negative"></ui5-textarea>`);
+			cy.mount(`<ui5-textarea value-state="Negative"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -190,7 +189,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("does not show value state msg when valueState='None'", () => {
-			cy.mount(html`<ui5-textarea value-state="None"></ui5-textarea>`);
+			cy.mount(`<ui5-textarea value-state="None"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -208,7 +207,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("Should not open value state message when textarea is in readonly state", () => {
-			cy.mount(html`<ui5-textarea readonly value-state="Negative"></ui5-textarea>`);
+			cy.mount(`<ui5-textarea readonly value-state="Negative"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -226,7 +225,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("fires change event", () => {
-			cy.mount(html`<ui5-textarea></ui5-textarea>`);
+			cy.mount(`<ui5-textarea></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -255,7 +254,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("fires input event", () => {
-			cy.mount(html`<ui5-textarea></ui5-textarea>`);
+			cy.mount(`<ui5-textarea></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -283,7 +282,7 @@ describe("TextArea general interaction", () => {
 
 	describe("when growing", () => {
 		it("Should have 8 rows and grow", () => {
-			cy.mount(html`<ui5-textarea growing rows="8"></ui5-textarea>`);
+			cy.mount(`<ui5-textarea growing rows="8"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -336,7 +335,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("Should have 8 rows and grow", () => {
-			cy.mount(html`<ui5-textarea growing growing-max-rows="4"></ui5-textarea>`);
+			cy.mount(`<ui5-textarea growing growing-max-rows="4"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -390,7 +389,7 @@ describe("TextArea general interaction", () => {
 
 	describe("When having max length set", () => {
 		it("prevents input when max is reached", () => {
-			cy.mount(html`<ui5-textarea maxlength="10"></ui5-textarea>`);
+			cy.mount(`<ui5-textarea maxlength="10"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -412,7 +411,7 @@ describe("TextArea general interaction", () => {
 
 		describe("When having max length set", () => {
 			it("Shows counter", () => {
-				cy.mount(html`<ui5-textarea maxlength="10" show-exceeded-text></ui5-textarea>`);
+				cy.mount(`<ui5-textarea maxlength="10" show-exceeded-text></ui5-textarea>`);
 
 				cy.get("[ui5-textarea]")
 					.as("textarea");
@@ -443,7 +442,7 @@ describe("TextArea general interaction", () => {
 			});
 
 			it("Shows exceeded text when maxLength is 0", () => {
-				cy.mount(html`<ui5-textarea maxlength="0" show-exceeded-text></ui5-textarea>`);
+				cy.mount(`<ui5-textarea maxlength="0" show-exceeded-text></ui5-textarea>`);
 
 				cy.get("[ui5-textarea]")
 					.as("textarea");
@@ -471,7 +470,7 @@ describe("TextArea general interaction", () => {
 
 	describe("Value update", () => {
 		it("Should revert the DOM value, when escape is pressed", () => {
-			cy.mount(html`<ui5-textarea></ui5-textarea>`);
+			cy.mount(`<ui5-textarea></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -501,7 +500,7 @@ describe("TextArea general interaction", () => {
 
 		it("Value state type should be added to the screen readers default value states announcement", () => {
 			// Negative
-			cy.mount(html`<ui5-textarea value-state="Negative"></ui5-textarea>`);
+			cy.mount(`<ui5-textarea value-state="Negative"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -525,7 +524,7 @@ describe("TextArea general interaction", () => {
 				.should("have.text", "Value State Error Invalid entry");
 
 			// Critical
-			cy.mount(html`<ui5-textarea value-state="Critical"></ui5-textarea>`);
+			cy.mount(`<ui5-textarea value-state="Critical"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -549,7 +548,7 @@ describe("TextArea general interaction", () => {
 				.should("have.text", "Value State Warning Warning issued");
 
 			// Critical
-			cy.mount(html`<ui5-textarea value-state="Critical"></ui5-textarea>`);
+			cy.mount(`<ui5-textarea value-state="Critical"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -573,7 +572,7 @@ describe("TextArea general interaction", () => {
 				.should("have.text", "Value State Warning Warning issued");
 
 			// Information
-			cy.mount(html`<ui5-textarea value-state="Information"></ui5-textarea>`);
+			cy.mount(`<ui5-textarea value-state="Information"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -597,7 +596,7 @@ describe("TextArea general interaction", () => {
 				.should("have.text", "Value State Information Informative entry");
 
 			// Custom
-			cy.mount(html`<ui5-textarea value-state="Negative">
+			cy.mount(`<ui5-textarea value-state="Negative">
 				<div slot="valueStateMessage">Custom message</div>
 			</ui5-textarea>`);
 
@@ -626,7 +625,7 @@ describe("TextArea general interaction", () => {
 			const maxlength = 20;
 			const expectedSelectionRange = text.length - maxlength;
 
-			cy.mount(html`<ui5-textarea value="${text}" maxlength="${maxlength}" show-exceeded-text></ui5-textarea>`);
+			cy.mount(`<ui5-textarea value="${text}" maxlength="${maxlength}" show-exceeded-text></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -661,7 +660,7 @@ describe("TextArea general interaction", () => {
 
 	describe("selection events", () => {
 		it("fires select event", () => {
-			cy.mount(html`<ui5-textarea style="height: 320px; width: 400px" value="Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et. Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et."></ui5-textarea>`);
+			cy.mount(`<ui5-textarea style="height: 320px; width: 400px" value="Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et. Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et."></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea")
@@ -677,7 +676,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("fires select event", () => {
-			cy.mount(html`<ui5-textarea style="height: 320px; width: 400px" value="Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et. Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et."></ui5-textarea>`);
+			cy.mount(`<ui5-textarea style="height: 320px; width: 400px" value="Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et. Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et."></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea")
diff --git a/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts b/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts
index 2a8bb8c115ed..d8b152ab55f6 100644
--- a/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts
+++ b/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts
@@ -1,10 +1,9 @@
-import { html } from "lit";
 import "../../../src/Label.js";
 import "../../../src/Input.js";
 
 describe("AriaLabelHelper", () => {
 	it("Label-for tests", () => {
-		cy.mount(html`
+		cy.mount(`
 			<ui5-input id="myInput" placeholder="input placeholder" class="field"></ui5-input>
 			<ui5-label id="lblDesc1" for="myInput">Desc1</ui5-label>
 			<ui5-label id="lblDesc2" for="myInput">Desc2</ui5-label>
@@ -33,7 +32,7 @@ describe("AriaLabelHelper", () => {
 	});
 
 	it("Input accessibleNameRef Tests", () => {
-		cy.mount(html`
+		cy.mount(`
             <ui5-label id="lblEnterName1">FirstDesc</ui5-label>
             <ui5-label id="lblEnterName2">SecondDesc</ui5-label>
             <ui5-label id="lblEnterName3">ThirdDesc</ui5-label>
@@ -80,7 +79,7 @@ describe("AriaLabelHelper", () => {
 	});
 
 	it("Input accessibleName and accessibleNameRef Tests", () => {
-		cy.mount(html`
+		cy.mount(`
 			<ui5-label id="lblEnterDesc1" for="inputEnterDesc">Label for inputEnterDesc</ui5-label>
 			<ui5-label id="lblEnterDesc3">Label to be added/removed as accessible-name-ref</ui5-label>
 			<ui5-input id="inputEnterDesc" accessible-name="Some description added by accessibleName" placeholder="Enter description"></ui5-input>
@@ -157,7 +156,7 @@ describe("AriaLabelHelper", () => {
 	});
 
 	it("Three inputs with same label accessibleNameRef Tests", () => {
-		cy.mount(html`
+		cy.mount(`
 			<ui5-label id="lblTestDesc" for="testInput1">Label for testInput1 Desc</ui5-label>
 			<ui5-input id="testInput1" placeholder="Enter description1"></ui5-input>
 			<ui5-input id="testInput2" accessible-name-ref="lblTestDesc" accessible-name="Hello" placeholder="Enter description2"></ui5-input>
@@ -235,7 +234,7 @@ describe("AriaLabelHelper", () => {
 	});
 
 	it("Tests generic html elements with for attribute", () => {
-		cy.mount(html`
+		cy.mount(`
 			<label id="elId1" for="myInput2">Desc1</label>
 			<label id="elId2" for="myInput2">Desc2</label>
 			<ui5-input id="myInput2" placeholder="input placeholder"></ui5-input>
diff --git a/packages/main/cypress/specs/base/Events.cy.ts b/packages/main/cypress/specs/base/Events.cy.ts
index 667e386415d2..169463c072c8 100644
--- a/packages/main/cypress/specs/base/Events.cy.ts
+++ b/packages/main/cypress/specs/base/Events.cy.ts
@@ -1,4 +1,3 @@
-import { html } from "lit";
 import "../../../src/Dialog.js";
 import "../../../src/Select.js";
 import "../../../src/Option.js";
@@ -12,7 +11,7 @@ import "../../../src/Label.js";
 
 describe("Event bubbling", () => {
 	it("test bubbling events", () => {
-		cy.mount(html`
+		cy.mount(`
 			<div id="app">
 				<ui5-dialog id="myDialog" header-text="Dialog">
 					<ui5-input id="myInput" show-suggestions>
@@ -117,14 +116,14 @@ describe("Event bubbling", () => {
 	});
 
 	it("test non-bubbling events", () => {
-		cy.mount(html`
+		cy.mount(`
 			<div id="app">
 				<ui5-dialog id="myDialog" header-text="Dialog">
 					<ui5-select id="mySelect">
 						<ui5-option>Hello</ui5-option>
 						<ui5-option>World</ui5-option>
 						<ui5-option>Hello</ui5-option>
-					</ui5-select>					
+					</ui5-select>
 				</ui5-dialog>
 			</div>
 		`);
@@ -172,7 +171,7 @@ describe("Event bubbling", () => {
 	});
 
 	it("test cancelable events", () => {
-		cy.mount(html`
+		cy.mount(`
 			<div id="app">
 				<ui5-checkbox id="cb"></ui5-checkbox>
 				<ui5-checkbox id="cb2"></ui5-checkbox>
diff --git a/packages/main/cypress/specs/base/IconCollection.cy.ts b/packages/main/cypress/specs/base/IconCollection.cy.ts
index 2716fa411083..e7b1ad75ff52 100644
--- a/packages/main/cypress/specs/base/IconCollection.cy.ts
+++ b/packages/main/cypress/specs/base/IconCollection.cy.ts
@@ -1,7 +1,6 @@
 import "./css/redfish.custom.theme.css";
 import getEffectiveIconCollection from "@ui5/webcomponents-base/dist/asset-registries/util/getIconCollectionByTheme.js";
 import { setTheme, isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
-import { html } from "lit";
 import "../../../src/Assets.js";
 import "../../../src/Icon.js";
 
@@ -12,7 +11,7 @@ describe("Icon collection", () => {
 	});
 
 	it("tests the icon collection in built-in themes", () => {
-		cy.mount(html`<ui5-icon name="home"></ui5-icon>`);
+		cy.mount(`<ui5-icon name="home"></ui5-icon>`);
 
 		cy.wrap({ getEffectiveIconCollection })
 			.invoke("getEffectiveIconCollection")
@@ -37,7 +36,7 @@ describe("Icon collection", () => {
 	});
 
 	it("tests the icon collection in built-in themes", () => {
-		cy.mount(html`<ui5-icon name="home"></ui5-icon>`);
+		cy.mount(`<ui5-icon name="home"></ui5-icon>`);
 
 		// act
 		cy.wrap({ setTheme })
diff --git a/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts b/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts
index a807a40e7090..b3520199a83e 100644
--- a/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts
+++ b/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts
@@ -1,4 +1,3 @@
-import { html } from "lit";
 import "../../../src/Card.js";
 import "../../../src/CardHeader.js";
 
@@ -9,7 +8,7 @@ ignoreCustomElements("my-");
 
 describe("Ignore Custom Elements", () => {
 	it("tests shouldIgnoreCustomElement method", () => {
-		cy.mount(html`<ui5-card>
+		cy.mount(`<ui5-card>
 		<ui5-card-header
 			slot="header"
 			status="4 of 10"
diff --git a/packages/main/cypress/specs/base/Tooltips.cy.ts b/packages/main/cypress/specs/base/Tooltips.cy.ts
index 7428088e6fa4..0a1b62e6b562 100644
--- a/packages/main/cypress/specs/base/Tooltips.cy.ts
+++ b/packages/main/cypress/specs/base/Tooltips.cy.ts
@@ -1,5 +1,4 @@
 import { setEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
-import { html } from "lit";
 import "../../../src/Icon.js";
 import "../../../src/Button.js";
 import "../../../src/ToggleButton.js";
@@ -11,7 +10,7 @@ setEnableDefaultTooltips(false);
 
 describe("Default Tooltips", () => {
 	it("tests navigation", () => {
-		cy.mount(html`
+		cy.mount(`
 	<ui5-icon id="ic" name="settings"></ui5-icon>
 	<ui5-button id="btn" icon="settings"></ui5-button>
 	<ui5-rating-indicator id="rt" icon="settings"></ui5-rating-indicator>
diff --git a/packages/main/package.json b/packages/main/package.json
index 6dd74524643c..678ed4b00ccc 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -60,7 +60,6 @@
   "devDependencies": {
     "@ui5/webcomponents-tools": "2.4.0-rc.1",
     "@ui5/webcomponents-testing": "0.0.0",
-    "chromedriver": "^128.0.3",
-    "lit": "^2.0.0"
+    "chromedriver": "^128.0.3"
   }
 }
diff --git a/packages/testing/package.json b/packages/testing/package.json
index 79e786d36c75..7a3d8f2de249 100644
--- a/packages/testing/package.json
+++ b/packages/testing/package.json
@@ -21,9 +21,10 @@
   "dependencies": {
     "cypress": "^13.11.0",
     "cypress-real-events": "^1.12.0",
-    "cypress-ct-lit": "^0.4.0",
     "eslint": "^7.22.0",
     "eslint-plugin-cypress": "^3.4.0",
-    "vite": "^5.4.8"
+    "vite": "^5.4.8",
+    "cypress-ct-lit": "^0.5.0",
+    "@cypress/mount-utils": "^4.0.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 23ffd110a9f3..025ad8a7cfa7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7126,12 +7126,10 @@ custom-elements-manifest@1.0.0:
   resolved "https://registry.yarnpkg.com/custom-elements-manifest/-/custom-elements-manifest-1.0.0.tgz#b35c2129076a1dc9f95d720c6f7b5b71a857274b"
   integrity sha512-j59k0ExGCKA8T6Mzaq+7axc+KVHwpEphEERU7VZ99260npu/p/9kd+Db+I3cGKxHkM5y6q5gnlXn00mzRQkX2A==
 
-cypress-ct-lit@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/cypress-ct-lit/-/cypress-ct-lit-0.4.1.tgz#f21341ab0d37e30cea45a9ce44b959fe5db1b8fa"
-  integrity sha512-iYVoBU605anRDstyxVWxQKFoiuzeA0gvj4I80aj0cym7VUCoarYFMjYA2CBEynLzJxS4yoTZC+jdff8dWYdgiA==
-  dependencies:
-    "@cypress/mount-utils" "^4.0.0"
+cypress-ct-lit@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cypress-ct-lit/-/cypress-ct-lit-0.5.0.tgz#97d45105293da60daa83d82ed64f6882f15e501a"
+  integrity sha512-g38dD7W4QtCyOS4O06kCzj74/BSa0IMut+WZwjXMPOb6yzqSaqN9EJLJTksNLRWy75IuNWM66mt9HVhRmdMR5Q==
 
 cypress-real-events@^1.12.0:
   version "1.12.0"

From 6013e6abad3bb6753e2560664d25758cd4425928 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Tue, 22 Oct 2024 10:19:06 +0300
Subject: [PATCH 09/11] chore: restore

---
 docs/4-development/10-testing.md              |  3 +-
 .../cypress/specs/BarcodeScannerDialog.cy.ts  |  3 +-
 packages/fiori/cypress/specs/FCL.cy.ts        |  3 +-
 packages/fiori/cypress/specs/Page.cy.ts       |  3 +-
 packages/main/cypress/specs/Button.cy.ts      | 39 +++++------
 packages/main/cypress/specs/Eventing.cy.ts    |  5 +-
 packages/main/cypress/specs/F6.cy.ts          | 29 ++++----
 packages/main/cypress/specs/Form.cy.ts        | 13 ++--
 packages/main/cypress/specs/FormSupport.cy.ts | 43 ++++++------
 packages/main/cypress/specs/List.cy.ts        |  3 +-
 .../main/cypress/specs/LitKeyFunction.cy.ts   |  3 +-
 packages/main/cypress/specs/Menu.cy.ts        | 33 ++++-----
 packages/main/cypress/specs/RTL.cy.ts         |  3 +-
 .../specs/ResponsivePopover.mobile.cy.ts      | 11 +--
 packages/main/cypress/specs/Select.cy.ts      |  3 +-
 .../main/cypress/specs/TableLoading.cy.ts     |  3 +-
 packages/main/cypress/specs/TextArea.cy.ts    | 67 ++++++++++---------
 .../cypress/specs/base/AriaLabelHelper.cy.ts  | 11 +--
 packages/main/cypress/specs/base/Events.cy.ts |  9 +--
 .../cypress/specs/base/IconCollection.cy.ts   |  5 +-
 .../specs/base/IgnoreCustomElements.cy.ts     |  3 +-
 .../main/cypress/specs/base/Tooltips.cy.ts    |  3 +-
 22 files changed, 160 insertions(+), 138 deletions(-)

diff --git a/docs/4-development/10-testing.md b/docs/4-development/10-testing.md
index 59dfb4c11264..bc7e046cf989 100644
--- a/docs/4-development/10-testing.md
+++ b/docs/4-development/10-testing.md
@@ -233,10 +233,11 @@ We utilize component testing for UI5 web components, which involves mounting the
 **Example Test File:**
 
 ```typescript
+import { html } from "lit";
 
 describe("Demo", () => {
   it("Button exists", () => {
-    cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+    cy.mount(html`<ui5-test-generic></ui5-test-generic>`);
 
     cy.get("[ui5-button]").should("exist");
   });
diff --git a/packages/fiori/cypress/specs/BarcodeScannerDialog.cy.ts b/packages/fiori/cypress/specs/BarcodeScannerDialog.cy.ts
index e9a90b9a9e74..e87df3fb908a 100644
--- a/packages/fiori/cypress/specs/BarcodeScannerDialog.cy.ts
+++ b/packages/fiori/cypress/specs/BarcodeScannerDialog.cy.ts
@@ -1,3 +1,4 @@
+import { html } from "lit";
 import "@ui5/webcomponents-icons/dist/camera.js";
 import "../../src/BarcodeScannerDialog.js";
 import type BarcodeScannerDialog from "../../src/BarcodeScannerDialog.js";
@@ -7,7 +8,7 @@ describe("BarcodeScannerDialog", () => {
 	let handleScanError: (event: CustomEvent) => void;
 
 	beforeEach(() => {
-		cy.mount(`
+		cy.mount(html`
 			<ui5-barcode-scanner-dialog id="dlgScan"></ui5-barcode-scanner-dialog>
 			<ui5-button id="btnScan" icon="camera">Open Scanner Dialog</ui5-button>
 
diff --git a/packages/fiori/cypress/specs/FCL.cy.ts b/packages/fiori/cypress/specs/FCL.cy.ts
index 4345096b5107..87239036a149 100644
--- a/packages/fiori/cypress/specs/FCL.cy.ts
+++ b/packages/fiori/cypress/specs/FCL.cy.ts
@@ -1,3 +1,4 @@
+import { html } from "lit";
 import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import "../../src/FlexibleColumnLayout.js";
 
@@ -6,7 +7,7 @@ describe("Columns resize", () => {
 		cy.wrap({ setAnimationMode })
 			.invoke("setAnimationMode", "none");
 
-		cy.mount(`
+		cy.mount(html`
 <ui5-flexible-column-layout id="fcl" style="height: 300px;" layout="TwoColumnsMidExpanded">
 	<div class="column" id="startColumn" slot="startColumn">some content</div>
 	<div class="column" id="midColumn" slot="midColumn">some content</div>
diff --git a/packages/fiori/cypress/specs/Page.cy.ts b/packages/fiori/cypress/specs/Page.cy.ts
index abc62ce8e0a6..8f4fd9b2a6a8 100644
--- a/packages/fiori/cypress/specs/Page.cy.ts
+++ b/packages/fiori/cypress/specs/Page.cy.ts
@@ -1,10 +1,11 @@
+import { html } from "lit";
 import "../../src/Page.js";
 import "@ui5/webcomponents/dist/Bar.js";
 import "@ui5/webcomponents/dist/Button.js";
 
 describe("Page general interaction", () => {
 	beforeEach(() => {
-		cy.mount(`
+		cy.mount(html`
 <ui5-page style="height: 300px;" show-footer>
 	<ui5-bar slot="header">
 		<ui5-button slot="startContent">Header button</ui5-button>
diff --git a/packages/main/cypress/specs/Button.cy.ts b/packages/main/cypress/specs/Button.cy.ts
index e99953321f85..2a6673582d60 100644
--- a/packages/main/cypress/specs/Button.cy.ts
+++ b/packages/main/cypress/specs/Button.cy.ts
@@ -1,3 +1,4 @@
+import { html } from "lit";
 import "../../src/Button.js";
 import type Button from "../../src/Button.js";
 import "@ui5/webcomponents-icons/dist/download.js";
@@ -5,7 +6,7 @@ import "@ui5/webcomponents-icons/dist/employee.js";
 
 describe("Button general interaction", () => {
 	it("tests button's text rendering", () => {
-		cy.mount(`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
 
 		cy.get<Button>("[ui5-button]")
 			.shadow()
@@ -14,7 +15,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button's icon rendering", () => {
-		cy.mount(`<ui5-button>Action Bar Button</ui5-button>`);
+		cy.mount(html`<ui5-button>Action Bar Button</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -41,7 +42,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button's endIon rendering", () => {
-		cy.mount(`<ui5-button>Action Bar Button</ui5-button>`);
+		cy.mount(html`<ui5-button>Action Bar Button</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -68,7 +69,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests click event", () => {
-		cy.mount(`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -90,7 +91,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests keyboard shortcuts used to prevent a click event", () => {
-		cy.mount(`<ui5-button>Text</ui5-button>`);
+		cy.mount(html`<ui5-button>Text</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -111,7 +112,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("aria-expanded is properly applied on the button tag", () => {
-		cy.mount(`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -142,7 +143,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("not setting accessible-role on the host keeps the correct role on the button tag", () => {
-		cy.mount(`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -154,21 +155,21 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button's icon only rendering", () => {
-		cy.mount(`<ui5-button icon="home"><!----><!----></ui5-button>`);
+		cy.mount(html`<ui5-button icon="home"><!----><!----></ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.should("have.attr", "icon-only");
 	});
 
 	it("tests button's icon only rendering", () => {
-		cy.mount(`<ui5-button icon="text"> </ui5-button>`);
+		cy.mount(html`<ui5-button icon="text"> </ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.should("have.attr", "icon-only");
 	});
 
 	it("tests button's slot rendering", () => {
-		cy.mount(`
+		cy.mount(html`
 	<ui5-button>
 		<ui5-avatar id="btnImage" size="XS">
 			<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
@@ -179,7 +180,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests clicking on disabled button", () => {
-		cy.mount(`<ui5-button disabled>Inactive</ui5-button>`);
+		cy.mount(html`<ui5-button disabled>Inactive</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -211,7 +212,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests clicking on disabled button with Icon", () => {
-		cy.mount(`<ui5-button icon="employee" disabled></ui5-button>`);
+		cy.mount(html`<ui5-button icon="employee" disabled></ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -241,7 +242,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button with text icon role", () => {
-		cy.mount(`<ui5-button design="Attention" icon="message-warning">Warning</ui5-button>`);
+		cy.mount(html`<ui5-button design="Attention" icon="message-warning">Warning</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -255,7 +256,7 @@ describe("Button general interaction", () => {
 	it("aria-describedby properly applied on the button tag", () => {
 		const hiddenTextTypeId = "ui5-button-hiddenText-type";
 
-		cy.mount(`<ui5-button design="Attention">Content</ui5-button>`);
+		cy.mount(html`<ui5-button design="Attention">Content</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -272,7 +273,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("setting accessible-name-ref on the host is reflected on the button tag", () => {
-		cy.mount(`<ui5-button icon="download" accessible-name="Help me" accessible-name-ref="1download-text"></ui5-button>
+		cy.mount(html`<ui5-button icon="download" accessible-name="Help me" accessible-name-ref="1download-text"></ui5-button>
 		<ui5-label id="1download-text">Download Application</ui5-label>`);
 
 		cy.get("[ui5-button]")
@@ -285,7 +286,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("aria-haspopup and aria-controls are properly applied on the button tag", () => {
-		cy.mount(`<ui5-button>Show Registration Dialog</ui5-button>`);
+		cy.mount(html`<ui5-button>Show Registration Dialog</ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -310,7 +311,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("setting tooltip on the host is reflected on the button tag", () => {
-		cy.mount(`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
+		cy.mount(html`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -322,7 +323,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tooltip from inner icon is propagated", () => {
-		cy.mount(`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
+		cy.mount(html`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -334,7 +335,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("setting accessible-role on the host is reflected on the button tag", () => {
-		cy.mount(`<ui5-button accessible-role="Link"> Navigation Button </ui5-button>`);
+		cy.mount(html`<ui5-button accessible-role="Link"> Navigation Button </ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.shadow()
diff --git a/packages/main/cypress/specs/Eventing.cy.ts b/packages/main/cypress/specs/Eventing.cy.ts
index 38a18e8b39db..2f4f1886e4ba 100644
--- a/packages/main/cypress/specs/Eventing.cy.ts
+++ b/packages/main/cypress/specs/Eventing.cy.ts
@@ -1,8 +1,9 @@
+// import { html } from "lit";
 import "../../src/Button.js";
 
 describe("Eventing", () => {
 	it("Default prevented", () => {
-		// 		cy.mount(`<form method="get">
+		// 		cy.mount(html`<form method="get">
 		// 	<ui5-button submits>Submit</ui5-button>
 		// </form>`);
 
@@ -24,7 +25,7 @@ describe("Eventing", () => {
 	});
 
 	// 	it("Default not prevented", () => {
-	// 		cy.mount(`<form>
+	// 		cy.mount(html`<form>
 	// 	<ui5-button submits>Submit</ui5-button>
 	// </form>`);
 
diff --git a/packages/main/cypress/specs/F6.cy.ts b/packages/main/cypress/specs/F6.cy.ts
index 52fc744f63f8..31ae4d7b5e8d 100644
--- a/packages/main/cypress/specs/F6.cy.ts
+++ b/packages/main/cypress/specs/F6.cy.ts
@@ -1,10 +1,11 @@
+import { html } from "lit";
 import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
 import "../../src/Button.js";
 
 describe("F6 navigation", () => {
 	describe("F6 Forward navigation", () => {
 		it("tests navigation", () => {
-			cy.mount(`<div>
+			cy.mount(html`<div>
 				<div class="section">
 					<button id="before">Before element</button>
 				</div>
@@ -59,7 +60,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with empty group", () => {
-			cy.mount(`<div>
+			cy.mount(html`<div>
 				<div class="section">
 					<button id="before">Before element</button>
 				</div>
@@ -107,7 +108,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with nested groups", () => {
-			cy.mount(`<div class="section">
+			cy.mount(html`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -157,7 +158,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with nesting inside empty fastnav-group parent", () => {
-			cy.mount(`<div class="section">
+			cy.mount(html`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -214,7 +215,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with group as a focusable element", () => {
-			cy.mount(`<div class="section">
+			cy.mount(html`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -267,7 +268,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation without a focusable element", () => {
-			cy.mount(`<div class="section">
+			cy.mount(html`<div class="section">
 				<ui5-button id="first">Before element</ui5-button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -303,7 +304,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with a single group", () => {
-			cy.mount(`<div class="section">
+			cy.mount(html`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -331,7 +332,7 @@ describe("F6 navigation", () => {
 
 	describe("F6 Backward navigation", () => {
 		it("tests navigation", () => {
-			cy.mount(`<div>
+			cy.mount(html`<div>
 				<div class="section">
 					<button id="before">Before element</button>
 				</div>
@@ -386,7 +387,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with empty group", () => {
-			cy.mount(`<div>
+			cy.mount(html`<div>
 				<div class="section">
 					<button id="before">Before element</button>
 				</div>
@@ -434,7 +435,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with nested groups", () => {
-			cy.mount(`<div class="section">
+			cy.mount(html`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -484,7 +485,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with nesting inside empty fastnav-group parent", () => {
-			cy.mount(`<div class="section">
+			cy.mount(html`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -541,7 +542,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with group as a focusable element", () => {
-			cy.mount(`<div class="section">
+			cy.mount(html`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -594,7 +595,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation without a focusable element", () => {
-			cy.mount(`<div class="section">
+			cy.mount(html`<div class="section">
 				<ui5-button id="first">Before element</ui5-button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
@@ -630,7 +631,7 @@ describe("F6 navigation", () => {
 		});
 
 		it("tests navigation with a single group", () => {
-			cy.mount(`<div class="section">
+			cy.mount(html`<div class="section">
 				<button id="before">Before element</button>
 			</div>
 			<div class="section" data-sap-ui-fastnavgroup="true">
diff --git a/packages/main/cypress/specs/Form.cy.ts b/packages/main/cypress/specs/Form.cy.ts
index 6a93300a9448..2519abcf643d 100644
--- a/packages/main/cypress/specs/Form.cy.ts
+++ b/packages/main/cypress/specs/Form.cy.ts
@@ -1,10 +1,11 @@
+import { html } from "lit";
 import "../../src/Form.js";
 import "../../src/FormItem.js";
 import "../../src/FormGroup.js";
 
 describe("General API", () => {
 	it("tests calculated state of Form with default layout and label-span", () => {
-		cy.mount(`<ui5-form class="addressForm" header-text="Default form">
+		cy.mount(html`<ui5-form class="addressForm" header-text="Default form">
 			<ui5-form-group header-text="Address">
 				<ui5-form-item>
 					<span slot="labelContent">Name:</span>
@@ -56,7 +57,7 @@ describe("General API", () => {
 	});
 
 	it("tests calculated state of Form with layout='S1 M2 L3 XL6' and label-span='S12 M4 L4 XL4'", () => {
-		cy.mount(`<ui5-form class="addressForm" header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
+		cy.mount(html`<ui5-form class="addressForm" header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
 	<ui5-form-group header-text="Address">
 		<ui5-form-item>
 			<span slot="labelContent">Name:</span>
@@ -108,7 +109,7 @@ describe("General API", () => {
 	});
 
 	it("tests calculated state of Form with layout='S1 M2 L2 XL3' label-span='S12 M12 L12 XL12'", () => {
-		cy.mount(`<ui5-form header-text="Labels on top" layout="S1 M2 L2 XL3" label-span="S12 M12 L12 XL12">
+		cy.mount(html`<ui5-form header-text="Labels on top" layout="S1 M2 L2 XL3" label-span="S12 M12 L12 XL12">
 	<ui5-form-item>
 		<span slot="labelContent">Name:</span>
 		<input />
@@ -171,7 +172,7 @@ describe("General API", () => {
 	});
 
 	it("tests calculated state of two FormGroups in layout='S1 M2 L3 XL4'", () => {
-		cy.mount(`<ui5-form header-text="WebC :: Supplier 2gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
+		cy.mount(html`<ui5-form header-text="WebC :: Supplier 2gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
 	<ui5-form-group id="testFormGroup4" header-text="Address">
 		<ui5-form-item>
 			<span slot="labelContent">Name:</span>
@@ -223,7 +224,7 @@ describe("General API", () => {
 	});
 
 	it("tests calculated state of three FormGroups in layout='S1 M2 L3 XL6'", () => {
-		cy.mount(`<ui5-form header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
+		cy.mount(html`<ui5-form header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
 	<ui5-form-group id="testFormGroup1" header-text="Address">
 		<ui5-form-item>
 			<span slot="labelContent">Name:</span>
@@ -308,7 +309,7 @@ describe("General API", () => {
 	});
 
 	it("tests calculated state of three FormGroups in layout='S1 M2 L3 XL4'", () => {
-		cy.mount(`<ui5-form header-text="WebC :: Supplier 3gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
+		cy.mount(html`<ui5-form header-text="WebC :: Supplier 3gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
 	<ui5-form-group id="testFormGroup6" header-text="Address">
 		<ui5-form-item>
 			<span slot="labelContent">Name:</span>
diff --git a/packages/main/cypress/specs/FormSupport.cy.ts b/packages/main/cypress/specs/FormSupport.cy.ts
index a6707832c812..cbd3c4664bbf 100644
--- a/packages/main/cypress/specs/FormSupport.cy.ts
+++ b/packages/main/cypress/specs/FormSupport.cy.ts
@@ -1,3 +1,4 @@
+import { html } from "lit";
 import "../../src/Button.js";
 import "../../src/CheckBox.js";
 import "../../src/ColorPicker.js";
@@ -31,7 +32,7 @@ const getFormData = ($form: HTMLFormElement) => {
 
 describe("Form support", () => {
 	it("ui5-checkbox in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-checkbox id="cb1" text="ui5-checkbox without name"></ui5-checkbox>
 	<ui5-checkbox id="cb2" text="ui5-checkbox without name and value" checked></ui5-checkbox>
 	<ui5-checkbox id="cb3" name="checkbox3" text="ui5-checkbox with name and without value"></ui5-checkbox>
@@ -69,7 +70,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-color-picker in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-color-picker id="color_picker1"></ui5-color-picker>
 	<ui5-color-picker id="color_picker2" value="blue"></ui5-color-picker>
 	<ui5-color-picker id="color_picker3" name="color_picker3"></ui5-color-picker>
@@ -97,7 +98,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-combobox in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-combobox id="combobox1"></ui5-combobox>
 	<ui5-combobox id="combobox2" value="ok"></ui5-combobox>
 	<ui5-combobox id="combobox3" name="combobox3"></ui5-combobox>
@@ -138,7 +139,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-date-picker in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-date-picker id="date_picker1"></ui5-date-picker>
 	<ui5-date-picker id="date_picker2" value="ok"></ui5-date-picker>
 	<ui5-date-picker id="date_picker3" name="date_picker3"></ui5-date-picker>
@@ -179,7 +180,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-daterange-picker in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-daterange-picker id="daterange_picker1"></ui5-daterange-picker>
 	<ui5-daterange-picker id="daterange_picker2" value="ok"></ui5-daterange-picker>
 	<ui5-daterange-picker id="daterange_picker3" name="daterange_picker3"></ui5-daterange-picker>
@@ -220,7 +221,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-datetime-picker in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-datetime-picker id="datetime_picker1"></ui5-datetime-picker>
 	<ui5-datetime-picker id="datetime_picker2" value="ok"></ui5-datetime-picker>
 	<ui5-datetime-picker id="datetime_picker3" name="datetime_picker3"></ui5-datetime-picker>
@@ -261,7 +262,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-input in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-input id="input1"></ui5-input>
 	<ui5-input id="input2" value="ok"></ui5-input>
 	<ui5-input id="input3" name="input3"></ui5-input>
@@ -302,7 +303,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-multi-combobox in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-multi-combobox id="multi_combobox1"></ui5-multi-combobox>
 	<ui5-multi-combobox id="multi_combobox2" value="ok"></ui5-multi-combobox>
 	<ui5-multi-combobox id="multi_combobox3">
@@ -366,7 +367,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-multi-input in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-multi-input id="multi_input1"></ui5-multi-input>
 	<ui5-multi-input id="multi_input2" value="ok"></ui5-multi-input>
 	<ui5-multi-input id="multi_input3">
@@ -427,7 +428,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-radio-button in form 1", () => {
-		cy.mount(`<form  method="get">
+		cy.mount(html`<form  method="get">
 	<ui5-radio-button id="rb_1" required name="rb1"></ui5-radio-button>
 	<button type="submit">Submits forms</button>
 </form>`);
@@ -464,7 +465,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-radio-button in form 2", () => {
-		cy.mount(`<form  method="get">
+		cy.mount(html`<form  method="get">
 	<ui5-title>ui5-radio-button</ui5-title>
 	<ui5-radio-button required id="rb_2" required checked></ui5-radio-button>
 	<button type="submit">Submits forms</button>
@@ -490,7 +491,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-radio-button in form 3", () => {
-		cy.mount(`<form  method="get">
+		cy.mount(html`<form  method="get">
 	<ui5-radio-button required name="rb3" id="rb_3" value="A" text="A"></ui5-radio-button>
 	<ui5-radio-button required name="rb3" id="rb_4" value="B" text="B"></ui5-radio-button>
 	<ui5-radio-button required value="C" text="C" checked></ui5-radio-button>
@@ -529,7 +530,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-range-slider in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-range-slider id="range_slider1"></ui5-range-slider>
 	<ui5-range-slider id="range_slider2" start-value="25" end-value="75"></ui5-range-slider>
 	<ui5-range-slider id="range_slider3" name="range_slider3"></ui5-range-slider>
@@ -557,7 +558,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-select in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-select id="select1">
 		<ui5-option selected>Option 1</ui5-option>
 		<ui5-option value="option2">Option 2</ui5-option>
@@ -646,7 +647,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-slider in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-slider id="slider1"></ui5-slider>
 	<ui5-slider id="slider2" value="100"></ui5-slider>
 	<ui5-slider id="slider3" name="slider3"></ui5-slider>
@@ -674,7 +675,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-step-input in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-step-input id="step_input1"></ui5-step-input>
 	<ui5-step-input id="step_input2" value="4"></ui5-step-input>
 	<ui5-step-input id="step_input3" name="step_input3"></ui5-step-input>
@@ -702,7 +703,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-switch in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-switch id="switch1" text="ui5-switch without name"></ui5-switch>
 	<ui5-switch id="switch2" text="ui5-switch without name and value" checked></ui5-switch>
 	<ui5-switch id="switch3" name="switch3" text="ui5-switch with name and without value"></ui5-switch>
@@ -740,7 +741,7 @@ describe("Form support", () => {
 	});
 
 	it("ui5-textarea in form", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-textarea id="textarea1"></ui5-textarea>
 	<ui5-textarea id="textarea2" value="ok"></ui5-textarea>
 	<ui5-textarea id="textarea3" name="textarea3"></ui5-textarea>
@@ -782,7 +783,7 @@ describe("Form support", () => {
 
 	it("ui5-time-picker in form", () => {
 		/* eslint-disable no-irregular-whitespace */
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-time-picker id="time_picker1"></ui5-time-picker>
 	<ui5-time-picker id="time_picker2" value="1:10:10 PM"></ui5-time-picker>
 	<ui5-time-picker id="time_picker3" name="time_picker3" required></ui5-time-picker>
@@ -823,7 +824,7 @@ describe("Form support", () => {
 	});
 
 	it("Normal button does not submit forms", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-button id="b1">Does not submit forms</ui5-button>
 </form>`);
 
@@ -841,7 +842,7 @@ describe("Form support", () => {
 	});
 
 	it("Submit button does submit forms", () => {
-		cy.mount(`<form method="get">
+		cy.mount(html`<form method="get">
 	<ui5-input name="input" value="ok"></ui5-input>
 	<ui5-input name="input_disabled" disabled value="ok"></ui5-input>
 	<ui5-select name="sel">
diff --git a/packages/main/cypress/specs/List.cy.ts b/packages/main/cypress/specs/List.cy.ts
index ddd4d41ec908..343e721ee48b 100644
--- a/packages/main/cypress/specs/List.cy.ts
+++ b/packages/main/cypress/specs/List.cy.ts
@@ -1,9 +1,10 @@
+import { html } from "lit";
 import "../../src/List.js";
 import type List from "../../src/List.js";
 
 describe("List Tests", () => {
 	it("tests 'loadMore' event fired upon infinite scroll", () => {
-		cy.mount(`
+		cy.mount(html`
 		<ui5-list style="height: 300px;"  growing="Scroll">
 			<ui5-li>Laptop Lenovo</ui5-li>
 			<ui5-li>IPhone 3</ui5-li>
diff --git a/packages/main/cypress/specs/LitKeyFunction.cy.ts b/packages/main/cypress/specs/LitKeyFunction.cy.ts
index 34cf2cae7315..367b47cf0609 100644
--- a/packages/main/cypress/specs/LitKeyFunction.cy.ts
+++ b/packages/main/cypress/specs/LitKeyFunction.cy.ts
@@ -1,9 +1,10 @@
+import { html } from "lit";
 import "../../src/MultiComboBox.js";
 import "../../src/MultiComboBoxItem.js";
 
 describe("Lit HTML key function for #each", () => {
 	it("LIT HTML does not mess up keys when looping over lists", () => {
-		cy.mount(`<ui5-multi-combobox id="mcb">
+		cy.mount(html`<ui5-multi-combobox id="mcb">
 			<ui5-mcb-item text="<empty>"></ui5-mcb-item>
 			<ui5-mcb-item text="Algeria"></ui5-mcb-item>
 			<ui5-mcb-item text="China"></ui5-mcb-item>
diff --git a/packages/main/cypress/specs/Menu.cy.ts b/packages/main/cypress/specs/Menu.cy.ts
index 1342890d212d..0c76d2bc781e 100644
--- a/packages/main/cypress/specs/Menu.cy.ts
+++ b/packages/main/cypress/specs/Menu.cy.ts
@@ -1,3 +1,4 @@
+import { html } from "lit";
 import "../../src/Button.js";
 import "../../src/Menu.js";
 import "../../src/MenuItem.js";
@@ -5,7 +6,7 @@ import type MenuItem from "../../src/MenuItem.js";
 
 describe("Menu interaction", () => {
 	it("Menu opens after button click", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu id="menu" opener="btnOpen">
 			<ui5-menu-item text="New File"></ui5-menu-item>
 		</ui5-menu>`);
@@ -15,7 +16,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Menu opens after button click", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu>
 			<ui5-menu-item text="New File"></ui5-menu-item>
 		</ui5-menu>`);
@@ -25,7 +26,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Menu icons appearance", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu open opener="btnOpen">
 			<ui5-menu-item text="Item 1.0" icon="open-folder">
 				<ui5-menu-item text="1.1"></ui5-menu-item>
@@ -53,7 +54,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Restore focus to previous element after close", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu open opener="btnOpen">
 			<ui5-menu-item text="Item 1.0" icon="open-folder">
 				<ui5-menu-item text="1.1"></ui5-menu-item>
@@ -74,7 +75,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Enable navigaion over disabled items", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu id="menu" opener="btnOpen" open>
 			<ui5-menu-item text="Item 1"></ui5-menu-item>
 			<ui5-menu-item text="Item 2" disabled></ui5-menu-item>
@@ -98,7 +99,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Add endContent to a menu item", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu id="menu" opener="btnOpen" open>
 			<ui5-menu-item text="Item 1">
 				<ui5-button slot="endContent">endContent</ui5-button>
@@ -127,7 +128,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Menu and Menu items busy indication - with items", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu id="menu" opener="btnOpen" open>
 			<ui5-menu-item text="Item 1" loading-delay="500" loading>
 				<ui5-menu-item text="Item 1.1"></ui5-menu-item>
@@ -145,7 +146,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Menu and Menu items busy indication - without items", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu id="menu" opener="btnOpen" open>
 			<ui5-menu-item text="Item 1" loading-delay="500" loading></ui5-menu-item>
 		</ui5-menu>`);
@@ -158,7 +159,7 @@ describe("Menu interaction", () => {
 	});
 
 	it("Restore focus on close", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 		<ui5-menu id="menu">
 			<ui5-menu-item text="Item 1"></ui5-menu-item>
 		</ui5-menu>`);
@@ -188,7 +189,7 @@ describe("Menu interaction", () => {
 
 	describe("Event firing", () => {
 		it("Event firing - 'ui5-item-click' after 'click' on menu item", () => {
-			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu open opener="btnOpen">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
@@ -209,7 +210,7 @@ describe("Menu interaction", () => {
 		});
 
 		it("Event firing - 'ui5-item-click' after 'Space' on menu item", () => {
-			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu open opener="btnOpen">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
@@ -230,7 +231,7 @@ describe("Menu interaction", () => {
 		});
 
 		it("Event firing - 'ui5-item-click' after 'Enter' on menu item", () => {
-			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu open opener="btnOpen">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
@@ -251,7 +252,7 @@ describe("Menu interaction", () => {
 		});
 
 		it("Prevent menu closing on item press", () => {
-			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu open opener="btnOpen" @ui5-item-click="${(e: CustomEvent) => e.preventDefault()}">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
@@ -279,7 +280,7 @@ describe("Menu interaction", () => {
 		});
 
 		it("Events firing on open/close of the menu", () => {
-			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu id="menu" opener="btnOpen">
 				<ui5-menu-item text="New File"></ui5-menu-item>
 			</ui5-menu>`);
@@ -333,7 +334,7 @@ describe("Menu interaction", () => {
 
 	describe("Accessibility", () => {
 		it("Menu and Menu items accessibility attributes", () => {
-			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu open opener="btnOpen">
 				<ui5-menu-item text="Item 1.0" accessible-name="test accessible name">
 					<ui5-menu-item text="Item 1.1"></ui5-menu-item>
@@ -395,7 +396,7 @@ describe("Menu interaction", () => {
 		});
 
 		it("Menu popover has an accessible name", () => {
-			cy.mount(`<ui5-button id="btnOpen">Open Menu</ui5-button>
+			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
 			<ui5-menu open opener="btnOpen">
 				<ui5-menu-item text="Item 1.0" icon="open-folder">
 					<ui5-menu-item text="1.1"></ui5-menu-item>
diff --git a/packages/main/cypress/specs/RTL.cy.ts b/packages/main/cypress/specs/RTL.cy.ts
index 53eb5ef60a24..95cf8a30d28e 100644
--- a/packages/main/cypress/specs/RTL.cy.ts
+++ b/packages/main/cypress/specs/RTL.cy.ts
@@ -1,8 +1,9 @@
+import { html } from "lit";
 import "../../src/CheckBox.js";
 
 describe("RTL", () => {
 	it("tests effectiveDir", () => {
-		cy.mount(`<section dir="rtl">
+		cy.mount(html`<section dir="rtl">
 	<ui5-checkbox id="cbRTL" text="Click me"></ui5-checkbox>
 	<ui5-checkbox id="cbLTR" text="This checkbox however defines dir=ltr" dir="ltr"></ui5-checkbox>
 </section>`);
diff --git a/packages/main/cypress/specs/ResponsivePopover.mobile.cy.ts b/packages/main/cypress/specs/ResponsivePopover.mobile.cy.ts
index 9592d9edd399..6531663b9df1 100644
--- a/packages/main/cypress/specs/ResponsivePopover.mobile.cy.ts
+++ b/packages/main/cypress/specs/ResponsivePopover.mobile.cy.ts
@@ -1,3 +1,4 @@
+import { html } from "lit";
 import "../../src/ResponsivePopover.js";
 import "../../src/Button.js";
 import "../../src/Input.js";
@@ -8,7 +9,7 @@ describe("ResponsivePopover mobile general interaction", () => {
 	});
 
 	it("tests opening a popover from a responsive popover", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open me</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
 		<ui5-responsive-popover open opener="btnOpen"></ui5-responsive-popover>`);
 
 		cy.get("[ui5-responsive-popover]")
@@ -24,7 +25,7 @@ describe("Accessibility", () => {
 	});
 
 	it("tests accessible-role - Default", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open me</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
 		<ui5-responsive-popover open opener="btnOpen"></ui5-responsive-popover>`);
 
 		cy.get("[ui5-responsive-popover]")
@@ -43,7 +44,7 @@ describe("Accessibility", () => {
 	});
 
 	it("tests accessible-role - AlertDialog", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open me</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
 		<ui5-responsive-popover open opener="btnOpen" accessible-role="AlertDialog"></ui5-responsive-popover>`);
 
 		cy.get("[ui5-responsive-popover]")
@@ -62,7 +63,7 @@ describe("Accessibility", () => {
 	});
 
 	it("tests accessible-role - None", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open me</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
 		<ui5-responsive-popover open opener="btnOpen" accessible-role="None"></ui5-responsive-popover>`);
 
 		cy.get("[ui5-responsive-popover]")
@@ -81,7 +82,7 @@ describe("Accessibility", () => {
 	});
 
 	it("tests initial focus", () => {
-		cy.mount(`<ui5-button id="btnOpen">Open me</ui5-button>
+		cy.mount(html`<ui5-button id="btnOpen">Open me</ui5-button>
 		<ui5-responsive-popover open opener="btnOpen" initial-focus="emailInput">
 			<ui5-input id="emailInput"></ui5-input>
 		</ui5-responsive-popover>`);
diff --git a/packages/main/cypress/specs/Select.cy.ts b/packages/main/cypress/specs/Select.cy.ts
index ff65520a9bab..e1d6214ff55b 100644
--- a/packages/main/cypress/specs/Select.cy.ts
+++ b/packages/main/cypress/specs/Select.cy.ts
@@ -1,3 +1,4 @@
+import { html } from "lit";
 import "../../src/Select.js";
 import "../../src/Option.js";
 import "../../src/OptionCustom.js";
@@ -6,7 +7,7 @@ describe("Select - Accessibility", () => {
 	it("tests options tooltip is set displayed", () => {
 		const EXPECTED_TOOLTIP = "Tooltip";
 		const EXPECTED_ROLE = "option";
-		cy.mount(`
+		cy.mount(html`
 			<ui5-select>
 				<ui5-option value="1" tooltip="${EXPECTED_TOOLTIP}">Option 1</ui5-option>
 				<ui5-option-custom value="2" tooltip="${EXPECTED_TOOLTIP}">Option 2</ui5-option-custom>
diff --git a/packages/main/cypress/specs/TableLoading.cy.ts b/packages/main/cypress/specs/TableLoading.cy.ts
index f0ac0e444bd0..2feeebc6c0d1 100644
--- a/packages/main/cypress/specs/TableLoading.cy.ts
+++ b/packages/main/cypress/specs/TableLoading.cy.ts
@@ -1,3 +1,4 @@
+import { html } from "lit";
 import "../../src/Table.js";
 import "../../src/TableHeaderRow.js";
 import "../../src/TableCell.js";
@@ -5,7 +6,7 @@ import "../../src/TableRow.js";
 
 describe("Table - loading", () => {
 	it("tests busy indicator is displayed", () => {
-		cy.mount(`
+		cy.mount(html`
 		<input id="before">
 		<ui5-table loading loading-delay="0">
 		<ui5-table-header-row slot="headerRow">
diff --git a/packages/main/cypress/specs/TextArea.cy.ts b/packages/main/cypress/specs/TextArea.cy.ts
index 55c6acf28798..0956cdf45262 100644
--- a/packages/main/cypress/specs/TextArea.cy.ts
+++ b/packages/main/cypress/specs/TextArea.cy.ts
@@ -1,3 +1,4 @@
+import { html } from "lit";
 import "../../src/TextArea.js";
 import "../../src/Label.js";
 
@@ -6,7 +7,7 @@ describe("TextArea general interaction", () => {
 		it("Should change the placeholder of the inner textarea", () => {
 			const attributeValue = "test";
 
-			cy.mount(`<ui5-textarea placeholder=${attributeValue}></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea placeholder=${attributeValue}></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -15,7 +16,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("Disabled attribute is propagated properly", () => {
-			cy.mount(`<ui5-textarea disabled></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea disabled></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -24,7 +25,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("Redonly attribute is propagated properly", () => {
-			cy.mount(`<ui5-textarea readonly></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea readonly></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -33,14 +34,14 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("Required attribute is propagated properly", () => {
-			cy.mount(`<ui5-textarea required></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea required></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
 				.find("textarea")
 				.should("have.attr", "aria-required", "true");
 
-			cy.mount(`<ui5-textarea></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -51,7 +52,7 @@ describe("TextArea general interaction", () => {
 		it("Value attribute is propagated properly", () => {
 			const attributeValue = "test";
 
-			cy.mount(`<ui5-textarea value=${attributeValue}></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea value=${attributeValue}></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -62,7 +63,7 @@ describe("TextArea general interaction", () => {
 		it("Tests aria-label", () => {
 			const attributeValue = "test";
 
-			cy.mount(`<ui5-textarea accessible-name=${attributeValue}></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea accessible-name=${attributeValue}></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -73,7 +74,7 @@ describe("TextArea general interaction", () => {
 		it("Tests aria-labelledby", () => {
 			const attributeValue = "test";
 
-			cy.mount(`<span id="ref">${attributeValue}</span>
+			cy.mount(html`<span id="ref">${attributeValue}</span>
 			<ui5-textarea accessible-name-ref="ref"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
@@ -83,14 +84,14 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("Checks if aria-invalid is set correctly", () => {
-			cy.mount(`<ui5-textarea value-state="Negative"></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea value-state="Negative"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
 				.find("textarea")
 				.should("have.attr", "aria-invalid", "true");
 
-			cy.mount(`<ui5-textarea value-state="Critical"></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea value-state="Critical"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -101,7 +102,7 @@ describe("TextArea general interaction", () => {
 		it("Tests aria-label is set to match the label text when label is for that text area", () => {
 			const attributeValue = "test";
 
-			cy.mount(`<ui5-label for="ref">${attributeValue}</ui5-label>
+			cy.mount(html`<ui5-label for="ref">${attributeValue}</ui5-label>
 			<ui5-textarea id="ref"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
@@ -113,7 +114,7 @@ describe("TextArea general interaction", () => {
 		it("Tests aria-label is set directly from the property accessible-name of the text-area", () => {
 			const attributeValue = "test";
 
-			cy.mount(`<ui5-label for="ref">some text</ui5-label>
+			cy.mount(html`<ui5-label for="ref">some text</ui5-label>
 			<ui5-textarea id="ref" accessible-name="${attributeValue}"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
@@ -125,7 +126,7 @@ describe("TextArea general interaction", () => {
 
 	describe("disabled and readonly textarea", () => {
 		it("can not be edited when disabled", () => {
-			cy.mount(`<ui5-textarea disabled></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea disabled></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -145,7 +146,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("can not be edited when readonly", () => {
-			cy.mount(`<ui5-textarea readonly></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea readonly></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -170,7 +171,7 @@ describe("TextArea general interaction", () => {
 
 	describe("when enabled", () => {
 		it("shows value state message", () => {
-			cy.mount(`<ui5-textarea value-state="Negative"></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea value-state="Negative"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -189,7 +190,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("does not show value state msg when valueState='None'", () => {
-			cy.mount(`<ui5-textarea value-state="None"></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea value-state="None"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -207,7 +208,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("Should not open value state message when textarea is in readonly state", () => {
-			cy.mount(`<ui5-textarea readonly value-state="Negative"></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea readonly value-state="Negative"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -225,7 +226,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("fires change event", () => {
-			cy.mount(`<ui5-textarea></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -254,7 +255,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("fires input event", () => {
-			cy.mount(`<ui5-textarea></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -282,7 +283,7 @@ describe("TextArea general interaction", () => {
 
 	describe("when growing", () => {
 		it("Should have 8 rows and grow", () => {
-			cy.mount(`<ui5-textarea growing rows="8"></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea growing rows="8"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -335,7 +336,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("Should have 8 rows and grow", () => {
-			cy.mount(`<ui5-textarea growing growing-max-rows="4"></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea growing growing-max-rows="4"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -389,7 +390,7 @@ describe("TextArea general interaction", () => {
 
 	describe("When having max length set", () => {
 		it("prevents input when max is reached", () => {
-			cy.mount(`<ui5-textarea maxlength="10"></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea maxlength="10"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -411,7 +412,7 @@ describe("TextArea general interaction", () => {
 
 		describe("When having max length set", () => {
 			it("Shows counter", () => {
-				cy.mount(`<ui5-textarea maxlength="10" show-exceeded-text></ui5-textarea>`);
+				cy.mount(html`<ui5-textarea maxlength="10" show-exceeded-text></ui5-textarea>`);
 
 				cy.get("[ui5-textarea]")
 					.as("textarea");
@@ -442,7 +443,7 @@ describe("TextArea general interaction", () => {
 			});
 
 			it("Shows exceeded text when maxLength is 0", () => {
-				cy.mount(`<ui5-textarea maxlength="0" show-exceeded-text></ui5-textarea>`);
+				cy.mount(html`<ui5-textarea maxlength="0" show-exceeded-text></ui5-textarea>`);
 
 				cy.get("[ui5-textarea]")
 					.as("textarea");
@@ -470,7 +471,7 @@ describe("TextArea general interaction", () => {
 
 	describe("Value update", () => {
 		it("Should revert the DOM value, when escape is pressed", () => {
-			cy.mount(`<ui5-textarea></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -500,7 +501,7 @@ describe("TextArea general interaction", () => {
 
 		it("Value state type should be added to the screen readers default value states announcement", () => {
 			// Negative
-			cy.mount(`<ui5-textarea value-state="Negative"></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea value-state="Negative"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -524,7 +525,7 @@ describe("TextArea general interaction", () => {
 				.should("have.text", "Value State Error Invalid entry");
 
 			// Critical
-			cy.mount(`<ui5-textarea value-state="Critical"></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea value-state="Critical"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -548,7 +549,7 @@ describe("TextArea general interaction", () => {
 				.should("have.text", "Value State Warning Warning issued");
 
 			// Critical
-			cy.mount(`<ui5-textarea value-state="Critical"></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea value-state="Critical"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -572,7 +573,7 @@ describe("TextArea general interaction", () => {
 				.should("have.text", "Value State Warning Warning issued");
 
 			// Information
-			cy.mount(`<ui5-textarea value-state="Information"></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea value-state="Information"></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -596,7 +597,7 @@ describe("TextArea general interaction", () => {
 				.should("have.text", "Value State Information Informative entry");
 
 			// Custom
-			cy.mount(`<ui5-textarea value-state="Negative">
+			cy.mount(html`<ui5-textarea value-state="Negative">
 				<div slot="valueStateMessage">Custom message</div>
 			</ui5-textarea>`);
 
@@ -625,7 +626,7 @@ describe("TextArea general interaction", () => {
 			const maxlength = 20;
 			const expectedSelectionRange = text.length - maxlength;
 
-			cy.mount(`<ui5-textarea value="${text}" maxlength="${maxlength}" show-exceeded-text></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea value="${text}" maxlength="${maxlength}" show-exceeded-text></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -660,7 +661,7 @@ describe("TextArea general interaction", () => {
 
 	describe("selection events", () => {
 		it("fires select event", () => {
-			cy.mount(`<ui5-textarea style="height: 320px; width: 400px" value="Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et. Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et."></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea style="height: 320px; width: 400px" value="Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et. Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et."></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea")
@@ -676,7 +677,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("fires select event", () => {
-			cy.mount(`<ui5-textarea style="height: 320px; width: 400px" value="Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et. Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et."></ui5-textarea>`);
+			cy.mount(html`<ui5-textarea style="height: 320px; width: 400px" value="Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et. Ipsum enim esse ipsum cupidatat ex veniam labore quis irure. Eiusmod labore anim anim nulla aute ut. Aliqua officia non ex cupidatat consequat non magna eiusmod aliquip laborum aliqua excepteur exercitation. Pariatur deserunt dolore aute sint in minim nisi magna proident proident consequat exercitation consectetur nostrud. Sint voluptate consectetur eu mollit non ullamco minim. In enim velit ea Lorem fugiat nulla esse deserunt nulla cupidatat non. Excepteur proident non ad anim enim culpa occaecat magna incididunt consequat do. Enim minim quis nisi enim est voluptate irure laborum ea cillum eu. Aliquip labore officia amet non exercitation dolore enim incididunt ullamco irure nulla ad nulla et."></ui5-textarea>`);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea")
diff --git a/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts b/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts
index d8b152ab55f6..2a8bb8c115ed 100644
--- a/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts
+++ b/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts
@@ -1,9 +1,10 @@
+import { html } from "lit";
 import "../../../src/Label.js";
 import "../../../src/Input.js";
 
 describe("AriaLabelHelper", () => {
 	it("Label-for tests", () => {
-		cy.mount(`
+		cy.mount(html`
 			<ui5-input id="myInput" placeholder="input placeholder" class="field"></ui5-input>
 			<ui5-label id="lblDesc1" for="myInput">Desc1</ui5-label>
 			<ui5-label id="lblDesc2" for="myInput">Desc2</ui5-label>
@@ -32,7 +33,7 @@ describe("AriaLabelHelper", () => {
 	});
 
 	it("Input accessibleNameRef Tests", () => {
-		cy.mount(`
+		cy.mount(html`
             <ui5-label id="lblEnterName1">FirstDesc</ui5-label>
             <ui5-label id="lblEnterName2">SecondDesc</ui5-label>
             <ui5-label id="lblEnterName3">ThirdDesc</ui5-label>
@@ -79,7 +80,7 @@ describe("AriaLabelHelper", () => {
 	});
 
 	it("Input accessibleName and accessibleNameRef Tests", () => {
-		cy.mount(`
+		cy.mount(html`
 			<ui5-label id="lblEnterDesc1" for="inputEnterDesc">Label for inputEnterDesc</ui5-label>
 			<ui5-label id="lblEnterDesc3">Label to be added/removed as accessible-name-ref</ui5-label>
 			<ui5-input id="inputEnterDesc" accessible-name="Some description added by accessibleName" placeholder="Enter description"></ui5-input>
@@ -156,7 +157,7 @@ describe("AriaLabelHelper", () => {
 	});
 
 	it("Three inputs with same label accessibleNameRef Tests", () => {
-		cy.mount(`
+		cy.mount(html`
 			<ui5-label id="lblTestDesc" for="testInput1">Label for testInput1 Desc</ui5-label>
 			<ui5-input id="testInput1" placeholder="Enter description1"></ui5-input>
 			<ui5-input id="testInput2" accessible-name-ref="lblTestDesc" accessible-name="Hello" placeholder="Enter description2"></ui5-input>
@@ -234,7 +235,7 @@ describe("AriaLabelHelper", () => {
 	});
 
 	it("Tests generic html elements with for attribute", () => {
-		cy.mount(`
+		cy.mount(html`
 			<label id="elId1" for="myInput2">Desc1</label>
 			<label id="elId2" for="myInput2">Desc2</label>
 			<ui5-input id="myInput2" placeholder="input placeholder"></ui5-input>
diff --git a/packages/main/cypress/specs/base/Events.cy.ts b/packages/main/cypress/specs/base/Events.cy.ts
index 169463c072c8..667e386415d2 100644
--- a/packages/main/cypress/specs/base/Events.cy.ts
+++ b/packages/main/cypress/specs/base/Events.cy.ts
@@ -1,3 +1,4 @@
+import { html } from "lit";
 import "../../../src/Dialog.js";
 import "../../../src/Select.js";
 import "../../../src/Option.js";
@@ -11,7 +12,7 @@ import "../../../src/Label.js";
 
 describe("Event bubbling", () => {
 	it("test bubbling events", () => {
-		cy.mount(`
+		cy.mount(html`
 			<div id="app">
 				<ui5-dialog id="myDialog" header-text="Dialog">
 					<ui5-input id="myInput" show-suggestions>
@@ -116,14 +117,14 @@ describe("Event bubbling", () => {
 	});
 
 	it("test non-bubbling events", () => {
-		cy.mount(`
+		cy.mount(html`
 			<div id="app">
 				<ui5-dialog id="myDialog" header-text="Dialog">
 					<ui5-select id="mySelect">
 						<ui5-option>Hello</ui5-option>
 						<ui5-option>World</ui5-option>
 						<ui5-option>Hello</ui5-option>
-					</ui5-select>
+					</ui5-select>					
 				</ui5-dialog>
 			</div>
 		`);
@@ -171,7 +172,7 @@ describe("Event bubbling", () => {
 	});
 
 	it("test cancelable events", () => {
-		cy.mount(`
+		cy.mount(html`
 			<div id="app">
 				<ui5-checkbox id="cb"></ui5-checkbox>
 				<ui5-checkbox id="cb2"></ui5-checkbox>
diff --git a/packages/main/cypress/specs/base/IconCollection.cy.ts b/packages/main/cypress/specs/base/IconCollection.cy.ts
index e7b1ad75ff52..2716fa411083 100644
--- a/packages/main/cypress/specs/base/IconCollection.cy.ts
+++ b/packages/main/cypress/specs/base/IconCollection.cy.ts
@@ -1,6 +1,7 @@
 import "./css/redfish.custom.theme.css";
 import getEffectiveIconCollection from "@ui5/webcomponents-base/dist/asset-registries/util/getIconCollectionByTheme.js";
 import { setTheme, isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
+import { html } from "lit";
 import "../../../src/Assets.js";
 import "../../../src/Icon.js";
 
@@ -11,7 +12,7 @@ describe("Icon collection", () => {
 	});
 
 	it("tests the icon collection in built-in themes", () => {
-		cy.mount(`<ui5-icon name="home"></ui5-icon>`);
+		cy.mount(html`<ui5-icon name="home"></ui5-icon>`);
 
 		cy.wrap({ getEffectiveIconCollection })
 			.invoke("getEffectiveIconCollection")
@@ -36,7 +37,7 @@ describe("Icon collection", () => {
 	});
 
 	it("tests the icon collection in built-in themes", () => {
-		cy.mount(`<ui5-icon name="home"></ui5-icon>`);
+		cy.mount(html`<ui5-icon name="home"></ui5-icon>`);
 
 		// act
 		cy.wrap({ setTheme })
diff --git a/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts b/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts
index b3520199a83e..a807a40e7090 100644
--- a/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts
+++ b/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts
@@ -1,3 +1,4 @@
+import { html } from "lit";
 import "../../../src/Card.js";
 import "../../../src/CardHeader.js";
 
@@ -8,7 +9,7 @@ ignoreCustomElements("my-");
 
 describe("Ignore Custom Elements", () => {
 	it("tests shouldIgnoreCustomElement method", () => {
-		cy.mount(`<ui5-card>
+		cy.mount(html`<ui5-card>
 		<ui5-card-header
 			slot="header"
 			status="4 of 10"
diff --git a/packages/main/cypress/specs/base/Tooltips.cy.ts b/packages/main/cypress/specs/base/Tooltips.cy.ts
index 0a1b62e6b562..7428088e6fa4 100644
--- a/packages/main/cypress/specs/base/Tooltips.cy.ts
+++ b/packages/main/cypress/specs/base/Tooltips.cy.ts
@@ -1,4 +1,5 @@
 import { setEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
+import { html } from "lit";
 import "../../../src/Icon.js";
 import "../../../src/Button.js";
 import "../../../src/ToggleButton.js";
@@ -10,7 +11,7 @@ setEnableDefaultTooltips(false);
 
 describe("Default Tooltips", () => {
 	it("tests navigation", () => {
-		cy.mount(`
+		cy.mount(html`
 	<ui5-icon id="ic" name="settings"></ui5-icon>
 	<ui5-button id="btn" icon="settings"></ui5-button>
 	<ui5-rating-indicator id="rt" icon="settings"></ui5-rating-indicator>

From a09141f03d942fa9b796f4cab0bea01e21c95049 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Tue, 22 Oct 2024 10:20:05 +0300
Subject: [PATCH 10/11] chore: test

---
 packages/testing/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/testing/package.json b/packages/testing/package.json
index 7a3d8f2de249..08ac2de8700a 100644
--- a/packages/testing/package.json
+++ b/packages/testing/package.json
@@ -25,6 +25,7 @@
     "eslint-plugin-cypress": "^3.4.0",
     "vite": "^5.4.8",
     "cypress-ct-lit": "^0.5.0",
-    "@cypress/mount-utils": "^4.0.0"
+    "@cypress/mount-utils": "^4.0.0",
+    "lit": "^2.0.0"
   }
 }

From 5c2e8cd5ddc79b186d440dc0bc42c0507b84248f Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <nnaydenow.work@gmail.com>
Date: Tue, 22 Oct 2024 10:58:25 +0300
Subject: [PATCH 11/11] chore: test

---
 .../fiori/cypress/specs/BarcodeScannerDialog.cy.ts |  2 +-
 packages/fiori/cypress/specs/FCL.cy.ts             |  2 +-
 packages/fiori/cypress/specs/Page.cy.ts            |  2 +-
 packages/fiori/package.json                        |  3 ++-
 packages/main/cypress/specs/Button.cy.ts           |  2 +-
 packages/main/cypress/specs/Eventing.cy.ts         |  2 +-
 packages/main/cypress/specs/F6.cy.ts               |  2 +-
 packages/main/cypress/specs/Form.cy.ts             |  2 +-
 packages/main/cypress/specs/FormSupport.cy.ts      |  2 +-
 packages/main/cypress/specs/List.cy.ts             |  2 +-
 packages/main/cypress/specs/LitKeyFunction.cy.ts   |  2 +-
 packages/main/cypress/specs/Menu.cy.ts             |  2 +-
 packages/main/cypress/specs/RTL.cy.ts              |  2 +-
 .../cypress/specs/ResponsivePopover.mobile.cy.ts   |  2 +-
 packages/main/cypress/specs/Select.cy.ts           |  2 +-
 packages/main/cypress/specs/TableLoading.cy.ts     |  2 +-
 packages/main/cypress/specs/TextArea.cy.ts         |  2 +-
 .../main/cypress/specs/base/AriaLabelHelper.cy.ts  |  2 +-
 packages/main/cypress/specs/base/Events.cy.ts      |  4 ++--
 .../main/cypress/specs/base/IconCollection.cy.ts   |  2 +-
 .../cypress/specs/base/IgnoreCustomElements.cy.ts  |  2 +-
 packages/main/cypress/specs/base/Tooltips.cy.ts    |  2 +-
 packages/main/package.json                         |  3 ++-
 packages/testing/package.json                      |  3 +--
 packages/testing/src/cypress/support/commands.js   |  5 -----
 yarn.lock                                          | 14 +++++++-------
 26 files changed, 34 insertions(+), 38 deletions(-)

diff --git a/packages/fiori/cypress/specs/BarcodeScannerDialog.cy.ts b/packages/fiori/cypress/specs/BarcodeScannerDialog.cy.ts
index e87df3fb908a..5c615e82ac47 100644
--- a/packages/fiori/cypress/specs/BarcodeScannerDialog.cy.ts
+++ b/packages/fiori/cypress/specs/BarcodeScannerDialog.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "@ui5/webcomponents-icons/dist/camera.js";
 import "../../src/BarcodeScannerDialog.js";
 import type BarcodeScannerDialog from "../../src/BarcodeScannerDialog.js";
diff --git a/packages/fiori/cypress/specs/FCL.cy.ts b/packages/fiori/cypress/specs/FCL.cy.ts
index 87239036a149..dd0757917d2d 100644
--- a/packages/fiori/cypress/specs/FCL.cy.ts
+++ b/packages/fiori/cypress/specs/FCL.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import "../../src/FlexibleColumnLayout.js";
 
diff --git a/packages/fiori/cypress/specs/Page.cy.ts b/packages/fiori/cypress/specs/Page.cy.ts
index 8f4fd9b2a6a8..97dafeff6bfb 100644
--- a/packages/fiori/cypress/specs/Page.cy.ts
+++ b/packages/fiori/cypress/specs/Page.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Page.js";
 import "@ui5/webcomponents/dist/Bar.js";
 import "@ui5/webcomponents/dist/Button.js";
diff --git a/packages/fiori/package.json b/packages/fiori/package.json
index 6540409309be..26566fd0e268 100644
--- a/packages/fiori/package.json
+++ b/packages/fiori/package.json
@@ -62,6 +62,7 @@
   "devDependencies": {
     "@ui5/webcomponents-tools": "2.4.0-rc.1",
     "@ui5/webcomponents-testing": "0.0.0",
-    "chromedriver": "^128.0.3"
+    "chromedriver": "^128.0.3",
+    "lit-html": "^2.0.0"
   }
 }
diff --git a/packages/main/cypress/specs/Button.cy.ts b/packages/main/cypress/specs/Button.cy.ts
index 2a6673582d60..b23de46b26be 100644
--- a/packages/main/cypress/specs/Button.cy.ts
+++ b/packages/main/cypress/specs/Button.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Button.js";
 import type Button from "../../src/Button.js";
 import "@ui5/webcomponents-icons/dist/download.js";
diff --git a/packages/main/cypress/specs/Eventing.cy.ts b/packages/main/cypress/specs/Eventing.cy.ts
index 2f4f1886e4ba..55db5c6db187 100644
--- a/packages/main/cypress/specs/Eventing.cy.ts
+++ b/packages/main/cypress/specs/Eventing.cy.ts
@@ -1,4 +1,4 @@
-// import { html } from "lit";
+// import { html } from "lit-html";
 import "../../src/Button.js";
 
 describe("Eventing", () => {
diff --git a/packages/main/cypress/specs/F6.cy.ts b/packages/main/cypress/specs/F6.cy.ts
index 31ae4d7b5e8d..107d001c1bf5 100644
--- a/packages/main/cypress/specs/F6.cy.ts
+++ b/packages/main/cypress/specs/F6.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
 import "../../src/Button.js";
 
diff --git a/packages/main/cypress/specs/Form.cy.ts b/packages/main/cypress/specs/Form.cy.ts
index 2519abcf643d..4b307cfd9116 100644
--- a/packages/main/cypress/specs/Form.cy.ts
+++ b/packages/main/cypress/specs/Form.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Form.js";
 import "../../src/FormItem.js";
 import "../../src/FormGroup.js";
diff --git a/packages/main/cypress/specs/FormSupport.cy.ts b/packages/main/cypress/specs/FormSupport.cy.ts
index cbd3c4664bbf..b4ea49880338 100644
--- a/packages/main/cypress/specs/FormSupport.cy.ts
+++ b/packages/main/cypress/specs/FormSupport.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Button.js";
 import "../../src/CheckBox.js";
 import "../../src/ColorPicker.js";
diff --git a/packages/main/cypress/specs/List.cy.ts b/packages/main/cypress/specs/List.cy.ts
index 343e721ee48b..6c4f25368b03 100644
--- a/packages/main/cypress/specs/List.cy.ts
+++ b/packages/main/cypress/specs/List.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/List.js";
 import type List from "../../src/List.js";
 
diff --git a/packages/main/cypress/specs/LitKeyFunction.cy.ts b/packages/main/cypress/specs/LitKeyFunction.cy.ts
index 367b47cf0609..36ceb74cbd5c 100644
--- a/packages/main/cypress/specs/LitKeyFunction.cy.ts
+++ b/packages/main/cypress/specs/LitKeyFunction.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/MultiComboBox.js";
 import "../../src/MultiComboBoxItem.js";
 
diff --git a/packages/main/cypress/specs/Menu.cy.ts b/packages/main/cypress/specs/Menu.cy.ts
index 0c76d2bc781e..65feac950ae5 100644
--- a/packages/main/cypress/specs/Menu.cy.ts
+++ b/packages/main/cypress/specs/Menu.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Button.js";
 import "../../src/Menu.js";
 import "../../src/MenuItem.js";
diff --git a/packages/main/cypress/specs/RTL.cy.ts b/packages/main/cypress/specs/RTL.cy.ts
index 95cf8a30d28e..f93e74ba86b0 100644
--- a/packages/main/cypress/specs/RTL.cy.ts
+++ b/packages/main/cypress/specs/RTL.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/CheckBox.js";
 
 describe("RTL", () => {
diff --git a/packages/main/cypress/specs/ResponsivePopover.mobile.cy.ts b/packages/main/cypress/specs/ResponsivePopover.mobile.cy.ts
index 6531663b9df1..a15387659c2f 100644
--- a/packages/main/cypress/specs/ResponsivePopover.mobile.cy.ts
+++ b/packages/main/cypress/specs/ResponsivePopover.mobile.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/ResponsivePopover.js";
 import "../../src/Button.js";
 import "../../src/Input.js";
diff --git a/packages/main/cypress/specs/Select.cy.ts b/packages/main/cypress/specs/Select.cy.ts
index e1d6214ff55b..771ec7e47773 100644
--- a/packages/main/cypress/specs/Select.cy.ts
+++ b/packages/main/cypress/specs/Select.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Select.js";
 import "../../src/Option.js";
 import "../../src/OptionCustom.js";
diff --git a/packages/main/cypress/specs/TableLoading.cy.ts b/packages/main/cypress/specs/TableLoading.cy.ts
index 2feeebc6c0d1..9e882b1f7823 100644
--- a/packages/main/cypress/specs/TableLoading.cy.ts
+++ b/packages/main/cypress/specs/TableLoading.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Table.js";
 import "../../src/TableHeaderRow.js";
 import "../../src/TableCell.js";
diff --git a/packages/main/cypress/specs/TextArea.cy.ts b/packages/main/cypress/specs/TextArea.cy.ts
index 0956cdf45262..6bae585fee7e 100644
--- a/packages/main/cypress/specs/TextArea.cy.ts
+++ b/packages/main/cypress/specs/TextArea.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/TextArea.js";
 import "../../src/Label.js";
 
diff --git a/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts b/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts
index 2a8bb8c115ed..9f2392eedeea 100644
--- a/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts
+++ b/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../../src/Label.js";
 import "../../../src/Input.js";
 
diff --git a/packages/main/cypress/specs/base/Events.cy.ts b/packages/main/cypress/specs/base/Events.cy.ts
index 667e386415d2..52c9f6ea26a4 100644
--- a/packages/main/cypress/specs/base/Events.cy.ts
+++ b/packages/main/cypress/specs/base/Events.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../../src/Dialog.js";
 import "../../../src/Select.js";
 import "../../../src/Option.js";
@@ -124,7 +124,7 @@ describe("Event bubbling", () => {
 						<ui5-option>Hello</ui5-option>
 						<ui5-option>World</ui5-option>
 						<ui5-option>Hello</ui5-option>
-					</ui5-select>					
+					</ui5-select>
 				</ui5-dialog>
 			</div>
 		`);
diff --git a/packages/main/cypress/specs/base/IconCollection.cy.ts b/packages/main/cypress/specs/base/IconCollection.cy.ts
index 2716fa411083..503d25237d78 100644
--- a/packages/main/cypress/specs/base/IconCollection.cy.ts
+++ b/packages/main/cypress/specs/base/IconCollection.cy.ts
@@ -1,7 +1,7 @@
 import "./css/redfish.custom.theme.css";
 import getEffectiveIconCollection from "@ui5/webcomponents-base/dist/asset-registries/util/getIconCollectionByTheme.js";
 import { setTheme, isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../../src/Assets.js";
 import "../../../src/Icon.js";
 
diff --git a/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts b/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts
index a807a40e7090..8cb06c88bc8a 100644
--- a/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts
+++ b/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../../src/Card.js";
 import "../../../src/CardHeader.js";
 
diff --git a/packages/main/cypress/specs/base/Tooltips.cy.ts b/packages/main/cypress/specs/base/Tooltips.cy.ts
index 7428088e6fa4..48e0233b0f61 100644
--- a/packages/main/cypress/specs/base/Tooltips.cy.ts
+++ b/packages/main/cypress/specs/base/Tooltips.cy.ts
@@ -1,5 +1,5 @@
 import { setEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../../src/Icon.js";
 import "../../../src/Button.js";
 import "../../../src/ToggleButton.js";
diff --git a/packages/main/package.json b/packages/main/package.json
index 678ed4b00ccc..ba0c77e6e366 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -60,6 +60,7 @@
   "devDependencies": {
     "@ui5/webcomponents-tools": "2.4.0-rc.1",
     "@ui5/webcomponents-testing": "0.0.0",
-    "chromedriver": "^128.0.3"
+    "chromedriver": "^128.0.3",
+    "lit-html": "^2.0.0"
   }
 }
diff --git a/packages/testing/package.json b/packages/testing/package.json
index 08ac2de8700a..7a3d8f2de249 100644
--- a/packages/testing/package.json
+++ b/packages/testing/package.json
@@ -25,7 +25,6 @@
     "eslint-plugin-cypress": "^3.4.0",
     "vite": "^5.4.8",
     "cypress-ct-lit": "^0.5.0",
-    "@cypress/mount-utils": "^4.0.0",
-    "lit": "^2.0.0"
+    "@cypress/mount-utils": "^4.0.0"
   }
 }
diff --git a/packages/testing/src/cypress/support/commands.js b/packages/testing/src/cypress/support/commands.js
index 8848759e7444..bde1a0904eed 100644
--- a/packages/testing/src/cypress/support/commands.js
+++ b/packages/testing/src/cypress/support/commands.js
@@ -38,7 +38,6 @@
 
 import "cypress-real-events";
 import { setupHooks } from '@cypress/mount-utils';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
 import { mount } from 'cypress-ct-lit'
 
 let dispose;
@@ -60,10 +59,6 @@ function ui5Mount(component, options = {}) {
 		configurationScript.innerHTML = "{}";
 	}
 
-	if (typeof component === "string") {
-		return mount(unsafeHTML(component), options)
-	}
-
 	return mount(component, options)
 }
 
diff --git a/yarn.lock b/yarn.lock
index 025ad8a7cfa7..5e6a93d19bb4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11425,6 +11425,13 @@ lit-element@^3.3.0:
     "@lit/reactive-element" "^1.3.0"
     lit-html "^2.7.0"
 
+lit-html@^2.0.0, lit-html@^2.8.0:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.8.0.tgz#96456a4bb4ee717b9a7d2f94562a16509d39bffa"
+  integrity sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+
 lit-html@^2.0.1, lit-html@^2.7.0:
   version "2.7.5"
   resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.7.5.tgz#0c1b9d381abe20c01475ae53ea4b07bf4c923eb8"
@@ -11432,13 +11439,6 @@ lit-html@^2.0.1, lit-html@^2.7.0:
   dependencies:
     "@types/trusted-types" "^2.0.2"
 
-lit-html@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.8.0.tgz#96456a4bb4ee717b9a7d2f94562a16509d39bffa"
-  integrity sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==
-  dependencies:
-    "@types/trusted-types" "^2.0.2"
-
 lit@^2.0.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/lit/-/lit-2.8.0.tgz#4d838ae03059bf9cafa06e5c61d8acc0081e974e"