@ui5/webcomponents 2.7.0-rc.0 → 2.7.0-rc.1

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Bug Fixes
+
+* **popup:** applying focus twice ([#10556](https://github.com/SAP/ui5-webcomponents/issues/10556)) ([27721a9](https://github.com/SAP/ui5-webcomponents/commit/27721a9518ac03efc0d2fb764442334bb07c6daf))
+* **ui5-card:** fix accessibiity role position ([#10437](https://github.com/SAP/ui5-webcomponents/issues/10437)) ([c9d7f3f](https://github.com/SAP/ui5-webcomponents/commit/c9d7f3ffec9ce02d465de03a5a946144ba31f0d5))
+* **ui5-tab:** semantic icon is properly aligned in high contrast themes ([#10467](https://github.com/SAP/ui5-webcomponents/issues/10467)) ([e263974](https://github.com/SAP/ui5-webcomponents/commit/e2639745f6aa1ae669dce7f3205a531a672ed711)), closes [#10455](https://github.com/SAP/ui5-webcomponents/issues/10455)
+* **ui5-time-picker:** display value state message in popover headers ([#10582](https://github.com/SAP/ui5-webcomponents/issues/10582)) ([df57f06](https://github.com/SAP/ui5-webcomponents/commit/df57f06a5e10f44ac784b33bc79b1e705f106476))
+* **ui5-toolbar:** correct event handlers attachment ([#10546](https://github.com/SAP/ui5-webcomponents/issues/10546)) ([f6d6c67](https://github.com/SAP/ui5-webcomponents/commit/f6d6c6703a02785fc790ef0794c972aeee115c60))
+* **ui5-tree:** improve keydown handling in content slot ([#10520](https://github.com/SAP/ui5-webcomponents/issues/10520)) ([1e01523](https://github.com/SAP/ui5-webcomponents/commit/1e01523569701da558d0ee3470c6936358dea457)), closes [#10474](https://github.com/SAP/ui5-webcomponents/issues/10474)
+
+
+### 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)
+* update business-suite/icons to v2.087 & 1.087 ([#10605](https://github.com/SAP/ui5-webcomponents/issues/10605)) ([6b7dbf0](https://github.com/SAP/ui5-webcomponents/commit/6b7dbf09dd253de3e399d257441a386dc000c5ff))
+* update tnt/icons to v3.5 & 2.11 ([#10600](https://github.com/SAP/ui5-webcomponents/issues/10600)) ([5d4e3ba](https://github.com/SAP/ui5-webcomponents/commit/5d4e3ba1a74b2f4bea2321371656cbdbebc27975))
+
+
+
+
+
 # [2.7.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.6.2...v2.7.0-rc.0) (2025-01-16)
 
 

package/cypress/specs/Card.cy.ts

@@ -0,0 +1,51 @@
+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>`;
+
+describe("Card header", () => {
+	it("Tests that aria attribute are correct on interactive header", () => {
+		cy.mount(interactiveCardHeader);
+
+		// assert
+		cy.get("#cardHeader1")
+			.shadow()
+			.find(".ui5-card-header-focusable-element")
+			.should("have.attr", "role", "button")
+			.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);
+
+		// assert
+		cy.get("#cardHeader2")
+			.shadow()
+			.find(".ui5-card-header-focusable-element")
+			.should("have.attr", "role", "group")
+			.and("have.attr", "tabindex", "0")
+			.and("have.attr", "aria-roledescription", "Card Header");
+	});
+});

package/cypress/specs/ColorPicker.cy.ts

@@ -24,4 +24,102 @@ describe("Color Picker tests", () => {
 			.find("#alpha")
 			.should("not.exist");
 	});
+
+	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.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#hue")
+			.should("have.attr", "value", "205");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#saturation")
+			.should("have.attr", "value", "65");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#light")
+			.should("have.attr", "value", "66");
+	});
+
+	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.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#hue", "130");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.attr", "value", "rgba(112, 225, 131, 1)");
+	});
+
+	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.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#saturation", "44");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.attr", "value", "rgba(130, 206, 143, 1)");
+	});
+
+	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.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerUpdateInput("#light", "30");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.should("have.attr", "value", "rgba(43, 110, 54, 1)");
+	});
+
+	it("should show correct accessibility info for HSL inputs", () => {
+		cy.mount(html`<ui5-color-picker></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.ui5ColorPickerToggleColorMode();
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#hue")
+			.should("have.attr", "accessible-name", "Hue");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#saturation")
+			.should("have.attr", "accessible-name", "Saturation");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#light")
+			.should("have.attr", "accessible-name", "Light");
+	});
 });

package/cypress/specs/Label.cy.ts

@@ -0,0 +1,128 @@
+import { html } from "lit";
+import "../../src/Label.js";
+import "../../src/Input.js";
+import "../../src/TextArea.js";
+import "../../src/DatePicker.js";
+import "../../test/pages/modules/LabelPageCustomElement.js";
+import {
+	LABEL_COLON,
+} from "../../src/generated/i18n/i18n-defaults.js";
+
+describe("Label", () => {
+	describe("General API ", () => {
+		it("tests initial rendering - root and slot", () => {
+			cy.mount(html`<ui5-label>Basic Label</ui5-label>`);
+			cy.get("[ui5-label]").shadow().find(".ui5-label-root").should("exist");
+			cy.get("[ui5-label]").shadow().find("slot:not([name])");
+		});
+
+		it("should show required star", () => {
+			cy.mount(html`<ui5-label required>Required Label</ui5-label>`);
+			cy.get("[ui5-label]")
+				.shadow()
+				.find(".ui5-label-required-colon")
+				.then($el => {
+					return getComputedStyle($el[0], ":after").content;
+				})
+				.should("equal", `"*"`);
+		});
+
+		it("tests show-colon does not force truncation", () => {
+			cy.mount(html`
+				<ui5-label id="showColon-false">Basic Label</ui5-label>
+				<ui5-label show-colon id="showColon-true">Basic Label</ui5-label>
+			`);
+
+			cy.get("#showColon-true").shadow().find(".ui5-label-text-wrapper").invoke("width")
+				.then($labelWithColonWidth => {
+					cy.get("#showColon-false").shadow().find(".ui5-label-text-wrapper").should("have.css", "width", `${$labelWithColonWidth}px`);
+				});
+		});
+
+		it("should wrap the text of the label by default and truncate when wrappingType is None", () => {
+			cy.mount(html`
+				<ui5-label id="wrapping-label-1" style="width: 200px">Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>
+				<ui5-label id="truncated-label-1" wrapping-type="None" style="width: 200px">Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.</ui5-label>
+			`);
+
+			cy.get("#wrapping-label-1").invoke("height").then($wrappingLabelHeight => {
+				cy.get("#truncated-label-1").invoke("height").should($truncatedLabelHeight => {
+					expect($wrappingLabelHeight).to.be.greaterThan(16);
+					expect($truncatedLabelHeight).to.be.lessThan(17);
+				});
+			});
+		});
+
+		it("colon symbol should be taken from the i18n bundle", () => {
+			cy.mount(html`<ui5-label show-colon id="showColon-true">Basic Label</ui5-label>`);
+
+			cy.get("#showColon-true").shadow().find(".ui5-label-required-colon").then($el => {
+				return getComputedStyle($el[0], ":before").content;
+			})
+				.should("equal", `"${LABEL_COLON.defaultText}"`);
+		});
+	});
+
+	describe("linked element with 'for' property", () => {
+		it("should focus ui5-input on click and set correct aria-label", () => {
+			cy.mount(html`
+				<ui5-label for="form-ui5-input">Label for Input</ui5-label>
+				<ui5-input id="form-ui5-input" style="width: 200px"></ui5-input>
+			`);
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("[ui5-input]").should("be.focused");
+
+			cy.get("[ui5-input]").shadow().find(".ui5-input-inner").should("have.attr", "aria-label", "Label for Input");
+		});
+
+		it("should focus native HTML input on click", () => {
+			cy.mount(html`
+				<ui5-label for="native-input">Label for Native Input</ui5-label>
+				<input id="native-input" />
+			`);
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("#native-input").should("be.focused");
+		});
+
+		it("should focus ui5-textarea on click", () => {
+			cy.mount(html`
+				<ui5-label for="ui5-textarea">Label for Textarea</ui5-label>
+				<ui5-textarea id="ui5-textarea"></ui5-textarea>
+			`);
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("#ui5-textarea").should("be.focused");
+		});
+
+		it("should focus native HTML textarea on click", () => {
+			cy.mount(html`
+				<ui5-label for="native-textarea">Label for Native Textarea</ui5-label>
+				<textarea id="native-textarea"></textarea>
+			`);
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("#native-textarea").should("be.focused");
+		});
+
+		it("should focus ui5-date-picker on click", () => {
+			cy.mount(html`
+				<ui5-label for="ui5-datepicker">Label for Date Picker</ui5-label>
+				<ui5-date-picker id="ui5-datepicker"></ui5-date-picker>
+			`);
+
+			cy.get("[ui5-label]").realClick();
+			cy.get("#ui5-datepicker").should("be.focused");
+		});
+
+		it("should focus within a shadow root", () => {
+			cy.mount(html`
+				<label-page-custom-element id="custom-element-with-label"></label-page-custom-element>
+			`);
+
+			cy.get("#custom-element-with-label").shadow().find("[ui5-label]").realClick();
+			cy.get("#custom-element-with-label").shadow().find("#input").should("be.focused");
+		});
+	});
+});

package/cypress/specs/Tag.cy.ts

@@ -0,0 +1,76 @@
+import { html } from "lit";
+import "../../src/Tag.js";
+import "@ui5/webcomponents-icons/dist/accept.js";
+import {
+	TAG_ROLE_DESCRIPTION,
+	TAG_SUCCESS,
+	TAG_DESCRIPTION_TAG,
+} from "../../src/generated/i18n/i18n-defaults.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.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.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.get("[ui5-tag]").shadow().find(".ui5-tag-text").should("not.exist");
+		});
+	});
+
+	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.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.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.get("#tagWithWrappingNone").shadow().find(".ui5-tag-root").should("have.css", "white-space", "nowrap");
+		});
+	});
+});

package/cypress/specs/Text.cy.ts

@@ -0,0 +1,31 @@
+import { html } from "lit";
+import "../../src/Text.js";
+
+describe("Text", () => {
+	it("tests root element is bdi", () => {
+		cy.mount(html`<ui5-text >Text</ui5-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.get("[ui5-text]").should("have.css", "word-wrap", "break-word");
+	});
+
+	it("tests maxLines default behavior", () => {
+		cy.mount(html`<ui5-text >Text</ui5-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.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.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/Title.cy.ts

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

package/cypress/specs/Toolbar.cy.ts

@@ -122,4 +122,53 @@ describe("Toolbar general interaction", () => {
 			.find(".ui5-tb-overflow-btn-hidden")
 			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
 	});
+
+	it("Should call event handlers on abstract item", () => {
+		cy.mount(html`
+			<ui5-toolbar>
+				<ui5-toolbar-button text="Button 1"></ui5-toolbar-button>
+				<ui5-toolbar-select>
+					<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
+					<ui5-toolbar-select-option selected>2</ui5-toolbar-select-option>
+					<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
+				</ui5-toolbar-select>
+			</ui5-toolbar>
+		`);
+
+		cy.get("ui5-toolbar-button[text='Button 1']")
+			.then(button => {
+				button.get(0).addEventListener("click", cy.stub().as("clicked"));
+			});
+
+		cy.get("ui5-button", { includeShadowDom: true }).contains("Button 1")
+			.click();
+
+		cy.get("@clicked")
+			.should("have.been.calledOnce");
+
+		cy.get("ui5-toolbar-select")
+			.then(select => {
+				select.get(0).addEventListener("ui5-click", cy.stub().as("clicked"));
+				select.get(0).addEventListener("ui5-change", cy.stub().as("changed"));
+				select.get(0).addEventListener("ui5-open", cy.stub().as("opened"));
+				select.get(0).addEventListener("ui5-close", cy.stub().as("closed"));
+			});
+
+		cy.get("ui5-select", { includeShadowDom: true })
+			.click();
+
+		cy.get("@clicked")
+			.should("have.been.calledOnce");
+		cy.get("@opened")
+			.should("have.been.calledOnce");
+
+		cy.get("ui5-option", { includeShadowDom: true })
+			.first()
+			.click();
+
+		cy.get("@changed")
+			.should("have.been.calledOnce");
+		cy.get("@closed")
+			.should("have.been.calledOnce");
+	});
 });

package/cypress/support/commands/ColorPalette.commands.ts

@@ -43,6 +43,7 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 		.shadow()
 		.find("ui5-dialog")
 		.find("ui5-button")
+		.should("have.attr", "design", "Emphasized") // The OK button is Emphasized (the Cancel button is Transparent)
 		.as("okButton");
 
 	cy.get("@redColor")
@@ -59,4 +60,9 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 
 	cy.get("@okButton")
 		.realClick();
+
+	cy.get("@colorPalette")
+		.shadow()
+		.find("ui5-dialog")
+		.should("not.be.visible"); // Make sure the dialog is closed at the end of the command (otherwise the next command will sometimes assert against the old dialog values)
 });

package/cypress/support/commands/ColorPicker.commands.ts

@@ -0,0 +1,24 @@
+Cypress.Commands.add("ui5ColorPickerToggleColorMode", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("colorPicker")
+		.should("be.visible");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#toggle-picker-mode")
+		.realClick();
+});
+
+Cypress.Commands.add("ui5ColorPickerUpdateInput", { prevSubject: true }, (subject, name, value) => {
+	cy.wrap(subject)
+		.as("colorPicker")
+		.should("be.visible");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find(name)
+		.realClick({ clickCount: 2 })
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+		.realType(value)
+		.realPress("Enter");
+});

package/cypress/support/commands.ts

@@ -38,6 +38,7 @@
 
 import { internals, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import "./commands/Menu.commands.js";
+import "./commands/ColorPicker.commands.js";
 import "./commands/ColorPalette.commands.js";
 
 type SimulationDevices = "phone"
@@ -51,6 +52,8 @@ declare global {
 			ui5MenuItemClick(): Chainable<void>
 			ui5DOMRef(): Chainable<void>
 			ui5MenuItemPress(key: any): Chainable<void>
+			ui5ColorPickerToggleColorMode(): Chainable<void>
+			ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
 			ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
 		}
 	}