@ui5/webcomponents-base 0.0.0-f42e7c18c → 0.0.0-f6676abdd

package/CHANGELOG.md

@@ -3,6 +3,165 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.8.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.8.0-rc.0...v2.8.0-rc.1) (2025-02-13)
+
+
+### Bug Fixes
+
+* **ui5-table:** update select all checkbox ([#10833](https://github.com/SAP/ui5-webcomponents/issues/10833)) ([819edcd](https://github.com/SAP/ui5-webcomponents/commit/819edcd51b04d60634fa8faa8f5c6b256eac99f5)), closes [#10658](https://github.com/SAP/ui5-webcomponents/issues/10658) [#10574](https://github.com/SAP/ui5-webcomponents/issues/10574) [#10804](https://github.com/SAP/ui5-webcomponents/issues/10804)
+
+
+
+
+
+# [2.8.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0...v2.8.0-rc.0) (2025-02-06)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
+# [2.7.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.2...v2.7.0) (2025-02-03)
+
+
+### Bug Fixes
+
+* **framework:** improve check for native popovers ([#10745](https://github.com/SAP/ui5-webcomponents/issues/10745)) ([f21f9b8](https://github.com/SAP/ui5-webcomponents/commit/f21f9b8835c7081235acc79d067b6e0a77feccbd))
+
+
+
+
+
+# [2.7.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.1...v2.7.0-rc.2) (2025-01-30)
+
+
+### Bug Fixes
+
+* **f6navigation:** fast navigation in certain container only ([#10485](https://github.com/SAP/ui5-webcomponents/issues/10485)) ([4b2ab63](https://github.com/SAP/ui5-webcomponents/commit/4b2ab63cae9b175f07d266e4150a587756cd7f6c))
+
+
+
+
+
+# [2.7.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.0...v2.7.0-rc.1) (2025-01-23)
+
+
+### Features
+
+* **ui5-color-picker:** add HSL color selection ([#10157](https://github.com/SAP/ui5-webcomponents/issues/10157)) ([8d0e5a4](https://github.com/SAP/ui5-webcomponents/commit/8d0e5a492c9705499571ef223524f051454e766c)), closes [#10275](https://github.com/SAP/ui5-webcomponents/issues/10275)
+
+
+
+
+
+# [2.7.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2...v2.7.0-rc.0) (2025-01-16)
+
+
+### Bug Fixes
+
+* i18n decorator property definition ([#10521](https://github.com/SAP/ui5-webcomponents/issues/10521)) ([d19f4e9](https://github.com/SAP/ui5-webcomponents/commit/d19f4e99bad74432bff21587da43a5844f17f8cf))
+* **ui5-popover:** fix opener reference ([#10507](https://github.com/SAP/ui5-webcomponents/issues/10507)) ([a38a28e](https://github.com/SAP/ui5-webcomponents/commit/a38a28e11245e0121bd0a2d6b9d1f5b294952a42))
+
+
+
+
+
+## [2.6.2](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2-rc.0...v2.6.2) (2025-01-09)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
+## [2.6.2-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.1...v2.6.2-rc.0) (2025-01-09)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
+## [2.6.1](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0...v2.6.1) (2025-01-08)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
+# [2.6.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.5...v2.6.0) (2025-01-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
+# [2.6.0-rc.5](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.4...v2.6.0-rc.5) (2025-01-07)
+
+
+### Bug Fixes
+
+* **f6navigation:** skip hidden elements ([#10325](https://github.com/SAP/ui5-webcomponents/issues/10325)) ([374d4d8](https://github.com/SAP/ui5-webcomponents/commit/374d4d82239f1309231c8516c20be8c160e81e40)), closes [#10236](https://github.com/SAP/ui5-webcomponents/issues/10236)
+* **framework:** getComponentFeature can return undefined ([#10456](https://github.com/SAP/ui5-webcomponents/issues/10456)) ([7da765c](https://github.com/SAP/ui5-webcomponents/commit/7da765c8c7f3831e25bffa557dd059e819be30ba))
+* remove dependencies for TSX components and fix features ([#10449](https://github.com/SAP/ui5-webcomponents/issues/10449)) ([a2b5f6f](https://github.com/SAP/ui5-webcomponents/commit/a2b5f6fb768499a8b757a9b7abad5f19033a33a7))
+
+
+
+
+
+# [2.6.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.3...v2.6.0-rc.4) (2025-01-02)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
+# [2.6.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.2...v2.6.0-rc.3) (2024-12-26)
+
+
+### Bug Fixes
+
+* custom theme detection ([#10410](https://github.com/SAP/ui5-webcomponents/issues/10410)) ([303344b](https://github.com/SAP/ui5-webcomponents/commit/303344bc22dbe5a461b77d752b11016cbbe137b1))
+
+
+
+
+
+# [2.6.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.1...v2.6.0-rc.2) (2024-12-19)
+
+
+### Features
+
+* **ui5-color-palette:** set selected color to inner color picker ([#10276](https://github.com/SAP/ui5-webcomponents/issues/10276)) ([7a152a1](https://github.com/SAP/ui5-webcomponents/commit/7a152a1dc0defcb031d859012f4310ca5c52bee4)), closes [#8772](https://github.com/SAP/ui5-webcomponents/issues/8772)
+
+
+
+
+
+# [2.6.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.6.0-rc.0...v2.6.0-rc.1) (2024-12-16)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
+# [2.6.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0...v2.6.0-rc.0) (2024-12-12)
+
+
+### Features
+
+* **framework:** add JSX template support with TypeScript ([#10046](https://github.com/SAP/ui5-webcomponents/issues/10046)) ([f42e7c1](https://github.com/SAP/ui5-webcomponents/commit/f42e7c18c846f923df4fec6ae02f1b4c20c006fa))
+* **ui5-table:** implement drag and drop ([#9955](https://github.com/SAP/ui5-webcomponents/issues/9955)) ([9f27a51](https://github.com/SAP/ui5-webcomponents/commit/9f27a512255f6e168d783cfed8b60d578030b581)), closes [#7240](https://github.com/SAP/ui5-webcomponents/issues/7240)
+
+
+
+
+
 # [2.5.0](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.3...v2.5.0) (2024-12-05)
 
 **Note:** Version bump only for package @ui5/webcomponents-base

package/cypress/specs/{Accessor.cy.ts → Accessor.cy.tsx}

@@ -1,8 +1,8 @@
-import "../../test/test-elements/Accessor.js";
+import Accessor from "../../test/test-elements/Accessor.js";
 
 describe("Framework boot", () => {
 	it("Setting property updates attribute, state and DOM", () => {
-		cy.mount(`<ui5-test-accessor></ui5-test-accessor>`);
+		cy.mount(<Accessor></Accessor>);
 
 		cy.get("[ui5-test-accessor]")
 			.as("testAccessor")
@@ -36,7 +36,7 @@ describe("Framework boot", () => {
 	});
 
 	it("Setting attribute updates property, state and DOM", () => {
-		cy.mount(`<ui5-test-accessor></ui5-test-accessor>`);
+		cy.mount(<Accessor></Accessor>);
 
 		cy.get("[ui5-test-accessor]")
 			.as("testAccessor")
@@ -70,7 +70,7 @@ describe("Framework boot", () => {
 	});
 
 	it("should stop searching for accessors when HTMLElement is reached", () => {
-		cy.mount(`<ui5-test-accessor></ui5-test-accessor>`);
+		cy.mount(<Accessor></Accessor>);
 
 		cy.get("[ui5-test-accessor]")
 			.invoke("prop", "title")

package/cypress/specs/{Boot.cy.ts → Boot.cy.tsx}

@@ -9,11 +9,7 @@ describe("Framework boot", () => {
 
 		cy.wrap({ registerThemePropertiesLoader })
 			.invoke("registerThemePropertiesLoader", "@ui5/webcomponents-theming", "sap_horizon", () => {
-				return Promise.resolve({
-					content: `:root{ --customCol: #fff; --customBg: #000; }`,
-					packageName: "",
-					fileName: "",
-				});
+				return Promise.resolve(`:root{ --customCol: #fff; --customBg: #000; }`);
 			});
 
 		cy.wrap({ hasStyle })

package/cypress/specs/{ConfigurationScript.cy.ts → ConfigurationScript.cy.tsx}

@@ -1,6 +1,7 @@
 import { getAnimationMode } from "../../src/config/AnimationMode.js";
 import { getCalendarType } from "../../src/config/CalendarType.js";
 import { getDefaultFontLoading } from "../../src/config/Fonts.js";
+import TestGeneric from "../../test/test-elements/Generic.js";
 import { getFirstDayOfWeek, getLegacyDateCalendarCustomizing } from "../../src/config/FormatSettings.js";
 import { getLanguage } from "../../src/config/Language.js";
 import { getNoConflict } from "../../src/config/NoConflict.js";
@@ -43,7 +44,7 @@ describe("Configuration script", () => {
 	};
 
 	before(() => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`, {
+		cy.mount(<TestGeneric />, {
 			ui5Configuration: configurationObject,
 		});
 

package/cypress/specs/{ConfigurationURL.cy.ts → ConfigurationURL.cy.tsx}

@@ -1,5 +1,5 @@
 import { internals } from "../../src/Location.js";
-import "../../test/test-elements/Generic.js";
+import TestGeneric from "../../test/test-elements/Generic.js";
 import { resetConfiguration } from "../../src/InitialConfiguration.js";
 import { getLanguage } from "../../src/config/Language.js";
 import { getCalendarType } from "../../src/config/CalendarType.js";
@@ -23,7 +23,7 @@ describe("Some settings can be set via SAP UI URL params", () => {
 			.invoke("search")
 			.should("be.equal", searchParams);
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 	});
 
 	it("Tests that language is applied", () => {
@@ -66,7 +66,7 @@ describe("Different themeRoot configurations", () => {
 			.invoke("search")
 			.should("be.equal", searchParams);
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 
 		cy.wrap({ getThemeRoot })
 			.invoke("getThemeRoot")
@@ -87,7 +87,7 @@ describe("Different themeRoot configurations", () => {
 			.invoke("search")
 			.should("be.equal", searchParams);
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 
 		cy.wrap({ getThemeRoot })
 			.invoke("getThemeRoot")
@@ -108,7 +108,7 @@ describe("Different themeRoot configurations", () => {
 			.invoke("search")
 			.should("be.equal", searchParams);
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 
 		cy.wrap({ getThemeRoot })
 			.invoke("getThemeRoot")
@@ -134,7 +134,7 @@ describe("Some settings can be set via SAP URL params", () => {
 			.invoke("search")
 			.should("be.equal", searchParams);
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 	});
 
 	it("Tests that language is applied via sap-ui-language", () => {
@@ -165,7 +165,7 @@ describe("Some settings can be set via SAP UI URL params", () => {
 			.invoke("search")
 			.should("be.equal", searchParams);
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 	});
 
 	it("Tests that language is applied via sap-ui-language", () => {

package/cypress/specs/{CustomMount.cy.ts → CustomMount.cy.tsx}

@@ -2,7 +2,7 @@ import { getAnimationMode } from "../../src/config/AnimationMode.js";
 
 describe("Custom mount", () => {
 	it("mount", () => {
-		cy.mount(`<button>Test</button>`);
+		cy.mount(<button>Test</button>);
 
 		cy.get("button")
 			.should("exist")
@@ -12,7 +12,7 @@ describe("Custom mount", () => {
 	it("mount with configuration", () => {
 		const configurationObject = { "animationMode": "basic" };
 
-		cy.mount(`<button>Test with configuration</button>`, {
+		cy.mount(<button>Test with configuration</button>, {
 			ui5Configuration: configurationObject,
 		});
 

package/cypress/specs/{CustomTheme.cy.ts → CustomTheme.cy.tsx}

@@ -1,7 +1,7 @@
 import { registerThemePropertiesLoader } from "../../src/AssetRegistry.js";
 import { setTheme } from "../../src/config/Theme.js";
 import { getCurrentRuntimeIndex } from "../../src/Runtimes.js";
-import "../../test/test-elements/Generic.js";
+import TestGeneric from "../../test/test-elements/Generic.js";
 
 describe("Custom themes can be registered", () => {
 	it("Tests that theme parameters are changed on theme change", () => {
@@ -10,7 +10,7 @@ describe("Custom themes can be registered", () => {
 		const currentRuntime = 0;
 		const dataPropAttr = `data-ui5-component-properties-${currentRuntime}`;
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 
 		cy.wrap({ getCurrentRuntimeIndex })
 			.invoke("getCurrentRuntimeIndex")

package/cypress/specs/{UI5ElementInvalidation.cy.ts → UI5ElementInvalidation.cy.tsx}

@@ -1,9 +1,14 @@
 import type UI5Element from "../../src/UI5Element.js";
-import "../../test/test-elements/Generic.js";
+import Generic from "../../test/test-elements/Generic.js";
 
 describe("Invalidation works", () => {
 	it("Tests that changing a property invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
@@ -22,10 +27,15 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that setting a property to the same value does not invalidate", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		const text = "new value";
 
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
+
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
 			.invoke("prop", "strProp", text)
@@ -41,11 +51,16 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that setting a property of type Object always invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		const obj = {};
 		const otherObj = {};
 
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
+
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
 			.invoke("prop", "objectProp", obj)
@@ -61,11 +76,16 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that setting an array property always invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		const arr: Array<string> = [];
 		const otherArr: Array<string> = [];
 
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
+
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
 			.invoke("prop", "multiProp", arr)
@@ -81,7 +101,12 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that adding a child invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
@@ -100,10 +125,15 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that removing a child invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		const div = document.createElement("div");
 
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
+
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
 			.then($testGeneric => {
@@ -128,7 +158,12 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that modifying textContent invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
@@ -154,7 +189,12 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that modifying nodeValue invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
@@ -180,7 +220,12 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that multiple invalidations result in a single rendering", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");

package/cypress/specs/{UI5ElementLifecycle.cy.ts → UI5ElementLifecycle.cy.tsx}

@@ -1,11 +1,11 @@
 import type UI5Element from "../../src/UI5Element.js";
-import "../../test/test-elements/Generic.js";
+import Generic from "../../test/test-elements/Generic.js";
 
 describe("Lifecycle works", () => {
 	it("Tests that changing a property invalidates", () => {
 		const el = document.createElement("ui5-test-generic");
 
-		cy.mount(`<div id="container"></div>`);
+		cy.mount(<div id="container"></div>);
 
 		cy.spy<UI5Element>((el as UI5Element), "onBeforeRendering").as("onBeforeRendering");
 
@@ -32,7 +32,7 @@ describe("Lifecycle works", () => {
 	});
 
 	it("Tests element invalidation callbacks", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
@@ -56,7 +56,7 @@ describe("Lifecycle works", () => {
 	it("Tests element destruction callback", () => {
 		const el = document.createElement("ui5-test-generic");
 
-		cy.mount(`<div id="container"></div>`);
+		cy.mount(<div id="container"></div>);
 
 		cy.spy<UI5Element>((el as UI5Element), "onExitDOM").as("onExitDOM");
 		cy.spy<UI5Element>((el as UI5Element), "onEnterDOM").as("onEnterDOM");

package/cypress/specs/{UI5ElementListenForChildPropChanges.cy.ts → UI5ElementListenForChildPropChanges.cy.tsx}

@@ -1,13 +1,20 @@
 import type UI5Element from "../../src/UI5Element.js";
 
-import "../../test/test-elements/Parent.js";
-import "../../test/test-elements/Child.js";
+import Parent from "../../test/test-elements/Parent.js";
+import Child from "../../test/test-elements/Child.js";
 
 describe("Invalidation works", () => {
 	it("Tests that changing a monitored property of a child invalidates the parent", () => {
-		cy.mount(`<ui5-test-parent>
-		<ui5-test-child></ui5-test-child>
-	</ui5-test-parent>`);
+		cy.mount(
+			<Parent>
+				<Child></Child>
+			</Parent>
+		);
+
+		cy.get<Parent>("[ui5-test-parent]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-parent]")
 			.as("testParent")
@@ -23,9 +30,16 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that changing a non-monitored property of a child does not invalidate the parent", () => {
-		cy.mount(`<ui5-test-parent>
-		<ui5-test-child></ui5-test-child>
-	</ui5-test-parent>`);
+		cy.mount(
+			<Parent>
+				<Child></Child>
+			</Parent>
+		);
+
+		cy.get<Parent>("[ui5-test-parent]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-parent]")
 			.as("testParent")
@@ -41,9 +55,16 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that changing a non-monitored property of a child does not invalidate the parent", () => {
-		cy.mount(`<ui5-test-parent>
-		<ui5-test-child slot="items"></ui5-test-child>
-	</ui5-test-parent>`);
+		cy.mount(
+			<Parent>
+				<Child slot="items"></Child>
+			</Parent>
+		);
+
+		cy.get<Parent>("[ui5-test-parent]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-parent]")
 			.as("testParent")

package/cypress/specs/{UI5ElementMetadataExt.cy.ts → UI5ElementMetadataExt.cy.tsx}

@@ -1,9 +1,9 @@
 import type UI5Element from "../../src/UI5Element.js";
-import "../../test/test-elements/GenericExt.js";
+import GenericExt from "../../test/test-elements/GenericExt.js";
 
 describe("Invalidation works", () => {
 	it("Tests that changing a monitored property of a child invalidates the parent", () => {
-		cy.mount(`<ui5-test-generic-ext></ui5-test-generic-ext>`);
+		cy.mount(<GenericExt></GenericExt>);
 
 		cy.get("[ui5-test-generic-ext]")
 			.then($el => {
@@ -33,7 +33,7 @@ describe("Invalidation works", () => {
 	});
 
 	it("When extending metadata, property defaultValue can be modified", () => {
-		cy.mount(`<ui5-test-generic-ext></ui5-test-generic-ext>`);
+		cy.mount(<GenericExt></GenericExt>);
 
 		cy.get("[ui5-test-generic-ext]")
 			.invoke("attr", "str-prop")

package/cypress/specs/{UI5ElementPropertyValidation.cy.ts → UI5ElementPropertyValidation.cy.tsx}

@@ -1,8 +1,8 @@
-import "../../test/test-elements/Generic.js";
+import Generic from "../../test/test-elements/Generic.js";
 
 describe("Properties can only have values, restricted to their types", () => {
 	it("String property enforced to string", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");

package/cypress/specs/{UI5ElementPropsAndAttrs.cy.ts → UI5ElementPropsAndAttrs.cy.tsx}

@@ -1,8 +1,8 @@
-import "../../test/test-elements/Generic.js";
+import Generic from "../../test/test-elements/Generic.js";
 
 describe("Properties and attributes convert to each other", () => {
 	it("Tests that properties with default values are initialized with the default value", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");
@@ -13,7 +13,7 @@ describe("Properties and attributes convert to each other", () => {
 	});
 
 	it("Tests that prop-attr conversion works for string properties", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");
@@ -33,7 +33,7 @@ describe("Properties and attributes convert to each other", () => {
 	});
 
 	it("Tests that prop-attr conversion works for boolean properties", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");
@@ -66,7 +66,7 @@ describe("Properties and attributes convert to each other", () => {
 	});
 
 	it("Tests that object properties have no attributes", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");
@@ -79,7 +79,7 @@ describe("Properties and attributes convert to each other", () => {
 	});
 
 	it("Tests that array properties have no attributes", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");
@@ -92,7 +92,7 @@ describe("Properties and attributes convert to each other", () => {
 	});
 
 	it("Tests that noAttribute properties have no attributes", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");
@@ -105,7 +105,7 @@ describe("Properties and attributes convert to each other", () => {
 	});
 
 	it("Tests that properties with default values do automatically set attributes", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.should("have.attr", "default-value-prop", "Hello");