@ui5/webcomponents 2.7.0-rc.1 → 2.7.0

package/CHANGELOG.md

@@ -3,6 +3,53 @@
 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)
+
+
+### 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)
 
 

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 → Button.cy.tsx}

@@ -1,12 +1,13 @@
-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";
+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()
@@ -15,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");
@@ -40,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");
@@ -69,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");
@@ -91,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");
@@ -112,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");
@@ -169,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");
@@ -199,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");
@@ -213,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()
@@ -225,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()
@@ -237,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");
@@ -268,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()
@@ -280,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()
@@ -293,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");
@@ -311,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()
@@ -324,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");
@@ -349,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()
@@ -359,4 +363,27 @@ describe("Accessibility", () => {
 		cy.get("@button")
 			.should("have.attr", "aria-description", "A long description.");
 	});
+
+	it("button with a badge", () => {
+		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")
+			.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/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")