@ui5/webcomponents 0.0.0-35e2c9666 → 0.0.0-37338d49d

package/README.md

@@ -1,8 +1,5 @@
-![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/master/docs/images/UI5_logo_wide.png)
+# ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_water.png)UI5 Web Components - Main
 
-# UI5 Web Components - Main
-
-[![Travis CI Build Status](https://travis-ci.org/SAP/ui5-webcomponents.svg?branch=master)](https://travis-ci.org/SAP/ui5-webcomponents)
 [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents)
 
 Provides general purpose UI building blocks such as buttons, labels, inputs and popups.
@@ -13,21 +10,25 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 |--------------------------|-----------------------------|------------------------------------------------------------|
 | Avatar                   | `ui5-avatar`                | `import "@ui5/webcomponents/dist/Avatar.js";`              |
 | Avatar Group             | `ui5-avatar-group`          | `import "@ui5/webcomponents/dist/AvatarGroup.js";`         |
-| Badge                    | `ui5-badge`                 | `import "@ui5/webcomponents/dist/Badge.js";`               |
+| Bar                      | `ui5-bar`                   | `import "@ui5/webcomponents/dist/Bar.js";`                 |
 | Breadcrumbs              | `ui5-breadcrumbs`           | `import "@ui5/webcomponents/dist/Breadcrumbs.js";`         |
 | Breadcrumbs Item         | `ui5-breadcrumbs-item`      | comes with `ui5-breadcrumbs`                               |
-| Badge                    | `ui5-badge`                 | `import "@ui5/webcomponents/dist/Badge.js";`               |
+| 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";`              |
 | Calendar                 | `ui5-calendar`              | `import "@ui5/webcomponents/dist/Calendar.js";`            |
-| Calendar Date            | `ui5-calendar-date`         | comes with `ui5-calendar`                                  |
+| Calendar Date            | `ui5-date`                  | comes with `ui5-calendar`                                  |
+| Calendar Date Range      | `ui5-date-range`            | comes with `ui5-calendar`                                  |
+| Calendar Special Date    | `ui5-date-special`          | comes with `ui5-calendar`                                  |
+| Calendar Legend          | `ui5-calendar-legend`       | `import "@ui5/webcomponents/dist/CalendarLegend.js";`      |
+| Calendar Legend Item     | `ui5-calendar-legend-item`  | comes with `ui5-calendar-legend`                           |
 | Card                     | `ui5-card`                  | `import "@ui5/webcomponents/dist/Card.js";`                |
 | CardHeader               | `ui5-card-header`           | `import "@ui5/webcomponents/dist/CardHeader.js";`          |
 | Carousel                 | `ui5-carousel`              | `import "@ui5/webcomponents/dist/Carousel.js";`            |
 | Checkbox                 | `ui5-checkbox`              | `import "@ui5/webcomponents/dist/CheckBox.js";`            |
 | Color Palette            | `ui5-color-palette`         | `import "@ui5/webcomponents/dist/ColorPalette.js";`        |
 | Color Palette Item       | `ui5-color-palette-item`    | comes with `ui5-color-palette`                             |
-| Color Palette Popover    | `ui5-color-palette-popover` | comes with `ui5-color-palette-popover`                     |
+| Color Palette Popover    | `ui5-color-palette-popover` | `import "@ui5/webcomponents/dist/ColorPalettePopover.js";` |
 | Color Picker             | `ui5-color-picker`          | `import "@ui5/webcomponents/dist/ComboPicker.js";`         |
 | ComboBox                 | `ui5-combobox`              | `import "@ui5/webcomponents/dist/ComboBox.js";`            |
 | ComboBox Item            | `ui5-cb-item`               | comes with `ui5-combobox`                                  |
@@ -42,12 +43,16 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 | Label                    | `ui5-label`                 | `import "@ui5/webcomponents/dist/Label.js";`               |
 | Link                     | `ui5-link`                  | `import "@ui5/webcomponents/dist/Link.js";`                |
 | List                     | `ui5-list`                  | `import "@ui5/webcomponents/dist/List.js";`                |
-| List - Standard Item     | `ui5-li`                    | `import "@ui5/webcomponents/dist/StandardListItem.js";`    |
-| List - Custom Item       | `ui5-li-custom`             | `import "@ui5/webcomponents/dist/CustomListItem.js";`      |
-| List - Group Header Item | `ui5-li-groupheader`        | `import "@ui5/webcomponents/dist/GroupHeaderListItem.js";` |
-| Message Strip            | `ui5-message-strip`          | `import "@ui5/webcomponents/dist/MessageStrip.js";`        |
+| List - Standard Item     | `ui5-li`                    | `import "@ui5/webcomponents/dist/ListItemStandard.js";`    |
+| List - Custom Item       | `ui5-li-custom`             | `import "@ui5/webcomponents/dist/ListItemCustom.js";`      |
+| List - Group Item        | `ui5-li-group`              | `import "@ui5/webcomponents/dist/ListItemGroup.js";`       |
+| Menu                     | `ui5-menu`                  | `import "@ui5/webcomponents/dist/Menu.js";`                |
+| Menu Item                | `ui5-menu-item`             | comes with `ui5-menu`                                      |
+| Menu Separator           | `ui5-menu-separator`        | comes with `ui5-menu`                                      |
+| Message Strip            | `ui5-message-strip`         | `import "@ui5/webcomponents/dist/MessageStrip.js";`        |
 | Multi ComboBox           | `ui5-multi-combobox`        | `import "@ui5/webcomponents/dist/MultiComboBox.js";`       |
 | Multi ComboBox Item      | `ui5-mcb-item`              | comes with `ui5-multi-combobox`                            |
+| Multi ComboBox Item Group| `ui5-mcb-item-group`        | comes with `ui5-multi-combobox`                            |
 | Multi Input              | `ui5-multi-input`           | `import "@ui5/webcomponents/dist/MultiInput.js";`          |
 | Panel                    | `ui5-panel`                 | `import "@ui5/webcomponents/dist/Panel.js";`               |
 | Popover                  | `ui5-popover`               | `import "@ui5/webcomponents/dist/Popover.js";`             |
@@ -68,26 +73,23 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
 | Tab Container            | `ui5-tabcontainer`          | `import "@ui5/webcomponents/dist/TabContainer.js";`        |
 | Tab                      | `ui5-tab`                   | `import "@ui5/webcomponents/dist/Tab.js";`                 |
 | Tab Separator            | `ui5-tab-separator`         | `import "@ui5/webcomponents/dist/TabSeparator.js";`        |
-| Table                    | `ui5-table`                 | `import "@ui5/webcomponents/dist/Table.js";`               |
-| Table Column             | `ui5-table-column`          | `import "@ui5/webcomponents/dist/TableColumn.js";`         |
-| Table Row                | `ui5-table-row`             | `import "@ui5/webcomponents/dist/TableRow.js";`            |
-| Table Group Row          | `ui5-table-group-row`       | `import "@ui5/webcomponents/dist/TableGroupRow.js";`       |
-| Table Cell               | `ui5-table-cell`            | `import "@ui5/webcomponents/dist/TableCell.js";`           |
 | Textarea                 | `ui5-textarea`              | `import "@ui5/webcomponents/dist/TextArea.js";`            |
 | TimePicker               | `ui5-time-picker`           | `import "@ui5/webcomponents/dist/TimePicker.js";`          |
 | Title                    | `ui5-title`                 | `import "@ui5/webcomponents/dist/Title.js";`               |
 | Toast                    | `ui5-toast`                 | `import "@ui5/webcomponents/dist/Toast.js";`               |
 | Toggle Button            | `ui5-toggle-button`         | `import "@ui5/webcomponents/dist/ToggleButton.js";`        |
+| Token                    | `ui5-token`                 | comes with `ui5-multi-input`                               |
 | Tree                     | `ui5-tree`                  | `import "@ui5/webcomponents/dist/Tree.js";`                |
 | Tree Item                | `ui5-tree-item`             | comes with `ui5-tree`                                      |
+| Tree Item Custom         | `ui5-tree-item-custom`      | comes with `ui5-tree`                                      |
 
 ## Provided assets
 
 `import "@ui5/webcomponents/dist/Assets.js";`
 
 | Assets | Module | Notes
-|------------|-----------|----------- 
-| `i18n`, `themes` | `@ui5/webcomponents/dist/Assets.js` | Theming parameters and translations for the components  <br><br> *Automatically imports also:<br> `@ui5/webcomponents-localization/dist/Assets.js` <br> and <br> `@ui5/webcomponents-theming/dist/Assets.js`*
+|------------|-----------|-----------
+| `i18n`, `themes` | `@ui5/webcomponents/dist/Assets.js` | Theming parameters and translations for the components  <br/><br/> *Automatically imports also:<br/> `@ui5/webcomponents-localization/dist/Assets.js` <br/> and <br/> `@ui5/webcomponents-theming/dist/Assets.js`*
 
 ## Provided features
 
@@ -99,7 +101,6 @@ import "@ui5/webcomponents/dist/features/<FEATURE-NAME>.js
 |---------------------------------------------------|----------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
 | `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                                                              |
-| Multiple (`ui5-input`, `ui5-date-picker`, etc...) | `@ui5/webcomponents/dist/features/InputElementsFormSupport.js`       | Support for using input components in forms                                                             |
 
 ### Color Palette "More Colors" Feature
 
@@ -124,44 +125,17 @@ Since input suggestions may not always be needed, they do not come as part of th
 To enable the functionality, import the above module into your app. This will also automatically import `ui5-suggestion-item`
 for your convenience.
 
-### Form Support Feature
-
-```js
-import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
-```
-
-HTML ```<form>``` only submits a couple of standard HTML elements such as `<input>` and `<textarea>` to name a few.
-
-Web Components that function as inputs, such as UI5's `<ui5-input>`, `<ui5-checkbox>`, `<ui5-textarea>` are therefore
-not submitted by the form out of the box.
-
-Generally, this is not an issue, as very few modern applications submit forms in the classic way.
-
-However, if you need to submit forms, you can import the module above, and it will enrich:
-- `ui5-input`
-- `ui5-textarea`
-- `ui5-checkbox`
-- `ui5-radio-button`
-- `ui5-date-picker`
-- `ui5-select`
-
-with functionality, allowing them to be submitted in forms (provided you set their <code>name</code> attribute) just as
-any standard HTML input element would be.
-
-In addition, the `ui5-button` element will be able to submit the closest ```form``` it's placed in, provided you set its `submits` attribute.
-
-
 ## Resources
-- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/master/README.md)
+- [UI5 Web Components - README.md](https://github.com/SAP/ui5-webcomponents/blob/main/README.md)
 - [UI5 Web Components - Home Page](https://sap.github.io/ui5-webcomponents)
-- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/playground/)
+- [UI5 Web Components - Playground and API Reference](https://sap.github.io/ui5-webcomponents/play/)
 
 ## Support
-We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://join-ui5-slack.herokuapp.com/).
+We welcome all comments, suggestions, questions, and bug reports. Please follow our [Support Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/SUPPORT.md#-content) on how to report an issue, or chat with us in the `#webcomponents` channel of the [OpenUI5 Community Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/).
 
 ## Contribute
-Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/master/docs/6-contributing/02-conventions-and-guidelines.md).
+Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents/blob/main/docs/6-contributing/02-conventions-and-guidelines.md).
 
 ## License
 Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.
