From d044f81d5c818eb28b09518e76b92e4a94b4394a Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Sun, 28 Jun 2026 03:23:30 +0300
Subject: [PATCH 1/7] fix(ui5-file-uploader): announce value state message to
 screen readers

Issue:
- The value state message of ui5-file-uploader was not announced by
  screen readers (NVDA, JAWS) when the component received focus.
- Unlike ui5-input, the native input type file had no aria-describedby
  link to the value state text, so AT had no way to discover the message
  regardless of whether the visual popover was open.

Solution:
- Added an ariaValueStateHiddenText getter that composes the full AT
  announcement string from the value state type label and the message
  text, mirroring the existing pattern in ui5-input.
- Added ariaDescribedBy to accInfo, pointing to valueStateDesc when a
  value state is active.
- Added a hidden span with id valueStateDesc in FileUploaderTemplate
  within the same shadow root as the native input, so the
  aria-describedby reference resolves correctly across renders.
- The hidden span is intentionally placed in FileUploaderTemplate and
  not in FileUploaderPopoverTemplate, as aria-describedby cannot cross
  shadow DOM boundaries into the popover's own shadow root.

Fixed: https://github.com/UI5/webcomponents/issues/13549
---
 packages/main/src/FileUploader.ts          | 30 ++++++++++++++++++++++
 packages/main/src/FileUploaderTemplate.tsx |  4 +++
 2 files changed, 34 insertions(+)

diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts
index 1c55c49063d3..5a8d4aad18b6 100644
--- a/packages/main/src/FileUploader.ts
+++ b/packages/main/src/FileUploader.ts
@@ -35,6 +35,10 @@ import {
 	VALUE_STATE_INFORMATION,
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
+	VALUE_STATE_TYPE_SUCCESS,
+	VALUE_STATE_TYPE_INFORMATION,
+	VALUE_STATE_TYPE_ERROR,
+	VALUE_STATE_TYPE_WARNING,
 	FILEUPLOADER_DEFAULT_PLACEHOLDER,
 	FILEUPLOADER_DEFAULT_MULTIPLE_PLACEHOLDER,
 	FILEUPLOADER_ROLE_DESCRIPTION,
@@ -624,9 +628,35 @@ class FileUploader extends UI5Element implements IFormInputElement {
 			"ariaHasPopup": "dialog",
 			"ariaLabel": getAllAccessibleNameRefTexts(this) || getEffectiveAriaLabelText(this) || getAssociatedLabelForTexts(this) || undefined,
 			"ariaDescription": getAllAccessibleDescriptionRefTexts(this) || getEffectiveAriaDescriptionText(this) || undefined,
+			"ariaDescribedBy": this.hasValueState ? "valueStateDesc" : undefined,
 		};
 	}
 
+	get valueStateTypeMappings(): Record<string, string> {
+		return {
+			"Positive": FileUploader.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
+			"Information": FileUploader.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
+			"Negative": FileUploader.i18nBundle.getText(VALUE_STATE_TYPE_ERROR),
+			"Critical": FileUploader.i18nBundle.getText(VALUE_STATE_TYPE_WARNING),
+		};
+	}
+
+	get ariaValueStateHiddenText(): string | undefined {
+		if (!this.hasValueState) {
+			return undefined;
+		}
+
+		const valueStateType = this.valueStateTypeMappings[this.valueState];
+
+		if (this.shouldDisplayDefaultValueStateMessage) {
+			return this.valueStateText ? `${valueStateType} ${this.valueStateText}` : valueStateType;
+		}
+
+		return this.valueStateMessage.length
+			? `${valueStateType} ${this.valueStateMessage.map(el => el.textContent).join(" ")}`
+			: valueStateType;
+	}
+
 	get inputTitle(): string {
 		return FileUploader.i18nBundle.getText(FILEUPLOADER_INPUT_TOOLTIP);
 	}
