@ui5/webcomponents 2.7.0-rc.1 → 2.7.0

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

@@ -1,48 +1,64 @@
-import { html } from "lit";
-import "../../src/Tag.js";
-import "@ui5/webcomponents-icons/dist/accept.js";
+import accept from "@ui5/webcomponents-icons/dist/accept.js";
 import {
 	TAG_ROLE_DESCRIPTION,
 	TAG_SUCCESS,
 	TAG_DESCRIPTION_TAG,
 } from "../../src/generated/i18n/i18n-defaults.js";
+import Tag from "../../src/Tag.js";
+import Icon from "../../src/Icon.js";
 
 describe("Tag", () => {
 	describe("Tag rendering", () => {
 		it("initial rendering", () => {
-			cy.mount(html`<ui5-tag id="tagWithTextAndIcon" style="width: 300px" color-scheme="1" design="Set1">
-					<ui5-icon name="accept" slot="icon"></ui5-icon>bigger width
-				</ui5-tag>
-				<ui5-tag design="Positive" id="interactiveTag" interactive>
-					Interactive
-				</ui5-tag>
-				<ui5-tag design="Positive" id="noninteractiveTag">
-					Noninteractive
-				</ui5-tag>`);
+			cy.mount(
+				<>
+					<Tag
+						id="tagWithTextAndIcon"
+						style={{ width: "300px" }}
+						colorScheme="1"
+						design="Set1"
+					>
+						<Icon name={accept} slot="icon"></Icon>bigger width
+					</Tag>
+
+					<Tag design="Positive" id="interactiveTag" interactive={true}>
+						Interactive
+					</Tag>
+
+					<Tag design="Positive" id="noninteractiveTag">
+						Noninteractive
+					</Tag>
+				</>
+			);
 
 			cy.get("#tagWithTextAndIcon").shadow().find(".ui5-tag-root").should("have.prop", "tagName", "DIV");
-
 			cy.get("#interactiveTag").shadow().find(".ui5-tag-root").should("have.prop", "tagName", "BUTTON");
-
 			cy.get("#interactiveTag").shadow().find(".ui5-tag-root").should("have.attr", "aria-roledescription", `${TAG_ROLE_DESCRIPTION.defaultText}`);
-
 			cy.get("#interactiveTag").shadow().find(".ui5-tag-root").should("have.attr", "aria-description", `${TAG_SUCCESS.defaultText}`);
-
 			cy.get("#noninteractiveTag").shadow().find(".ui5-hidden-text").should("have.text", `${TAG_DESCRIPTION_TAG.defaultText} ${TAG_SUCCESS.defaultText}`);
 		});
 
 		it("tests that label is rendered if there is text content", () => {
-			cy.mount(html`<ui5-tag id="tagWithTextAndIcon" style="width: 300px" color-scheme="1" design="Set1">
-				<ui5-icon name="accept" slot="icon"></ui5-icon>bigger width
-			</ui5-tag>`);
+			cy.mount(
+				<Tag
+					id="tagWithTextAndIcon"
+					style={{ width: "300px" }}
+					colorScheme="1"
+					design="Set1"
+				>
+					<Icon name={accept} slot="icon"></Icon>bigger width
+				</Tag>
+			);
 
 			cy.get("[ui5-tag]").shadow().find(".ui5-tag-text").should("exist");
 		});
 
 		it("tests that label is NOT rendered if there is only icon", () => {
-			cy.mount(html`<ui5-tag style="width: 300px">
-				<ui5-icon name="accept" slot="icon"></ui5-icon>
-			</ui5-tag>`);
+			cy.mount(
+				<Tag style={{ width: "300px" }}>
+					<Icon name={accept} slot="icon"></Icon>
+				</Tag>
+			);
 
 			cy.get("[ui5-tag]").shadow().find(".ui5-tag-text").should("not.exist");
 		});
@@ -50,25 +66,31 @@ describe("Tag", () => {
 
 	describe("Wrapping", () => {
 		it("tests if tag text wraps - default wrappingType", () => {
-			cy.mount(html`<ui5-tag id="tagWithWrappingDefault" style="width: 300px">
-				<ui5-icon name="accept" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="Normal"
-			</ui5-tag>`);
+			cy.mount(
+				<Tag id="tagWithWrappingDefault" style={{ width: "300px" }}>
+					<Icon name={accept} slot="icon"></Icon>Some long text with more lines text wrapping-type="Normal"
+				</Tag>
+			);
 
 			cy.get("#tagWithWrappingDefault").shadow().find(".ui5-tag-root").should("have.css", "white-space", "normal");
 		});
 
 		it("tests if tag text wraps - wrappingType Normal", () => {
-			cy.mount(html`<ui5-tag id="tagWithWrappingNormal" style="width: 300px" wrapping-type="Normal">
-				<ui5-icon name="accept" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="Normal"
-			</ui5-tag>`);
+			cy.mount(
+				<Tag id="tagWithWrappingNormal" style={{ width: "300px" }} wrappingType="Normal">
+					<Icon name="accept" slot="icon"></Icon>Some long text with more lines text wrapping-type="Normal"
+				</Tag>
+			);
 
 			cy.get("#tagWithWrappingNormal").shadow().find(".ui5-tag-root").should("have.css", "white-space", "normal");
 		});
 
 		it("tests if tag text wraps - wrappingType None", () => {
-			cy.mount(html`<ui5-tag id="tagWithWrappingNone" style="width: 300px" wrapping-type="None">
-				<ui5-icon name="accept" slot="icon"></ui5-icon>Some long text with more lines text wrapping-type="None"
-			</ui5-tag>`);
+			cy.mount(
+				<Tag id="tagWithWrappingNone" style={{ width: "300px" }} wrappingType="None">
+					<Icon name="accept" slot="icon"></Icon>Some long text with more lines text wrapping-type="None"
+				</Tag>
+			);
 
 			cy.get("#tagWithWrappingNone").shadow().find(".ui5-tag-root").should("have.css", "white-space", "nowrap");
 		});

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

@@ -1,29 +1,28 @@
-import { html } from "lit";
-import "../../src/Text.js";
+import Text from "../../src/Text.js";
 
 describe("Text", () => {
 	it("tests root element is bdi", () => {
-		cy.mount(html`<ui5-text >Text</ui5-text>`);
+		cy.mount(<Text>Text</Text>);
 		cy.get("[ui5-text]").shadow().find(":first-child").should("have.prop", "tagName", "SPAN");
 	});
 
 	it("tests default wrapping behavior", () => {
-		cy.mount(html`<ui5-text >Text</ui5-text>`);
+		cy.mount(<Text >Text</Text>);
 		cy.get("[ui5-text]").should("have.css", "word-wrap", "break-word");
 	});
 
 	it("tests maxLines default behavior", () => {
-		cy.mount(html`<ui5-text >Text</ui5-text>`);
+		cy.mount(<Text >Text</Text>);
 		cy.get("[ui5-text]").should("have.css", "-webkit-line-clamp", "none");
 	});
 
 	it("tests maxLines", () => {
-		cy.mount(html`<ui5-text max-lines="1">Text</ui5-text>`);
+		cy.mount(<Text maxLines={1}>Text</Text>);
 		cy.get("[ui5-text]").should("have.css", "-webkit-line-clamp", "1");
 	});
 
 	it("tests emptyIndicatorMode", () => {
-		cy.mount(html`<ui5-text empty-indicator-mode="On"></ui5-text>`);
+		cy.mount(<Text emptyIndicatorMode="On"></Text>);
 
 		cy.get("[ui5-text]").shadow().find(".empty-indicator").should("have.text", "–");
 		cy.get("[ui5-text]").shadow().find(".empty-indicator-aria-label").should("have.text", "Empty Value");

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

@@ -1,13 +1,12 @@
-import { html } from "lit";
-import "../../src/TextArea.js";
-import "../../src/Label.js";
+import TextArea from "../../src/TextArea.js";
+import Label from "../../src/Label.js";
 
 describe("TextArea general interaction", () => {
 	describe("Attribute propagation", () => {
 		it("Should change the placeholder of the inner textarea", () => {
 			const attributeValue = "test";
 
-			cy.mount(html`<ui5-textarea placeholder=${attributeValue}></ui5-textarea>`);
+			cy.mount(<TextArea placeholder={attributeValue}></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(<TextArea disabled={true}></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(<TextArea readonly={true}></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(<TextArea required={true}></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
 				.find("textarea")
 				.should("have.attr", "aria-required", "true");
 
-			cy.mount(html`<ui5-textarea></ui5-textarea>`);
+			cy.mount(<TextArea></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(<TextArea value={attributeValue}></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(<TextArea accessibleName={attributeValue}></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -74,8 +73,12 @@ describe("TextArea general interaction", () => {
 		it("Tests aria-labelledby", () => {
 			const attributeValue = "test";
 
-			cy.mount(html`<span id="ref">${attributeValue}</span>
-			<ui5-textarea accessible-name-ref="ref"></ui5-textarea>`);
+			cy.mount(
+				<>
+					<span id="ref">{attributeValue}</span>
+					<TextArea accessibleNameRef="ref"></TextArea>
+				</>
+			);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -84,14 +87,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(<TextArea valueState="Negative"></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(<TextArea valueState="Critical"></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -102,8 +105,12 @@ 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>
-			<ui5-textarea id="ref"></ui5-textarea>`);
+			cy.mount(
+				<>
+					<Label for="ref">{attributeValue}</Label>
+					<TextArea id="ref"></TextArea>
+				</>
+			);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -114,8 +121,12 @@ 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>
-			<ui5-textarea id="ref" accessible-name="${attributeValue}"></ui5-textarea>`);
+			cy.mount(
+				<>
+					<Label for="ref">some text</Label>
+					<TextArea id="ref" accessibleName={attributeValue}></TextArea>
+				</>
+			);
 
 			cy.get("[ui5-textarea]")
 				.shadow()
@@ -126,7 +137,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(<TextArea disabled></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -146,7 +157,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("can not be edited when readonly", () => {
-			cy.mount(html`<ui5-textarea readonly></ui5-textarea>`);
+			cy.mount(<TextArea readonly></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -171,7 +182,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(<TextArea value-state="Negative"></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -190,7 +201,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(<TextArea value-state="None"></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -208,7 +219,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(<TextArea readonly value-state="Negative"></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -226,7 +237,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("fires change event", () => {
-			cy.mount(html`<ui5-textarea></ui5-textarea>`);
+			cy.mount(<TextArea></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -255,7 +266,7 @@ describe("TextArea general interaction", () => {
 		});
 
 		it("fires input event", () => {
-			cy.mount(html`<ui5-textarea></ui5-textarea>`);
+			cy.mount(<TextArea></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -283,7 +294,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(<TextArea growing={true} rows={8}></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -299,28 +310,28 @@ describe("TextArea general interaction", () => {
 					const initialTextareaSize = textarea.height();
 
 					cy.focused()
-						.type("1{enter}");
+						.realType("1{enter}");
 
 					cy.focused()
-						.type("2{enter}");
+						.realType("2{enter}");
 
 					cy.focused()
-						.type("3{enter}");
+						.realType("3{enter}");
 
 					cy.focused()
-						.type("4{enter}");
+						.realType("4{enter}");
 
 					cy.focused()
-						.type("5{enter}");
+						.realType("5{enter}");
 
 					cy.focused()
-						.type("6{enter}");
+						.realType("6{enter}");
 
 					cy.focused()
-						.type("7{enter}");
+						.realType("7{enter}");
 
 					cy.focused()
-						.type("8");
+						.realType("8");
 
 					cy.get("@textarea")
 						.invoke("height")
@@ -336,7 +347,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(<TextArea growing={true} growingMaxRows={4}></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -390,7 +401,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(<TextArea maxlength={10}></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -412,7 +423,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(<TextArea maxlength={10} showExceededText={true}></TextArea>);
 
 				cy.get("[ui5-textarea]")
 					.as("textarea");
@@ -443,7 +454,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(<TextArea maxlength={0} showExceededText={true}></TextArea>);
 
 				cy.get("[ui5-textarea]")
 					.as("textarea");
@@ -471,7 +482,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(<TextArea></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -501,7 +512,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(<TextArea valueState="Negative"></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -525,7 +536,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(<TextArea valueState="Critical"></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -549,7 +560,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(<TextArea valueState="Critical"></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -573,7 +584,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(<TextArea valueState="Information"></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -597,9 +608,11 @@ describe("TextArea general interaction", () => {
 				.should("have.text", "Value State Information Informative entry");
 
 			// Custom
-			cy.mount(html`<ui5-textarea value-state="Negative">
-				<div slot="valueStateMessage">Custom message</div>
-			</ui5-textarea>`);
+			cy.mount(
+				<TextArea valueState="Negative">
+					<div slot="valueStateMessage">Custom message</div>
+				</TextArea>
+			);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -626,7 +639,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(<TextArea value={text} maxlength={maxlength} showExceededText={true}></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea");
@@ -661,7 +674,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(<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."></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea")
@@ -677,7 +690,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(<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."></TextArea>);
 
 			cy.get("[ui5-textarea]")
 				.as("textarea")

package/cypress/specs/Title.cy.tsx

@@ -0,0 +1,36 @@
+import Title from "../../src/Title.js";
+
+describe("Title", () => {
+	describe("Rendering ", () => {
+		it("h{n} tags rendered correctly", () => {
+			cy.mount(<Title id="titleH1" level="H1">Title Size 1</Title>);
+			cy.get("#titleH1").shadow().find("h1").should("exist");
+
+			cy.mount(<Title id="titleAuto">Title Size Auto (2)</Title>);
+			cy.get("#titleAuto").shadow().find("h2").should("exist");
+
+			cy.mount(<Title id="titleH2" level="H2">Title Size 2</Title>);
+			cy.get("#titleH2").shadow().find("h2").should("exist");
+
+			cy.mount(<Title id="titleH3" level="H3">Title Size 3</Title>);
+			cy.get("#titleH3").shadow().find("h3").should("exist");
+
+			cy.mount(<Title id="titleH4" level="H4">Title Size 4</Title>);
+			cy.get("#titleH4").shadow().find("h4").should("exist");
+
+			cy.mount(<Title id="titleH5" level="H5">Title Size 5</Title>);
+			cy.get("#titleH5").shadow().find("h5").should("exist");
+
+			cy.mount(<Title id="titleH6" level="H6">Title Size 6</Title>);
+			cy.get("#titleH6").shadow().find("h6").should("exist");
+		});
+
+		// it("should wrap the text of the title", () => {
+		// 	cy.mount(<Title size="H6" level="H6" id="wrapping-title" style={{ width: "200px" }}>Wrapping Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</Title>);
+		// 	cy.get("#wrapping-title").should("have.css", "height", "64px");
+
+		// 	cy.mount(<Title size="H6" level="H6" id="truncated-title" wrappingType="None" style={{ width: "200px" }}>Truncated Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</Title>);
+		// 	cy.get("#truncated-title").should("have.css", "height", "16px");
+		// });
+	});
+});

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

@@ -1,27 +1,28 @@
-import { html } from "lit";
-import "../../src/Toast.js";
-import "../../src/Button.js";
-import "../../src/List.js";
-import "../../src/ListItemStandard.js";
-import type Toast from "../../src/Toast.js";
+import Toast from "../../src/Toast.js";
+import List from "../../src/List.js";
+import ListItemStandard from "../../src/ListItemStandard.js";
 
 describe("Toast - test popover API", () => {
 	it("Should verify the toast has the popover attribute set to manual", () => {
-		cy.mount(html`
-		<ui5-toast id="toast" open placement="TopStart">TopStart</ui5-toast>`);
+		cy.mount(
+			<Toast id="toast" open={true} placement="TopStart">TopStart</Toast>
+		);
 		cy.get<Toast>("[ui5-toast]")
 			.should("have.attr", "popover", "manual")
 			.should("be.visible");
 	});
 
 	it("Toast should stay on top of list after scroll", () => {
-		cy.mount(html`
-		<ui5-toast id="toast" open duration="999999" placement="TopStart">TopStart</ui5-toast>
-		<ui5-list id="list" header-text="List with ListItemStandard" style="opacity: 0.7">
-			<ui5-li additional-text="3">List Item 1</ui5-li>
-			<ui5-li additional-text="2">List Item 2</ui5-li>
-			<ui5-li additional-text="1">List Item 3</ui5-li>
-		</ui5-list>`);
+		cy.mount(
+			<>
+				<Toast id="toast" open duration={999999} placement="TopStart">TopStart</Toast>
+				<List id="list" headerText="List with ListItemStandard" style={{ opacity: "0.7" }}>
+					<ListItemStandard additionalText="3">List Item 1</ListItemStandard>
+					<ListItemStandard additionalText="2">List Item 2</ListItemStandard>
+					<ListItemStandard additionalText="1">List Item 3</ListItemStandard>
+				</List>
+			</>
+		);
 
 		cy.get<Toast>("[ui5-toast]")
 			.should("have.attr", "popover", "manual")
@@ -31,7 +32,7 @@ describe("Toast - test popover API", () => {
 			.then($toast => {
 				const toastRect = $toast[0].getBoundingClientRect();
 				cy.get("#list")
-					.then($list => {
+					.should($list => {
 						const listRect = $list[0].getBoundingClientRect();
 						const isOverlapping = toastRect.right > listRect.left
 							&& toastRect.left < listRect.right