-This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/master/LICENSE.txt) file.
+This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the [LICENSE](https://github.com/SAP/ui5-webcomponents/blob/main/LICENSE.txt) file.

package/cypress/specs/Button.cy.ts

@@ -0,0 +1,362 @@
+import { html } from "lit";
+import "../../src/Button.js";
+import type Button from "../../src/Button.js";
+import "@ui5/webcomponents-icons/dist/download.js";
+import "@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.get<Button>("[ui5-button]")
+			.shadow()
+			.find(".ui5-button-text>bdi>slot")
+			.should("have.length", 1, "Button text is not rendered");
+	});
+
+	it("tests button's icon rendering", () => {
+		cy.mount(html`<ui5-button>Action Bar Button</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.then($button => {
+				$button.attr("icon", "add");
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find(".ui5-button-icon")
+			.should("exist", "icon is present");
+
+		cy.get("@button")
+			.then($button => {
+				$button.attr("icon", "");
+			});
+
+		cy.get("@button")
+			.shadow()
+			.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.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.then($button => {
+				$button.attr("end-icon", "add");
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find(".ui5-button-end-icon")
+			.should("exist", "endIon is present");
+
+		cy.get("@button")
+			.then($button => {
+				$button.attr("end-icon", "");
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find(".ui5-button-end-icon")
+			.should("not.exist", "endIon is not present");
+	});
+
+	it("tests click event", () => {
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.then(button => {
+				button.get(0).addEventListener("click", cy.stub().as("clicked"));
+			});
+
+		cy.get("@button")
+			.realClick();
+
+		cy.realPress("Space");
+
+		cy.realPress("Enter");
+
+		cy.get("@clicked")
+			.should("have.been.calledThrice");
+	});
+
+	it("tests keyboard shortcuts used to prevent a click event", () => {
+		cy.mount(html`<ui5-button>Text</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.realClick();
+
+		cy.get("@button")
+			.then(button => {
+				button.get(0).addEventListener("click", cy.stub().as("clicked"));
+			});
+
+		cy.realPress(["Space", "Shift"]);
+		cy.realPress(["Space", "Escape"]);
+
+		cy.get("@clicked")
+			.should("not.been.called");
+	});
+
+	it("tests button's icon only rendering", () => {
+		cy.mount(html`<ui5-button icon="home"><!----><!----></ui5-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.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.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.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.then(button => {
+				button.get(0).addEventListener("click", cy.stub().as("clicked"));
+			});
+
+		// don't test space and enter, as wdio always fires a click but the browser not.
+		// await button.keys("Space");
+		// await button.keys("Enter");
+		cy.get("@button")
+			.realClick();
+
+		cy.get("@clicked")
+			.should("not.called");
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.as("nativeButton");
+
+		cy.get("@nativeButton")
+			.should("have.attr", "disabled");
+
+		cy.get("@nativeButton")
+			.should("not.have.attr", "tabindex");
+	});
+
+	it("tests clicking on disabled button with Icon", () => {
+		cy.mount(html`<ui5-button icon="employee" disabled></ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.then(button => {
+				button.get(0).addEventListener("click", cy.stub().as("clicked"));
+			});
+
+		cy.get("@button")
+			.scrollIntoView();
+
+		cy.get("@button")
+			.realClick();
+
+		cy.get("@clicked")
+			.should("not.called");
+
+		cy.get("@button")
+			.shadow()
+			.find("[ui5-icon]")
+			.should("be.visible")
+			.realClick();
+
+		cy.get("@clicked")
+			.should("not.called");
+	});
+
+	it("tests button with text icon role", () => {
+		cy.mount(html`<ui5-button design="Attention" icon="message-warning">Warning</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.shadow()
+			.find("[ui5-icon]")
+			.should("have.attr", "mode", "Decorative");
+	});
+});
+
+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.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "title", "Go home");
+	});
+
+	it("tooltip from inner icon is propagated", () => {
+		cy.mount(html`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "title", "Download");
+	});
+
+	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.get("[ui5-button]")
+			.as("button");
+
+		cy.get<Button>("@button")
+			.then($el => {
+				$el.get(0).accessibilityAttributes = {
+					expanded: "true",
+				};
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-expanded", "true");
+
+		cy.get<Button>("@button")
+			.then($el => {
+				$el.get(0).accessibilityAttributes = {
+					expanded: "false",
+				};
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-expanded", "false");
+	});
+
+	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.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "role", "link");
+	});
+
+	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.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "role", "button");
+	});
+
+	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.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-describedby", hiddenTextTypeId);
+
+		cy.get("@button")
+			.shadow()
+			.find(`span[id="${hiddenTextTypeId}"]`)
+			.should("exist");
+	});
+
+	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.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "aria-label", "Download Application");
+	});
+
+	it("aria-haspopup and aria-controls are properly applied on the button tag", () => {
+		cy.mount(html`<ui5-button>Show Registration Dialog</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get<Button>("@button")
+			.then($el => {
+				$el.get(0).accessibilityAttributes = {
+					hasPopup: "dialog",
+					controls: "registration-dialog",
+				};
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-haspopup", "dialog");
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-controls", "registration-dialog");
+	});
+
+	it("setting accessible-description is applied to button tag", () => {
+		cy.mount(html`<ui5-button accessible-description="A long description."></ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "aria-description", "A long description.");
+	});
+});

