@ui5/webcomponents 2.7.0-rc.2 → 2.7.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.7.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.2...v2.7.0) (2025-02-03)
+
+
+### Bug Fixes
+
+* **ui5-calendar:** add tooltips to special dates ([#10335](https://github.com/SAP/ui5-webcomponents/issues/10335)) ([b5b5a73](https://github.com/SAP/ui5-webcomponents/commit/b5b5a7397dae69e653713a361a8c9c716b92cc0a))
+* **ui5-calendar:** using the correct parameter for UTC when formatting a date ([#10713](https://github.com/SAP/ui5-webcomponents/issues/10713)) ([9ae1f63](https://github.com/SAP/ui5-webcomponents/commit/9ae1f639990a5cffe2307be303c03410a7d8f08d))
+* **ui5-file-uploder:** match focus correctly with screen readers ([#10700](https://github.com/SAP/ui5-webcomponents/issues/10700)) ([a10b91d](https://github.com/SAP/ui5-webcomponents/commit/a10b91dfc78b5c292f0248241fac538b9d81e360))
+* **ui5-menu-item:** align arrow indication color ([#10695](https://github.com/SAP/ui5-webcomponents/issues/10695)) ([bd898c0](https://github.com/SAP/ui5-webcomponents/commit/bd898c0e2199b53856d2dc648fce32944aa188a9))
+* **ui5-message-strip:** close event bubbling ([#10690](https://github.com/SAP/ui5-webcomponents/issues/10690)) ([6bbc4c5](https://github.com/SAP/ui5-webcomponents/commit/6bbc4c58462c24671ff632ed8a4d1569a419ac74))
+* **ui5-select:** improved custom value state click behavior ([#10738](https://github.com/SAP/ui5-webcomponents/issues/10738)) ([f314e4f](https://github.com/SAP/ui5-webcomponents/commit/f314e4fcb5c491da189f156bfa68b70d3c3efbd6)), closes [#10661](https://github.com/SAP/ui5-webcomponents/issues/10661)
+* **ui5-side-navigation:** apply aria-haspopup to items in overflow ([#10686](https://github.com/SAP/ui5-webcomponents/issues/10686)) ([9550875](https://github.com/SAP/ui5-webcomponents/commit/9550875d65dda77118f7644e081ebf34eedf4d2a))
+* **ui5-tokenizer:** fix token-delete event details ([#10630](https://github.com/SAP/ui5-webcomponents/issues/10630)) ([c1206ae](https://github.com/SAP/ui5-webcomponents/commit/c1206aea539f4286cc8ea428aa66988095af292b)), closes [#10612](https://github.com/SAP/ui5-webcomponents/issues/10612)
+
+
+
+
+
 # [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)
 
 

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

@@ -1,13 +1,13 @@
-import { html } from "lit";
-import "../../src/Button.js";
-import "../../src/ButtonBadge.js";
-import type Button from "../../src/Button.js";
-import "@ui5/webcomponents-icons/dist/download.js";
-import "@ui5/webcomponents-icons/dist/employee.js";
+import Avatar from "../../src/Avatar.js";
+import Button from "../../src/Button.js";
+import Label from "../../src/Label.js";
+import ButtonBadge from "../../src/ButtonBadge.js";
+import download from "@ui5/webcomponents-icons/dist/download.js";
+import employee from "@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(<Button icon={download} design="Negative">Action Bar Button</Button>);
 
 		cy.get<Button>("[ui5-button]")
 			.shadow()
@@ -16,7 +16,7 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button's icon rendering", () => {
-		cy.mount(html`<ui5-button>Action Bar Button</ui5-button>`);
+		cy.mount(<Button icon={download} design="Emphasized">Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -41,9 +41,8 @@ describe("Button general interaction", () => {
 			.find(".ui5-button-icon")
 			.should("not.exist", "icon is not present");
 	});
-
 	it("tests button's endIon rendering", () => {
-		cy.mount(html`<ui5-button>Action Bar Button</ui5-button>`);
+		cy.mount(<Button>Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -70,7 +69,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(<Button icon="home" design="Emphasized">Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -92,7 +91,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(<Button>Text</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -113,32 +112,33 @@ describe("Button general interaction", () => {
 	});
 
 	it("tests button's icon only rendering", () => {
-		cy.mount(html`<ui5-button icon="home"><!----><!----></ui5-button>`);
+		cy.mount(<Button icon="home"></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(<Button icon="text"> </Button>);
 
 		cy.get("[ui5-button]")
 			.should("have.attr", "icon-only");
 	});
 
 	it("tests button's slot rendering", () => {
-		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" />
-		</ui5-avatar>
-	</ui5-button>`);
+		cy.mount(
+			<Button>
+				<Avatar id="btnImage" size="XS">
+					<img src="https://sdk.openui5.org/test-resources/sap/f/images/Woman_avatar_01.png" />
+				</Avatar>
+			</Button>
+		);
 		cy.get("[ui5-button]")
 			.should("be.visible", "Btn image is rendered");
 	});
 
 	it("tests clicking on disabled button", () => {
-		cy.mount(html`<ui5-button disabled>Inactive</ui5-button>`);
+		cy.mount(<Button disabled>Inactive</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -170,7 +170,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(<Button icon={employee} disabled></Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -200,7 +200,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(<Button design="Attention" icon="message-warning">Warning</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -214,7 +214,7 @@ describe("Button general interaction", () => {
 
 describe("Accessibility", () => {
 	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(<Button icon="message-information" tooltip="Go home"></Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -226,7 +226,7 @@ describe("Accessibility", () => {
 	});
 
 	it("tooltip from inner icon is propagated", () => {
-		cy.mount(html`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
+		cy.mount(<Button icon="download" accessibleName="Download application"></Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -238,7 +238,7 @@ describe("Accessibility", () => {
 	});
 
 	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(<Button icon="home" design="Emphasized">Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -269,7 +269,7 @@ describe("Accessibility", () => {
 	});
 
 	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(<Button accessibleRole="Link"> Navigation Button </Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -281,7 +281,7 @@ describe("Accessibility", () => {
 	});
 
 	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(<Button icon="home" design="Emphasized">Action Bar Button</Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -294,8 +294,7 @@ describe("Accessibility", () => {
 
 	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(<Button design="Attention">Content</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -312,8 +311,12 @@ describe("Accessibility", () => {
 	});
 
 	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>
-		<ui5-label id="1download-text">Download Application</ui5-label>`);
+		cy.mount(
+			<>
+				<Button icon="download" accessibleName="Help me" accessibleNameRef="1download-text"></Button>
+				<Label id="1download-text">Download Application</Label>
+			</>
+		);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -325,7 +328,7 @@ describe("Accessibility", () => {
 	});
 
 	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(<Button>Show Registration Dialog</Button>);
 
 		cy.get("[ui5-button]")
 			.as("button");
@@ -350,7 +353,7 @@ describe("Accessibility", () => {
 	});
 
 	it("setting accessible-description is applied to button tag", () => {
-		cy.mount(html`<ui5-button accessible-description="A long description."></ui5-button>`);
+		cy.mount(<Button accessibleDescription="A long description."></Button>);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -362,9 +365,11 @@ describe("Accessibility", () => {
 	});
 
 	it("button with a badge", () => {
-		cy.mount(html`<ui5-button design="Emphasized" icon="employee">Emphasized
-				<ui5-button-badge design="OverlayText" text="999+" slot="badge"></ui5-button-badge>
-			</ui5-button>`);
+		cy.mount(
+			<Button design="Emphasized" icon={employee}>Emphasized
+				<ButtonBadge design="OverlayText" text="999+" slot="badge"></ButtonBadge>
+			</Button>
+		);
 
 		cy.get("[ui5-button]")
 			.find("ui5-button-badge")

package/cypress/specs/CalendarLegend.cy.tsx

@@ -0,0 +1,77 @@
+import Calendar from "../../src/Calendar.js";
+import CalendarDate from "../../src/CalendarDate.js";
+import CalendarLegend from "../../src/CalendarLegend.js";
+import CalendarLegendItem from "../../src/CalendarLegendItem.js";
+import SpecialCalendarDate from "../../src/SpecialCalendarDate.js";
+
+const getCalendarWithLegend = () => {
+	return (
+		<Calendar id="calendar1">
+			<CalendarDate value="Mar 31, 2024"></CalendarDate>
+			<SpecialCalendarDate slot="specialDates" value="Mar 30, 2024" type="Type01"></SpecialCalendarDate>
+			<SpecialCalendarDate slot="specialDates" value="Mar 29, 2024" type="Type02"></SpecialCalendarDate>
+
+			<CalendarLegend slot="calendarLegend" id="calendarLegend">
+				<CalendarLegendItem type="Type01" text="Placeholder 01"></CalendarLegendItem>
+				<CalendarLegendItem type="Type02" text="Placeholder 02"></CalendarLegendItem>
+			</CalendarLegend>
+		</Calendar>
+	);
+};
+
+describe("Calendar Legend tests", () => {
+	it("Calendar legend hides Today and Selected, when hideToday and hideSelectedDay properties are provided", () => {
+		cy.mount(getCalendarWithLegend());
+
+		cy.get<CalendarLegend>("#calendarLegend")
+			.shadow()
+			.find(".ui5-calendar-legend-root")
+			.find("[ui5-calendar-legend-item]")
+			.should("have.length", 4);
+
+		cy.get<CalendarLegend>("#calendarLegend").invoke("prop", "hideToday", true);
+
+		cy.get<CalendarLegend>("#calendarLegend")
+			.shadow()
+			.find(".ui5-calendar-legend-root")
+			.find("[ui5-calendar-legend-item]")
+			.should("have.length", 3);
+
+		cy.get<CalendarLegend>("#calendarLegend").invoke("prop", "hideSelectedDay", true);
+
+		cy.get<CalendarLegend>("#calendarLegend")
+			.shadow()
+			.find(".ui5-calendar-legend-root")
+			.find("[ui5-calendar-legend-item]")
+			.should("have.length", 2);
+	});
+
+	it("Focusing item in the legend and then focus out, reset filtered days", () => {
+		cy.mount(getCalendarWithLegend());
+
+		cy.get<CalendarLegend>("#calendarLegend")
+			.find("ui5-calendar-legend-item[type='Type01']")
+			.realClick();
+
+		cy.get("#calendar1")
+			.shadow()
+			.find("[ui5-daypicker]")
+			.shadow()
+			.find("[data-ui5-special-day]")
+			.should("have.length", 1);
+
+		cy.get<CalendarLegend>("#calendarLegend")
+			.find("ui5-calendar-legend-item[type='Type01']")
+			.realClick()
+			.realClick()
+			.realPress("ArrowUp")
+			.realPress("ArrowUp");
+
+		cy.get("#calendar1")
+			.shadow()
+			.find("[ui5-daypicker]")
+			.shadow()
+			.find("[data-ui5-special-day]")
+			.should("have.length", 2);
+	});
+});

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

@@ -1,33 +1,21 @@
-import { html } from "lit";
-import "../../src/Card.js";
-import "../../src/CardHeader.js";
-
-const interactiveCardHeader = html` <ui5-card>
-	<ui5-card-header
-        id="cardHeader1"
-		slot="header"
-		additional-text="4 of 10"
-		title-text="Quick Links"
-		subtitle-text="Quick links sub title"
-		interactive
-	>
-	</ui5-card-header>
-</ui5-card>`;
-
-const cardHeader = html` <ui5-card>
-	<ui5-card-header
-        id="cardHeader2"
-		slot="header"
-		additional-text="4 of 10"
-		title-text="Quick Links"
-		subtitle-text="Quick links sub title"
-	>
-	</ui5-card-header>
-</ui5-card>`;
+import Card from "../../src/Card.js";
+import CardHeader from "../../src/CardHeader.js";
 
 describe("Card header", () => {
 	it("Tests that aria attribute are correct on interactive header", () => {
-		cy.mount(interactiveCardHeader);
+		cy.mount(
+			<Card>
+				<CardHeader
+					id="cardHeader1"
+					slot="header"
+					additionalText="4 of 10"
+					titleText="Quick Links"
+					subtitleText="Quick links sub title"
+					interactive={true}
+				>
+				</CardHeader>
+			</Card>
+		);
 
 		// assert
 		cy.get("#cardHeader1")
@@ -37,8 +25,20 @@ describe("Card header", () => {
 			.and("have.attr", "tabindex", "0")
 			.and("have.attr", "aria-roledescription", "Interactive Card Header");
 	});
+
 	it("Tests that aria attribute are correct on a header", () => {
-		cy.mount(cardHeader);
+		cy.mount(
+			<Card>
+				<CardHeader
+					id="cardHeader2"
+					slot="header"
+					additionalText="4 of 10"
+					titleText="Quick Links"
+					subtitleText="Quick links sub title"
+				>
+				</CardHeader>
+			</Card>
+		);
 
 		// assert
 		cy.get("#cardHeader2")

package/cypress/specs/ColorPalette.cy.tsx

@@ -0,0 +1,213 @@
+import ColorPalette from "../../src/ColorPalette.js";
+import ColorPaletteItem from "../../src/ColorPaletteItem.js";
+
+function ColorPaletteSample() {
+	return (
+		<ColorPalette id="cp1">
+			<ColorPaletteItem value="darkblue"></ColorPaletteItem>
+			<ColorPaletteItem value="pink"></ColorPaletteItem>
+			<ColorPaletteItem value="#444444"></ColorPaletteItem>
+			<ColorPaletteItem value="rgb(0,200,0)"></ColorPaletteItem>
+			<ColorPaletteItem value="green"></ColorPaletteItem>
+			<ColorPaletteItem value="darkred"></ColorPaletteItem>
+			<ColorPaletteItem value="yellow"></ColorPaletteItem>
+			<ColorPaletteItem value="blue"></ColorPaletteItem>
+			<ColorPaletteItem value="cyan"></ColorPaletteItem>
+			<ColorPaletteItem value="orange"></ColorPaletteItem>
+			<ColorPaletteItem value="#5480e7"></ColorPaletteItem>
+			<ColorPaletteItem value="#ff6699"></ColorPaletteItem>
+		</ColorPalette>
+	);
+}
+
+describe("Color Palette tests", () => {
+	it("internal color picker should have selected color set on open", () => {
+		cy.mount(
+			<ColorPalette showMoreColors={true} showRecentColors={true}>
+				<ColorPaletteItem id="named" value="red"></ColorPaletteItem>
+				<ColorPaletteItem id="rgba" value="rgba(0, 255, 0, 0.5)"></ColorPaletteItem>
+				<ColorPaletteItem id="rgb" value="rgb(0,0,255)"></ColorPaletteItem>
+				<ColorPaletteItem id="hex" value="#C0FFEE"></ColorPaletteItem>
+			</ColorPalette>
+		);
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#named", {
+				r: "255",
+				g: "0",
+				b: "0",
+				a: "1",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#rgba", {
+				r: "0",
+				g: "255",
+				b: "0",
+				a: "0.5",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#rgb", {
+				r: "0",
+				g: "0",
+				b: "255",
+				a: "1",
+			});
+
+		cy.get("ui5-color-palette")
+			.ui5ColorPaletteCheckSelectedColor("#hex", {
+				r: "192",
+				g: "255",
+				b: "238",
+				a: "1",
+			});
+	});
+
+	it("Test if selecting element works", () => {
+		cy.mount(<ColorPaletteSample/>);
+
+		cy.get<ColorPalette>("#cp1")
+			.find("[ui5-color-palette-item]")
+			.first()
+			.realClick();
+
+		cy.get<ColorPalette>("#cp1")
+			.find("ui5-color-palette-item[selected]")
+			.should("have.value", "darkblue");
+	});
+
+	it("Test if keyboard navigation on elements works", () => {
+		cy.mount(<ColorPaletteSample/>);
+
+		cy.get<ColorPalette>("#cp1")
+			.find("[ui5-color-palette-item]")
+			.first()
+			.realClick();
+
+		cy.get<ColorPalette>("#cp1")
+			.find("ui5-color-palette-item[selected]")
+			.should("have.value", "darkblue")
+			.realPress("ArrowRight")
+			.realPress("Space");
+
+		cy.get<ColorPalette>("#cp1")
+			.find("ui5-color-palette-item[selected]")
+			.should("have.value", "pink");
+	});
+
+	it("Test if keyboard navigation on elements works with Arrow keys", () => {
+		cy.mount(<ColorPaletteSample/>);
+
+		cy.ui5ColorPaletteNavigateAndCheckSelectedColor("#cp1", 0, "ArrowRight", "pink");
+		cy.ui5ColorPaletteNavigateAndCheckSelectedColor("#cp1", 0, "ArrowLeft", "#ff6699");
+		cy.ui5ColorPaletteNavigateAndCheckSelectedColor("#cp1", 0, "ArrowUp", "orange");
+		cy.ui5ColorPaletteNavigateAndCheckSelectedColor("#cp1", 9, "ArrowDown", "darkblue");
+	});
+
+	it("Tests show-recent-colors functionality", () => {
+		cy.mount(
+			<ColorPalette id="cp4" showMoreColors={true} showRecentColors={true}>
+				<ColorPaletteItem value="pink"></ColorPaletteItem>
+				<ColorPaletteItem value="darkblue"></ColorPaletteItem>
+				<ColorPaletteItem value="#444444"></ColorPaletteItem>
+				<ColorPaletteItem value="rgb(0,200,0)"></ColorPaletteItem>
+				<ColorPaletteItem value="green"></ColorPaletteItem>
+				<ColorPaletteItem value="darkred"></ColorPaletteItem>
+				<ColorPaletteItem value="yellow"></ColorPaletteItem>
+				<ColorPaletteItem value="blue"></ColorPaletteItem>
+				<ColorPaletteItem value="cyan"></ColorPaletteItem>
+				<ColorPaletteItem value="orange"></ColorPaletteItem>
+				<ColorPaletteItem value="#5480e7"></ColorPaletteItem>
+				<ColorPaletteItem value="#ff6699"></ColorPaletteItem>
+			</ColorPalette>
+		);
+
+		// click on first 5 color palette items
+		cy.get("#cp4")
+			.find("[ui5-color-palette-item]")
+			.then(items => {
+				for (let i = 0; i < 5; i++) {
+					cy.wrap(items[i]).realClick();
+				}
+			});
+
+		// check recent colors
+		cy.get("#cp4")
+			.shadow()
+			.find(".ui5-cp-recent-colors-wrapper [ui5-color-palette-item]")
+			.should("have.length", 5)
+			.then(items => {
+				cy.wrap(items[0]).should("have.value", "green");
+				cy.wrap(items[1]).should("have.value", "rgb(0,200,0)");
+				cy.wrap(items[2]).should("have.value", "#444444");
+				cy.wrap(items[3]).should("have.value", "darkblue");
+				cy.wrap(items[4]).should("have.value", "pink");
+			});
+	});
+
+	it("Tests if only one item is selected at a time in the color palette", () => {
+		cy.mount(
+			<ColorPalette id="cp1SelectedTest">
+				<ColorPaletteItem value="darkblue" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="pink" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="#444444" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="rgb(0,200,0)" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="green"></ColorPaletteItem>
+				<ColorPaletteItem value="darkred"></ColorPaletteItem>
+				<ColorPaletteItem value="yellow"></ColorPaletteItem>
+				<ColorPaletteItem value="blue"></ColorPaletteItem>
+				<ColorPaletteItem value="cyan"></ColorPaletteItem>
+				<ColorPaletteItem value="orange"></ColorPaletteItem>
+				<ColorPaletteItem value="#5480e7"></ColorPaletteItem>
+				<ColorPaletteItem value="#ff6699"></ColorPaletteItem>
+			</ColorPalette>
+		);
+
+		cy.get("#cp1SelectedTest")
+			.find("[ui5-color-palette-item]")
+			.eq(0)
+			.realClick();
+
+		cy.get("#cp1SelectedTest")
+			.find("[ui5-color-palette-item]")
+			.eq(1)
+			.realClick();
+
+		cy.get("#cp1SelectedTest")
+			.find("[ui5-color-palette-item]")
+			.eq(0)
+			.should("not.have.attr", "selected");
+
+		cy.get("#cp1SelectedTest")
+			.find("[ui5-color-palette-item]")
+			.eq(1)
+			.should("have.attr", "selected");
+	});
+
+	it("Tests if clicking on selected item, does not deselect it", () => {
+		cy.mount(
+			<ColorPalette id="cp1SelectedTest">
+				<ColorPaletteItem value="darkblue" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="pink" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="#444444" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="rgb(0,200,0)" selected={true}></ColorPaletteItem>
+				<ColorPaletteItem value="green"></ColorPaletteItem>
+				<ColorPaletteItem value="darkred"></ColorPaletteItem>
+				<ColorPaletteItem value="yellow"></ColorPaletteItem>
+				<ColorPaletteItem value="blue"></ColorPaletteItem>
+				<ColorPaletteItem value="cyan"></ColorPaletteItem>
+				<ColorPaletteItem value="orange"></ColorPaletteItem>
+				<ColorPaletteItem value="#5480e7"></ColorPaletteItem>
+				<ColorPaletteItem value="#ff6699"></ColorPaletteItem>
+			</ColorPalette>
+		);
+
+		cy.get("#cp1SelectedTest")
+			.find("[ui5-color-palette-item]")
+			.first()
+			.realClick()
+			.realClick()
+			.should("have.attr", "selected");
+	});
+});

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

@@ -1,10 +1,8 @@
-import { html } from "lit";
-import "../../src/ColorPicker.js";
-import type ColorPicker from "../../src/ColorPicker.js";
+import 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 simplified></ui5-color-picker>`);
+		cy.mount(<ColorPicker simplified={true}></ColorPicker>);
 
 		cy.get("ui5-color-picker")
 			.as("colorPicker");
@@ -26,7 +24,7 @@ describe("Color Picker tests", () => {
 	});
 
 	it("should toggle display to RGB or HSL when button is selected", () => {
-		cy.mount(html`<ui5-color-picker value="rgba(112, 178, 225, 1)"></ui5-color-picker>`);
+		cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
 
 		cy.get("ui5-color-picker")
 			.as("colorPicker");
@@ -51,7 +49,7 @@ describe("Color Picker tests", () => {
 	});
 
 	it("should update value when hue is changed via the input field", () => {
-		cy.mount(html`<ui5-color-picker value="rgba(112, 178, 225, 1)"></ui5-color-picker>`);
+		cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
 
 		cy.get("ui5-color-picker")
 			.as("colorPicker");
@@ -67,7 +65,7 @@ describe("Color Picker tests", () => {
 	});
 
 	it("should update value when saturation is changed via the input field", () => {
-		cy.mount(html`<ui5-color-picker value="rgba(112, 225, 131, 1)"></ui5-color-picker>`);
+		cy.mount(<ColorPicker value="rgba(112, 225, 131, 1)"></ColorPicker>);
 
 		cy.get("ui5-color-picker")
 			.as("colorPicker");
@@ -83,7 +81,7 @@ describe("Color Picker tests", () => {
 	});
 
 	it("should update value when light is changed via the input field", () => {
-		cy.mount(html`<ui5-color-picker value="rgba(130, 206, 143, 1)"></ui5-color-picker>`);
+		cy.mount(<ColorPicker value="rgba(130, 206, 143, 1)"></ColorPicker>);
 
 		cy.get("ui5-color-picker")
 			.as("colorPicker");
@@ -99,7 +97,7 @@ describe("Color Picker tests", () => {
 	});
 
 	it("should show correct accessibility info for HSL inputs", () => {
-		cy.mount(html`<ui5-color-picker></ui5-color-picker>`);
+		cy.mount(<ColorPicker></ColorPicker>);
 
 		cy.get("ui5-color-picker")
 			.as("colorPicker");