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

package/CHANGELOG.md

@@ -3,6 +3,58 @@
 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.2](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.1...v2.7.0-rc.2) (2025-01-30)
+
+
+### Bug Fixes
+
+* **f6navigation:** fast navigation in certain container only ([#10485](https://github.com/SAP/ui5-webcomponents/issues/10485)) ([4b2ab63](https://github.com/SAP/ui5-webcomponents/commit/4b2ab63cae9b175f07d266e4150a587756cd7f6c))
+* **ui5-button-badge:** align template ([#10705](https://github.com/SAP/ui5-webcomponents/issues/10705)) ([cacdf54](https://github.com/SAP/ui5-webcomponents/commit/cacdf542c594e8e6e168c77c7622647041e27cd2))
+* **ui5-multi-combobox:** fix valueState background set while typing ([#10586](https://github.com/SAP/ui5-webcomponents/issues/10586)) ([06243e4](https://github.com/SAP/ui5-webcomponents/commit/06243e494715e01230d6efab79b1b3f1212c9ac5)), closes [#10454](https://github.com/SAP/ui5-webcomponents/issues/10454)
+* **ui5-rating-indicator:** allow tab next/prev when readonly ([#10584](https://github.com/SAP/ui5-webcomponents/issues/10584)) ([ad01c1a](https://github.com/SAP/ui5-webcomponents/commit/ad01c1a384f3788c3a14c1ed77de41e4072cd7b9)), closes [#10580](https://github.com/SAP/ui5-webcomponents/issues/10580)
+* **ui5-select:** custom value state message is now visible ([#10647](https://github.com/SAP/ui5-webcomponents/issues/10647)) ([f5d1a8f](https://github.com/SAP/ui5-webcomponents/commit/f5d1a8f89c2b14cc6e753f6e12e1f805e859ac7f)), closes [#10323](https://github.com/SAP/ui5-webcomponents/issues/10323)
+* **ui5-switch:** apply focus only on root element click ([#10588](https://github.com/SAP/ui5-webcomponents/issues/10588)) ([6ff93c5](https://github.com/SAP/ui5-webcomponents/commit/6ff93c5afc4f4320eca0449f91e7a29ba306d05a))
+* **ui5-table:** fix selector column width ([#10640](https://github.com/SAP/ui5-webcomponents/issues/10640)) ([cdcb599](https://github.com/SAP/ui5-webcomponents/commit/cdcb599775c01f562965dcf2343242c8a5fb4aca))
+* **ui5-timepicker:** adapt new private component with internal logic ([#10684](https://github.com/SAP/ui5-webcomponents/issues/10684)) ([d0a45ab](https://github.com/SAP/ui5-webcomponents/commit/d0a45abb899811d549c08cfe1ad40b8f66b7a728))
+
+
+### Features
+
+* **ui5-button:** add badge to ui5-button ([#10642](https://github.com/SAP/ui5-webcomponents/issues/10642)) ([1e693fd](https://github.com/SAP/ui5-webcomponents/commit/1e693fd5b1fc80a5eb7b82a43cf34bd33eccb9fb))
+* **ui5-button:** introduce CSS Shadow parts ([#10628](https://github.com/SAP/ui5-webcomponents/issues/10628)) ([cda7d8b](https://github.com/SAP/ui5-webcomponents/commit/cda7d8b30abf013ea98932ed20848123b025aeaa)), closes [#10611](https://github.com/SAP/ui5-webcomponents/issues/10611)
+* **ui5-colorpicker:** adjust visual design ([#10495](https://github.com/SAP/ui5-webcomponents/issues/10495)) ([600ab25](https://github.com/SAP/ui5-webcomponents/commit/600ab25a0ccf2e69d97bc40f44ac94f4a7e740eb))
+* **ui5-menu:** Enhance keyboard navigation ([#10243](https://github.com/SAP/ui5-webcomponents/issues/10243)) ([34d604d](https://github.com/SAP/ui5-webcomponents/commit/34d604d3e63a4d2a15cdc0a1222c568f379ed333))
+* **ui5-split-button, etc:** introduce new parameters ([#10680](https://github.com/SAP/ui5-webcomponents/issues/10680)) ([af32326](https://github.com/SAP/ui5-webcomponents/commit/af32326a551d5be858e470e374e1c0f6e07c75d1))
+* **ui5-time-picker:** Improve component based on user testing ([#10577](https://github.com/SAP/ui5-webcomponents/issues/10577)) ([e687547](https://github.com/SAP/ui5-webcomponents/commit/e687547045d2d58b91a165f4ef27bcc0c74dbf47))
+* update sap/icons to v5.11.1 & 4.23 ([#10692](https://github.com/SAP/ui5-webcomponents/issues/10692)) ([4545ef7](https://github.com/SAP/ui5-webcomponents/commit/4545ef7998bbd52782d476486957debd633ec1af))
+
+
+
+
+
+# [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/README.md

@@ -16,6 +16,7 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 | Tag                      | `ui5-tag`                   | `import "@ui5/webcomponents/dist/Tag.js";`                 |
 | Busy Indicator           | `ui5-busy-indicator`        | `import "@ui5/webcomponents/dist/BusyIndicator.js";`       |
 | Button                   | `ui5-button`                | `import "@ui5/webcomponents/dist/Button.js";`              |
+| ButtonBadge              | `ui5-button-badge`          | `import "@ui5/webcomponents/dist/ButtonBadge.js";`         |
 | Calendar                 | `ui5-calendar`              | `import "@ui5/webcomponents/dist/Calendar.js";`            |
 | Calendar Date            | `ui5-date`                  | comes with `ui5-calendar`                                  |
 | Calendar Date Range      | `ui5-date-range`            | comes with `ui5-calendar`                                  |
@@ -93,37 +94,41 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 
 ## Provided features
 
-```js
-import "@ui5/webcomponents/dist/features/<FEATURE-NAME>.js
-```
-
-| Affects                                           | Feature Import                                                       | Description                                                                                             |
-|---------------------------------------------------|----------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
-| `ui5-color-palette`                               | `@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js`         | Support for "more colors dialog" for the color palette component                                        |
-| `ui5-input`                                       | `@ui5/webcomponents/dist/features/InputSuggestions.js`               | Support for input suggestions while typing                                                              |
+| Feature name             | Affects                                               | Triggered by                            | Description                                                                                             |
+|--------------------------|-------------------------------------------------------|-----------------------------------------|---------------------------------------------------------------------------------------------------------|
+| More Colors Dialog       | `ui5-color-palette`, `ui5-color-palette-popover`      | Setting `showMoreColors` to `true`      | Support for "more colors dialog" for the color palette component                                        |
+| Input Suggestions        | `ui5-input`, `ui5-multi-input`                        | Setting `showSuggestions` to `true`     | Support for input suggestions while typing                                                              |
 
 ### Color Palette "More Colors" Feature
 
+The `ui5-color-palette` component has a `showMoreColors` property, that, when set to `true`, enables a "More colors" dialog.
+Since this functionality is not always needed, the "More colors" dialog and its children are not direct dependencies of the component by default,
+and are only loaded dynamically when `showMoreColors` is set to `true`.
+
+Feature import (optional as of `2.7.0`): 
+
 ```js
 import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js";
 ```
 
-The `ui5-color-palette` component has a `showMoreColors` property, that, when set to `true`, enables a "More colors" dialog.
-Since this is not always needed, in order to use this dialog, you must import the above feature.
+You can optionally pre-load the feature (thus avoiding the dynamic import), if you prefer so. 
 
 ### Input Suggestions Feature
 
-```js
-import "@ui5/webcomponents/dist/features/InputSuggestions.js";
-```
-
 The `<ui5-input>` element acts as an `<input>` with the Fiori design and added functionality, such as value state.
 
 The so-called "input suggestions" is an advanced feature that allows the user to choose from a list of predefined options while typing.
 Since input suggestions may not always be needed, they do not come as part of the `<ui5-input>` itself.
 
-To enable the functionality, import the above module into your app. This will also automatically import `ui5-suggestion-item`
-for your convenience.
+Setting the `showSuggestions` property to `true` loads the suggestions feature dynamically (as well as the `ui5-suggestion-item` component) for your convenience.
+
+Feature import (optional as of `2.7.0`):  
+
+```js
+import "@ui5/webcomponents/dist/features/InputSuggestions.js";
+```
+
+You can optionally pre-load the feature (thus avoiding the dynamic import), if you prefer so.
 
 ## Resources
 - [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)

package/cypress/specs/Button.cy.ts

@@ -1,5 +1,6 @@
 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";
@@ -359,4 +360,25 @@ describe("Accessibility", () => {
 		cy.get("@button")
 			.should("have.attr", "aria-description", "A long description.");
 	});
+
+	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.get("[ui5-button]")
+			.find("ui5-button-badge")
+			.as("badge");
+
+		cy.get("@badge")
+			.shadow()
+			.find("ui5-tag")
+			.as("tag");
+
+		cy.get("@tag")
+			.should("have.attr", "design", "Critical");
+
+		cy.get("@tag")
+			.should("have.text", "999+");
+	});
 });

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/ColorPalette.cy.ts

@@ -1,7 +1,6 @@
 import { html } from "lit";
 import "../../src/ColorPalette.js";
 import "../../src/ColorPaletteItem.js";
-import "../../src/features/ColorPaletteMoreColors.js";
 
 describe("Color Palette tests", () => {
 	it("internal color picker should have selected color set on open", () => {

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/Dialog.cy.ts

@@ -0,0 +1,42 @@
+import { html } from "lit";
+import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
+import "../../src/Dialog.js";
+
+describe("Keyboard", () => {
+	it("F6 navigation", () => {
+		cy.mount(html`
+	<button data-sap-ui-fastnavgroup="true" id="test"></button>
+	<ui5-dialog open>
+			<div data-sap-ui-fastnavgroup="true">
+				<button id="first">First group focusable</button>
+			</div>
+			<div data-sap-ui-fastnavgroup="true">
+				<button id="second">Second group focusable</button>
+			</div>
+	</ui5-dialog>
+	<button data-sap-ui-fastnavgroup="true"></button>`);
+
+		cy.get("#first")
+			.should("be.focused");
+
+		cy.realPress(["Shift", "F6"]);
+
+		cy.get("#second")
+			.should("be.focused");
+
+		cy.realPress(["Shift", "F6"]);
+
+		cy.get("#first")
+			.should("be.focused");
+
+		cy.realPress("F6");
+
+		cy.get("#second")
+			.should("be.focused");
+
+		cy.realPress("F6");
+
+		cy.get("#first")
+			.should("be.focused");
+	});
+});

package/cypress/specs/ExpandableText.cy.ts

@@ -376,7 +376,8 @@ describe("ExpandableText", () => {
 
 			cy.get("@rpo")
 				.contains("[slot=footer] [ui5-button]", EXPANDABLE_TEXT_CLOSE.defaultText)
-				.should("exist");
+				.should("exist")
+				.and("be.visible");
 
 			cy.get("@rpo")
 				.contains("[slot=footer] [ui5-button]", EXPANDABLE_TEXT_CLOSE.defaultText)

package/cypress/specs/F6.cy.ts

@@ -27,7 +27,7 @@ describe("F6 navigation", () => {
 				<div class="section">
 					<ui5-button>After Element</ui5-button>
 				</div>
-			</div`);
+			</div>`);
 
 			// act
 			cy.get("#before").focus();
@@ -94,7 +94,7 @@ describe("F6 navigation", () => {
 				<div class="section">
 					<ui5-button>After Element</ui5-button>
 				</div>
-			</div`);
+			</div>`);
 
 			// act
 			cy.get("#before").focus();
@@ -149,7 +149,7 @@ describe("F6 navigation", () => {
 				<div class="section">
 					<ui5-button>After Element</ui5-button>
 				</div>
-			</div`);
+			</div>`);
 
 			// act
 			cy.get("#before").focus();
@@ -421,7 +421,7 @@ describe("F6 navigation", () => {
 				<div class="section">
 					<ui5-button>After Element</ui5-button>
 				</div>
-			</div`);
+			</div>`);
 
 			// act
 			cy.get("#before").focus();
@@ -488,7 +488,7 @@ describe("F6 navigation", () => {
 				<div class="section">
 					<ui5-button>After Element</ui5-button>
 				</div>
-			</div`);
+			</div>`);
 
 			// act
 			cy.get("#before").focus();
@@ -543,7 +543,7 @@ describe("F6 navigation", () => {
 				<div class="section">
 					<ui5-button>After Element</ui5-button>
 				</div>
-			</div`);
+			</div>`);
 
 			// act
 			cy.get("#before").focus();
@@ -790,4 +790,72 @@ describe("F6 navigation", () => {
 				.should("be.focused");
 		});
 	});
+
+	describe("Groups in container", () => {
+		it("tests forward navigation", () => {
+			cy.mount(html`<div>
+		<div class="section" data-sap-ui-fastnavgroup="true">
+			<ui5-button>Non group focusable</ui5-button>
+		</div>
+		<div data-sap-ui-fastnavgroup-container="true" data-sap-ui-fastnavgroup="true">
+			<div class="section" data-sap-ui-fastnavgroup="true">
+				<ui5-button id="first">First group focusable</ui5-button>
+			</div>
+			<div class="section" data-sap-ui-fastnavgroup="true">
+				<ui5-button id="second">Second group focusable</ui5-button>
+			</div>
+		</div>
+		<div class="section" data-sap-ui-fastnavgroup="true">
+			<ui5-button>Non group focusable</ui5-button>
+		</div>
+	</div>`);
+
+			// act
+			cy.get("#first")
+				.realClick();
+
+			cy.realPress("F6");
+
+			cy.get("#second")
+				.should("be.focused");
+
+			cy.realPress("F6");
+
+			cy.get("#first")
+				.should("be.focused");
+		});
+
+		it("tests backward navigation", () => {
+			cy.mount(html`<div>
+		<div class="section" data-sap-ui-fastnavgroup="true">
+			<ui5-button>Non group focusable</ui5-button>
+		</div>
+		<div data-sap-ui-fastnavgroup-container="true">
+			<div class="section" data-sap-ui-fastnavgroup="true">
+				<ui5-button id="first">First group focusable</ui5-button>
+			</div>
+			<div class="section" data-sap-ui-fastnavgroup="true">
+				<ui5-button id="second">Second group focusable</ui5-button>
+			</div>
+		</div>
+		<div class="section" data-sap-ui-fastnavgroup="true">
+			<ui5-button>Non group focusable</ui5-button>
+		</div>
+	</div>`);
+
+			// act
+			cy.get("#first")
+				.realClick();
+
+			cy.realPress(["Shift", "F6"]);
+
+			cy.get("#second")
+				.should("be.focused");
+
+			cy.realPress(["Shift", "F6"]);
+
+			cy.get("#first")
+				.should("be.focused");
+		});
+	});
 });

package/cypress/specs/Input.cy.ts

@@ -1,7 +1,6 @@
 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";

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");
+		});
+	});
+});