diff --git a/packages/main/src/FileUploaderTemplate.tsx b/packages/main/src/FileUploaderTemplate.tsx
index bbceeaa01d3d..a54954d0ca88 100644
--- a/packages/main/src/FileUploaderTemplate.tsx
+++ b/packages/main/src/FileUploaderTemplate.tsx
@@ -35,10 +35,14 @@ export default function FileUploaderTemplate(this: FileUploader) {
 						aria-description={this.accInfo.ariaDescription}
 						aria-required={this.accInfo.ariaRequired}
 						aria-invalid={this.accInfo.ariaInvalid}
+						aria-describedby={this.accInfo.ariaDescribedBy}
 						onClick={this._onNativeInputClick}
 						onChange={this._onChange}
 						data-sap-focus-ref
 					/>
+					{this.hasValueState &&
+						<span id="valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
+					}
 				</div>
 
 				{this.hideInput ? (

From 4b9ae7ed8ec60cccada4bc124a4c4cbfd1d0a582 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Sun, 28 Jun 2026 03:29:03 +0300
Subject: [PATCH 2/7] fix(ui5-file-uploader): announce value state message to
 screen readers

---
 .../main/cypress/specs/FileUploader.cy.tsx    | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/main/cypress/specs/FileUploader.cy.tsx b/packages/main/cypress/specs/FileUploader.cy.tsx
index b2537c4decec..280b0611b7d0 100644
--- a/packages/main/cypress/specs/FileUploader.cy.tsx
+++ b/packages/main/cypress/specs/FileUploader.cy.tsx
@@ -478,6 +478,31 @@ describe("Interaction", () => {
 });
 
 describe("Accessibility", () => {
+	it("value state hidden text contains type label and default message", () => {
+		cy.mount(
+			<FileUploader id="uploader" value-state="Negative"></FileUploader>
+		);
+
+		cy.get("#uploader")
+			.shadow()
+			.find("#valueStateDesc")
+			.should("have.text", "Value State Error Invalid entry");
+	});
+
+	it("value state hidden text contains type label and custom message", () => {
+		cy.mount(
+			<FileUploader id="uploader" value-state="Negative">
+				<div slot="valueStateMessage">Custom error message.</div>
+			</FileUploader>
+		);
+
+		cy.get("#uploader")
+			.shadow()
+			.find("#valueStateDesc")
+			.should("include.text", "Value State Error")
+			.and("include.text", "Custom error message.");
+	});
+
 	it("A11y attributes", () => {
 		cy.mount(
 			<>

From 0667895b20a5be5c93b036acb4b973b446608ea3 Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski <boyan.rakilovski@sap.com>
Date: Thu, 9 Jul 2026 09:56:56 +0300
Subject: [PATCH 3/7] fix(ui5-file-uploader): announce value state message to
 screen readers

---
 packages/main/src/FileUploader.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts
index 5a8d4aad18b6..9f8f14218861 100644
--- a/packages/main/src/FileUploader.ts
+++ b/packages/main/src/FileUploader.ts
@@ -59,6 +59,8 @@ import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 
 const convertBytesToMegabytes = (bytes: number) => (bytes / 1024) / 1024;
 
+type MappedValueState = Exclude<`${ValueState}`, "None">;
+
 type FileData = {
 	fileName: string,
 	fileSize: number,
@@ -632,7 +634,7 @@ class FileUploader extends UI5Element implements IFormInputElement {
 		};
 	}
 
-	get valueStateTypeMappings(): Record<string, string> {
+	get valueStateTypeMappings(): Record<MappedValueState, string> {
 		return {
 			"Positive": FileUploader.i18nBundle.getText(VALUE_STATE_TYPE_SUCCESS),
 			"Information": FileUploader.i18nBundle.getText(VALUE_STATE_TYPE_INFORMATION),
@@ -646,7 +648,7 @@ class FileUploader extends UI5Element implements IFormInputElement {
 			return undefined;
 		}
 
-		const valueStateType = this.valueStateTypeMappings[this.valueState];
+		const valueStateType = this.valueStateTypeMappings[this.valueState as MappedValueState];
 
 		if (this.shouldDisplayDefaultValueStateMessage) {
 			return this.valueStateText ? `${valueStateType} ${this.valueStateText}` : valueStateType;
@@ -675,7 +677,7 @@ class FileUploader extends UI5Element implements IFormInputElement {
 		return this.placeholder ?? (this.multiple ? multiplePlaceholder : singlePlaceholder);
 	}
 
-	get valueStateTextMappings(): Record<string, string> {
+	get valueStateTextMappings(): Record<MappedValueState, string> {
 		return {
 			"Positive": FileUploader.i18nBundle.getText(VALUE_STATE_SUCCESS),
 			"Information": FileUploader.i18nBundle.getText(VALUE_STATE_INFORMATION),
@@ -684,8 +686,8 @@ class FileUploader extends UI5Element implements IFormInputElement {
 		};
 	}
 
-	get valueStateText(): string {
-		return this.valueStateTextMappings[this.valueState];
+	get valueStateText(): string | undefined {
+		return this.valueStateTextMappings[this.valueState as MappedValueState];
 	}
 
 	get hasValueState(): boolean {

From c93f2b7e732bf11685f6a3479fe9815a48d42bdc Mon Sep 17 00:00:00 2001
From: Diana <diana.petcheva@sap.com>
Date: Tue, 7 Jul 2026 16:22:11 +0300
Subject: [PATCH 4/7] fix(ui5-calendar): select correct day in other month
 (#13786)

Issue:
Clicking a date from the prev/next month would select the wrong date. On mousedown, the calendar navigates to the prev/next month and re-renders before the click event fires. The click handler then reads the outdated data-sap-timestamp (whatever date that's currenlty at that grid position in the new month), and selects that instead of the originally clicked date.

Solution:
Use the timestamp already set by _onmousedown instead of re-reading from the DOM on mouse clicks, and restore focus after the re-render when an other-month date was clicked.

Fixes: #13760
---
 packages/main/cypress/specs/Calendar.cy.tsx | 18 ++++++++++++++++++
 packages/main/src/DayPicker.ts              | 16 ++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/main/cypress/specs/Calendar.cy.tsx b/packages/main/cypress/specs/Calendar.cy.tsx
index 9ed1429585ac..cabc564f7a6f 100644
--- a/packages/main/cypress/specs/Calendar.cy.tsx
+++ b/packages/main/cypress/specs/Calendar.cy.tsx
@@ -1761,6 +1761,24 @@ describe("Day Picker Tests", () => {
 			});
 	});
 
+	it("clicking on a day in the next month selects that day and moves focus to it", () => {
+		// February 2026: the last row shows March 1 - 14 as other-month days
+		const date = new Date(Date.UTC(2026, 1, 14, 0, 0, 0));
+		cy.mount(getDefaultCalendar(date));
+
+		const march1Timestamp = new Date(Date.UTC(2026, 2, 1, 0, 0, 0)).valueOf() / 1000;
+
+		cy.ui5CalendarGetDay("#calendar1", march1Timestamp.toString())
+			.realClick();
+
+		// Calendar navigates to March; March 1 must be selected and focused
+		cy.ui5CalendarGetDay("#calendar1", march1Timestamp.toString())
+			.should("have.class", "ui5-dp-item--selected");
+
+		cy.ui5CalendarGetDay("#calendar1", march1Timestamp.toString())
+			.should("be.focused");
+	});
+
 	it("mousedown + arrow navigation + click keeps focus at navigated cell, selection on clicked cell", () => {
 		const date = new Date(Date.UTC(2000, 9, 10, 0, 0, 0));
 		cy.mount(getDefaultCalendar(date));
diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts
index 25a793bd42a1..b145a3b57920 100644
--- a/packages/main/src/DayPicker.ts
+++ b/packages/main/src/DayPicker.ts
@@ -210,6 +210,7 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 	_focusableDay!: HTMLElement;
 
 	_autoFocus?: boolean;
+	_mousedownTimestamp?: number;
 
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
@@ -518,7 +519,8 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 			return;
 		}
 
-		const timestamp = this._getTimestampFromDom(target);
+		const timestamp = setTimestamp ? this._getTimestampFromDom(target) : (this._mousedownTimestamp ?? this.timestamp!);
+		this._mousedownTimestamp = undefined;
 
 		if (setTimestamp) {
 			this._safelySetTimestamp(timestamp);
@@ -612,7 +614,17 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 			return;
 		}
 
-		this._safelySetTimestamp(this._getTimestampFromDom(target));
+		const timestamp = this._getTimestampFromDom(target);
+		const clickedDate = CalendarDate.fromTimestamp(timestamp * 1000, this._primaryCalendarType);
+		const isOtherMonth = clickedDate.getMonth() !== this._calendarDate.getMonth();
+
+		this._mousedownTimestamp = timestamp;
+		this._safelySetTimestamp(timestamp);
+
+		if (isOtherMonth) {
+			this._autoFocus = true;
+		}
+
 		this.fireDecoratorEvent("navigate", { timestamp: this.timestamp!, mouse: true });
 	}
 

From d4af87539f19a061432c118f3b5b4fb7a4f189e3 Mon Sep 17 00:00:00 2001
From: kskondov <konstantin.kondov@sap.com>
Date: Wed, 8 Jul 2026 11:13:27 +0300
Subject: [PATCH 5/7] feat(ui5-dialog): add fullscreen toggle button (#13691)

* feat(ui5-dialog): add fullscreen toggle button

The dialog now supports a fullscreen toggle button in the header,
controlled by the `showFullscreenButton` property. The button toggles
the `stretch` property and is not available on phone devices.

- Keyboard shortcut: Shift+Ctrl+F
- Double-click on header toggles fullscreen
- Button shows Maximize/Restore tooltip and aria-keyshortcuts
- Resets drag/resize state when toggling

* feat(ui5-dialog): add fullscreen toggle button

Adds a padding-inline-end to prevents header content from overlapping with the button

* feat(ui5-dialog): add fullscreen toggle button

Lint errors fix

* feat(ui5-dialog): add fullscreen toggle button

Lint and bug fixes
- Keyboard shortcut: Shift+Ctrl+F (works regardless of focus)
- Double-click on header toggles fullscreen
- Button shows Maximize/Restore tooltip and aria-keyshortcuts
- Resets drag/resize state when toggling

* feat(ui5-dialog): add fullscreen toggle button

Removes absolute positioning and and adds fullscreen spacing instead of offset
- Keyboard shortcut: Shift+Ctrl+F (works regardless of focus)
- Double-click on header toggles fullscreen
- Button shows Maximize/Restore tooltip and aria-keyshortcuts
- Resets drag/resize state when toggling

* feat(ui5-dialog): add fullscreen toggle button

Removed unnecessary spacing

* feat(ui5-dialog): add fullscreen toggle button

disable fullscreen button if custom header is provided
- Keyboard shortcut: Shift+Ctrl+F (works regardless of focus)
- Double-click on header toggles fullscreen
- Button shows Maximize/Restore tooltip and aria-keyshortcuts
- Resets drag/resize state when toggling

* chore: resolve merge conflics

* chore: fix double click and acc texts

* chore: fix first focusable element

* chore: fix tests

* chore: fix lint error

* chore: fix test

* chore: fix toggling multiple dialogs

* chore: address code comments

* chore: address code comments and add tests

* chore: add release version

* chore: address code comments

* chore: fix failing test

* chore: fix failing test

* chore: change since version

---------

Co-authored-by: Teodor Taushanov <teodor.taushanov@sap.com>
---
 packages/main/cypress/specs/Dialog.cy.tsx     | 362 ++++++++++++++++--
 packages/main/src/Dialog.ts                   | 127 +++++-
 packages/main/src/DialogTemplate.tsx          |  13 +
 packages/main/src/Popup.ts                    |  10 +-
 .../main/src/i18n/messagebundle.properties    |   7 +
 packages/main/src/themes/Dialog.css           |  23 +-
 packages/main/test/pages/Dialog.html          |  48 +++
 .../docs/_components_pages/main/Dialog.mdx    |   5 +
 .../main/Dialog/Fullscreen/Fullscreen.md      |   5 +
 .../_samples/main/Dialog/Fullscreen/main.js   |  21 +
 .../main/Dialog/Fullscreen/sample.html        |  29 ++
 .../main/Dialog/Fullscreen/sample.tsx         |  50 +++
 12 files changed, 671 insertions(+), 29 deletions(-)
 create mode 100644 packages/website/docs/_samples/main/Dialog/Fullscreen/Fullscreen.md
 create mode 100644 packages/website/docs/_samples/main/Dialog/Fullscreen/main.js
 create mode 100644 packages/website/docs/_samples/main/Dialog/Fullscreen/sample.html
 create mode 100644 packages/website/docs/_samples/main/Dialog/Fullscreen/sample.tsx

diff --git a/packages/main/cypress/specs/Dialog.cy.tsx b/packages/main/cypress/specs/Dialog.cy.tsx
index 23737eb04ac4..1055c24584d5 100644
--- a/packages/main/cypress/specs/Dialog.cy.tsx
+++ b/packages/main/cypress/specs/Dialog.cy.tsx
@@ -724,7 +724,7 @@ describe("Dialog general interaction", () => {
 				.shadow()
 				.find(".ui5-popup-resize-handle")
 				.realMouseDown()
-				.realMouseMove(800, 0) // Large movement to ensure we hit min width
+				.realMouseMove(420, 0) // Large movement to ensure we hit min width
 				.realMouseUp();
 
 			cy.get("#rtl-min-width-dialog").then(dialogAtMinWidth => {
@@ -739,7 +739,7 @@ describe("Dialog general interaction", () => {
 					.shadow()
 					.find(".ui5-popup-resize-handle")
 					.realMouseDown()
-					.realMouseMove(150, 0) // Additional rightward movement beyond min width
+					.realMouseMove(350, 0) // Additional rightward movement beyond min width
 					.realMouseUp();
 
 				cy.get("#rtl-min-width-dialog").then(dialogAfterExtraResize => {
@@ -860,7 +860,7 @@ describe("Dialog general interaction", () => {
 
 				expect(widthBeforeResizing).to.equal(widthAfterResizing);
 				expect(heightBeforeResizing).not.to.equal(heightAfterResizing);
-				expect(topBeforeResizing).to.equal(topAfterResizing);
+				expect(topBeforeResizing).to.be.closeTo(topAfterResizing, 2);
 				expect(leftBeforeResizing).not.to.equal(leftAfterResizing + 100);
 			});
 		});
@@ -1655,8 +1655,8 @@ describe("Event Registration", () => {
 		);
 
 		// Check that resize handler is not attached when dialog is closed
-		cy.get("#dialog-resize-event").then($dialog => {
-			const dialog = $dialog.get(0) as Dialog;
+		cy.get<Dialog>("#dialog-resize-event").then($dialog => {
+			const dialog = $dialog.get(0);
 			expect(dialog._screenResizeHandlerAttached).to.be.undefined;
 		});
 
@@ -1665,8 +1665,8 @@ describe("Event Registration", () => {
 		cy.get<Dialog>("#dialog-resize-event").ui5DialogOpened();
 
 		// Check that resize handler is attached when dialog is open
-		cy.get("#dialog-resize-event").then($dialog => {
-			const dialog = $dialog.get(0) as Dialog;
+		cy.get<Dialog>("#dialog-resize-event").then($dialog => {
+			const dialog = $dialog.get(0);
 			expect(dialog._screenResizeHandlerAttached).to.be.true;
 		});
 
@@ -1674,8 +1674,8 @@ describe("Event Registration", () => {
 		cy.get("#dialog-resize-event").invoke("prop", "open", false);
 
 		// Check that resize handler is detached when dialog is closed
-		cy.get("#dialog-resize-event").then($dialog => {
-			const dialog = $dialog.get(0) as Dialog;
+		cy.get<Dialog>("#dialog-resize-event").then($dialog => {
+			const dialog = $dialog.get(0);
 			expect(dialog._screenResizeHandlerAttached).to.be.false;
 		});
 	});
@@ -1690,8 +1690,8 @@ describe("Event Registration", () => {
 		);
 
 		// Check that dragstart handler is not registered when dialog is closed
-		cy.get("#dialog-dragstart-event").then($dialog => {
-			const dialog = $dialog.get(0) as Dialog;
+		cy.get<Dialog>("#dialog-dragstart-event").then($dialog => {
+			const dialog = $dialog.get(0);
 			expect(dialog._dragHandlerRegistered).to.be.false;
 		});
 
@@ -1700,8 +1700,8 @@ describe("Event Registration", () => {
 		cy.get<Dialog>("#dialog-dragstart-event").ui5DialogOpened();
 
 		// Check that dragstart handler is registered when dialog is open
-		cy.get("#dialog-dragstart-event").then($dialog => {
-			const dialog = $dialog.get(0) as Dialog;
+		cy.get<Dialog>("#dialog-dragstart-event").then($dialog => {
+			const dialog = $dialog.get(0);
 			expect(dialog._dragHandlerRegistered).to.be.true;
 		});
 
@@ -1709,8 +1709,8 @@ describe("Event Registration", () => {
 		cy.get("#dialog-dragstart-event").invoke("prop", "open", false);
 
 		// Check that dragstart handler is deregistered when dialog is closed
-		cy.get("#dialog-dragstart-event").then($dialog => {
-			const dialog = $dialog.get(0) as Dialog;
+		cy.get<Dialog>("#dialog-dragstart-event").then($dialog => {
+			const dialog = $dialog.get(0);
 			expect(dialog._dragHandlerRegistered).to.be.false;
 		});
 	});
@@ -1729,8 +1729,8 @@ describe("Event Registration", () => {
 		cy.get<Dialog>("#dialog-reopen-events").ui5DialogOpened();
 
 		// Verify handlers are registered
-		cy.get("#dialog-reopen-events").then($dialog => {
-			const dialog = $dialog.get(0) as Dialog;
+		cy.get<Dialog>("#dialog-reopen-events").then($dialog => {
+			const dialog = $dialog.get(0);
 			expect(dialog._screenResizeHandlerAttached).to.be.true;
 			expect(dialog._dragHandlerRegistered).to.be.true;
 		});
@@ -1739,8 +1739,8 @@ describe("Event Registration", () => {
 		cy.get("#dialog-reopen-events").invoke("prop", "open", false);
 
 		// Verify handlers are deregistered
-		cy.get("#dialog-reopen-events").then($dialog => {
-			const dialog = $dialog.get(0) as Dialog;
+		cy.get<Dialog>("#dialog-reopen-events").then($dialog => {
+			const dialog = $dialog.get(0);
 			expect(dialog._screenResizeHandlerAttached).to.be.false;
 			expect(dialog._dragHandlerRegistered).to.be.false;
 		});
@@ -1750,8 +1750,8 @@ describe("Event Registration", () => {
 		cy.get<Dialog>("#dialog-reopen-events").ui5DialogOpened();
 
 		// Verify handlers are registered again
-		cy.get("#dialog-reopen-events").then($dialog => {
-			const dialog = $dialog.get(0) as Dialog;
+		cy.get<Dialog>("#dialog-reopen-events").then($dialog => {
+			const dialog = $dialog.get(0);
 			expect(dialog._screenResizeHandlerAttached).to.be.true;
 			expect(dialog._dragHandlerRegistered).to.be.true;
 		});
@@ -1769,8 +1769,8 @@ describe("Native drag-and-drop in draggable dialogs", () => {
 		cy.get("#test-dialog").invoke("prop", "open", true);
 		cy.get<Dialog>("#test-dialog").ui5DialogOpened();
 
-		cy.get("#test-dialog").then($dialog => {
-			const dialog = $dialog.get(0) as Dialog;
+		cy.get<Dialog>("#test-dialog").then($dialog => {
+			const dialog = $dialog.get(0);
 			const content = document.getElementById("content-item");
 
 			// Create a mock event
@@ -1831,9 +1831,9 @@ describe("Native drag-and-drop in draggable dialogs", () => {
 		cy.get("#test-dialog").invoke("prop", "open", true);
 		cy.get<Dialog>("#test-dialog").ui5DialogOpened();
 
-		cy.get("#custom-header").then($header => {
+		cy.get<HTMLElement>("#custom-header").then($header => {
 			const dialog = document.getElementById("test-dialog") as Dialog;
-			const header = $header.get(0) as HTMLElement;
+			const header = $header.get(0);
 
 			// Create a mock event
 			let preventDefaultCalled = false;
@@ -1850,3 +1850,315 @@ describe("Native drag-and-drop in draggable dialogs", () => {
 		});
 	});
 });
+
+describe("Fullscreen Button", () => {
+	it("should show fullscreen button when showFullscreenButton is set", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Test" showFullscreenButton={true} open={true}>
+				<Button>Content</Button>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get("#dialog")
+			.shadow()
+			.find(".ui5-dialog-fullscreen-btn")
+			.should("exist")
+			.and("be.visible");
+	});
+
+	it("should not show fullscreen button when showFullscreenButton is not set", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Test" open={true}>
+				<Button>Content</Button>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get("#dialog")
+			.shadow()
+			.find(".ui5-dialog-fullscreen-btn")
+			.should("not.exist");
+	});
+
+	it("should toggle stretch property when fullscreen button is clicked", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Test" showFullscreenButton={true} open={true}>
+				<Button>Content</Button>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get("#dialog")
+			.should("not.have.attr", "stretch");
+
+		cy.get<Dialog>("#dialog").then($dialog => {
+			$dialog.get(0)._toggleFullscreen();
+		});
+
+		cy.get("#dialog")
+			.should("have.attr", "stretch");
+
+		cy.get<Dialog>("#dialog").then($dialog => {
+			$dialog.get(0)._toggleFullscreen();
+		});
+
+		cy.get("#dialog")
+			.should("not.have.attr", "stretch");
+	});
+
+	it("should show full-screen icon when not stretched and exit-full-screen when stretched", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Test" showFullscreenButton={true} open={true}>
+				<Button>Content</Button>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get("#dialog")
+			.shadow()
+			.find(".ui5-dialog-fullscreen-btn")
+			.should("have.attr", "icon", "full-screen");
+
+		cy.get<Dialog>("#dialog").then($dialog => {
+			$dialog.get(0)._toggleFullscreen();
+		});
+
+		cy.get("#dialog")
+			.shadow()
+			.find(".ui5-dialog-fullscreen-btn")
+			.should("have.attr", "icon", "exit-full-screen");
+	});
+
+	it("should have correct tooltip based on stretch state", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Test" showFullscreenButton={true} open={true}>
+				<Button>Content</Button>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get("#dialog")
+			.shadow()
+			.find(".ui5-dialog-fullscreen-btn")
+			.should("have.attr", "tooltip", "Maximize (Shift+Ctrl+F)");
+
+		cy.get<Dialog>("#dialog").then($dialog => {
+			$dialog.get(0)._toggleFullscreen();
+		});
+
+		cy.get("#dialog")
+			.shadow()
+			.find(".ui5-dialog-fullscreen-btn")
+			.should("have.attr", "tooltip", "Restore (Shift+Ctrl+F)");
+	});
+
+	it("should have aria-keyshortcuts attribute", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Test" showFullscreenButton={true} open={true}>
+				<Button>Content</Button>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get("#dialog")
+			.shadow()
+			.find(".ui5-dialog-fullscreen-btn")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-keyshortcuts", "Shift+Ctrl+F");
+	});
+
+	it("should toggle fullscreen with Shift+Ctrl+F keyboard shortcut", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Test" showFullscreenButton={true} open={true}>
+				<Input id="input"></Input>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get("#dialog")
+			.should("not.have.attr", "stretch");
+
+		cy.get("#input").realClick();
+		cy.realPress(["Shift", "Control", "f"]);
+
+		cy.get("#dialog")
+			.should("have.attr", "stretch");
+
+		cy.realPress(["Shift", "Control", "f"]);
+
+		cy.get("#dialog")
+			.should("not.have.attr", "stretch");
+	});
+
+	it("should toggle fullscreen on header double-click", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Test Dialog" showFullscreenButton={true} open={true}>
+				<Button>Content</Button>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get("#dialog")
+			.should("not.have.attr", "stretch");
+
+		cy.get("#dialog").then($dialog => {
+			const dialog = $dialog.get(0);
+			const headerRoot = dialog.shadowRoot!.querySelector(".ui5-popup-header-root")!;
+			const event = new MouseEvent("dblclick", { bubbles: true, composed: true });
+			Object.defineProperty(event, "target", { value: headerRoot });
+			headerRoot.dispatchEvent(event);
+		});
+
+		cy.get("#dialog")
+			.should("have.attr", "stretch");
+	});
+
+	it("should not toggle fullscreen on double-click when showFullscreenButton is false", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Test Dialog" open={true}>
+				<Button>Content</Button>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get("#dialog")
+			.shadow()
+			.find(".ui5-popup-header-root")
+			.realClick({ clickCount: 2 });
+
+		cy.get("#dialog")
+			.should("not.have.attr", "stretch");
+	});
+
+	it("should reset drag/resize state when toggling fullscreen", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Test" showFullscreenButton={true} draggable={true} open={true}>
+				<Button>Content</Button>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get<Dialog>("#dialog").then($dialog => {
+			const dialog = $dialog.get(0);
+			dialog._draggedOrResized = true;
+			Object.assign(dialog.style, { top: "100px", left: "100px", width: "400px", height: "300px" });
+		});
+
+		cy.get("#dialog")
+			.shadow()
+			.find(".ui5-dialog-fullscreen-btn")
+			.realClick();
+
+		cy.get<Dialog>("#dialog").then($dialog => {
+			const dialog = $dialog.get(0);
+			expect(dialog._draggedOrResized).to.be.false;
+			expect(dialog.style.width).to.equal("");
+			expect(dialog.style.height).to.equal("");
+		});
+	});
+
+	it("should display header when only showFullscreenButton is set", () => {
+		cy.mount(
+			<Dialog id="dialog" showFullscreenButton={true} open={true}>
+				<Button>Content</Button>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get("#dialog")
+			.shadow()
+			.find(".ui5-popup-header-root")
+			.should("exist");
+	});
+
+	it("should reflect stretch state if stretch is initially true", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Test" showFullscreenButton={true} stretch={true} open={true}>
+				<Button>Content</Button>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get("#dialog")
+			.shadow()
+			.find(".ui5-dialog-fullscreen-btn")
+			.should("have.attr", "icon", "exit-full-screen")
+			.and("have.attr", "tooltip", "Restore (Shift+Ctrl+F)");
+
+		cy.get("#dialog").invoke("prop", "open", false);
+	});
+
+	it("should not focus fullscreen button as initial focus when content has focusable elements", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Test" showFullscreenButton={true} open={true}>
+				<Button id="content-btn">Content Button</Button>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get("#content-btn").should("be.focused");
+	});
+
+	it("should focus fullscreen button when no other focusable elements exist", () => {
+		cy.mount(
+			<Dialog id="dialog" headerText="Test" showFullscreenButton={true} open={true}>
+				<p>Non-focusable content</p>
+			</Dialog>
+		);
+
+		cy.get<Dialog>("#dialog").ui5DialogOpened();
+
+		cy.get("#dialog")
+			.shadow()
+			.find(".ui5-dialog-fullscreen-btn")
+			.should("be.focused");
+	});
+
+	it("Ctrl+Shift+F should only toggle the top dialog when two dialogs with fullscreen button are open", () => {
+		cy.mount(
+			<>
+				<Dialog id="dialog1" headerText="First Dialog" showFullscreenButton={true}>
+					<Button id="btn1">Content 1</Button>
+				</Dialog>
+				<Dialog id="dialog2" headerText="Second Dialog" showFullscreenButton={true}>
+					<Input id="input2"></Input>
+				</Dialog>
+			</>
+		);
+
+		cy.get("#dialog1").invoke("prop", "open", true);
+		cy.get<Dialog>("#dialog1").ui5DialogOpened();
+
+		cy.get("#dialog2").invoke("prop", "open", true);
+		cy.get<Dialog>("#dialog2").ui5DialogOpened();
+
+		cy.get("#dialog1").should("not.have.attr", "stretch");
+		cy.get("#dialog2").should("not.have.attr", "stretch");
+
+		cy.get("#input2").realClick();
+		cy.realPress(["Shift", "Control", "f"]);
+
+		cy.get("#dialog2").should("have.attr", "stretch");
+		cy.get("#dialog1").should("not.have.attr", "stretch");
+
+		cy.realPress(["Shift", "Control", "f"]);
+
+		cy.get("#dialog2").should("not.have.attr", "stretch");
+		cy.get("#dialog1").should("not.have.attr", "stretch");
+	});
+});
diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts
index f7f3a16a7a60..be6f4111cebe 100644
--- a/packages/main/src/Dialog.ts
+++ b/packages/main/src/Dialog.ts
@@ -11,11 +11,14 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import toLowercaseEnumValue from "@ui5/webcomponents-base/dist/util/toLowercaseEnumValue.js";
+import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 import Popup from "./Popup.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import "@ui5/webcomponents-icons/dist/information.js";
+import "@ui5/webcomponents-icons/dist/full-screen.js";
+import "@ui5/webcomponents-icons/dist/exit-full-screen.js";
 
 import {
 	DIALOG_ARIA_DESCRIBEDBY_RESIZABLE,
@@ -32,6 +35,8 @@ import {
 	DIALOG_HEADER_ARIA_LABEL,
 	DIALOG_CONTENT_ARIA_LABEL,
 	DIALOG_FOOTER_ARIA_LABEL,
+	DIALOG_FULLSCREEN_MAXIMIZE,
+	DIALOG_FULLSCREEN_RESTORE,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Template
@@ -46,6 +51,10 @@ import PopupAccessibleRole from "./types/PopupAccessibleRole.js";
  */
 const STEP_SIZE = 16;
 
+const FULLSCREEN_BUTTON_ACCESSIBILITY_ATTRIBUTES = {
+	ariaKeyShortcuts: "Shift+Ctrl+F",
+};
+
 type ValueStateWithIcon = ValueState.Negative | ValueState.Critical | ValueState.Positive | ValueState.Information;
 /**
  * Defines the icons corresponding to the dialog's state.
@@ -101,6 +110,12 @@ const ICON_PER_STATE: Record<ValueStateWithIcon, string> = {
  * - [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.
  * - [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.
  *
+ * #### Fullscreen
+ * When the `ui5-dialog` has the `showFullscreenButton` property set to `true`, the user can toggle fullscreen mode
+ * with the following keyboard shortcut:
+ *
+ * - [Shift] + [Ctrl] + [F] - Toggle fullscreen mode.
+ *
  * ### ES6 Module Import
  *
  * `import "@ui5/webcomponents/dist/Dialog";`
@@ -176,6 +191,21 @@ class Dialog extends Popup {
 	@property({ type: Boolean })
 	resizable = false;
 
+	/**
+	 * Defines whether a fullscreen toggle button is shown in the dialog header.
+	 * When pressed, it toggles the `stretch` property.
+	 * The fullscreen button is not available on phone devices.
+	 *
+	 * **Note:** The fullscreen button is not available on phone devices,
+	 * nor when a custom header slot is provided — the application is expected
+	 * to render its own toggle inside the custom header in those cases.
+	 * @default false
+	 * @since 2.25.0
+	 * @public
+	 */
+	@property({ type: Boolean })
+	showFullscreenButton = false;
+
 	/**
 	 * Defines the state of the `Dialog`.
 	 *
@@ -188,12 +218,19 @@ class Dialog extends Popup {
 	@property()
 	state: `${ValueState}` = "None";
 
+	/**
+	 * @private
+	 */
+	@property({ type: Boolean })
+	_showFullscreenButton = false;
+
 	_screenResizeHandler: () => void;
 	_dragMouseMoveHandler: (e: MouseEvent) => void;
 	_dragMouseUpHandler: (e: MouseEvent) => void;
 	_resizeMouseMoveHandler: (e: MouseEvent) => void;
 	_resizeMouseUpHandler: (e: MouseEvent) => void;
 	_dragStartHandler: (e: DragEvent) => void;
+	_fullscreenKeydownHandler: (e: KeyboardEvent) => void;
 	_y?: number;
 	_x?: number;
 	_isRTL?: boolean;
@@ -208,6 +245,7 @@ class Dialog extends Popup {
 	_cachedMinHeight?: number;
 	_draggedOrResized = false;
 	_dragHandlerRegistered = false;
+	_fullscreenKeydownHandlerRegistered = false;
 
 	/**
 	 * Defines the header HTML Element.
@@ -242,6 +280,7 @@ class Dialog extends Popup {
 		this._resizeMouseUpHandler = this._onResizeMouseUp.bind(this);
 
 		this._dragStartHandler = this._handleDragStart.bind(this);
+		this._fullscreenKeydownHandler = this._onFullscreenKeydown.bind(this);
 	}
 
 	static _isHeader(element: HTMLElement) {
@@ -320,7 +359,7 @@ class Dialog extends Popup {
 	 * Determines if the header should be shown.
 	 */
 	get _displayHeader() {
-		return this.header.length || this.headerText || this.draggable || this.resizable;
+		return this.header.length || this.headerText || this.draggable || this.resizable || this._showFullscreenButton;
 	}
 
 	get _movable() {
@@ -358,7 +397,21 @@ class Dialog extends Popup {
 	}
 
 	get _showResizeHandle() {
-		return this.resizable && this.onDesktop;
+		return this.resizable && this.onDesktop && !this.stretch;
+	}
+
+	get _fullscreenButtonIcon() {
+		return this.stretch ? "exit-full-screen" : "full-screen";
+	}
+
+	get _fullscreenButtonTooltip() {
+		return this.stretch
+			? Dialog.i18nBundle.getText(DIALOG_FULLSCREEN_RESTORE)
+			: Dialog.i18nBundle.getText(DIALOG_FULLSCREEN_MAXIMIZE);
+	}
+
+	get _fullscreenButtonAccessibilityAttributes() {
+		return FULLSCREEN_BUTTON_ACCESSIBILITY_ATTRIBUTES;
 	}
 
 	get _resizeHandleTooltip() {
@@ -425,6 +478,8 @@ class Dialog extends Popup {
 	onBeforeRendering() {
 		super.onBeforeRendering();
 
+		this._showFullscreenButton = this.showFullscreenButton && !this.onPhone && !this.header.length;
+
 		this._isRTL = this.effectiveDir === "rtl";
 	}
 
@@ -446,11 +501,13 @@ class Dialog extends Popup {
 	_attachBrowserEvents() {
 		this._attachScreenResizeHandler();
 		this._registerDragHandler();
+		this._registerFullscreenKeydownHandler();
 	}
 
 	_detachBrowserEvents() {
 		this._detachScreenResizeHandler();
 		this._deregisterDragHandler();
+		this._deregisterFullscreenKeydownHandler();
 	}
 
 	_attachScreenResizeHandler() {
@@ -481,6 +538,20 @@ class Dialog extends Popup {
 		}
 	}
 
+	_registerFullscreenKeydownHandler() {
+		if (this.showFullscreenButton && !this._fullscreenKeydownHandlerRegistered) {
+			document.addEventListener("keydown", this._fullscreenKeydownHandler);
+			this._fullscreenKeydownHandlerRegistered = true;
+		}
+	}
+
+	_deregisterFullscreenKeydownHandler() {
+		if (this._fullscreenKeydownHandlerRegistered) {
+			document.removeEventListener("keydown", this._fullscreenKeydownHandler);
+			this._fullscreenKeydownHandlerRegistered = false;
+		}
+	}
+
 	_center() {
 		const height = window.innerHeight - this.offsetHeight,
 			width = window.innerWidth - this.offsetWidth;
@@ -503,6 +574,49 @@ class Dialog extends Popup {
 	/**
 	 * Event handlers
 	 */
+	_toggleFullscreen() {
+		if (this.onPhone) {
+			return;
+		}
+
+		const wasStretched = this.stretch;
+		this.stretch = !this.stretch;
+
+		this._revertSize();
+		this._draggedOrResized = false;
+
+		if (wasStretched) {
+			requestAnimationFrame(() => {
+				if (this.open) {
+					this._center();
+				}
+			});
+		}
+	}
+
+	_onHeaderDblClick(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		const headerRoot = this._root.querySelector(".ui5-popup-header-root");
+		if (target !== headerRoot && !target.classList.contains("ui5-popup-header-text")) {
+			return;
+		}
+
+		this._toggleFullscreen();
+	}
+
+	_onFullscreenKeydown(e: KeyboardEvent) {
+		if (this.isTopModalPopup && this._showFullscreenButton && this._isFullscreenShortcut(e)) {
+			e.preventDefault();
+			e.stopImmediatePropagation();
+
+			this._toggleFullscreen();
+		}
+	}
+
+	_isFullscreenShortcut(e: KeyboardEvent) {
+		return (e.key === "f" || e.key === "F") && e.ctrlKey && e.shiftKey && !e.altKey;
+	}
+
 	_onDragMouseDown(e: MouseEvent) {
 		// allow dragging only on the header
 		if (!this._movable || !this.draggable || !Dialog._isHeader(e.target as HTMLElement)) {
@@ -779,6 +893,15 @@ class Dialog extends Popup {
 		window.removeEventListener("mouseup", this._resizeMouseUpHandler);
 	}
 
+	async _getFirstFocusableElement() {
+		if (this._showFullscreenButton) {
+			const firstFocusable = await getFirstFocusableElement(this.contentDOM) || (this.footerDOM ? await getFirstFocusableElement(this.footerDOM) : null);
+			return firstFocusable || getFirstFocusableElement(this);
+		}
+
+		return getFirstFocusableElement(this);
+	}
+
 	/**
 	 * Overrides Popup's forwardToLast to prioritize the drag/resize handler
 	 * when Shift+Tab is pressed from the first focusable element.
diff --git a/packages/main/src/DialogTemplate.tsx b/packages/main/src/DialogTemplate.tsx
index 6880028ffa73..6020332ac300 100644
--- a/packages/main/src/DialogTemplate.tsx
+++ b/packages/main/src/DialogTemplate.tsx
@@ -3,6 +3,7 @@ import type Dialog from "./Dialog.js";
 import PopupTemplate from "./PopupTemplate.js";
 import Title from "./Title.js";
 import Icon from "./Icon.js";
+import Button from "./Button.js";
 
 export default function DialogTemplate(this: Dialog) {
 	return PopupTemplate.call(this, {
@@ -20,6 +21,7 @@ function beforeContent(this: Dialog) {
 				role="region"
 				aria-label={this._headerAriaLabel}
 				onMouseDown={this._onDragMouseDown}
+				onDblClick={this._showFullscreenButton ? this._onHeaderDblClick : undefined}
 				part="header"
 				// state={this.state}
 			>
@@ -31,6 +33,17 @@ function beforeContent(this: Dialog) {
 					:
 					<Title level="H1" id="ui5-popup-header-text" class="ui5-popup-header-text">{this.headerText}</Title>
 				}
+				{this._showFullscreenButton &&
+					<Button
+						class="ui5-dialog-fullscreen-btn"
+						icon={this._fullscreenButtonIcon}
+						design="Transparent"
+						tooltip={this._fullscreenButtonTooltip}
+						accessibleName={this._fullscreenButtonTooltip}
+						accessibilityAttributes={this._fullscreenButtonAccessibilityAttributes}
+						onClick={this._toggleFullscreen}
+					></Button>
+				}
 			</div>
 		}
 	</>);
diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts
index 506d163c619b..8c3e891f21ff 100644
--- a/packages/main/src/Popup.ts
+++ b/packages/main/src/Popup.ts
@@ -542,7 +542,7 @@ abstract class Popup extends UI5Element {
 			|| document.getElementById(this.initialFocus);
 		}
 
-		element = element || await getFirstFocusableElement(this) || this._root; // in case of no focusable content focus the root
+		element = element || await this._getFirstFocusableElement() || this._root; // in case of no focusable content focus the root
 
 		if (element) {
 			if (element === this._root) {
@@ -552,6 +552,10 @@ abstract class Popup extends UI5Element {
 		}
 	}
 
+	async _getFirstFocusableElement() {
+		return getFirstFocusableElement(this);
+	}
+
 	isFocusWithin() {
 		return isFocusedElementWithinNode(this._root);
 	}
@@ -720,6 +724,10 @@ abstract class Popup extends UI5Element {
 		return this.shadowRoot!.querySelector(".ui5-popup-content")!;
 	}
 
+	get footerDOM(): HTMLElement | null {
+		return this.shadowRoot!.querySelector(".ui5-popup-footer-root");
+	}
+
 	get styles() {
 		return {
 			root: {},
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index 6176393b46c1..98ce112d6441 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -873,6 +873,13 @@ DIALOG_CONTENT_ARIA_LABEL=Content
 
 #XACT: ARIA label for the Dialog footer region
 DIALOG_FOOTER_ARIA_LABEL=Footer
+
+#XACT: Tooltip for dialog fullscreen button (maximize)
+DIALOG_FULLSCREEN_MAXIMIZE=Maximize (Shift+Ctrl+F)
+
+#XACT: Tooltip for dialog fullscreen button (restore)
+DIALOG_FULLSCREEN_RESTORE=Restore (Shift+Ctrl+F)
+
 #XFLD: A colon to separate the "label" from an input. In some languages there might be a different symbol used for such a colon
 LABEL_COLON=:
 
diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css
index bd4001653e57..31b25dadfa4e 100644
--- a/packages/main/src/themes/Dialog.css
+++ b/packages/main/src/themes/Dialog.css
@@ -29,7 +29,7 @@
 	cursor: move;
 }
 
-:host([draggable]) .ui5-popup-header-root * {
+:host([draggable]) .ui5-popup-header-root *:not(.ui5-dialog-fullscreen-btn) {
 	cursor: auto;
 }
 
@@ -125,6 +125,18 @@
 	height: 100%;
 }
 
+:host(:not([header-text])[_show-fullscreen-button]) .ui5-popup-header-root {
+	justify-content: flex-end;
+}
+
+:host([header-text][_show-fullscreen-button]) .ui5-popup-header-root {
+	justify-content: space-between;
+}
+
+.ui5-popup-header-root {
+	gap: 0.5rem;
+}
+
 .ui5-popup-content {
 	min-height: var(--_ui5_dialog_content_min_height);
 	flex: 1 1 auto;
@@ -144,6 +156,15 @@
 	color: var(--sapButton_Lite_TextColor);
 }
 
+.ui5-popup-header-text {
+	min-width: 0;
+	justify-content: flex-start;
+}
+
+:host([on-phone]) .ui5-dialog-fullscreen-btn {
+	display: none;
+}
+
 :host::backdrop {
 	background-color: var(--_ui5_popup_block_layer_background);
 	opacity: var(--_ui5_popup_block_layer_opacity);
diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
index 160b30e7151e..abd635a4416a 100644
--- a/packages/main/test/pages/Dialog.html
+++ b/packages/main/test/pages/Dialog.html
@@ -35,6 +35,7 @@
 		</div>
 		<ui5-checkbox text="Compact size" id="cbCompact"></ui5-checkbox>
 		<ui5-checkbox text="Scrollable page" id="cbScrollable"></ui5-checkbox>
+		<ui5-checkbox text="Toggle RTL" id="cbRtl"></ui5-checkbox>
 		<br>
 		<br>
 		<ui5-button id="btnOpenDialogWithInput">Open Dialog with Input</ui5-button>
@@ -82,6 +83,12 @@
 		<ui5-button id="draggable-and-resizable-open">Open draggable & resizable dialog</ui5-button>
 		<br>
 		<br>
+		<ui5-button id="fullscreen-open">Open fullscreen dialog</ui5-button>
+		<br>
+		<br>
+		<ui5-button id="fullscreen-long-title-open">Open fullscreen dialog (long title)</ui5-button>
+		<br>
+		<br>
 		<ui5-button id="rtl-draggable-and-resizable-open">Open RTL draggable & resizable dialog</ui5-button>
 		<br>
 		<br>
@@ -439,6 +446,37 @@
 		</div>
 	</ui5-dialog>
 
+	<ui5-dialog id="fullscreen-dialog" header-text="Fullscreen Dialog" show-fullscreen-button draggable resizable>
+		<p>This dialog has a fullscreen toggle button in the header.</p>
+		<p>Press the fullscreen button or use Shift+Ctrl+F to toggle fullscreen mode.</p>
+		<p>You can also double-click the header to toggle.</p>
+		<ui5-input placeholder="Type something..."></ui5-input>
+		<br>
+
+		<ui5-button id="fullscreen-nested-open">Open new fullscreen dialog</ui5-button>
+
+		<ui5-dialog id="fullscreen-dialog-nested" header-text="Nested Fullscreen Dialog" show-fullscreen-button draggable resizable>
+			<p>This dialog has a fullscreen toggle button in the header.</p>
+			<p>Press the fullscreen button or use Shift+Ctrl+F to toggle fullscreen mode.</p>
+			<p>You can also double-click the header to toggle.</p>
+			<ui5-input placeholder="Type something..."></ui5-input>
+			<div slot="footer" class="dialogFooter">
+				<ui5-button id="fullscreen-nested-close" design="Emphasized">Close</ui5-button>
+			</div>
+		</ui5-dialog>
+
+		<div slot="footer" class="dialogFooter">
+			<ui5-button id="fullscreen-close" design="Emphasized">Close</ui5-button>
+		</div>
+	</ui5-dialog>
+
+	<ui5-dialog id="fullscreen-long-title" header-text="This Is a Long Dialog Title This Is a Long Dialog Title" show-fullscreen-button draggable>
+		<p>Compare the title position with and without the fullscreen button.</p>
+		<div slot="footer" class="dialogFooter">
+			<ui5-button id="fullscreen-long-title-close" design="Emphasized">Close</ui5-button>
+		</div>
+	</ui5-dialog>
+
 	<div dir="rtl">
 		<ui5-dialog id="rtl-draggable-and-resizable-dialog" header-text="Draggable/Resizable dialog" draggable resizable>
 			<p>Move this dialog around the screen by dragging it by its header.</p>
@@ -898,6 +936,10 @@
 			scrollHelper.style.display = cbScrollable.checked ? "block" : "none";
 		});
 
+		cbRtl.addEventListener("ui5-change", function () {
+			document.documentElement.dir = cbRtl.checked ? "rtl" : "ltr";
+		});
+
 		let preventClosing = true;
 
 		btnOpenDialog.addEventListener("click", function () {
@@ -1000,6 +1042,12 @@
 		window["resizable-custom-header-close"].addEventListener("click", function () { window["resizable-dialog-custom-header"].open = false; });
 		window["draggable-and-resizable-open"].addEventListener("click", function () { window["draggable-and-resizable-dialog"].open = true; });
 		window["draggable-and-resizable-close"].addEventListener("click", function () { window["draggable-and-resizable-dialog"].open = false; });
+		window["fullscreen-open"].addEventListener("click", function () { window["fullscreen-dialog"].open = true; });
+		window["fullscreen-close"].addEventListener("click", function () { window["fullscreen-dialog"].open = false; });
+		window["fullscreen-nested-open"].addEventListener("click", function () { window["fullscreen-dialog-nested"].open = true; });
+		window["fullscreen-nested-close"].addEventListener("click", function () { window["fullscreen-dialog-nested"].open = false; });
+		window["fullscreen-long-title-open"].addEventListener("click", function () { window["fullscreen-long-title"].open = true; });
+		window["fullscreen-long-title-close"].addEventListener("click", function () { window["fullscreen-long-title"].open = false; });
 		window["rtl-draggable-and-resizable-open"].addEventListener("click", function () { window["rtl-draggable-and-resizable-dialog"].open = true; });
 		window["rtl-draggable-and-resizable-close"].addEventListener("click", function () { window["rtl-draggable-and-resizable-dialog"].open = false; });
 		window["rtl-maxwidth-resizable-open"].addEventListener("click", function () { window["rtl-maxwidth-resizable-dialog"].open = true; });
diff --git a/packages/website/docs/_components_pages/main/Dialog.mdx b/packages/website/docs/_components_pages/main/Dialog.mdx
index 403387ab4706..539c059b0c53 100644
--- a/packages/website/docs/_components_pages/main/Dialog.mdx
+++ b/packages/website/docs/_components_pages/main/Dialog.mdx
@@ -4,6 +4,7 @@ slug: ../Dialog
 
 import Basic from "../../_samples/main/Dialog/Basic/Basic.md";
 import DraggableAndResizable from "../../_samples/main/Dialog/DraggableAndResizable/DraggableAndResizable.md";
+import Fullscreen from "../../_samples/main/Dialog/Fullscreen/Fullscreen.md";
 import BarInDialog from "../../_samples/main/Dialog/BarInDialog/BarInDialog.md";
 import WithState from "../../_samples/main/Dialog/WithState/WithState.md";
 
@@ -19,6 +20,10 @@ import WithState from "../../_samples/main/Dialog/WithState/WithState.md";
 ### Draggable and Resizable
 <DraggableAndResizable />
 
+### Fullscreen
+Users can toggle between standard and full screen size. The full screen button is positioned top-right in the dialog's title bar. The fullscreen toggle can also be triggered by pressing Shift+Ctrl+F or by double-clicking the dialog header.
+<Fullscreen />
+
 ### Usage of Bar as header/footer
 The Bar component can be used as header and/or footer of the Dialog
 <BarInDialog />
diff --git a/packages/website/docs/_samples/main/Dialog/Fullscreen/Fullscreen.md b/packages/website/docs/_samples/main/Dialog/Fullscreen/Fullscreen.md
new file mode 100644
index 000000000000..0c062a836e84
--- /dev/null
+++ b/packages/website/docs/_samples/main/Dialog/Fullscreen/Fullscreen.md
@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import react from '!!raw-loader!./sample.tsx';
+
+<Editor html={html} js={js} react={react} />
diff --git a/packages/website/docs/_samples/main/Dialog/Fullscreen/main.js b/packages/website/docs/_samples/main/Dialog/Fullscreen/main.js
new file mode 100644
index 000000000000..4f897dd252e1
--- /dev/null
+++ b/packages/website/docs/_samples/main/Dialog/Fullscreen/main.js
@@ -0,0 +1,21 @@
+import "@ui5/webcomponents/dist/Dialog.js";
+import "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents/dist/Toolbar.js";
+import "@ui5/webcomponents/dist/ToolbarButton.js";
+
+const dialogOpener = document.getElementById("dialogOpener");
+const dialog = document.getElementById("dialog");
+const dialogClosers = [...dialog.querySelectorAll(".dialogCloser")];
+
+dialogOpener.accessibilityAttributes = {
+    hasPopup: "dialog",
+    controls: dialog.id,
+};
+dialogOpener.addEventListener("click", () => {
+    dialog.open = true;
+});
+dialogClosers.forEach(btn => {
+    btn.addEventListener("click", () => {
+        dialog.open = false;
+    });
+})
diff --git a/packages/website/docs/_samples/main/Dialog/Fullscreen/sample.html b/packages/website/docs/_samples/main/Dialog/Fullscreen/sample.html
new file mode 100644
index 000000000000..b9ab5882749a
--- /dev/null
+++ b/packages/website/docs/_samples/main/Dialog/Fullscreen/sample.html
@@ -0,0 +1,29 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor); height: 450px;">
+    <!-- playground-fold-end -->
+
+    <ui5-button id="dialogOpener">Open Dialog with Fullscreen Button</ui5-button>
+
+    <ui5-dialog id="dialog" header-text="Fullscreen Dialog" show-fullscreen-button draggable resizable>
+        <div>This dialog has a fullscreen toggle button in the header.</div>
+        <div>Click the fullscreen button or press Shift+Ctrl+F to toggle fullscreen mode.</div>
+        <div>You can also double-click the header to toggle.</div>
+        <ui5-toolbar slot="footer">
+            <ui5-toolbar-button class="dialogCloser" design="Emphasized" text="OK"></ui5-toolbar-button>
+        </ui5-toolbar>
+    </ui5-dialog>
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
diff --git a/packages/website/docs/_samples/main/Dialog/Fullscreen/sample.tsx b/packages/website/docs/_samples/main/Dialog/Fullscreen/sample.tsx
new file mode 100644
index 000000000000..9bae0850e0f4
--- /dev/null
+++ b/packages/website/docs/_samples/main/Dialog/Fullscreen/sample.tsx
@@ -0,0 +1,50 @@
+import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
+import { useState } from "react";
+import ButtonClass from "@ui5/webcomponents/dist/Button.js";
+import DialogClass from "@ui5/webcomponents/dist/Dialog.js";
+import ToolbarClass from "@ui5/webcomponents/dist/Toolbar.js";
+import ToolbarButtonClass from "@ui5/webcomponents/dist/ToolbarButton.js";
+
+const Button = createReactComponent(ButtonClass);
+const Dialog = createReactComponent(DialogClass);
+const Toolbar = createReactComponent(ToolbarClass);
+const ToolbarButton = createReactComponent(ToolbarButtonClass);
+
+function App() {
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  return (
+    <>
+      <Button id="dialogOpener" onClick={() => setDialogOpen(true)}>
+        Open Fullscreen Dialog
+      </Button>
+
+      <Dialog
+        open={dialogOpen}
+        id="dialog"
+        headerText="Fullscreen Dialog"
+        showFullscreenButton={true}
+        draggable={true}
+        resizable={true}
+        onClose={() => setDialogOpen(false)}
+      >
+        <div>This dialog has a fullscreen toggle button in the header.</div>
+        <div>
+          Click the fullscreen button or press Shift+Ctrl+F to toggle fullscreen
+          mode.
+        </div>
+        <div>You can also double-click the header to toggle.</div>
+        <Toolbar slot="footer">
+          <ToolbarButton
+            class="dialogCloser"
+            design="Emphasized"
+            text="OK"
+            onClick={() => setDialogOpen(false)}
+          />
+        </Toolbar>
+      </Dialog>
+    </>
+  );
+}
+
+export default App;

From 7ed08efc1bb36f37ac24f8a7887d03557ef16341 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com>
Date: Wed, 8 Jul 2026 15:52:34 +0300
Subject: [PATCH 6/7] test: add visual regression tests for main component
 (#13797)

---
 .claude/skills/visual-test/SKILL.md           | 190 ++++++++-
 .../cypress/specs/visuals/AvatarBadge.cy.tsx  |  94 +++++
 .../cypress/specs/visuals/AvatarGroup.cy.tsx  |  84 ++++
 .../main/cypress/specs/visuals/Bar.cy.tsx     |  98 +++++
 .../cypress/specs/visuals/Breadcrumbs.cy.tsx  | 101 +++++
 .../cypress/specs/visuals/ButtonBadge.cy.tsx  |  99 +++++
 .../cypress/specs/visuals/Calendar.cy.tsx     | 109 +++++
 .../specs/visuals/CalendarLegend.cy.tsx       |  90 +++++
 .../main/cypress/specs/visuals/Card.cy.tsx    | 116 ++++++
 .../cypress/specs/visuals/Carousel.cy.tsx     | 120 ++++++
 .../cypress/specs/visuals/ColorPalette.cy.tsx |  83 ++++
 .../specs/visuals/ColorPalettePopover.cy.tsx  |  78 ++++
 .../cypress/specs/visuals/ColorPicker.cy.tsx  |  55 +++
 .../cypress/specs/visuals/ComboBox.cy.tsx     | 340 +++++++++++++++-
 .../cypress/specs/visuals/DatePicker.cy.tsx   |  81 ++++
 .../specs/visuals/DateRangePicker.cy.tsx      | 146 +++++++
 .../specs/visuals/DateTimePicker.cy.tsx       |  81 ++++
 .../main/cypress/specs/visuals/Dialog.cy.tsx  | 114 ++++++
 .../specs/visuals/DynamicDateRange.cy.tsx     |  82 ++++
 .../specs/visuals/ExpandableText.cy.tsx       |  68 ++++
 .../cypress/specs/visuals/FileUploader.cy.tsx |  90 +++++
 .../main/cypress/specs/visuals/Form.cy.tsx    | 235 +++++++++++
 .../main/cypress/specs/visuals/Icon.cy.tsx    |  92 +++++
 .../main/cypress/specs/visuals/Input.cy.tsx   |  40 ++
 .../main/cypress/specs/visuals/Label.cy.tsx   |  50 +++
 .../main/cypress/specs/visuals/Link.cy.tsx    |  66 +++
 .../main/cypress/specs/visuals/List.cy.tsx    | 132 ++++++
 .../specs/visuals/ListItemGroup.cy.tsx        |  85 ++++
 .../specs/visuals/ListItemStandard.cy.tsx     | 142 +++++++
 .../main/cypress/specs/visuals/Menu.cy.tsx    | 220 ++++++++++
 .../specs/visuals/MultiComboBox.cy.tsx        | 264 +++++++++++-
 .../cypress/specs/visuals/MultiInput.cy.tsx   | 183 +++++++++
 .../main/cypress/specs/visuals/Panel.cy.tsx   |  78 ++++
 .../main/cypress/specs/visuals/Popover.cy.tsx | 105 +++++
 .../specs/visuals/ProgressIndicator.cy.tsx    |  72 ++++
 .../cypress/specs/visuals/RangeSlider.cy.tsx  |  52 +++
 .../specs/visuals/RatingIndicator.cy.tsx      |  69 ++++
 .../specs/visuals/ResponsivePopover.cy.tsx    |  80 ++++
 .../specs/visuals/SegmentedButton.cy.tsx      |  97 +++++
 .../main/cypress/specs/visuals/Select.cy.tsx  | 197 +++++++++
 .../main/cypress/specs/visuals/Slider.cy.tsx  |  52 +++
 .../specs/visuals/SpecialCalendarDate.cy.tsx  |  36 ++
 .../cypress/specs/visuals/SplitButton.cy.tsx  |  66 +++
 .../cypress/specs/visuals/StepInput.cy.tsx    |  67 ++++
 .../specs/visuals/SuggestionItem.cy.tsx       |  47 +++
 .../specs/visuals/SuggestionItemCustom.cy.tsx |  33 ++
 .../specs/visuals/SuggestionItemGroup.cy.tsx  |  46 +++
 .../cypress/specs/visuals/TabContainer.cy.tsx | 375 ++++++++++++++++++
 .../main/cypress/specs/visuals/Text.cy.tsx    |  94 +++++
 .../cypress/specs/visuals/TextArea.cy.tsx     | 134 +++++++
 .../cypress/specs/visuals/TimePicker.cy.tsx   | 127 ++++++
 .../main/cypress/specs/visuals/Title.cy.tsx   |  68 ++++
 .../main/cypress/specs/visuals/Toast.cy.tsx   |  77 ++++
 .../cypress/specs/visuals/ToggleButton.cy.tsx | 124 ++++++
 .../main/cypress/specs/visuals/Token.cy.tsx   |  62 +++
 .../cypress/specs/visuals/Tokenizer.cy.tsx    | 100 +++++
 .../main/cypress/specs/visuals/Toolbar.cy.tsx |  67 ++++
 .../specs/visuals/ToolbarButton.cy.tsx        |  80 ++++
 .../cypress/specs/visuals/ToolbarItem.cy.tsx  |  57 +++
 .../specs/visuals/ToolbarSelect.cy.tsx        |  88 ++++
 .../specs/visuals/ToolbarSeparator.cy.tsx     |  44 ++
 .../specs/visuals/ToolbarSpacer.cy.tsx        |  42 ++
 .../main/cypress/specs/visuals/Tree.cy.tsx    | 134 +++++++
 .../cypress/specs/visuals/TreeItem.cy.tsx     | 129 ++++++
 .../specs/visuals/TreeItemCustom.cy.tsx       | 108 +++++
 65 files changed, 6803 insertions(+), 32 deletions(-)
 create mode 100644 packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/AvatarGroup.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Bar.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Breadcrumbs.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ButtonBadge.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Calendar.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/CalendarLegend.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Card.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Carousel.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ColorPalette.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ColorPalettePopover.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ColorPicker.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/DateRangePicker.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Dialog.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/DynamicDateRange.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ExpandableText.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/FileUploader.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Form.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Icon.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Label.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Link.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/List.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ListItemGroup.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ListItemStandard.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Menu.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/MultiInput.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Panel.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Popover.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ProgressIndicator.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/RangeSlider.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/RatingIndicator.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ResponsivePopover.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/SegmentedButton.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Slider.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/SpecialCalendarDate.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/SplitButton.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/StepInput.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/SuggestionItem.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/SuggestionItemCustom.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/SuggestionItemGroup.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/TabContainer.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Text.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/TextArea.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/TimePicker.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Title.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Toast.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ToggleButton.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Token.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Tokenizer.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Toolbar.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ToolbarButton.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ToolbarItem.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ToolbarSelect.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ToolbarSeparator.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/ToolbarSpacer.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/Tree.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/TreeItem.cy.tsx
 create mode 100644 packages/main/cypress/specs/visuals/TreeItemCustom.cy.tsx

diff --git a/.claude/skills/visual-test/SKILL.md b/.claude/skills/visual-test/SKILL.md
index 1744966123e2..f2894ba1503f 100644
--- a/.claude/skills/visual-test/SKILL.md
+++ b/.claude/skills/visual-test/SKILL.md
@@ -90,6 +90,18 @@ For `IllustratedMessage`, there are no individual illustration source files —
 import "../../../src/illustrations/AllIllustrations.js";
 ```
 
+When a component uses an `icon` prop, import each icon as a **named import** (not a side-effect import) and pass the imported value to the prop:
+
+```tsx
+// WRONG — side-effect import, icon name passed as string
+import "@ui5/webcomponents-icons/dist/favorite.js";
+<ToggleButton icon="favorite" />
+
+// CORRECT — named import, value passed to prop
+import favorite from "@ui5/webcomponents-icons/dist/favorite.js";
+<ToggleButton icon={favorite} />
+```
+
 Import only what you actually use in the test.
 
 ## Before writing: read the existing functional test
@@ -148,8 +160,19 @@ Look at what the component can show and add cases accordingly:
   narrowed list.
 - **Selected items / tokens** — pre-select items, screenshot the tokenized
   state.
-- **Value state** — when a component accepts `valueState`, write one `it` per
-  value state value. The full set is `Negative`, `Critical`, `Positive`,
+- **Value state** — when a component accepts `valueState`, write **three** `it`
+  blocks per value state value:
+  1. **Basic** — component mounted with the value state prop, no interaction (screenshot at rest).
+  2. **Popover/dropdown open** — for components that have a dropdown or calendar
+     popover (ComboBox, MultiComboBox, Select, DatePicker, DateRangePicker,
+     DateTimePicker, MultiInput), open it and screenshot. The value state message
+     strip appears inside the popover here.
+  3. **Focused, dropdown closed** — for the same components, open then close with
+     Escape (or simply click the input area) so the component is focused but the
+     dropdown is closed. A standalone value state message popover appears in this
+     state, which has different rendering to the in-dropdown version.
+     For Input and MultiInput (no dropdown), just click the input to focus.
+  The full set of value state values is `Negative`, `Critical`, `Positive`,
   `Information`. `None` is the default and is already covered by the basic
   state test — do not add a separate case for it. Always include a
   `valueStateMessage` slot so the message strip renders. Applies to Input,
@@ -203,6 +226,22 @@ to themselves and is more resilient to tag name changes.
 Always prefer the existing custom commands over raw DOM queries — they
 already handle waiting and shadow DOM traversal correctly.
 
+### Nested shadow DOM — date/time pickers
+
+`DatePicker`, `DateRangePicker`, and `DateTimePicker` render their text field
+as an internal `ui5-datetime-input` component, which has **its own shadow
+DOM**. The native `<input>` is therefore two shadow levels deep. Use:
+
+```tsx
+cy.get("[ui5-date-picker]")
+  .shadow().find("ui5-datetime-input")
+  .shadow().find("input")
+  .realClick();
+```
+
+`shadow().find("input")` on the outer picker element will fail with
+"Expected to find element: input, but never found it."
+
 ### Available custom commands (use these for interactions)
 
 | Component | Command | What it does |
@@ -315,6 +354,31 @@ describe("MultiComboBox visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Negative — dropdown open", () => {
+		cy.mount(
+			<MultiComboBox valueState="Negative">
+				<span slot="valueStateMessage">Error message</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-multi-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Negative — focused", () => {
+		cy.mount(
+			<MultiComboBox valueState="Negative">
+				<span slot="valueStateMessage">Error message</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Critical", () => {
 		cy.mount(
 			<MultiComboBox valueState="Critical">
@@ -326,6 +390,31 @@ describe("MultiComboBox visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Critical — dropdown open", () => {
+		cy.mount(
+			<MultiComboBox valueState="Critical">
+				<span slot="valueStateMessage">Warning message</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-multi-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Critical — focused", () => {
+		cy.mount(
+			<MultiComboBox valueState="Critical">
+				<span slot="valueStateMessage">Warning message</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Positive", () => {
 		cy.mount(
 			<MultiComboBox valueState="Positive">
@@ -337,6 +426,31 @@ describe("MultiComboBox visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Positive — dropdown open", () => {
+		cy.mount(
+			<MultiComboBox valueState="Positive">
+				<span slot="valueStateMessage">Success message</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-multi-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Positive — focused", () => {
+		cy.mount(
+			<MultiComboBox valueState="Positive">
+				<span slot="valueStateMessage">Success message</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Information", () => {
 		cy.mount(
 			<MultiComboBox valueState="Information">
@@ -348,6 +462,31 @@ describe("MultiComboBox visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Information — dropdown open", () => {
+		cy.mount(
+			<MultiComboBox valueState="Information">
+				<span slot="valueStateMessage">Info message</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-multi-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Information — focused", () => {
+		cy.mount(
+			<MultiComboBox valueState="Information">
+				<span slot="valueStateMessage">Info message</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("no items — empty dropdown open", () => {
 		cy.mount(<MultiComboBox />);
 		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
@@ -374,17 +513,50 @@ runs will cause false diffs and make the test useless as a visual baseline.
 
 **Avoid:**
 - `BusyIndicator` — the spinner animation frame varies per run.
-- `DatePicker`, `TimePicker`, `DateRangePicker`, `DateTimePicker` without a
-  fixed value — they display today's date, which changes daily. Always pass
-  a hardcoded `value` prop: `<DatePicker value="2024-01-15" />`.
-- `DynamicDateRange` without a fixed option selected.
 - Any component that fetches or derives content at runtime (clocks,
   relative timestamps, random IDs shown in the UI).
 
-**If you must include a date/time component**, pin the value:
+### Freezing time for date/time components
+
+Any component that calls `new Date()` internally — to format a value,
+highlight today in a calendar, or derive a relative label — will produce
+different screenshots on different days. This includes:
+
+- `Calendar`, `SpecialCalendarDate` — today's cell is highlighted
+- `DatePicker`, `DateRangePicker`, `DateTimePicker` — today is highlighted in the open calendar
+- `DynamicDateRange` — operators like `TODAY`, `LASTDAYS`, `NEXTWEEKS` format to the current date
+
+**Always add a `beforeEach` that freezes `Date` using `cy.clock`:**
+
+```tsx
+beforeEach(() => {
+    cy.clock(new Date("Jan 15, 2024").getTime(), ["Date"]);
+});
+```
+
+The second argument `["Date"]` is critical — it stubs **only** the `Date`
+constructor and leaves `setTimeout`/`setInterval` untouched. Without it,
+`cy.clock()` also freezes timers, which breaks UI5's async rendering and
+causes all tests to time out.
+
+Use `Jan 15, 2024` as the standard fixed date across all tests in this
+repo for consistency.
+
+For `Calendar` and `SpecialCalendarDate`, pass a fixed `timestamp` prop
+instead of (or in addition to) `cy.clock` — the `timestamp` prop pins
+which month is displayed:
+
+```tsx
+<Calendar timestamp={1705276800} />  // Jan 15, 2024 in epoch seconds
+```
+
+For `DynamicDateRange`, also import all option classes so they register
+themselves before the component renders:
+
 ```tsx
-<DatePicker value="Jan 15, 2024" />
-<TimePicker value="10:00:00" />
+import "../../../src/dynamic-date-range-options/Today.js";
+import "../../../src/dynamic-date-range-options/SingleDate.js";
+// ... all options used in the test
 ```
 
 ## Running the test
diff --git a/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx b/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx
new file mode 100644
index 000000000000..c57255facff7
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/AvatarBadge.cy.tsx
@@ -0,0 +1,94 @@
+import Avatar from "../../../src/Avatar.js";
+import AvatarBadge from "../../../src/AvatarBadge.js";
+import "@ui5/webcomponents-icons/dist/employee.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+
+describe("AvatarBadge visual", () => {
+	it("basic state — icon badge on avatar", () => {
+		cy.mount(
+			<Avatar>
+				<AvatarBadge slot="badge" icon="employee" />
+			</Avatar>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — None", () => {
+		cy.mount(
+			<Avatar>
+				<AvatarBadge slot="badge" icon="employee" state="None" />
+			</Avatar>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Positive", () => {
+		cy.mount(
+			<Avatar>
+				<AvatarBadge slot="badge" icon="employee" state="Positive" />
+			</Avatar>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Critical", () => {
+		cy.mount(
+			<Avatar>
+				<AvatarBadge slot="badge" icon="employee" state="Critical" />
+			</Avatar>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Negative", () => {
+		cy.mount(
+			<Avatar>
+				<AvatarBadge slot="badge" icon="employee" state="Negative" />
+			</Avatar>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Information", () => {
+		cy.mount(
+			<Avatar>
+				<AvatarBadge slot="badge" icon="employee" state="Information" />
+			</Avatar>
+		);
+		cy.screenshot();
+	});
+
+	it("all sizes", () => {
+		cy.mount(
+			<div style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
+				<Avatar size="XS">
+					<AvatarBadge slot="badge" icon="alert" state="Negative" />
+				</Avatar>
+				<Avatar size="S">
+					<AvatarBadge slot="badge" icon="alert" state="Negative" />
+				</Avatar>
+				<Avatar size="M">
+					<AvatarBadge slot="badge" icon="alert" state="Negative" />
+				</Avatar>
+				<Avatar size="L">
+					<AvatarBadge slot="badge" icon="alert" state="Negative" />
+				</Avatar>
+				<Avatar size="XL">
+					<AvatarBadge slot="badge" icon="alert" state="Negative" />
+				</Avatar>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Avatar>
+					<AvatarBadge slot="badge" icon="employee" state="Negative" />
+				</Avatar>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/AvatarGroup.cy.tsx b/packages/main/cypress/specs/visuals/AvatarGroup.cy.tsx
new file mode 100644
index 000000000000..a5f51d901408
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/AvatarGroup.cy.tsx
@@ -0,0 +1,84 @@
+import Avatar from "../../../src/Avatar.js";
+import AvatarGroup from "../../../src/AvatarGroup.js";
+
+describe("AvatarGroup visual", () => {
+	it("type Group — initials", () => {
+		cy.mount(
+			<AvatarGroup type="Group">
+				<Avatar initials="AB" colorScheme="Accent1" />
+				<Avatar initials="CD" colorScheme="Accent2" />
+				<Avatar initials="EF" colorScheme="Accent3" />
+				<Avatar initials="GH" colorScheme="Accent4" />
+			</AvatarGroup>
+		);
+		cy.screenshot();
+	});
+
+	it("type Individual — initials", () => {
+		cy.mount(
+			<AvatarGroup type="Individual">
+				<Avatar initials="AB" colorScheme="Accent1" />
+				<Avatar initials="CD" colorScheme="Accent2" />
+				<Avatar initials="EF" colorScheme="Accent3" />
+				<Avatar initials="GH" colorScheme="Accent4" />
+			</AvatarGroup>
+		);
+		cy.screenshot();
+	});
+
+	it("type Group — size XS", () => {
+		cy.mount(
+			<AvatarGroup type="Group">
+				<Avatar size="XS" initials="AB" colorScheme="Accent1" />
+				<Avatar size="XS" initials="CD" colorScheme="Accent2" />
+				<Avatar size="XS" initials="EF" colorScheme="Accent3" />
+				<Avatar size="XS" initials="GH" colorScheme="Accent4" />
+			</AvatarGroup>
+		);
+		cy.screenshot();
+	});
+
+	it("type Group — size L", () => {
+		cy.mount(
+			<AvatarGroup type="Group">
+				<Avatar size="L" initials="AB" colorScheme="Accent5" />
+				<Avatar size="L" initials="CD" colorScheme="Accent6" />
+				<Avatar size="L" initials="EF" colorScheme="Accent7" />
+				<Avatar size="L" initials="GH" colorScheme="Accent8" />
+			</AvatarGroup>
+		);
+		cy.screenshot();
+	});
+
+	it("overflow — many avatars", () => {
+		cy.mount(
+			<div style={{ width: "200px" }}>
+				<AvatarGroup type="Group">
+					<Avatar initials="AA" colorScheme="Accent1" />
+					<Avatar initials="BB" colorScheme="Accent2" />
+					<Avatar initials="CC" colorScheme="Accent3" />
+					<Avatar initials="DD" colorScheme="Accent4" />
+					<Avatar initials="EE" colorScheme="Accent5" />
+					<Avatar initials="FF" colorScheme="Accent6" />
+					<Avatar initials="GG" colorScheme="Accent7" />
+					<Avatar initials="HH" colorScheme="Accent8" />
+				</AvatarGroup>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<AvatarGroup type="Group">
+					<Avatar initials="AB" colorScheme="Accent1" />
+					<Avatar initials="CD" colorScheme="Accent2" />
+					<Avatar initials="EF" colorScheme="Accent3" />
+					<Avatar initials="GH" colorScheme="Accent4" />
+				</AvatarGroup>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Bar.cy.tsx b/packages/main/cypress/specs/visuals/Bar.cy.tsx
new file mode 100644
index 000000000000..d5eefe057cda
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Bar.cy.tsx
@@ -0,0 +1,98 @@
+import Bar from "../../../src/Bar.js";
+import Button from "../../../src/Button.js";
+
+describe("Bar visual", () => {
+	it("basic state — Header design", () => {
+		cy.mount(
+			<Bar>
+				<Button slot="startContent">Back</Button>
+				<div>Page Title</div>
+				<Button slot="endContent">Settings</Button>
+			</Bar>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode — Header design", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Bar>
+					<Button slot="startContent">Back</Button>
+					<div>Page Title</div>
+					<Button slot="endContent">Settings</Button>
+				</Bar>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("design — Subheader", () => {
+		cy.mount(
+			<Bar design="Subheader">
+				<Button slot="startContent">Menu</Button>
+				<div>Subheader Title</div>
+				<Button slot="endContent">Profile</Button>
+			</Bar>
+		);
+		cy.screenshot();
+	});
+
+	it("design — Footer", () => {
+		cy.mount(
+			<Bar design="Footer">
+				<Button slot="startContent">Help</Button>
+				<div>Footer Content</div>
+				<Button slot="endContent">Contact</Button>
+			</Bar>
+		);
+		cy.screenshot();
+	});
+
+	it("design — FloatingFooter", () => {
+		cy.mount(
+			<Bar design="FloatingFooter">
+				<Button slot="startContent">Cancel</Button>
+				<Button slot="endContent">Save</Button>
+			</Bar>
+		);
+		cy.screenshot();
+	});
+
+	it("start content only", () => {
+		cy.mount(
+			<Bar>
+				<Button slot="startContent">Back</Button>
+			</Bar>
+		);
+		cy.screenshot();
+	});
+
+	it("end content only", () => {
+		cy.mount(
+			<Bar>
+				<Button slot="endContent">Save</Button>
+			</Bar>
+		);
+		cy.screenshot();
+	});
+
+	it("middle content only", () => {
+		cy.mount(
+			<Bar>
+				<div>Centered Title</div>
+			</Bar>
+		);
+		cy.screenshot();
+	});
+
+	it("long content — shrinked layout", () => {
+		cy.mount(
+			<Bar style={{ width: "300px" }}>
+				<Button slot="startContent">Very Long Button Label Here</Button>
+				<div>A Very Long Page Title That Takes Up Space</div>
+				<Button slot="endContent">Another Long Label</Button>
+			</Bar>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Breadcrumbs.cy.tsx b/packages/main/cypress/specs/visuals/Breadcrumbs.cy.tsx
new file mode 100644
index 000000000000..c33c4ae59ad1
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Breadcrumbs.cy.tsx
@@ -0,0 +1,101 @@
+import Breadcrumbs from "../../../src/Breadcrumbs.js";
+import BreadcrumbsItem from "../../../src/BreadcrumbsItem.js";
+
+describe("Breadcrumbs visual", () => {
+	it("basic state — Standard design", () => {
+		cy.mount(
+			<Breadcrumbs>
+				<BreadcrumbsItem href="/">Root</BreadcrumbsItem>
+				<BreadcrumbsItem href="/products">Products</BreadcrumbsItem>
+				<BreadcrumbsItem href="/products/laptops">Laptops</BreadcrumbsItem>
+				<BreadcrumbsItem>Current Page</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+		cy.screenshot();
+	});
+
+	it("design — NoCurrentPage", () => {
+		cy.mount(
+			<Breadcrumbs design="NoCurrentPage">
+				<BreadcrumbsItem href="/">Root</BreadcrumbsItem>
+				<BreadcrumbsItem href="/products">Products</BreadcrumbsItem>
+				<BreadcrumbsItem href="/products/laptops">Laptops</BreadcrumbsItem>
+				<BreadcrumbsItem href="/products/laptops/detail">Detail</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+		cy.screenshot();
+	});
+
+	it("separator — Slash (default)", () => {
+		cy.mount(
+			<Breadcrumbs separators="Slash">
+				<BreadcrumbsItem href="/">Root</BreadcrumbsItem>
+				<BreadcrumbsItem href="/section">Section</BreadcrumbsItem>
+				<BreadcrumbsItem>Current</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+		cy.screenshot();
+	});
+
+	it("separator — GreaterThan", () => {
+		cy.mount(
+			<Breadcrumbs separators="GreaterThan">
+				<BreadcrumbsItem href="/">Root</BreadcrumbsItem>
+				<BreadcrumbsItem href="/section">Section</BreadcrumbsItem>
+				<BreadcrumbsItem>Current</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+		cy.screenshot();
+	});
+
+	it("separator — BackSlash", () => {
+		cy.mount(
+			<Breadcrumbs separators="BackSlash">
+				<BreadcrumbsItem href="/">Root</BreadcrumbsItem>
+				<BreadcrumbsItem href="/section">Section</BreadcrumbsItem>
+				<BreadcrumbsItem>Current</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+		cy.screenshot();
+	});
+
+	it("separator — DoubleGreaterThan", () => {
+		cy.mount(
+			<Breadcrumbs separators="DoubleGreaterThan">
+				<BreadcrumbsItem href="/">Root</BreadcrumbsItem>
+				<BreadcrumbsItem href="/section">Section</BreadcrumbsItem>
+				<BreadcrumbsItem>Current</BreadcrumbsItem>
+			</Breadcrumbs>
+		);
+		cy.screenshot();
+	});
+
+	it("overflow — narrow container", () => {
+		cy.mount(
+			<div style={{ width: "250px" }}>
+				<Breadcrumbs>
+					<BreadcrumbsItem href="/">Root</BreadcrumbsItem>
+					<BreadcrumbsItem href="/level1">Level 1</BreadcrumbsItem>
+					<BreadcrumbsItem href="/level2">Level 2</BreadcrumbsItem>
+					<BreadcrumbsItem href="/level3">Level 3</BreadcrumbsItem>
+					<BreadcrumbsItem href="/level4">Level 4</BreadcrumbsItem>
+					<BreadcrumbsItem>Current</BreadcrumbsItem>
+				</Breadcrumbs>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Breadcrumbs>
+					<BreadcrumbsItem href="/">Root</BreadcrumbsItem>
+					<BreadcrumbsItem href="/products">Products</BreadcrumbsItem>
+					<BreadcrumbsItem>Current Page</BreadcrumbsItem>
+				</Breadcrumbs>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ButtonBadge.cy.tsx b/packages/main/cypress/specs/visuals/ButtonBadge.cy.tsx
new file mode 100644
index 000000000000..ea41868eaacc
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ButtonBadge.cy.tsx
@@ -0,0 +1,99 @@
+import Button from "../../../src/Button.js";
+import ButtonBadge from "../../../src/ButtonBadge.js";
+import "@ui5/webcomponents-icons/dist/bell.js";
+
+describe("ButtonBadge visual", () => {
+	it("design — OverlayText", () => {
+		cy.mount(
+			<Button>
+				Notifications
+				<ButtonBadge slot="badge" design="OverlayText" text="3" />
+			</Button>
+		);
+		cy.screenshot();
+	});
+
+	it("design — InlineText", () => {
+		cy.mount(
+			<Button>
+				Notifications
+				<ButtonBadge slot="badge" design="InlineText" text="3" />
+			</Button>
+		);
+		cy.screenshot();
+	});
+
+	it("design — AttentionDot", () => {
+		cy.mount(
+			<Button>
+				Messages
+				<ButtonBadge slot="badge" design="AttentionDot" text="" />
+			</Button>
+		);
+		cy.screenshot();
+	});
+
+	it("OverlayText — large number", () => {
+		cy.mount(
+			<Button>
+				Notifications
+				<ButtonBadge slot="badge" design="OverlayText" text="99+" />
+			</Button>
+		);
+		cy.screenshot();
+	});
+
+	it("all designs side by side", () => {
+		cy.mount(
+			<div style={{ display: "flex", gap: "1rem" }}>
+				<Button>
+					Overlay
+					<ButtonBadge slot="badge" design="OverlayText" text="5" />
+				</Button>
+				<Button>
+					Inline
+					<ButtonBadge slot="badge" design="InlineText" text="5" />
+				</Button>
+				<Button>
+					Dot
+					<ButtonBadge slot="badge" design="AttentionDot" text="" />
+				</Button>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("with icon-only button", () => {
+		cy.mount(
+			<div style={{ display: "flex", gap: "1rem" }}>
+				<Button icon="bell">
+					<ButtonBadge slot="badge" design="OverlayText" text="7" />
+				</Button>
+				<Button icon="bell">
+					<ButtonBadge slot="badge" design="AttentionDot" text="" />
+				</Button>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size style={{ display: "flex", gap: "1rem" }}>
+				<Button>
+					Overlay
+					<ButtonBadge slot="badge" design="OverlayText" text="3" />
+				</Button>
+				<Button>
+					Inline
+					<ButtonBadge slot="badge" design="InlineText" text="3" />
+				</Button>
+				<Button>
+					Dot
+					<ButtonBadge slot="badge" design="AttentionDot" text="" />
+				</Button>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Calendar.cy.tsx b/packages/main/cypress/specs/visuals/Calendar.cy.tsx
new file mode 100644
index 000000000000..4f0b4ab0897d
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Calendar.cy.tsx
@@ -0,0 +1,109 @@
+import Calendar from "../../../src/Calendar.js";
+import CalendarDate from "../../../src/CalendarDate.js";
+import CalendarDateRange from "../../../src/CalendarDateRange.js";
+import CalendarLegend from "../../../src/CalendarLegend.js";
+import CalendarLegendItem from "../../../src/CalendarLegendItem.js";
+
+describe("Calendar visual", () => {
+	it("basic state — no selection", () => {
+		cy.mount(
+			<Calendar timestamp={1705276800} />
+		);
+		cy.screenshot();
+	});
+
+	it("selection mode — Single with selected date", () => {
+		cy.mount(
+			<Calendar timestamp={1705276800}>
+				<CalendarDate value="Jan 15, 2024" />
+			</Calendar>
+		);
+		cy.screenshot();
+	});
+
+	it("selection mode — Multiple with selected dates", () => {
+		cy.mount(
+			<Calendar selectionMode="Multiple" timestamp={1705276800}>
+				<CalendarDate value="Jan 10, 2024" />
+				<CalendarDate value="Jan 15, 2024" />
+				<CalendarDate value="Jan 20, 2024" />
+			</Calendar>
+		);
+		cy.screenshot();
+	});
+
+	it("selection mode — Range with selected range", () => {
+		cy.mount(
+			<Calendar selectionMode="Range" timestamp={1705276800}>
+				<CalendarDateRange startValue="Jan 10, 2024" endValue="Jan 20, 2024" />
+			</Calendar>
+		);
+		cy.screenshot();
+	});
+
+	it("hide week numbers", () => {
+		cy.mount(
+			<Calendar hideWeekNumbers timestamp={1705276800} />
+		);
+		cy.screenshot();
+	});
+
+	it("with min and max date", () => {
+		cy.mount(
+			<Calendar
+				minDate="Jan 5, 2024"
+				maxDate="Jan 25, 2024"
+				timestamp={1705276800}
+			/>
+		);
+		cy.screenshot();
+	});
+
+	it("with disabled date range", () => {
+		cy.mount(
+			<Calendar timestamp={1705276800}>
+				<CalendarDateRange slot="disabledDates" startValue="Jan 13, 2024" endValue="Jan 17, 2024" />
+			</Calendar>
+		);
+		cy.screenshot();
+	});
+
+	it("with calendar legend", () => {
+		cy.mount(
+			<Calendar timestamp={1705276800}>
+				<CalendarLegend slot="calendarLegend">
+					<CalendarLegendItem type="Working" text="Working" />
+					<CalendarLegendItem type="NonWorking" text="Non-Working" />
+				</CalendarLegend>
+			</Calendar>
+		);
+		cy.screenshot();
+	});
+
+	it("month picker — opened", () => {
+		cy.mount(
+			<Calendar timestamp={1705276800} />
+		);
+		cy.get("[ui5-calendar]").shadow().find("[data-ui5-cal-header-btn-month]").realClick();
+		cy.screenshot();
+	});
+
+	it("year picker — opened", () => {
+		cy.mount(
+			<Calendar timestamp={1705276800} />
+		);
+		cy.get("[ui5-calendar]").shadow().find("[data-ui5-cal-header-btn-year]").realClick();
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Calendar timestamp={1705276800}>
+					<CalendarDate value="Jan 15, 2024" />
+				</Calendar>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/CalendarLegend.cy.tsx b/packages/main/cypress/specs/visuals/CalendarLegend.cy.tsx
new file mode 100644
index 000000000000..7c7f3fb88f0a
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/CalendarLegend.cy.tsx
@@ -0,0 +1,90 @@
+import CalendarLegend from "../../../src/CalendarLegend.js";
+import CalendarLegendItem from "../../../src/CalendarLegendItem.js";
+
+describe("CalendarLegend visual", () => {
+	it("basic state — all built-in types", () => {
+		cy.mount(
+			<CalendarLegend>
+				<CalendarLegendItem type="Today" text="Today" />
+				<CalendarLegendItem type="Selected" text="Selected" />
+				<CalendarLegendItem type="Working" text="Working" />
+				<CalendarLegendItem type="NonWorking" text="Non-Working" />
+			</CalendarLegend>
+		);
+		cy.screenshot();
+	});
+
+	it("with custom types", () => {
+		cy.mount(
+			<CalendarLegend>
+				<CalendarLegendItem type="Type01" text="Holiday" />
+				<CalendarLegendItem type="Type02" text="Birthday" />
+				<CalendarLegendItem type="Type03" text="Deadline" />
+				<CalendarLegendItem type="Type04" text="Meeting" />
+			</CalendarLegend>
+		);
+		cy.screenshot();
+	});
+
+	it("hide today", () => {
+		cy.mount(
+			<CalendarLegend hideToday>
+				<CalendarLegendItem type="Selected" text="Selected" />
+				<CalendarLegendItem type="Working" text="Working" />
+				<CalendarLegendItem type="NonWorking" text="Non-Working" />
+			</CalendarLegend>
+		);
+		cy.screenshot();
+	});
+
+	it("hide selected day", () => {
+		cy.mount(
+			<CalendarLegend hideSelectedDay>
+				<CalendarLegendItem type="Today" text="Today" />
+				<CalendarLegendItem type="Working" text="Working" />
+				<CalendarLegendItem type="NonWorking" text="Non-Working" />
+			</CalendarLegend>
+		);
+		cy.screenshot();
+	});
+
+	it("hide working and non-working day", () => {
+		cy.mount(
+			<CalendarLegend hideWorkingDay hideNonWorkingDay>
+				<CalendarLegendItem type="Today" text="Today" />
+				<CalendarLegendItem type="Selected" text="Selected" />
+				<CalendarLegendItem type="Type01" text="Custom" />
+			</CalendarLegend>
+		);
+		cy.screenshot();
+	});
+
+	it("mixed built-in and custom types", () => {
+		cy.mount(
+			<CalendarLegend>
+				<CalendarLegendItem type="Today" text="Today" />
+				<CalendarLegendItem type="Selected" text="Selected" />
+				<CalendarLegendItem type="Working" text="Working" />
+				<CalendarLegendItem type="NonWorking" text="Non-Working" />
+				<CalendarLegendItem type="Type01" text="Holiday" />
+				<CalendarLegendItem type="Type02" text="Birthday" />
+				<CalendarLegendItem type="Type03" text="Deadline" />
+			</CalendarLegend>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<CalendarLegend>
+					<CalendarLegendItem type="Today" text="Today" />
+					<CalendarLegendItem type="Selected" text="Selected" />
+					<CalendarLegendItem type="Working" text="Working" />
+					<CalendarLegendItem type="NonWorking" text="Non-Working" />
+				</CalendarLegend>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Card.cy.tsx b/packages/main/cypress/specs/visuals/Card.cy.tsx
new file mode 100644
index 000000000000..0369e8440ef1
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Card.cy.tsx
@@ -0,0 +1,116 @@
+import Card from "../../../src/Card.js";
+import CardHeader from "../../../src/CardHeader.js";
+import Avatar from "../../../src/Avatar.js";
+import Button from "../../../src/Button.js";
+import List from "../../../src/List.js";
+import ListItemStandard from "../../../src/ListItemStandard.js";
+
+describe("Card visual", () => {
+	it("basic state — title only", () => {
+		cy.mount(
+			<Card>
+				<CardHeader slot="header" titleText="Card Title" />
+				<List>
+					<ListItemStandard>Item 1</ListItemStandard>
+					<ListItemStandard>Item 2</ListItemStandard>
+					<ListItemStandard>Item 3</ListItemStandard>
+				</List>
+			</Card>
+		);
+		cy.screenshot();
+	});
+
+	it("header — title, subtitle, additional text", () => {
+		cy.mount(
+			<Card>
+				<CardHeader
+					slot="header"
+					titleText="Card Title"
+					subtitleText="Subtitle"
+					additionalText="3 of 10"
+				/>
+				<List>
+					<ListItemStandard>Item 1</ListItemStandard>
+					<ListItemStandard>Item 2</ListItemStandard>
+				</List>
+			</Card>
+		);
+		cy.screenshot();
+	});
+
+	it("header — with avatar slot", () => {
+		cy.mount(
+			<Card>
+				<CardHeader slot="header" titleText="Team Members" subtitleText="5 available">
+					<Avatar slot="avatar" initials="TM" colorScheme="Accent1" size="S" />
+				</CardHeader>
+				<List>
+					<ListItemStandard>Alice</ListItemStandard>
+					<ListItemStandard>Bob</ListItemStandard>
+				</List>
+			</Card>
+		);
+		cy.screenshot();
+	});
+
+	it("header — with action slot", () => {
+		cy.mount(
+			<Card>
+				<CardHeader slot="header" titleText="Sales Report">
+					<Button slot="action" design="Transparent">See All</Button>
+				</CardHeader>
+				<List>
+					<ListItemStandard>Q1</ListItemStandard>
+					<ListItemStandard>Q2</ListItemStandard>
+				</List>
+			</Card>
+		);
+		cy.screenshot();
+	});
+
+	it("header — interactive", () => {
+		cy.mount(
+			<Card>
+				<CardHeader slot="header" titleText="Clickable Card" interactive />
+				<List>
+					<ListItemStandard>Item 1</ListItemStandard>
+					<ListItemStandard>Item 2</ListItemStandard>
+				</List>
+			</Card>
+		);
+		cy.screenshot();
+	});
+
+	it("header — interactive focused", () => {
+		cy.mount(
+			<Card>
+				<CardHeader slot="header" titleText="Focused Card" interactive />
+				<List>
+					<ListItemStandard>Item 1</ListItemStandard>
+				</List>
+			</Card>
+		);
+		cy.get("[ui5-card-header]").shadow().find(".ui5-card-header-focusable-element").focus();
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Card>
+					<CardHeader
+						slot="header"
+						titleText="Compact Card"
+						subtitleText="Subtitle"
+						additionalText="3 of 10"
+					/>
+					<List>
+						<ListItemStandard>Item 1</ListItemStandard>
+						<ListItemStandard>Item 2</ListItemStandard>
+					</List>
+				</Card>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Carousel.cy.tsx b/packages/main/cypress/specs/visuals/Carousel.cy.tsx
new file mode 100644
index 000000000000..04fcbc545ed2
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Carousel.cy.tsx
@@ -0,0 +1,120 @@
+import Carousel from "../../../src/Carousel.js";
+import Card from "../../../src/Card.js";
+import CardHeader from "../../../src/CardHeader.js";
+import Title from "../../../src/Title.js";
+
+const CarouselPage = ({ label }: { label: string }) => (
+	<div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "200px", background: "var(--sapTile_Background)" }}>
+		<Title>{label}</Title>
+	</div>
+);
+
+describe("Carousel visual", () => {
+	it("basic state — first page", () => {
+		cy.mount(
+			<Carousel>
+				<CarouselPage label="Page 1" />
+				<CarouselPage label="Page 2" />
+				<CarouselPage label="Page 3" />
+			</Carousel>
+		);
+		cy.screenshot();
+	});
+
+	it("page indicator — Numeric style", () => {
+		cy.mount(
+			<Carousel pageIndicatorType="Numeric">
+				<CarouselPage label="Page 1" />
+				<CarouselPage label="Page 2" />
+				<CarouselPage label="Page 3" />
+				<CarouselPage label="Page 4" />
+				<CarouselPage label="Page 5" />
+			</Carousel>
+		);
+		cy.screenshot();
+	});
+
+	it("hide page indicator", () => {
+		cy.mount(
+			<Carousel hidePageIndicator>
+				<CarouselPage label="Page 1" />
+				<CarouselPage label="Page 2" />
+				<CarouselPage label="Page 3" />
+			</Carousel>
+		);
+		cy.screenshot();
+	});
+
+	it("hide navigation arrows", () => {
+		cy.mount(
+			<Carousel hideNavigationArrows>
+				<CarouselPage label="Page 1" />
+				<CarouselPage label="Page 2" />
+				<CarouselPage label="Page 3" />
+			</Carousel>
+		);
+		cy.screenshot();
+	});
+
+	it("arrows placement — Navigation", () => {
+		cy.mount(
+			<Carousel arrowsPlacement="Navigation">
+				<CarouselPage label="Page 1" />
+				<CarouselPage label="Page 2" />
+				<CarouselPage label="Page 3" />
+			</Carousel>
+		);
+		cy.screenshot();
+	});
+
+	it("navigate to second page", () => {
+		cy.mount(
+			<Carousel>
+				<CarouselPage label="Page 1" />
+				<CarouselPage label="Page 2" />
+				<CarouselPage label="Page 3" />
+			</Carousel>
+		);
+		cy.get("[ui5-carousel]").realHover();
+		cy.get("[ui5-carousel]").shadow().find("[data-ui5-arrow-forward]").realClick();
+		cy.screenshot();
+	});
+
+	it("cyclic — on last page with dot indicator", () => {
+		cy.mount(
+			<Carousel cyclic>
+				<CarouselPage label="Page 1" />
+				<CarouselPage label="Page 2" />
+				<CarouselPage label="Page 3" />
+			</Carousel>
+		);
+		cy.get("[ui5-carousel]").realHover();
+		cy.get("[ui5-carousel]").shadow().find("[data-ui5-arrow-forward]").realClick();
+		cy.get("[ui5-carousel]").shadow().find("[data-ui5-arrow-forward]").realClick();
+		cy.screenshot();
+	});
+
+	it("many pages — dot indicators (9+)", () => {
+		cy.mount(
+			<Carousel>
+				{Array.from({ length: 10 }, (_, i) => (
+					<CarouselPage key={i} label={`Page ${i + 1}`} />
+				))}
+			</Carousel>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Carousel>
+					<CarouselPage label="Page 1" />
+					<CarouselPage label="Page 2" />
+					<CarouselPage label="Page 3" />
+				</Carousel>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ColorPalette.cy.tsx b/packages/main/cypress/specs/visuals/ColorPalette.cy.tsx
new file mode 100644
index 000000000000..f1447a22a3f1
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ColorPalette.cy.tsx
@@ -0,0 +1,83 @@
+import ColorPalette from "../../../src/ColorPalette.js";
+import ColorPaletteItem from "../../../src/ColorPaletteItem.js";
+
+describe("ColorPalette visual", () => {
+	it("basic state", () => {
+		cy.mount(
+			<ColorPalette>
+				<ColorPaletteItem value="darkblue" />
+				<ColorPaletteItem value="pink" />
+				<ColorPaletteItem value="#444444" />
+				<ColorPaletteItem value="rgb(0,200,0)" />
+				<ColorPaletteItem value="darkred" />
+				<ColorPaletteItem value="orange" />
+				<ColorPaletteItem value="darkgreen" />
+				<ColorPaletteItem value="magenta" />
+				<ColorPaletteItem value="cornflowerblue" />
+				<ColorPaletteItem value="white" />
+				<ColorPaletteItem value="black" />
+			</ColorPalette>
+		);
+		cy.screenshot();
+	});
+
+	it("with selected color", () => {
+		cy.mount(
+			<ColorPalette>
+				<ColorPaletteItem value="darkblue" />
+				<ColorPaletteItem value="pink" selected />
+				<ColorPaletteItem value="#444444" />
+				<ColorPaletteItem value="rgb(0,200,0)" />
+				<ColorPaletteItem value="darkred" />
+				<ColorPaletteItem value="orange" />
+				<ColorPaletteItem value="darkgreen" />
+			</ColorPalette>
+		);
+		cy.screenshot();
+	});
+
+	it("with default color", () => {
+		cy.mount(
+			<ColorPalette showDefaultColor defaultColor="darkblue">
+				<ColorPaletteItem value="darkblue" />
+				<ColorPaletteItem value="pink" />
+				<ColorPaletteItem value="#444444" />
+				<ColorPaletteItem value="rgb(0,200,0)" />
+				<ColorPaletteItem value="darkred" />
+			</ColorPalette>
+		);
+		cy.screenshot();
+	});
+
+	it("with recent colors", () => {
+		cy.mount(
+			<ColorPalette showRecentColors>
+				<ColorPaletteItem value="darkblue" />
+				<ColorPaletteItem value="pink" />
+				<ColorPaletteItem value="#444444" />
+				<ColorPaletteItem value="rgb(0,200,0)" />
+				<ColorPaletteItem value="darkred" />
+			</ColorPalette>
+		);
+		// select a color to populate recent colors
+		cy.get("[ui5-color-palette-item]").first().realClick();
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<ColorPalette>
+					<ColorPaletteItem value="darkblue" />
+					<ColorPaletteItem value="pink" />
+					<ColorPaletteItem value="#444444" />
+					<ColorPaletteItem value="rgb(0,200,0)" />
+					<ColorPaletteItem value="darkred" />
+					<ColorPaletteItem value="orange" />
+					<ColorPaletteItem value="darkgreen" />
+				</ColorPalette>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ColorPalettePopover.cy.tsx b/packages/main/cypress/specs/visuals/ColorPalettePopover.cy.tsx
new file mode 100644
index 000000000000..7eb83d49dba0
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ColorPalettePopover.cy.tsx
@@ -0,0 +1,78 @@
+import ColorPalettePopover from "../../../src/ColorPalettePopover.js";
+import ColorPaletteItem from "../../../src/ColorPaletteItem.js";
+import Button from "../../../src/Button.js";
+
+describe("ColorPalettePopover visual", () => {
+	it("popover open — basic", () => {
+		cy.mount(
+			<>
+				<Button id="opener">Open</Button>
+				<ColorPalettePopover opener="opener">
+					<ColorPaletteItem value="darkblue" />
+					<ColorPaletteItem value="pink" />
+					<ColorPaletteItem value="#444444" />
+					<ColorPaletteItem value="rgb(0,200,0)" />
+					<ColorPaletteItem value="darkred" />
+					<ColorPaletteItem value="orange" />
+					<ColorPaletteItem value="darkgreen" />
+					<ColorPaletteItem value="magenta" />
+					<ColorPaletteItem value="cornflowerblue" />
+					<ColorPaletteItem value="white" />
+				</ColorPalettePopover>
+			</>
+		);
+		cy.get("[ui5-color-palette-popover]").ui5ColorPalettePopoverOpen();
+		cy.screenshot();
+	});
+
+	it("popover open — with default color", () => {
+		cy.mount(
+			<>
+				<Button id="opener2">Open</Button>
+				<ColorPalettePopover opener="opener2" showDefaultColor defaultColor="darkblue">
+					<ColorPaletteItem value="darkblue" />
+					<ColorPaletteItem value="pink" />
+					<ColorPaletteItem value="#444444" />
+					<ColorPaletteItem value="darkred" />
+					<ColorPaletteItem value="orange" />
+				</ColorPalettePopover>
+			</>
+		);
+		cy.get("[ui5-color-palette-popover]").ui5ColorPalettePopoverOpen();
+		cy.screenshot();
+	});
+
+	it("popover open — with recent colors", () => {
+		cy.mount(
+			<>
+				<Button id="opener3">Open</Button>
+				<ColorPalettePopover opener="opener3" showRecentColors>
+					<ColorPaletteItem value="darkblue" />
+					<ColorPaletteItem value="pink" />
+					<ColorPaletteItem value="#444444" />
+					<ColorPaletteItem value="darkred" />
+					<ColorPaletteItem value="orange" />
+				</ColorPalettePopover>
+			</>
+		);
+		cy.get("[ui5-color-palette-popover]").ui5ColorPalettePopoverOpen();
+		cy.screenshot();
+	});
+
+	it("popover open — with show more colors", () => {
+		cy.mount(
+			<>
+				<Button id="opener4">Open</Button>
+				<ColorPalettePopover opener="opener4" showMoreColors>
+					<ColorPaletteItem value="darkblue" />
+					<ColorPaletteItem value="pink" />
+					<ColorPaletteItem value="#444444" />
+					<ColorPaletteItem value="darkred" />
+					<ColorPaletteItem value="orange" />
+				</ColorPalettePopover>
+			</>
+		);
+		cy.get("[ui5-color-palette-popover]").ui5ColorPalettePopoverOpen();
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ColorPicker.cy.tsx b/packages/main/cypress/specs/visuals/ColorPicker.cy.tsx
new file mode 100644
index 000000000000..18e27ecebe60
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ColorPicker.cy.tsx
@@ -0,0 +1,55 @@
+import ColorPicker from "../../../src/ColorPicker.js";
+
+describe("ColorPicker visual", () => {
+	it("basic state — default color", () => {
+		cy.mount(
+			<ColorPicker value="rgba(255,255,255,1)" />
+		);
+		cy.screenshot();
+	});
+
+	it("with red color selected", () => {
+		cy.mount(
+			<ColorPicker value="rgba(255,0,0,1)" />
+		);
+		cy.screenshot();
+	});
+
+	it("with blue color selected", () => {
+		cy.mount(
+			<ColorPicker value="darkblue" />
+		);
+		cy.screenshot();
+	});
+
+	it("with semi-transparent color", () => {
+		cy.mount(
+			<ColorPicker value="rgba(0,128,0,0.5)" />
+		);
+		cy.screenshot();
+	});
+
+	it("simplified mode — no alpha or RGB inputs", () => {
+		cy.mount(
+			<ColorPicker simplified value="rgba(255,0,0,1)" />
+		);
+		cy.screenshot();
+	});
+
+	it("HSL mode toggled", () => {
+		cy.mount(
+			<ColorPicker value="rgba(255,0,0,1)" />
+		);
+		cy.get("[ui5-color-picker]").shadow().find("#toggle-picker-mode").realClick();
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<ColorPicker value="rgba(255,0,0,1)" />
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ComboBox.cy.tsx b/packages/main/cypress/specs/visuals/ComboBox.cy.tsx
index ec81c3bfc8af..822693a5971a 100644
--- a/packages/main/cypress/specs/visuals/ComboBox.cy.tsx
+++ b/packages/main/cypress/specs/visuals/ComboBox.cy.tsx
@@ -1,5 +1,6 @@
 import ComboBox from "../../../src/ComboBox.js";
 import ComboBoxItem from "../../../src/ComboBoxItem.js";
+import ComboBoxItemCustom from "../../../src/ComboBoxItemCustom.js";
 import ComboBoxItemGroup from "../../../src/ComboBoxItemGroup.js";
 
 describe("ComboBox visual", () => {
@@ -42,6 +43,20 @@ describe("ComboBox visual", () => {
 		cy.screenshot();
 	});
 
+	it("dropdown open — first item focused via arrow key", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="Algeria" />
+				<ComboBoxItem text="Bulgaria" />
+				<ComboBoxItem text="Canada" />
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-combobox]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.realPress("ArrowDown");
+		cy.screenshot();
+	});
+
 	it("filtering — type to narrow list", () => {
 		cy.mount(
 			<ComboBox>
@@ -57,21 +72,14 @@ describe("ComboBox visual", () => {
 		cy.screenshot();
 	});
 
-	it("with grouped items — dropdown open", () => {
+	it("selected item", () => {
 		cy.mount(
-			<ComboBox>
-				<ComboBoxItemGroup headerText="Africa">
-					<ComboBoxItem text="Algeria" />
-					<ComboBoxItem text="Egypt" />
-				</ComboBoxItemGroup>
-				<ComboBoxItemGroup headerText="Europe">
-					<ComboBoxItem text="Bulgaria" />
-					<ComboBoxItem text="Denmark" />
-				</ComboBoxItemGroup>
+			<ComboBox value="Bulgaria">
+				<ComboBoxItem text="Algeria" />
+				<ComboBoxItem text="Bulgaria" selected />
+				<ComboBoxItem text="Canada" />
 			</ComboBox>
 		);
-		cy.get("[ui5-combobox]").shadow().find("[ui5-icon]").realClick();
-		cy.get("[ui5-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
 		cy.screenshot();
 	});
 
@@ -106,6 +114,31 @@ describe("ComboBox visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Negative — dropdown open", () => {
+		cy.mount(
+			<ComboBox value="invalid" valueState="Negative">
+				<span slot="valueStateMessage">Invalid value</span>
+				<ComboBoxItem text="Algeria" />
+				<ComboBoxItem text="Bulgaria" />
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-combobox]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Negative — focused", () => {
+		cy.mount(
+			<ComboBox value="invalid" valueState="Negative">
+				<span slot="valueStateMessage">Invalid value</span>
+				<ComboBoxItem text="Algeria" />
+				<ComboBoxItem text="Bulgaria" />
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Critical", () => {
 		cy.mount(
 			<ComboBox value="Bulgaria" valueState="Critical">
@@ -117,6 +150,31 @@ describe("ComboBox visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Critical — dropdown open", () => {
+		cy.mount(
+			<ComboBox value="Bulgaria" valueState="Critical">
+				<span slot="valueStateMessage">Please review</span>
+				<ComboBoxItem text="Algeria" />
+				<ComboBoxItem text="Bulgaria" />
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-combobox]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Critical — focused", () => {
+		cy.mount(
+			<ComboBox value="Bulgaria" valueState="Critical">
+				<span slot="valueStateMessage">Please review</span>
+				<ComboBoxItem text="Algeria" />
+				<ComboBoxItem text="Bulgaria" />
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Positive", () => {
 		cy.mount(
 			<ComboBox value="Bulgaria" valueState="Positive">
@@ -128,6 +186,31 @@ describe("ComboBox visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Positive — dropdown open", () => {
+		cy.mount(
+			<ComboBox value="Bulgaria" valueState="Positive">
+				<span slot="valueStateMessage">Valid selection</span>
+				<ComboBoxItem text="Algeria" />
+				<ComboBoxItem text="Bulgaria" />
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-combobox]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Positive — focused", () => {
+		cy.mount(
+			<ComboBox value="Bulgaria" valueState="Positive">
+				<span slot="valueStateMessage">Valid selection</span>
+				<ComboBoxItem text="Algeria" />
+				<ComboBoxItem text="Bulgaria" />
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Information", () => {
 		cy.mount(
 			<ComboBox value="Bulgaria" valueState="Information">
@@ -139,6 +222,31 @@ describe("ComboBox visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Information — dropdown open", () => {
+		cy.mount(
+			<ComboBox value="Bulgaria" valueState="Information">
+				<span slot="valueStateMessage">Select a country</span>
+				<ComboBoxItem text="Algeria" />
+				<ComboBoxItem text="Bulgaria" />
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-combobox]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Information — focused", () => {
+		cy.mount(
+			<ComboBox value="Bulgaria" valueState="Information">
+				<span slot="valueStateMessage">Select a country</span>
+				<ComboBoxItem text="Algeria" />
+				<ComboBoxItem text="Bulgaria" />
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("compact mode", () => {
 		cy.mount(
 			<div data-ui5-compact-size>
@@ -152,3 +260,211 @@ describe("ComboBox visual", () => {
 		cy.screenshot();
 	});
 });
+
+describe("ComboBoxItemCustom visual", () => {
+	it("basic state", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItemCustom text="Algeria">
+					<span>🇩🇿 Algeria</span>
+				</ComboBoxItemCustom>
+				<ComboBoxItemCustom text="Bulgaria">
+					<span>🇧🇬 Bulgaria</span>
+				</ComboBoxItemCustom>
+				<ComboBoxItemCustom text="Canada">
+					<span>🇨🇦 Canada</span>
+				</ComboBoxItemCustom>
+			</ComboBox>
+		);
+		cy.screenshot();
+	});
+
+	it("dropdown open", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItemCustom text="Algeria">
+					<span>🇩🇿 Algeria</span>
+				</ComboBoxItemCustom>
+				<ComboBoxItemCustom text="Bulgaria">
+					<span>🇧🇬 Bulgaria</span>
+				</ComboBoxItemCustom>
+				<ComboBoxItemCustom text="Canada">
+					<span>🇨🇦 Canada</span>
+				</ComboBoxItemCustom>
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-combobox]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("dropdown open — first item focused via arrow key", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItemCustom text="Algeria">
+					<span>🇩🇿 Algeria</span>
+				</ComboBoxItemCustom>
+				<ComboBoxItemCustom text="Bulgaria">
+					<span>🇧🇬 Bulgaria</span>
+				</ComboBoxItemCustom>
+				<ComboBoxItemCustom text="Canada">
+					<span>🇨🇦 Canada</span>
+				</ComboBoxItemCustom>
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-combobox]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.realPress("ArrowDown");
+		cy.screenshot();
+	});
+
+	it("filtering — type to narrow list", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItemCustom text="Algeria">
+					<span>🇩🇿 Algeria</span>
+				</ComboBoxItemCustom>
+				<ComboBoxItemCustom text="Bulgaria">
+					<span>🇧🇬 Bulgaria</span>
+				</ComboBoxItemCustom>
+				<ComboBoxItemCustom text="Canada">
+					<span>🇨🇦 Canada</span>
+				</ComboBoxItemCustom>
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").realClick();
+		cy.realType("B");
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<ComboBox>
+					<ComboBoxItemCustom text="Algeria">
+						<span>🇩🇿 Algeria</span>
+					</ComboBoxItemCustom>
+					<ComboBoxItemCustom text="Bulgaria">
+						<span>🇧🇬 Bulgaria</span>
+					</ComboBoxItemCustom>
+					<ComboBoxItemCustom text="Canada">
+						<span>🇨🇦 Canada</span>
+					</ComboBoxItemCustom>
+				</ComboBox>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
+
+describe("ComboBoxItemGroup visual", () => {
+	it("basic state", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItemGroup headerText="Africa">
+					<ComboBoxItem text="Algeria" />
+					<ComboBoxItem text="Egypt" />
+				</ComboBoxItemGroup>
+				<ComboBoxItemGroup headerText="Europe">
+					<ComboBoxItem text="Bulgaria" />
+					<ComboBoxItem text="France" />
+				</ComboBoxItemGroup>
+			</ComboBox>
+		);
+		cy.screenshot();
+	});
+
+	it("dropdown open", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItemGroup headerText="Africa">
+					<ComboBoxItem text="Algeria" />
+					<ComboBoxItem text="Egypt" />
+				</ComboBoxItemGroup>
+				<ComboBoxItemGroup headerText="Europe">
+					<ComboBoxItem text="Bulgaria" />
+					<ComboBoxItem text="France" />
+				</ComboBoxItemGroup>
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-combobox]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("dropdown open — first item focused via arrow key", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItemGroup headerText="Africa">
+					<ComboBoxItem text="Algeria" />
+					<ComboBoxItem text="Egypt" />
+				</ComboBoxItemGroup>
+				<ComboBoxItemGroup headerText="Europe">
+					<ComboBoxItem text="Bulgaria" />
+					<ComboBoxItem text="France" />
+				</ComboBoxItemGroup>
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-combobox]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.realPress("ArrowDown");
+		cy.screenshot();
+	});
+
+	it("dropdown open — group header focused via arrow key", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItemGroup headerText="Africa">
+					<ComboBoxItem text="Algeria" />
+					<ComboBoxItem text="Egypt" />
+				</ComboBoxItemGroup>
+				<ComboBoxItemGroup headerText="Europe">
+					<ComboBoxItem text="Bulgaria" />
+					<ComboBoxItem text="France" />
+				</ComboBoxItemGroup>
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-combobox]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.realPress("ArrowDown");
+		cy.realPress("ArrowDown");
+		cy.realPress("ArrowDown");
+		cy.screenshot();
+	});
+
+	it("filtering — type to narrow list", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItemGroup headerText="Africa">
+					<ComboBoxItem text="Algeria" />
+					<ComboBoxItem text="Egypt" />
+				</ComboBoxItemGroup>
+				<ComboBoxItemGroup headerText="Europe">
+					<ComboBoxItem text="Bulgaria" />
+					<ComboBoxItem text="France" />
+				</ComboBoxItemGroup>
+			</ComboBox>
+		);
+		cy.get("[ui5-combobox]").realClick();
+		cy.realType("B");
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<ComboBox>
+					<ComboBoxItemGroup headerText="Africa">
+						<ComboBoxItem text="Algeria" />
+						<ComboBoxItem text="Egypt" />
+					</ComboBoxItemGroup>
+					<ComboBoxItemGroup headerText="Europe">
+						<ComboBoxItem text="Bulgaria" />
+						<ComboBoxItem text="France" />
+					</ComboBoxItemGroup>
+				</ComboBox>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/DatePicker.cy.tsx b/packages/main/cypress/specs/visuals/DatePicker.cy.tsx
index d5193546b091..3680bc2550b9 100644
--- a/packages/main/cypress/specs/visuals/DatePicker.cy.tsx
+++ b/packages/main/cypress/specs/visuals/DatePicker.cy.tsx
@@ -6,6 +6,7 @@ const FIXED_VALUE = "Jan 15, 2024";
 
 describe("DatePicker visual", () => {
 	beforeEach(() => {
+		cy.clock(new Date("Jan 15, 2024").getTime(), ["Date"]);
 		setAnimationMode(AnimationMode.None);
 	});
 
@@ -38,6 +39,26 @@ describe("DatePicker visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Negative — calendar open", () => {
+		cy.mount(
+			<DatePicker value={FIXED_VALUE} valueState="Negative">
+				<span slot="valueStateMessage">Invalid date</span>
+			</DatePicker>
+		);
+		cy.get("[ui5-date-picker]").ui5DatePickerValueHelpIconPress();
+		cy.screenshot();
+	});
+
+	it("value state — Negative — focused", () => {
+		cy.mount(
+			<DatePicker value={FIXED_VALUE} valueState="Negative">
+				<span slot="valueStateMessage">Invalid date</span>
+			</DatePicker>
+		);
+		cy.get("[ui5-date-picker]").shadow().find("ui5-datetime-input").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Critical", () => {
 		cy.mount(
 			<DatePicker value={FIXED_VALUE} valueState="Critical">
@@ -47,6 +68,26 @@ describe("DatePicker visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Critical — calendar open", () => {
+		cy.mount(
+			<DatePicker value={FIXED_VALUE} valueState="Critical">
+				<span slot="valueStateMessage">Date outside range</span>
+			</DatePicker>
+		);
+		cy.get("[ui5-date-picker]").ui5DatePickerValueHelpIconPress();
+		cy.screenshot();
+	});
+
+	it("value state — Critical — focused", () => {
+		cy.mount(
+			<DatePicker value={FIXED_VALUE} valueState="Critical">
+				<span slot="valueStateMessage">Date outside range</span>
+			</DatePicker>
+		);
+		cy.get("[ui5-date-picker]").shadow().find("ui5-datetime-input").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Positive", () => {
 		cy.mount(
 			<DatePicker value={FIXED_VALUE} valueState="Positive">
@@ -56,6 +97,26 @@ describe("DatePicker visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Positive — calendar open", () => {
+		cy.mount(
+			<DatePicker value={FIXED_VALUE} valueState="Positive">
+				<span slot="valueStateMessage">Valid date</span>
+			</DatePicker>
+		);
+		cy.get("[ui5-date-picker]").ui5DatePickerValueHelpIconPress();
+		cy.screenshot();
+	});
+
+	it("value state — Positive — focused", () => {
+		cy.mount(
+			<DatePicker value={FIXED_VALUE} valueState="Positive">
+				<span slot="valueStateMessage">Valid date</span>
+			</DatePicker>
+		);
+		cy.get("[ui5-date-picker]").shadow().find("ui5-datetime-input").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Information", () => {
 		cy.mount(
 			<DatePicker value={FIXED_VALUE} valueState="Information">
@@ -65,6 +126,26 @@ describe("DatePicker visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Information — calendar open", () => {
+		cy.mount(
+			<DatePicker value={FIXED_VALUE} valueState="Information">
+				<span slot="valueStateMessage">Date will be used as reference</span>
+			</DatePicker>
+		);
+		cy.get("[ui5-date-picker]").ui5DatePickerValueHelpIconPress();
+		cy.screenshot();
+	});
+
+	it("value state — Information — focused", () => {
+		cy.mount(
+			<DatePicker value={FIXED_VALUE} valueState="Information">
+				<span slot="valueStateMessage">Date will be used as reference</span>
+			</DatePicker>
+		);
+		cy.get("[ui5-date-picker]").shadow().find("ui5-datetime-input").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("calendar popover open", () => {
 		cy.mount(<DatePicker value={FIXED_VALUE} />);
 		cy.get("[ui5-date-picker]").ui5DatePickerValueHelpIconPress();
diff --git a/packages/main/cypress/specs/visuals/DateRangePicker.cy.tsx b/packages/main/cypress/specs/visuals/DateRangePicker.cy.tsx
new file mode 100644
index 000000000000..f46f4afa824a
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/DateRangePicker.cy.tsx
@@ -0,0 +1,146 @@
+import DateRangePicker from "../../../src/DateRangePicker.js";
+
+describe("DateRangePicker visual", () => {
+	beforeEach(() => {
+		cy.clock(new Date("Jan 15, 2024").getTime(), ["Date"]);
+	});
+
+	it("basic state", () => {
+		cy.mount(<DateRangePicker value="Jan 15, 2024 - Jan 25, 2024" />);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<DateRangePicker value="Jan 15, 2024 - Jan 25, 2024" />
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("calendar open", () => {
+		cy.mount(<DateRangePicker value="Jan 15, 2024 - Jan 25, 2024" />);
+		cy.get("[ui5-daterange-picker]").ui5DatePickerValueHelpIconPress();
+		cy.get("[ui5-daterange-picker]").ui5DateRangePickerExpectToBeOpen();
+		cy.screenshot();
+	});
+
+	it("calendar open — two months", () => {
+		cy.mount(<DateRangePicker showTwoMonths value="Jan 15, 2024 - Feb 10, 2024" />);
+		cy.get("[ui5-daterange-picker]").ui5DatePickerValueHelpIconPress();
+		cy.get("[ui5-daterange-picker]").ui5DateRangePickerExpectToBeOpen();
+		cy.screenshot();
+	});
+
+	it("value state — Negative", () => {
+		cy.mount(<DateRangePicker valueState="Negative" value="Jan 15, 2024 - Jan 25, 2024">
+			<span slot="valueStateMessage">Invalid date range</span>
+		</DateRangePicker>);
+		cy.screenshot();
+	});
+
+	it("value state — Negative — calendar open", () => {
+		cy.mount(<DateRangePicker valueState="Negative" value="Jan 15, 2024 - Jan 25, 2024">
+			<span slot="valueStateMessage">Invalid date range</span>
+		</DateRangePicker>);
+		cy.get("[ui5-daterange-picker]").ui5DatePickerValueHelpIconPress();
+		cy.get("[ui5-daterange-picker]").ui5DateRangePickerExpectToBeOpen();
+		cy.screenshot();
+	});
+
+	it("value state — Negative — focused", () => {
+		cy.mount(<DateRangePicker valueState="Negative" value="Jan 15, 2024 - Jan 25, 2024">
+			<span slot="valueStateMessage">Invalid date range</span>
+		</DateRangePicker>);
+		cy.get("[ui5-daterange-picker]").shadow().find("ui5-datetime-input").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
+	it("value state — Critical", () => {
+		cy.mount(<DateRangePicker valueState="Critical" value="Jan 15, 2024 - Jan 25, 2024">
+			<span slot="valueStateMessage">Date range outside allowed period</span>
+		</DateRangePicker>);
+		cy.screenshot();
+	});
+
+	it("value state — Critical — calendar open", () => {
+		cy.mount(<DateRangePicker valueState="Critical" value="Jan 15, 2024 - Jan 25, 2024">
+			<span slot="valueStateMessage">Date range outside allowed period</span>
+		</DateRangePicker>);
+		cy.get("[ui5-daterange-picker]").ui5DatePickerValueHelpIconPress();
+		cy.get("[ui5-daterange-picker]").ui5DateRangePickerExpectToBeOpen();
+		cy.screenshot();
+	});
+
+	it("value state — Critical — focused", () => {
+		cy.mount(<DateRangePicker valueState="Critical" value="Jan 15, 2024 - Jan 25, 2024">
+			<span slot="valueStateMessage">Date range outside allowed period</span>
+		</DateRangePicker>);
+		cy.get("[ui5-daterange-picker]").shadow().find("ui5-datetime-input").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
+	it("value state — Positive", () => {
+		cy.mount(<DateRangePicker valueState="Positive" value="Jan 15, 2024 - Jan 25, 2024">
+			<span slot="valueStateMessage">Date range is valid</span>
+		</DateRangePicker>);
+		cy.screenshot();
+	});
+
+	it("value state — Positive — calendar open", () => {
+		cy.mount(<DateRangePicker valueState="Positive" value="Jan 15, 2024 - Jan 25, 2024">
+			<span slot="valueStateMessage">Date range is valid</span>
+		</DateRangePicker>);
+		cy.get("[ui5-daterange-picker]").ui5DatePickerValueHelpIconPress();
+		cy.get("[ui5-daterange-picker]").ui5DateRangePickerExpectToBeOpen();
+		cy.screenshot();
+	});
+
+	it("value state — Positive — focused", () => {
+		cy.mount(<DateRangePicker valueState="Positive" value="Jan 15, 2024 - Jan 25, 2024">
+			<span slot="valueStateMessage">Date range is valid</span>
+		</DateRangePicker>);
+		cy.get("[ui5-daterange-picker]").shadow().find("ui5-datetime-input").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
+	it("value state — Information", () => {
+		cy.mount(<DateRangePicker valueState="Information" value="Jan 15, 2024 - Jan 25, 2024">
+			<span slot="valueStateMessage">Select a date range</span>
+		</DateRangePicker>);
+		cy.screenshot();
+	});
+
+	it("value state — Information — calendar open", () => {
+		cy.mount(<DateRangePicker valueState="Information" value="Jan 15, 2024 - Jan 25, 2024">
+			<span slot="valueStateMessage">Select a date range</span>
+		</DateRangePicker>);
+		cy.get("[ui5-daterange-picker]").ui5DatePickerValueHelpIconPress();
+		cy.get("[ui5-daterange-picker]").ui5DateRangePickerExpectToBeOpen();
+		cy.screenshot();
+	});
+
+	it("value state — Information — focused", () => {
+		cy.mount(<DateRangePicker valueState="Information" value="Jan 15, 2024 - Jan 25, 2024">
+			<span slot="valueStateMessage">Select a date range</span>
+		</DateRangePicker>);
+		cy.get("[ui5-daterange-picker]").shadow().find("ui5-datetime-input").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
+	it("disabled state", () => {
+		cy.mount(<DateRangePicker disabled value="Jan 15, 2024 - Jan 25, 2024" />);
+		cy.screenshot();
+	});
+
+	it("readonly state", () => {
+		cy.mount(<DateRangePicker readonly value="Jan 15, 2024 - Jan 25, 2024" />);
+		cy.screenshot();
+	});
+
+	it("placeholder", () => {
+		cy.mount(<DateRangePicker placeholder="Select date range" />);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/DateTimePicker.cy.tsx b/packages/main/cypress/specs/visuals/DateTimePicker.cy.tsx
index ba9892c9d368..e1bcdcd9c9b7 100644
--- a/packages/main/cypress/specs/visuals/DateTimePicker.cy.tsx
+++ b/packages/main/cypress/specs/visuals/DateTimePicker.cy.tsx
@@ -7,6 +7,7 @@ const FIXED_FORMAT = "MMM d, yyyy, hh:mm:ss a";
 
 describe("DateTimePicker visual", () => {
 	beforeEach(() => {
+		cy.clock(new Date("Apr 15, 2024").getTime(), ["Date"]);
 		setAnimationMode(AnimationMode.None);
 	});
 
@@ -39,6 +40,26 @@ describe("DateTimePicker visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Negative — popover open", () => {
+		cy.mount(
+			<DateTimePicker value={FIXED_VALUE} formatPattern={FIXED_FORMAT} valueState="Negative">
+				<span slot="valueStateMessage">Invalid date and time</span>
+			</DateTimePicker>
+		);
+		cy.get("[ui5-datetime-picker]").ui5DateTimePickerOpen();
+		cy.screenshot();
+	});
+
+	it("value state — Negative — focused", () => {
+		cy.mount(
+			<DateTimePicker value={FIXED_VALUE} formatPattern={FIXED_FORMAT} valueState="Negative">
+				<span slot="valueStateMessage">Invalid date and time</span>
+			</DateTimePicker>
+		);
+		cy.get("[ui5-datetime-picker]").shadow().find("ui5-datetime-input").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Critical", () => {
 		cy.mount(
 			<DateTimePicker value={FIXED_VALUE} formatPattern={FIXED_FORMAT} valueState="Critical">
@@ -48,6 +69,26 @@ describe("DateTimePicker visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Critical — popover open", () => {
+		cy.mount(
+			<DateTimePicker value={FIXED_VALUE} formatPattern={FIXED_FORMAT} valueState="Critical">
+				<span slot="valueStateMessage">Date outside allowed range</span>
+			</DateTimePicker>
+		);
+		cy.get("[ui5-datetime-picker]").ui5DateTimePickerOpen();
+		cy.screenshot();
+	});
+
+	it("value state — Critical — focused", () => {
+		cy.mount(
+			<DateTimePicker value={FIXED_VALUE} formatPattern={FIXED_FORMAT} valueState="Critical">
+				<span slot="valueStateMessage">Date outside allowed range</span>
+			</DateTimePicker>
+		);
+		cy.get("[ui5-datetime-picker]").shadow().find("ui5-datetime-input").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Positive", () => {
 		cy.mount(
 			<DateTimePicker value={FIXED_VALUE} formatPattern={FIXED_FORMAT} valueState="Positive">
@@ -57,6 +98,26 @@ describe("DateTimePicker visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Positive — popover open", () => {
+		cy.mount(
+			<DateTimePicker value={FIXED_VALUE} formatPattern={FIXED_FORMAT} valueState="Positive">
+				<span slot="valueStateMessage">Date is valid</span>
+			</DateTimePicker>
+		);
+		cy.get("[ui5-datetime-picker]").ui5DateTimePickerOpen();
+		cy.screenshot();
+	});
+
+	it("value state — Positive — focused", () => {
+		cy.mount(
+			<DateTimePicker value={FIXED_VALUE} formatPattern={FIXED_FORMAT} valueState="Positive">
+				<span slot="valueStateMessage">Date is valid</span>
+			</DateTimePicker>
+		);
+		cy.get("[ui5-datetime-picker]").shadow().find("ui5-datetime-input").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Information", () => {
 		cy.mount(
 			<DateTimePicker value={FIXED_VALUE} formatPattern={FIXED_FORMAT} valueState="Information">
@@ -66,6 +127,26 @@ describe("DateTimePicker visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Information — popover open", () => {
+		cy.mount(
+			<DateTimePicker value={FIXED_VALUE} formatPattern={FIXED_FORMAT} valueState="Information">
+				<span slot="valueStateMessage">Date will be used as reference</span>
+			</DateTimePicker>
+		);
+		cy.get("[ui5-datetime-picker]").ui5DateTimePickerOpen();
+		cy.screenshot();
+	});
+
+	it("value state — Information — focused", () => {
+		cy.mount(
+			<DateTimePicker value={FIXED_VALUE} formatPattern={FIXED_FORMAT} valueState="Information">
+				<span slot="valueStateMessage">Date will be used as reference</span>
+			</DateTimePicker>
+		);
+		cy.get("[ui5-datetime-picker]").shadow().find("ui5-datetime-input").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("popover open", () => {
 		cy.mount(<DateTimePicker value={FIXED_VALUE} formatPattern={FIXED_FORMAT} />);
 		cy.get("[ui5-datetime-picker]").ui5DateTimePickerOpen();
diff --git a/packages/main/cypress/specs/visuals/Dialog.cy.tsx b/packages/main/cypress/specs/visuals/Dialog.cy.tsx
new file mode 100644
index 000000000000..acc79be7404c
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Dialog.cy.tsx
@@ -0,0 +1,114 @@
+import Dialog from "../../../src/Dialog.js";
+import Button from "../../../src/Button.js";
+import Bar from "../../../src/Bar.js";
+import Title from "../../../src/Title.js";
+
+const openDialog = (id: string) => {
+	cy.get(`[ui5-dialog]#${id}`).invoke("prop", "open", true);
+	cy.get(`[ui5-dialog]#${id}`).ui5DialogOpened();
+};
+
+describe("Dialog visual", () => {
+	it("basic state — open with header text and content", () => {
+		cy.mount(
+			<Dialog id="dialog1" headerText="Confirmation">
+				<p>Are you sure you want to proceed?</p>
+				<Button slot="footer" design="Emphasized">Confirm</Button>
+				<Button slot="footer">Cancel</Button>
+			</Dialog>
+		);
+		openDialog("dialog1");
+		cy.screenshot();
+	});
+
+	it("with custom header slot", () => {
+		cy.mount(
+			<Dialog id="dialog2">
+				<Bar slot="header">
+					<Title slot="startContent" level="H5">Custom Header</Title>
+				</Bar>
+				<p>Dialog content goes here.</p>
+				<Button slot="footer" design="Emphasized">OK</Button>
+			</Dialog>
+		);
+		openDialog("dialog2");
+		cy.screenshot();
+	});
+
+	it("state — Negative", () => {
+		cy.mount(
+			<Dialog id="dialog3" headerText="Error" state="Negative">
+				<p>Something went wrong.</p>
+				<Button slot="footer" design="Emphasized">Close</Button>
+			</Dialog>
+		);
+		openDialog("dialog3");
+		cy.screenshot();
+	});
+
+	it("state — Critical", () => {
+		cy.mount(
+			<Dialog id="dialog4" headerText="Warning" state="Critical">
+				<p>This action may have consequences.</p>
+				<Button slot="footer">OK</Button>
+			</Dialog>
+		);
+		openDialog("dialog4");
+		cy.screenshot();
+	});
+
+	it("state — Positive", () => {
+		cy.mount(
+			<Dialog id="dialog5" headerText="Success" state="Positive">
+				<p>Operation completed successfully.</p>
+				<Button slot="footer">Close</Button>
+			</Dialog>
+		);
+		openDialog("dialog5");
+		cy.screenshot();
+	});
+
+	it("state — Information", () => {
+		cy.mount(
+			<Dialog id="dialog6" headerText="Information" state="Information">
+				<p>Please read the following information.</p>
+				<Button slot="footer">Got It</Button>
+			</Dialog>
+		);
+		openDialog("dialog6");
+		cy.screenshot();
+	});
+
+	it("stretch mode", () => {
+		cy.mount(
+			<Dialog id="dialog7" headerText="Stretched Dialog" stretch>
+				<p>This dialog stretches to fill the viewport.</p>
+				<Button slot="footer" design="Emphasized">Close</Button>
+			</Dialog>
+		);
+		openDialog("dialog7");
+		cy.screenshot();
+	});
+
+	it("draggable", () => {
+		cy.mount(
+			<Dialog id="dialog8" headerText="Draggable Dialog" draggable>
+				<p>This dialog can be dragged.</p>
+				<Button slot="footer">Close</Button>
+			</Dialog>
+		);
+		openDialog("dialog8");
+		cy.screenshot();
+	});
+
+	it("resizable", () => {
+		cy.mount(
+			<Dialog id="dialog9" headerText="Resizable Dialog" resizable>
+				<p>This dialog can be resized.</p>
+				<Button slot="footer">Close</Button>
+			</Dialog>
+		);
+		openDialog("dialog9");
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/DynamicDateRange.cy.tsx b/packages/main/cypress/specs/visuals/DynamicDateRange.cy.tsx
new file mode 100644
index 000000000000..752b850204c1
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/DynamicDateRange.cy.tsx
@@ -0,0 +1,82 @@
+import DynamicDateRange from "../../../src/DynamicDateRange.js";
+import "../../../src/dynamic-date-range-options/Today.js";
+import "../../../src/dynamic-date-range-options/Yesterday.js";
+import "../../../src/dynamic-date-range-options/Tomorrow.js";
+import "../../../src/dynamic-date-range-options/SingleDate.js";
+import "../../../src/dynamic-date-range-options/DateRange.js";
+import "../../../src/dynamic-date-range-options/DateTimeRange.js";
+import "../../../src/dynamic-date-range-options/FromDateTime.js";
+import "../../../src/dynamic-date-range-options/ToDateTime.js";
+import "../../../src/dynamic-date-range-options/LastOptions.js";
+import "../../../src/dynamic-date-range-options/NextOptions.js";
+
+describe("DynamicDateRange visual", () => {
+	beforeEach(() => {
+		cy.clock(new Date("Jan 15, 2024").getTime(), ["Date"]);
+	});
+
+	it("basic state", () => {
+		cy.mount(<DynamicDateRange options="TODAY, DATE, DATERANGE" />);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<DynamicDateRange options="TODAY, DATE, DATERANGE" />
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("with value — Today", () => {
+		cy.mount(<DynamicDateRange options="TODAY, DATE, DATERANGE" value={{ operator: "TODAY", values: [] }} />);
+		cy.screenshot();
+	});
+
+	it("popover open — options list", () => {
+		cy.mount(<DynamicDateRange options="TODAY, DATE, DATERANGE, LASTDAYS, NEXTWEEKS" />);
+		cy.get("[ui5-dynamic-date-range]").ui5DynamicDateRangeOpen();
+		cy.screenshot();
+	});
+
+	it("popover open — Date option selected (calendar shown)", () => {
+		cy.mount(<DynamicDateRange options="TODAY, DATE, DATERANGE" />);
+		cy.get("[ui5-dynamic-date-range]")
+			.ui5DynamicDateRangeOpen()
+			.ui5DynamicDateRangeGetOptionsList()
+			.contains("Date")
+			.realClick();
+		cy.get("[ui5-dynamic-date-range]")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("popover open — Last X option selected (step input shown)", () => {
+		cy.mount(<DynamicDateRange options="LASTDAYS" />);
+		cy.get("[ui5-dynamic-date-range]")
+			.ui5DynamicDateRangeOpen()
+			.ui5DynamicDateRangeGetOptionsList()
+			.first()
+			.realClick();
+		cy.get("[ui5-dynamic-date-range]")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("popover open — DateTimeRange option selected", () => {
+		cy.mount(<DynamicDateRange options="DATETIMERANGE" />);
+		cy.get("[ui5-dynamic-date-range]")
+			.ui5DynamicDateRangeOpen()
+			.ui5DynamicDateRangeSelectOption();
+		cy.get("[ui5-dynamic-date-range]")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ExpandableText.cy.tsx b/packages/main/cypress/specs/visuals/ExpandableText.cy.tsx
new file mode 100644
index 000000000000..cc2a8c77b77b
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ExpandableText.cy.tsx
@@ -0,0 +1,68 @@
+import ExpandableText from "../../../src/ExpandableText.js";
+
+const SHORT_TEXT = "Short text that fits within limit.";
+const LONG_TEXT =
+	"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.";
+
+describe("ExpandableText visual", () => {
+	it("text within maxCharacters — no toggle shown", () => {
+		cy.mount(
+			<ExpandableText text={SHORT_TEXT} maxCharacters={100} />
+		);
+		cy.screenshot();
+	});
+
+	it("text exceeds maxCharacters — collapsed (Show More)", () => {
+		cy.mount(
+			<ExpandableText text={LONG_TEXT} maxCharacters={100} />
+		);
+		cy.screenshot();
+	});
+
+	it("text exceeds maxCharacters — expanded (Show Less)", () => {
+		cy.mount(
+			<ExpandableText text={LONG_TEXT} maxCharacters={100} />
+		);
+		cy.get("[ui5-expandable-text]").shadow().find(".ui5-exp-text-toggle").realClick();
+		cy.screenshot();
+	});
+
+	it("overflow mode — Popover (collapsed)", () => {
+		cy.mount(
+			<ExpandableText text={LONG_TEXT} maxCharacters={100} overflowMode="Popover" />
+		);
+		cy.screenshot();
+	});
+
+	it("overflow mode — Popover (open)", () => {
+		cy.mount(
+			<ExpandableText text={LONG_TEXT} maxCharacters={100} overflowMode="Popover" />
+		);
+		cy.get("[ui5-expandable-text]").shadow().find(".ui5-exp-text-toggle").realClick();
+		cy.get("[ui5-expandable-text]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("empty indicator mode — On", () => {
+		cy.mount(
+			<ExpandableText text="" emptyIndicatorMode="On" />
+		);
+		cy.screenshot();
+	});
+
+	it("custom maxCharacters — 50", () => {
+		cy.mount(
+			<ExpandableText text={LONG_TEXT} maxCharacters={50} />
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<ExpandableText text={LONG_TEXT} maxCharacters={100} />
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/FileUploader.cy.tsx b/packages/main/cypress/specs/visuals/FileUploader.cy.tsx
new file mode 100644
index 000000000000..a0c5a4189b16
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/FileUploader.cy.tsx
@@ -0,0 +1,90 @@
+import FileUploader from "../../../src/FileUploader.js";
+import Button from "../../../src/Button.js";
+import Label from "../../../src/Label.js";
+
+describe("FileUploader visual", () => {
+	it("basic state", () => {
+		cy.mount(
+			<FileUploader placeholder="Choose files..." />
+		);
+		cy.screenshot();
+	});
+
+	it("with value — file name shown", () => {
+		cy.mount(
+			<FileUploader value="document.pdf" placeholder="Choose files..." />
+		);
+		cy.screenshot();
+	});
+
+	it("disabled", () => {
+		cy.mount(
+			<FileUploader disabled placeholder="Choose files..." />
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Negative", () => {
+		cy.mount(
+			<FileUploader valueState="Negative" placeholder="Choose files...">
+				<span slot="valueStateMessage">Invalid file type.</span>
+			</FileUploader>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Critical", () => {
+		cy.mount(
+			<FileUploader valueState="Critical" placeholder="Choose files...">
+				<span slot="valueStateMessage">File exceeds size limit.</span>
+			</FileUploader>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Positive", () => {
+		cy.mount(
+			<FileUploader valueState="Positive" placeholder="Choose files...">
+				<span slot="valueStateMessage">File is valid.</span>
+			</FileUploader>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Information", () => {
+		cy.mount(
+			<FileUploader valueState="Information" placeholder="Choose files...">
+				<span slot="valueStateMessage">Accepted formats: PDF, DOCX.</span>
+			</FileUploader>
+		);
+		cy.screenshot();
+	});
+
+	it("hide-input — custom button trigger", () => {
+		cy.mount(
+			<FileUploader hideInput>
+				<Button icon="upload">Upload File</Button>
+			</FileUploader>
+		);
+		cy.screenshot();
+	});
+
+	it("with label", () => {
+		cy.mount(
+			<div>
+				<Label for="fu1" required>Attachment</Label>
+				<FileUploader id="fu1" placeholder="Choose files..." />
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<FileUploader placeholder="Choose files..." />
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Form.cy.tsx b/packages/main/cypress/specs/visuals/Form.cy.tsx
new file mode 100644
index 000000000000..90fe5cffa394
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Form.cy.tsx
@@ -0,0 +1,235 @@
+import Form from "../../../src/Form.js";
+import FormGroup from "../../../src/FormGroup.js";
+import FormItem from "../../../src/FormItem.js";
+import Label from "../../../src/Label.js";
+import Text from "../../../src/Text.js";
+import Input from "../../../src/Input.js";
+
+describe("Form visual", () => {
+	it("basic state — with header and grouped items", () => {
+		cy.mount(
+			<Form headerText="Supplier">
+				<FormGroup headerText="Address">
+					<FormItem>
+						<Label slot="labelContent">Name</Label>
+						<Text>Red Point Stores</Text>
+					</FormItem>
+					<FormItem>
+						<Label slot="labelContent">ZIP Code/City</Label>
+						<Text>411 Maintown</Text>
+					</FormItem>
+				</FormGroup>
+
+				<FormGroup headerText="Contact">
+					<FormItem>
+						<Label slot="labelContent">Twitter</Label>
+						<Text>@sap</Text>
+					</FormItem>
+					<FormItem>
+						<Label slot="labelContent">Email</Label>
+						<Text>john.smith@sap.com</Text>
+					</FormItem>
+				</FormGroup>
+			</Form>
+		);
+		cy.screenshot();
+	});
+
+	it("without groups — flat form items", () => {
+		cy.mount(
+			<Form headerText="Basic Info">
+				<FormItem>
+					<Label slot="labelContent">Name</Label>
+					<Text>Red Point Stores</Text>
+				</FormItem>
+				<FormItem>
+					<Label slot="labelContent">Street</Label>
+					<Text>Main St 1618</Text>
+				</FormItem>
+				<FormItem>
+					<Label slot="labelContent">Country</Label>
+					<Text>Germany</Text>
+				</FormItem>
+			</Form>
+		);
+		cy.screenshot();
+	});
+
+	it("without header text", () => {
+		cy.mount(
+			<Form>
+				<FormGroup headerText="Address">
+					<FormItem>
+						<Label slot="labelContent">Name</Label>
+						<Text>Red Point Stores</Text>
+					</FormItem>
+				</FormGroup>
+			</Form>
+		);
+		cy.screenshot();
+	});
+
+	it("edit mode — inputs instead of text", () => {
+		cy.mount(
+			<Form headerText="Edit Supplier" accessibleMode="Edit">
+				<FormGroup headerText="Address">
+					<FormItem>
+						<Label slot="labelContent">Name</Label>
+						<Input value="Red Point Stores" />
+					</FormItem>
+					<FormItem>
+						<Label slot="labelContent">ZIP Code/City</Label>
+						<Input value="411" />
+						<Input value="Maintown" />
+					</FormItem>
+				</FormGroup>
+
+				<FormGroup headerText="Contact">
+					<FormItem>
+						<Label slot="labelContent">Twitter</Label>
+						<Input value="@sap" />
+					</FormItem>
+					<FormItem>
+						<Label slot="labelContent">Email</Label>
+						<Input value="john.smith@sap.com" />
+					</FormItem>
+				</FormGroup>
+			</Form>
+		);
+		cy.screenshot();
+	});
+
+	it("labels on top — labelSpan S12 M12 L12 XL12", () => {
+		cy.mount(
+			<Form headerText="Labels on Top" layout="S1 M2 L2 XL3" labelSpan="S12 M12 L12 XL12">
+				<FormItem>
+					<Label slot="labelContent">Name</Label>
+					<Text>Red Point Stores</Text>
+				</FormItem>
+				<FormItem>
+					<Label slot="labelContent">ZIP Code/City</Label>
+					<Text>411 Maintown</Text>
+				</FormItem>
+				<FormItem>
+					<Label slot="labelContent">Street</Label>
+					<Text>Main St 1618</Text>
+				</FormItem>
+				<FormItem>
+					<Label slot="labelContent">Country</Label>
+					<Text>Germany</Text>
+				</FormItem>
+			</Form>
+		);
+		cy.screenshot();
+	});
+
+	it("multi-column layout — S1 M2 L3 XL4", () => {
+		cy.mount(
+			<Form headerText="Supplier (multi-column)" layout="S1 M2 L3 XL4">
+				<FormGroup headerText="Address">
+					<FormItem>
+						<Label slot="labelContent">Name</Label>
+						<Text>Red Point Stores</Text>
+					</FormItem>
+				</FormGroup>
+
+				<FormGroup headerText="Contact">
+					<FormItem>
+						<Label slot="labelContent">Twitter</Label>
+						<Text>@sap</Text>
+					</FormItem>
+					<FormItem>
+						<Label slot="labelContent">Email</Label>
+						<Text>john.smith@sap.com</Text>
+					</FormItem>
+				</FormGroup>
+
+				<FormGroup headerText="Other Info">
+					<FormItem>
+						<Label slot="labelContent">Website</Label>
+						<Text>www.sap.com</Text>
+					</FormItem>
+				</FormGroup>
+			</Form>
+		);
+		cy.screenshot();
+	});
+
+	it("FormGroup without header text", () => {
+		cy.mount(
+			<Form headerText="Supplier">
+				<FormGroup>
+					<FormItem>
+						<Label slot="labelContent">Name</Label>
+						<Text>Red Point Stores</Text>
+					</FormItem>
+					<FormItem>
+						<Label slot="labelContent">Country</Label>
+						<Text>Germany</Text>
+					</FormItem>
+				</FormGroup>
+			</Form>
+		);
+		cy.screenshot();
+	});
+
+	it("item-spacing Large", () => {
+		cy.mount(
+			<Form headerText="Large Spacing" item-spacing="Large">
+				<FormGroup headerText="Address">
+					<FormItem>
+						<Label slot="labelContent">Name</Label>
+						<Text>Red Point Stores</Text>
+					</FormItem>
+					<FormItem>
+						<Label slot="labelContent">Country</Label>
+						<Text>Germany</Text>
+					</FormItem>
+				</FormGroup>
+			</Form>
+		);
+		cy.screenshot();
+	});
+
+	it("custom header slot", () => {
+		cy.mount(
+			<Form>
+				<div slot="header" style={{ padding: "0.5rem 0", fontSize: "1.25rem", fontWeight: "bold" }}>Custom Header</div>
+				<FormGroup headerText="Address">
+					<FormItem>
+						<Label slot="labelContent">Name</Label>
+						<Text>Red Point Stores</Text>
+					</FormItem>
+				</FormGroup>
+			</Form>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Form headerText="Compact Form">
+					<FormGroup headerText="Address">
+						<FormItem>
+							<Label slot="labelContent">Name</Label>
+							<Text>Red Point Stores</Text>
+						</FormItem>
+						<FormItem>
+							<Label slot="labelContent">Country</Label>
+							<Text>Germany</Text>
+						</FormItem>
+					</FormGroup>
+
+					<FormGroup headerText="Contact">
+						<FormItem>
+							<Label slot="labelContent">Email</Label>
+							<Text>john.smith@sap.com</Text>
+						</FormItem>
+					</FormGroup>
+				</Form>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Icon.cy.tsx b/packages/main/cypress/specs/visuals/Icon.cy.tsx
new file mode 100644
index 000000000000..3d07c0e99bf0
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Icon.cy.tsx
@@ -0,0 +1,92 @@
+import Icon from "../../../src/Icon.js";
+import addEquipment from "@ui5/webcomponents-icons/dist/add-equipment.js";
+import save from "@ui5/webcomponents-icons/dist/save.js";
+import error from "@ui5/webcomponents-icons/dist/error.js";
+import add from "@ui5/webcomponents-icons/dist/add.js";
+
+describe("Icon visual", () => {
+	it("basic state — SVG icon", () => {
+		cy.mount(
+			<Icon name={addEquipment} />
+		);
+		cy.screenshot();
+	});
+
+	it("interactive mode", () => {
+		cy.mount(
+			<Icon name={addEquipment} mode="Interactive" />
+		);
+		cy.screenshot();
+	});
+
+	it("interactive mode — focused", () => {
+		cy.mount(
+			<Icon name={addEquipment} mode="Interactive" />
+		);
+		cy.get("[ui5-icon]").shadow().find(".ui5-icon-root").focus();
+		cy.screenshot();
+	});
+
+	it("image mode with accessible name", () => {
+		cy.mount(
+			<Icon name={save} mode="Image" accessibleName="Save document" />
+		);
+		cy.screenshot();
+	});
+
+	it("with tooltip", () => {
+		cy.mount(
+			<Icon name={save} showTooltip />
+		);
+		cy.screenshot();
+	});
+
+	it("custom size via style", () => {
+		cy.mount(
+			<div>
+				<Icon name={addEquipment} style={{ width: "1rem", height: "1rem" }} />
+				<Icon name={addEquipment} style={{ width: "2rem", height: "2rem" }} />
+				<Icon name={addEquipment} style={{ width: "3rem", height: "3rem" }} />
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("fontIcon slot — basic", () => {
+		cy.mount(
+			<Icon>
+				<span slot="fontIcon">★</span>
+			</Icon>
+		);
+		cy.screenshot();
+	});
+
+	it("fontIcon slot — interactive mode", () => {
+		cy.mount(
+			<Icon mode="Interactive" accessibleName="Add">
+				<span slot="fontIcon">＋</span>
+			</Icon>
+		);
+		cy.screenshot();
+	});
+
+	it("fontIcon slot — interactive mode focused", () => {
+		cy.mount(
+			<Icon mode="Interactive" accessibleName="Add">
+				<span slot="fontIcon">＋</span>
+			</Icon>
+		);
+		cy.get("[ui5-icon]").shadow().find("span.ui5-icon-root").focus();
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Icon name={addEquipment} />
+				<Icon name={addEquipment} mode="Interactive" />
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Input.cy.tsx b/packages/main/cypress/specs/visuals/Input.cy.tsx
index 5d3eae985634..7539f98fefc4 100644
--- a/packages/main/cypress/specs/visuals/Input.cy.tsx
+++ b/packages/main/cypress/specs/visuals/Input.cy.tsx
@@ -45,6 +45,16 @@ describe("Input visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Negative — focused", () => {
+		cy.mount(
+			<Input value="invalid@" valueState="Negative">
+				<span slot="valueStateMessage">Invalid input</span>
+			</Input>
+		);
+		cy.get("[ui5-input]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Critical", () => {
 		cy.mount(
 			<Input value="warning text" valueState="Critical">
@@ -54,6 +64,16 @@ describe("Input visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Critical — focused", () => {
+		cy.mount(
+			<Input value="warning text" valueState="Critical">
+				<span slot="valueStateMessage">Please review</span>
+			</Input>
+		);
+		cy.get("[ui5-input]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Positive", () => {
 		cy.mount(
 			<Input value="valid input" valueState="Positive">
@@ -63,6 +83,16 @@ describe("Input visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Positive — focused", () => {
+		cy.mount(
+			<Input value="valid input" valueState="Positive">
+				<span slot="valueStateMessage">Looks good</span>
+			</Input>
+		);
+		cy.get("[ui5-input]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Information", () => {
 		cy.mount(
 			<Input value="info text" valueState="Information">
@@ -72,6 +102,16 @@ describe("Input visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Information — focused", () => {
+		cy.mount(
+			<Input value="info text" valueState="Information">
+				<span slot="valueStateMessage">Additional info</span>
+			</Input>
+		);
+		cy.get("[ui5-input]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("compact mode", () => {
 		cy.mount(
 			<div data-ui5-compact-size style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
diff --git a/packages/main/cypress/specs/visuals/Label.cy.tsx b/packages/main/cypress/specs/visuals/Label.cy.tsx
new file mode 100644
index 000000000000..1af38b95f705
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Label.cy.tsx
@@ -0,0 +1,50 @@
+import Label from "../../../src/Label.js";
+
+describe("Label visual", () => {
+	it("basic state", () => {
+		cy.mount(<Label>Basic Label</Label>);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Label>Basic Label</Label>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("required", () => {
+		cy.mount(<Label required>Required Label</Label>);
+		cy.screenshot();
+	});
+
+	it("show-colon", () => {
+		cy.mount(<Label showColon>Label with Colon</Label>);
+		cy.screenshot();
+	});
+
+	it("required and show-colon", () => {
+		cy.mount(<Label required showColon>Required Label with Colon</Label>);
+		cy.screenshot();
+	});
+
+	it("wrapping — long text", () => {
+		cy.mount(
+			<Label style="width: 200px">
+				Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.
+			</Label>
+		);
+		cy.screenshot();
+	});
+
+	it("truncated — wrappingType None", () => {
+		cy.mount(
+			<Label wrappingType="None" style="width: 200px">
+				Reprehenderit amet cillum tempor ex eu dolor adipisicing reprehenderit pariatur.
+			</Label>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Link.cy.tsx b/packages/main/cypress/specs/visuals/Link.cy.tsx
new file mode 100644
index 000000000000..d13ca437e4aa
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Link.cy.tsx
@@ -0,0 +1,66 @@
+import Link from "../../../src/Link.js";
+
+describe("Link visual", () => {
+	it("basic state", () => {
+		cy.mount(<Link>Default Link</Link>);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Link>Default Link</Link>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("design — Subtle", () => {
+		cy.mount(<Link design="Subtle">Subtle Link</Link>);
+		cy.screenshot();
+	});
+
+	it("design — Emphasized", () => {
+		cy.mount(<Link design="Emphasized">Emphasized Link</Link>);
+		cy.screenshot();
+	});
+
+	it("disabled", () => {
+		cy.mount(<Link disabled>Disabled Link</Link>);
+		cy.screenshot();
+	});
+
+	it("with icon", () => {
+		cy.mount(<Link icon="employee">View employee profile</Link>);
+		cy.screenshot();
+	});
+
+	it("with end icon", () => {
+		cy.mount(<Link endIcon="cloud">Weather today</Link>);
+		cy.screenshot();
+	});
+
+	it("wrapping — long text", () => {
+		cy.mount(
+			<Link style="width: 150px">
+				Eu enim consectetur do amet elit Lorem ipsum dolor sit amet consectetur.
+			</Link>
+		);
+		cy.screenshot();
+	});
+
+	it("truncated — wrappingType None", () => {
+		cy.mount(
+			<Link wrappingType="None" style="width: 150px">
+				Eu enim consectetur do amet elit Lorem ipsum dolor sit amet consectetur.
+			</Link>
+		);
+		cy.screenshot();
+	});
+
+	it("focused", () => {
+		cy.mount(<Link>Focused Link</Link>);
+		cy.get("[ui5-link]").focus();
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/List.cy.tsx b/packages/main/cypress/specs/visuals/List.cy.tsx
new file mode 100644
index 000000000000..3e37d2c0bc8a
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/List.cy.tsx
@@ -0,0 +1,132 @@
+import List from "../../../src/List.js";
+import ListItemStandard from "../../../src/ListItemStandard.js";
+import ListItemGroup from "../../../src/ListItemGroup.js";
+
+describe("List visual", () => {
+	it("basic state", () => {
+		cy.mount(
+			<List headerText="Products">
+				<ListItemStandard>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>iPhone 14</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+				<ListItemStandard>Keyboard Logitech</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("no header", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>iPhone 14</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("selection mode — Single", () => {
+		cy.mount(
+			<List selectionMode="Single" headerText="Select Product">
+				<ListItemStandard selected>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>iPhone 14</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("selection mode — Multiple", () => {
+		cy.mount(
+			<List selectionMode="Multiple" headerText="Select Products">
+				<ListItemStandard selected>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard selected>iPhone 14</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+				<ListItemStandard>Keyboard Logitech</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("selection mode — Delete", () => {
+		cy.mount(
+			<List selectionMode="Delete" headerText="Delete Products">
+				<ListItemStandard>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>iPhone 14</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("with groups", () => {
+		cy.mount(
+			<List headerText="Inventory">
+				<ListItemGroup headerText="Computers">
+					<ListItemStandard>Laptop Lenovo</ListItemStandard>
+					<ListItemStandard>HP Monitor 24</ListItemStandard>
+				</ListItemGroup>
+				<ListItemGroup headerText="Phones">
+					<ListItemStandard>iPhone 14</ListItemStandard>
+					<ListItemStandard>Samsung Galaxy</ListItemStandard>
+				</ListItemGroup>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("separators — None", () => {
+		cy.mount(
+			<List separators="None">
+				<ListItemStandard>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>iPhone 14</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("separators — Inner", () => {
+		cy.mount(
+			<List separators="Inner">
+				<ListItemStandard>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>iPhone 14</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("growing — Button", () => {
+		cy.mount(
+			<List growing="Button">
+				<ListItemStandard>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>iPhone 14</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("no data text", () => {
+		cy.mount(
+			<List noDataText="No items found" headerText="Products">
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<List selectionMode="Multiple" headerText="Compact Products">
+					<ListItemStandard selected>Laptop Lenovo</ListItemStandard>
+					<ListItemStandard>iPhone 14</ListItemStandard>
+					<ListItemStandard>HP Monitor 24</ListItemStandard>
+				</List>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ListItemGroup.cy.tsx b/packages/main/cypress/specs/visuals/ListItemGroup.cy.tsx
new file mode 100644
index 000000000000..2ba6da1205c6
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ListItemGroup.cy.tsx
@@ -0,0 +1,85 @@
+import List from "../../../src/List.js";
+import ListItemStandard from "../../../src/ListItemStandard.js";
+import ListItemGroup from "../../../src/ListItemGroup.js";
+
+describe("ListItemGroup visual", () => {
+	it("basic state — with header text", () => {
+		cy.mount(
+			<List>
+				<ListItemGroup headerText="Computers">
+					<ListItemStandard>Laptop Lenovo</ListItemStandard>
+					<ListItemStandard>HP Monitor 24</ListItemStandard>
+					<ListItemStandard>Keyboard Logitech</ListItemStandard>
+				</ListItemGroup>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("without header text", () => {
+		cy.mount(
+			<List>
+				<ListItemGroup>
+					<ListItemStandard>Laptop Lenovo</ListItemStandard>
+					<ListItemStandard>iPhone 14</ListItemStandard>
+					<ListItemStandard>HP Monitor 24</ListItemStandard>
+				</ListItemGroup>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("multiple groups", () => {
+		cy.mount(
+			<List>
+				<ListItemGroup headerText="Computers">
+					<ListItemStandard>Laptop Lenovo</ListItemStandard>
+					<ListItemStandard>HP Monitor 24</ListItemStandard>
+				</ListItemGroup>
+				<ListItemGroup headerText="Phones">
+					<ListItemStandard>iPhone 14</ListItemStandard>
+					<ListItemStandard>Samsung Galaxy</ListItemStandard>
+				</ListItemGroup>
+				<ListItemGroup headerText="Accessories">
+					<ListItemStandard>Keyboard Logitech</ListItemStandard>
+					<ListItemStandard>Mouse MX Master</ListItemStandard>
+				</ListItemGroup>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("with selection mode — Multiple", () => {
+		cy.mount(
+			<List selectionMode="Multiple">
+				<ListItemGroup headerText="Computers">
+					<ListItemStandard selected>Laptop Lenovo</ListItemStandard>
+					<ListItemStandard>HP Monitor 24</ListItemStandard>
+				</ListItemGroup>
+				<ListItemGroup headerText="Phones">
+					<ListItemStandard selected>iPhone 14</ListItemStandard>
+					<ListItemStandard>Samsung Galaxy</ListItemStandard>
+				</ListItemGroup>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<List>
+					<ListItemGroup headerText="Computers">
+						<ListItemStandard>Laptop Lenovo</ListItemStandard>
+						<ListItemStandard>HP Monitor 24</ListItemStandard>
+					</ListItemGroup>
+					<ListItemGroup headerText="Phones">
+						<ListItemStandard>iPhone 14</ListItemStandard>
+						<ListItemStandard>Samsung Galaxy</ListItemStandard>
+					</ListItemGroup>
+				</List>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ListItemStandard.cy.tsx b/packages/main/cypress/specs/visuals/ListItemStandard.cy.tsx
new file mode 100644
index 000000000000..56f7523f816c
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ListItemStandard.cy.tsx
@@ -0,0 +1,142 @@
+import List from "../../../src/List.js";
+import ListItemStandard from "../../../src/ListItemStandard.js";
+import Avatar from "../../../src/Avatar.js";
+
+describe("ListItemStandard visual", () => {
+	it("basic state", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>iPhone 14</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("with description", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard description="14-inch display, Intel Core i7">Laptop Lenovo</ListItemStandard>
+				<ListItemStandard description="6.1-inch Super Retina XDR display">iPhone 14</ListItemStandard>
+				<ListItemStandard description="4K UHD, 27-inch">HP Monitor 24</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("with icon", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard icon="laptop">Laptop Lenovo</ListItemStandard>
+				<ListItemStandard icon="iphone">iPhone 14</ListItemStandard>
+				<ListItemStandard icon="monitor-payments">HP Monitor 24</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("with image — avatar slot", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard>
+					<Avatar slot="image" icon="person" />
+					John Doe
+				</ListItemStandard>
+				<ListItemStandard>
+					<Avatar slot="image" icon="person" />
+					Jane Smith
+				</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("type — Active", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard type="Active">Active Item</ListItemStandard>
+				<ListItemStandard type="Inactive">Inactive Item</ListItemStandard>
+				<ListItemStandard type="Navigation">Navigation Item</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("type — Detail", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard type="Detail">Detail Item 1</ListItemStandard>
+				<ListItemStandard type="Detail">Detail Item 2</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("selected state — Single mode", () => {
+		cy.mount(
+			<List selectionMode="Single">
+				<ListItemStandard selected>Selected Item</ListItemStandard>
+				<ListItemStandard>Unselected Item</ListItemStandard>
+				<ListItemStandard>Another Item</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("selected state — Multiple mode", () => {
+		cy.mount(
+			<List selectionMode="Multiple">
+				<ListItemStandard selected>First Selected</ListItemStandard>
+				<ListItemStandard selected>Second Selected</ListItemStandard>
+				<ListItemStandard>Unselected Item</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("navigated state", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard navigated>Navigated Item</ListItemStandard>
+				<ListItemStandard>Regular Item</ListItemStandard>
+				<ListItemStandard>Regular Item</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("icon end", () => {
+		cy.mount(
+			<List>
+				<ListItemStandard icon="laptop" iconEnd>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard icon="iphone" iconEnd>iPhone 14</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("delete mode", () => {
+		cy.mount(
+			<List selectionMode="Delete">
+				<ListItemStandard>Laptop Lenovo</ListItemStandard>
+				<ListItemStandard>iPhone 14</ListItemStandard>
+				<ListItemStandard>HP Monitor 24</ListItemStandard>
+			</List>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<List selectionMode="Multiple">
+					<ListItemStandard selected icon="laptop">Laptop Lenovo</ListItemStandard>
+					<ListItemStandard icon="iphone">iPhone 14</ListItemStandard>
+					<ListItemStandard icon="monitor-payments">HP Monitor 24</ListItemStandard>
+				</List>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Menu.cy.tsx b/packages/main/cypress/specs/visuals/Menu.cy.tsx
new file mode 100644
index 000000000000..9b50553c7ce4
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Menu.cy.tsx
@@ -0,0 +1,220 @@
+import Button from "../../../src/Button.js";
+import Menu from "../../../src/Menu.js";
+import MenuItem from "../../../src/MenuItem.js";
+import MenuItemGroup from "../../../src/MenuItemGroup.js";
+import MenuSeparator from "../../../src/MenuSeparator.js";
+
+describe("Menu visual", () => {
+	it("basic state — open with simple items", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem text="New File" />
+					<MenuItem text="New Folder" />
+					<MenuItem text="Open" />
+				</Menu>
+			</>
+		);
+		cy.get("[ui5-menu]").ui5MenuOpen();
+		cy.get("[ui5-menu]").ui5MenuOpened();
+		cy.screenshot();
+	});
+
+	it("items with icons", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem text="New File" icon="add-document" />
+					<MenuItem text="Open Folder" icon="open-folder" />
+					<MenuItem text="Save" icon="save" />
+				</Menu>
+			</>
+		);
+		cy.get("[ui5-menu]").ui5MenuOpen();
+		cy.get("[ui5-menu]").ui5MenuOpened();
+		cy.screenshot();
+	});
+
+	it("items with additional text", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem text="Save" additionalText="Ctrl+S" />
+					<MenuItem text="Copy" additionalText="Ctrl+C" />
+					<MenuItem text="Paste" additionalText="Ctrl+V" />
+				</Menu>
+			</>
+		);
+		cy.get("[ui5-menu]").ui5MenuOpen();
+		cy.get("[ui5-menu]").ui5MenuOpened();
+		cy.screenshot();
+	});
+
+	it("disabled items", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem text="New File" />
+					<MenuItem text="Save" disabled />
+					<MenuItem text="Delete" disabled />
+				</Menu>
+			</>
+		);
+		cy.get("[ui5-menu]").ui5MenuOpen();
+		cy.get("[ui5-menu]").ui5MenuOpened();
+		cy.screenshot();
+	});
+
+	it("item with endContent", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem text="Item with Action">
+						<Button slot="endContent" icon="favorite" design="Transparent" />
+					</MenuItem>
+				</Menu>
+			</>
+		);
+		cy.get("[ui5-menu]").ui5MenuOpen();
+		cy.get("[ui5-menu]").ui5MenuOpened();
+		cy.screenshot();
+	});
+
+	it("item with submenu indicator — submenu open via keyboard", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem text="New">
+						<MenuItem text="New File" />
+						<MenuItem text="New Folder" />
+					</MenuItem>
+					<MenuItem text="Open" />
+				</Menu>
+			</>
+		);
+		cy.get("[ui5-menu]").ui5MenuOpen();
+		cy.get("[ui5-menu]").ui5MenuOpened();
+		cy.get("[ui5-menu] > [ui5-menu-item]").first().should("be.focused").realPress("ArrowRight");
+		cy.get("[ui5-menu-item][text='New']").shadow().find("[ui5-responsive-popover]").should("have.attr", "open");
+		cy.screenshot();
+	});
+
+	it("checked item (outside group)", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem text="Unchecked Item" />
+					<MenuItem text="Checked Item" checked />
+				</Menu>
+			</>
+		);
+		cy.get("[ui5-menu]").ui5MenuOpen();
+		cy.get("[ui5-menu]").ui5MenuOpened();
+		cy.screenshot();
+	});
+
+	it("MenuSeparator — single separator", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem text="New File" />
+					<MenuItem text="New Folder" />
+					<MenuSeparator />
+					<MenuItem text="Exit" />
+				</Menu>
+			</>
+		);
+		cy.get("[ui5-menu]").ui5MenuOpen();
+		cy.get("[ui5-menu]").ui5MenuOpened();
+		cy.screenshot();
+	});
+
+	it("MenuSeparator — multiple separators", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem text="New File" />
+					<MenuSeparator />
+					<MenuItem text="Open" />
+					<MenuItem text="Save" />
+					<MenuSeparator />
+					<MenuItem text="Print" />
+					<MenuSeparator />
+					<MenuItem text="Exit" />
+				</Menu>
+			</>
+		);
+		cy.get("[ui5-menu]").ui5MenuOpen();
+		cy.get("[ui5-menu]").ui5MenuOpened();
+		cy.screenshot();
+	});
+
+	it("MenuItemGroup — checkMode Single", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItemGroup checkMode="Single">
+						<MenuItem text="Option A" />
+						<MenuItem text="Option B" checked />
+						<MenuItem text="Option C" />
+					</MenuItemGroup>
+				</Menu>
+			</>
+		);
+		cy.get("[ui5-menu]").ui5MenuOpen();
+		cy.get("[ui5-menu]").ui5MenuOpened();
+		cy.screenshot();
+	});
+
+	it("MenuItemGroup — checkMode Multiple", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItemGroup checkMode="Multiple">
+						<MenuItem text="Feature A" checked />
+						<MenuItem text="Feature B" />
+						<MenuItem text="Feature C" checked />
+					</MenuItemGroup>
+				</Menu>
+			</>
+		);
+		cy.get("[ui5-menu]").ui5MenuOpen();
+		cy.get("[ui5-menu]").ui5MenuOpened();
+		cy.screenshot();
+	});
+
+	it("mixed groups and separators", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem text="New File" />
+					<MenuSeparator />
+					<MenuItemGroup checkMode="Single">
+						<MenuItem text="View Mode A" checked />
+						<MenuItem text="View Mode B" />
+					</MenuItemGroup>
+					<MenuSeparator />
+					<MenuItemGroup checkMode="Multiple">
+						<MenuItem text="Show Toolbar" checked />
+						<MenuItem text="Show Sidebar" />
+					</MenuItemGroup>
+				</Menu>
+			</>
+		);
+		cy.get("[ui5-menu]").ui5MenuOpen();
+		cy.get("[ui5-menu]").ui5MenuOpened();
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/MultiComboBox.cy.tsx b/packages/main/cypress/specs/visuals/MultiComboBox.cy.tsx
index b53ab8cddb21..13d0b39c9ef7 100644
--- a/packages/main/cypress/specs/visuals/MultiComboBox.cy.tsx
+++ b/packages/main/cypress/specs/visuals/MultiComboBox.cy.tsx
@@ -1,5 +1,6 @@
 import MultiComboBox from "../../../src/MultiComboBox.js";
 import MultiComboBoxItem from "../../../src/MultiComboBoxItem.js";
+import MultiComboBoxItemCustom from "../../../src/MultiComboBoxItemCustom.js";
 import MultiComboBoxItemGroup from "../../../src/MultiComboBoxItemGroup.js";
 
 describe("MultiComboBox visual", () => {
@@ -44,6 +45,19 @@ describe("MultiComboBox visual", () => {
 		cy.screenshot();
 	});
 
+	it("dropdown open — pre-selected items checked", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItem selected text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+				<MultiComboBoxItem selected text="Canada" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-multi-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
 	it("dropdown open — first item focused via arrow key", () => {
 		cy.mount(
 			<MultiComboBox>
@@ -73,17 +87,23 @@ describe("MultiComboBox visual", () => {
 		cy.screenshot();
 	});
 
-	it("with grouped items — dropdown open", () => {
+	it("value state — Negative", () => {
 		cy.mount(
-			<MultiComboBox>
-				<MultiComboBoxItemGroup headerText="Africa">
-					<MultiComboBoxItem text="Algeria" />
-					<MultiComboBoxItem text="Egypt" />
-				</MultiComboBoxItemGroup>
-				<MultiComboBoxItemGroup headerText="Europe">
-					<MultiComboBoxItem text="Bulgaria" />
-					<MultiComboBoxItem text="Denmark" />
-				</MultiComboBoxItemGroup>
+			<MultiComboBox valueState="Negative">
+				<span slot="valueStateMessage">Invalid selection</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Negative — dropdown open", () => {
+		cy.mount(
+			<MultiComboBox valueState="Negative">
+				<span slot="valueStateMessage">Invalid selection</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
 			</MultiComboBox>
 		);
 		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
@@ -91,7 +111,7 @@ describe("MultiComboBox visual", () => {
 		cy.screenshot();
 	});
 
-	it("value state — Negative", () => {
+	it("value state — Negative — focused", () => {
 		cy.mount(
 			<MultiComboBox valueState="Negative">
 				<span slot="valueStateMessage">Invalid selection</span>
@@ -99,6 +119,7 @@ describe("MultiComboBox visual", () => {
 				<MultiComboBoxItem text="Bulgaria" />
 			</MultiComboBox>
 		);
+		cy.get("[ui5-multi-combobox]").shadow().find("input").realClick();
 		cy.screenshot();
 	});
 
@@ -113,6 +134,31 @@ describe("MultiComboBox visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Critical — dropdown open", () => {
+		cy.mount(
+			<MultiComboBox valueState="Critical">
+				<span slot="valueStateMessage">Please review your selection</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-multi-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Critical — focused", () => {
+		cy.mount(
+			<MultiComboBox valueState="Critical">
+				<span slot="valueStateMessage">Please review your selection</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Positive", () => {
 		cy.mount(
 			<MultiComboBox valueState="Positive">
@@ -124,6 +170,31 @@ describe("MultiComboBox visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Positive — dropdown open", () => {
+		cy.mount(
+			<MultiComboBox valueState="Positive">
+				<span slot="valueStateMessage">Selection is valid</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-multi-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Positive — focused", () => {
+		cy.mount(
+			<MultiComboBox valueState="Positive">
+				<span slot="valueStateMessage">Selection is valid</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("value state — Information", () => {
 		cy.mount(
 			<MultiComboBox valueState="Information">
@@ -135,6 +206,31 @@ describe("MultiComboBox visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Information — dropdown open", () => {
+		cy.mount(
+			<MultiComboBox valueState="Information">
+				<span slot="valueStateMessage">Select up to 3 items</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-multi-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Information — focused", () => {
+		cy.mount(
+			<MultiComboBox valueState="Information">
+				<span slot="valueStateMessage">Select up to 3 items</span>
+				<MultiComboBoxItem text="Algeria" />
+				<MultiComboBoxItem text="Bulgaria" />
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
 	it("disabled state", () => {
 		cy.mount(
 			<MultiComboBox disabled>
@@ -173,4 +269,150 @@ describe("MultiComboBox visual", () => {
 		);
 		cy.screenshot();
 	});
+
+	// MultiComboBoxItemCustom
+	it("custom items — basic state", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItemCustom text="Algeria">
+					<span>Algeria</span>
+				</MultiComboBoxItemCustom>
+				<MultiComboBoxItemCustom text="Bulgaria">
+					<span>Bulgaria</span>
+				</MultiComboBoxItemCustom>
+				<MultiComboBoxItemCustom text="Canada">
+					<span>Canada</span>
+				</MultiComboBoxItemCustom>
+			</MultiComboBox>
+		);
+		cy.screenshot();
+	});
+
+	it("custom items — dropdown open", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItemCustom text="Algeria">
+					<span>Algeria</span>
+				</MultiComboBoxItemCustom>
+				<MultiComboBoxItemCustom text="Bulgaria">
+					<span>Bulgaria</span>
+				</MultiComboBoxItemCustom>
+				<MultiComboBoxItemCustom text="Canada">
+					<span>Canada</span>
+				</MultiComboBoxItemCustom>
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-multi-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("custom items — dropdown open with pre-selected items checked", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItemCustom selected text="Algeria">
+					<span>Algeria</span>
+				</MultiComboBoxItemCustom>
+				<MultiComboBoxItemCustom text="Bulgaria">
+					<span>Bulgaria</span>
+				</MultiComboBoxItemCustom>
+				<MultiComboBoxItemCustom selected text="Canada">
+					<span>Canada</span>
+				</MultiComboBoxItemCustom>
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-multi-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	// MultiComboBoxItemGroup
+	it("grouped items — basic state", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItemGroup headerText="Africa">
+					<MultiComboBoxItem text="Algeria" />
+					<MultiComboBoxItem text="Egypt" />
+				</MultiComboBoxItemGroup>
+				<MultiComboBoxItemGroup headerText="Europe">
+					<MultiComboBoxItem text="Bulgaria" />
+					<MultiComboBoxItem text="France" />
+				</MultiComboBoxItemGroup>
+			</MultiComboBox>
+		);
+		cy.screenshot();
+	});
+
+	it("grouped items — dropdown open", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItemGroup headerText="Africa">
+					<MultiComboBoxItem text="Algeria" />
+					<MultiComboBoxItem text="Egypt" />
+				</MultiComboBoxItemGroup>
+				<MultiComboBoxItemGroup headerText="Europe">
+					<MultiComboBoxItem text="Bulgaria" />
+					<MultiComboBoxItem text="France" />
+				</MultiComboBoxItemGroup>
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-multi-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("grouped items — dropdown open with pre-selected items checked", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItemGroup headerText="Africa">
+					<MultiComboBoxItem selected text="Algeria" />
+					<MultiComboBoxItem text="Egypt" />
+				</MultiComboBoxItemGroup>
+				<MultiComboBoxItemGroup headerText="Europe">
+					<MultiComboBoxItem text="Bulgaria" />
+					<MultiComboBoxItem selected text="France" />
+				</MultiComboBoxItemGroup>
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-multi-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("grouped items — first item focused via arrow key", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItemGroup headerText="Africa">
+					<MultiComboBoxItem text="Algeria" />
+					<MultiComboBoxItem text="Egypt" />
+				</MultiComboBoxItemGroup>
+				<MultiComboBoxItemGroup headerText="Europe">
+					<MultiComboBoxItem text="Bulgaria" />
+					<MultiComboBoxItem text="France" />
+				</MultiComboBoxItemGroup>
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").shadow().find("[ui5-icon]").realClick();
+		cy.get("[ui5-multi-combobox]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.realPress("ArrowDown");
+		cy.screenshot();
+	});
+
+	it("grouped items — filtering", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItemGroup headerText="Africa">
+					<MultiComboBoxItem text="Algeria" />
+					<MultiComboBoxItem text="Egypt" />
+				</MultiComboBoxItemGroup>
+				<MultiComboBoxItemGroup headerText="Europe">
+					<MultiComboBoxItem text="Bulgaria" />
+					<MultiComboBoxItem text="France" />
+				</MultiComboBoxItemGroup>
+			</MultiComboBox>
+		);
+		cy.get("[ui5-multi-combobox]").realClick();
+		cy.realType("B");
+		cy.screenshot();
+	});
 });
diff --git a/packages/main/cypress/specs/visuals/MultiInput.cy.tsx b/packages/main/cypress/specs/visuals/MultiInput.cy.tsx
new file mode 100644
index 000000000000..6f2cc06e42db
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/MultiInput.cy.tsx
@@ -0,0 +1,183 @@
+import MultiInput from "../../../src/MultiInput.js";
+import Token from "../../../src/Token.js";
+import SuggestionItem from "../../../src/SuggestionItem.js";
+
+describe("MultiInput visual", () => {
+	it("basic state — empty", () => {
+		cy.mount(<MultiInput placeholder="Enter value" />);
+		cy.screenshot();
+	});
+
+	it("compact mode — empty", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<MultiInput placeholder="Enter value" />
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("with tokens", () => {
+		cy.mount(
+			<MultiInput>
+				<Token slot="tokens" text="Amet" />
+				<Token slot="tokens" text="Bulgaria" />
+				<Token slot="tokens" text="Canada" />
+			</MultiInput>
+		);
+		cy.screenshot();
+	});
+
+	it("with tokens — focused/expanded", () => {
+		cy.mount(
+			<MultiInput>
+				<Token slot="tokens" text="Amet" />
+				<Token slot="tokens" text="Bulgaria" />
+				<Token slot="tokens" text="Canada" />
+			</MultiInput>
+		);
+		cy.get("[ui5-multi-input]").shadow().find("input").realClick();
+		cy.get("[ui5-multi-input]").shadow().find("[ui5-tokenizer]").should("have.attr", "expanded");
+		cy.screenshot();
+	});
+
+	it("with value help icon", () => {
+		cy.mount(
+			<MultiInput showValueHelpIcon>
+				<Token slot="tokens" text="Amet" />
+			</MultiInput>
+		);
+		cy.screenshot();
+	});
+
+	it("readonly", () => {
+		cy.mount(
+			<MultiInput readonly>
+				<Token slot="tokens" text="Amet" />
+				<Token slot="tokens" text="Bulgaria" />
+			</MultiInput>
+		);
+		cy.screenshot();
+	});
+
+	it("disabled", () => {
+		cy.mount(
+			<MultiInput disabled>
+				<Token slot="tokens" text="Amet" />
+				<Token slot="tokens" text="Bulgaria" />
+			</MultiInput>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Negative", () => {
+		cy.mount(
+			<MultiInput valueState="Negative">
+				<span slot="valueStateMessage">Error message</span>
+				<Token slot="tokens" text="Amet" />
+			</MultiInput>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Negative — focused", () => {
+		cy.mount(
+			<MultiInput valueState="Negative">
+				<span slot="valueStateMessage">Error message</span>
+				<Token slot="tokens" text="Amet" />
+			</MultiInput>
+		);
+		cy.get("[ui5-multi-input]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
+	it("value state — Critical", () => {
+		cy.mount(
+			<MultiInput valueState="Critical">
+				<span slot="valueStateMessage">Warning message</span>
+				<Token slot="tokens" text="Amet" />
+			</MultiInput>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Critical — focused", () => {
+		cy.mount(
+			<MultiInput valueState="Critical">
+				<span slot="valueStateMessage">Warning message</span>
+				<Token slot="tokens" text="Amet" />
+			</MultiInput>
+		);
+		cy.get("[ui5-multi-input]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
+	it("value state — Positive", () => {
+		cy.mount(
+			<MultiInput valueState="Positive">
+				<span slot="valueStateMessage">Success message</span>
+				<Token slot="tokens" text="Amet" />
+			</MultiInput>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Positive — focused", () => {
+		cy.mount(
+			<MultiInput valueState="Positive">
+				<span slot="valueStateMessage">Success message</span>
+				<Token slot="tokens" text="Amet" />
+			</MultiInput>
+		);
+		cy.get("[ui5-multi-input]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
+	it("value state — Information", () => {
+		cy.mount(
+			<MultiInput valueState="Information">
+				<span slot="valueStateMessage">Info message</span>
+				<Token slot="tokens" text="Amet" />
+			</MultiInput>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Information — focused", () => {
+		cy.mount(
+			<MultiInput valueState="Information">
+				<span slot="valueStateMessage">Info message</span>
+				<Token slot="tokens" text="Amet" />
+			</MultiInput>
+		);
+		cy.get("[ui5-multi-input]").shadow().find("input").realClick();
+		cy.screenshot();
+	});
+
+	it("overflowing tokens — n-more indicator", () => {
+		cy.mount(
+			<MultiInput style={{ width: "250px" }}>
+				<Token slot="tokens" text="Albania" />
+				<Token slot="tokens" text="Argentina" />
+				<Token slot="tokens" text="Bulgaria" />
+				<Token slot="tokens" text="Canada" />
+				<Token slot="tokens" text="Denmark" />
+			</MultiInput>
+		);
+		cy.screenshot();
+	});
+
+	it("suggestions dropdown open", () => {
+		cy.mount(
+			<MultiInput showSuggestions>
+				<SuggestionItem text="Bulgaria" />
+				<SuggestionItem text="Brazil" />
+				<SuggestionItem text="Belgium" />
+			</MultiInput>
+		);
+		cy.get("[ui5-multi-input]").shadow().find("input").realClick();
+		cy.realType("B");
+		cy.get("[ui5-multi-input]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Panel.cy.tsx b/packages/main/cypress/specs/visuals/Panel.cy.tsx
new file mode 100644
index 000000000000..540d341991c8
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Panel.cy.tsx
@@ -0,0 +1,78 @@
+import Panel from "../../../src/Panel.js";
+import Title from "../../../src/Title.js";
+import Label from "../../../src/Label.js";
+
+describe("Panel visual", () => {
+	it("basic state — expanded with headerText", () => {
+		cy.mount(
+			<Panel headerText="Panel Header">
+				<Label>Panel content goes here.</Label>
+			</Panel>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Panel headerText="Panel Header">
+					<Label>Panel content goes here.</Label>
+				</Panel>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("collapsed state", () => {
+		cy.mount(
+			<Panel headerText="Panel Header" collapsed>
+				<Label>Panel content goes here.</Label>
+			</Panel>
+		);
+		cy.screenshot();
+	});
+
+	it("fixed panel — no toggle arrow", () => {
+		cy.mount(
+			<Panel headerText="Fixed Panel" fixed>
+				<Label>Panel content goes here.</Label>
+			</Panel>
+		);
+		cy.screenshot();
+	});
+
+	it("custom header slot", () => {
+		cy.mount(
+			<Panel>
+				<div slot="header">
+					<Title>Custom Header Title</Title>
+				</div>
+				<Label>Panel content with custom header.</Label>
+			</Panel>
+		);
+		cy.screenshot();
+	});
+
+	it("custom header — collapsed", () => {
+		cy.mount(
+			<Panel collapsed>
+				<div slot="header">
+					<Title>Custom Header Title</Title>
+				</div>
+				<Label>Panel content with custom header.</Label>
+			</Panel>
+		);
+		cy.screenshot();
+	});
+
+	it("collapsed via header click", () => {
+		cy.mount(
+			<Panel headerText="Panel Header">
+				<Label>Panel content goes here.</Label>
+			</Panel>
+		);
+		cy.get("[ui5-panel]").shadow().find(".ui5-panel-header").realClick();
+		cy.wait(300);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Popover.cy.tsx b/packages/main/cypress/specs/visuals/Popover.cy.tsx
new file mode 100644
index 000000000000..867984599660
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Popover.cy.tsx
@@ -0,0 +1,105 @@
+import Button from "../../../src/Button.js";
+import Popover from "../../../src/Popover.js";
+import List from "../../../src/List.js";
+import ListItemStandard from "../../../src/ListItemStandard.js";
+
+describe("Popover visual", () => {
+	it("basic open state", () => {
+		cy.mount(
+			<>
+				<Button id="opener" style={{ marginTop: "100px", marginLeft: "100px" }}>Open</Button>
+				<Popover opener="opener" headerText="Popover Header" open={true}>
+					<div style={{ padding: "1rem" }}>Popover content</div>
+				</Popover>
+			</>
+		);
+		cy.get("[ui5-popover]").ui5PopoverOpened();
+		cy.screenshot();
+	});
+
+	it("open with footer slot", () => {
+		cy.mount(
+			<>
+				<Button id="opener" style={{ marginTop: "100px", marginLeft: "100px" }}>Open</Button>
+				<Popover opener="opener" headerText="Popover Header" open={true}>
+					<div style={{ padding: "1rem" }}>Popover content</div>
+					<div slot="footer" style={{ display: "flex", justifyContent: "flex-end", padding: "0.5rem" }}>
+						<Button design="Emphasized">OK</Button>
+						<Button>Cancel</Button>
+					</div>
+				</Popover>
+			</>
+		);
+		cy.get("[ui5-popover]").ui5PopoverOpened();
+		cy.screenshot();
+	});
+
+	it("open with list content", () => {
+		cy.mount(
+			<>
+				<Button id="opener" style={{ marginTop: "100px", marginLeft: "100px" }}>Open</Button>
+				<Popover opener="opener" open={true}>
+					<List>
+						<ListItemStandard>Item 1</ListItemStandard>
+						<ListItemStandard>Item 2</ListItemStandard>
+						<ListItemStandard>Item 3</ListItemStandard>
+					</List>
+				</Popover>
+			</>
+		);
+		cy.get("[ui5-popover]").ui5PopoverOpened();
+		cy.screenshot();
+	});
+
+	it("open without arrow (hide-arrow)", () => {
+		cy.mount(
+			<>
+				<Button id="opener" style={{ marginTop: "100px", marginLeft: "100px" }}>Open</Button>
+				<Popover opener="opener" headerText="No Arrow" hideArrow open={true}>
+					<div style={{ padding: "1rem" }}>Popover without arrow</div>
+				</Popover>
+			</>
+		);
+		cy.get("[ui5-popover]").ui5PopoverOpened();
+		cy.screenshot();
+	});
+
+	it("placement — Top", () => {
+		cy.mount(
+			<>
+				<Button id="opener" style={{ marginTop: "250px", marginLeft: "200px" }}>Open</Button>
+				<Popover opener="opener" headerText="Top Placement" placement="Top" open={true}>
+					<div style={{ padding: "1rem" }}>Placed above opener</div>
+				</Popover>
+			</>
+		);
+		cy.get("[ui5-popover]").ui5PopoverOpened();
+		cy.screenshot();
+	});
+
+	it("placement — End", () => {
+		cy.mount(
+			<>
+				<Button id="opener" style={{ marginTop: "100px", marginLeft: "100px" }}>Open</Button>
+				<Popover opener="opener" headerText="End Placement" placement="End" open={true}>
+					<div style={{ padding: "1rem" }}>Placed to the end of opener</div>
+				</Popover>
+			</>
+		);
+		cy.get("[ui5-popover]").ui5PopoverOpened();
+		cy.screenshot();
+	});
+
+	it("resizable popover", () => {
+		cy.mount(
+			<>
+				<Button id="opener" style={{ marginTop: "100px", marginLeft: "100px" }}>Open</Button>
+				<Popover opener="opener" headerText="Resizable Popover" resizable open={true}>
+					<div style={{ padding: "1rem", width: "200px" }}>Resizable content</div>
+				</Popover>
+			</>
+		);
+		cy.get("[ui5-popover]").ui5PopoverOpened();
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ProgressIndicator.cy.tsx b/packages/main/cypress/specs/visuals/ProgressIndicator.cy.tsx
new file mode 100644
index 000000000000..e19fd4749aca
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ProgressIndicator.cy.tsx
@@ -0,0 +1,72 @@
+import ProgressIndicator from "../../../src/ProgressIndicator.js";
+import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+
+describe("ProgressIndicator visual", () => {
+	before(() => {
+		cy.wrap({ setAnimationMode }).then(api => api.setAnimationMode("none"));
+	});
+
+	it("0% — empty", () => {
+		cy.mount(<ProgressIndicator value={0} />);
+		cy.screenshot();
+	});
+
+	it("25%", () => {
+		cy.mount(<ProgressIndicator value={25} />);
+		cy.screenshot();
+	});
+
+	it("50%", () => {
+		cy.mount(<ProgressIndicator value={50} />);
+		cy.screenshot();
+	});
+
+	it("75%", () => {
+		cy.mount(<ProgressIndicator value={75} />);
+		cy.screenshot();
+	});
+
+	it("100% — full", () => {
+		cy.mount(<ProgressIndicator value={100} />);
+		cy.screenshot();
+	});
+
+	it("custom displayValue", () => {
+		cy.mount(<ProgressIndicator value={60} displayValue="Step 3 of 5" />);
+		cy.screenshot();
+	});
+
+	it("value state — Negative", () => {
+		cy.mount(<ProgressIndicator value={40} valueState="Negative" />);
+		cy.screenshot();
+	});
+
+	it("value state — Critical", () => {
+		cy.mount(<ProgressIndicator value={60} valueState="Critical" />);
+		cy.screenshot();
+	});
+
+	it("value state — Positive", () => {
+		cy.mount(<ProgressIndicator value={80} valueState="Positive" />);
+		cy.screenshot();
+	});
+
+	it("value state — Information", () => {
+		cy.mount(<ProgressIndicator value={50} valueState="Information" />);
+		cy.screenshot();
+	});
+
+	it("disabled", () => {
+		cy.mount(<ProgressIndicator value={50} disabled />);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<ProgressIndicator value={50} />
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/RangeSlider.cy.tsx b/packages/main/cypress/specs/visuals/RangeSlider.cy.tsx
new file mode 100644
index 000000000000..8f865b0a6036
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/RangeSlider.cy.tsx
@@ -0,0 +1,52 @@
+import RangeSlider from "../../../src/RangeSlider.js";
+
+describe("RangeSlider visual", () => {
+	beforeEach(() => {
+		cy.get("[data-cy-root]").invoke("css", "padding", "50px 100px");
+	});
+
+	it("basic state", () => {
+		cy.mount(<RangeSlider min={0} max={100} startValue={0} endValue={100} />);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size style={{ padding: "20px" }}>
+				<RangeSlider min={0} max={100} startValue={20} endValue={80} />
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("range in the middle", () => {
+		cy.mount(<RangeSlider min={0} max={100} startValue={25} endValue={75} />);
+		cy.screenshot();
+	});
+
+	it("narrow range", () => {
+		cy.mount(<RangeSlider min={0} max={100} startValue={45} endValue={55} />);
+		cy.screenshot();
+	});
+
+	it("with tickmarks", () => {
+		cy.mount(<RangeSlider min={0} max={10} step={1} startValue={2} endValue={8} showTickmarks />);
+		cy.screenshot();
+	});
+
+	it("with tickmarks and label interval", () => {
+		cy.mount(<RangeSlider min={0} max={20} step={2} startValue={4} endValue={16} showTickmarks labelInterval={2} />);
+		cy.screenshot();
+	});
+
+	it("with tooltip", () => {
+		cy.mount(<RangeSlider min={0} max={100} startValue={30} endValue={70} showTooltip />);
+		cy.get("[ui5-range-slider]").shadow().find("[ui5-slider-handle][handle-type='Start']").realClick();
+		cy.screenshot();
+	});
+
+	it("disabled", () => {
+		cy.mount(<RangeSlider min={0} max={100} startValue={20} endValue={80} disabled />);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/RatingIndicator.cy.tsx b/packages/main/cypress/specs/visuals/RatingIndicator.cy.tsx
new file mode 100644
index 000000000000..2a71f4e521d9
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/RatingIndicator.cy.tsx
@@ -0,0 +1,69 @@
+import RatingIndicator from "../../../src/RatingIndicator.js";
+import heart from "@ui5/webcomponents-icons/dist/heart.js";
+import heart2 from "@ui5/webcomponents-icons/dist/heart-2.js";
+
+describe("RatingIndicator visual", () => {
+	it("basic state — no value", () => {
+		cy.mount(<RatingIndicator />);
+		cy.screenshot();
+	});
+
+	it("with value", () => {
+		cy.mount(<RatingIndicator value={3} />);
+		cy.screenshot();
+	});
+
+	it("half-star value", () => {
+		cy.mount(<RatingIndicator value={2.5} />);
+		cy.screenshot();
+	});
+
+	it("readonly", () => {
+		cy.mount(<RatingIndicator value={3.5} readonly />);
+		cy.screenshot();
+	});
+
+	it("disabled", () => {
+		cy.mount(<RatingIndicator value={3} disabled />);
+		cy.screenshot();
+	});
+
+	it("required", () => {
+		cy.mount(<RatingIndicator required />);
+		cy.screenshot();
+	});
+
+	it("custom max", () => {
+		cy.mount(<RatingIndicator value={6} max={10} />);
+		cy.screenshot();
+	});
+
+	it("size S", () => {
+		cy.mount(<RatingIndicator value={3} size="S" />);
+		cy.screenshot();
+	});
+
+	it("size L", () => {
+		cy.mount(<RatingIndicator value={3} size="L" />);
+		cy.screenshot();
+	});
+
+	it("custom icons", () => {
+		cy.mount(<RatingIndicator value={3} ratedIcon={heart} unratedIcon={heart2} />);
+		cy.screenshot();
+	});
+
+	it("custom icons — half-star", () => {
+		cy.mount(<RatingIndicator value={2.5} ratedIcon={heart} unratedIcon={heart2} />);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<RatingIndicator value={3} />
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ResponsivePopover.cy.tsx b/packages/main/cypress/specs/visuals/ResponsivePopover.cy.tsx
new file mode 100644
index 000000000000..e83c9ddf4261
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ResponsivePopover.cy.tsx
@@ -0,0 +1,80 @@
+import Button from "../../../src/Button.js";
+import ResponsivePopover from "../../../src/ResponsivePopover.js";
+
+describe("ResponsivePopover visual", () => {
+	it("basic state — open with content", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<ResponsivePopover opener="btnOpen">
+					<div style={{ padding: "1rem" }}>Popover content</div>
+				</ResponsivePopover>
+			</>
+		);
+		cy.get("[ui5-responsive-popover]").invoke("attr", "open", true);
+		cy.get("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("with header and footer slots", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<ResponsivePopover opener="btnOpen">
+					<div slot="header" style={{ padding: "0.5rem 1rem", fontWeight: "bold" }}>Popover Header</div>
+					<div style={{ padding: "1rem" }}>Popover content goes here.</div>
+					<div slot="footer" style={{ padding: "0.5rem 1rem" }}>
+						<Button design="Emphasized">Confirm</Button>
+						<Button>Cancel</Button>
+					</div>
+				</ResponsivePopover>
+			</>
+		);
+		cy.get("[ui5-responsive-popover]").invoke("attr", "open", true);
+		cy.get("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("contentOnlyOnDesktop — no header/footer on desktop", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open</Button>
+				<ResponsivePopover opener="btnOpen" contentOnlyOnDesktop>
+					<div slot="header">Header</div>
+					<div style={{ padding: "1rem" }}>Content only on desktop — header hidden.</div>
+				</ResponsivePopover>
+			</>
+		);
+		cy.get("[ui5-responsive-popover]").invoke("attr", "open", true);
+		cy.get("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("placement — End", () => {
+		cy.mount(
+			<div style={{ display: "flex", justifyContent: "center", paddingTop: "2rem" }}>
+				<Button id="btnOpen">Open</Button>
+				<ResponsivePopover opener="btnOpen" placement="End">
+					<div style={{ padding: "1rem" }}>Popover placed at End</div>
+				</ResponsivePopover>
+			</div>
+		);
+		cy.get("[ui5-responsive-popover]").invoke("attr", "open", true);
+		cy.get("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("placement — Top", () => {
+		cy.mount(
+			<div style={{ display: "flex", justifyContent: "center", paddingTop: "8rem" }}>
+				<Button id="btnOpen">Open</Button>
+				<ResponsivePopover opener="btnOpen" placement="Top">
+					<div style={{ padding: "1rem" }}>Popover placed at Top</div>
+				</ResponsivePopover>
+			</div>
+		);
+		cy.get("[ui5-responsive-popover]").invoke("attr", "open", true);
+		cy.get("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/SegmentedButton.cy.tsx b/packages/main/cypress/specs/visuals/SegmentedButton.cy.tsx
new file mode 100644
index 000000000000..cc4ec5ccaf9d
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/SegmentedButton.cy.tsx
@@ -0,0 +1,97 @@
+import SegmentedButton from "../../../src/SegmentedButton.js";
+import SegmentedButtonItem from "../../../src/SegmentedButtonItem.js";
+import list from "@ui5/webcomponents-icons/dist/list.js";
+import grid from "@ui5/webcomponents-icons/dist/grid.js";
+import calendar from "@ui5/webcomponents-icons/dist/calendar.js";
+
+describe("SegmentedButton visual", () => {
+	it("basic — first item selected by default", () => {
+		cy.mount(
+			<SegmentedButton>
+				<SegmentedButtonItem>First</SegmentedButtonItem>
+				<SegmentedButtonItem>Second</SegmentedButtonItem>
+				<SegmentedButtonItem>Third</SegmentedButtonItem>
+			</SegmentedButton>
+		);
+		cy.screenshot();
+	});
+
+	it("second item selected", () => {
+		cy.mount(
+			<SegmentedButton>
+				<SegmentedButtonItem>First</SegmentedButtonItem>
+				<SegmentedButtonItem selected>Second</SegmentedButtonItem>
+				<SegmentedButtonItem>Third</SegmentedButtonItem>
+			</SegmentedButton>
+		);
+		cy.screenshot();
+	});
+
+	it("multiple selection mode — two items selected", () => {
+		cy.mount(
+			<SegmentedButton selectionMode="Multiple">
+				<SegmentedButtonItem selected>First</SegmentedButtonItem>
+				<SegmentedButtonItem>Second</SegmentedButtonItem>
+				<SegmentedButtonItem selected>Third</SegmentedButtonItem>
+			</SegmentedButton>
+		);
+		cy.screenshot();
+	});
+
+	it("with disabled item", () => {
+		cy.mount(
+			<SegmentedButton>
+				<SegmentedButtonItem>First</SegmentedButtonItem>
+				<SegmentedButtonItem disabled>Second</SegmentedButtonItem>
+				<SegmentedButtonItem>Third</SegmentedButtonItem>
+			</SegmentedButton>
+		);
+		cy.screenshot();
+	});
+
+	it("itemsFitContent — items sized to their content", () => {
+		cy.mount(
+			<SegmentedButton itemsFitContent>
+				<SegmentedButtonItem>Short</SegmentedButtonItem>
+				<SegmentedButtonItem>Much longer text</SegmentedButtonItem>
+				<SegmentedButtonItem>Medium</SegmentedButtonItem>
+			</SegmentedButton>
+		);
+		cy.screenshot();
+	});
+
+	it("with icons", () => {
+		cy.mount(
+			<SegmentedButton>
+				<SegmentedButtonItem icon={list}>List</SegmentedButtonItem>
+				<SegmentedButtonItem icon={grid} selected>Grid</SegmentedButtonItem>
+				<SegmentedButtonItem icon={calendar}>Calendar</SegmentedButtonItem>
+			</SegmentedButton>
+		);
+		cy.screenshot();
+	});
+
+	it("icon only", () => {
+		cy.mount(
+			<SegmentedButton>
+				<SegmentedButtonItem icon={list} />
+				<SegmentedButtonItem icon={grid} selected />
+				<SegmentedButtonItem icon={calendar} />
+			</SegmentedButton>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<SegmentedButton>
+					<SegmentedButtonItem>First</SegmentedButtonItem>
+					<SegmentedButtonItem selected>Second</SegmentedButtonItem>
+					<SegmentedButtonItem>Third</SegmentedButtonItem>
+				</SegmentedButton>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Select.cy.tsx b/packages/main/cypress/specs/visuals/Select.cy.tsx
index e9ef5f955b39..53d3526579ed 100644
--- a/packages/main/cypress/specs/visuals/Select.cy.tsx
+++ b/packages/main/cypress/specs/visuals/Select.cy.tsx
@@ -1,5 +1,6 @@
 import Select from "../../../src/Select.js";
 import Option from "../../../src/Option.js";
+import OptionCustom from "../../../src/OptionCustom.js";
 
 describe("Select visual", () => {
 	it("basic state", () => {
@@ -70,6 +71,33 @@ describe("Select visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Negative — dropdown open", () => {
+		cy.mount(
+			<Select valueState="Negative">
+				<span slot="valueStateMessage">Invalid selection</span>
+				<Option>Apple</Option>
+				<Option>Banana</Option>
+			</Select>
+		);
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Negative — focused, dropdown closed", () => {
+		cy.mount(
+			<Select valueState="Negative">
+				<span slot="valueStateMessage">Invalid selection</span>
+				<Option>Apple</Option>
+				<Option>Banana</Option>
+			</Select>
+		);
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.realPress("Escape");
+		cy.screenshot();
+	});
+
 	it("value state — Critical", () => {
 		cy.mount(
 			<Select valueState="Critical">
@@ -81,6 +109,33 @@ describe("Select visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Critical — dropdown open", () => {
+		cy.mount(
+			<Select valueState="Critical">
+				<span slot="valueStateMessage">Please review</span>
+				<Option>Apple</Option>
+				<Option>Banana</Option>
+			</Select>
+		);
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Critical — focused, dropdown closed", () => {
+		cy.mount(
+			<Select valueState="Critical">
+				<span slot="valueStateMessage">Please review</span>
+				<Option>Apple</Option>
+				<Option>Banana</Option>
+			</Select>
+		);
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.realPress("Escape");
+		cy.screenshot();
+	});
+
 	it("value state — Positive", () => {
 		cy.mount(
 			<Select valueState="Positive">
@@ -92,6 +147,33 @@ describe("Select visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Positive — dropdown open", () => {
+		cy.mount(
+			<Select valueState="Positive">
+				<span slot="valueStateMessage">Valid selection</span>
+				<Option>Apple</Option>
+				<Option>Banana</Option>
+			</Select>
+		);
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Positive — focused, dropdown closed", () => {
+		cy.mount(
+			<Select valueState="Positive">
+				<span slot="valueStateMessage">Valid selection</span>
+				<Option>Apple</Option>
+				<Option>Banana</Option>
+			</Select>
+		);
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.realPress("Escape");
+		cy.screenshot();
+	});
+
 	it("value state — Information", () => {
 		cy.mount(
 			<Select valueState="Information">
@@ -103,6 +185,33 @@ describe("Select visual", () => {
 		cy.screenshot();
 	});
 
+	it("value state — Information — dropdown open", () => {
+		cy.mount(
+			<Select valueState="Information">
+				<span slot="valueStateMessage">Select one option</span>
+				<Option>Apple</Option>
+				<Option>Banana</Option>
+			</Select>
+		);
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Information — focused, dropdown closed", () => {
+		cy.mount(
+			<Select valueState="Information">
+				<span slot="valueStateMessage">Select one option</span>
+				<Option>Apple</Option>
+				<Option>Banana</Option>
+			</Select>
+		);
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.realPress("Escape");
+		cy.screenshot();
+	});
+
 	it("compact mode", () => {
 		cy.mount(
 			<div data-ui5-compact-size>
@@ -115,4 +224,92 @@ describe("Select visual", () => {
 		);
 		cy.screenshot();
 	});
+
+	// Option
+	it("option with icon — dropdown open", () => {
+		cy.mount(
+			<Select>
+				<Option icon="laptop">Laptop</Option>
+				<Option icon="iphone" selected>Phone</Option>
+				<Option icon="monitor-payments">Monitor</Option>
+			</Select>
+		);
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("option with additional text — dropdown open", () => {
+		cy.mount(
+			<Select>
+				<Option additionalText="EUR">Euro</Option>
+				<Option additionalText="USD" selected>US Dollar</Option>
+				<Option additionalText="GBP">British Pound</Option>
+			</Select>
+		);
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("disabled option in dropdown", () => {
+		cy.mount(
+			<Select>
+				<Option>Apple</Option>
+				<Option disabled>Banana (unavailable)</Option>
+				<Option selected>Cherry</Option>
+			</Select>
+		);
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	// OptionCustom
+	it("custom options — dropdown open", () => {
+		cy.mount(
+			<Select>
+				<OptionCustom displayText="Option 1">
+					<div style={{ padding: "4px 8px" }}>Option 1</div>
+				</OptionCustom>
+				<OptionCustom displayText="Option 2" selected>
+					<div style={{ padding: "4px 8px" }}>Option 2</div>
+				</OptionCustom>
+				<OptionCustom displayText="Option 3">
+					<div style={{ padding: "4px 8px" }}>Option 3</div>
+				</OptionCustom>
+			</Select>
+		);
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("custom options with rich content — dropdown open", () => {
+		cy.mount(
+			<Select>
+				<OptionCustom displayText="John Doe">
+					<div style={{ display: "flex", alignItems: "center", gap: "8px", padding: "4px 8px" }}>
+						<div style={{ width: "32px", height: "32px", borderRadius: "50%", background: "#0070f2", flexShrink: "0" }} />
+						<div>
+							<div style={{ fontWeight: "bold", fontSize: "14px" }}>John Doe</div>
+							<div style={{ fontSize: "12px", color: "#666" }}>Developer</div>
+						</div>
+					</div>
+				</OptionCustom>
+				<OptionCustom displayText="Jane Smith" selected>
+					<div style={{ display: "flex", alignItems: "center", gap: "8px", padding: "4px 8px" }}>
+						<div style={{ width: "32px", height: "32px", borderRadius: "50%", background: "#e9730c", flexShrink: "0" }} />
+						<div>
+							<div style={{ fontWeight: "bold", fontSize: "14px" }}>Jane Smith</div>
+							<div style={{ fontSize: "12px", color: "#666" }}>Designer</div>
+						</div>
+					</div>
+				</OptionCustom>
+			</Select>
+		);
+		cy.get("[ui5-select]").realClick();
+		cy.get("[ui5-select]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
 });
diff --git a/packages/main/cypress/specs/visuals/Slider.cy.tsx b/packages/main/cypress/specs/visuals/Slider.cy.tsx
new file mode 100644
index 000000000000..7d059bf0a50e
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Slider.cy.tsx
@@ -0,0 +1,52 @@
+import Slider from "../../../src/Slider.js";
+
+describe("Slider visual", () => {
+	beforeEach(() => {
+		cy.get("[data-cy-root]").invoke("css", "padding", "50px 100px");
+	});
+
+	it("basic state", () => {
+		cy.mount(<Slider min={0} max={100} value={0} />);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size style={{ padding: "20px" }}>
+				<Slider min={0} max={100} value={50} />
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("value at 50%", () => {
+		cy.mount(<Slider min={0} max={100} value={50} />);
+		cy.screenshot();
+	});
+
+	it("value at 100%", () => {
+		cy.mount(<Slider min={0} max={100} value={100} />);
+		cy.screenshot();
+	});
+
+	it("with tickmarks", () => {
+		cy.mount(<Slider min={0} max={10} step={1} value={5} showTickmarks />);
+		cy.screenshot();
+	});
+
+	it("with tickmarks and label interval", () => {
+		cy.mount(<Slider min={0} max={20} step={2} value={8} showTickmarks labelInterval={2} />);
+		cy.screenshot();
+	});
+
+	it("with tooltip", () => {
+		cy.mount(<Slider min={0} max={100} value={40} showTooltip />);
+		cy.get("[ui5-slider]").shadow().find("[ui5-slider-handle]").realClick();
+		cy.screenshot();
+	});
+
+	it("disabled", () => {
+		cy.mount(<Slider min={0} max={100} value={60} disabled />);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/SpecialCalendarDate.cy.tsx b/packages/main/cypress/specs/visuals/SpecialCalendarDate.cy.tsx
new file mode 100644
index 000000000000..822890e55b98
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/SpecialCalendarDate.cy.tsx
@@ -0,0 +1,36 @@
+import Calendar from "../../../src/Calendar.js";
+import SpecialCalendarDate from "../../../src/SpecialCalendarDate.js";
+
+describe("SpecialCalendarDate visual", () => {
+	it("Working type", () => {
+		cy.mount(
+			<Calendar formatPattern="MMddyyyy" timestamp={1704067200}>
+				<SpecialCalendarDate slot="specialDates" value="01012024" type="Working" />
+				<SpecialCalendarDate slot="specialDates" value="01032024" type="Working" />
+			</Calendar>
+		);
+		cy.screenshot();
+	});
+
+	it("NonWorking type", () => {
+		cy.mount(
+			<Calendar formatPattern="MMddyyyy" timestamp={1704067200}>
+				<SpecialCalendarDate slot="specialDates" value="01012024" type="NonWorking" />
+				<SpecialCalendarDate slot="specialDates" value="01072024" type="NonWorking" />
+			</Calendar>
+		);
+		cy.screenshot();
+	});
+
+	it("multiple types together", () => {
+		cy.mount(
+			<Calendar formatPattern="MMddyyyy" timestamp={1704067200}>
+				<SpecialCalendarDate slot="specialDates" value="01012024" type="Type01" />
+				<SpecialCalendarDate slot="specialDates" value="01082024" type="Type02" />
+				<SpecialCalendarDate slot="specialDates" value="01152024" type="Working" />
+				<SpecialCalendarDate slot="specialDates" value="01202024" type="NonWorking" />
+			</Calendar>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/SplitButton.cy.tsx b/packages/main/cypress/specs/visuals/SplitButton.cy.tsx
new file mode 100644
index 000000000000..a562fcdf1f5a
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/SplitButton.cy.tsx
@@ -0,0 +1,66 @@
+import SplitButton from "../../../src/SplitButton.js";
+
+describe("SplitButton visual", () => {
+	it("design — Default", () => {
+		cy.mount(<SplitButton>Default</SplitButton>);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<SplitButton>Default</SplitButton>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("design — Emphasized", () => {
+		cy.mount(<SplitButton design="Emphasized">Emphasized</SplitButton>);
+		cy.screenshot();
+	});
+
+	it("design — Positive", () => {
+		cy.mount(<SplitButton design="Positive">Positive</SplitButton>);
+		cy.screenshot();
+	});
+
+	it("design — Negative", () => {
+		cy.mount(<SplitButton design="Negative">Negative</SplitButton>);
+		cy.screenshot();
+	});
+
+	it("design — Transparent", () => {
+		cy.mount(<SplitButton design="Transparent">Transparent</SplitButton>);
+		cy.screenshot();
+	});
+
+	it("design — Attention", () => {
+		cy.mount(<SplitButton design="Attention">Attention</SplitButton>);
+		cy.screenshot();
+	});
+
+	it("with icon", () => {
+		cy.mount(<SplitButton icon="add">Add Item</SplitButton>);
+		cy.screenshot();
+	});
+
+	it("disabled", () => {
+		cy.mount(<SplitButton disabled>Disabled</SplitButton>);
+		cy.screenshot();
+	});
+
+	it("all designs in a row", () => {
+		cy.mount(
+			<div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+				<SplitButton>Default</SplitButton>
+				<SplitButton design="Emphasized">Emphasized</SplitButton>
+				<SplitButton design="Positive">Positive</SplitButton>
+				<SplitButton design="Negative">Negative</SplitButton>
+				<SplitButton design="Transparent">Transparent</SplitButton>
+				<SplitButton design="Attention">Attention</SplitButton>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/StepInput.cy.tsx b/packages/main/cypress/specs/visuals/StepInput.cy.tsx
new file mode 100644
index 000000000000..7c3c5ab448de
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/StepInput.cy.tsx
@@ -0,0 +1,67 @@
+import StepInput from "../../../src/StepInput.js";
+
+describe("StepInput visual", () => {
+	it("basic state", () => {
+		cy.mount(<StepInput value={5} />);
+		cy.screenshot();
+	});
+
+	it("with placeholder", () => {
+		cy.mount(<StepInput placeholder="Enter number" />);
+		cy.screenshot();
+	});
+
+	it("at minimum value", () => {
+		cy.mount(<StepInput min={0} max={10} value={0} />);
+		cy.screenshot();
+	});
+
+	it("at maximum value", () => {
+		cy.mount(<StepInput min={0} max={10} value={10} />);
+		cy.screenshot();
+	});
+
+	it("with decimal precision", () => {
+		cy.mount(<StepInput value={3.14} valuePrecision={2} step={0.01} />);
+		cy.screenshot();
+	});
+
+	it("value state — Negative", () => {
+		cy.mount(<StepInput value={5} valueState="Negative" />);
+		cy.screenshot();
+	});
+
+	it("value state — Critical", () => {
+		cy.mount(<StepInput value={5} valueState="Critical" />);
+		cy.screenshot();
+	});
+
+	it("value state — Positive", () => {
+		cy.mount(<StepInput value={5} valueState="Positive" />);
+		cy.screenshot();
+	});
+
+	it("value state — Information", () => {
+		cy.mount(<StepInput value={5} valueState="Information" />);
+		cy.screenshot();
+	});
+
+	it("disabled", () => {
+		cy.mount(<StepInput value={5} disabled />);
+		cy.screenshot();
+	});
+
+	it("readonly", () => {
+		cy.mount(<StepInput value={5} readonly />);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<StepInput value={5} />
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/SuggestionItem.cy.tsx b/packages/main/cypress/specs/visuals/SuggestionItem.cy.tsx
new file mode 100644
index 000000000000..5024660ca5cf
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/SuggestionItem.cy.tsx
@@ -0,0 +1,47 @@
+import Input from "../../../src/Input.js";
+import SuggestionItem from "../../../src/SuggestionItem.js";
+
+describe("SuggestionItem visual", () => {
+	it("suggestions dropdown open", () => {
+		cy.mount(
+			<Input showSuggestions>
+				<SuggestionItem text="Iron" />
+				<SuggestionItem text="Gold" />
+				<SuggestionItem text="Silver" />
+			</Input>
+		);
+		cy.get("[ui5-input]").realClick();
+		cy.realType("i");
+		cy.get("[ui5-input]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("with additionalText", () => {
+		cy.mount(
+			<Input showSuggestions>
+				<SuggestionItem text="Iron" additionalText="Fe" />
+				<SuggestionItem text="Gold" additionalText="Au" />
+				<SuggestionItem text="Silver" additionalText="Ag" />
+			</Input>
+		);
+		cy.get("[ui5-input]").realClick();
+		cy.realType("i");
+		cy.get("[ui5-input]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("first item focused via arrow key", () => {
+		cy.mount(
+			<Input showSuggestions>
+				<SuggestionItem text="Iron" />
+				<SuggestionItem text="Gold" />
+				<SuggestionItem text="Silver" />
+			</Input>
+		);
+		cy.get("[ui5-input]").realClick();
+		cy.realType("i");
+		cy.get("[ui5-input]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.realPress("ArrowDown");
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/SuggestionItemCustom.cy.tsx b/packages/main/cypress/specs/visuals/SuggestionItemCustom.cy.tsx
new file mode 100644
index 000000000000..dbb6382bde1e
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/SuggestionItemCustom.cy.tsx
@@ -0,0 +1,33 @@
+import Input from "../../../src/Input.js";
+import SuggestionItemCustom from "../../../src/SuggestionItemCustom.js";
+
+describe("SuggestionItemCustom visual", () => {
+	it("suggestions dropdown open", () => {
+		cy.mount(
+			<Input showSuggestions>
+				<SuggestionItemCustom text="Item 1">Item 1</SuggestionItemCustom>
+				<SuggestionItemCustom text="Item 2">Item 2</SuggestionItemCustom>
+				<SuggestionItemCustom text="Item 3">Item 3</SuggestionItemCustom>
+			</Input>
+		);
+		cy.get("[ui5-input]").realClick();
+		cy.realType("i");
+		cy.get("[ui5-input]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("first item focused via arrow key", () => {
+		cy.mount(
+			<Input showSuggestions>
+				<SuggestionItemCustom text="Item 1">Item 1</SuggestionItemCustom>
+				<SuggestionItemCustom text="Item 2">Item 2</SuggestionItemCustom>
+				<SuggestionItemCustom text="Item 3">Item 3</SuggestionItemCustom>
+			</Input>
+		);
+		cy.get("[ui5-input]").realClick();
+		cy.realType("i");
+		cy.get("[ui5-input]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.realPress("ArrowDown");
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/SuggestionItemGroup.cy.tsx b/packages/main/cypress/specs/visuals/SuggestionItemGroup.cy.tsx
new file mode 100644
index 000000000000..93f1c8d5ffef
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/SuggestionItemGroup.cy.tsx
@@ -0,0 +1,46 @@
+import Input from "../../../src/Input.js";
+import SuggestionItem from "../../../src/SuggestionItem.js";
+import SuggestionItemGroup from "../../../src/SuggestionItemGroup.js";
+
+describe("SuggestionItemGroup visual", () => {
+	it("grouped suggestions dropdown open", () => {
+		cy.mount(
+			<Input showSuggestions>
+				<SuggestionItemGroup headerText="Group 1">
+					<SuggestionItem text="Item 1" />
+					<SuggestionItem text="Item 2" />
+					<SuggestionItem text="Item 3" />
+				</SuggestionItemGroup>
+				<SuggestionItemGroup headerText="Group 2">
+					<SuggestionItem text="Item 4" />
+					<SuggestionItem text="Item 5" />
+					<SuggestionItem text="Item 6" />
+				</SuggestionItemGroup>
+			</Input>
+		);
+		cy.get("[ui5-input]").realClick();
+		cy.realType("i");
+		cy.get("[ui5-input]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("item focused via arrow key", () => {
+		cy.mount(
+			<Input showSuggestions>
+				<SuggestionItemGroup headerText="Group 1">
+					<SuggestionItem text="Item 1" />
+					<SuggestionItem text="Item 2" />
+				</SuggestionItemGroup>
+				<SuggestionItemGroup headerText="Group 2">
+					<SuggestionItem text="Item 3" />
+					<SuggestionItem text="Item 4" />
+				</SuggestionItemGroup>
+			</Input>
+		);
+		cy.get("[ui5-input]").realClick();
+		cy.realType("i");
+		cy.get("[ui5-input]").shadow().find("ui5-responsive-popover").ui5ResponsivePopoverOpened();
+		cy.realPress("ArrowDown");
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/TabContainer.cy.tsx b/packages/main/cypress/specs/visuals/TabContainer.cy.tsx
new file mode 100644
index 000000000000..7a3cf95e6cc4
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/TabContainer.cy.tsx
@@ -0,0 +1,375 @@
+import TabContainer from "../../../src/TabContainer.js";
+import Tab from "../../../src/Tab.js";
+import TabSeparator from "../../../src/TabSeparator.js";
+import Button from "../../../src/Button.js";
+import "@ui5/webcomponents-icons/dist/employee.js";
+import "@ui5/webcomponents-icons/dist/calendar.js";
+import "@ui5/webcomponents-icons/dist/settings.js";
+import "@ui5/webcomponents-icons/dist/menu2.js";
+
+describe("TabContainer visual", () => {
+	it("basic — first tab selected by default", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Products">Products content</Tab>
+				<Tab text="Availability">Availability content</Tab>
+				<Tab text="Reviews">Reviews content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("second tab selected", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Products">Products content</Tab>
+				<Tab text="Availability" selected>Availability content</Tab>
+				<Tab text="Reviews">Reviews content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("with icons", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Employees" icon="sap-icon://employee" selected>Employees content</Tab>
+				<Tab text="Calendar" icon="sap-icon://calendar">Calendar content</Tab>
+				<Tab text="Settings" icon="sap-icon://settings">Settings content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("icon-only tabs", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab icon="sap-icon://employee" selected>Content 1</Tab>
+				<Tab icon="sap-icon://calendar">Content 2</Tab>
+				<Tab icon="sap-icon://settings">Content 3</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("tab designs — Positive, Negative, Critical", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Default" selected>Default content</Tab>
+				<Tab text="Positive" design="Positive">Positive content</Tab>
+				<Tab text="Negative" design="Negative">Negative content</Tab>
+				<Tab text="Critical" design="Critical">Critical content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("with disabled tab", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Active" selected>Active content</Tab>
+				<Tab text="Disabled" disabled>Disabled content</Tab>
+				<Tab text="Also Active">Also Active content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("with additional text", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Products" additionalText="42" selected>Content</Tab>
+				<Tab text="Reviews" additionalText="8">Content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("overflow — end overflow mode", () => {
+		cy.mount(
+			<TabContainer overflowMode="End" style={{ width: "400px" }}>
+				<Tab text="One" selected>One</Tab>
+				<Tab text="Two">Two</Tab>
+				<Tab text="Three">Three</Tab>
+				<Tab text="Four">Four</Tab>
+				<Tab text="Five">Five</Tab>
+				<Tab text="Six">Six</Tab>
+				<Tab text="Seven">Seven</Tab>
+				<Tab text="Eight">Eight</Tab>
+				<Tab text="Nine">Nine</Tab>
+				<Tab text="Ten">Ten</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("overflow — end overflow popover open", () => {
+		cy.mount(
+			<TabContainer overflowMode="End" style={{ width: "400px" }}>
+				<Tab text="One" selected>One</Tab>
+				<Tab text="Two">Two</Tab>
+				<Tab text="Three">Three</Tab>
+				<Tab text="Four">Four</Tab>
+				<Tab text="Five">Five</Tab>
+				<Tab text="Six">Six</Tab>
+				<Tab text="Seven">Seven</Tab>
+				<Tab text="Eight">Eight</Tab>
+				<Tab text="Nine">Nine</Tab>
+				<Tab text="Ten">Ten</Tab>
+			</TabContainer>
+		);
+		cy.get("[ui5-tabcontainer]").ui5TabContainerOpenEndOverflow();
+		cy.screenshot();
+	});
+
+	it("overflow — end overflow popover open with nested tabs", () => {
+		cy.mount(
+			<TabContainer overflowMode="End" style={{ width: "300px" }}>
+				<Tab text="One" selected>One</Tab>
+				<Tab text="Two">
+					<Tab slot="items" text="2.1">Two One</Tab>
+					<Tab slot="items" text="2.2">Two Two</Tab>
+				</Tab>
+				<Tab text="Three">
+					<Tab slot="items" text="3.1">
+						<Tab slot="items" text="3.1.1">Three One One</Tab>
+					</Tab>
+				</Tab>
+				<Tab text="Four">Four</Tab>
+				<Tab text="Five">Five</Tab>
+				<Tab text="Six">Six</Tab>
+				<Tab text="Seven">Seven</Tab>
+			</TabContainer>
+		);
+		cy.get("[ui5-tabcontainer]").ui5TabContainerOpenEndOverflow();
+		cy.screenshot();
+	});
+
+	it("overflow — StartAndEnd mode", () => {
+		cy.mount(
+			<TabContainer id="tcStartAndEnd" overflowMode="StartAndEnd" style={{ width: "400px" }}>
+				<Tab text="One">One</Tab>
+				<Tab text="Two">Two</Tab>
+				<Tab text="Three">Three</Tab>
+				<Tab text="Four">Four</Tab>
+				<Tab text="Five">Five</Tab>
+				<Tab text="Six">Six</Tab>
+				<Tab text="Seven">Seven</Tab>
+				<Tab text="Eight">Eight</Tab>
+				<Tab text="Nine">Nine</Tab>
+				<Tab text="Ten" selected>Ten</Tab>
+				<Tab text="Eleven">Eleven</Tab>
+				<Tab text="Twelve">Twelve</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("overflow — StartAndEnd start overflow popover open", () => {
+		cy.mount(
+			<TabContainer id="tcStartAndEnd" overflowMode="StartAndEnd" style={{ width: "400px" }}>
+				<Tab text="One">One</Tab>
+				<Tab text="Two">Two</Tab>
+				<Tab text="Three">Three</Tab>
+				<Tab text="Four">Four</Tab>
+				<Tab text="Five">Five</Tab>
+				<Tab text="Six">Six</Tab>
+				<Tab text="Seven">Seven</Tab>
+				<Tab text="Eight">Eight</Tab>
+				<Tab text="Nine">Nine</Tab>
+				<Tab text="Ten" selected>Ten</Tab>
+				<Tab text="Eleven">Eleven</Tab>
+				<Tab text="Twelve">Twelve</Tab>
+			</TabContainer>
+		);
+		cy.get("#tcStartAndEnd").shadow().find("[data-ui5-stable='overflow-start']").should("be.visible").click();
+		cy.get("#tcStartAndEnd").shadow().find(".ui5-tab-container-responsive-popover").should("be.visible");
+		cy.screenshot();
+	});
+
+	it("overflow — custom overflow buttons", () => {
+		cy.mount(
+			<TabContainer overflowMode="StartAndEnd" style={{ width: "400px" }}>
+				<Button slot="startOverflowButton">Start</Button>
+				<Button slot="overflowButton">End</Button>
+				<Tab text="One">One</Tab>
+				<Tab text="Two">Two</Tab>
+				<Tab text="Three">Three</Tab>
+				<Tab text="Four">Four</Tab>
+				<Tab text="Five">Five</Tab>
+				<Tab text="Six">Six</Tab>
+				<Tab text="Seven">Seven</Tab>
+				<Tab text="Eight">Eight</Tab>
+				<Tab text="Nine">Nine</Tab>
+				<Tab text="Ten" selected>Ten</Tab>
+				<Tab text="Eleven">Eleven</Tab>
+				<Tab text="Twelve">Twelve</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("nested tabs — strip with expand arrows", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="One" selected>One content</Tab>
+				<Tab text="Two">Two content
+					<Tab slot="items" text="2.1">Two One</Tab>
+					<Tab slot="items" text="2.2">Two Two</Tab>
+				</Tab>
+				<Tab text="Three">Three content
+					<Tab slot="items" icon="sap-icon://menu2" text="3.1">
+						<Tab slot="items" icon="sap-icon://menu2" text="3.1.1">Three One One</Tab>
+					</Tab>
+				</Tab>
+				<Tab text="Four">Four content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("nested tabs — sub-tab list open", () => {
+		cy.mount(
+			<TabContainer id="tcNested">
+				<Tab text="One" selected>One content</Tab>
+				<Tab text="Two">Two content
+					<Tab slot="items" text="2.1">Two One</Tab>
+					<Tab slot="items" text="2.2">Two Two</Tab>
+				</Tab>
+				<Tab text="Three">Three content
+					<Tab slot="items" icon="sap-icon://menu2" text="3.1">
+						<Tab slot="items" icon="sap-icon://menu2" text="3.1.1">Three One One</Tab>
+					</Tab>
+				</Tab>
+				<Tab text="Four">Four content</Tab>
+			</TabContainer>
+		);
+		cy.get("#tcNested").shadow().find(".ui5-tab-expand-button [ui5-button]").first().realClick();
+		cy.get("#tcNested").shadow().find(".ui5-tab-container-responsive-popover").should("be.visible");
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<TabContainer>
+					<Tab text="Products" selected>Products content</Tab>
+					<Tab text="Availability">Availability content</Tab>
+					<Tab text="Reviews">Reviews content</Tab>
+				</TabContainer>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
+
+describe("Tab visual", () => {
+	it("unselected tab", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Unselected">Content</Tab>
+				<Tab text="Also Unselected" selected>Content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("selected tab", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Selected" selected>Selected content</Tab>
+				<Tab text="Other">Other content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("disabled tab", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Active" selected>Active content</Tab>
+				<Tab text="Disabled" disabled>Disabled content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("tab with icon and text", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Employees" icon="sap-icon://employee" selected>Content</Tab>
+				<Tab text="Calendar" icon="sap-icon://calendar">Content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("tab design — Positive", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Positive" design="Positive" selected>Content</Tab>
+				<Tab text="Default">Content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("tab design — Negative", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Negative" design="Negative" selected>Content</Tab>
+				<Tab text="Default">Content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("tab design — Critical", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Critical" design="Critical" selected>Content</Tab>
+				<Tab text="Default">Content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("tab with additional text", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="Products" additionalText="42" selected>Content</Tab>
+				<Tab text="Reviews" additionalText="8">Content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+});
+
+describe("TabSeparator visual", () => {
+	it("single separator between tabs", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="One" selected>One content</Tab>
+				<Tab text="Two">Two content</Tab>
+				<TabSeparator />
+				<Tab text="Three">Three content</Tab>
+				<Tab text="Four">Four content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+
+	it("multiple separators", () => {
+		cy.mount(
+			<TabContainer>
+				<Tab text="One" selected>One content</Tab>
+				<TabSeparator />
+				<Tab text="Two">Two content</Tab>
+				<Tab text="Three">Three content</Tab>
+				<TabSeparator />
+				<Tab text="Four">Four content</Tab>
+			</TabContainer>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Text.cy.tsx b/packages/main/cypress/specs/visuals/Text.cy.tsx
new file mode 100644
index 000000000000..8d4bc9608c31
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Text.cy.tsx
@@ -0,0 +1,94 @@
+import Text from "../../../src/Text.js";
+
+const LOREM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet";
+
+describe("Text visual", () => {
+	it("basic state", () => {
+		cy.mount(<Text>Simple text</Text>);
+		cy.screenshot();
+	});
+
+	it("long wrapping text — full width", () => {
+		cy.mount(<Text>{LOREM}</Text>);
+		cy.screenshot();
+	});
+
+	it("long wrapping text — narrow (6rem)", () => {
+		cy.mount(
+			<div style={{ width: "6rem" }}>
+				<Text>{LOREM}</Text>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("maxLines = 1 — full width", () => {
+		cy.mount(<Text maxLines={1}>{LOREM}</Text>);
+		cy.screenshot();
+	});
+
+	it("maxLines = 1 — narrow (6rem)", () => {
+		cy.mount(
+			<div style={{ width: "6rem" }}>
+				<Text maxLines={1}>{LOREM}</Text>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("maxLines = 2 — full width", () => {
+		cy.mount(<Text maxLines={2}>{LOREM}</Text>);
+		cy.screenshot();
+	});
+
+	it("maxLines = 2 — narrow (6rem)", () => {
+		cy.mount(
+			<div style={{ width: "6rem" }}>
+				<Text maxLines={2}>{LOREM}</Text>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("maxLines = 3 — full width", () => {
+		cy.mount(<Text maxLines={3}>{LOREM}</Text>);
+		cy.screenshot();
+	});
+
+	it("maxLines = 3 — narrow (6rem)", () => {
+		cy.mount(
+			<div style={{ width: "6rem" }}>
+				<Text maxLines={3}>{LOREM}</Text>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("maxLines = 4 — full width", () => {
+		cy.mount(<Text maxLines={4}>{LOREM}</Text>);
+		cy.screenshot();
+	});
+
+	it("maxLines = 4 — narrow (6rem)", () => {
+		cy.mount(
+			<div style={{ width: "6rem" }}>
+				<Text maxLines={4}>{LOREM}</Text>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("empty indicator mode On", () => {
+		cy.mount(<Text emptyIndicatorMode="On"></Text>);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Text>{LOREM}</Text>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/TextArea.cy.tsx b/packages/main/cypress/specs/visuals/TextArea.cy.tsx
new file mode 100644
index 000000000000..818bd901a2cf
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/TextArea.cy.tsx
@@ -0,0 +1,134 @@
+import TextArea from "../../../src/TextArea.js";
+
+describe("TextArea visual", () => {
+	it("basic state", () => {
+		cy.mount(<TextArea />);
+		cy.screenshot();
+	});
+
+	it("with placeholder", () => {
+		cy.mount(<TextArea placeholder="Enter text here..." />);
+		cy.screenshot();
+	});
+
+	it("with value", () => {
+		cy.mount(<TextArea value="This is some text content in the text area." />);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<TextArea value="Compact mode text area" />
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("disabled", () => {
+		cy.mount(<TextArea disabled value="Disabled text area" />);
+		cy.screenshot();
+	});
+
+	it("readonly", () => {
+		cy.mount(<TextArea readonly value="Readonly text area" />);
+		cy.screenshot();
+	});
+
+	it("focused", () => {
+		cy.mount(<TextArea placeholder="Focus me" />);
+		cy.get("[ui5-textarea]").shadow().find("textarea").realClick();
+		cy.screenshot();
+	});
+
+	it("growing with multiline content", () => {
+		cy.mount(<TextArea growing value={"Line 1\nLine 2\nLine 3\nLine 4\nLine 5"} />);
+		cy.screenshot();
+	});
+
+	it("showExceededText — within limit", () => {
+		cy.mount(<TextArea maxlength={50} showExceededText value="Short text" />);
+		cy.screenshot();
+	});
+
+	it("showExceededText — over limit", () => {
+		cy.mount(<TextArea maxlength={10} showExceededText value="This text exceeds the maximum length allowed" />);
+		cy.screenshot();
+	});
+
+	it("value state — Negative", () => {
+		cy.mount(
+			<TextArea valueState="Negative">
+				<div slot="valueStateMessage">Error message</div>
+			</TextArea>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Negative — focused", () => {
+		cy.mount(
+			<TextArea valueState="Negative">
+				<div slot="valueStateMessage">Error message</div>
+			</TextArea>
+		);
+		cy.get("[ui5-textarea]").shadow().find("textarea").realClick();
+		cy.screenshot();
+	});
+
+	it("value state — Critical", () => {
+		cy.mount(
+			<TextArea valueState="Critical">
+				<div slot="valueStateMessage">Warning message</div>
+			</TextArea>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Critical — focused", () => {
+		cy.mount(
+			<TextArea valueState="Critical">
+				<div slot="valueStateMessage">Warning message</div>
+			</TextArea>
+		);
+		cy.get("[ui5-textarea]").shadow().find("textarea").realClick();
+		cy.screenshot();
+	});
+
+	it("value state — Positive", () => {
+		cy.mount(
+			<TextArea valueState="Positive">
+				<div slot="valueStateMessage">Success message</div>
+			</TextArea>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Positive — focused", () => {
+		cy.mount(
+			<TextArea valueState="Positive">
+				<div slot="valueStateMessage">Success message</div>
+			</TextArea>
+		);
+		cy.get("[ui5-textarea]").shadow().find("textarea").realClick();
+		cy.screenshot();
+	});
+
+	it("value state — Information", () => {
+		cy.mount(
+			<TextArea valueState="Information">
+				<div slot="valueStateMessage">Info message</div>
+			</TextArea>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Information — focused", () => {
+		cy.mount(
+			<TextArea valueState="Information">
+				<div slot="valueStateMessage">Info message</div>
+			</TextArea>
+		);
+		cy.get("[ui5-textarea]").shadow().find("textarea").realClick();
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/TimePicker.cy.tsx b/packages/main/cypress/specs/visuals/TimePicker.cy.tsx
new file mode 100644
index 000000000000..ef2fa5e4b7aa
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/TimePicker.cy.tsx
@@ -0,0 +1,127 @@
+import TimePicker from "../../../src/TimePicker.js";
+
+describe("TimePicker visual", () => {
+	beforeEach(() => {
+		cy.clock(new Date("Jan 15, 2024").getTime(), ["Date"]);
+	});
+
+	it("basic state", () => {
+		cy.mount(<TimePicker />);
+		cy.screenshot();
+	});
+
+	it("with value", () => {
+		cy.mount(<TimePicker value="11:30:00" formatPattern="HH:mm:ss" />);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<TimePicker value="09:00:00" formatPattern="HH:mm:ss" />
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("disabled", () => {
+		cy.mount(<TimePicker disabled value="08:00:00" />);
+		cy.screenshot();
+	});
+
+	it("readonly", () => {
+		cy.mount(<TimePicker readonly value="08:00:00" />);
+		cy.screenshot();
+	});
+
+	it("picker open — clocks visible", () => {
+		cy.mount(<TimePicker value="11:30:00" formatPattern="HH:mm:ss" />);
+		cy.get("[ui5-time-picker]").ui5TimePickerValueHelpIconPress();
+		cy.get("[ui5-time-picker]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Negative", () => {
+		cy.mount(<TimePicker valueState="Negative" />);
+		cy.screenshot();
+	});
+
+	it("value state — Negative — picker open", () => {
+		cy.mount(<TimePicker valueState="Negative" value="11:30:00" formatPattern="HH:mm:ss" />);
+		cy.get("[ui5-time-picker]").ui5TimePickerValueHelpIconPress();
+		cy.get("[ui5-time-picker]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Negative — focused", () => {
+		cy.mount(<TimePicker valueState="Negative" />);
+		cy.get("[ui5-time-picker]")
+			.shadow().find("[ui5-datetime-input]")
+			.shadow().find("input")
+			.realClick();
+		cy.screenshot();
+	});
+
+	it("value state — Critical", () => {
+		cy.mount(<TimePicker valueState="Critical" />);
+		cy.screenshot();
+	});
+
+	it("value state — Critical — picker open", () => {
+		cy.mount(<TimePicker valueState="Critical" value="11:30:00" formatPattern="HH:mm:ss" />);
+		cy.get("[ui5-time-picker]").ui5TimePickerValueHelpIconPress();
+		cy.get("[ui5-time-picker]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Critical — focused", () => {
+		cy.mount(<TimePicker valueState="Critical" />);
+		cy.get("[ui5-time-picker]")
+			.shadow().find("[ui5-datetime-input]")
+			.shadow().find("input")
+			.realClick();
+		cy.screenshot();
+	});
+
+	it("value state — Positive", () => {
+		cy.mount(<TimePicker valueState="Positive" />);
+		cy.screenshot();
+	});
+
+	it("value state — Positive — picker open", () => {
+		cy.mount(<TimePicker valueState="Positive" value="11:30:00" formatPattern="HH:mm:ss" />);
+		cy.get("[ui5-time-picker]").ui5TimePickerValueHelpIconPress();
+		cy.get("[ui5-time-picker]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Positive — focused", () => {
+		cy.mount(<TimePicker valueState="Positive" />);
+		cy.get("[ui5-time-picker]")
+			.shadow().find("[ui5-datetime-input]")
+			.shadow().find("input")
+			.realClick();
+		cy.screenshot();
+	});
+
+	it("value state — Information", () => {
+		cy.mount(<TimePicker valueState="Information" />);
+		cy.screenshot();
+	});
+
+	it("value state — Information — picker open", () => {
+		cy.mount(<TimePicker valueState="Information" value="11:30:00" formatPattern="HH:mm:ss" />);
+		cy.get("[ui5-time-picker]").ui5TimePickerValueHelpIconPress();
+		cy.get("[ui5-time-picker]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("value state — Information — focused", () => {
+		cy.mount(<TimePicker valueState="Information" />);
+		cy.get("[ui5-time-picker]")
+			.shadow().find("[ui5-datetime-input]")
+			.shadow().find("input")
+			.realClick();
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Title.cy.tsx b/packages/main/cypress/specs/visuals/Title.cy.tsx
new file mode 100644
index 000000000000..a5ef8a308e97
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Title.cy.tsx
@@ -0,0 +1,68 @@
+import Title from "../../../src/Title.js";
+
+describe("Title visual", () => {
+	it("all heading levels", () => {
+		cy.mount(
+			<div>
+				<Title level="H1">Title H1</Title>
+				<Title level="H2">Title H2</Title>
+				<Title level="H3">Title H3</Title>
+				<Title level="H4">Title H4</Title>
+				<Title level="H5">Title H5</Title>
+				<Title level="H6">Title H6</Title>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("all size variants", () => {
+		cy.mount(
+			<div>
+				<Title size="H1">Title size H1</Title>
+				<Title size="H2">Title size H2</Title>
+				<Title size="H3">Title size H3</Title>
+				<Title size="H4">Title size H4</Title>
+				<Title size="H5">Title size H5</Title>
+				<Title size="H6">Title size H6</Title>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("default level and size", () => {
+		cy.mount(<Title>Default Title</Title>);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Title level="H1">Title H1</Title>
+				<Title level="H2">Title H2</Title>
+				<Title level="H3">Title H3</Title>
+				<Title level="H4">Title H4</Title>
+				<Title level="H5">Title H5</Title>
+				<Title level="H6">Title H6</Title>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("wrappingType None — truncated", () => {
+		cy.mount(
+			<div style={{ width: "200px" }}>
+				<Title wrappingType="None">This long title should be truncated and not wrap to the next line</Title>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("wrappingType Normal — wraps", () => {
+		cy.mount(
+			<div style={{ width: "200px" }}>
+				<Title wrappingType="Normal">This long title should wrap to multiple lines in the available space</Title>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Toast.cy.tsx b/packages/main/cypress/specs/visuals/Toast.cy.tsx
new file mode 100644
index 000000000000..99cdeb48fd24
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Toast.cy.tsx
@@ -0,0 +1,77 @@
+import Toast from "../../../src/Toast.js";
+
+describe("Toast visual", () => {
+	it("basic — BottomCenter (default placement)", () => {
+		cy.mount(<Toast open duration={999999} placement="BottomCenter">Toast message</Toast>);
+		cy.get("[ui5-toast]").should("be.visible");
+		cy.screenshot();
+	});
+
+	it("placement — TopStart", () => {
+		cy.mount(<Toast open duration={999999} placement="TopStart">TopStart Toast</Toast>);
+		cy.get("[ui5-toast]").should("be.visible");
+		cy.screenshot();
+	});
+
+	it("placement — TopCenter", () => {
+		cy.mount(<Toast open duration={999999} placement="TopCenter">TopCenter Toast</Toast>);
+		cy.get("[ui5-toast]").should("be.visible");
+		cy.screenshot();
+	});
+
+	it("placement — TopEnd", () => {
+		cy.mount(<Toast open duration={999999} placement="TopEnd">TopEnd Toast</Toast>);
+		cy.get("[ui5-toast]").should("be.visible");
+		cy.screenshot();
+	});
+
+	it("placement — MiddleStart", () => {
+		cy.mount(<Toast open duration={999999} placement="MiddleStart">MiddleStart Toast</Toast>);
+		cy.get("[ui5-toast]").should("be.visible");
+		cy.screenshot();
+	});
+
+	it("placement — MiddleCenter", () => {
+		cy.mount(<Toast open duration={999999} placement="MiddleCenter">MiddleCenter Toast</Toast>);
+		cy.get("[ui5-toast]").should("be.visible");
+		cy.screenshot();
+	});
+
+	it("placement — MiddleEnd", () => {
+		cy.mount(<Toast open duration={999999} placement="MiddleEnd">MiddleEnd Toast</Toast>);
+		cy.get("[ui5-toast]").should("be.visible");
+		cy.screenshot();
+	});
+
+	it("placement — BottomStart", () => {
+		cy.mount(<Toast open duration={999999} placement="BottomStart">BottomStart Toast</Toast>);
+		cy.get("[ui5-toast]").should("be.visible");
+		cy.screenshot();
+	});
+
+	it("placement — BottomEnd", () => {
+		cy.mount(<Toast open duration={999999} placement="BottomEnd">BottomEnd Toast</Toast>);
+		cy.get("[ui5-toast]").should("be.visible");
+		cy.screenshot();
+	});
+
+	it("long text content", () => {
+		cy.mount(
+			<Toast open duration={999999} placement="BottomCenter">
+				This is a longer toast message that may wrap onto multiple lines depending on the container width.
+			</Toast>
+		);
+		cy.get("[ui5-toast]").should("be.visible");
+		cy.screenshot();
+	});
+
+	it("custom width and height", () => {
+		cy.mount(
+			<Toast open duration={999999} placement="BottomCenter" style={{ width: "300px", maxWidth: "300px" }}>
+				Styled Toast
+			</Toast>
+		);
+		cy.get("[ui5-toast]").should("be.visible");
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ToggleButton.cy.tsx b/packages/main/cypress/specs/visuals/ToggleButton.cy.tsx
new file mode 100644
index 000000000000..65eb6d67c6f2
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ToggleButton.cy.tsx
@@ -0,0 +1,124 @@
+import ToggleButton from "../../../src/ToggleButton.js";
+import favorite from "@ui5/webcomponents-icons/dist/favorite.js";
+
+describe("ToggleButton visual", () => {
+	it("basic state", () => {
+		cy.mount(<ToggleButton>Toggle Button</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("pressed state", () => {
+		cy.mount(<ToggleButton pressed>Toggle Button</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("disabled state", () => {
+		cy.mount(<ToggleButton disabled>Toggle Button</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("disabled pressed state", () => {
+		cy.mount(<ToggleButton disabled pressed>Toggle Button</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("with icon — unpressed", () => {
+		cy.mount(<ToggleButton icon={favorite}>Favorite</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("with icon — pressed", () => {
+		cy.mount(<ToggleButton icon={favorite} pressed>Favorite</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("icon only — unpressed", () => {
+		cy.mount(<ToggleButton icon={favorite} />);
+		cy.screenshot();
+	});
+
+	it("icon only — pressed", () => {
+		cy.mount(<ToggleButton icon={favorite} pressed />);
+		cy.screenshot();
+	});
+
+	it("design Emphasized — unpressed", () => {
+		cy.mount(<ToggleButton design="Emphasized">Emphasized</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("design Emphasized — pressed", () => {
+		cy.mount(<ToggleButton design="Emphasized" pressed>Emphasized</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("design Positive — unpressed", () => {
+		cy.mount(<ToggleButton design="Positive">Positive</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("design Positive — pressed", () => {
+		cy.mount(<ToggleButton design="Positive" pressed>Positive</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("design Negative — unpressed", () => {
+		cy.mount(<ToggleButton design="Negative">Negative</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("design Negative — pressed", () => {
+		cy.mount(<ToggleButton design="Negative" pressed>Negative</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("design Transparent — unpressed", () => {
+		cy.mount(<ToggleButton design="Transparent">Transparent</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("design Transparent — pressed", () => {
+		cy.mount(<ToggleButton design="Transparent" pressed>Transparent</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("design Attention — unpressed", () => {
+		cy.mount(<ToggleButton design="Attention">Attention</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("design Attention — pressed", () => {
+		cy.mount(<ToggleButton design="Attention" pressed>Attention</ToggleButton>);
+		cy.screenshot();
+	});
+
+	it("compact mode — basic", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<ToggleButton>Toggle Button</ToggleButton>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode — pressed", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<ToggleButton pressed>Toggle Button</ToggleButton>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("focused — unpressed", () => {
+		cy.mount(<ToggleButton>Toggle Button</ToggleButton>);
+		cy.get("[ui5-toggle-button]").shadow().find(".ui5-button-root").focus();
+		cy.screenshot();
+	});
+
+	it("focused — pressed", () => {
+		cy.mount(<ToggleButton pressed>Toggle Button</ToggleButton>);
+		cy.get("[ui5-toggle-button]").shadow().find(".ui5-button-root").focus();
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Token.cy.tsx b/packages/main/cypress/specs/visuals/Token.cy.tsx
new file mode 100644
index 000000000000..de624cc02d7e
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Token.cy.tsx
@@ -0,0 +1,62 @@
+import Tokenizer from "../../../src/Tokenizer.js";
+import Token from "../../../src/Token.js";
+
+describe("Token visual", () => {
+	it("basic state", () => {
+		cy.mount(
+			<Tokenizer>
+				<Token text="Algeria" />
+			</Tokenizer>
+		);
+		cy.screenshot();
+	});
+
+	it("selected", () => {
+		cy.mount(
+			<Tokenizer>
+				<Token text="Algeria" selected />
+			</Tokenizer>
+		);
+		cy.screenshot();
+	});
+
+	it("readonly", () => {
+		cy.mount(
+			<Tokenizer>
+				<Token text="Algeria" readonly />
+			</Tokenizer>
+		);
+		cy.screenshot();
+	});
+
+	it("focused", () => {
+		cy.mount(
+			<Tokenizer>
+				<Token text="Algeria" />
+			</Tokenizer>
+		);
+		cy.get("[ui5-token]").realClick();
+		cy.screenshot();
+	});
+
+	it("long text", () => {
+		cy.mount(
+			<Tokenizer>
+				<Token text="Lose yourself in the music moment" />
+			</Tokenizer>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Tokenizer>
+					<Token text="Algeria" />
+					<Token text="Bulgaria" selected />
+				</Tokenizer>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Tokenizer.cy.tsx b/packages/main/cypress/specs/visuals/Tokenizer.cy.tsx
new file mode 100644
index 000000000000..9c94baefcb9b
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Tokenizer.cy.tsx
@@ -0,0 +1,100 @@
+import Tokenizer from "../../../src/Tokenizer.js";
+import Token from "../../../src/Token.js";
+
+describe("Tokenizer visual", () => {
+	it("basic state", () => {
+		cy.mount(
+			<Tokenizer>
+				<Token text="Algeria" />
+				<Token text="Bulgaria" />
+				<Token text="Canada" />
+			</Tokenizer>
+		);
+		cy.screenshot();
+	});
+
+	it("with selected tokens", () => {
+		cy.mount(
+			<Tokenizer>
+				<Token text="Algeria" selected />
+				<Token text="Bulgaria" selected />
+				<Token text="Canada" />
+			</Tokenizer>
+		);
+		cy.screenshot();
+	});
+
+	it("readonly", () => {
+		cy.mount(
+			<Tokenizer readonly>
+				<Token text="Algeria" />
+				<Token text="Bulgaria" />
+				<Token text="Canada" />
+			</Tokenizer>
+		);
+		cy.screenshot();
+	});
+
+	it("overflow — nMore label visible", () => {
+		cy.mount(
+			<div style={{ display: "flex", flexDirection: "column", width: "240px" }}>
+				<Tokenizer>
+					<Token text="Algeria" />
+					<Token text="Bulgaria" />
+					<Token text="Canada" />
+					<Token text="Denmark" />
+					<Token text="Estonia" />
+				</Tokenizer>
+			</div>
+		);
+		cy.get("[ui5-tokenizer]").shadow().find(".ui5-tokenizer-more-text").should("exist");
+		cy.screenshot();
+	});
+
+	it("expanded — all tokens visible", () => {
+		cy.mount(
+			<div style={{ display: "flex", flexDirection: "column", width: "240px" }}>
+				<Tokenizer preventPopoverOpen>
+					<Token text="Algeria" />
+					<Token text="Bulgaria" />
+					<Token text="Canada" />
+					<Token text="Denmark" />
+					<Token text="Estonia" />
+				</Tokenizer>
+			</div>
+		);
+		cy.get("[ui5-tokenizer]").shadow().find(".ui5-tokenizer-more-text").should("exist").realClick();
+		cy.get("[ui5-tokenizer]").should("have.attr", "expanded");
+		cy.screenshot();
+	});
+
+	it("nMore popover open", () => {
+		cy.mount(
+			<div style={{ display: "flex", flexDirection: "column", width: "240px" }}>
+				<Tokenizer>
+					<Token text="Algeria" />
+					<Token text="Bulgaria" />
+					<Token text="Canada" />
+					<Token text="Denmark" />
+					<Token text="Estonia" />
+				</Tokenizer>
+			</div>
+		);
+		cy.get("[ui5-tokenizer]").shadow().find(".ui5-tokenizer-more-text").should("exist").realClick();
+		cy.get("[ui5-tokenizer]").shadow().find("[ui5-responsive-popover]").ui5ResponsivePopoverOpened();
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Tokenizer>
+					<Token text="Algeria" />
+					<Token text="Bulgaria" />
+					<Token text="Canada" />
+				</Tokenizer>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Toolbar.cy.tsx b/packages/main/cypress/specs/visuals/Toolbar.cy.tsx
new file mode 100644
index 000000000000..422a406d7d97
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Toolbar.cy.tsx
@@ -0,0 +1,67 @@
+import Toolbar from "../../../src/Toolbar.js";
+import ToolbarButton from "../../../src/ToolbarButton.js";
+import ToolbarSelect from "../../../src/ToolbarSelect.js";
+import ToolbarSelectOption from "../../../src/ToolbarSelectOption.js";
+import ToolbarSeparator from "../../../src/ToolbarSeparator.js";
+import ToolbarSpacer from "../../../src/ToolbarSpacer.js";
+import add from "@ui5/webcomponents-icons/dist/add.js";
+import employee from "@ui5/webcomponents-icons/dist/employee.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+
+describe("Toolbar visual", () => {
+	it("basic state — buttons, separator, select", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton icon={add} text="Add" />
+				<ToolbarButton icon={employee} text="Hire" />
+				<ToolbarSeparator />
+				<ToolbarSelect>
+					<ToolbarSelectOption>Option 1</ToolbarSelectOption>
+					<ToolbarSelectOption selected>Option 2</ToolbarSelectOption>
+					<ToolbarSelectOption>Option 3</ToolbarSelectOption>
+				</ToolbarSelect>
+				<ToolbarButton icon={decline} text="Decline" />
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Toolbar>
+					<ToolbarButton icon={add} text="Add" />
+					<ToolbarButton icon={employee} text="Hire" />
+					<ToolbarSeparator />
+					<ToolbarButton icon={decline} text="Decline" />
+				</Toolbar>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("with spacer — right-aligned item", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton icon={add} text="Add" />
+				<ToolbarButton icon={employee} text="Hire" />
+				<ToolbarSpacer />
+				<ToolbarButton icon={decline} text="Decline" />
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("overflow popover open — AlwaysOverflow items", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton text="Visible" overflowPriority="NeverOverflow" />
+				<ToolbarButton icon={add} text="Add" overflowPriority="AlwaysOverflow" />
+				<ToolbarButton icon={employee} text="Hire" overflowPriority="AlwaysOverflow" />
+			</Toolbar>
+		);
+		cy.get("[ui5-toolbar]").shadow().find(".ui5-tb-overflow-btn").realClick();
+		cy.get("[ui5-toolbar]").shadow().find(".ui5-overflow-popover").should("have.attr", "open", "open");
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ToolbarButton.cy.tsx b/packages/main/cypress/specs/visuals/ToolbarButton.cy.tsx
new file mode 100644
index 000000000000..a07b6242013c
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ToolbarButton.cy.tsx
@@ -0,0 +1,80 @@
+import Toolbar from "../../../src/Toolbar.js";
+import ToolbarButton from "../../../src/ToolbarButton.js";
+import add from "@ui5/webcomponents-icons/dist/add.js";
+import employee from "@ui5/webcomponents-icons/dist/employee.js";
+
+describe("ToolbarButton visual", () => {
+	it("basic state — text only", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton text="Click Me" />
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("with icon", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton icon={add} text="Add" />
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("icon only", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton icon={add} />
+				<ToolbarButton icon={employee} />
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("design variants", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton text="Default" design="Default" />
+				<ToolbarButton text="Emphasized" design="Emphasized" />
+				<ToolbarButton text="Positive" design="Positive" />
+				<ToolbarButton text="Negative" design="Negative" />
+				<ToolbarButton text="Transparent" design="Transparent" />
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("disabled", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton text="Disabled" icon={add} disabled />
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Toolbar>
+					<ToolbarButton icon={add} text="Add" />
+					<ToolbarButton text="Emphasized" design="Emphasized" />
+				</Toolbar>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("in overflow popover", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton icon={add} text="Add" overflowPriority="AlwaysOverflow" />
+				<ToolbarButton icon={employee} text="Hire" overflowPriority="AlwaysOverflow" />
+			</Toolbar>
+		);
+		cy.get("[ui5-toolbar]").shadow().find(".ui5-tb-overflow-btn").realClick();
+		cy.get("[ui5-toolbar]").shadow().find(".ui5-overflow-popover").should("have.attr", "open", "open");
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ToolbarItem.cy.tsx b/packages/main/cypress/specs/visuals/ToolbarItem.cy.tsx
new file mode 100644
index 000000000000..3b330f8d3d2f
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ToolbarItem.cy.tsx
@@ -0,0 +1,57 @@
+import Toolbar from "../../../src/Toolbar.js";
+import ToolbarItem from "../../../src/ToolbarItem.js";
+import Button from "../../../src/Button.js";
+import Switch from "../../../src/Switch.js";
+
+describe("ToolbarItem visual", () => {
+	it("basic state — wrapping a button", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarItem>
+					<Button>Custom Action</Button>
+				</ToolbarItem>
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("wrapping a switch", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarItem>
+					<Switch text="Enable" />
+				</ToolbarItem>
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Toolbar>
+					<ToolbarItem>
+						<Button>Compact Action</Button>
+					</ToolbarItem>
+				</Toolbar>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("in overflow popover", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarItem overflowPriority="AlwaysOverflow">
+					<Button>Overflow Button</Button>
+				</ToolbarItem>
+				<ToolbarItem overflowPriority="AlwaysOverflow">
+					<Switch />
+				</ToolbarItem>
+			</Toolbar>
+		);
+		cy.get("[ui5-toolbar]").shadow().find(".ui5-tb-overflow-btn").realClick();
+		cy.get("[ui5-toolbar]").shadow().find(".ui5-overflow-popover").should("have.attr", "open", "open");
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ToolbarSelect.cy.tsx b/packages/main/cypress/specs/visuals/ToolbarSelect.cy.tsx
new file mode 100644
index 000000000000..d746ff0f0f3f
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ToolbarSelect.cy.tsx
@@ -0,0 +1,88 @@
+import Toolbar from "../../../src/Toolbar.js";
+import ToolbarSelect from "../../../src/ToolbarSelect.js";
+import ToolbarSelectOption from "../../../src/ToolbarSelectOption.js";
+
+describe("ToolbarSelect visual", () => {
+	it("basic state", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarSelect>
+					<ToolbarSelectOption>Option 1</ToolbarSelectOption>
+					<ToolbarSelectOption selected>Option 2</ToolbarSelectOption>
+					<ToolbarSelectOption>Option 3</ToolbarSelectOption>
+				</ToolbarSelect>
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Toolbar>
+					<ToolbarSelect>
+						<ToolbarSelectOption>Option 1</ToolbarSelectOption>
+						<ToolbarSelectOption selected>Option 2</ToolbarSelectOption>
+						<ToolbarSelectOption>Option 3</ToolbarSelectOption>
+					</ToolbarSelect>
+				</Toolbar>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("disabled", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarSelect disabled>
+					<ToolbarSelectOption>Option 1</ToolbarSelectOption>
+					<ToolbarSelectOption selected>Option 2</ToolbarSelectOption>
+					<ToolbarSelectOption>Option 3</ToolbarSelectOption>
+				</ToolbarSelect>
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("value state — Critical", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarSelect valueState="Critical">
+					<ToolbarSelectOption>Option 1</ToolbarSelectOption>
+					<ToolbarSelectOption selected>Option 2</ToolbarSelectOption>
+					<ToolbarSelectOption>Option 3</ToolbarSelectOption>
+				</ToolbarSelect>
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("dropdown open", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarSelect>
+					<ToolbarSelectOption>Option 1</ToolbarSelectOption>
+					<ToolbarSelectOption selected>Option 2</ToolbarSelectOption>
+					<ToolbarSelectOption>Option 3</ToolbarSelectOption>
+				</ToolbarSelect>
+			</Toolbar>
+		);
+		cy.get("[ui5-toolbar-select]").shadow().find("[ui5-select]").realClick();
+		cy.screenshot();
+	});
+
+	it("in overflow popover", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarSelect overflowPriority="AlwaysOverflow">
+					<ToolbarSelectOption>Option 1</ToolbarSelectOption>
+					<ToolbarSelectOption selected>Option 2</ToolbarSelectOption>
+					<ToolbarSelectOption>Option 3</ToolbarSelectOption>
+				</ToolbarSelect>
+			</Toolbar>
+		);
+		cy.get("[ui5-toolbar]").shadow().find(".ui5-tb-overflow-btn").realClick();
+		cy.get("[ui5-toolbar]").shadow().find(".ui5-overflow-popover").should("have.attr", "open", "open");
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ToolbarSeparator.cy.tsx b/packages/main/cypress/specs/visuals/ToolbarSeparator.cy.tsx
new file mode 100644
index 000000000000..7a73ee7fcae7
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ToolbarSeparator.cy.tsx
@@ -0,0 +1,44 @@
+import Toolbar from "../../../src/Toolbar.js";
+import ToolbarButton from "../../../src/ToolbarButton.js";
+import ToolbarSeparator from "../../../src/ToolbarSeparator.js";
+import add from "@ui5/webcomponents-icons/dist/add.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+
+describe("ToolbarSeparator visual", () => {
+	it("basic state — separator between buttons", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton icon={add} text="Add" />
+				<ToolbarSeparator />
+				<ToolbarButton icon={decline} text="Decline" />
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Toolbar>
+					<ToolbarButton icon={add} text="Add" />
+					<ToolbarSeparator />
+					<ToolbarButton icon={decline} text="Decline" />
+				</Toolbar>
+			</div>
+		);
+		cy.screenshot();
+	});
+
+	it("multiple separators", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton icon={add} text="Add" />
+				<ToolbarSeparator />
+				<ToolbarButton text="Middle" />
+				<ToolbarSeparator />
+				<ToolbarButton icon={decline} text="Decline" />
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/ToolbarSpacer.cy.tsx b/packages/main/cypress/specs/visuals/ToolbarSpacer.cy.tsx
new file mode 100644
index 000000000000..af2a43ba5f9e
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/ToolbarSpacer.cy.tsx
@@ -0,0 +1,42 @@
+import Toolbar from "../../../src/Toolbar.js";
+import ToolbarButton from "../../../src/ToolbarButton.js";
+import ToolbarSpacer from "../../../src/ToolbarSpacer.js";
+import add from "@ui5/webcomponents-icons/dist/add.js";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+
+describe("ToolbarSpacer visual", () => {
+	it("flexible spacer — pushes item to the right", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton icon={add} text="Add" />
+				<ToolbarSpacer />
+				<ToolbarButton icon={decline} text="Decline" />
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("fixed-width spacer", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton text="Left" />
+				<ToolbarSpacer width="80px" />
+				<ToolbarButton text="Right" />
+			</Toolbar>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Toolbar>
+					<ToolbarButton icon={add} text="Add" />
+					<ToolbarSpacer />
+					<ToolbarButton icon={decline} text="Decline" />
+				</Toolbar>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/Tree.cy.tsx b/packages/main/cypress/specs/visuals/Tree.cy.tsx
new file mode 100644
index 000000000000..a4647c7ec27c
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/Tree.cy.tsx
@@ -0,0 +1,134 @@
+import Tree from "../../../src/Tree.js";
+import TreeItem from "../../../src/TreeItem.js";
+import paste from "@ui5/webcomponents-icons/dist/paste.js";
+import copy from "@ui5/webcomponents-icons/dist/copy.js";
+
+describe("Tree visual", () => {
+	it("basic state — flat items", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem text="Item 1" />
+				<TreeItem text="Item 2" />
+				<TreeItem text="Item 3" />
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("nested items — collapsed", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem text="Tree 1" icon={paste}>
+					<TreeItem text="Tree 1.1">
+						<TreeItem text="Tree 1.1.1" />
+						<TreeItem text="Tree 1.1.2" />
+					</TreeItem>
+				</TreeItem>
+				<TreeItem text="Tree 2" icon={copy}>
+					<TreeItem text="Tree 2.1" />
+					<TreeItem text="Tree 2.2" />
+				</TreeItem>
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("nested items — expanded", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem text="Tree 1" icon={paste} expanded>
+					<TreeItem text="Tree 1.1" expanded>
+						<TreeItem text="Tree 1.1.1" />
+						<TreeItem text="Tree 1.1.2" />
+					</TreeItem>
+				</TreeItem>
+				<TreeItem text="Tree 2" icon={copy} expanded>
+					<TreeItem text="Tree 2.1" />
+					<TreeItem text="Tree 2.2" />
+				</TreeItem>
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("with additionalText and additionalTextState", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem text="Tree 1" additionalText="Available" additionalTextState="Positive" expanded>
+					<TreeItem text="Tree 1.1" additionalText="Re-stock" additionalTextState="Negative" expanded>
+						<TreeItem text="Tree 1.1.1" additionalText="Required" additionalTextState="Critical" />
+						<TreeItem text="Tree 1.1.2" additionalText="Available" additionalTextState="Positive" />
+					</TreeItem>
+				</TreeItem>
+				<TreeItem text="Tree 2" additionalText="Info" additionalTextState="Information" />
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("selectionMode Single", () => {
+		cy.mount(
+			<Tree selectionMode="Single">
+				<TreeItem text="Item 1" selected />
+				<TreeItem text="Item 2" />
+				<TreeItem text="Item 3" />
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("selectionMode Multiple", () => {
+		cy.mount(
+			<Tree selectionMode="Multiple">
+				<TreeItem text="Item 1" selected indeterminate>
+					<TreeItem text="Item 1.1" selected />
+					<TreeItem text="Item 1.2" />
+				</TreeItem>
+				<TreeItem text="Item 2" selected />
+				<TreeItem text="Item 3" />
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("selectionMode Delete", () => {
+		cy.mount(
+			<Tree selectionMode="Delete">
+				<TreeItem text="Item 1" />
+				<TreeItem text="Item 2" />
+				<TreeItem text="Item 3" />
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("noDataText", () => {
+		cy.mount(<Tree noDataText="No items available" />);
+		cy.screenshot();
+	});
+
+	it("headerText and footerText", () => {
+		cy.mount(
+			<Tree headerText="Tree Header" footerText="Tree Footer">
+				<TreeItem text="Item 1" />
+				<TreeItem text="Item 2" />
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Tree>
+					<TreeItem text="Tree 1" icon={paste} expanded>
+						<TreeItem text="Tree 1.1" />
+						<TreeItem text="Tree 1.2" />
+					</TreeItem>
+					<TreeItem text="Tree 2" icon={copy} />
+				</Tree>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/TreeItem.cy.tsx b/packages/main/cypress/specs/visuals/TreeItem.cy.tsx
new file mode 100644
index 000000000000..1b5674dff30d
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/TreeItem.cy.tsx
@@ -0,0 +1,129 @@
+import Tree from "../../../src/Tree.js";
+import TreeItem from "../../../src/TreeItem.js";
+import Icon from "../../../src/Icon.js";
+import paste from "@ui5/webcomponents-icons/dist/paste.js";
+import copy from "@ui5/webcomponents-icons/dist/copy.js";
+import bell from "@ui5/webcomponents-icons/dist/bell.js";
+
+describe("TreeItem visual", () => {
+	it("basic state", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem text="Tree item" />
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("with icon", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem text="Item with icon" icon={paste} />
+				<TreeItem text="Another icon" icon={copy} />
+				<TreeItem text="Bell icon" icon={bell} />
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("with image slot", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem text="Item with image">
+					<Icon name={bell} slot="image" />
+				</TreeItem>
+				<TreeItem text="Another item" />
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("with additionalText — all states", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem text="None state" additionalText="Default" additionalTextState="None" />
+				<TreeItem text="Positive state" additionalText="Available" additionalTextState="Positive" />
+				<TreeItem text="Negative state" additionalText="Error" additionalTextState="Negative" />
+				<TreeItem text="Critical state" additionalText="Warning" additionalTextState="Critical" />
+				<TreeItem text="Information state" additionalText="Info" additionalTextState="Information" />
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("expanded with children", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem text="Parent" expanded>
+					<TreeItem text="Child 1" />
+					<TreeItem text="Child 2" />
+				</TreeItem>
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("collapsed with children", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem text="Parent">
+					<TreeItem text="Child 1" />
+					<TreeItem text="Child 2" />
+				</TreeItem>
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("selected", () => {
+		cy.mount(
+			<Tree selectionMode="Single">
+				<TreeItem text="Selected item" selected />
+				<TreeItem text="Not selected" />
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("indeterminate — Multiple mode", () => {
+		cy.mount(
+			<Tree selectionMode="Multiple">
+				<TreeItem text="Indeterminate" selected indeterminate expanded>
+					<TreeItem text="Child selected" selected />
+					<TreeItem text="Child not selected" />
+				</TreeItem>
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("deeply nested — multiple levels", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem text="Level 1" icon={paste} expanded>
+					<TreeItem text="Level 2" expanded>
+						<TreeItem text="Level 3" expanded>
+							<TreeItem text="Level 4" />
+						</TreeItem>
+					</TreeItem>
+				</TreeItem>
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Tree>
+					<TreeItem text="Item with icon" icon={paste} additionalText="Available" additionalTextState="Positive" expanded>
+						<TreeItem text="Child 1" />
+						<TreeItem text="Child 2" />
+					</TreeItem>
+					<TreeItem text="Second item" icon={copy} />
+				</Tree>
+			</div>
+		);
+		cy.screenshot();
+	});
+});
diff --git a/packages/main/cypress/specs/visuals/TreeItemCustom.cy.tsx b/packages/main/cypress/specs/visuals/TreeItemCustom.cy.tsx
new file mode 100644
index 000000000000..88512f3ae82c
--- /dev/null
+++ b/packages/main/cypress/specs/visuals/TreeItemCustom.cy.tsx
@@ -0,0 +1,108 @@
+import Tree from "../../../src/Tree.js";
+import TreeItemCustom from "../../../src/TreeItemCustom.js";
+import Button from "../../../src/Button.js";
+
+describe("TreeItemCustom visual", () => {
+	it("basic state — custom content", () => {
+		cy.mount(
+			<Tree>
+				<TreeItemCustom>
+					<span slot="content">Custom content item 1</span>
+				</TreeItemCustom>
+				<TreeItemCustom>
+					<span slot="content">Custom content item 2</span>
+				</TreeItemCustom>
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("with button content", () => {
+		cy.mount(
+			<Tree>
+				<TreeItemCustom>
+					<Button slot="content">Action 1</Button>
+				</TreeItemCustom>
+				<TreeItemCustom>
+					<Button slot="content">Action 2</Button>
+				</TreeItemCustom>
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("expanded with nested custom items", () => {
+		cy.mount(
+			<Tree>
+				<TreeItemCustom showToggleButton expanded>
+					<span slot="content">Level 1</span>
+					<TreeItemCustom showToggleButton expanded>
+						<span slot="content">Level 2</span>
+						<TreeItemCustom>
+							<span slot="content">Level 3</span>
+						</TreeItemCustom>
+					</TreeItemCustom>
+				</TreeItemCustom>
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("collapsed with children", () => {
+		cy.mount(
+			<Tree>
+				<TreeItemCustom showToggleButton>
+					<span slot="content">Parent item</span>
+					<TreeItemCustom>
+						<span slot="content">Child item</span>
+					</TreeItemCustom>
+				</TreeItemCustom>
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("selectionMode Multiple — with hideSelectionElement", () => {
+		cy.mount(
+			<Tree selectionMode="Multiple">
+				<TreeItemCustom>
+					<span slot="content">With checkbox</span>
+				</TreeItemCustom>
+				<TreeItemCustom hideSelectionElement>
+					<span slot="content">Without checkbox</span>
+				</TreeItemCustom>
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("selectionMode Multiple — selected", () => {
+		cy.mount(
+			<Tree selectionMode="Multiple">
+				<TreeItemCustom selected>
+					<span slot="content">Selected item</span>
+				</TreeItemCustom>
+				<TreeItemCustom>
+					<span slot="content">Unselected item</span>
+				</TreeItemCustom>
+			</Tree>
+		);
+		cy.screenshot();
+	});
+
+	it("compact mode", () => {
+		cy.mount(
+			<div data-ui5-compact-size>
+				<Tree>
+					<TreeItemCustom showToggleButton expanded>
+						<Button slot="content">Level 1</Button>
+						<TreeItemCustom>
+							<Button slot="content">Level 2</Button>
+						</TreeItemCustom>
+					</TreeItemCustom>
+				</Tree>
+			</div>
+		);
+		cy.screenshot();
+	});
+});

From d8548bc85d59bea44ea098ca02b0bc2a970043b2 Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.orhan007@gmail.com>
Date: Wed, 8 Jul 2026 16:08:41 +0300
Subject: [PATCH 7/7] fix(framework): await pending language change in
 connectedCallback instead of skipping first render (#13798)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix(framework): await pending language change instead of skipping first render

PR #13602 made connectedCallback bail out early for language-aware components
mounted while a language change was in progress. That path silently skipped
onEnterDOM, _fullyConnected, and _domRefReadyPromise resolution — so consumers
that register listeners or observers in onEnterDOM (e.g. the Udex Footer's
ResizeHandler.register call) never saw those side effects wired up.

Replace the boolean pending flag with a promise handle so connectedCallback can
await it directly and then continue on the normal render path. This keeps the
lifecycle invariant intact (onEnterDOM fires exactly once, after the first
render) and removes the need for any deferred-lifecycle bookkeeping.

Language.ts:
- languageChangePending changes from boolean to Promise<void> | null.
- A single startLanguageChange helper builds the promise, runs the deferred
  reRenderAllUI5Elements, and clears the field when done (only if a newer
  change hasn't replaced it).
- setLanguage() and the cross-runtime attachConfigChange handler share the
  helper, so both paths keep the field consistent.
- getLanguageChangePending() now returns the in-flight promise or null.

UI5Element.ts:
- connectedCallback awaits the pending promise for language-aware components,
  then proceeds normally. If the deferred re-render already rendered the
  element during the await, skip the redundant renderImmediately.
- _invalidate keeps its existing guard - a non-null promise is truthy, so the
  boolean check still works semantically.

Tests:
- New LanguageAwareLifecycle test element (languageAware: true, counts hook
  calls).
- New base/cypress/specs/LanguageAwareLifecycle.cy.tsx covering:
  * onEnterDOM fires exactly once after a pending language change resolves
  * onEnterDOM does not fire a second time on a subsequent re-render
  * onEnterDOM does not fire if the element is removed before rendering

Verified locally:
- 3/3 pass with the fix, 2/3 fail without it.
- Existing DatePicker_cldr_race and i18n_texts specs still pass.
---
 .../specs/LanguageAwareLifecycle.cy.tsx       | 104 ++++++++++++++++++
 packages/base/src/UI5Element.ts               |  17 ++-
 packages/base/src/config/Language.ts          |  47 ++++----
 .../test-elements/LanguageAwareLifecycle.tsx  |  40 +++++++
 4 files changed, 179 insertions(+), 29 deletions(-)
 create mode 100644 packages/base/cypress/specs/LanguageAwareLifecycle.cy.tsx
 create mode 100644 packages/base/test/test-elements/LanguageAwareLifecycle.tsx

diff --git a/packages/base/cypress/specs/LanguageAwareLifecycle.cy.tsx b/packages/base/cypress/specs/LanguageAwareLifecycle.cy.tsx
new file mode 100644
index 000000000000..48aaebb4b01b
--- /dev/null
+++ b/packages/base/cypress/specs/LanguageAwareLifecycle.cy.tsx
@@ -0,0 +1,104 @@
+import { setLanguage } from "../../src/config/Language.js";
+import { registerI18nLoader } from "../../src/i18nBundle.js";
+import parseProperties from "../../src/PropertiesFileFormat.js";
+import LanguageAwareLifecycle from "../../test/test-elements/LanguageAwareLifecycle.js";
+
+// Regression test for the language-aware lifecycle bug introduced by PR #13602.
+//
+// Before the fix, if setLanguage() was called without awaiting and a language-aware
+// component was inserted into the DOM while languageChangePending was true,
+// connectedCallback bailed out with a bare `return`. The deferred reRenderAllUI5Elements
+// call re-rendered the shadow DOM but the onEnterDOM lifecycle hook was never fired,
+// so consumers that register a ResizeHandler / add DOM listeners / set attributes
+// inside onEnterDOM saw those side effects silently drop.
+describe("Language-aware component lifecycle when setLanguage is not awaited", () => {
+	beforeEach(() => {
+		// Register a slow custom-language loader so setLanguage("bg") stays pending
+		// long enough for the component to be inserted before CLDR resolves.
+		cy.wrap({ registerI18nLoader })
+			.then(api => {
+				api.registerI18nLoader("lifecycle-lang-test", "bg", () => {
+					return new Promise(resolve => {
+						setTimeout(() => resolve(parseProperties("KEY=Value")), 50);
+					});
+				});
+			});
+
+		// Reset language back to en between tests
+		cy.wrap({ setLanguage })
+			.then(async api => {
+				await api.setLanguage("en");
+			});
+	});
+
+	it("fires onEnterDOM exactly once after the deferred first render", () => {
+		// Kick off a language change but do NOT await the promise - this is the
+		// pattern the Udex Footer's host app was using.
+		let languageReady: Promise<void>;
+		cy.wrap({ setLanguage })
+			.then(api => {
+				languageReady = api.setLanguage("bg");
+			});
+
+		cy.mount(<LanguageAwareLifecycle />);
+
+		// Wait for the language change to settle
+		cy.then(() => languageReady);
+
+		// After the deferred re-render, onEnterDOM must have fired exactly once
+		// and the component must be marked as fully connected.
+		cy.get<LanguageAwareLifecycle>("[ui5-language-aware-lifecycle]")
+			.should($el => {
+				const el = $el[0];
+				expect(el.enterDOMCount, "onEnterDOM call count").to.equal(1);
+				expect(el._fullyConnected, "_fullyConnected flag").to.equal(true);
+				expect(el.afterRenderingCount, "onAfterRendering call count").to.be.at.least(1);
+			});
+	});
+
+	it("does not fire onEnterDOM twice on subsequent language re-renders", () => {
+		let languageReady: Promise<void>;
+		cy.wrap({ setLanguage })
+			.then(api => {
+				languageReady = api.setLanguage("bg");
+			});
+
+		cy.mount(<LanguageAwareLifecycle />);
+
+		cy.then(() => languageReady);
+
+		// Change language a second time - this triggers reRenderAllUI5Elements
+		// again but the element is already fully connected, so onEnterDOM must
+		// NOT be called again.
+		cy.wrap({ setLanguage })
+			.then(async api => {
+				await api.setLanguage("en");
+			});
+
+		cy.get<LanguageAwareLifecycle>("[ui5-language-aware-lifecycle]")
+			.should($el => {
+				expect($el[0].enterDOMCount, "onEnterDOM should still be 1 after re-render").to.equal(1);
+			});
+	});
+
+	it("does not fire onEnterDOM if element is removed before deferred render", () => {
+		cy.wrap({ setLanguage })
+			.then(async api => {
+				// Insert then synchronously remove the element while the language
+				// change is still pending. The element is unregistered by
+				// disconnectedCallback, so reRenderAllUI5Elements must not touch it
+				// and its lifecycle hooks must stay silent.
+				const el = document.createElement("ui5-language-aware-lifecycle") as LanguageAwareLifecycle;
+
+				const languageReady = api.setLanguage("bg"); // NOT awaited yet
+				document.body.appendChild(el);
+				document.body.removeChild(el);
+
+				await languageReady;
+
+				expect(el.enterDOMCount, "onEnterDOM should not fire on removed element").to.equal(0);
+				expect(el.exitDOMCount, "onExitDOM should not fire (was never fully connected)").to.equal(0);
+				expect(el._fullyConnected, "_fullyConnected flag stays false").to.equal(false);
+			});
+	});
+});
diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts
index e298481d72d7..5170eba6530f 100644
--- a/packages/base/src/UI5Element.ts
+++ b/packages/base/src/UI5Element.ts
@@ -357,17 +357,24 @@ abstract class UI5Element extends HTMLElement {
 			await ctor._definePromise;
 		}
 
-		// Skip rendering while a language change is in progress to avoid rendering with not fully loaded locale data.
-		// Once the locale data is loaded, the language-aware component will be re-rendered.
-		if (ctor.getMetadata().isLanguageAware() && getLanguageChangePending()) {
-			return;
+		// Wait for any pending language change to finish before rendering to avoid rendering
+		// with not fully loaded locale data. Once it resolves, proceed with the normal render
+		// path so onEnterDOM and the rest of the lifecycle fire exactly as they would otherwise.
+		// Note: the reRenderAllUI5Elements call that closes out the language change may already
+		// have rendered this element via the deferred queue (since it was registered above), so
+		// we skip renderImmediately if the first render has already happened.
+		const languageChangePending = getLanguageChangePending();
+		if (ctor.getMetadata().isLanguageAware() && languageChangePending) {
+			await languageChangePending;
 		}
 
 		if (!this._inDOM) { // Component removed from DOM while _processChildren was running
 			return;
 		}
 
-		renderImmediately(this);
+		if (!this._rendered) {
+			renderImmediately(this);
+		}
 		this._domRefReadyPromise._deferredResolve!();
 		this._fullyConnected = true;
 		this.onEnterDOM();
diff --git a/packages/base/src/config/Language.ts b/packages/base/src/config/Language.ts
index b6fdf96e55e1..1ab2896adbe8 100644
--- a/packages/base/src/config/Language.ts
+++ b/packages/base/src/config/Language.ts
@@ -17,27 +17,33 @@ attachConfigurationReset(() => {
 	fetchDefaultLanguage = undefined;
 });
 
-// Flag indicating that a language change is in progress and not yet complete.
-// While this flag is true, language-aware components will not re-render.
-// These components may rely on language-specific data (e.g., CLDR, language bundles),
-// which might be unavailable during the loading phase.
-// During this phase, all re-rendering is postponed.
-// Once all necessary language data has been loaded, the language change
-// will trigger a re-render of all language-aware components.
-let languageChangePending = false;
-
-attachConfigChange("language", (language: string) => {
-	curLanguage = language;
-	languageChangePending = true;
-	fireLanguageChange(language).then(() => {
-		languageChangePending = false;
+// Promise that resolves when the current language change (i18n bundles + CLDR data)
+// completes, or `null` when no language change is in flight. Consumers that need to
+// wait for locale data to be ready before rendering — most notably language-aware
+// UI5Element instances mounted while setLanguage is in flight — can await it.
+let languageChangePending: Promise<void> | null = null;
+
+const startLanguageChange = (language: string): Promise<void> => {
+	const changePromise = fireLanguageChange(language).then(() => {
 		if (isBooted()) {
-			reRenderAllUI5Elements({ languageAware: true });
+			return reRenderAllUI5Elements({ languageAware: true });
+		}
+	}).finally(() => {
+		// Only clear if no newer change has already replaced us
+		if (languageChangePending === changePromise) {
+			languageChangePending = null;
 		}
 	});
+	languageChangePending = changePromise;
+	return changePromise;
+};
+
+attachConfigChange("language", (language: string) => {
+	curLanguage = language;
+	startLanguageChange(language);
 });
 
-const getLanguageChangePending = () => languageChangePending;
+const getLanguageChangePending = (): Promise<void> | null => languageChangePending;
 
 /**
  * Returns the currently configured language, or the browser language as a fallback.
@@ -64,18 +70,11 @@ const setLanguage = async (language: string): Promise<void> => {
 		return;
 	}
 
-	languageChangePending = true;
 	curLanguage = language;
 
 	fireConfigChange("language", language);
 
-	await fireLanguageChange(language);
-
-	languageChangePending = false;
-
-	if (isBooted()) {
-		await reRenderAllUI5Elements({ languageAware: true });
-	}
+	await startLanguageChange(language);
 };
 
 /**
diff --git a/packages/base/test/test-elements/LanguageAwareLifecycle.tsx b/packages/base/test/test-elements/LanguageAwareLifecycle.tsx
new file mode 100644
index 000000000000..20aabb16e9a7
--- /dev/null
+++ b/packages/base/test/test-elements/LanguageAwareLifecycle.tsx
@@ -0,0 +1,40 @@
+import UI5Element from "../../src/UI5Element.js";
+import customElement from "../../src/decorators/customElement.js";
+import jsxRenderer from "../../src/renderer/JsxRenderer.js";
+
+/**
+ * Language-aware test element that records how many times each lifecycle hook fires.
+ * Used by base/cypress/specs/LanguageAwareLifecycle.cy.tsx to verify that onEnterDOM
+ * still fires exactly once, even when connectedCallback runs while a language change
+ * is pending (see fix for the PR #13602 regression).
+ */
+@customElement({
+	tag: "ui5-language-aware-lifecycle",
+	renderer: jsxRenderer,
+	languageAware: true,
+})
+class LanguageAwareLifecycle extends UI5Element {
+	enterDOMCount = 0;
+	exitDOMCount = 0;
+	afterRenderingCount = 0;
+
+	onEnterDOM() {
+		this.enterDOMCount++;
+	}
+
+	onExitDOM() {
+		this.exitDOMCount++;
+	}
+
+	onAfterRendering() {
+		this.afterRenderingCount++;
+	}
+
+	static get template() {
+		return () => <div>lifecycle</div>;
+	}
+}
+
+LanguageAwareLifecycle.define();
+
+export default LanguageAwareLifecycle;