package/cypress/specs/ColorPalette.cy.ts

@@ -0,0 +1,47 @@
+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", () => {
+		cy.mount(html`<ui5-color-palette show-more-colors show-recent-colors>
+<ui5-color-palette-item id="named" value="red"></ui5-color-palette-item>
+<ui5-color-palette-item id="rgba" value="rgba(0, 255, 0, 0.5)"></ui5-color-palette-item>
+<ui5-color-palette-item id="rgb" value="rgb(0,0,255)"></ui5-color-palette-item>
+<ui5-color-palette-item id="hex" value="#C0FFEE"></ui5-color-palette-item>
+</ui5-color-palette>`);
+
+		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",
+			});
+	});
+});

package/cypress/specs/ColorPicker.cy.ts

@@ -0,0 +1,27 @@
+import { html } from "lit";
+import "../../src/ColorPicker.js";
+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 simplified></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-hex-input")
+			.should("exist");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#red")
+			.should("not.exist");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#alpha")
+			.should("not.exist");
+	});
+});

package/cypress/specs/ComboBox.cy.ts

@@ -0,0 +1,22 @@
+import { html } from "lit";
+import "../../src/ComboBox.js";
+import "../../src/ComboBoxItem.js";
+
+describe("Security", () => {
+	it("tests setting malicious text to items", () => {
+		cy.mount(html`
+			<ui5-combobox>
+				<ui5-cb-item text="<script>alert('XSS')</script>"></ui5-cb-item>
+				<ui5-cb-item text="<b onmouseover=alert('XSS')></b>"></ui5-cb-item>
+				<ui5-cb-item text="Albania<button onClick='alert(1)'>alert</button>"></ui5-cb-item>
+			</ui5-combobox>
+		`);
+
+		cy.get("ui5-cb-item").eq(0).shadow().find(".ui5-li-title")
+			.should("have.text", "<script>alert('XSS')</script>");
+		cy.get("ui5-cb-item").eq(1).shadow().find(".ui5-li-title")
+			.should("have.text", "<b onmouseover=alert('XSS')></b>");
+		cy.get("ui5-cb-item").eq(2).shadow().find(".ui5-li-title")
+			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
+	});
+});