@ui5/webcomponents 2.5.0-rc.3 → 2.6.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.6.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0...v2.6.0-rc.0) (2024-12-12)
+
+
+### Bug Fixes
+
+* **ui5-breadcrumbs:** accessible name of popover ([#10319](https://github.com/SAP/ui5-webcomponents/issues/10319)) ([e53bd79](https://github.com/SAP/ui5-webcomponents/commit/e53bd79ea06c62ed5155f34d435245ba5a1e17fe)), closes [#10176](https://github.com/SAP/ui5-webcomponents/issues/10176)
+* **ui5-calendar-legend:** add accessibility semantics ([#10333](https://github.com/SAP/ui5-webcomponents/issues/10333)) ([26af039](https://github.com/SAP/ui5-webcomponents/commit/26af0390b712b39cbc254fb96ef4e62c3e53d095)), closes [#10298](https://github.com/SAP/ui5-webcomponents/issues/10298)
+* **ui5-color-picker:** add tooltip to sliders ([#10270](https://github.com/SAP/ui5-webcomponents/issues/10270)) ([06a5fdb](https://github.com/SAP/ui5-webcomponents/commit/06a5fdb2d67f82e529d8d402e2282677ba7fa81a)), closes [#10203](https://github.com/SAP/ui5-webcomponents/issues/10203)
+* **ui5-combobox:** add gap between text and additional-text ([#10341](https://github.com/SAP/ui5-webcomponents/issues/10341)) ([373ecbc](https://github.com/SAP/ui5-webcomponents/commit/373ecbc7cb2e4e90c7232f0b11f47ea84365fd6e)), closes [#9450](https://github.com/SAP/ui5-webcomponents/issues/9450)
+* **ui5-input:** remove initial tabindex 0 from suggestions ([#10304](https://github.com/SAP/ui5-webcomponents/issues/10304)) ([5871352](https://github.com/SAP/ui5-webcomponents/commit/58713522daf2a20051826708ab1c1d9552425fec)), closes [#9340](https://github.com/SAP/ui5-webcomponents/issues/9340)
+* **ui5-menu-item:** adjust cursor style ([#10353](https://github.com/SAP/ui5-webcomponents/issues/10353)) ([410ba45](https://github.com/SAP/ui5-webcomponents/commit/410ba45fd3e2134a4ddd89b84e53ad6b1acbe8a2)), closes [#10331](https://github.com/SAP/ui5-webcomponents/issues/10331) [#10342](https://github.com/SAP/ui5-webcomponents/issues/10342)
+* **ui5-popover:** fix finding opener when popover is not in the DOM ([#10338](https://github.com/SAP/ui5-webcomponents/issues/10338)) ([7c78317](https://github.com/SAP/ui5-webcomponents/commit/7c78317de761a32da529235357475b1e301b6173))
+* **ui5-table-row:** add left and right borders ([#10285](https://github.com/SAP/ui5-webcomponents/issues/10285)) ([1bf8ba6](https://github.com/SAP/ui5-webcomponents/commit/1bf8ba64180c56e0fe896ebc490255b596986105)), closes [#10188](https://github.com/SAP/ui5-webcomponents/issues/10188)
+* **ui5-table:** check for undefined in table type guard ([#10343](https://github.com/SAP/ui5-webcomponents/issues/10343)) ([e41370f](https://github.com/SAP/ui5-webcomponents/commit/e41370f4869fdc7e37f9dc293a2b7519c10bb6ee)), closes [#10340](https://github.com/SAP/ui5-webcomponents/issues/10340)
+* **ui5-toast:** implement popover api to ensure toast is top level element ([#10178](https://github.com/SAP/ui5-webcomponents/issues/10178)) ([fb599d4](https://github.com/SAP/ui5-webcomponents/commit/fb599d4657e271dfbf4ff8151c36ef400f04d3f6))
+
+
+### 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-expandable-text:** add ExpandableText component ([#10220](https://github.com/SAP/ui5-webcomponents/issues/10220)) ([7667585](https://github.com/SAP/ui5-webcomponents/commit/766758567b13a78a4dceb3dcc5a070d2621432e2))
+* **ui5-message-strip:** close button ACC enhancement ([#10283](https://github.com/SAP/ui5-webcomponents/issues/10283)) ([dfaa45f](https://github.com/SAP/ui5-webcomponents/commit/dfaa45f5926595d0f4179f0c0b6a57b3c87f5081)), closes [#9874](https://github.com/SAP/ui5-webcomponents/issues/9874)
+* **ui5-step-input:** add input event ([#10294](https://github.com/SAP/ui5-webcomponents/issues/10294)) ([84cf7b2](https://github.com/SAP/ui5-webcomponents/commit/84cf7b2bbdc7eff3c969dff27ff7c4be8ad359a3)), closes [#5177](https://github.com/SAP/ui5-webcomponents/issues/5177)
+* **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
+
+
+
+
+
 # [2.5.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.2...v2.5.0-rc.3) (2024-12-05)
 
 

package/cypress/specs/ColorPicker.cy.ts

@@ -4,7 +4,7 @@ import type ColorPicker from "../../src/ColorPicker.js";
 
 describe("Color Picker tests", () => {
 	it("should not display color channel inputs and alpha slider in simplified mode", () => {
-		cy.mount(html`<ui5-color-picker display-mode="Simplified"></ui5-color-picker>`);
+		cy.mount(html`<ui5-color-picker simplified></ui5-color-picker>`);
 
 		cy.get("ui5-color-picker")
 			.as("colorPicker");

package/cypress/specs/ExpandableText.cy.ts

@@ -0,0 +1,389 @@
+import { html } from "lit";
+import "../../src/ExpandableText.js";
+import {
+	EXPANDABLE_TEXT_SHOW_MORE,
+	EXPANDABLE_TEXT_SHOW_LESS,
+	EXPANDABLE_TEXT_CLOSE,
+} from "../../src/generated/i18n/i18n-defaults.js";
+
+describe("ExpandableText", () => {
+	describe("Rendering and Interaction", () => {
+		it("Should display only 100 characters by default", () => {
+			const text = "This is a very long text that should be displayed. This is a very long text that should be displayed. This is a very long text that should be displayed.";
+
+			cy.mount(html`<ui5-expandable-text text=${text}></ui5-expandable-text>`);
+
+			expect(text.length).to.be.greaterThan(100);
+
+			cy.get("[ui5-expandable-text]")
+				.shadow()
+				.find("[ui5-text]")
+				.contains(text.substring(0, 100))
+				.should("exist");
+		});
+
+		it("Should display full text if maxCharacters are set, but not exceeded", () => {
+			const text = "This is a very long text that should be displayed";
+
+			cy.mount(html`<ui5-expandable-text text=${text} max-characters="9999"></ui5-expandable-text>`);
+
+			cy.get("[ui5-expandable-text]")
+				.shadow()
+				.find("[ui5-text]")
+				.contains(text)
+				.should("exist");
+		});
+
+		it("Should display 'Show More' if maxCharacters are set and exceeded", () => {
+			const text = "This is a very long text that should be displayed";
+			const maxCharacters = 5;
+
+			cy.mount(html`<ui5-expandable-text text=${text} max-characters="${maxCharacters}"></ui5-expandable-text>`);
+
+			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
+
+			cy.get("@expTextShadow")
+				.find("[ui5-text]")
+				.contains(text.substring(0, maxCharacters))
+				.should("exist");
+
+			cy.get("@expTextShadow")
+				.find(".ui5-exp-text-ellipsis")
+				.contains("... ")
+				.should("exist");
+
+			cy.get("@expTextShadow")
+				.find(".ui5-exp-text-toggle")
+				.contains(EXPANDABLE_TEXT_SHOW_MORE.defaultText)
+				.should("exist")
+				.should("have.attr", "ui5-link");
+		});
+
+		it("Should display 'Show More' if maxCharacters are exceeded, set to 0", () => {
+			const text = "This is a very long text that should be displayed";
+
+			cy.mount(html`<ui5-expandable-text text=${text} max-characters="0"></ui5-expandable-text>`);
+
+			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
+
+			cy.get("@expTextShadow")
+				.find("[ui5-text]")
+				.contains(/^$/)
+				.should("exist");
+
+			cy.get("@expTextShadow")
+				.find(".ui5-exp-text-ellipsis")
+				.should("exist");
+
+			cy.get("@expTextShadow")
+				.find(".ui5-exp-text-toggle")
+				.contains(EXPANDABLE_TEXT_SHOW_MORE.defaultText)
+				.should("exist");
+		});
+
+		it("Should NOT display 'Show More' if maxCharacters are 0, but text is empty", () => {
+			cy.mount(html`<ui5-expandable-text max-characters="0"></ui5-expandable-text>`);
+
+			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
+
+			cy.get("@expTextShadow")
+				.find("[ui5-text]")
+				.contains(/^$/)
+				.should("exist");
+
+			cy.get("@expTextShadow")
+				.find(".ui5-exp-text-ellipsis")
+				.should("not.exist");
+
+			cy.get("@expTextShadow")
+				.find(".ui5-exp-text-toggle")
+				.should("not.exist");
+		});
+
+		it("Toggling 'Show More' and 'Show Less'", () => {
+			const text = "This is a very long text that should be displayed";
+			const maxCharacters = 5;
+
+			cy.mount(html`<ui5-expandable-text text=${text} max-characters="${maxCharacters}"></ui5-expandable-text>`);
+
+			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
+			cy.get("@expTextShadow").find(".ui5-exp-text-toggle").as("toggle");
+
+			cy.get("@toggle")
+				.contains(EXPANDABLE_TEXT_SHOW_MORE.defaultText)
+				.realClick();
+
+			cy.get("@expTextShadow")
+				.find("[ui5-text]")
+				.contains(text)
+				.should("exist");
+
+			cy.get("@toggle")
+				.contains(EXPANDABLE_TEXT_SHOW_LESS.defaultText)
+				.realClick();
+
+			cy.get("@expTextShadow")
+				.find("[ui5-text]")
+				.contains(text.substring(0, maxCharacters))
+				.should("exist");
+
+			cy.get("@toggle")
+				.contains(EXPANDABLE_TEXT_SHOW_MORE.defaultText)
+				.should("exist");
+		});
+
+		it("Toggling 'Show More' and 'Show Less' with keyboard", () => {
+			const text = "This is a very long text that should be displayed";
+			const maxCharacters = 5;
+
+			cy.mount(html`
+				<button id="before">before</button>
+				<ui5-expandable-text text=${text} max-characters="${maxCharacters}"></ui5-expandable-text>
+			`);
+
+			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
+			cy.get("@expTextShadow").find(".ui5-exp-text-toggle").as("toggle");
+
+			cy.get("#before")
+				.focus();
+
+			cy.get("#before")
+				.realPress("Tab");
+
+			cy.get("@toggle")
+				.realPress("Enter");
+
+			cy.get("@expTextShadow")
+				.find("[ui5-text]")
+				.contains(text)
+				.should("exist");
+
+			cy.get("@toggle")
+				.contains(EXPANDABLE_TEXT_SHOW_LESS.defaultText)
+				.realPress("Enter");
+
+			cy.get("@expTextShadow")
+				.find("[ui5-text]")
+				.contains(text.substring(0, maxCharacters))
+				.should("exist");
+
+			cy.get("@toggle")
+				.contains(EXPANDABLE_TEXT_SHOW_MORE.defaultText)
+				.should("exist");
+		});
+
+		it("ARIA attributes", () => {
+			const text = "This is a very long text that should be displayed";
+
+			cy.mount(html`<ui5-expandable-text text=${text} max-characters="5"></ui5-expandable-text>`);
+
+			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
+			cy.get("@expTextShadow").find(".ui5-exp-text-toggle").as("toggle");
+
+			cy.get("@toggle")
+				.should("have.attr", "accessible-role", "Button");
+
+			cy.get("@toggle")
+				.invoke("prop", "accessibilityAttributes")
+				.should("deep.equal", {
+					expanded: false,
+				});
+
+			cy.get("@toggle")
+				.realClick();
+
+			cy.get("@toggle")
+				.invoke("prop", "accessibilityAttributes")
+				.should("deep.equal", {
+					expanded: true,
+				});
+		});
+	});
+
+	describe("Empty Indicator", () => {
+		it("Should display empty indicator if text is empty and emptyIndicatorMode=On", () => {
+			cy.mount(html`<ui5-expandable-text text="" empty-indicator-mode="On"></ui5-expandable-text>`);
+
+			cy.get("[ui5-expandable-text]")
+				.shadow()
+				.find("[ui5-text]")
+				.should("have.attr", "empty-indicator-mode", "On");
+		});
+
+		it("Should NOT display empty indicator if text is empty and emptyIndicatorMode=Off", () => {
+			cy.mount(html`<ui5-expandable-text text="" empty-indicator-mode="Off"></ui5-expandable-text>`);
+
+			cy.get("[ui5-expandable-text]")
+				.shadow()
+				.find("[ui5-text]")
+				.should("have.attr", "empty-indicator-mode", "Off");
+		});
+	});
+
+	describe("Rendering and Interaction with overflowMode=Popover", () => {
+		it("Toggling 'Show More' and 'Show Less'", () => {
+			const text = "This is a very long text that should be displayed";
+			const maxCharacters = 5;
+
+			cy.mount(html`<ui5-expandable-text text=${text} max-characters="${maxCharacters}" overflow-mode="Popover"></ui5-expandable-text>`);
+
+			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
+			cy.get("@expTextShadow").find(".ui5-exp-text-toggle").as("toggle");
+
+			cy.get("@expTextShadow")
+				.find("[ui5-text]")
+				.contains(text.substring(0, maxCharacters))
+				.should("exist");
+
+			cy.get("@expTextShadow")
+				.find(".ui5-exp-text-ellipsis")
+				.contains("... ")
+				.should("exist");
+
+			cy.get("@toggle")
+				.contains(EXPANDABLE_TEXT_SHOW_MORE.defaultText)
+				.realClick();
+
+			cy.get("@toggle")
+				.invoke("attr", "id")
+				.as("expectedOpenerId");
+
+			cy.get("@expTextShadow")
+				.find("[ui5-responsive-popover]")
+				.as("rpo");
+
+			cy.get("@rpo")
+				.should("exist")
+				.should("have.attr", "open");
+
+			cy.get("@rpo")
+				.should("have.attr", "content-only-on-desktop");
+
+			cy.get("@rpo")
+				.invoke("attr", "opener")
+				.then(function testOpenerId(opener) {
+					expect(opener).to.equal(this.expectedOpenerId);
+				});
+
+			cy.get("@toggle")
+				.contains(EXPANDABLE_TEXT_SHOW_LESS.defaultText)
+				.realClick();
+
+			cy.get("@expTextShadow")
+				.find("[ui5-responsive-popover]")
+				.should("not.have.attr", "open");
+		});
+
+		it("ARIA attributes", () => {
+			const text = "This is a very long text that should be displayed";
+
+			cy.mount(html`<ui5-expandable-text text=${text} max-characters="5" overflow-mode="Popover"></ui5-expandable-text>`);
+
+			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
+			cy.get("@expTextShadow").find(".ui5-exp-text-toggle").as("toggle");
+
+			cy.get("@toggle")
+				.should("have.attr", "accessible-name");
+
+			cy.get("@toggle")
+				.invoke("prop", "accessibilityAttributes")
+				.should("deep.equal", {
+					expanded: false,
+					hasPopup: "dialog",
+				});
+
+			cy.get("@expTextShadow")
+				.find("[ui5-responsive-popover]")
+				.should("have.attr", "accessible-name-ref", "popover-text");
+
+			cy.get("@toggle")
+				.realClick();
+
+			cy.get("@toggle")
+				.invoke("prop", "accessibilityAttributes")
+				.should("deep.equal", {
+					expanded: true,
+					hasPopup: "dialog",
+				});
+		});
+
+		it("Toggling 'Show More' and 'Show Less' with keyboard", () => {
+			const text = "This is a very long text that should be displayed";
+			const maxCharacters = 5;
+
+			cy.mount(html`
+				<button id="before">before</button>
+				<ui5-expandable-text text=${text} max-characters="${maxCharacters}" overflow-mode="Popover"></ui5-expandable-text>
+			`);
+
+			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
+			cy.get("@expTextShadow").find(".ui5-exp-text-toggle").as("toggle");
+
+			cy.get("#before")
+				.focus();
+
+			cy.get("#before")
+				.realPress("Tab");
+
+			cy.get("@toggle")
+				.realPress("Enter");
+
+			cy.get("@expTextShadow")
+				.find("[ui5-responsive-popover]")
+				.as("rpo");
+
+			cy.get("@rpo")
+				.should("exist")
+				.should("have.attr", "open");
+
+			cy.get("@toggle")
+				.contains(EXPANDABLE_TEXT_SHOW_LESS.defaultText)
+				.should("exist");
+
+			cy.realPress("Escape");
+
+			cy.get("@rpo")
+				.should("not.have.attr", "open");
+
+			cy.get("@toggle")
+				.contains(EXPANDABLE_TEXT_SHOW_MORE.defaultText)
+				.should("exist");
+		});
+
+		it("Toggling 'Show More' and 'Show Less' on Mobile Device", () => {
+			const text = "This is a very long text that should be displayed";
+			const maxCharacters = 5;
+
+			cy.mount(html`<ui5-expandable-text text=${text} max-characters="${maxCharacters}" overflow-mode="Popover"></ui5-expandable-text>`);
+			cy.ui5SimulateDevice("phone");
+
+			cy.get("[ui5-expandable-text]").shadow().as("expTextShadow");
+
+			cy.get("@expTextShadow")
+				.find(".ui5-exp-text-toggle")
+				.contains(EXPANDABLE_TEXT_SHOW_MORE.defaultText)
+				.realClick();
+
+			cy.get("@expTextShadow")
+				.find("[ui5-responsive-popover]").as("rpo");
+
+			cy.get("@rpo")
+				.should("exist")
+				.should("have.attr", "open");
+
+			cy.get("@rpo")
+				.should("have.attr", "_hide-header");
+
+			cy.get("@rpo")
+				.contains("[slot=footer] [ui5-button]", EXPANDABLE_TEXT_CLOSE.defaultText)
+				.should("exist");
+
+			cy.get("@rpo")
+				.contains("[slot=footer] [ui5-button]", EXPANDABLE_TEXT_CLOSE.defaultText)
+				.realClick();
+
+			cy.get("@rpo")
+				.should("not.have.attr", "open");
+		});
+	});
+});

package/cypress/specs/Input.cy.ts

@@ -1,6 +1,10 @@
 import { html } from "lit";
 import "../../src/Input.js";
 import type Input from "../../src/Input.js";
+import "../../src/features/InputSuggestions.js";
+import "../../src/SuggestionItem.js";
+import "../../src/SuggestionItemCustom.js";
+import "../../src/SuggestionItemGroup.js";
 
 describe("Input Tests", () => {
 	it("tets input event prevention", () => {
@@ -29,4 +33,99 @@ describe("Input Tests", () => {
 			.find("input")
 			.should("have.value", "test");
 	});
+
+	it("tests custom suggestion items tabindex", () => {
+		cy.mount(html`
+			<ui5-input show-suggestions>
+				<ui5-suggestion-item-custom text="Item 1">Item 1</ui5-suggestion-item-custom>
+				<ui5-suggestion-item-custom text="Item 2">Item 2</ui5-suggestion-item-custom>
+				<ui5-suggestion-item-custom text="Item 3">Item 3</ui5-suggestion-item-custom>
+			</ui5-input>
+		`);
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.as("inner");
+
+		cy.get("@inner").realClick();
+		cy.get("@inner").type("i");
+		cy.get("@inner").realPress("ArrowDown");
+
+		cy.get("@input")
+			.find("[ui5-suggestion-item-custom]")
+			.shadow()
+			.find("li")
+			.should("not.have.attr", "tabindex", "0")
+			.should("have.attr", "role", "option");
+	});
+
+	it("tests regular suggestion items tabindex", () => {
+		cy.mount(html`
+			<ui5-input show-suggestions>
+				<ui5-suggestion-item text="Item 1"></ui5-suggestion-item>
+				<ui5-suggestion-item text="Item 2"></ui5-suggestion-item>
+				<ui5-suggestion-item text="Item 3"></ui5-suggestion-item>
+			</ui5-input>
+		`);
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.as("inner");
+
+		cy.get("@inner").realClick();
+		cy.get("@inner").type("i");
+		cy.get("@inner").realPress("ArrowDown");
+
+		cy.get("@input")
+			.find("ui5-suggestion-item")
+			.shadow()
+			.find("li")
+			.should("not.have.attr", "tabindex", "0")
+			.should("have.attr", "role", "option");
+	});
+
+	it("tests suggestion group items tabindex", () => {
+		cy.mount(html`
+			<ui5-input show-suggestions>
+				<ui5-suggestion-item-group header-text="Group 1">
+					<ui5-suggestion-item text="Item 1"></ui5-suggestion-item>
+					<ui5-suggestion-item text="Item 2"></ui5-suggestion-item>
+					<ui5-suggestion-item text="Item 3"></ui5-suggestion-item>
+				</ui5-suggestion-item-group>
+				<ui5-suggestion-item-group header-text="Group 2">
+					<ui5-suggestion-item text="Item 4"></ui5-suggestion-item>
+					<ui5-suggestion-item text="Item 5"></ui5-suggestion-item>
+					<ui5-suggestion-item text="Item 6"></ui5-suggestion-item>
+				</ui5-suggestion-item-group>
+			</ui5-input>
+		`);
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		cy.get<Input>("@input")
+			.shadow()
+			.find("input")
+			.as("inner");
+
+		cy.get("@inner").realClick();
+		cy.get("@inner").type("i");
+		cy.get("@inner").realPress("ArrowDown");
+
+		cy.get("@input")
+			.find("[ui5-suggestion-item-group]")
+			.shadow()
+			.find("[ui5-li-group-header]")
+			.shadow()
+			.find("ul")
+			.should("not.have.attr", "tabindex", "0");
+	});
 });

package/cypress/specs/MessageStrip.cy.ts

@@ -0,0 +1,29 @@
+import { html } from "lit";
+import "../../src/MessageStrip.js";
+import { MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION, MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM } from "../../src/generated/i18n/i18n-defaults.js";
+
+describe("MessageStrip close button tooltip", () => {
+	it("should display the correct tooltip text for different designs", () => {
+		const designs = [
+		  {
+				design: "Information",
+				btnText: MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION.defaultText,
+		  },
+		  {
+				design: "ColorSet1",
+				btnText: MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM.defaultText,
+		  },
+		];
+
+		designs.forEach(({ design, btnText }) => {
+		  cy.mount(html`<ui5-message-strip class="top" design="${design}">${design} design with icon and close button:</ui5-message-strip>`);
+
+		  cy.get("[ui5-message-strip]")
+				.shadow()
+				.find("ui5-button")
+				.shadow()
+				.find("button")
+				.should("have.attr", "title", btnText);
+		});
+	  });
+});

package/cypress/specs/StepInput.cy.ts

@@ -0,0 +1,34 @@
+import { html } from "lit";
+import "../../src/StepInput.js";
+import type StepInput from "../../src/StepInput.js";
+
+describe("StepInput Tests", () => {
+	it("tets input event prevention", () => {
+		cy.mount(html`
+			<ui5-step-input></ui5-step-input>
+		`);
+
+		cy.get("[ui5-step-input]")
+			.as("stepInput");
+
+		cy.get<StepInput>("@stepInput")
+			.then($input => {
+				$input.get(0).addEventListener("input", e => {
+					e.preventDefault();
+					(e.target as StepInput).value = 30;
+				});
+			});
+
+		cy.get<StepInput>("@stepInput")
+			.realClick();
+
+		cy.realPress("1");
+
+		cy.get("@stepInput")
+			.shadow()
+			.find("ui5-input")
+			.shadow()
+			.find("input")
+			.should("have.value", "30");
+	});
+});