diff --git a/.github/actions/mergeReleaseChangelog.mjs b/.github/actions/mergeReleaseChangelog.mjs
new file mode 100644
index 000000000000..017ef61d04e2
--- /dev/null
+++ b/.github/actions/mergeReleaseChangelog.mjs
@@ -0,0 +1,113 @@
+import { promises as fs } from 'node:fs';
+
+const extractChangelogSections = (releaseBody) => {
+	const fixes = [];
+	const features = [];
+	const fixesMatch = releaseBody.match(/## Bug Fixes([\s\S]*?)(?=##|$)/);
+	const featuresMatch = releaseBody.match(/## Features([\s\S]*?)(?=##|$)/);
+
+	if (fixesMatch) {
+		// Split lines, trim whitespace, and remove any leading bullet point (like "*" or "-")
+		const fixEntries = fixesMatch[1].trim().split('\n').map(line => line.replace(/^[*-]\s*/, '').trim());
+		fixes.push(...fixEntries);
+	}
+	if (featuresMatch) {
+		const featureEntries = featuresMatch[1].trim().split('\n').map(line => line.replace(/^[*-]\s*/, '').trim());
+		features.push(...featureEntries);
+	}
+
+	return { fixes, features };
+};
+
+const mergeReleaseChangelogs = (minorRelease, rcReleases) => {
+	// Extract the existing changes from the minor release body
+	const { fixes: minorFixes, features: minorFeatures } = extractChangelogSections(minorRelease.body);
+	const fixes = [...minorFixes];
+	const features = [...minorFeatures];
+
+	// Add changes from each RC release
+	rcReleases.forEach((release) => {
+		const { fixes: rcFixes, features: rcFeatures } = extractChangelogSections(release.body);
+		fixes.push(...rcFixes);
+		features.push(...rcFeatures);
+	})
+
+	// Sort fixes and features alphabetically
+	const sortedFixes = fixes.sort((a, b) => {
+		const contentA = a.match(/\*\*(.*?)\*\*/)?.[1] || '';
+		const contentB = b.match(/\*\*(.*?)\*\*/)?.[1] || '';
+		return contentA.localeCompare(contentB);
+	});
+
+	const sortedFeatures = features.sort((a, b) => {
+		const contentA = a.match(/\*\*(.*?)\*\*/)?.[1] || '';
+		const contentB = b.match(/\*\*(.*?)\*\*/)?.[1] || '';
+		return contentA.localeCompare(contentB);
+	});
+
+	return { fixes: sortedFixes, features: sortedFeatures };
+}
+
+const updateRelease = async (releaseContext) => {
+	const releaseId = releaseContext.minorRelease.id;
+	const releaseHeaderMatch = releaseContext.minorRelease.body.match(/^#\s\[.*?\]\(.*?\)\s\([\d-]+\)/);
+	const releaseHeader = releaseHeaderMatch ? `${releaseHeaderMatch[0]}\n\n` : '';
+	const formattedFixes = releaseContext.fixes.length ? `### Fixes\n- ${releaseContext.fixes.join('\n- ')}` : '';
+	const formattedFeatures = releaseContext.features.length ? `### Features\n- ${releaseContext.features.join('\n- ')}` : '';
+	const body = `${releaseHeader}${formattedFixes}\n\n${formattedFeatures}`.trim();
+
+	try {
+		await releaseContext.github.request('PATCH /repos/{owner}/{repo}/releases/{releaseId}', {
+			owner: releaseContext.owner,
+			repo: releaseContext.repo,
+			body,
+			releaseId,
+		});
+
+		console.log(`Release ${releaseContext.version} updated successfully:`, releaseContext);
+	} catch (error) {
+		console.error(`Error updating release ${releaseContext.version}:`, error );
+	}
+};
+
+/**
+ * Publishes comments to issues that are fixed and released.
+ * @param options {object}
+ * @param options.github {import("@octokit/rest/dist-types/index.d.ts").Octokit}
+ * @param options.context
+ */
+export default async function run({ github, context }) {
+	const lerna = await fs.readFile(new URL('../../lerna.json', import.meta.url), 'utf8');
+	const { version } = JSON.parse(lerna);
+
+	if (!version.startsWith("2")) {
+		console.warn('Skip: the task is relevant for version 2');
+		return;
+	}
+
+	try {
+		const { owner, repo } = context.repo;
+		const allReleases = (await github.request('GET /repos/{owner}/{repo}/releases', { owner, repo })).data;
+		const rcReleases = allReleases.filter((release) => release.tag_name.includes(`v${version}-rc`));
+		const minorRelease = allReleases.find((release) => release.tag_name === `v${version}`);
+
+		// Merge RC changelogs
+		const { fixes, features } = await mergeReleaseChangelogs(minorRelease, rcReleases);
+
+		const minorReleaseContext = {
+			github,
+			version,
+			owner,
+			repo,
+			minorRelease,
+			fixes,
+			features
+		}
+		
+		// Update the minor release with aggregated changelog
+		await updateRelease(minorReleaseContext);
+
+	} catch (error) {
+		console.error('Error:', error);
+	}
+}
diff --git a/.github/workflows/merge-release-changelog.yaml b/.github/workflows/merge-release-changelog.yaml
new file mode 100644
index 000000000000..4593cff18673
--- /dev/null
+++ b/.github/workflows/merge-release-changelog.yaml
@@ -0,0 +1,34 @@
+name: Merge Release Changelog
+
+on: workflow_dispatch
+  
+jobs:
+  merge-release-changelog:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
+      issues: write
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        token: ${{ secrets.UI5_WEBCOMP_BOT_GH_TOKEN }}
+        fetch-depth: 0
+    - uses: actions/setup-node@v4.1.0
+      with:
+        node-version: 20
+        cache: 'yarn'
+
+    - name: Install
+      run: yarn --frozen-lockfile
+
+    - name: Merge Release Changelog
+      uses: actions/github-script@v7
+      env:
+          GH_TOKEN: ${{ secrets.UI5_WEBCOMP_BOT_GH_TOKEN }}
+      with:
+          github-token: ${{ secrets.UI5_WEBCOMP_BOT_GH_TOKEN }}
+          script: |
+            const mergeReleaseChangelog = (await import('${{ github.workspace }}/.github/actions/mergeReleaseChangelog.mjs')).default;
+
+            await mergeReleaseChangelog({ github , context });
\ No newline at end of file
diff --git a/.github/workflows/release-stable.yaml b/.github/workflows/release-stable.yaml
index deda1c46e230..7f75fe0cb3b6 100644
--- a/.github/workflows/release-stable.yaml
+++ b/.github/workflows/release-stable.yaml
@@ -68,4 +68,15 @@ jobs:
           script: |
             const commentOnFixedIssues = (await import('${{ github.workspace }}/.github/actions/commentOnFixedIssues.mjs')).default;
 
-            await commentOnFixedIssues({ github, context });
\ No newline at end of file
+            await commentOnFixedIssues({ github, context });
+
+    - name: Merge Release Changelog
+      uses: actions/github-script@v7
+      env:
+          GH_TOKEN: ${{ secrets.UI5_WEBCOMP_BOT_GH_TOKEN }}
+      with:
+          github-token: ${{ secrets.UI5_WEBCOMP_BOT_GH_TOKEN }}
+          script: |
+            const mergeReleaseChangelog = (await import('${{ github.workspace }}/.github/actions/mergeReleaseChangelog.mjs')).default;
+
+            await mergeReleaseChangelog({ github , context });
diff --git a/CHANGELOG.md b/CHANGELOG.md
index aaf093bc110e..8776c80c6cb4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,98 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+
+### Bug Fixes
+
+* **ui5-input:** set value after preventDefault of input event ([#10196](https://github.com/SAP/ui5-webcomponents/issues/10196)) ([e2a6c94](https://github.com/SAP/ui5-webcomponents/commit/e2a6c94d6b4d88db61d85313f2776a092152478d)), closes [#9988](https://github.com/SAP/ui5-webcomponents/issues/9988)
+* **ui5-radio-button:** fix aria-disabled and focus of the read-only radio buttons ([#10111](https://github.com/SAP/ui5-webcomponents/issues/10111)) ([3bcfd1d](https://github.com/SAP/ui5-webcomponents/commit/3bcfd1d26b8520b73be336558f590e1b89c4d0c3)), closes [#10025](https://github.com/SAP/ui5-webcomponents/issues/10025)
+* **ui5-tokenizer:** adjust touch area for cozy and compact ([#10215](https://github.com/SAP/ui5-webcomponents/issues/10215)) ([ee90aea](https://github.com/SAP/ui5-webcomponents/commit/ee90aeaae00a3a888a8dafae73cb7dba1bf8e51f))
+* **ui5-wizard:** stacked Wizard Steps are aligned properly ([#10250](https://github.com/SAP/ui5-webcomponents/issues/10250)) ([3473fbf](https://github.com/SAP/ui5-webcomponents/commit/3473fbf7dd6f97d0de70a540d412c36901455926)), closes [#9779](https://github.com/SAP/ui5-webcomponents/issues/9779)
+
+
+### Features
+
+* **ui5-combobox:** adjust arrow-down behavior ([#10166](https://github.com/SAP/ui5-webcomponents/issues/10166)) ([74616dc](https://github.com/SAP/ui5-webcomponents/commit/74616dc7ea533ecbd18265878c90339e10eb9d1b))
+* **ui5-form:** add new `emptySpan` property ([#10194](https://github.com/SAP/ui5-webcomponents/issues/10194)) ([48b0cc8](https://github.com/SAP/ui5-webcomponents/commit/48b0cc89b36dd859dd07c17021eedf7a99375150)), closes [#9963](https://github.com/SAP/ui5-webcomponents/issues/9963)
+* **ui5-list:** add Home and End key handling for Load More button ([#10206](https://github.com/SAP/ui5-webcomponents/issues/10206)) ([7059e09](https://github.com/SAP/ui5-webcomponents/commit/7059e0987960f62cd5b8740594b907fa98e1f11c))
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+
+### Bug Fixes
+
+* **ui5-dialog:** width on mobile is not bigger than the phone width ([#10199](https://github.com/SAP/ui5-webcomponents/issues/10199)) ([77af592](https://github.com/SAP/ui5-webcomponents/commit/77af592c238ad53502c09f142d33f7c66c6b0715)), closes [#10000](https://github.com/SAP/ui5-webcomponents/issues/10000)
+* **ui5-table:** text cut due to column overflow ([#10193](https://github.com/SAP/ui5-webcomponents/issues/10193)) ([b59d718](https://github.com/SAP/ui5-webcomponents/commit/b59d718dca80bd9a8ee65993ddc2358ecd127024)), closes [#10168](https://github.com/SAP/ui5-webcomponents/issues/10168)
+
+
+### Features
+
+* **ui5-form:** enable vertical alignment of form items ([#10165](https://github.com/SAP/ui5-webcomponents/issues/10165)) ([13b571b](https://github.com/SAP/ui5-webcomponents/commit/13b571baf0b225dfabc4739be64dd64a34cc5506))
+* **ui5-toolbar:** fixed spacer behavior ([#10177](https://github.com/SAP/ui5-webcomponents/issues/10177)) ([b3625ac](https://github.com/SAP/ui5-webcomponents/commit/b3625ac7426aa592b80f50e15147c18ccc7d2abd)), closes [#10104](https://github.com/SAP/ui5-webcomponents/issues/10104)
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+
+### Bug Fixes
+
+* **ui5-card-header:** update interactive property documentation ([#10143](https://github.com/SAP/ui5-webcomponents/issues/10143)) ([23289d4](https://github.com/SAP/ui5-webcomponents/commit/23289d4d1696d0441823d98f71b5e21b617777c3))
+* **ui5-dynamic-page:** move subheading slot outside the title wrapper ([#10163](https://github.com/SAP/ui5-webcomponents/issues/10163)) ([6466b8a](https://github.com/SAP/ui5-webcomponents/commit/6466b8ad7f73c85a5c105dea3c196f6bfb78f27a))
+* **ui5-table-growing:** button is shown despite scroll type ([#10142](https://github.com/SAP/ui5-webcomponents/issues/10142)) ([950441b](https://github.com/SAP/ui5-webcomponents/commit/950441b7d272e8cd20499461f4cfa05ad3ac7510)), closes [#10045](https://github.com/SAP/ui5-webcomponents/issues/10045)
+
+
+### Features
+
+* **ui5-color-picker:** add simplified display mode ([#10153](https://github.com/SAP/ui5-webcomponents/issues/10153)) ([bf9c0d6](https://github.com/SAP/ui5-webcomponents/commit/bf9c0d653be5af5473a7b616f2c91803db46beb3)), closes [#9979](https://github.com/SAP/ui5-webcomponents/issues/9979)
+* **ui5-combobox/multi-combobox:** physical items ([#10051](https://github.com/SAP/ui5-webcomponents/issues/10051)) ([73f82ab](https://github.com/SAP/ui5-webcomponents/commit/73f82abe5e9a61d88919f4c45df9435be850eb2f))
+* **ui5-form:** update to latest accessibility spec ([#10152](https://github.com/SAP/ui5-webcomponents/issues/10152)) ([4382d4e](https://github.com/SAP/ui5-webcomponents/commit/4382d4e280ffcf01a924163b9b719887c17f529a)), closes [#9952](https://github.com/SAP/ui5-webcomponents/issues/9952)
+* **ui5-list, ui5-tree:** support accessible description ([#10131](https://github.com/SAP/ui5-webcomponents/issues/10131)) ([45f0ffe](https://github.com/SAP/ui5-webcomponents/commit/45f0ffeafb2da0ffcaf425649c7440b604e359a3)), closes [#6445](https://github.com/SAP/ui5-webcomponents/issues/6445)
+* **ui5-tokenizer:** enable multiline mode ([#9964](https://github.com/SAP/ui5-webcomponents/issues/9964)) ([1071746](https://github.com/SAP/ui5-webcomponents/commit/107174616b5b3b96c174160488eba18b9cdb9cae))
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+
+### Bug Fixes
+
+* **ui5-menu:** make close event non-bubbling ([#10133](https://github.com/SAP/ui5-webcomponents/issues/10133)) ([e7ccce9](https://github.com/SAP/ui5-webcomponents/commit/e7ccce968cab25a07837c41f36d94603c31e007e)), closes [#10041](https://github.com/SAP/ui5-webcomponents/issues/10041)
+* **ui5-select:** add support for Vue.js v-model ([#10149](https://github.com/SAP/ui5-webcomponents/issues/10149)) ([14947a7](https://github.com/SAP/ui5-webcomponents/commit/14947a7bbcf3272f56888bb466696784095b574f)), closes [#9971](https://github.com/SAP/ui5-webcomponents/issues/9971)
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+
+### Bug Fixes
+
+* **ui5-dynamic-page:** improve scrolling smoothness ([#10093](https://github.com/SAP/ui5-webcomponents/issues/10093)) ([d1420b0](https://github.com/SAP/ui5-webcomponents/commit/d1420b0be2c40ca649503cca0715e4c529929f8f)), closes [#10011](https://github.com/SAP/ui5-webcomponents/issues/10011)
+* **ui5-dynamic-page:** prevent unwanted header toggle from scroll ([#10007](https://github.com/SAP/ui5-webcomponents/issues/10007)) ([7a7d00c](https://github.com/SAP/ui5-webcomponents/commit/7a7d00c0d615283d1a86d775b6c51db7feadfb42))
+* **ui5-media-gallery:** clear selected thumbnail on item removal ([#10087](https://github.com/SAP/ui5-webcomponents/issues/10087)) ([af4cadb](https://github.com/SAP/ui5-webcomponents/commit/af4cadbfb637c1a6440aa0bd1fc516629ae332ae))
+* **ui5-toolbar-*:** ensure getDomRef() returns the actual DOM reference ([#10009](https://github.com/SAP/ui5-webcomponents/issues/10009)) ([747244d](https://github.com/SAP/ui5-webcomponents/commit/747244d93fee5ee0d1ac54863de5e3573f4d6248))
+
+
+### Features
+
+* **ui5-date-picker:** introduce open and close events ([#10118](https://github.com/SAP/ui5-webcomponents/issues/10118)) ([819730a](https://github.com/SAP/ui5-webcomponents/commit/819730afbec336ad04e1207b8fee24bcd69f7c2d))
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 
diff --git a/docs/08-Releases.md b/docs/08-Releases.md
index 37016593ac3c..94310d789f5d 100644
--- a/docs/08-Releases.md
+++ b/docs/08-Releases.md
@@ -9,12 +9,12 @@ and produce the following type of releases:
 
 - **Patch releases**
 
-Includes backward compatible bug fixes and increments the third digit, e.g. 1.0.1.
+Includes backward compatible bug fixes and increments the third digit, e.g. 2.0.1.
 
 
 - **Minor releases**
 
-Includes backward compatible new features and increments the middle digit and resets the last digit to zero, e.g. 1.1.0.
+Includes backward compatible new features and increments the middle digit and resets the last digit to zero, e.g. 2.1.0, 2.2.0, 2.3.0, etc.
 
 
 - **Major releases**
@@ -26,20 +26,30 @@ Includes changes that break backward compatibility and increments the first digi
 Here is the established release process of UI5 Web Components:
 
 
-- **Monthly Stable Releases** - 1.11.0, 1.12.0....1.18.0
+### Version 2
 
-Every start of the month, a new minor version is released, which we consider stable and recommended for consumers.
-Check the [Release Timelines](https://github.com/SAP/ui5-webcomponents/projects?type=classic) for up-to-date information (the related content is at the bottom of the page).
+The UI5 Web Components version 2 is the latest major and recommended for usage.
 
-- **Weekly Preview Releases** - 1.13.0-rc.0, 1.13.0-rc.1, 1.13.0-rc.2 (preview of 1.13)
+- **Monthly Stable Releases** - 2.1.0, 2.2.0....2.x.0.
+
+Every start of the month, a new minor version is released - stable and recommended for consumers.
+Check the [Release Timelines](https://github.com/orgs/SAP/projects/91?pane=info) for up-to-date information (the related content is at the bottom of the page).
+
+- **Weekly Preview Releases** - 2.x.0-rc.0, 2.x.0-rc.1....2.x.0-rc.z.
 
 Every week on Thursday, a new release candidate version is released, considered a preview of the upcoming minor version.
 It's more up-to-date with the latest development and it's useful for consumers that would like to get frequent updates and test upcoming features in the minor version.
 
-
-- **On-demand Patch Releases** - 1.13.1, 1.13.2, 1.13.3
+- **On-demand Patch Releases** - 2.x.1, 2.x.2....2.x.y.
 
 Patches are released on-demand for high-priority issues.
 
+### Version 1 
+
+The UI5 Web Components version 1 is in maintenance until 30 June 2025.
+
+- **Monthly Patch Releases** - 1.24.1, 1.24.2....1.24.y.
+
+Every start of the month, a new patch of 1.24 version is released - stable and recommended for consumers that still rely on version 1.
 
 **Note:** The changelog of all releases can be found on the [GitHub Release](https://github.com/SAP/ui5-webcomponents/releases) page.
diff --git a/docs/1-getting-started/01-first-steps.md b/docs/1-getting-started/01-first-steps.md
index 1098a1d3e634..58b6bbb638c0 100644
--- a/docs/1-getting-started/01-first-steps.md
+++ b/docs/1-getting-started/01-first-steps.md
@@ -108,3 +108,38 @@ dist/assets/vendor.c05c7785.js 114.92kb / brotli: 24.30kb
 The content of the `dist` folder is ready to be deployed for productive usage. The hashes in the file names make them safe for caching and the produced bundle is optimized for production.
 
 #### 4. Enjoy UI5 Web Components.
+
+### Code Completion
+
+#### Visual Studio Code (VS Code)
+
+UI5 Web Components packages include a vscode.html-custom-data.json file that describes their custom elements. This enables advanced code completion features, such as “code hinting” or “IntelliSense,” in Visual Studio Code.
+
+Steps to Enable Code Completion in VS Code:
+
+1. Install UI5 Web Components locally
+   Use your package manager to add the required UI5 Web Components packages to your project.
+
+2. Create or update `.vscode/settings.json`:
+   - Ensure a folder named `.vscode` exists at the root of your project.
+   - Inside `.vscode`, create or update a file named `settings.json`.
+
+3. Configure the Settings File:
+   Add the following configuration to `settings.json`:
+
+   ```json
+   {
+     "html.customData": [
+       "./node_modules/@ui5/webcomponents/dist/vscode.html-custom-data.json"
+       // Add entries for other installed @ui5/webcomponents packages as needed
+     ]
+   }
+   ```
+
+   If `settings.json` already exists, append the `html.customData` property to the root object.
+
+4. Restart VS Code:
+   Restart the editor to apply the changes.
+
+#### JetBrains IDEs
+For JetBrains IDEs, such as WebStorm or IntelliJ IDEA, no additional setup is required when using UI5 Web Components installed from your package manager. The IDE will automatically detect the `web-types.json` file provided by the packages, enabling code completion and displaying relevant component information without further configuration.
diff --git a/docs/2-advanced/09-accessibility.md b/docs/2-advanced/09-accessibility.md
index b77b078dc379..59923bb3c2bf 100644
--- a/docs/2-advanced/09-accessibility.md
+++ b/docs/2-advanced/09-accessibility.md
@@ -141,6 +141,8 @@ The mapping of the accessibility APIs to ARIA attributes is described in the fol
 | ------------------------------ | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `accessibleName`               | `aria-label`                                      | Defines the text alternative of the component. If not provided, a default text alternative is set, if present.                                                                                      |
 | `accessibleNameRef`            | `aria-label`                                      | Alternative for `aria-labelledby`. Receives ID (or many IDs) of the elements that serve as labels of the component. Those labels are passed as a concatenated string to the `aria-label` attribute. |
+| `accessibleDescription`        | `aria-description`                                | Defines the description of the component.                                                                                                                                                           |
+| `accessibleDescriptionRef`     | `aria-description`                                | Alternative for `aria-describedby`. Receives ID (or many IDs) of the elements that serve as descriptions of the component. Those descriptions are passed as a concatenated string to the `aria-describedby` attribute. |
 | `accessibleRole`               | `role`                                            | Sets the accessible aria role of the component.                                                                                                                                                     |                                                                          
 | `accessibilityAttributes`      | `aria-expanded`, `aria-haspopup`, `aria-controls`, etc. | An object of strings that defines several additional accessibility attribute values for customization depending on the use case. <br/> For composite components the object provides a way to enrich the accessibility of the different elements inside the component (for example in the `ui5-shellbar`).                                                                   |                                                                                          |
 | `required`                     | `aria-required`                                   | Defines whether the component is required.                                                                                                                                                          |
@@ -187,6 +189,53 @@ The `accessibleNameRef` property is currently supported in most of the available
 
 ---
 
+### accessibleDescription
+
+Setting the property on the custom element as:
+```html
+<ui5-list accessible-description="List of items">
+    <ui5-li>Item 1</ui5-li>
+    <ui5-li>Item 2</ui5-li>
+</ui5-list>
+```
+
+Will result in the shadow DOM as:
+```html
+<ul role="list" aria-description="List of items" ... >
+    ...
+</ul>
+```
+
+The `accessibleDescription` property is currently supported in:
+* [List](https://sap.github.io/ui5-webcomponents/nightly/components/List/)
+* [Tree](https://sap.github.io/ui5-webcomponents/nightly/components/Tree/)
+
+---
+
+### accessibleDescriptionRef
+
+Setting the property on the custom element as:
+```html
+<p id="description">List of items</p>
+<ui5-list accessible-description-ref="description">
+    <ui5-li>Item 1</ui5-li>
+    <ui5-li>Item 2</ui5-li>
+</ui5-list>
+```
+
+Will result in the shadow DOM as:
+```html
+<ul role="list" aria-description="List of items" ... >
+    ...
+</ul>
+```
+
+The `accessibleDescriptionRef` property is currently supported in:
+* [List](https://sap.github.io/ui5-webcomponents/nightly/components/List/)
+* [Tree](https://sap.github.io/ui5-webcomponents/nightly/components/Tree/)
+
+---
+
 ### accessibleRole
 
 Setting the property on the custom element as:
diff --git a/lerna.json b/lerna.json
index 7f5008c88492..6dd06cfea728 100644
--- a/lerna.json
+++ b/lerna.json
@@ -14,7 +14,7 @@
     "packages/create-package",
     "packages/compat"
   ],
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "command": {
     "publish": {
       "allowBranch": "*",
diff --git a/packages/ai/CHANGELOG.md b/packages/ai/CHANGELOG.md
index a2d4c5f82946..f5e169d4a5b5 100644
--- a/packages/ai/CHANGELOG.md
+++ b/packages/ai/CHANGELOG.md
@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-ai
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 **Note:** Version bump only for package @ui5/webcomponents-ai
diff --git a/packages/ai/README.md b/packages/ai/README.md
index 157e124d5d41..2459ecdbf61a 100644
--- a/packages/ai/README.md
+++ b/packages/ai/README.md
@@ -10,9 +10,10 @@ Provides web components implementing AI-related visual and interaction.
 
 ## Provided components
 
-| Web Component            | Tag name                    | Module import                                              |
-|--------------------------|-----------------------------|------------------------------------------------------------|
-
+| Web Component            | Tag name                       | Module import                                           |
+|--------------------------|--------------------------------|---------------------------------------------------------|
+| Button                   | `ui5-ai-button`                | `import "@ui5/webcomponents-ai/dist/Button.js";`        |
+| PromptInput              | `ui5-ai-prompt-input`          | `import "@ui5/webcomponents-ai/dist/PromptInput.js";`   |
 
 ## Provided assets
 
diff --git a/packages/ai/package.json b/packages/ai/package.json
index a7d16f3c27b1..2f0a9b2395db 100644
--- a/packages/ai/package.json
+++ b/packages/ai/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-ai",
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "description": "UI5 Web Components: webcomponents.ai",
   "ui5": {
     "webComponentsPackage": true
@@ -45,13 +45,13 @@
     "directory": "packages/ai"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.4.0-rc.4",
-    "@ui5/webcomponents-base": "2.4.0-rc.4",
-    "@ui5/webcomponents-icons": "2.4.0-rc.4",
-    "@ui5/webcomponents-theming": "2.4.0-rc.4"
+    "@ui5/webcomponents": "2.5.0-rc.2",
+    "@ui5/webcomponents-base": "2.5.0-rc.2",
+    "@ui5/webcomponents-icons": "2.5.0-rc.2",
+    "@ui5/webcomponents-theming": "2.5.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.4.0-rc.4",
-    "chromedriver": "^129.0.0"
+    "@ui5/webcomponents-tools": "2.5.0-rc.2",
+    "chromedriver": "^131.0.0"
   }
 }
diff --git a/packages/ai/test/pages/Button.html b/packages/ai/test/pages/Button.html
index eb6bf48fa1ec..d4ada3f6c79b 100644
--- a/packages/ai/test/pages/Button.html
+++ b/packages/ai/test/pages/Button.html
@@ -100,7 +100,7 @@
 			<ui5-menu-item text="Simplify"></ui5-menu-item>
 			<ui5-menu-item text="Expand"></ui5-menu-item>
 			<ui5-menu-item text="Rephrase"></ui5-menu-item>
-			<ui5-menu-item text="Summarise"></ui5-menu-item>
+			<ui5-menu-item text="Summarize"></ui5-menu-item>
 		</ui5-menu-item>
 		<ui5-menu-item text="Make Bulleted List"></ui5-menu-item>
 		<ui5-menu-item text="Translate">
@@ -266,7 +266,7 @@
 				case "Rephrase":
 					startTextGeneration(button, "reviseGenerating", predefinedTextsRephrased);
 					break;
-				case "Summarise":
+				case "Summarize":
 					startTextGeneration(button, "reviseGenerating", predefinedTextsSummarized);
 					break;
 				case "Bulgarian":
diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md
index 164090effc12..8fec5c49844a 100644
--- a/packages/base/CHANGELOG.md
+++ b/packages/base/CHANGELOG.md
@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+
+### Features
+
+* **ui5-form:** update to latest accessibility spec ([#10152](https://github.com/SAP/ui5-webcomponents/issues/10152)) ([4382d4e](https://github.com/SAP/ui5-webcomponents/commit/4382d4e280ffcf01a924163b9b719887c17f529a)), closes [#9952](https://github.com/SAP/ui5-webcomponents/issues/9952)
+* **ui5-list, ui5-tree:** support accessible description ([#10131](https://github.com/SAP/ui5-webcomponents/issues/10131)) ([45f0ffe](https://github.com/SAP/ui5-webcomponents/commit/45f0ffeafb2da0ffcaf425649c7440b604e359a3)), closes [#6445](https://github.com/SAP/ui5-webcomponents/issues/6445)
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-base
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 **Note:** Version bump only for package @ui5/webcomponents-base
diff --git a/packages/base/package.json b/packages/base/package.json
index 3b06dfaa4d2c..2b8df043cf77 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-base",
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "description": "UI5 Web Components: webcomponents.base",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -52,8 +52,8 @@
   },
   "devDependencies": {
     "@openui5/sap.ui.core": "1.120.17",
-    "@ui5/webcomponents-tools": "2.4.0-rc.4",
-    "chromedriver": "^129.0.0",
+    "@ui5/webcomponents-tools": "2.5.0-rc.2",
+    "chromedriver": "^131.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",
     "cross-env": "^7.0.3",
diff --git a/packages/base/src/MarkedEvents.ts b/packages/base/src/MarkedEvents.ts
deleted file mode 100644
index 7c4e2e7eb26b..000000000000
--- a/packages/base/src/MarkedEvents.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-const markedEvents = new WeakMap<Event, string>();
-
-/**
- * Marks the given event with random marker.
- */
-const markEvent = (event: Event, value: string) => {
-	markedEvents.set(event, value);
-};
-
-/**
- * Returns the marker for the given event.
- */
-const getEventMark = (event: Event): string | undefined => {
-	return markedEvents.get(event);
-};
-
-export {
-	markEvent,
-	getEventMark,
-};
diff --git a/packages/base/src/features/F6Navigation.ts b/packages/base/src/features/F6Navigation.ts
index a67b65eb95c2..0d9ccd1bf0aa 100644
--- a/packages/base/src/features/F6Navigation.ts
+++ b/packages/base/src/features/F6Navigation.ts
@@ -39,7 +39,11 @@ class F6Navigation {
 	}
 
 	async groupElementToFocus(nextElement: HTMLElement) {
-		const nextElementDomRef = instanceOfUI5Element(nextElement) ? nextElement.getDomRef() : nextElement;
+		let nextElementDomRef = nextElement;
+
+		if (instanceOfUI5Element(nextElement)) {
+			nextElementDomRef = nextElement.getDomRef() || nextElement.firstElementChild as HTMLElement;
+		}
 
 		if (nextElementDomRef) {
 			if (isElementClickable(nextElementDomRef)) {
diff --git a/packages/base/src/util/AriaLabelHelper.ts b/packages/base/src/util/AccessibilityTextsHelper.ts
similarity index 79%
rename from packages/base/src/util/AriaLabelHelper.ts
rename to packages/base/src/util/AccessibilityTextsHelper.ts
index dbf687fa4113..89e11d9e0cba 100644
--- a/packages/base/src/util/AriaLabelHelper.ts
+++ b/packages/base/src/util/AccessibilityTextsHelper.ts
@@ -20,6 +20,8 @@ const registeredElements = new WeakMap<UI5Element, RegisteredElement>();
 type AccessibleElement = HTMLElement & {
 	accessibleNameRef?: string;
 	accessibleName?: string;
+	accessibleDescriptionRef?: string;
+	accessibleDescription?: string;
 };
 
 const observerOptions = {
@@ -49,11 +51,10 @@ const getEffectiveAriaLabelText = (el: HTMLElement) => {
  */
 const getAllAccessibleNameRefTexts = (el: HTMLElement) => {
 	const ids = (el as AccessibleElement).accessibleNameRef?.split(" ") ?? [];
-	const owner = el.getRootNode() as HTMLElement;
 	let result = "";
 
 	ids.forEach((elementId: string, index: number) => {
-		const element = owner.querySelector(`[id='${elementId}']`);
+		const element = _getReferencedElementById(el, elementId);
 		const text = `${element && element.textContent ? element.textContent : ""}`;
 		if (text) {
 			result += text;
@@ -74,8 +75,12 @@ const _getAllAssociatedElementsFromDOM = (el: UI5Element): Array<HTMLElement> =>
 		set.add(itm);
 	});
 	// adding other elements that id is the same as accessibleNameRef value
-	const value = el["accessibleNameRef" as keyof typeof el] as string;
-	const ids = value?.split(" ") ?? [];
+	const ariaLabelledBy = el["accessibleNameRef" as keyof typeof el] as string;
+	const ariaDescribedBy = el["accessibleDescriptionRef" as keyof typeof el] as string;
+
+	const value = [ariaLabelledBy, ariaDescribedBy].filter(Boolean).join(" ");
+
+	const ids = value ? value.split(" ") : [];
 	ids.forEach(id => {
 		const refEl = _getReferencedElementById(el, id);
 		if (refEl) {
@@ -91,7 +96,7 @@ const _getAssociatedLabels = (el: HTMLElement): Array<HTMLElement> => {
 };
 
 const _getReferencedElementById = (el: HTMLElement, elementId: string): HTMLElement | null => {
-	return (el.getRootNode() as HTMLElement).querySelector<HTMLElement>(`[id='${elementId}']`);
+	return (el.getRootNode() as HTMLElement).querySelector<HTMLElement>(`[id='${elementId}']`) || document.getElementById(elementId);
 };
 
 /**
@@ -115,7 +120,9 @@ const getAssociatedLabelForTexts = (el: HTMLElement) => {
 
 const _createInvalidationCallback = (el: UI5Element) => {
 	const invalidationCallback = (changeInfo: ChangeInfo) => {
-		if (!(changeInfo && changeInfo.type === "property" && changeInfo.name === "accessibleNameRef")) {
+		const isAccessibleNameRefChange = changeInfo && changeInfo.type === "property" && changeInfo.name === "accessibleNameRef";
+		const isAccessibleDescriptionRefChange = changeInfo && changeInfo.type === "property" && changeInfo.name === "accessibleDescriptionRef";
+		if (!isAccessibleNameRefChange && !isAccessibleDescriptionRefChange) {
 			return;
 		}
 		const registeredElement = registeredElements.get(el);
@@ -210,10 +217,44 @@ const deregisterUI5Element = (el: UI5Element) => {
 	registeredElements.delete(el);
 };
 
+const getEffectiveAriaDescriptionText = (el: HTMLElement) => {
+	const accessibleEl = el as AccessibleElement;
+
+	if (!accessibleEl.accessibleDescriptionRef) {
+		if (accessibleEl.accessibleDescription) {
+			return accessibleEl.accessibleDescription;
+		}
+
+		return undefined;
+	}
+
+	return getAllAccessibleDescriptionRefTexts(el);
+};
+
+const getAllAccessibleDescriptionRefTexts = (el: HTMLElement) => {
+	const ids = (el as AccessibleElement).accessibleDescriptionRef?.split(" ") ?? [];
+	let result = "";
+
+	ids.forEach((elementId: string, index: number) => {
+		const element = _getReferencedElementById(el, elementId);
+		const text = `${element && element.textContent ? element.textContent : ""}`;
+		if (text) {
+			result += text;
+			if (index < ids.length - 1) {
+				result += " ";
+			}
+		}
+	});
+
+	return result;
+};
+
 export {
 	getEffectiveAriaLabelText,
 	getAssociatedLabelForTexts,
 	registerUI5Element,
 	deregisterUI5Element,
 	getAllAccessibleNameRefTexts,
+	getEffectiveAriaDescriptionText,
+	getAllAccessibleDescriptionRefTexts,
 };
diff --git a/packages/compat/CHANGELOG.md b/packages/compat/CHANGELOG.md
index 1a67ffda08af..03ce12491566 100644
--- a/packages/compat/CHANGELOG.md
+++ b/packages/compat/CHANGELOG.md
@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-compat
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+
+### Bug Fixes
+
+* **ui5-table:** text cut due to column overflow ([#10193](https://github.com/SAP/ui5-webcomponents/issues/10193)) ([b59d718](https://github.com/SAP/ui5-webcomponents/commit/b59d718dca80bd9a8ee65993ddc2358ecd127024)), closes [#10168](https://github.com/SAP/ui5-webcomponents/issues/10168)
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+
+### Features
+
+* **ui5-list, ui5-tree:** support accessible description ([#10131](https://github.com/SAP/ui5-webcomponents/issues/10131)) ([45f0ffe](https://github.com/SAP/ui5-webcomponents/commit/45f0ffeafb2da0ffcaf425649c7440b604e359a3)), closes [#6445](https://github.com/SAP/ui5-webcomponents/issues/6445)
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-compat
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-compat
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 **Note:** Version bump only for package @ui5/webcomponents-compat
diff --git a/packages/compat/package.json b/packages/compat/package.json
index 0c032574fe15..dc6ce65c2401 100644
--- a/packages/compat/package.json
+++ b/packages/compat/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-compat",
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "description": "UI5 Web Components: webcomponents.compat",
   "ui5": {
     "webComponentsPackage": true
@@ -45,13 +45,13 @@
     "directory": "packages/compat"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.4.0-rc.4",
-    "@ui5/webcomponents-base": "2.4.0-rc.4",
-    "@ui5/webcomponents-icons": "2.4.0-rc.4",
-    "@ui5/webcomponents-theming": "2.4.0-rc.4"
+    "@ui5/webcomponents": "2.5.0-rc.2",
+    "@ui5/webcomponents-base": "2.5.0-rc.2",
+    "@ui5/webcomponents-icons": "2.5.0-rc.2",
+    "@ui5/webcomponents-theming": "2.5.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.4.0-rc.4",
-    "chromedriver": "^129.0.0"
+    "@ui5/webcomponents-tools": "2.5.0-rc.2",
+    "chromedriver": "^131.0.0"
   }
 }
diff --git a/packages/compat/src/Table.ts b/packages/compat/src/Table.ts
index 163000ca07b8..81f57ef019d2 100644
--- a/packages/compat/src/Table.ts
+++ b/packages/compat/src/Table.ts
@@ -30,7 +30,7 @@ import {
 import getNormalizedTarget from "@ui5/webcomponents-base/dist/util/getNormalizedTarget.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { getLastTabbableElement, getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
 import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import CheckBox from "@ui5/webcomponents/dist/CheckBox.js";
diff --git a/packages/compat/src/themes/Table.css b/packages/compat/src/themes/Table.css
index edeae057af64..1c17ab63aa21 100644
--- a/packages/compat/src/themes/Table.css
+++ b/packages/compat/src/themes/Table.css
@@ -10,13 +10,17 @@
 	border-bottom: var(--ui5_table_bottom_border);
 }
 
-.ui5-table-root,
-.ui5-table-busy-indicator {
+.ui5-table-root {
 	width: 100%;
 	height: 100%;
+	display: flex;
 	box-sizing: border-box;
 }
 
+.ui5-table-busy-indicator {
+	flex-grow: 1;
+}
+
 table {
 	width: 100%;
 	border-spacing: 0;
diff --git a/packages/create-package/CHANGELOG.md b/packages/create-package/CHANGELOG.md
index 32bc61e45a5d..3b679f8be867 100644
--- a/packages/create-package/CHANGELOG.md
+++ b/packages/create-package/CHANGELOG.md
@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 **Note:** Version bump only for package @ui5/create-webcomponents-package
diff --git a/packages/create-package/package.json b/packages/create-package/package.json
index 7d5ab1f41de0..12c6e4ebe1d5 100644
--- a/packages/create-package/package.json
+++ b/packages/create-package/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/create-webcomponents-package",
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "description": "UI5 Web Components: create package",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
diff --git a/packages/fiori/CHANGELOG.md b/packages/fiori/CHANGELOG.md
index 9dfa63508b4f..5853739908fa 100644
--- a/packages/fiori/CHANGELOG.md
+++ b/packages/fiori/CHANGELOG.md
@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+
+### Bug Fixes
+
+* **ui5-wizard:** stacked Wizard Steps are aligned properly ([#10250](https://github.com/SAP/ui5-webcomponents/issues/10250)) ([3473fbf](https://github.com/SAP/ui5-webcomponents/commit/3473fbf7dd6f97d0de70a540d412c36901455926)), closes [#9779](https://github.com/SAP/ui5-webcomponents/issues/9779)
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+**Note:** Version bump only for package @ui5/webcomponents-fiori
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+
+### Bug Fixes
+
+* **ui5-dynamic-page:** move subheading slot outside the title wrapper ([#10163](https://github.com/SAP/ui5-webcomponents/issues/10163)) ([6466b8a](https://github.com/SAP/ui5-webcomponents/commit/6466b8ad7f73c85a5c105dea3c196f6bfb78f27a))
+
+
+### Features
+
+* **ui5-list, ui5-tree:** support accessible description ([#10131](https://github.com/SAP/ui5-webcomponents/issues/10131)) ([45f0ffe](https://github.com/SAP/ui5-webcomponents/commit/45f0ffeafb2da0ffcaf425649c7440b604e359a3)), closes [#6445](https://github.com/SAP/ui5-webcomponents/issues/6445)
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-fiori
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+
+### Bug Fixes
+
+* **ui5-dynamic-page:** improve scrolling smoothness ([#10093](https://github.com/SAP/ui5-webcomponents/issues/10093)) ([d1420b0](https://github.com/SAP/ui5-webcomponents/commit/d1420b0be2c40ca649503cca0715e4c529929f8f)), closes [#10011](https://github.com/SAP/ui5-webcomponents/issues/10011)
+* **ui5-dynamic-page:** prevent unwanted header toggle from scroll ([#10007](https://github.com/SAP/ui5-webcomponents/issues/10007)) ([7a7d00c](https://github.com/SAP/ui5-webcomponents/commit/7a7d00c0d615283d1a86d775b6c51db7feadfb42))
+* **ui5-media-gallery:** clear selected thumbnail on item removal ([#10087](https://github.com/SAP/ui5-webcomponents/issues/10087)) ([af4cadb](https://github.com/SAP/ui5-webcomponents/commit/af4cadbfb637c1a6440aa0bd1fc516629ae332ae))
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 
diff --git a/packages/fiori/global.d.ts b/packages/fiori/global.d.ts
index 086bbcda9800..28c472a4133f 100644
--- a/packages/fiori/global.d.ts
+++ b/packages/fiori/global.d.ts
@@ -1,5 +1,4 @@
-// eslint-disable-next-line
-import type { BrowserMultiFormatReader, NotFoundException } from "@zxing/library/esm5/index.js";
+import type { BrowserMultiFormatReader, NotFoundException } from "@zxing/library";
 
 export {};
 
diff --git a/packages/fiori/package.json b/packages/fiori/package.json
index d6331774b73d..c3fd2eb9eb38 100644
--- a/packages/fiori/package.json
+++ b/packages/fiori/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -53,15 +53,15 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.4.0-rc.4",
-    "@ui5/webcomponents-base": "2.4.0-rc.4",
-    "@ui5/webcomponents-icons": "2.4.0-rc.4",
-    "@ui5/webcomponents-theming": "2.4.0-rc.4",
-    "@zxing/library": "^0.17.1"
+    "@ui5/webcomponents": "2.5.0-rc.2",
+    "@ui5/webcomponents-base": "2.5.0-rc.2",
+    "@ui5/webcomponents-icons": "2.5.0-rc.2",
+    "@ui5/webcomponents-theming": "2.5.0-rc.2",
+    "@zxing/library": "^0.21.3"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.4.0-rc.4",
-    "chromedriver": "^129.0.0",
+    "@ui5/webcomponents-tools": "2.5.0-rc.2",
+    "chromedriver": "^131.0.0",
     "lit": "^2.0.0"
   }
 }
diff --git a/packages/fiori/src/BarcodeScannerDialog-zxing.d.ts b/packages/fiori/src/BarcodeScannerDialog-zxing.d.ts
index 9c36669472f9..25f3cb9a4a9b 100644
--- a/packages/fiori/src/BarcodeScannerDialog-zxing.d.ts
+++ b/packages/fiori/src/BarcodeScannerDialog-zxing.d.ts
@@ -1,5 +1,5 @@
 declare module "@zxing/library/umd/index.min.js" {
-	import type { BrowserMultiFormatReader as BrowserMultiFormatReaderT, NotFoundException as NotFoundExceptionT } from "@zxing/library/esm5/index.js";
+	import type { BrowserMultiFormatReader as BrowserMultiFormatReaderT, NotFoundException as NotFoundExceptionT } from "@zxing/library";
 
 	export const BrowserMultiFormatReader: typeof BrowserMultiFormatReaderT;
 	export const NotFoundException: typeof NotFoundExceptionT;
diff --git a/packages/fiori/src/BarcodeScannerDialog.ts b/packages/fiori/src/BarcodeScannerDialog.ts
index 63253391eef6..db1610138b64 100644
--- a/packages/fiori/src/BarcodeScannerDialog.ts
+++ b/packages/fiori/src/BarcodeScannerDialog.ts
@@ -10,7 +10,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import type { Result, Exception } from "@zxing/library/esm5/index.js";
+import type { Result, Exception } from "@zxing/library";
 import type { Interval } from "@ui5/webcomponents-base/dist/types.js";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import ZXing from "@ui5/webcomponents-fiori/dist/ssr-zxing.js";
diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
index 44b71c969420..2c536f9f09e7 100644
--- a/packages/fiori/src/DynamicPage.ts
+++ b/packages/fiori/src/DynamicPage.ts
@@ -195,6 +195,7 @@ class DynamicPage extends UI5Element {
 
 	skipSnapOnScroll = false;
 	showHeaderInStickArea = false;
+	isToggled = false;
 
 	@property({ type: Boolean })
 	_headerSnapped = false;
@@ -226,6 +227,7 @@ class DynamicPage extends UI5Element {
 			this.dynamicPageTitle.snapped = this._headerSnapped;
 			this.dynamicPageTitle.interactive = this.hasHeading;
 			this.dynamicPageTitle.hasSnappedTitleOnMobile = !!this.hasSnappedTitleOnMobile;
+			this.dynamicPageTitle.removeAttribute("hovered");
 		}
 	}
 
@@ -246,7 +248,7 @@ class DynamicPage extends UI5Element {
 	}
 
 	get headerInContent(): boolean {
-		return !this.showHeaderInStickArea && !this.headerInTitle;
+		return !this.showHeaderInStickArea && !this.headerInTitle && !this.hasSnappedTitleOnMobile;
 	}
 
 	get _headerLabel() {
@@ -307,29 +309,48 @@ class DynamicPage extends UI5Element {
 			return;
 		}
 
-		const scrollTop = this.scrollContainer!.scrollTop;
-		const lastHeaderSnapped = this._headerSnapped;
+		if (this.isToggled) {
+			this.isToggled = false;
+			return;
+		}
 
 		if (this.skipSnapOnScroll) {
 			this.skipSnapOnScroll = false;
 			return;
 		}
 
-		if (scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) {
+		const scrollTop = this.scrollContainer!.scrollTop;
+		const headerHeight = this.dynamicPageHeader.getBoundingClientRect().height;
+		const lastHeaderSnapped = this._headerSnapped;
+
+		const shouldSnap = !this._headerSnapped && scrollTop > headerHeight + SCROLL_THRESHOLD;
+		const shouldExpand = this._headerSnapped && (scrollTop < headerHeight - SCROLL_THRESHOLD
+			|| (!scrollTop && !headerHeight));
+
+		if (shouldSnap) {
 			this.showHeaderInStickArea = false;
 			this._headerSnapped = true;
-		} else {
+
+			//* snappedTitleOnMobile
+			// If the header is snapped and the scroll is at the top, scroll down a bit
+			// to avoid ending in an endless loop of snapping and unsnapping
+			requestAnimationFrame(() => {
+				if (this.scrollContainer!.scrollTop === 0) {
+					this.scrollContainer!.scrollTop = SCROLL_THRESHOLD;
+				}
+			});
+		} else if (shouldExpand) {
 			this._headerSnapped = false;
 		}
 
+		// Fire event if snapped state changed
 		if (lastHeaderSnapped !== this._headerSnapped) {
 			this.fireDecoratorEvent("title-toggle");
 		}
-
-		this.dynamicPageTitle.snapped = this._headerSnapped;
 	}
 
 	async onExpandClick() {
+		this.isToggled = true;
 		this._toggleHeader();
 		this.fireDecoratorEvent("title-toggle");
 		await renderFinished();
@@ -353,6 +374,7 @@ class DynamicPage extends UI5Element {
 		if (!this.hasHeading) {
 			return;
 		}
+		this.isToggled = true;
 		this._toggleHeader();
 		this.fireDecoratorEvent("title-toggle");
 		await renderFinished();
@@ -360,6 +382,21 @@ class DynamicPage extends UI5Element {
 	}
 
 	async _toggleHeader() {
+		const headerHeight = this.dynamicPageHeader?.getBoundingClientRect().height || 0;
+		const currentScrollTop = this.scrollContainer!.scrollTop;
+
+		if (currentScrollTop > SCROLL_THRESHOLD && currentScrollTop < headerHeight) {
+			if (!this._headerSnapped) {
+				this._headerSnapped = true;
+				this.showHeaderInStickArea = true;
+				this.scrollContainer!.scrollTop = 0;
+			} else {
+				this.showHeaderInStickArea = false;
+				this._headerSnapped = false;
+			}
+			return;
+		}
+
 		if (this.scrollContainer!.scrollTop === SCROLL_THRESHOLD) {
 			this.scrollContainer!.scrollTop = 0;
 		}
diff --git a/packages/fiori/src/DynamicPageTitle.hbs b/packages/fiori/src/DynamicPageTitle.hbs
index 1eb5cb334f2a..7ff15ce277ea 100644
--- a/packages/fiori/src/DynamicPageTitle.hbs
+++ b/packages/fiori/src/DynamicPageTitle.hbs
@@ -28,7 +28,6 @@
       @ui5-_min-content-width-change={{onMinContentWidthChange}}>
       <div id="{{_id}}-heading" class="ui5-dynamic-page-title--heading">
         <slot name="{{headingSlotName}}"></slot>
-        <slot name="{{subheadingSlotName}}"></slot>
       </div>
 
       {{#if hasContent}}
@@ -49,7 +48,7 @@
         {{/unless}}
       </div>
     </div>
-
+    <slot name="{{subheadingSlotName}}"></slot>
   {{/if}}
   
   <span id="{{_id}}-toggle-description" class="ui5-hidden-text">{{_ariaDescribedbyText}}</span>
diff --git a/packages/fiori/src/IllustratedMessage.ts b/packages/fiori/src/IllustratedMessage.ts
index 0e51b6e9c2eb..20a5fa04f6f4 100644
--- a/packages/fiori/src/IllustratedMessage.ts
+++ b/packages/fiori/src/IllustratedMessage.ts
@@ -6,7 +6,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { getIllustrationDataSync, getIllustrationData } from "@ui5/webcomponents-base/dist/asset-registries/Illustrations.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Title from "@ui5/webcomponents/dist/Title.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
diff --git a/packages/fiori/src/NotificationListGroupList.ts b/packages/fiori/src/NotificationListGroupList.ts
index 96822f360f6e..49d2d555a390 100644
--- a/packages/fiori/src/NotificationListGroupList.ts
+++ b/packages/fiori/src/NotificationListGroupList.ts
@@ -31,6 +31,10 @@ class NotificationListGroupList extends List {
 	onItemFocused() {
 	}
 
+	_onfocusin(e: FocusEvent) {
+		e.stopImmediatePropagation();
+	}
+
 	focusItem(item: ListItemBase) {
 		item.focus();
 	}
diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts
index c5c88e399805..09e5c1391dd2 100644
--- a/packages/fiori/src/SideNavigation.ts
+++ b/packages/fiori/src/SideNavigation.ts
@@ -82,6 +82,10 @@ type NavigationMenuClickEventDetail = MenuItemClickEventDetail & {
  * The items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.
  * You must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.
  *
+ * The `ui5-side-navigation` component is intended for use within an `ui5-navigation-layout` component.
+ * While it can function independently, it is recommended to use it with
+ * the `ui5-navigation-layout` for optimal user experience.
+ *
  * ### Keyboard Handling
  *
  * ### Fast Navigation
@@ -146,25 +150,22 @@ class SideNavigation extends UI5Element {
 	collapsed = false;
 
 	/**
-	 * Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component
-	 * for the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested
-	 * inside the items.
+	 * Defines the main items of the component.
 	 *
 	 * @public
 	 */
 	@slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
-	items!: Array<SideNavigationItemBase>;
+	items!: Array<SideNavigationGroup | SideNavigationItem>;
 
 	/**
-	 * Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component
-	 * for the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.
+	 * Defines the fixed items at the bottom of the component.
 	 *
 	 * **Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items)
 	 *
 	 * @public
 	 */
 	@slot({ type: HTMLElement, invalidateOnChildChange: true })
-	fixedItems!: Array<SideNavigationItemBase>;
+	fixedItems!: Array<SideNavigationGroup | SideNavigationItem>;
 
 	/**
 	 * Defines the header of the `ui5-side-navigation`.
@@ -226,7 +227,7 @@ class SideNavigation extends UI5Element {
 	onBeforeRendering() {
 		super.onBeforeRendering();
 
-		this._getAllItems(this.items as Array<SideNavigationItem | SideNavigationGroup>).concat(this._getAllItems(this.fixedItems as Array<SideNavigationItem | SideNavigationGroup>)).forEach(item => {
+		this._getAllItems(this.items).concat(this._getAllItems(this.fixedItems)).forEach(item => {
 			item.sideNavCollapsed = this.collapsed;
 			item.inPopover = this.inPopover;
 			item.sideNavigation = this;
@@ -238,7 +239,7 @@ class SideNavigation extends UI5Element {
 		// item navigation index should be managed, because items are
 		// dynamically recreated and tabIndexes are not updated
 		const tree = this.getPickerTree();
-		const selectedItem = tree._findSelectedItem(tree.items as Array<SideNavigationItem | SideNavigationGroup>);
+		const selectedItem = tree._findSelectedItem(tree.items);
 		if (selectedItem) {
 			selectedItem.focus();
 		} else {
@@ -386,11 +387,11 @@ class SideNavigation extends UI5Element {
 	}
 
 	getEnabledFixedItems() : Array<ITabbable> {
-		return this.getEnabledItems(this.fixedItems as Array<SideNavigationItem | SideNavigationGroup>);
+		return this.getEnabledItems(this.fixedItems);
 	}
 
 	getEnabledFlexibleItems() : Array<ITabbable> {
-		const items = this.getEnabledItems(this.items as Array<SideNavigationItem | SideNavigationGroup>);
+		const items = this.getEnabledItems(this.items);
 
 		if (this._overflowItem) {
 			items.push(this._overflowItem);
@@ -425,12 +426,12 @@ class SideNavigation extends UI5Element {
 
 	onAfterRendering() {
 		if (!this.getDomRef()?.matches(":focus-within")) {
-			let selectedItem = this._findSelectedItem(this.items as Array<SideNavigationItem | SideNavigationGroup>);
+			let selectedItem = this._findSelectedItem(this.items);
 			if (selectedItem) {
 				this._flexibleItemNavigation.setCurrentItem(selectedItem);
 			}
 
-			selectedItem = this._findSelectedItem(this.fixedItems as Array<SideNavigationItem | SideNavigationGroup>);
+			selectedItem = this._findSelectedItem(this.fixedItems);
 			if (selectedItem) {
 				this._fixedItemNavigation.setCurrentItem(selectedItem);
 			}
@@ -549,7 +550,7 @@ class SideNavigation extends UI5Element {
 	}
 
 	get overflowItems() : Array<HTMLElement> {
-		return (this.items as Array<SideNavigationItem | SideNavigationGroup>).reduce((result, item) => {
+		return (this.items).reduce((result, item) => {
 			return result.concat(item.overflowItems);
 		}, new Array<HTMLElement>());
 	}
@@ -609,8 +610,8 @@ class SideNavigation extends UI5Element {
 			return;
 		}
 
-		let items = this._getSelectableItems(this.items as Array<SideNavigationItem | SideNavigationGroup>);
-		items = items.concat(this._getSelectableItems(this.fixedItems as Array<SideNavigationItem | SideNavigationGroup>));
+		let items = this._getSelectableItems(this.items);
+		items = items.concat(this._getSelectableItems(this.fixedItems));
 
 		items.forEach(current => {
 			current.selected = false;
diff --git a/packages/fiori/src/WizardTab.hbs b/packages/fiori/src/WizardTab.hbs
index a944fd611b87..d523590c48d7 100644
--- a/packages/fiori/src/WizardTab.hbs
+++ b/packages/fiori/src/WizardTab.hbs
@@ -20,7 +20,9 @@
 		{{#if hasTexts}}
 			<div class="ui5-wiz-step-texts">
 				<div class="ui5-wiz-step-title-text">{{titleText}}</div>
-				<div class="ui5-wiz-step-subtitle-text">{{subtitleText}}</div>
+				{{#if subtitleText}}
+					<div class="ui5-wiz-step-subtitle-text">{{subtitleText}}</div>
+				{{/if}}
 			</div>
 		{{/if}}
 	</div>
diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css
index c4415e41418b..93db2137cae4 100644
--- a/packages/fiori/src/themes/DynamicPage.css
+++ b/packages/fiori/src/themes/DynamicPage.css
@@ -126,11 +126,4 @@
 
 :host([media-range="XL"]) ::slotted([slot="headerArea"]) {
     padding: var(--_ui5_dynamic_page_header_padding_XL);
-}
-
-/* snappedTitleOnMobile */
-:host([_header-snapped]) ::slotted([slot="headerArea"]) {
-	height: 0;
-	padding: 0;
-	visibility: hidden;
 }
\ No newline at end of file
diff --git a/packages/fiori/test/pages/NavigationLayoutSubHeader.html b/packages/fiori/test/pages/NavigationLayoutSubHeader.html
new file mode 100644
index 000000000000..7e8463bb6546
--- /dev/null
+++ b/packages/fiori/test/pages/NavigationLayoutSubHeader.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Navigation Layout</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<script data-ui5-config type="application/json">
+		{
+			"rtl": false
+		}
+	</script>
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+	<link rel="stylesheet" type="text/css" href="./styles/NavigationLayoutSubHeader.css">
+</head>
+
+<body class="sidenavigation1auto">
+	<ui5-navigation-layout id="nl1">
+		<div slot="header">
+			<ui5-shellbar
+				primary-title="UI5 Web Components"
+				secondary-title="The Best Run SAP"
+			>
+				<ui5-button icon="menu" slot="startButton" id="startButton"></ui5-button>
+			</ui5-shellbar>
+			<ui5-tabcontainer id="tabContainerAsSubheader" collapsed>
+				<ui5-tab text="Tab Text">
+					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
+					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
+				</ui5-tab>
+				<ui5-tab text="Tab Text"></ui5-tab>
+				<ui5-tab text="Tab Text">
+					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
+					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
+				</ui5-tab>
+				<ui5-tab text="Tab Text"></ui5-tab>
+				<ui5-tab text="Tab Text">
+					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
+					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
+				</ui5-tab>
+				<ui5-tab text="Tab Text">
+					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
+					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
+				</ui5-tab>
+				<ui5-tab text="Tab Text">
+					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
+					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
+				</ui5-tab>
+				<ui5-tab text="Tab Text">
+					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
+					<ui5-tab slot="items" text="Child Tab Text"></ui5-tab>
+				</ui5-tab>
+				
+			</ui5-tabcontainer>
+		</div>
+		<div class="content">
+			<div id="home" class="contentItem contentItemVisible">
+				<h2>Home</h2>
+				<p>
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+				</p>
+			</div>
+			<div id="item1" class="contentItem">
+				<h2 >Item 1</h2>
+				<p>
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+				</p>
+			</div>
+			<div id="item2" class="contentItem">
+				<h2>Item 2</h2>
+				<p>
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+				</p>
+			</div>
+			<div id="item3" class="contentItem">
+				<h2>Item 3</h2>
+				<p>
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+				</p>
+			</div>
+			<div id="item4" class="contentItem">
+				<h2>Item 4</h2>
+				<p>
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+				</p>
+			</div>
+			<div id="item5" class="contentItem">
+				<h2>Item 5</h2>
+				<p>
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+				</p>
+			</div>
+			<div id="item6" class="contentItem">
+				<h2>Item 6</h2>
+				<p>
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+				</p>
+			</div>
+			<div id="item7" class="contentItem">
+				<h2>Item 7</h2>
+				<p>
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+				</p>
+			</div>
+			<div id="subitem1" class="contentItem">
+				<h2>Sub Item 1</h2>
+				<p>
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+				</p>
+			</div>
+			<div id="subitem2" class="contentItem">
+				<h2>Sub Item 2</h2>
+				<p>
+					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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+				</p>
+			</div>
+		</div>
+	</ui5-navigation-layout>
+
+	<script>
+		document.querySelector("#startButton").addEventListener("click", function (event) {
+			nl1.sideCollapsed = !nl1.sideCollapsed;
+		});
+
+		document.querySelector("#sn1").addEventListener("selection-change", function (event) {
+			if (event.detail.item.getAttribute("target")) {
+				return;
+			}
+
+			const contentItems = document.querySelectorAll(".contentItem");
+			contentItems.forEach(item => {
+				item.classList.remove("contentItemVisible");
+			});
+			document.getElementById(event.detail.item.getAttribute("href").replace("#", ""))?.classList.add("contentItemVisible");
+		});
+	</script>
+</body>
+</html>
diff --git a/packages/fiori/test/pages/Wizard.html b/packages/fiori/test/pages/Wizard.html
index 1e20df44fe81..627dc636f6c4 100644
--- a/packages/fiori/test/pages/Wizard.html
+++ b/packages/fiori/test/pages/Wizard.html
@@ -673,6 +673,80 @@ <h2>Wizard non-standard 3</h2>
 		</ui5-wizard>
 	</ui5-dialog>
 
+	<h2>Wizard steps with long titles</h2>
+	<ui5-wizard id="wiz3">
+		<ui5-wizard-step icon="product" title-text="Product type">
+		  <div>
+			Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus
+			sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet,
+			feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie
+			neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris
+			vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor,
+			nec dignissim quam convallis ut. Praesent vitae commodo felis, ut
+			iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh.
+			Suspendisse est velit, scelerisque ut commodo eget, dignissim quis
+			metus. Cras faucibus consequat gravida. Curabitur vitae quam felis.
+			Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam
+			erat volutpat.
+		  </div>
+		</ui5-wizard-step>
+		<ui5-wizard-step icon="product" title-text="Overview">
+		  <div>Content for Overview step.</div>
+		</ui5-wizard-step>
+
+		<ui5-wizard-step icon="product" title-text="Details">
+		  <div>Content for Details step.</div>
+		</ui5-wizard-step>
+
+		<ui5-wizard-step
+		  icon="product"
+		  title-text="Specifications and Requirements"
+		  subtitle-text="(Optional)"
+		>
+		  <div>Content for Specifications and Requirements step.</div>
+		</ui5-wizard-step>
+
+		<ui5-wizard-step
+		  icon="product"
+		  title-text="User Instructions and Guidelines for Installation"
+		>
+		  <div>
+			Content for User Instructions and Guidelines for Installation step.
+		  </div>
+		</ui5-wizard-step>
+
+		<ui5-wizard-step icon="product" title-text="Testing">
+		  <div>Content for Testing step.</div>
+		</ui5-wizard-step>
+
+		<ui5-wizard-step icon="product" title-text="Validation">
+		  <div>Content for Validation step.</div>
+		</ui5-wizard-step>
+
+		<ui5-wizard-step icon="product" title-text="Deployment Plan">
+		  <div>Content for Deployment Plan step.</div>
+		</ui5-wizard-step>
+
+		<ui5-wizard-step
+		  icon="product"
+		  title-text="Maintenance and Support Overview"
+		>
+		  <div>Content for Maintenance and Support Overview step.</div>
+		</ui5-wizard-step>
+
+		<ui5-wizard-step icon="product" title-text="Feedback and Improvements">
+		  <div>Content for Feedback and Improvements step.</div>
+		</ui5-wizard-step>
+
+		<ui5-wizard-step
+		  icon="product"
+		  title-text="Final Review and Conclusion for the Entire Process"
+		>
+		  <div>
+			Content for Final Review and Conclusion for the Entire Process step.
+		  </div>
+		</ui5-wizard-step>
+	  </ui5-wizard>
 	<script>
 		var wiz = document.getElementById("wiz");
 
diff --git a/packages/fiori/test/pages/styles/DynamicPage.css b/packages/fiori/test/pages/styles/DynamicPage.css
index d10e82a72307..c750fd254ed5 100644
--- a/packages/fiori/test/pages/styles/DynamicPage.css
+++ b/packages/fiori/test/pages/styles/DynamicPage.css
@@ -63,6 +63,7 @@ html, body {
 }
 .snapped-title-heading [ui5-avatar] {
     position: absolute;
+    top: 0;
 }
 .snapped-title-heading [ui5-title] {
     font-family: var(--sapObjectHeader_Title_FontFamily);
diff --git a/packages/fiori/test/pages/styles/NavigationLayoutSubHeader.css b/packages/fiori/test/pages/styles/NavigationLayoutSubHeader.css
new file mode 100644
index 000000000000..49c598604efa
--- /dev/null
+++ b/packages/fiori/test/pages/styles/NavigationLayoutSubHeader.css
@@ -0,0 +1,16 @@
+.content {
+	padding: 1rem;
+}
+
+.contentItem {
+	display: none;
+}
+
+.contentItemVisible {
+	display: block;
+}
+
+/* Styles for Tab Container inside Navigation Layout */
+#tabContainerAsSubheader::part(tabstrip) {
+	box-shadow: none;
+}
diff --git a/packages/fiori/test/specs/DynamicPage.mobile.spec.js b/packages/fiori/test/specs/DynamicPage.mobile.spec.js
index 6407fb7a5dab..5a532e5fcfd5 100644
--- a/packages/fiori/test/specs/DynamicPage.mobile.spec.js
+++ b/packages/fiori/test/specs/DynamicPage.mobile.spec.js
@@ -23,6 +23,44 @@ describe("DynamicPage Mobile Behaviour", () => {
 		);
 	});
 
+	it("the header content should not be rendered when snappedTitleOnMobile content is present", async () => {
+		const dynamicPage = await browser.$("#page");
+		const headerAreaSlot = await dynamicPage.shadow$("slot[name=headerArea]");
+		const scrollContainer = await dynamicPage.shadow$(".ui5-dynamic-page-scroll-container");
+
+		const initialScrollTop = await scrollContainer.getProperty("scrollTop");
+
+		// Scroll the content to snap the header
+		await browser.execute((container) => {
+			container.scrollTop = 340;
+		}, scrollContainer);
+
+		// Wait until the scroll position has changed
+		await browser.waitUntil(
+			async () => (await scrollContainer.getProperty("scrollTop")) > initialScrollTop,
+			{
+				timeout: 2000,
+				timeoutMsg: "The scroll handler must be called.",
+			}
+		);
+
+		// Assert that the header is snapped
+		const isHeaderSnapped = await dynamicPage.getProperty("headerSnapped");
+		assert.strictEqual(
+			isHeaderSnapped,
+			true,
+			"Header should be snapped when the content is scrolled."
+		);
+
+		// Assert that the header content is not rendered
+		const isHeaderContentRendered = await headerAreaSlot.isExisting();
+		assert.strictEqual(
+			isHeaderContentRendered,
+			false,
+			"Header content should not be rendered when snappedTitleOnMobile slot has content."
+		);
+	});
+
 	it("should not display snapped title on mobile when snappedTitleOnMobile slot is empty", async () => {
 		const dynamicPage = await browser.$("#page");
 		const title = await browser.$("#page ui5-dynamic-page-title");
diff --git a/packages/fiori/test/specs/DynamicPage.spec.js b/packages/fiori/test/specs/DynamicPage.spec.js
index d650d074f74b..0f70c5b6380f 100644
--- a/packages/fiori/test/specs/DynamicPage.spec.js
+++ b/packages/fiori/test/specs/DynamicPage.spec.js
@@ -129,6 +129,28 @@ describe("Page general interaction", () => {
 		await browser.url(`test/pages/DynamicPage_test.html`);
 	});
 
+    it("toggles the header when scrollTop is between SCROLL_THRESHOLD and headerHeight", async () => {
+        const page = await browser.$("#page");
+        const scrollContainer = await page.shadow$(".ui5-dynamic-page-scroll-container");
+        const snapButton = await page.shadow$("ui5-dynamic-page-header-actions").shadow$(".ui5-dynamic-page-header-action");
+
+        await scrollContainer.setProperty("scrollTop", 20);
+
+        assert.strictEqual(await page.getProperty("headerSnapped"), false, "Header is initially expanded");
+
+        await snapButton.click();
+
+        assert.strictEqual(await page.getProperty("headerSnapped"), true, "The header should be snapped");
+        assert.strictEqual(await page.getProperty("showHeaderInStickArea"), true, "Header should be displayed in the sticky area");
+
+        await snapButton.click();
+
+        assert.strictEqual(await page.getProperty("headerSnapped"), false, "The header should be expanded again after unsnapping");
+        assert.strictEqual(await page.getProperty("showHeaderInStickArea"), false, "Header should not be in the sticky area when expanded");
+
+        assert.strictEqual(await scrollContainer.getProperty("scrollTop"), 0, "scrollTop should be reset to 0 after unsnapping");
+    });
+
     it("allows toggle the footer", async () => {
         const footer = await browser.$("#page").shadow$(".ui5-dynamic-page-footer");
         const toggleFooterButton = await browser.$("#actionsToolbar").shadow$("#toggleFooterBtn");
diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md
index 14d9b0aa3630..c8d4809c1b96 100644
--- a/packages/icons-business-suite/CHANGELOG.md
+++ b/packages/icons-business-suite/CHANGELOG.md
@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 **Note:** Version bump only for package @ui5/webcomponents-icons-business-suite
diff --git a/packages/icons-business-suite/package.json b/packages/icons-business-suite/package.json
index 1f5f7cd02bb0..3ffad2f9de80 100644
--- a/packages/icons-business-suite/package.json
+++ b/packages/icons-business-suite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-icons-business-suite",
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "description": "UI5 Web Components: SAP Fiori Tools icon set",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -28,9 +28,9 @@
     "directory": "packages/icons-business-suite"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.4.0-rc.4"
+    "@ui5/webcomponents-base": "2.5.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.4.0-rc.4"
+    "@ui5/webcomponents-tools": "2.5.0-rc.2"
   }
 }
diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md
index ef00c716ace2..509c4e37b133 100644
--- a/packages/icons-tnt/CHANGELOG.md
+++ b/packages/icons-tnt/CHANGELOG.md
@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-tnt
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-tnt
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-tnt
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-tnt
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-tnt
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 **Note:** Version bump only for package @ui5/webcomponents-icons-tnt
diff --git a/packages/icons-tnt/package.json b/packages/icons-tnt/package.json
index faad1c28706b..68ade920b7d0 100644
--- a/packages/icons-tnt/package.json
+++ b/packages/icons-tnt/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-icons-tnt",
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "description": "UI5 Web Components: SAP Fiori Tools icon set",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -28,9 +28,9 @@
     "directory": "packages/icons-tnt"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.4.0-rc.4"
+    "@ui5/webcomponents-base": "2.5.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.4.0-rc.4"
+    "@ui5/webcomponents-tools": "2.5.0-rc.2"
   }
 }
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index e692f40a79ac..8db7dac55419 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 **Note:** Version bump only for package @ui5/webcomponents-icons
diff --git a/packages/icons/package.json b/packages/icons/package.json
index ea5b4da7fa22..a072b514a871 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-icons",
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "description": "UI5 Web Components: webcomponents.SAP-icons",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -28,9 +28,9 @@
     "directory": "packages/icons"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.4.0-rc.4"
+    "@ui5/webcomponents-base": "2.5.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.4.0-rc.4"
+    "@ui5/webcomponents-tools": "2.5.0-rc.2"
   }
 }
diff --git a/packages/icons/src/i18n/messagebundle_sh.properties b/packages/icons/src/i18n/messagebundle_sh.properties
index 0d607a42d5fd..8357be3465fe 100644
--- a/packages/icons/src/i18n/messagebundle_sh.properties
+++ b/packages/icons/src/i18n/messagebundle_sh.properties
@@ -17,7 +17,7 @@ ICON_COLLAPSE=Sažmi
 
 ICON_COLLAPSE_GROUP=Sažmi grupu
 
-ICON_CROP=Isijeci
+ICON_CROP=Iseci
 
 ICON_DECLINE=Odbij
 
@@ -25,7 +25,7 @@ ICON_DELETE=Izbriši
 
 ICON_DISPLAY=Prikaži
 
-ICON_DOWN=Dolje
+ICON_DOWN=Dole
 
 ICON_DOWNLOAD=Prenesi sa servera
 
@@ -35,7 +35,7 @@ ICON_DRILL_UP=Sažmi
 
 ICON_ERROR=Greška
 
-ICON_EXIT_FULL_SCREEN=Izađi iz cijelog ekrana
+ICON_EXIT_FULL_SCREEN=Izađi iz celog ekrana
 
 ICON_EXPAND=Proširi
 
@@ -45,9 +45,9 @@ ICON_FILTER=Filtriraj
 
 ICON_FLAG=Označi
 
-ICON_FORWARD=Proslijedi
+ICON_FORWARD=Prosledi
 
-ICON_FULL_SCREEN=Uđi u cio ekran
+ICON_FULL_SCREEN=Uđi u ceo ekran
 
 ICON_GENERATE_SHORTCUT=Kreiraj prečicu
 
@@ -65,27 +65,27 @@ ICON_MESSAGE_ERROR=Greška
 
 ICON_MESSAGE_INFORMATION=Informacije
 
-ICON_MESSAGE_SUCCESS=Uspješno
+ICON_MESSAGE_SUCCESS=Uspešno
 
 ICON_MESSAGE_WARNING=Upozorenje
 
-ICON_MOVE=Pomjeri
+ICON_MOVE=Pomeri
 
 ICON_MULTI_SELECT=Višestruki odabir
 
-ICON_NAV_BACK=Usmjeri nazad
+ICON_NAV_BACK=Usmeri nazad
 
 ICON_OVERFLOW=Više
 
 ICON_REDO=Ponovo uradi
 
-ICON_REFRESH=Osvježi
+ICON_REFRESH=Osveži
 
-ICON_RESIZE=Promijeni veličinu
+ICON_RESIZE=Promeni veličinu
 
-ICON_RESIZE_HORIZONTAL=Promijeni veličinu horizontalno
+ICON_RESIZE_HORIZONTAL=Promeni veličinu horizontalno
 
-ICON_RESIZE_VERTICAL=Promijeni veličinu vertikalno
+ICON_RESIZE_VERTICAL=Promeni veličinu vertikalno
 
 ICON_RESPONSE=Odgovori
 
@@ -99,9 +99,9 @@ ICON_SHOW=Prikaži
 
 ICON_SORT=Poređaj
 
-ICON_SORT_ASCENDING=Poređaj po rastućem redosljedu
+ICON_SORT_ASCENDING=Poređaj po rastućem redosledu
 
-ICON_SORT_DESCENDING=Poređaj po opadajućem redosljedu
+ICON_SORT_DESCENDING=Poređaj po opadajućem redosledu
 
 ICON_SYNCHRONIZE=Sinhronizuj
 
diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md
index bdae1d60c639..6996df5fbc5d 100644
--- a/packages/localization/CHANGELOG.md
+++ b/packages/localization/CHANGELOG.md
@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-localization
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+**Note:** Version bump only for package @ui5/webcomponents-localization
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+**Note:** Version bump only for package @ui5/webcomponents-localization
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-localization
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-localization
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 **Note:** Version bump only for package @ui5/webcomponents-localization
diff --git a/packages/localization/package.json b/packages/localization/package.json
index 65257ab89d52..2fe8f0318bd5 100644
--- a/packages/localization/package.json
+++ b/packages/localization/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-localization",
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "description": "Localization for UI5 Web Components",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -33,15 +33,15 @@
     "@babel/generator": "^7.23.6",
     "@babel/parser": "^7.23.6",
     "@openui5/sap.ui.core": "1.120.17",
-    "@ui5/webcomponents-tools": "2.4.0-rc.4",
+    "@ui5/webcomponents-tools": "2.5.0-rc.2",
     "babel-plugin-amd-to-esm": "^2.0.3",
-    "chromedriver": "^129.0.0",
+    "chromedriver": "^131.0.0",
     "estree-walk": "^2.2.0",
     "mkdirp": "^1.0.4",
     "resolve": "^1.20.0"
   },
   "dependencies": {
     "@types/openui5": "^1.113.0",
-    "@ui5/webcomponents-base": "2.4.0-rc.4"
+    "@ui5/webcomponents-base": "2.5.0-rc.2"
   }
 }
diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md
index d9523456f582..df8c7f882f9e 100644
--- a/packages/main/CHANGELOG.md
+++ b/packages/main/CHANGELOG.md
@@ -3,6 +3,92 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+
+### Bug Fixes
+
+* **ui5-input:** set value after preventDefault of input event ([#10196](https://github.com/SAP/ui5-webcomponents/issues/10196)) ([e2a6c94](https://github.com/SAP/ui5-webcomponents/commit/e2a6c94d6b4d88db61d85313f2776a092152478d)), closes [#9988](https://github.com/SAP/ui5-webcomponents/issues/9988)
+* **ui5-radio-button:** fix aria-disabled and focus of the read-only radio buttons ([#10111](https://github.com/SAP/ui5-webcomponents/issues/10111)) ([3bcfd1d](https://github.com/SAP/ui5-webcomponents/commit/3bcfd1d26b8520b73be336558f590e1b89c4d0c3)), closes [#10025](https://github.com/SAP/ui5-webcomponents/issues/10025)
+* **ui5-tokenizer:** adjust touch area for cozy and compact ([#10215](https://github.com/SAP/ui5-webcomponents/issues/10215)) ([ee90aea](https://github.com/SAP/ui5-webcomponents/commit/ee90aeaae00a3a888a8dafae73cb7dba1bf8e51f))
+
+
+### Features
+
+* **ui5-combobox:** adjust arrow-down behavior ([#10166](https://github.com/SAP/ui5-webcomponents/issues/10166)) ([74616dc](https://github.com/SAP/ui5-webcomponents/commit/74616dc7ea533ecbd18265878c90339e10eb9d1b))
+* **ui5-form:** add new `emptySpan` property ([#10194](https://github.com/SAP/ui5-webcomponents/issues/10194)) ([48b0cc8](https://github.com/SAP/ui5-webcomponents/commit/48b0cc89b36dd859dd07c17021eedf7a99375150)), closes [#9963](https://github.com/SAP/ui5-webcomponents/issues/9963)
+* **ui5-list:** add Home and End key handling for Load More button ([#10206](https://github.com/SAP/ui5-webcomponents/issues/10206)) ([7059e09](https://github.com/SAP/ui5-webcomponents/commit/7059e0987960f62cd5b8740594b907fa98e1f11c))
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+
+### Bug Fixes
+
+* **ui5-dialog:** width on mobile is not bigger than the phone width ([#10199](https://github.com/SAP/ui5-webcomponents/issues/10199)) ([77af592](https://github.com/SAP/ui5-webcomponents/commit/77af592c238ad53502c09f142d33f7c66c6b0715)), closes [#10000](https://github.com/SAP/ui5-webcomponents/issues/10000)
+
+
+### Features
+
+* **ui5-form:** enable vertical alignment of form items ([#10165](https://github.com/SAP/ui5-webcomponents/issues/10165)) ([13b571b](https://github.com/SAP/ui5-webcomponents/commit/13b571baf0b225dfabc4739be64dd64a34cc5506))
+* **ui5-toolbar:** fixed spacer behavior ([#10177](https://github.com/SAP/ui5-webcomponents/issues/10177)) ([b3625ac](https://github.com/SAP/ui5-webcomponents/commit/b3625ac7426aa592b80f50e15147c18ccc7d2abd)), closes [#10104](https://github.com/SAP/ui5-webcomponents/issues/10104)
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+
+### Bug Fixes
+
+* **ui5-card-header:** update interactive property documentation ([#10143](https://github.com/SAP/ui5-webcomponents/issues/10143)) ([23289d4](https://github.com/SAP/ui5-webcomponents/commit/23289d4d1696d0441823d98f71b5e21b617777c3))
+* **ui5-table-growing:** button is shown despite scroll type ([#10142](https://github.com/SAP/ui5-webcomponents/issues/10142)) ([950441b](https://github.com/SAP/ui5-webcomponents/commit/950441b7d272e8cd20499461f4cfa05ad3ac7510)), closes [#10045](https://github.com/SAP/ui5-webcomponents/issues/10045)
+
+
+### Features
+
+* **ui5-color-picker:** add simplified display mode ([#10153](https://github.com/SAP/ui5-webcomponents/issues/10153)) ([bf9c0d6](https://github.com/SAP/ui5-webcomponents/commit/bf9c0d653be5af5473a7b616f2c91803db46beb3)), closes [#9979](https://github.com/SAP/ui5-webcomponents/issues/9979)
+* **ui5-combobox/multi-combobox:** physical items ([#10051](https://github.com/SAP/ui5-webcomponents/issues/10051)) ([73f82ab](https://github.com/SAP/ui5-webcomponents/commit/73f82abe5e9a61d88919f4c45df9435be850eb2f))
+* **ui5-form:** update to latest accessibility spec ([#10152](https://github.com/SAP/ui5-webcomponents/issues/10152)) ([4382d4e](https://github.com/SAP/ui5-webcomponents/commit/4382d4e280ffcf01a924163b9b719887c17f529a)), closes [#9952](https://github.com/SAP/ui5-webcomponents/issues/9952)
+* **ui5-list, ui5-tree:** support accessible description ([#10131](https://github.com/SAP/ui5-webcomponents/issues/10131)) ([45f0ffe](https://github.com/SAP/ui5-webcomponents/commit/45f0ffeafb2da0ffcaf425649c7440b604e359a3)), closes [#6445](https://github.com/SAP/ui5-webcomponents/issues/6445)
+* **ui5-tokenizer:** enable multiline mode ([#9964](https://github.com/SAP/ui5-webcomponents/issues/9964)) ([1071746](https://github.com/SAP/ui5-webcomponents/commit/107174616b5b3b96c174160488eba18b9cdb9cae))
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+
+### Bug Fixes
+
+* **ui5-menu:** make close event non-bubbling ([#10133](https://github.com/SAP/ui5-webcomponents/issues/10133)) ([e7ccce9](https://github.com/SAP/ui5-webcomponents/commit/e7ccce968cab25a07837c41f36d94603c31e007e)), closes [#10041](https://github.com/SAP/ui5-webcomponents/issues/10041)
+* **ui5-select:** add support for Vue.js v-model ([#10149](https://github.com/SAP/ui5-webcomponents/issues/10149)) ([14947a7](https://github.com/SAP/ui5-webcomponents/commit/14947a7bbcf3272f56888bb466696784095b574f)), closes [#9971](https://github.com/SAP/ui5-webcomponents/issues/9971)
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+
+### Bug Fixes
+
+* **ui5-toolbar-*:** ensure getDomRef() returns the actual DOM reference ([#10009](https://github.com/SAP/ui5-webcomponents/issues/10009)) ([747244d](https://github.com/SAP/ui5-webcomponents/commit/747244d93fee5ee0d1ac54863de5e3573f4d6248))
+
+
+### Features
+
+* **ui5-date-picker:** introduce open and close events ([#10118](https://github.com/SAP/ui5-webcomponents/issues/10118)) ([819730a](https://github.com/SAP/ui5-webcomponents/commit/819730afbec336ad04e1207b8fee24bcd69f7c2d))
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 
diff --git a/packages/main/cypress/specs/Button.cy.ts b/packages/main/cypress/specs/Button.cy.ts
index 2a6673582d60..c3292b8bae04 100644
--- a/packages/main/cypress/specs/Button.cy.ts
+++ b/packages/main/cypress/specs/Button.cy.ts
@@ -111,49 +111,6 @@ describe("Button general interaction", () => {
 			.should("not.been.called");
 	});
 
-	it("aria-expanded is properly applied on the button tag", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
-
-		cy.get("[ui5-button]")
-			.as("button");
-
-		cy.get<Button>("@button")
-			.then($el => {
-				$el.get(0).accessibilityAttributes = {
-					expanded: "true",
-				};
-			});
-
-		cy.get("@button")
-			.shadow()
-			.find("button")
-			.should("have.attr", "aria-expanded", "true");
-
-		cy.get<Button>("@button")
-			.then($el => {
-				$el.get(0).accessibilityAttributes = {
-					expanded: "false",
-				};
-			});
-
-		cy.get("@button")
-			.shadow()
-			.find("button")
-			.should("have.attr", "aria-expanded", "false");
-	});
-
-	it("not setting accessible-role on the host keeps the correct role on the button tag", () => {
-		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
-
-		cy.get("[ui5-button]")
-			.shadow()
-			.find("button")
-			.as("button");
-
-		cy.get("@button")
-			.should("have.attr", "role", "button");
-	});
-
 	it("tests button's icon only rendering", () => {
 		cy.mount(html`<ui5-button icon="home"><!----><!----></ui5-button>`);
 
@@ -252,6 +209,87 @@ describe("Button general interaction", () => {
 			.find("[ui5-icon]")
 			.should("have.attr", "mode", "Decorative");
 	});
+});
+
+describe("Accessibility", () => {
+	it("setting tooltip on the host is reflected on the button tag", () => {
+		cy.mount(html`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "title", "Go home");
+	});
+
+	it("tooltip from inner icon is propagated", () => {
+		cy.mount(html`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "title", "Download");
+	});
+
+	it("aria-expanded is properly applied on the button tag", () => {
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get<Button>("@button")
+			.then($el => {
+				$el.get(0).accessibilityAttributes = {
+					expanded: "true",
+				};
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-expanded", "true");
+
+		cy.get<Button>("@button")
+			.then($el => {
+				$el.get(0).accessibilityAttributes = {
+					expanded: "false",
+				};
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-expanded", "false");
+	});
+
+	it("setting accessible-role on the host is reflected on the button tag", () => {
+		cy.mount(html`<ui5-button accessible-role="Link"> Navigation Button </ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "role", "link");
+	});
+
+	it("not setting accessible-role on the host keeps the correct role on the button tag", () => {
+		cy.mount(html`<ui5-button icon="home" design="Emphasized">Action Bar Button</ui5-button>`);
+
+		cy.get("[ui5-button]")
+			.shadow()
+			.find("button")
+			.as("button");
+
+		cy.get("@button")
+			.should("have.attr", "role", "button");
+	});
 
 	it("aria-describedby properly applied on the button tag", () => {
 		const hiddenTextTypeId = "ui5-button-hiddenText-type";
@@ -310,8 +348,8 @@ describe("Button general interaction", () => {
 			.should("have.attr", "aria-controls", "registration-dialog");
 	});
 
-	it("setting tooltip on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button icon="message-information" tooltip="Go home"></ui5-button>`);
+	it("setting accessible-description is applied to button tag", () => {
+		cy.mount(html`<ui5-button accessible-description="A long description."></ui5-button>`);
 
 		cy.get("[ui5-button]")
 			.shadow()
@@ -319,30 +357,6 @@ describe("Button general interaction", () => {
 			.as("button");
 
 		cy.get("@button")
-			.should("have.attr", "title", "Go home");
-	});
-
-	it("tooltip from inner icon is propagated", () => {
-		cy.mount(html`<ui5-button icon="download" accessible-name="Download application"></ui5-button>`);
-
-		cy.get("[ui5-button]")
-			.shadow()
-			.find("button")
-			.as("button");
-
-		cy.get("@button")
-			.should("have.attr", "title", "Download");
-	});
-
-	it("setting accessible-role on the host is reflected on the button tag", () => {
-		cy.mount(html`<ui5-button accessible-role="Link"> Navigation Button </ui5-button>`);
-
-		cy.get("[ui5-button]")
-			.shadow()
-			.find("button")
-			.as("button");
-
-		cy.get("@button")
-			.should("have.attr", "role", "link");
+			.should("have.attr", "aria-description", "A long description.");
 	});
 });
diff --git a/packages/main/cypress/specs/ColorPicker.cy.ts b/packages/main/cypress/specs/ColorPicker.cy.ts
new file mode 100644
index 000000000000..30805685506c
--- /dev/null
+++ b/packages/main/cypress/specs/ColorPicker.cy.ts
@@ -0,0 +1,27 @@
+import { html } from "lit";
+import "../../src/ColorPicker.js";
+import type ColorPicker from "../../src/ColorPicker.js";
+
+describe("Color Picker tests", () => {
+	it("should not display color channel inputs and alpha slider in simplified mode", () => {
+		cy.mount(html`<ui5-color-picker display-mode="Simplified"></ui5-color-picker>`);
+
+		cy.get("ui5-color-picker")
+			.as("colorPicker");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find(".ui5-color-picker-hex-input")
+			.should("exist");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#red")
+			.should("not.exist");
+
+		cy.get<ColorPicker>("@colorPicker")
+			.shadow()
+			.find("#alpha")
+			.should("not.exist");
+	});
+});
diff --git a/packages/main/cypress/specs/Eventing.cy.ts b/packages/main/cypress/specs/Eventing.cy.ts
deleted file mode 100644
index 2f4f1886e4ba..000000000000
--- a/packages/main/cypress/specs/Eventing.cy.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-// import { html } from "lit";
-import "../../src/Button.js";
-
-describe("Eventing", () => {
-	it("Default prevented", () => {
-		// 		cy.mount(html`<form method="get">
-		// 	<ui5-button submits>Submit</ui5-button>
-		// </form>`);
-
-		// 		cy.get("form")
-		// 			.then($item => {
-		// 				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
-		// 			});
-
-		// 		cy.get("[ui5-button]")
-		// 			.then($item => {
-		// 				$item.get(0).addEventListener("click", e => e.preventDefault());
-		// 			});
-
-		// 		cy.get("[ui5-button]")
-		// 			.realClick();
-
-		// 		cy.get("@submit")
-		// 			.should("have.not.been.called");
-	});
-
-	// 	it("Default not prevented", () => {
-	// 		cy.mount(html`<form>
-	// 	<ui5-button submits>Submit</ui5-button>
-	// </form>`);
-
-	// 		cy.get("form")
-	// 			.then($item => {
-	// 				$item.get(0).addEventListener("submit", e => e.preventDefault());
-	// 				$item.get(0).addEventListener("submit", cy.stub().as("submit"));
-	// 			});
-
-	// 		cy.get("[ui5-button]")
-	// 			.realClick();
-
-// 		cy.get("@submit")
-// 			.should("have.been.called");
-// 	});
-});
diff --git a/packages/main/cypress/specs/Form.cy.ts b/packages/main/cypress/specs/Form.cy.ts
index 2519abcf643d..550f436ce6af 100644
--- a/packages/main/cypress/specs/Form.cy.ts
+++ b/packages/main/cypress/specs/Form.cy.ts
@@ -1,29 +1,33 @@
 import { html } from "lit";
+import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
 import "../../src/Form.js";
 import "../../src/FormItem.js";
 import "../../src/FormGroup.js";
+import "../../src/Label.js";
+import "../../src/Text.js";
+import "../../src/Input.js";
 
 describe("General API", () => {
-	it("tests calculated state of Form with default layout and label-span", () => {
+	it("tests calculated state of Form with default layout, label-span and empty-span", () => {
 		cy.mount(html`<ui5-form class="addressForm" header-text="Default form">
 			<ui5-form-group header-text="Address">
 				<ui5-form-item>
-					<span slot="labelContent">Name:</span>
-					<span class="text">Red Point Stores</span>
+					<ui5-label slot="labelContent">Name</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
 				</ui5-form-item>
 			</ui5-form-group>
 
 			<ui5-form-group id="testFormGroup2" header-text="Contact">
 				<ui5-form-item>
-					<span slot="labelContent">Twitter:</span>
-					<span class="text">@sap</span>
+					<ui5-label slot="labelContent">Twitter</ui5-label>
+					<ui5-text>@sap</ui5-text>
 				</ui5-form-item>
 			</ui5-form-group>
 
 			<ui5-form-group id="testFormGroup3" header-text="Other info">
 				<ui5-form-item>
-					<span slot="labelContent">Name:</span>
-					<span class="text">Red Point Stores</span>
+					<ui5-label slot="labelContent">Name</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
 				</ui5-form-item>
 			</ui5-form-group>
 		</ui5-form>`);
@@ -32,50 +36,40 @@ describe("General API", () => {
 			.as("form");
 
 		cy.get("@form")
-			.should("have.prop", "columnsS", 1);
-
-		cy.get("@form")
-			.should("have.prop", "labelSpanS", 12);
-
-		cy.get("@form")
-			.should("have.prop", "columnsM", 1);
-
-		cy.get("@form")
-			.should("have.prop", "labelSpanM", 4);
-
-		cy.get("@form")
-			.should("have.prop", "columnsL", 2);
-
-		cy.get("@form")
-			.should("have.prop", "labelSpanL", 4);
-
-		cy.get("@form")
-			.should("have.prop", "columnsXl", 3);
-
-		cy.get("@form")
-			.should("have.prop", "labelSpanXl", 4);
+			.should("have.prop", "columnsS", 1)
+			.and("have.prop", "labelSpanS", 12)
+			.and("have.prop", "emptySpanS", 0)
+			.and("have.prop", "columnsM", 1)
+			.and("have.prop", "labelSpanM", 4)
+			.and("have.prop", "emptySpanM", 0)
+			.and("have.prop", "columnsL", 2)
+			.and("have.prop", "labelSpanL", 4)
+			.and("have.prop", "emptySpanL", 0)
+			.and("have.prop", "columnsXl", 3)
+			.and("have.prop", "emptySpanXl", 0)
+			.and("have.prop", "labelSpanXl", 4);
 	});
 
 	it("tests calculated state of Form with layout='S1 M2 L3 XL6' and label-span='S12 M4 L4 XL4'", () => {
 		cy.mount(html`<ui5-form class="addressForm" header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
 	<ui5-form-group header-text="Address">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span class="text">Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup2" header-text="Contact">
 		<ui5-form-item>
-			<span slot="labelContent">Twitter:</span>
-			<span class="text">@sap</span>
+			<ui5-label slot="labelContent">Twitter</ui5-label>
+			<ui5-text>@sap</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup3" header-text="Other info">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span class="text">Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 </ui5-form>`);
@@ -111,34 +105,34 @@ describe("General API", () => {
 	it("tests calculated state of Form with layout='S1 M2 L2 XL3' label-span='S12 M12 L12 XL12'", () => {
 		cy.mount(html`<ui5-form header-text="Labels on top" layout="S1 M2 L2 XL3" label-span="S12 M12 L12 XL12">
 	<ui5-form-item>
-		<span slot="labelContent">Name:</span>
+		<ui5-label slot="labelContent">Name</ui5-label>
 		<input />
 	</ui5-form-item>
 
 	<ui5-form-item>
-		<span slot="labelContent">ZIP Code/City:</span>
+		<ui5-label slot="labelContent">ZIP Code/City</ui5-label>
 		<input />
 		<input />
 	</ui5-form-item>
 
 	<ui5-form-item>
-		<span slot="labelContent">Street:</span>
+		<ui5-label slot="labelContent">Street</ui5-label>
 		<input />
 		<input />
 	</ui5-form-item>
 
 	<ui5-form-item>
-		<span slot="labelContent">Country:</span>
+		<ui5-label slot="labelContent">Country</ui5-label>
 		<input />
 	</ui5-form-item>
 
 	<ui5-form-item>
-		<span slot="labelContent">WebSite:</span>
+		<ui5-label slot="labelContent">WebSite</ui5-label>
 		<input />
 	</ui5-form-item>
 
 	<ui5-form-item>
-		<span slot="labelContent">Delivery address:</span>
+		<ui5-label slot="labelContent">Delivery address</ui5-label>
 		<input />
 	</ui5-form-item>
 </ui5-form>`);
@@ -171,24 +165,58 @@ describe("General API", () => {
 			.should("have.prop", "labelSpanXl", 12);
 	});
 
+	it("tests calculated state of Form empty-span='S0 M0 L1 XL1'", () => {
+		cy.mount(html`<ui5-form empty-span="L1 XL1">
+			<ui5-form-group header-text="Address">
+				<ui5-form-item>
+					<ui5-label slot="labelContent">Name</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
+				</ui5-form-item>
+			</ui5-form-group>
+
+			<ui5-form-group id="testFormGroup2" header-text="Contact">
+				<ui5-form-item>
+					<ui5-label slot="labelContent">Twitter</ui5-label>
+					<ui5-text>@sap</ui5-text>
+				</ui5-form-item>
+			</ui5-form-group>
+
+			<ui5-form-group id="testFormGroup3" header-text="Other info">
+				<ui5-form-item>
+					<ui5-label slot="labelContent">Name</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
+				</ui5-form-item>
+			</ui5-form-group>
+		</ui5-form>`);
+
+		cy.get("[ui5-form]")
+			.as("form");
+
+		cy.get("@form")
+			.should("have.prop", "emptySpanS", 0)
+			.and("have.prop", "emptySpanM", 0)
+			.and("have.prop", "emptySpanL", 1)
+			.and("have.prop", "emptySpanXl", 1);
+	});
+
 	it("tests calculated state of two FormGroups in layout='S1 M2 L3 XL4'", () => {
 		cy.mount(html`<ui5-form header-text="WebC :: Supplier 2gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
 	<ui5-form-group id="testFormGroup4" header-text="Address">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span>Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup5" header-text="Contact">
 		<ui5-form-item>
-			<span slot="labelContent">Twitter:</span>
-			<span>@sap</span>
+			<ui5-label slot="labelContent">Twitter</ui5-label>
+			<ui5-text>@sap</ui5-text>
 		</ui5-form-item>
 
 		<ui5-form-item>
-			<span slot="labelContent">Email:</span>
-			<span>john.smith@sap.com</span>
+			<ui5-label slot="labelContent">Email</ui5-label>
+			<ui5-text>john.smith@sap.com</ui5-text>
 		</ui5-form-item>
 </ui5-form>`);
 
@@ -227,37 +255,37 @@ describe("General API", () => {
 		cy.mount(html`<ui5-form header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
 	<ui5-form-group id="testFormGroup1" header-text="Address">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span>Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup2" header-text="Contact">
 		<ui5-form-item>
-			<span slot="labelContent">Twitter:</span>
-			<span>@sap</span>
+			<ui5-label slot="labelContent">Twitter</ui5-label>
+			<ui5-text>@sap</ui5-text>
 		</ui5-form-item>
 
 		<ui5-form-item>
-			<span slot="labelContent">Email:</span>
-			<span>john.smith@sap.com</span>
+			<ui5-label slot="labelContent">Email</ui5-label>
+			<ui5-text>john.smith@sap.com</ui5-text>
 		</ui5-form-item>
 
 		<ui5-form-item>
-			<span slot="labelContent">Tel:</span>
-			<span>+49 6227 747474</span>
+			<ui5-label slot="labelContent">Tel</ui5-label>
+			<ui5-text>+49 6227 747474</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup3" header-text="Other info">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span>Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 
 		<ui5-form-item>
-			<span slot="labelContent">ZIP Code/City:</span>
-			<span>411 Maintown</span>
+			<ui5-label slot="labelContent">ZIP Code/City</ui5-label>
+			<ui5-text>411 Maintown</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 </ui5-form>`);
@@ -312,27 +340,27 @@ describe("General API", () => {
 		cy.mount(html`<ui5-form header-text="WebC :: Supplier 3gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
 	<ui5-form-group id="testFormGroup6" header-text="Address">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span>Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup7" header-text="Contact">
 		<ui5-form-item>
-			<span slot="labelContent">Twitter:</span>
-			<span>@sap</span>
+			<ui5-label slot="labelContent">Twitter</ui5-label>
+			<ui5-text>@sap</ui5-text>
 		</ui5-form-item>
 
 		<ui5-form-item>
-			<span slot="labelContent">Email:</span>
-			<span>john.smith@sap.com</span>
+			<ui5-label slot="labelContent">Email</ui5-label>
+			<ui5-text>john.smith@sap.com</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 
 	<ui5-form-group id="testFormGroup8" header-text="Other info">
 		<ui5-form-item>
-			<span slot="labelContent">Name:</span>
-			<span>Red Point Stores</span>
+			<ui5-label slot="labelContent">Name</ui5-label>
+			<ui5-text>Red Point Stores</ui5-text>
 		</ui5-form-item>
 	</ui5-form-group>
 </ui5-form>`);
@@ -382,4 +410,447 @@ describe("General API", () => {
 		cy.get("@formGr3")
 			.should("have.prop", "colsXl", 1);
 	});
+
+	describe("tests items ordering within a group", () => {
+		beforeEach(() => {
+			cy.mount(html`<ui5-form layout="S3 M4 L5 XL6">
+	<ui5-form-group>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>1</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>2</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>3</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>4</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>5</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>6</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>7</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>8</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>9</span>
+		</ui5-form-item>
+		<ui5-form-item>
+			<span slot="labelContent">Item:</span>
+			<span>10</span>
+		</ui5-form-item>
+	</ui5-form-group>
+</ui5-form>`);
+		});
+
+		it("10 items in 6 columns", () => {
+			cy.get("[ui5-form]")
+				.invoke("width", 1500);
+
+			cy.get("[ui5-form-item]")
+				.as("items");
+
+			cy.get("@items")
+				.eq(0)
+				.should("have.css", "order", "0");
+
+			cy.get("@items")
+				.eq(1)
+				.should("have.css", "order", "6");
+
+			cy.get("@items")
+				.eq(2)
+				.should("have.css", "order", "1");
+
+			cy.get("@items")
+				.eq(3)
+				.should("have.css", "order", "7");
+
+			cy.get("@items")
+				.eq(4)
+				.should("have.css", "order", "2");
+
+			cy.get("@items")
+				.eq(5)
+				.should("have.css", "order", "8");
+
+			cy.get("@items")
+				.eq(6)
+				.should("have.css", "order", "3");
+
+			cy.get("@items")
+				.eq(7)
+				.should("have.css", "order", "9");
+
+			cy.get("@items")
+				.eq(8)
+				.should("have.css", "order", "4");
+
+			cy.get("@items")
+				.eq(9)
+				.should("have.css", "order", "5");
+		});
+
+		it("10 items in 5 columns", () => {
+			cy.get("[ui5-form]")
+				.invoke("width", 1300);
+
+			cy.get("[ui5-form-item]")
+				.as("items");
+
+			cy.get("@items")
+				.eq(0)
+				.should("have.css", "order", "0");
+
+			cy.get("@items")
+				.eq(1)
+				.should("have.css", "order", "5");
+
+			cy.get("@items")
+				.eq(2)
+				.should("have.css", "order", "1");
+
+			cy.get("@items")
+				.eq(3)
+				.should("have.css", "order", "6");
+
+			cy.get("@items")
+				.eq(4)
+				.should("have.css", "order", "2");
+
+			cy.get("@items")
+				.eq(5)
+				.should("have.css", "order", "7");
+
+			cy.get("@items")
+				.eq(6)
+				.should("have.css", "order", "3");
+
+			cy.get("@items")
+				.eq(7)
+				.should("have.css", "order", "8");
+
+			cy.get("@items")
+				.eq(8)
+				.should("have.css", "order", "4");
+
+			cy.get("@items")
+				.eq(9)
+				.should("have.css", "order", "9");
+		});
+
+		it("10 items in 4 columns", () => {
+			cy.get("[ui5-form]")
+				.invoke("width", 800);
+
+			cy.get("[ui5-form-item]")
+				.as("items");
+
+			cy.get("@items")
+				.eq(0)
+				.should("have.css", "order", "0");
+
+			cy.get("@items")
+				.eq(1)
+				.should("have.css", "order", "4");
+
+			cy.get("@items")
+				.eq(2)
+				.should("have.css", "order", "8");
+
+			cy.get("@items")
+				.eq(3)
+				.should("have.css", "order", "1");
+
+			cy.get("@items")
+				.eq(4)
+				.should("have.css", "order", "5");
+
+			cy.get("@items")
+				.eq(5)
+				.should("have.css", "order", "9");
+
+			cy.get("@items")
+				.eq(6)
+				.should("have.css", "order", "2");
+
+			cy.get("@items")
+				.eq(7)
+				.should("have.css", "order", "6");
+
+			cy.get("@items")
+				.eq(8)
+				.should("have.css", "order", "3");
+
+			cy.get("@items")
+				.eq(9)
+				.should("have.css", "order", "7");
+		});
+
+		it("10 items in 3 columns", () => {
+			cy.get("[ui5-form]")
+				.invoke("width", 500);
+
+			cy.get("[ui5-form-item]")
+				.as("items");
+
+			cy.get("@items")
+				.eq(0)
+				.should("have.css", "order", "0");
+
+			cy.get("@items")
+				.eq(1)
+				.should("have.css", "order", "3");
+
+			cy.get("@items")
+				.eq(2)
+				.should("have.css", "order", "6");
+
+			cy.get("@items")
+				.eq(3)
+				.should("have.css", "order", "9");
+
+			cy.get("@items")
+				.eq(4)
+				.should("have.css", "order", "1");
+
+			cy.get("@items")
+				.eq(5)
+				.should("have.css", "order", "4");
+
+			cy.get("@items")
+				.eq(6)
+				.should("have.css", "order", "7");
+
+			cy.get("@items")
+				.eq(7)
+				.should("have.css", "order", "2");
+
+			cy.get("@items")
+				.eq(8)
+				.should("have.css", "order", "5");
+
+			cy.get("@items")
+				.eq(9)
+				.should("have.css", "order", "8");
+		});
+	});
+});
+
+describe("Accessibility", () => {
+	it("tests 'role' and 'aria-labelledby' of form with groups", () => {
+		cy.mount(html`<ui5-form class="addressForm" header-text="Form header text">
+			<ui5-form-group header-text="Address">
+				<ui5-form-item>
+					<ui5-label>Name:</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
+				</ui5-form-item>
+			</ui5-form-group>
+
+			<ui5-form-group id="testFormGroup2" header-text="Contact">
+				<ui5-form-item>
+					<ui5-label>Twitter:</ui5-label>
+					<ui5-text>@sap</ui5-text>
+				</ui5-form-item>
+			</ui5-form-group>
+
+			<ui5-form-group id="testFormGroup3" header-text="Other info">
+				<ui5-form-item>
+					<ui5-label>Name:</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
+				</ui5-form-item>
+			</ui5-form-group>
+		</ui5-form>`);
+
+		cy.get("[ui5-form]")
+			.as("form");
+
+		cy.get("[ui5-form-group]")
+			.first()
+			.as("formGroup");
+
+		cy.get("@form")
+			.shadow()
+			.find(".ui5-form-root")
+			.should("have.attr", "role", "region");
+
+		// assert: the root element's aria-labelledby is equal to the form title's ID
+		cy.get("@form").shadow().find(".ui5-form-root").invoke("attr", "aria-labelledby")
+			.then(ariaLabelledBy => {
+				cy.get("@form").shadow().find(".ui5-form-header [ui5-title]")
+					.invoke("attr", "id")
+					.then(id => {
+						expect(ariaLabelledBy).to.equal(id);
+					});
+			});
+
+		cy.get("@form")
+			.shadow()
+			.find(".ui5-form-group")
+			.eq(0)
+			.as("firstGroupDOMRef");
+
+		cy.get("@form")
+			.shadow()
+			.find(".ui5-form-group [ui5-title]")
+			.eq(0)
+			.as("firstGroupTitle");
+
+		cy.get("@form")
+			.should("not.have.attr", "data-sap-ui-fastnavgroup", "true");
+
+		cy.get("@formGroup")
+			.should("have.attr", "data-sap-ui-fastnavgroup", "true");
+
+		cy.get("@firstGroupDOMRef")
+			.should("have.attr", "role", "form");
+
+		// assert: the form group's aria-labelledby is equal to the form group title's ID
+		cy.get("@firstGroupDOMRef")
+			.invoke("attr", "aria-labelledby")
+			.then(ariaLabelledBy => {
+				cy.get("@firstGroupTitle")
+					.invoke("attr", "id")
+					.then(id => {
+						expect(ariaLabelledBy).to.equal(id);
+					});
+			});
+	});
+
+	it("tests 'role' and 'aria-labelledby' of form without groups", () => {
+		cy.mount(html`<ui5-form class="addressForm" header-text="Form header text">
+				<ui5-form-item>
+					<ui5-label>Name:</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
+				</ui5-form-item>
+				<ui5-form-item>
+					<ui5-label>Twitter:</ui5-label>
+					<ui5-text>@sap</ui5-text>
+				</ui5-form-item>
+				<ui5-form-item>
+					<ui5-label>Name:</ui5-label>
+					<ui5-text>Red Point Stores</ui5-text>
+				</ui5-form-item>
+		</ui5-form>`);
+
+		cy.get("[ui5-form]")
+			.as("form");
+
+		cy.get("@form")
+			.shadow()
+			.find(".ui5-form-root")
+			.should("have.attr", "role", "form");
+
+		cy.get("@form")
+			.should("have.attr", "data-sap-ui-fastnavgroup", "true");
+
+		// assert: the root element's aria-labelledby is equal to the form title's ID
+		cy.get("@form").shadow().find(".ui5-form-root").invoke("attr", "aria-labelledby")
+			.then(ariaLabelledBy => {
+				cy.get("@form").shadow().find(".ui5-form-header [ui5-title]")
+					.invoke("attr", "id")
+					.then(id => {
+						expect(ariaLabelledBy).to.equal(id);
+					});
+			});
+	});
+
+	it("tests F6 navigation", () => {
+		cy.mount(html`
+			<section>
+				<button id="before">Before element</button>
+			</section>
+			<ui5-form id="formWithGroups" header-text="Form 1">
+				<ui5-form-group header-text="Address">
+					<ui5-form-item>
+						<ui5-label for="nameInp" slot="labelContent">Name:</ui5-label>
+						<ui5-input value="Red Point Stores" id="nameInp"></ui5-input>
+					</ui5-form-item>
+				
+					<ui5-form-item>
+						<ui5-label id="cityLbl" for="cityInp" slot="labelContent">ZIP Code/City:</ui5-label>
+						<ui5-input id="cityInp" value="411" accessible-name-ref="cityLbl"></ui5-input>
+						<ui5-input value="Maintown" accessible-name-ref="cityLbl"></ui5-input>
+					</ui5-form-item>
+				</ui5-form-group>
+
+				<ui5-form-group header-text="Contact">
+					<ui5-form-item>
+						<ui5-label id="streetLbl" for="streetInp" slot="labelContent">Street:</ui5-label>
+						<ui5-input id="streetInp" value="Main St" accessible-name-ref="streetLbl"></ui5-input>
+						<ui5-input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl"></ui5-input>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label id="countryLbl" for="countrySel" slot="labelContent">Country:</ui5-label>
+						<ui5-input id="countrySel" accessible-name-ref="countryLbl"></ui5-input>
+					</ui5-form-item>
+				</ui5-form-group>
+			</ui5-form>
+
+			<ui5-form id="formWithItems" header-text="Form 2">
+				<ui5-form-item>
+					<ui5-label for="nameInp2" slot="labelContent">Name:</ui5-label>
+					<ui5-input value="Red Point Stores" id="nameInp2"></ui5-input>
+				</ui5-form-item>
+				
+				<ui5-form-item>
+					<ui5-label id="cityLbl2" for="cityInp2" slot="labelContent">ZIP Code/City:</ui5-label>
+					<ui5-input id="cityInp2" value="411" accessible-name-ref="cityLbl2"></ui5-input>
+					<ui5-input value="Maintown" accessible-name-ref="cityLbl2"></ui5-input>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label id="streetLbl2" for="streetInp2" slot="labelContent">Street:</ui5-label>
+					<ui5-input id="streetInp2" value="Main St" accessible-name-ref="streetLbl2"></ui5-input>
+					<ui5-input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl2"></ui5-input>
+				</ui5-form-item>
+				
+				<ui5-form-item>
+					<ui5-label id="countryLbl2" for="countrySel2" slot="labelContent">Country:</ui5-label>
+					<ui5-input id="countrySel2" accessible-name-ref="countryLbl2"></ui5-input>
+				</ui5-form-item>
+			</ui5-form>`);
+
+		cy.get("#before").focus();
+		cy.realPress("F6");
+
+		// assert: the first input of the first FormGroup is focused
+		cy.get("#nameInp")
+			.should("be.focused");
+
+		cy.realPress("F6");
+
+		// assert: the first input in second FormGroup is focused
+		cy.get("#streetInp")
+			.should("be.focused");
+
+		cy.realPress("F6");
+
+		// assert: the first input in next Form is focused
+		cy.get("#nameInp2")
+			.should("be.focused");
+
+		cy.realPress("F6");
+
+		// assert: back to the first Form
+		cy.get("#nameInp")
+			.should("be.focused");
+	});
 });
diff --git a/packages/main/cypress/specs/Input.cy.ts b/packages/main/cypress/specs/Input.cy.ts
new file mode 100644
index 000000000000..a909860b5287
--- /dev/null
+++ b/packages/main/cypress/specs/Input.cy.ts
@@ -0,0 +1,32 @@
+import { html } from "lit";
+import "../../src/Input.js";
+import type Input from "../../src/Input.js";
+
+describe("Input Tests", () => {
+	it("tets input event prevention", () => {
+		cy.mount(html`
+			<ui5-input></ui5-input>
+		`);
+
+		cy.get("[ui5-input]")
+			.as("input");
+
+		cy.get<Input>("@input")
+			.then($input => {
+				$input.get(0).addEventListener("input", e => {
+					e.preventDefault();
+					(e.target as Input).value = "test";
+				});
+			});
+
+		cy.get<Input>("@input")
+			.realClick();
+
+		cy.realPress("a");
+
+		cy.get("@input")
+			.shadow()
+			.find("input")
+			.should("have.value", "test");
+	});
+});
diff --git a/packages/main/cypress/specs/Link.cy.ts b/packages/main/cypress/specs/Link.cy.ts
new file mode 100644
index 000000000000..e51a3c77b04c
--- /dev/null
+++ b/packages/main/cypress/specs/Link.cy.ts
@@ -0,0 +1,16 @@
+import { html } from "lit";
+import "../../src/Link.js";
+
+describe("Accessibility", () => {
+	it("setting accessible-description is applied to button tag", () => {
+		cy.mount(html`<ui5-link accessible-description="A long description."></ui5-link>`);
+
+		cy.get("[ui5-link]")
+			.shadow()
+			.find("a")
+			.as("link");
+
+		cy.get("@link")
+			.should("have.attr", "aria-description", "A long description.");
+	});
+});
diff --git a/packages/main/cypress/specs/List.cy.ts b/packages/main/cypress/specs/List.cy.ts
index 343e721ee48b..b7dcd702402d 100644
--- a/packages/main/cypress/specs/List.cy.ts
+++ b/packages/main/cypress/specs/List.cy.ts
@@ -31,4 +31,88 @@ describe("List Tests", () => {
 		cy.get("@loadMore")
 			.should("have.been.calledOnce");
 	});
+
+	it("Arrow down and up navigation between last item and growing button", () => {
+		cy.mount(html`
+		<ui5-list id="infiniteScrollEx2" growing="Button">
+			<ui5-li>Laptop Lenovo</ui5-li>
+			<ui5-li>IPhone 3</ui5-li>
+			<ui5-li>HP Monitor 24</ui5-li>
+			<ui5-li id="lastItem">Last Item</ui5-li>
+		</ui5-list>
+		`);
+
+		cy.get("#lastItem")
+			.shadow()
+			.find("li[role='listitem']")
+			.invoke("attr", "tabindex", "0")
+			.focus();
+
+		cy.get("#infiniteScrollEx2")
+			.realPress("ArrowDown");
+
+		cy.get("#infiniteScrollEx2")
+			.shadow()
+			.find("[id$=\"growing-btn\"]")
+			.should("be.focused");
+
+		cy.get("#infiniteScrollEx2")
+			.realPress("ArrowUp");
+
+		cy.get("#lastItem")
+			.should("be.focused");
+	});
+
+	it("Home key on growing button moves focus to first item", () => {
+		cy.mount(html`
+		<ui5-list id="infiniteScrollEx2" growing="Button">
+			<ui5-li id="firstItem">Laptop Lenovo</ui5-li>
+			<ui5-li>IPhone 3</ui5-li>
+			<ui5-li>HP Monitor 24</ui5-li>
+			<ui5-li id="lastItem">Last Item</ui5-li>
+		</ui5-list>
+		`);
+
+		cy.get("#infiniteScrollEx2")
+			.shadow()
+			.find("[id$=\"growing-btn\"]")
+			.focus();
+
+		cy.get("#infiniteScrollEx2")
+			.realPress("Home");
+
+		cy.get("#firstItem")
+			.should("be.focused");
+	});
+
+	it("End key navigation moves focus from first item to last item and then to growing button", () => {
+		cy.mount(html`
+		<ui5-list id="infiniteScrollEx2" growing="Button">
+			<ui5-li id="firstItem">Laptop Lenovo</ui5-li>
+			<ui5-li>IPhone 3</ui5-li>
+			<ui5-li>HP Monitor 24</ui5-li>
+			<ui5-li id="lastItem">Last Item</ui5-li>
+		</ui5-list>
+		`);
+
+		cy.get("#firstItem")
+			.shadow()
+			.find("li[role='listitem']")
+			.invoke("attr", "tabindex", "0")
+			.focus();
+
+		cy.get("#infiniteScrollEx2")
+			.realPress("End");
+
+		cy.get("#lastItem")
+			.should("be.focused");
+
+		cy.get("#infiniteScrollEx2")
+			.realPress("End");
+
+		cy.get("#infiniteScrollEx2")
+			.shadow()
+			.find("[id$='growing-btn']")
+			.should("be.focused");
+	});
 });
diff --git a/packages/main/cypress/specs/LitKeyFunction.cy.ts b/packages/main/cypress/specs/LitKeyFunction.cy.ts
index 367b47cf0609..2ad10851c1f3 100644
--- a/packages/main/cypress/specs/LitKeyFunction.cy.ts
+++ b/packages/main/cypress/specs/LitKeyFunction.cy.ts
@@ -1,6 +1,7 @@
 import { html } from "lit";
 import "../../src/MultiComboBox.js";
 import "../../src/MultiComboBoxItem.js";
+import type List from "../../src/List.js";
 
 describe("Lit HTML key function for #each", () => {
 	it("LIT HTML does not mess up keys when looping over lists", () => {
@@ -21,15 +22,17 @@ describe("Lit HTML key function for #each", () => {
 
 		cy.get("@mcb")
 			.shadow()
-			.find(".ui5-multi-combobox-all-items-responsive-popover")
-			.as("popover");
+			.find("[ui5-responsive-popover]")
+			.as("rpo");
 
-		cy.get("@popover")
-			.find(".ui5-multi-combobox-all-items-list > ui5-li")
-			.as("items");
+		cy.get("@rpo")
+			.find("[ui5-list]")
+			.as("list");
 
-		cy.get("@items")
-			.eq(0)
+		cy.get("@list")
+			.then($el => {
+				return ($el[0] as List).getSlottedNodes("items");
+			})
 			.realClick();
 
 		cy.get("@mcb")
@@ -37,14 +40,18 @@ describe("Lit HTML key function for #each", () => {
 			.find(".inputIcon")
 			.realClick();
 
-		cy.get("@items")
-			.eq(0)
-			.should("contain.text", "<empty>")
+		cy.get("@list")
+			.then($el => {
+				return ($el[0] as List).getSlottedNodes("items")[0];
+			})
+			.invoke("attr", "text", "<empty>")
 			.should("not.have.attr", "selected");
 
-		cy.get("@items")
-			.eq(3)
-			.should("contain.text", "USA")
+		cy.get("@list")
+			.then($el => {
+				return ($el[0] as List).getSlottedNodes("items")[3];
+			})
+			.invoke("attr", "text", "USA")
 			.should("have.attr", "selected");
 	});
 });
diff --git a/packages/main/cypress/specs/TableGrowing.cy.ts b/packages/main/cypress/specs/TableGrowing.cy.ts
new file mode 100644
index 000000000000..6e01d1ddec5e
--- /dev/null
+++ b/packages/main/cypress/specs/TableGrowing.cy.ts
@@ -0,0 +1,358 @@
+import { html } from "lit";
+
+import "../../src/Table.js";
+import "../../src/TableHeaderRow.js";
+import "../../src/TableCell.js";
+import "../../src/TableRow.js";
+import "../../src/TableGrowing.js";
+
+import type TableGrowing from "../../src/TableGrowing.js";
+
+describe("TableGrowing - Button", () => {
+	function mountTable() {
+		cy.mount(html`
+			<ui5-table id="table">
+				<ui5-table-growing slot="features"></ui5-table-growing>
+				<ui5-table-header-row slot="headerRow">
+					<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
+				</ui5-table-header-row>
+				<ui5-table-row>
+					<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
+				</ui5-table-row>
+			</ui5-table>
+		`);
+	}
+	describe("Rendering", () => {
+		it("tests button is rendered", () => {
+			mountTable();
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("exist")
+				.should("have.attr", "role", "button")
+				.should("have.attr", "aria-labelledby", "growing-text growing-subtext");
+
+			cy.get("[ui5-table")
+				.shadow()
+				.find("#growing-row")
+				.should("exist");
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-text")
+				.should("have.text", "More");
+		});
+
+		it("tests correct custom texts are rendered", () => {
+			const growingText = "My Custom Growing Text",
+				growingSubtext = "My Custom Growing Subtext";
+			cy.mount(html`
+				<ui5-table>
+					<ui5-table-growing slot="features" growing-text="${growingText}" growing-sub-text="${growingSubtext}"/>
+					<ui5-table-header-row slot="headerRow">
+						<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
+					</ui5-table-header-row>
+					<ui5-table-row>
+						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
+					</ui5-table-row>
+				</ui5-table>
+			`);
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("exist")
+				.should("have.attr", "role", "button")
+				.should("have.attr", "aria-labelledby", "growing-text growing-subtext");
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-text")
+				.should("have.text", growingText);
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-subtext")
+				.should("have.text", growingSubtext);
+		});
+
+		it("tests diabled state", () => {
+			cy.mount(html`
+				<ui5-table>
+					<ui5-table-growing slot="features" disabled></ui5-table-growing>
+					<ui5-table-header-row slot="headerRow">
+						<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
+					</ui5-table-header-row>
+					<ui5-table-row>
+						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
+					</ui5-table-row>
+				</ui5-table>
+			`);
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("not.exist");
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("not.exist");
+		});
+
+		it("tests dynamically setting disabled state", () => {
+			mountTable();
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("exist");
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(table => { table.get(0).disabled = true; });
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("not.exist");
+		});
+
+		it("tests growing button not shown when no data", () => {
+			cy.mount(html`
+				<ui5-table>
+					<ui5-table-growing slot="features"></ui5-table-growing>
+					<ui5-table-header-row slot="headerRow">
+						<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
+					</ui5-table-header-row>
+				</ui5-table>
+			`);
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("not.exist");
+		});
+	});
+
+	describe("Event & Focus", () => {
+		it("tests loadMore event fired upon pressing button", () => {
+			mountTable();
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")))
+				.click();
+
+			cy.get("@loadMore")
+				.should("have.been.calledOnce");
+		});
+
+		it("test loadMore event fired upon pressing Enter", () => {
+			mountTable();
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")))
+				.shadow()
+				.find("#growing-button")
+				.focus();
+
+			cy.realPress("Enter");
+
+			cy.get("@loadMore")
+				.should("have.been.calledOnce");
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.focus();
+
+			cy.realPress("Space");
+
+			cy.get("@loadMore")
+				.should("have.been.calledTwice");
+		});
+
+		it("tests focus is set to first newly added row", () => {
+			mountTable();
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => {
+					tableGrowing.get(0).addEventListener("load-more", () => {
+						const table = document.getElementById("table");
+						const row = document.createElement("ui5-table-row");
+						row.id = "new-row";
+						row.innerHTML = "<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>";
+						table!.appendChild(row);
+					});
+				})
+				.click();
+
+			cy.get("[ui5-table]")
+				.children("ui5-table-row")
+				.should("have.length", 2);
+
+			cy.get("#new-row")
+				.should("exist")
+				.should("have.focus");
+		});
+
+		it("tests focus is set to growing button when no new rows are added", () => {
+			mountTable();
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.click();
+
+			cy.get("[ui5-table-growing]")
+				.should("have.focus");
+		});
+	});
+});
+
+describe("TableGrowing - Scroll", () => {
+	function mountTable(rowCount: number = 10, overflow = false) {
+		cy.mount(html`
+			<div id="wrapper" style="height: 200px; ${overflow ? "overflow: auto" : ""}">
+			<ui5-table id="table">
+				<ui5-table-growing slot="features" type="Scroll"></ui5-table-growing>
+				<ui5-table-header-row slot="headerRow">
+					<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
+				</ui5-table-header-row>
+				${Array.from({ length: rowCount }).map(() => html`
+					<ui5-table-row>
+						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
+					</ui5-table-row>
+				`)}
+			</ui5-table>
+			</div>
+		`);
+	}
+
+	describe("Rendering", () => {
+		it("tests no button shown, when scrollable", () => {
+			mountTable(10, true);
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("not.exist");
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("not.exist");
+		});
+
+		it("tests button shown when not scrollable", () => {
+			mountTable(1, false);
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("exist");
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("exist");
+		});
+
+		it("tests button not shown when not scrollable and disabled", () => {
+			mountTable(1, true);
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => { tableGrowing.get(0).disabled = true; });
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("not.exist");
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("not.exist");
+		});
+	});
+
+	describe("Event", () => {
+		it("tests loadMore event fire upon scrolling to table end", () => {
+			mountTable(10, true);
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
+
+			cy.get("[ui5-table-row]:last-child")
+				.scrollIntoView();
+
+			cy.get("@loadMore")
+				.should("have.been.calledOnce");
+		});
+
+		it("tests button fires load-more, button vanishes, scroll to end fires load-more", () => {
+			mountTable(1, true);
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => {
+					tableGrowing.get(0).addEventListener("load-more", () => {
+						const table = document.getElementById("table");
+						Array.from({ length: 10 }).forEach(() => {
+							const row = document.createElement("ui5-table-row");
+							row.innerHTML = "<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>";
+							table!.appendChild(row);
+						});
+					});
+					tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore"));
+				})
+				.click();
+
+			cy.get("@loadMore")
+				.should("have.been.calledOnce");
+
+			cy.get("[ui5-table]")
+				.children("ui5-table-row")
+				.should("have.length", 11);
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("not.exist");
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("not.exist");
+
+			for (let i = 2; i <= 6; i++) {
+				cy.get("#wrapper")
+					.scrollTo("bottom", { duration: 300 });
+
+				cy.get("@loadMore")
+					.should("have.callCount", i);
+
+				cy.get("[ui5-table]")
+					.children("ui5-table-row")
+					.should("have.length", 1 + 10 * i);
+			}
+		});
+
+		it("tests load-more not fired when disabled", () => {
+			mountTable(11, true);
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => {
+					tableGrowing.get(0).disabled = true;
+					tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore"));
+				});
+
+			cy.get("[ui5-table-row]:last-child")
+				.scrollIntoView();
+
+			cy.get("[ui5-table]")
+				.children("ui5-table-row")
+				.should("have.length", 11);
+
+			cy.get("@loadMore")
+				.should("not.have.been.called");
+		});
+	});
+});
diff --git a/packages/main/cypress/specs/Tokenizer.cy.ts b/packages/main/cypress/specs/Tokenizer.cy.ts
new file mode 100644
index 000000000000..93296572b934
--- /dev/null
+++ b/packages/main/cypress/specs/Tokenizer.cy.ts
@@ -0,0 +1,114 @@
+import { html } from "lit";
+import "../../src/Tokenizer.js";
+import type Tokenizer from "../../src/Tokenizer.js";
+
+describe("Tokenizer - multi-line and Clear All", () => {
+	it("'Clear All' link is rendered for multi-line tokenizer and show-clear-all set to true", () => {
+		cy.mount(html`<ui5-tokenizer show-clear-all multi-line>
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("exist");
+	});
+
+	it("'Clear All' link is rendered even for 1 token when in multi-line mode", () => {
+		cy.mount(html`<ui5-tokenizer show-clear-all multi-line>
+			<ui5-token text="Andora"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("exist");
+	});
+
+	it("'Clear All' link is not rendered for single-line tokenizer even when show-clear-all is set to true", () => {
+		cy.mount(html`<ui5-tokenizer show-clear-all>
+						<ui5-token text="Andora"></ui5-token>
+					</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("not.exist");
+	});
+
+	it("'Clear All' link is not rendered for multi-line tokenizer when show-clear-all is set to false", () => {
+		cy.mount(html`<ui5-tokenizer multi-line>
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("not.exist");
+	});
+
+	it("'Clear All' link is not rendered for multi-line readonly tokenizer when show-clear-all 'true'", () => {
+		cy.mount(html`<ui5-tokenizer multi-line show-clear-all readonly>
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("not.exist");
+	});
+
+	it("'n-more' link is not rendered for multi-line tokenizer", () => {
+		cy.mount(html`<ui5-tokenizer multi-line style="width: 100px;">
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--more-text")
+			.should("not.exist");
+	});
+
+	it("Pressing 'Clear All' link fires token-delete event", () => {
+		cy.mount(html`<ui5-tokenizer show-clear-all multi-line>
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]").then($tokenizer => $tokenizer.get(0).addEventListener("token-delete", cy.stub().as("delete")));
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.eq(0)
+			.click();
+
+		cy.get("@delete")
+			.should("have.been.calledOnce");
+	});
+});
diff --git a/packages/main/cypress/specs/Toolbar.cy.ts b/packages/main/cypress/specs/Toolbar.cy.ts
new file mode 100644
index 000000000000..93b1dcd0d277
--- /dev/null
+++ b/packages/main/cypress/specs/Toolbar.cy.ts
@@ -0,0 +1,94 @@
+import { html } from "lit";
+import "../../src/Toolbar.js";
+import "../../src/ToolbarButton.js";
+import "../../src/ToolbarSelect.js";
+import "../../src/ToolbarSelectOption.js";
+import "../../src/ToolbarSeparator.js";
+import "../../src/ToolbarSpacer.js";
+import "../../src/Popover.js";
+import type ToolbarItem from "../../src/ToolbarItem.js";
+import "@ui5/webcomponents-icons/dist/add.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/employee.js";
+
+describe("Toolbar general interaction", () => {
+	it("Should not return null upon calling getDomRef for all direct child items", () => {
+		cy.mount(html`
+			<ui5-toolbar id="otb_standard">
+				<ui5-toolbar-button text="Button 1"></ui5-toolbar-button>
+				<ui5-toolbar-button text="Button 2"></ui5-toolbar-button>
+				<ui5-toolbar-button text="Button 3"></ui5-toolbar-button>
+				<ui5-toolbar-select>
+					<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
+					<ui5-toolbar-select-option>2</ui5-toolbar-select-option>
+					<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
+				</ui5-toolbar-select>
+				<ui5-toolbar-separator></ui5-toolbar-separator>
+				<ui5-toolbar-button text="Button 4"></ui5-toolbar-button>
+				<ui5-toolbar-button text="Button 5"></ui5-toolbar-button>
+				<ui5-toolbar-button text="Button 6"></ui5-toolbar-button>
+			</ui5-toolbar>
+		`);
+
+		cy.get("#otb_standard")
+			.as("toolbar");
+
+		cy.get("@toolbar")
+			.should("exist");
+
+		cy.get("@toolbar")
+			.children()
+			.each($el => {
+				const toolbarItem = $el[0] as ToolbarItem;
+				cy.wrap(toolbarItem.getDomRef())
+					.should("not.be.null")
+					.should("not.be.undefined");
+			});
+	});
+
+	it("should be able to use toolbar button as popover opener", () => {
+		cy.mount(html`
+			<ui5-toolbar id="tb">
+				<ui5-toolbar-button icon="add" text="Left 1 (long)" id="clickCounter"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 2" id="clearCounter"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+				<ui5-toolbar-separator></ui5-toolbar-separator>
+				<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+				<ui5-toolbar-button id="btnOpenMenu" text="Open Menu" prevent-overflow-closing></ui5-toolbar-button>
+			</ui5-toolbar>
+			<ui5-popover id="popup" opener="btnOpenMenu">
+				Hello World
+			</ui5-popover>
+		`);
+
+		cy.get("#popup").invoke("prop", "open", "true");
+
+		cy.get("#popup")
+			.should("be.visible");
+	});
+
+	it("shouldn't have toolbar button as popover opener when there is spacer before last toolbar item", () => {
+		cy.mount(html`
+			<ui5-toolbar id="otb_spacer">
+				<ui5-toolbar-button icon="add" text="Plus" design="Default"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Hire"></ui5-toolbar-button>
+				<ui5-toolbar-separator></ui5-toolbar-separator>
+				<ui5-toolbar-button icon="add" text="Add"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Decline"></ui5-toolbar-button>
+				<ui5-toolbar-spacer></ui5-toolbar-spacer>
+				<ui5-toolbar-button icon="add" text="Append"></ui5-toolbar-button>
+			</ui5-toolbar>
+		`);
+
+		cy.get("#otb_spacer")
+			.as("toolbar");
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(500);
+
+		cy.get("@toolbar")
+			.shadow()
+			.find(".ui5-tb-overflow-btn-hidden")
+			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
+	});
+});
diff --git a/packages/main/cypress/specs/Tree.cy.ts b/packages/main/cypress/specs/Tree.cy.ts
new file mode 100644
index 000000000000..307d02493595
--- /dev/null
+++ b/packages/main/cypress/specs/Tree.cy.ts
@@ -0,0 +1,29 @@
+import { html } from "lit";
+import "../../src/Tree.js";
+import "../../src/TreeItem.js";
+
+describe("Tree Tests", () => {
+	it("tests accessibility properties forwarded to the list", () => {
+		cy.mount(html`
+		<ui5-tree
+			accessible-name="Tree"
+			accessible-name-ref="lblDesc1"
+			accessible-description="Description"
+			accessible-description-ref="lblDesc2"
+		></ui5-tree>
+		<div id="lblDesc1">Tree</div>
+		<div id="lblDesc2">Description</div>
+		`);
+
+		cy.get("[ui5-tree]")
+			.as("tree");
+
+		cy.get("@tree")
+			.shadow()
+			.find(".ui5-tree-root")
+			.should("have.attr", "accessible-name", "Tree")
+			.and("have.attr", "accessible-name-ref", "lblDesc1")
+			.and("have.attr", "accessible-description", "Description")
+			.and("have.attr", "accessible-description-ref", "lblDesc2");
+	});
+});
diff --git a/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts b/packages/main/cypress/specs/base/AccessibilityTextsHelper.cy.ts
similarity index 89%
rename from packages/main/cypress/specs/base/AriaLabelHelper.cy.ts
rename to packages/main/cypress/specs/base/AccessibilityTextsHelper.cy.ts
index 2a8bb8c115ed..82a3c1f24c92 100644
--- a/packages/main/cypress/specs/base/AriaLabelHelper.cy.ts
+++ b/packages/main/cypress/specs/base/AccessibilityTextsHelper.cy.ts
@@ -1,8 +1,9 @@
 import { html } from "lit";
 import "../../../src/Label.js";
 import "../../../src/Input.js";
+import "../../../src/List.js";
 
-describe("AriaLabelHelper", () => {
+describe("AccessibilityTextsHelper", () => {
 	it("Label-for tests", () => {
 		cy.mount(html`
 			<ui5-input id="myInput" placeholder="input placeholder" class="field"></ui5-input>
@@ -277,4 +278,39 @@ describe("AriaLabelHelper", () => {
 		cy.get("@input")
 			.should("have.attr", "aria-label", "Desc1X Desc4X");
 	});
+
+	it("Tests accessibleDescription and accessibleDescriptionRef with ui5-list", () => {
+		cy.mount(html`
+			<ui5-label id="lblDesc1">Desc1</ui5-label>
+			<ui5-label id="lblDesc2">Desc2</ui5-label>
+			<ui5-list id="list" accessible-description-ref="lblDesc1 lblDesc2" accessible-description="Desc3"></ui5-list>
+		`);
+
+		cy.get("#list")
+			.shadow()
+			.find("ul")
+			.as("list");
+
+		// assert
+		cy.get("@list")
+			.should("have.attr", "aria-description", "Desc1 Desc2");
+
+		// act - update text of referenced label
+		cy.get("#lblDesc1")
+			.then($el => {
+				$el.get(0).innerHTML = `${$el.get(0).innerHTML}X`;
+			});
+
+		// assert
+		cy.get("@list")
+			.should("have.attr", "aria-description", "Desc1X Desc2");
+
+		// act - update accessible-description-ref
+		cy.get("#list")
+			.invoke("removeAttr", "accessible-description-ref");
+
+		// assert
+		cy.get("@list")
+			.should("have.attr", "aria-description", "Desc3");
+	});
 });
diff --git a/packages/main/cypress/specs/base/Events.cy.ts b/packages/main/cypress/specs/base/Events.cy.ts
index b3d6e710ecf4..18ba5d84c8b4 100644
--- a/packages/main/cypress/specs/base/Events.cy.ts
+++ b/packages/main/cypress/specs/base/Events.cy.ts
@@ -9,8 +9,11 @@ import "../../../src/MessageStrip.js";
 import "../../../src/MultiComboBox.js";
 import "../../../src/MultiComboBoxItem.js";
 import "../../../src/Panel.js";
+import "../../../src/Button.js";
 import "../../../src/CheckBox.js";
 import "../../../src/Label.js";
+import "../../../src/MenuItem.js";
+import "../../../src/Menu.js";
 
 describe("Event bubbling", () => {
 	it("test bubbling events", () => {
@@ -126,7 +129,13 @@ describe("Event bubbling", () => {
 						<ui5-option>Hello</ui5-option>
 						<ui5-option>World</ui5-option>
 						<ui5-option>Hello</ui5-option>
-					</ui5-select>	
+					</ui5-select>
+					
+					<ui5-button id="btnOpen">Open Menu</ui5-button>
+					<ui5-menu id="myMenu" header-text="Menu" opener="btnOpen">
+						<ui5-menu-item text="New File"></ui5-menu-item>
+						<ui5-menu-item text="New Folder"></ui5-menu-item>
+					</ui5-menu>
 					
 					<ui5-multi-combobox id="myMCB">
 						<ui5-mcb-item text="Cosy"></ui5-mcb-item>
@@ -138,12 +147,19 @@ describe("Event bubbling", () => {
 
 		cy.get("#app")
 			.as("app");
+
 		cy.get("[ui5-dialog]")
 			.as("dialog");
+
 		cy.get("[ui5-select]")
 			.as("select");
+
+		cy.get("[ui5-menu]")
+			.as("menu");
+
 		cy.get("[ui5-multi-combobox]")
 			.as("multiCombobox");
+
 		cy.get("[ui5-multi-combobox]")
 			.shadow()
 			.find(".inputIcon")
@@ -164,6 +180,11 @@ describe("Event bubbling", () => {
 				select.get(0).addEventListener("ui5-close", cy.stub().as("selClosed"));
 			});
 
+		cy.get("@menu")
+			.then(menu => {
+				menu.get(0).addEventListener("ui5-close", cy.stub().as("menuClosed"));
+			});
+
 		cy.get("@multiCombobox")
 			.then(multiCombobox => {
 				multiCombobox.get(0).addEventListener("ui5-close", cy.stub().as("mcbClosed"));
@@ -180,24 +201,32 @@ describe("Event bubbling", () => {
 			.eq(1)
 			.realClick();
 
-		// act - open the  MultiComboBox
+		// act - open/close the  MultiComboBox
 		cy.get("@multiComboboxIcon")
 			.realClick();
 
 		cy.get("@multiCombobox")
-			.shadow()
-			.find("[ui5-responsive-popover]")
+			.find("[ui5-mcb-item]")
 			.should("be.visible");
 
-		// act - close the MultiComboBox
 		cy.get("@multiComboboxIcon")
 			.realClick();
 
+		// act - open/close Menu
+		cy.get("@menu")
+			.ui5MenuOpen();
+
+		cy.get("[ui5-menu-item]")
+			.first()
+			.ui5MenuItemClick();
+
 		// assert - the close events of the Select and MultiComboBox do not bubble
 		cy.get("@selClosed")
 			.should("have.been.calledOnce");
 		cy.get("@mcbClosed")
 			.should("have.been.calledOnce");
+		cy.get("@menuClosed")
+			.should("have.been.calledOnce");
 		cy.get("@dialogClosed")
 			.should("not.be.called");
 		cy.get("@appClosed")
diff --git a/packages/main/cypress/support/commands.ts b/packages/main/cypress/support/commands.ts
index f98d2d27c987..8dfff424cd18 100644
--- a/packages/main/cypress/support/commands.ts
+++ b/packages/main/cypress/support/commands.ts
@@ -48,6 +48,7 @@ declare global {
 			ui5MenuOpen(options?: { opener?: string }): Chainable<void>
 			ui5MenuOpened(): Chainable<void>
 			ui5MenuItemClick(): Chainable<void>
+			ui5DOMRef(): Chainable<void>
 			ui5MenuItemPress(key: any): Chainable<void>
 		}
 	}
diff --git a/packages/main/cypress/support/commands/Menu.commands.ts b/packages/main/cypress/support/commands/Menu.commands.ts
index 5cd8266fd08c..247ffff977cd 100644
--- a/packages/main/cypress/support/commands/Menu.commands.ts
+++ b/packages/main/cypress/support/commands/Menu.commands.ts
@@ -20,8 +20,7 @@ Cypress.Commands.add("ui5MenuOpened", { prevSubject: true }, subject => {
 		.as("menu");
 
 	cy.get("@menu")
-		.should("be.visible")
-		.and("have.attr", "open");
+		.should("have.attr", "open");
 
 	cy.get("@menu")
 		.shadow()
diff --git a/packages/main/package.json b/packages/main/package.json
index 87ede3412976..f88c2e37fdc1 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -50,16 +50,16 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.4.0-rc.4",
-    "@ui5/webcomponents-icons": "2.4.0-rc.4",
-    "@ui5/webcomponents-icons-business-suite": "2.4.0-rc.4",
-    "@ui5/webcomponents-icons-tnt": "2.4.0-rc.4",
-    "@ui5/webcomponents-localization": "2.4.0-rc.4",
-    "@ui5/webcomponents-theming": "2.4.0-rc.4"
+    "@ui5/webcomponents-base": "2.5.0-rc.2",
+    "@ui5/webcomponents-icons": "2.5.0-rc.2",
+    "@ui5/webcomponents-icons-business-suite": "2.5.0-rc.2",
+    "@ui5/webcomponents-icons-tnt": "2.5.0-rc.2",
+    "@ui5/webcomponents-localization": "2.5.0-rc.2",
+    "@ui5/webcomponents-theming": "2.5.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.4.0-rc.4",
-    "chromedriver": "^129.0.0",
+    "@ui5/webcomponents-tools": "2.5.0-rc.2",
+    "chromedriver": "^131.0.0",
     "lit": "^2.0.0"
   }
 }
diff --git a/packages/main/src/Button.hbs b/packages/main/src/Button.hbs
index 4a5e67e415b3..d55ea3b550ab 100644
--- a/packages/main/src/Button.hbs
+++ b/packages/main/src/Button.hbs
@@ -17,6 +17,7 @@
 	aria-haspopup="{{_hasPopup}}"
 	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedbyText}}"
+	aria-description="{{ariaDescriptionText}}"
 	title="{{buttonTitle}}"
 	part="button"
 	role="{{effectiveAccRole}}"
diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts
index 815026534eb6..885f78329b45 100644
--- a/packages/main/src/Button.ts
+++ b/packages/main/src/Button.ts
@@ -11,7 +11,7 @@ import {
 	isEscape,
 	isShift,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type { AccessibilityAttributes, PassiveEventListenerObject } from "@ui5/webcomponents-base/dist/types.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -219,6 +219,15 @@ class Button extends UI5Element implements IButton {
 	@property({ type: Object })
 	accessibilityAttributes: ButtonAccessibilityAttributes = {};
 
+	/**
+	 * Defines the accessible description of the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.5.0
+	 */
+	@property()
+	accessibleDescription?: string;
+
 	/**
 	 * Defines whether the button has special form-related functionality.
 	 *
@@ -527,6 +536,10 @@ class Button extends UI5Element implements IButton {
 		return this.hasButtonType ? "ui5-button-hiddenText-type" : undefined;
 	}
 
+	get ariaDescriptionText() {
+		return this.accessibleDescription === "" ? undefined : this.accessibleDescription;
+	}
+
 	get _isSubmit() {
 		return this.type === ButtonType.Submit || this.submits;
 	}
diff --git a/packages/main/src/Card.ts b/packages/main/src/Card.ts
index aa1270ce8e83..72def5679fdd 100644
--- a/packages/main/src/Card.ts
+++ b/packages/main/src/Card.ts
@@ -5,7 +5,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import CardTemplate from "./generated/templates/CardTemplate.lit.js";
 import Icon from "./Icon.js";
 import BusyIndicator from "./BusyIndicator.js";
diff --git a/packages/main/src/CardHeader.ts b/packages/main/src/CardHeader.ts
index ef03fde8e3a9..b636b39b18c3 100644
--- a/packages/main/src/CardHeader.ts
+++ b/packages/main/src/CardHeader.ts
@@ -88,7 +88,7 @@ class CardHeader extends UI5Element {
 
 	/**
 	 * Defines if the component would be interactive,
-	 * e.g gets hover effect, gets focus outline and `click` event is fired, when pressed.
+	 * e.g gets hover effect and `click` event is fired, when pressed.
 	 * @default false
 	 * @public
 	*/
diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts
index 29a950355f45..381086899ae4 100644
--- a/packages/main/src/Carousel.ts
+++ b/packages/main/src/Carousel.ts
@@ -21,7 +21,7 @@ import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import {
 	CAROUSEL_OF_TEXT,
 	CAROUSEL_DOT_TEXT,
diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts
index 614a87df4b62..3aba8b9f523a 100644
--- a/packages/main/src/CheckBox.ts
+++ b/packages/main/src/CheckBox.ts
@@ -7,7 +7,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/complete.js";
diff --git a/packages/main/src/ColorPicker.hbs b/packages/main/src/ColorPicker.hbs
index 73a256664477..76b5aad81cbe 100644
--- a/packages/main/src/ColorPicker.hbs
+++ b/packages/main/src/ColorPicker.hbs
@@ -23,16 +23,18 @@
             accessible-name="{{hueSliderLabel}}"
             @ui5-input="{{_handleHueInput}}"
         ></ui5-slider>
-        <ui5-slider
-            disabled="{{inputsDisabled}}"
-            class="ui5-color-picker-alpha-slider"
-            min="0"
-            max="1"
-            step="0.01"
-            value="{{_alpha}}"
-            accessible-name="{{alphaSliderLabel}}"
-            @ui5-input="{{_handleAlphaInput}}"
-        ></ui5-slider>
+        {{#if _isDefaultPickerMode}}
+            <ui5-slider
+                disabled="{{inputsDisabled}}"
+                class="ui5-color-picker-alpha-slider"
+                min="0"
+                max="1"
+                step="0.01"
+                value="{{_alpha}}"
+                accessible-name="{{alphaSliderLabel}}"
+                @ui5-input="{{_handleAlphaInput}}"
+            ></ui5-slider>
+        {{/if}}
     </div>
 
     <div class="ui5-color-picker-current-color">
@@ -56,51 +58,53 @@
         </div>
     </div>
 
-    <div
-        class="ui5-color-picker-rgb-wrapper"
-        @ui5-change="{{_handleRGBInputsChange}}"
-    >
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-                id="red"
-                class="ui5-color-picker-rgb-input"
-                disabled="{{inputsDisabled}}"
-                accessible-name="{{redInputLabel}}"
-                value="{{_value.r}}"
-            ></ui5-input>
-            <ui5-label>R</ui5-label>
-        </div>
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-                id="green"
-                class="ui5-color-picker-rgb-input"
-                disabled="{{inputsDisabled}}"
-                accessible-name="{{greenInputLabel}}"
-                value="{{_value.g}}"
-            ></ui5-input>
-            <ui5-label>G</ui5-label>
-        </div>
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-                id="blue"
-                class="ui5-color-picker-rgb-input"
-                disabled="{{inputsDisabled}}"
-                accessible-name="{{blueInputLabel}}"
-                value="{{_value.b}}"
-            ></ui5-input>
-            <ui5-label>B</ui5-label>
-        </div>
-        <div class="ui5-color-picker-rgb">
-            <ui5-input
-				id="alpha"
-                disabled="{{inputsDisabled}}"
-                class="ui5-color-picker-rgb-input"
-                value="{{_alpha}}"
-                accessible-name="{{alphaInputLabel}}"
-                @ui5-input="{{_handleAlphaInput}}"
-                @ui5-change="{{_handleAlphaChange}}"
-            ></ui5-input>
-            <ui5-label>A</ui5-label>
+    {{#if _isDefaultPickerMode}}
+        <div
+            class="ui5-color-picker-rgb-wrapper"
+            @ui5-change="{{_handleRGBInputsChange}}"
+        >
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="red"
+                    class="ui5-color-picker-rgb-input"
+                    disabled="{{inputsDisabled}}"
+                    accessible-name="{{redInputLabel}}"
+                    value="{{_value.r}}"
+                ></ui5-input>
+                <ui5-label>R</ui5-label>
+            </div>
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="green"
+                    class="ui5-color-picker-rgb-input"
+                    disabled="{{inputsDisabled}}"
+                    accessible-name="{{greenInputLabel}}"
+                    value="{{_value.g}}"
+                ></ui5-input>
+                <ui5-label>G</ui5-label>
+            </div>
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="blue"
+                    class="ui5-color-picker-rgb-input"
+                    disabled="{{inputsDisabled}}"
+                    accessible-name="{{blueInputLabel}}"
+                    value="{{_value.b}}"
+                ></ui5-input>
+                <ui5-label>B</ui5-label>
+            </div>
+            <div class="ui5-color-picker-rgb">
+                <ui5-input
+                    id="alpha"
+                    disabled="{{inputsDisabled}}"
+                    class="ui5-color-picker-rgb-input"
+                    value="{{_alpha}}"
+                    accessible-name="{{alphaInputLabel}}"
+                    @ui5-input="{{_handleAlphaInput}}"
+                    @ui5-change="{{_handleAlphaChange}}"
+                ></ui5-input>
+                <ui5-label>A</ui5-label>
+            </div>
         </div>
-    </div>
+    {{/if}}
 </section>
diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts
index e2040b5fa32f..c75f5391d308 100644
--- a/packages/main/src/ColorPicker.ts
+++ b/packages/main/src/ColorPicker.ts
@@ -22,6 +22,7 @@ import ColorPickerTemplate from "./generated/templates/ColorPickerTemplate.lit.j
 import Input from "./Input.js";
 import Slider from "./Slider.js";
 import Label from "./Label.js";
+import ColorPickerDisplayMode from "./types/ColorPickerDisplayMode.js";
 
 import {
 	COLORPICKER_ALPHA_SLIDER,
@@ -111,6 +112,15 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 	@property()
 	name?: string;
 
+	/**
+	 * Defines the display mode of the component.
+	 * @default "Default"
+	 * @public
+	 * @since 2.5.0
+	 */
+	@property()
+	displayMode: `${ColorPickerDisplayMode}` = "Default";
+
 	/**
 	 * Defines the HEX code of the currently selected color
 	 *
@@ -529,6 +539,10 @@ class ColorPicker extends UI5Element implements IFormInputElement {
 		return this._wrongHEX ? "Error" : undefined;
 	}
 
+	get _isDefaultPickerMode() {
+		return this.displayMode === ColorPickerDisplayMode.Default;
+	}
+
 	get styles() {
 		return {
 			mainColor: {
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 71a46c5a9710..fc80e3abd371 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -7,7 +7,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isPhone, isAndroid } from "@ui5/webcomponents-base/dist/Device.js";
 import InvisibleMessageMode from "@ui5/webcomponents-base/dist/types/InvisibleMessageMode.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
@@ -98,7 +98,6 @@ interface IComboBoxItem extends UI5Element {
 	isGroupItem?: boolean,
 	selected?: boolean,
 	additionalText?: string,
-	stableDomRef: string,
 	_isVisible?: boolean,
 	items?: Array<IComboBoxItem>
 }
@@ -106,10 +105,6 @@ interface IComboBoxItem extends UI5Element {
 type ValueStateAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 type ValueStateTypeAnnouncement = Record<Exclude<ValueState, ValueState.None>, string>;
 
-type ComboBoxListItem = ListItemStandard & {
-	mappedItem: ComboBoxItem
-};
-
 enum ValueStateIconMapping {
 	Negative = "error",
 	Critical = "alert",
@@ -398,7 +393,12 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	 * Defines the component items.
 	 * @public
 	 */
-	@slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true })
+	@slot({
+		type: HTMLElement,
+		"default": true,
+		individualSlots: true,
+		invalidateOnChildChange: true,
+	})
 	items!: Array<IComboBoxItem>;
 
 	/**
@@ -504,10 +504,6 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		}
 
 		this.storeResponsivePopoverWidth();
-
-		this.items.forEach(item => {
-			item._getRealDomRef = () => this._getPicker().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
-		});
 	}
 
 	_focusin(e: FocusEvent) {
@@ -725,7 +721,8 @@ class ComboBox extends UI5Element implements IFormInputElement {
 
 		this._filteredItems.forEach(item => {
 			if (isInstanceOfComboBoxItemGroup(item)) {
-				const groupedItems = [item, ...item.items];
+				const visibleItems = this.open ? item.items.filter(i => i._isVisible) : item.items;
+				const groupedItems = [item, ...visibleItems];
 				allItems.push(...groupedItems);
 				return;
 			}
@@ -745,7 +742,7 @@ class ComboBox extends UI5Element implements IFormInputElement {
 
 		const isOpen = this.open;
 		const currentItem = allItems.find(item => {
-			return isOpen ? item.focused : item.selected;
+			return item.selected || item.focused;
 		});
 
 		const indexOfItem = currentItem ? allItems.indexOf(currentItem) : -1;
@@ -853,18 +850,22 @@ class ComboBox extends UI5Element implements IFormInputElement {
 			return;
 		}
 
-		if (indexOfItem === 0 && this.hasValueStateText && isOpen) {
+		if (indexOfItem === 0 && this.hasValueStateText && isOpen && !this._isValueStateFocused) {
 			this._clearFocus();
 			this._itemFocused = false;
 			this._isValueStateFocused = true;
 			this._announceValueStateText();
 			this._filteredItems[0].selected = false;
+			this.value = this._userTypedValue;
+
 			return;
 		}
 
 		if (this._isValueStateFocused) {
 			this.focused = true;
 			this._isValueStateFocused = false;
+			this.value = this._userTypedValue;
+
 			return;
 		}
 
@@ -1129,9 +1130,9 @@ class ComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_selectItem(e: CustomEvent<ListItemClickEventDetail>) {
-		const listItem = e.detail.item as ComboBoxListItem;
+		const item = e.detail.item as ComboBoxItem;
 
-		this._selectedItemText = listItem.mappedItem.text || "";
+		this._selectedItemText = item.text || "";
 		this._selectionPerformed = true;
 
 		const sameItemSelected = this.value === this._selectedItemText;
@@ -1144,17 +1145,12 @@ class ComboBox extends UI5Element implements IFormInputElement {
 
 		this.value = this._selectedItemText;
 
-		if (!listItem.mappedItem.selected) {
+		if (!item.selected) {
 			this.fireDecoratorEvent<ComboBoxSelectionChangeEventDetail>("selection-change", {
-				item: listItem.mappedItem,
+				item,
 			});
 		}
 
-		this._filteredItems.map(item => {
-			item.selected = (item === listItem.mappedItem && !item.isGroupItem);
-			return item;
-		});
-
 		this._fireChangeEvent();
 		this._closeRespPopover();
 
diff --git a/packages/main/src/ComboBoxItem.hbs b/packages/main/src/ComboBoxItem.hbs
new file mode 100644
index 000000000000..cf3506e83bae
--- /dev/null
+++ b/packages/main/src/ComboBoxItem.hbs
@@ -0,0 +1,18 @@
+{{>include "./ListItemBase.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<div part="content" id="content" class="ui5-li-content">
+		<div class="ui5-li-text-wrapper">
+			<span part="title" class="ui5-li-title">
+				{{{text}}}
+			</span>
+			{{#if additionalText}}
+				<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+			{{/if}}
+		</div>
+	</div>
+{{/inline}}
+
+{{#*inline "listItemAttributes"}}
+	role="option"
+{{/inline}}
\ No newline at end of file
diff --git a/packages/main/src/ComboBoxItem.ts b/packages/main/src/ComboBoxItem.ts
index 426e141e6362..3406c8970040 100644
--- a/packages/main/src/ComboBoxItem.ts
+++ b/packages/main/src/ComboBoxItem.ts
@@ -1,19 +1,24 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { IComboBoxItem } from "./ComboBox.js";
+import ListItemBase from "./ListItemBase.js";
 
+import ComboBoxItemTemplate from "./generated/templates/ComboBoxItemTemplate.lit.js";
+import ComboboxItemCss from "./generated/themes/ComboBoxItem.css.js";
 /**
  * @class
  * The `ui5-cb-item` represents the item for a `ui5-combobox`.
  * @constructor
- * @extends UI5Element
- * @abstract
+ * @extends ListItemBase
  * @implements {IComboBoxItem}
  * @public
  */
-@customElement("ui5-cb-item")
-class ComboBoxItem extends UI5Element implements IComboBoxItem {
+@customElement({
+	tag: "ui5-cb-item",
+	template: ComboBoxItemTemplate,
+	styles: [ListItemBase.styles, ComboboxItemCss],
+})
+class ComboBoxItem extends ListItemBase implements IComboBoxItem {
 	/**
 	 * Defines the text of the component.
 	 * @default undefined
@@ -52,9 +57,15 @@ class ComboBoxItem extends UI5Element implements IComboBoxItem {
 	@property({ type: Boolean })
 	selected = false;
 
-	get stableDomRef() {
-		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
-	}
+	/**
+	 * Defines the markup text that will be displayed as suggestion.
+	 * Used for highlighting the matching parts of the text.
+	 *
+	 * @since 2.4.0
+	 * @private
+	 */
+	@property()
+	markupText = "";
 }
 
 ComboBoxItem.define();
diff --git a/packages/main/src/ComboBoxItemGroup.hbs b/packages/main/src/ComboBoxItemGroup.hbs
new file mode 100644
index 000000000000..4cc129d71a5d
--- /dev/null
+++ b/packages/main/src/ComboBoxItemGroup.hbs
@@ -0,0 +1,9 @@
+{{>include "./ListItemGroup.hbs"}}
+
+{{#*inline "items"}}
+	{{#each items}}
+		{{#if _isVisible}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/if}}
+	{{/each}}
+{{/inline}}
\ No newline at end of file
diff --git a/packages/main/src/ComboBoxItemGroup.ts b/packages/main/src/ComboBoxItemGroup.ts
index 07f5859ce834..632b5d3e6079 100644
--- a/packages/main/src/ComboBoxItemGroup.ts
+++ b/packages/main/src/ComboBoxItemGroup.ts
@@ -1,63 +1,45 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { IComboBoxItem } from "./ComboBox.js";
+import ListItemGroup from "./ListItemGroup.js";
+import type ComboBoxItem from "./ComboBoxItem.js";
+import ComboBoxItemGroupTemplate from "./generated/templates/ComboBoxItemGroupTemplate.lit.js";
 
 /**
  * @class
  * The `ui5-cb-group-item` is type of suggestion item,
  * that can be used to split the `ui5-combobox` suggestions into groups.
  * @constructor
- * @extends UI5Element
+ * @extends ListItemGroup
  * @abstract
  * @public
  * @implements {IComboBoxItem}
  * @since 1.0.0-rc.15
  */
-@customElement("ui5-cb-item-group")
-class ComboBoxItemGroup extends UI5Element implements IComboBoxItem {
-		/**
-		 * Defines the text of the component.
-		 * @default undefined
-		 * @public
-		 */
-		@property()
-		headerText?: string;
-
-		/**
-		 * Indicates whether the item is focused
-		 * @protected
-		 */
-		@property({ type: Boolean })
-		focused = false
-
-		/**
-		 * Defines the items of the <code>ui5-cb-item-group</code>.
-		 * @public
-		 */
-		@slot({
-			"default": true,
-			invalidateOnChildChange: true,
-			type: HTMLElement,
-		})
-		items!: Array<IComboBoxItem>;
-
-		/**
-		 * Used to avoid tag name checks
-		 * @protected
-		 */
-		get isGroupItem(): boolean {
-			return true;
-		}
-
-		get stableDomRef() {
-			return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
-		}
-
-		get _isVisible() {
-			return this.items.some(item => item._isVisible);
-		}
+@customElement({
+	tag: "ui5-cb-item-group",
+	template: ComboBoxItemGroupTemplate,
+})
+class ComboBoxItemGroup extends ListItemGroup implements IComboBoxItem {
+	/**
+	 * Defines the items of the <code>ui5-cb-item-group</code>.
+	 * @public
+	 */
+	@slot({
+		"default": true,
+		invalidateOnChildChange: true,
+		individualSlots: true,
+		type: HTMLElement,
+	})
+	items!: Array<ComboBoxItem>;
+
+	get isGroupItem(): boolean {
+		return true;
+	}
+
+	get _isVisible() {
+		return this.items.some(item => item._isVisible);
+	}
 }
 
 ComboBoxItemGroup.define();
diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
index 56dc7739c369..fb906e90e5fe 100644
--- a/packages/main/src/ComboBoxPopover.hbs
+++ b/packages/main/src/ComboBoxPopover.hbs
@@ -85,20 +85,7 @@
 		selection-mode="Single"
 	>
 		{{#each _filteredItems}}
-			{{#if isGroupItem}}
-				{{#if _isVisible}}
-					<ui5-li-group header-text="{{this.headerText}}" ?focused={{this.focused}}>
-						{{#each this.items}}
-							{{#if _isVisible}}
-								{{> listItem}}
-							{{/if}}
-						{{/each}}
-					</ui5-li-group>
-				{{/if}}
-			{{else}}
-				{{> listItem}}
-			{{/if}}
-
+			<slot name="{{this._individualSlot}}"></slot>
 		{{/each}}
 	</ui5-list>
 
@@ -140,20 +127,4 @@
 	{{else}}
 		<slot name="valueStateMessage"></slot>
 	{{/if}}
-{{/inline}}
-
-{{#*inline "listItem"}}
-	<ui5-li
-			accessible-role="Option"
-			type="Active"
-			wrapping-type="Normal"
-			additional-text={{this.additionalText}}
-			group-name={{this.groupName}}
-			.mappedItem={{this}}
-			?selected={{this.selected}}
-			?focused={{this.focused}}
-			data-ui5-stable="{{this.stableDomRef}}"
-	>
-		{{this.text}}
-	</ui5-li>
-{{/inline}}
+{{/inline}}
\ No newline at end of file
diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts
index 9d773228d546..38b3bc73706b 100644
--- a/packages/main/src/DatePicker.ts
+++ b/packages/main/src/DatePicker.ts
@@ -11,7 +11,7 @@ import modifyDateBy from "@ui5/webcomponents-localization/dist/dates/modifyDateB
 import getRoundedTimestamp from "@ui5/webcomponents-localization/dist/dates/getRoundedTimestamp.js";
 import getTodayUTCTimestamp from "@ui5/webcomponents-localization/dist/dates/getTodayUTCTimestamp.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import {
@@ -250,6 +250,18 @@ type DatePickerInputEventDetail = {
 	bubbles: true,
 	cancelable: true,
 })
+/**
+ * Fired after the component's picker is opened.
+ * @since 2.4.0
+ * @public
+ */
+@event("open")
+/**
+ * Fired after the component's picker is closed.
+ * @since 2.4.0
+ * @public
+ */
+@event("close")
 class DatePicker extends DateComponentBase implements IFormInputElement {
 	/**
 	 * Defines a formatted date value.
@@ -407,6 +419,12 @@ class DatePicker extends DateComponentBase implements IFormInputElement {
 		} else {
 			this._getInput()?.focus();
 		}
+
+		this.fireDecoratorEvent("close");
+	}
+
+	onResponsivePopoverAfterOpen() {
+		this.fireDecoratorEvent("open");
 	}
 
 	onResponsivePopoverBeforeOpen() {
diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs
index 0f9b624168c8..194274f6c5d0 100644
--- a/packages/main/src/DatePickerPopover.hbs
+++ b/packages/main/src/DatePickerPopover.hbs
@@ -10,6 +10,7 @@
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
 	@ui5-close="{{onResponsivePopoverAfterClose}}"
+	@ui5-open="{{onResponsivePopoverAfterOpen}}"
 	@ui5-before-open="{{onResponsivePopoverBeforeOpen}}"
 >
 	{{#if showHeader}}
diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts
index 2c909c3655bf..8ee6683cb1a5 100644
--- a/packages/main/src/Dialog.ts
+++ b/packages/main/src/Dialog.ts
@@ -71,8 +71,7 @@ const ICON_PER_STATE: Record<ValueStateWithIcon, string> = {
 
  *
  * ### Responsive Behavior
- * The `stretch` property can be used to stretch the
- * `ui5-dialog` on full screen.
+ * The `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.
  *
  * **Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.
  *
@@ -131,10 +130,10 @@ class Dialog extends Popup {
 	headerText?: string;
 
 	/**
-	 * Determines whether the component should be stretched to fullscreen.
+	 * Determines if the dialog will be stretched to full screen on mobile. On desktop,
+	 * the dialog will be stretched to approximately 90% of the viewport.
 	 *
-	 * **Note:** The component will be stretched to approximately
-	 * 90% of the viewport.
+	 * **Note:** For better usability of the component it is recommended to set this property to "true" when the dialog is opened on phone.
 	 * @default false
 	 * @public
 	 */
diff --git a/packages/main/src/Form.hbs b/packages/main/src/Form.hbs
index 57933aeb99cb..49ba1dc96073 100644
--- a/packages/main/src/Form.hbs
+++ b/packages/main/src/Form.hbs
@@ -1,4 +1,4 @@
-<div class="ui5-form-root" role="form" aria-labelledby="{{ariaLabelledByID}}">
+<div class="ui5-form-root" role="{{effectiveAccessibleRole}}" aria-labelledby="{{effectiveАccessibleNameRef}}">
 	{{#if hasHeader}}
 		<div class="ui5-form-header" part="header">
 			{{#if hasCustomHeader}}
@@ -13,10 +13,10 @@
 			{{#if this.hasGroupItems}}
 					{{#each groupItemsInfo}}
 						<div class="ui5-form-column {{this.classes}}" part="column">
-							<div class="ui5-form-group">
+							<div class="ui5-form-group" role="form" aria-labelledby="{{this.accessibleNameRef}}">
 								{{#if this.groupItem.headerText}}
 									<div class="ui5-form-group-heading">
-										<ui5-title level="H6">{{ this.groupItem.headerText }}</ui5-title>
+										<ui5-title id="{{this.groupItem._id}}-group-header-text" level="H6">{{ this.groupItem.headerText }}</ui5-title>
 									</div>
 								{{/if}}
 
diff --git a/packages/main/src/Form.ts b/packages/main/src/Form.ts
index 48c626eac56f..279ea3474e56 100644
--- a/packages/main/src/Form.ts
+++ b/packages/main/src/Form.ts
@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 
@@ -23,14 +24,17 @@ const StepColumn = {
 	"XL": 6,
 };
 
+const breakpoints = ["S", "M", "L", "Xl"];
+const MAX_FORM_ITEM_CELLS = 12;
+const DEFAULT_FORM_ITEM_LAYOUT = "4fr 8fr 0fr";
+const DEFAULT_FORM_ITEM_LAYOUT_S = "1fr";
 /**
  * Interface for components that can be slotted inside `ui5-form` as items.
  * @public
  * @experimental
  * @since 2.0.0
  */
-interface IFormItem extends HTMLElement {
-	labelSpan: string
+interface IFormItem extends UI5Element {
 	itemSpacing: `${FormItemSpacing}`;
 	readonly isGroup: boolean;
 	colsXl?: number;
@@ -44,6 +48,7 @@ type GroupItemsInfo = {
 	groupItem: IFormItem,
 	classes: string,
 	items: Array<ItemsInfo>,
+	accessibleNameRef: string | undefined
 }
 
 type ItemsInfo = {
@@ -126,6 +131,63 @@ type ItemsInfo = {
  *
  * **For example:** To always place the labels on top set: `labelSpan="S12 M12 L12 XL12"` property.
  *
+ * ### Items Empty Span
+ *
+ * By default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:
+ * - **Label:** occupies 4 cells.
+ * - **Field:** occupies 8 cells.
+ *
+ * The `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.
+ *
+ * **For example:** Setting "S0 M0 L3 XL3" (or just "L3 XL3") adjusts the layout as follows:
+ * - **Label:** remains 4 cells.
+ * - **Field:** is reduced to 5 cells.
+ * - **Empty space:** 3 cells are added at the end.
+ *
+ * Greater values increase the empty space at the end of the form item, reducing the space available for the label and its field.
+ * However, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.
+ *
+ * ### Navigation flow
+ *
+ * The Form component supports two layout options for keyboard navigation:
+ *
+ * #### Simple form
+ *
+ * In this "simple form" layout, each `ui5-form-item` acts as a standalone group
+ * with one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.
+ * This layout is ideal for simpler forms and supports custom arrangements, e.g.,
+ *
+ * ```
+ * | 1 | 2 |
+ * |   3   |
+ * | 4 | 5 |
+ * ```
+ *
+ * #### Complex form
+ *
+ * In this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:
+ *
+ * - **Single-Column Group**: Focus moves vertically down from one item to the next.
+ *   ```
+ *   | 1 |
+ *   | 2 |
+ *   | 3 |
+ *   ```
+ *
+ * - **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.
+ *   ```
+ *   | 1 | 4 |
+ *   | 2 | 5 |
+ *   | 3 | 6 |
+ *   ```
+ *
+ * ### Keyboard Handling
+ *
+ * - [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form
+ * - [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form
+ * - [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form
+ * - [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form
+ *
  * ### ES6 Module Import
  *
  * - import @ui5/webcomponents/dist/Form.js";
@@ -165,7 +227,7 @@ class Form extends UI5Element {
 	layout = "S1 M1 L2 XL3"
 
 	/**
-	 * Defines the width proportion of the labels and fields of a FormItem by breakpoint.
+	 * Defines the width proportion of the labels and fields of a form item by breakpoint.
 	 *
 	 * By default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,
 	 * and 12/12 in S size, e.g in S the label is on top of its associated field.
@@ -173,12 +235,30 @@ class Form extends UI5Element {
 	 * The supported values are between 1 and 12. Greater the number, more space the label will use.
 	 *
 	 * **Note:** If "12" is set, the label will be displayed on top of its assosiated field.
+	 *
 	 * @default "S12 M4 L4 XL4"
 	 * @public
 	 */
 	@property()
 	labelSpan = "S12 M4 L4 XL4";
 
+	/**
+	 * Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.
+	 *
+	 * By default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.
+	 * The `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.
+	 *
+	 * **Note:**
+	 * - The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.
+	 * - When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.
+	 *
+	 * @default "S0 M0 L0 XL0"
+	 * @since 2.5.0
+	 * @public
+	 */
+	@property()
+	emptySpan = "S0 M0 L0 XL0";
+
 	/**
 	 * Defines the header text of the component.
 	 *
@@ -234,28 +314,36 @@ class Form extends UI5Element {
 	columnsS = 1;
 	@property({ type: Number })
 	labelSpanS = 12
+	@property({ type: Number })
+	emptySpanS = 0
 
 	@property({ type: Number })
 	columnsM = 1;
 	@property({ type: Number })
 	labelSpanM = 4;
+	@property({ type: Number })
+	emptySpanM = 0
 
 	@property({ type: Number })
 	columnsL = 2;
 	@property({ type: Number })
 	labelSpanL = 4;
+	@property({ type: Number })
+	emptySpanL = 0
 
 	@property({ type: Number })
 	columnsXl = 3;
 	@property({ type: Number })
 	labelSpanXl = 4;
+	@property({ type: Number })
+	emptySpanXl = 0;
 
 	onBeforeRendering() {
 		// Parse the layout and set it to the FormGroups/FormItems.
 		this.setColumnLayout();
 
-		// Parse the labelSpan and set it to the FormGroups/FormItems.
-		this.setLabelSpan();
+		// Parse the labelSpan and emptySpan and set it to the FormGroups/FormItems.
+		this.setFormItemLayout();
 
 		// Define how many columns a group should take.
 		this.setGroupsColSpan();
@@ -264,6 +352,8 @@ class Form extends UI5Element {
 	onAfterRendering() {
 		// Create additional CSS for number of columns that are not supported by default.
 		this.createAdditionalCSSStyleSheet();
+
+		this.setFastNavGroup();
 	}
 
 	setColumnLayout() {
@@ -281,7 +371,7 @@ class Form extends UI5Element {
 		});
 	}
 
-	setLabelSpan() {
+	parseFormItemSpan() {
 		this.labelSpan.split(" ").forEach((breakpoint: string) => {
 			if (breakpoint.startsWith("S")) {
 				this.labelSpanS = parseInt(breakpoint.slice(1));
@@ -294,12 +384,67 @@ class Form extends UI5Element {
 			}
 		});
 
-		this.items.forEach((item: IFormItem) => {
-			item.labelSpan = this.labelSpan;
-			item.itemSpacing = this.itemSpacing;
+		this.emptySpan.split(" ").forEach((breakpoint: string) => {
+			if (breakpoint.startsWith("S")) {
+				this.emptySpanS = parseInt(breakpoint.slice(1));
+			} else if (breakpoint.startsWith("M")) {
+				this.emptySpanM = parseInt(breakpoint.slice(1));
+			} else if (breakpoint.startsWith("L")) {
+				this.emptySpanL = parseInt(breakpoint.slice(1));
+			} else if (breakpoint.startsWith("XL")) {
+				this.emptySpanXl = parseInt(breakpoint.slice(2));
+			}
 		});
 	}
 
+	setFormItemLayout() {
+		this.parseFormItemSpan();
+
+		[
+			{
+				breakpoint: "S",
+				labelSpan: this.labelSpanS,
+				emptySpan: this.emptySpanS,
+			},
+			{
+				breakpoint: "M",
+				labelSpan: this.labelSpanM,
+				emptySpan: this.emptySpanM,
+			},
+			{
+				breakpoint: "L",
+				labelSpan: this.labelSpanL,
+				emptySpan: this.emptySpanL,
+			},
+			{
+				breakpoint: "XL",
+				labelSpan: this.labelSpanXl,
+				emptySpan: this.emptySpanXl,
+			},
+		].forEach(layout => {
+			if (this.isValidFormItemLayout(layout.labelSpan, layout.emptySpan)) {
+				const formItemLayout = layout.labelSpan === MAX_FORM_ITEM_CELLS ? `1fr` : `${layout.labelSpan}fr ${MAX_FORM_ITEM_CELLS - (layout.labelSpan + layout.emptySpan)}fr ${layout.emptySpan}fr`;
+				this.style.setProperty(getScopedVarName(`--ui5-form-item-layout-${layout.breakpoint}`), formItemLayout);
+			} else {
+				// eslint-disable-next-line
+				console.warn(`Form :: invalid usage of emptySpan and/or labelSpan in ${layout.breakpoint} size. The labelSpan must be <=12 and when emptySpace is used - their combined values must not exceed 11.`)
+				this.style.setProperty(getScopedVarName(`--ui5-form-item-layout-${layout.breakpoint}`), layout.breakpoint === "S" ? DEFAULT_FORM_ITEM_LAYOUT_S : DEFAULT_FORM_ITEM_LAYOUT);
+			}
+		});
+	}
+
+	isValidFormItemLayout(labelSpan: number, emptySpan: number) {
+		return emptySpan === 0 ? labelSpan <= MAX_FORM_ITEM_CELLS : labelSpan + emptySpan <= MAX_FORM_ITEM_CELLS - 1;
+	}
+
+	setFastNavGroup() {
+		if (this.hasGroupItems) {
+			this.removeAttribute("data-sap-ui-fastnavgroup");
+		} else {
+			this.setAttribute("data-sap-ui-fastnavgroup", "true");
+		}
+	}
+
 	setGroupsColSpan() {
 		if (!this.hasGroupItems) {
 			return;
@@ -361,14 +506,41 @@ class Form extends UI5Element {
 		return !!this.header.length;
 	}
 
-	get ariaLabelledByID(): string | undefined {
+	get effectiveАccessibleNameRef(): string | undefined {
 		return this.hasCustomHeader ? undefined : `${this._id}-header-text`;
 	}
 
+	get effectiveAccessibleRole(): string | undefined {
+		return this.hasGroupItems ? "region" : "form";
+	}
+
 	get groupItemsInfo(): Array<GroupItemsInfo> {
 		return this.items.map((groupItem: IFormItem) => {
+			const items = this.getItemsInfo((Array.from(groupItem.children) as Array<IFormItem>));
+			breakpoints.forEach(breakpoint => {
+				const cols = ((groupItem[`cols${breakpoint}` as keyof IFormItem]) as number || 1);
+				const rows = Math.ceil(items.length / cols);
+				const total = cols * rows;
+				const lastRowColumns = (cols - (total - items.length) - 1); // all other indecies start from 0
+				let currentItem = 0;
+
+				for (let i = 0; i < total; i++) {
+					const column = Math.floor(i / rows);
+					const row = i % rows;
+
+					if (row === rows - 1 && column > lastRowColumns) {
+						// eslint-disable-next-line no-continue
+						continue;
+					}
+
+					items[currentItem].item.style.setProperty(getScopedVarName(`--ui5-form-item-order-${breakpoint}`), `${column + row * cols}`);
+					currentItem++;
+				}
+			});
+
 			return {
 				groupItem,
+				accessibleNameRef: (groupItem as FormGroup).headerText ? `${groupItem._id}-group-header-text` : undefined,
 				classes: `ui5-form-column-spanL-${groupItem.colsL} ui5-form-column-spanXL-${groupItem.colsXl} ui5-form-column-spanM-${groupItem.colsM} ui5-form-column-spanS-${groupItem.colsS}`,
 				items: this.getItemsInfo((Array.from(groupItem.children) as Array<IFormItem>)),
 			};
diff --git a/packages/main/src/FormGroup.ts b/packages/main/src/FormGroup.ts
index 579cb55deb18..230525b417ac 100644
--- a/packages/main/src/FormGroup.ts
+++ b/packages/main/src/FormGroup.ts
@@ -34,7 +34,10 @@ import type FormItemSpacing from "./types/FormItemSpacing.js";
  * @experimental This component is availabe since 2.0 under an experimental flag and its API and behaviour are subject to change.
  * @extends UI5Element
  */
-@customElement("ui5-form-group")
+@customElement({
+	tag: "ui5-form-group",
+	fastNavigation: true,
+})
 class FormGroup extends UI5Element implements IFormItem {
 	/**
 	 * Defines header text of the component.
@@ -83,16 +86,12 @@ class FormGroup extends UI5Element implements IFormItem {
 	@property()
 	itemSpacing: `${FormItemSpacing}` = "Normal";
 
-	@property()
-	labelSpan = "S12 M4 L4 XL4";
-
 	onBeforeRendering() {
 		this.processFormItems();
 	}
 
 	processFormItems() {
 		this.items.forEach((item: FormItem) => {
-			item.labelSpan = this.labelSpan;
 			item.itemSpacing = this.itemSpacing;
 		});
 	}
diff --git a/packages/main/src/FormItem.ts b/packages/main/src/FormItem.ts
index 4624f47ce21c..21228ab73567 100644
--- a/packages/main/src/FormItem.ts
+++ b/packages/main/src/FormItem.ts
@@ -80,12 +80,6 @@ class FormItem extends UI5Element implements IFormItem {
 	})
 	content!: Array<HTMLElement>;
 
-	/**
-	 * @private
-	 */
-	@property()
-	labelSpan = "S12 M4 L4 XL4";
-
 	/**
 	 * @private
 	 */
diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
index 2ec93549fd52..85ea43e65c83 100644
--- a/packages/main/src/Input.ts
+++ b/packages/main/src/Input.ts
@@ -40,7 +40,7 @@ import {
 	getAllAccessibleNameRefTexts,
 	registerUI5Element,
 	deregisterUI5Element,
-} from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+} from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import { getCaretPosition, setCaretPosition } from "@ui5/webcomponents-base/dist/util/Caret.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
@@ -1320,14 +1320,19 @@ class Input extends UI5Element implements SuggestionComponent, IFormInputElement
 		this.value = inputValue;
 		this.typedInValue = inputValue;
 		this.valueBeforeSelectionStart = inputValue;
+		const valueAfterInput = this.value;
 
 		if (isUserInput) { // input
 			const inputType = e.inputType || "";
 			const prevented = !this.fireDecoratorEvent<InputEventDetail>(INPUT_EVENTS.INPUT, { inputType });
 
 			if (prevented) {
-				this.value = valueBeforeInput;
-				inputRef && (inputRef.value = valueBeforeInput);
+				// if the value is not changed after preventing the input event, revert the value
+				if (valueAfterInput === this.value) {
+					this.value = valueBeforeInput;
+				}
+
+				inputRef && (inputRef.value = this.value);
 			}
 
 			// Angular two way data binding
diff --git a/packages/main/src/Link.hbs b/packages/main/src/Link.hbs
index 26c7c0fc6ca6..d957db78fbea 100644
--- a/packages/main/src/Link.hbs
+++ b/packages/main/src/Link.hbs
@@ -12,6 +12,7 @@
 	aria-haspopup="{{_hasPopup}}"
 	aria-expanded="{{accessibilityAttributes.expanded}}"
 	aria-current="{{accessibilityAttributes.current}}"
+	aria-description="{{ariaDescriptionText}}"
 	@click={{_onclick}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}>
diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts
index bc59affd3718..cb01df029c85 100644
--- a/packages/main/src/Link.ts
+++ b/packages/main/src/Link.ts
@@ -5,7 +5,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -226,6 +226,15 @@ class Link extends UI5Element implements ITabbable {
 	@property({ type: Object })
 	accessibilityAttributes: LinkAccessibilityAttributes = {};
 
+	/**
+	 * Defines the accessible description of the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.5.0
+	 */
+	@property()
+	accessibleDescription?: string;
+
 	/**
 	 * Defines the icon, displayed as graphical element within the component before the link's text.
 	 * The SAP-icons font provides numerous options.
@@ -330,6 +339,10 @@ class Link extends UI5Element implements ITabbable {
 		return this.accessibleRole.toLowerCase();
 	}
 
+	get ariaDescriptionText() {
+		return this.accessibleDescription === "" ? undefined : this.accessibleDescription;
+	}
+
 	get _hasPopup() {
 		return this.accessibilityAttributes.hasPopup;
 	}
diff --git a/packages/main/src/List.hbs b/packages/main/src/List.hbs
index 81f530ab158a..3dc96dec46e9 100644
--- a/packages/main/src/List.hbs
+++ b/packages/main/src/List.hbs
@@ -44,6 +44,7 @@
 			role="{{listAccessibleRole}}"
 			aria-label="{{ariaLabelTxt}}"
 			aria-labelledby="{{ariaLabelledBy}}"
+			aria-description="{{ariaDescriptionText}}"
 		>
 			<slot></slot>
 
diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts
index f257adf6321d..60d1293262a6 100644
--- a/packages/main/src/List.ts
+++ b/packages/main/src/List.ts
@@ -16,11 +16,22 @@ import {
 	isEnter,
 	isTabPrevious,
 	isCtrl,
+	isEnd,
+	isHome,
+	isDown,
+	isUp,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import DragRegistry from "@ui5/webcomponents-base/dist/util/dragAndDrop/DragRegistry.js";
 import { findClosestPosition, findClosestPositionsByKey } from "@ui5/webcomponents-base/dist/util/dragAndDrop/findClosestPosition.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import {
+	getAllAccessibleDescriptionRefTexts,
+	getEffectiveAriaDescriptionText,
+	getEffectiveAriaLabelText,
+	registerUI5Element,
+	deregisterUI5Element,
+	getAllAccessibleNameRefTexts,
+} from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import getNormalizedTarget from "@ui5/webcomponents-base/dist/util/getNormalizedTarget.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -459,7 +470,7 @@ class List extends UI5Element {
 	accessibleName?: string;
 
 	/**
-	 * Defines the IDs of the elements that label the input.
+	 * Defines the IDs of the elements that label the component.
 	 * @default undefined
 	 * @public
 	 * @since 1.0.0-rc.15
@@ -467,6 +478,38 @@ class List extends UI5Element {
 	@property()
 	accessibleNameRef?: string;
 
+	/**
+	 * Defines the accessible description of the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.5.0
+	 */
+	@property()
+	accessibleDescription?: string;
+
+	/**
+	 * Defines the IDs of the elements that describe the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.5.0
+	 */
+	@property()
+	accessibleDescriptionRef?: string;
+
+	/**
+	 * Constantly updated value of texts collected from the associated labels
+	 * @private
+	 */
+	@property({ noAttribute: true })
+	_associatedDescriptionRefTexts?: string;
+
+	/**
+	 * Constantly updated value of texts collected from the associated labels
+	 * @private
+	 */
+	@property({ noAttribute: true })
+	_associatedLabelsRefTexts?: string;
+
 	/**
 	 * Defines the accessible role of the component.
 	 * @public
@@ -576,11 +619,18 @@ class List extends UI5Element {
 		return this.getItems();
 	}
 
+	_updateAssociatedLabelsTexts() {
+		this._associatedDescriptionRefTexts = getAllAccessibleDescriptionRefTexts(this);
+		this._associatedLabelsRefTexts = getAllAccessibleNameRefTexts(this);
+	}
+
 	onEnterDOM() {
+		registerUI5Element(this, this._updateAssociatedLabelsTexts.bind(this));
 		DragRegistry.subscribe(this);
 	}
 
 	onExitDOM() {
+		deregisterUI5Element(this);
 		this.unobserveListEnd();
 		this.resizeListenerAttached = false;
 		ResizeHandler.deregister(this.getDomRef()!, this._handleResize);
@@ -704,7 +754,11 @@ class List extends UI5Element {
 	}
 
 	get ariaLabelTxt() {
-		return getEffectiveAriaLabelText(this);
+		return this._associatedLabelsRefTexts || getEffectiveAriaLabelText(this);
+	}
+
+	get ariaDescriptionText() {
+		return this._associatedDescriptionRefTexts || getEffectiveAriaDescriptionText(this);
 	}
 
 	get ariaLabelModeText(): string {
@@ -872,10 +926,10 @@ class List extends UI5Element {
 
 		slottedItems.forEach(item => {
 			if (isInstanceOfListItemGroup(item)) {
-				const groupItems = [item.groupHeaderItem, ...item.items].filter(Boolean);
+				const groupItems = [item.groupHeaderItem, ...item.items.filter(listItem => listItem.assignedSlot)].filter(Boolean);
 				items.push(...groupItems);
 			} else {
-				items.push(item);
+				item.assignedSlot && items.push(item);
 			}
 		});
 
@@ -902,6 +956,23 @@ class List extends UI5Element {
 	}
 
 	_onkeydown(e: KeyboardEvent) {
+		if (isEnd(e)) {
+			this._handleEnd();
+			e.preventDefault();
+			return;
+		}
+
+		if (isHome(e)) {
+			this._handleHome();
+			return;
+		}
+
+		if (isDown(e)) {
+			this._handleDown();
+			e.preventDefault();
+			return;
+		}
+
 		if (isCtrl(e)) {
 			this._moveItem(e.target as ListItemBase, e);
 			return;
@@ -969,6 +1040,11 @@ class List extends UI5Element {
 			this.focusAfterElement();
 		}
 
+		if (isUp(e)) {
+			this._handleLodeMoreUp(e);
+			return;
+		}
+
 		if (isTabPrevious(e)) {
 			if (this.getPreviouslyFocusedItem()) {
 				this.focusPreviouslyFocusedItem();
@@ -998,12 +1074,29 @@ class List extends UI5Element {
 		this.loadMore();
 	}
 
+	_handleLodeMoreUp(e: KeyboardEvent) {
+		const growingButton = this.getGrowingButton();
+
+		if (growingButton === e.target) {
+			const items = this.getItems();
+			const lastItem = items[items.length - 1];
+
+			this.focusItem(lastItem);
+
+			e.preventDefault();
+			e.stopImmediatePropagation();
+		}
+	}
+
 	checkListInViewport() {
 		this._inViewport = isElementInView(this.getDomRef()!);
 	}
 
 	loadMore() {
-		this.fireDecoratorEvent("load-more");
+		// don't fire load-more on initial mount
+		if (this.children.length > 0) {
+			this.fireDecoratorEvent("load-more");
+		}
 	}
 
 	/*
@@ -1031,11 +1124,34 @@ class List extends UI5Element {
 		}
 	}
 
+	_handleHome() {
+		if (!this.growsWithButton) {
+			return;
+		}
+
+		this.focusFirstItem();
+	}
+
+	_handleEnd() {
+		if (!this.growsWithButton) {
+			return;
+		}
+
+		this._shouldFocusGrowingButton();
+	}
+
+	_handleDown() {
+		if (!this.growsWithButton) {
+			return;
+		}
+
+		this._shouldFocusGrowingButton();
+	}
+
 	_onfocusin(e: FocusEvent) {
 		const target = getNormalizedTarget(e.target as HTMLElement);
 		// If the focusin event does not origin from one of the 'triggers' - ignore it.
 		if (!this.isForwardElement(target)) {
-			e.stopImmediatePropagation();
 			return;
 		}
 
@@ -1064,6 +1180,7 @@ class List extends UI5Element {
 			e.stopImmediatePropagation();
 		}
 
+		e.stopImmediatePropagation();
 		this.setForwardingFocus(false);
 	}
 
@@ -1262,6 +1379,16 @@ class List extends UI5Element {
 		}
 	}
 
+	_shouldFocusGrowingButton() {
+		const items = this.getItems();
+		const lastIndex = items.length - 1;
+		const currentIndex = this._itemNavigation._currentIndex;
+
+		if (currentIndex !== -1 && currentIndex === lastIndex) {
+			this.focusGrowingButton();
+		}
+	}
+
 	getGrowingButton() {
 		return this.shadowRoot!.querySelector(`[id="${this._id}-growing-btn"]`) as HTMLElement;
 	}
diff --git a/packages/main/src/ListItem.ts b/packages/main/src/ListItem.ts
index 2e6c3dc64e92..5035f41804db 100644
--- a/packages/main/src/ListItem.ts
+++ b/packages/main/src/ListItem.ts
@@ -298,9 +298,6 @@ abstract class ListItem extends ListItemBase {
 	}
 
 	_onmousedown() {
-		if (this.getFocusDomRef()!.matches(":has(:focus-within)")) {
-			return;
-		}
 		this.activate();
 	}
 
@@ -315,7 +312,19 @@ abstract class ListItem extends ListItemBase {
 		this._onmouseup();
 	}
 
-	_onfocusout() {
+	_onfocusin(e: FocusEvent) {
+		super._onfocusin(e);
+
+		if (e.target !== this.getFocusDomRef()) {
+			this.deactivate();
+		}
+	}
+
+	_onfocusout(e: FocusEvent) {
+		if (e.target !== this.getFocusDomRef()) {
+			return;
+		}
+
 		this.deactivate();
 	}
 
diff --git a/packages/main/src/ListItemGroup.hbs b/packages/main/src/ListItemGroup.hbs
index c32938fee9da..d61eecb794d4 100644
--- a/packages/main/src/ListItemGroup.hbs
+++ b/packages/main/src/ListItemGroup.hbs
@@ -4,18 +4,25 @@
 	@dragover="{{_ondragover}}"
 	@drop="{{_ondrop}}"
 	@dragleave="{{_ondragleave}}">
+
 	{{#if hasHeader}}
 		<ui5-li-group-header ?focused="{{focused}}" part="header">
 			{{#if hasFormattedHeader}}
-			<slot name="header"></slot>
+				<slot name="header"></slot>
 			{{else}}
-			{{headerText}}
+				{{headerText}}
 			{{/if}}
 		</ui5-li-group-header>
 	{{/if}}
-	<slot></slot>
+
+	{{> items}}
 	<ui5-drop-indicator
 		orientation="Horizontal"
 		.ownerReference="{{this}}"
 	></ui5-drop-indicator>
-</ul>
\ No newline at end of file
+</ul>
+
+
+{{#*inline "items"}}
+	<slot></slot>
+{{/inline}}
\ No newline at end of file
diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts
index 5428fa605ef9..bb636dea29a0 100644
--- a/packages/main/src/Menu.ts
+++ b/packages/main/src/Menu.ts
@@ -402,7 +402,7 @@ class Menu extends UI5Element {
 
 	_afterPopoverClose() {
 		this.open = false;
-		this.fireEvent("close", {}, false, true);
+		this.fireDecoratorEvent("close");
 	}
 }
 
diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
index fab3e94658b3..3ef27ca62d1f 100644
--- a/packages/main/src/MultiComboBox.hbs
+++ b/packages/main/src/MultiComboBox.hbs
@@ -39,18 +39,16 @@
 					{{/if}}
 				{{/each}}
 			{{else}}
-					{{#if selected}}
-
-				<ui5-token
-					?readonly="{{../readonly}}"
-					class="ui5-multi-combobox-token"
-					data-ui5-id="{{this._id}}"
-					part="token-{{@index}}"
-					text="{{this.text}}"
-				>
-				</ui5-token>
-					{{/if}}
-
+				{{#if selected}}
+					<ui5-token
+						?readonly="{{../readonly}}"
+						class="ui5-multi-combobox-token"
+						data-ui5-id="{{this._id}}"
+						part="token-{{@index}}"
+						text="{{this.text}}"
+					>
+					</ui5-token>
+				{{/if}}
 			{{/if}}
 		{{/each}}
 	</ui5-tokenizer>
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
index de316f5927a3..6003c8579054 100644
--- a/packages/main/src/MultiComboBox.ts
+++ b/packages/main/src/MultiComboBox.ts
@@ -51,7 +51,7 @@ 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 { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
@@ -101,7 +101,6 @@ import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 import SuggestionsCss from "./generated/themes/Suggestions.css.js";
 import MultiComboBoxPopover from "./generated/themes/MultiComboBoxPopover.css.js";
 import type ComboBoxFilter from "./types/ComboBoxFilter.js";
-import type ListItemBase from "./ListItemBase.js";
 import CheckBox from "./CheckBox.js";
 import Input from "./Input.js";
 import type { InputEventDetail } from "./Input.js";
@@ -117,7 +116,6 @@ interface IMultiComboBoxItem extends UI5Element {
 	headerText?: string,
 	selected: boolean,
 	isGroupItem?: boolean,
-	stableDomRef: string,
 	_isVisible?: boolean,
 	items?: Array<IMultiComboBoxItem>,
 }
@@ -461,7 +459,12 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	 * Defines the component items.
 	 * @public
 	 */
-	@slot({ type: HTMLElement, "default": true, invalidateOnChildChange: true })
+	@slot({
+		type: HTMLElement,
+		"default": true,
+		invalidateOnChildChange: true,
+		individualSlots: true,
+	})
 	items!: Array<IMultiComboBoxItem>;
 
 	/**
@@ -992,7 +995,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_handleSelectAll() {
-		const filteredItems = this._filteredItems.filter(item => !item.isGroupItem);
+		const filteredItems = this._getItems().filter(item => item._isVisible && !item.isGroupItem);
 		const allItemsSelected = filteredItems.every(item => item.selected);
 		this._previouslySelectedItems = filteredItems.filter(item => item.selected).map(item => item);
 
@@ -1007,7 +1010,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		}
 	}
 
-	async _onListHeaderKeydown(e: KeyboardEvent) {
+	_onListHeaderKeydown(e: KeyboardEvent) {
 		const isArrowDown = isDown(e);
 		const isArrowUp = isUp(e);
 		const isSelectAllFocused = (e.target as HTMLElement).classList.contains("ui5-mcb-select-all-checkbox");
@@ -1062,8 +1065,8 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	_onItemKeydown(e: KeyboardEvent) {
-		const isFirstItemGroup = this.list?.items[1] === e.target && this.list?.items[0].hasAttribute("ui5-li-group");
-		const isFirstItem = this.list?.items[0] === e.target || isFirstItemGroup;
+		const isFirstItemGroup = this.list?.getSlottedNodes<IMultiComboBoxItem>("items")[1] === e.target && this.list?.getSlottedNodes<IMultiComboBoxItem>("items")[0].hasAttribute("ui5-li-group");
+		const isFirstItem = this.list?.getSlottedNodes<IMultiComboBoxItem>("items")[0] === e.target || isFirstItemGroup;
 		const isArrowUp = isUp(e) || isUpCtrl(e);
 
 		if (this.hasValueStateMessage && !this.valueStateHeader) {
@@ -1077,12 +1080,12 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 
 		if (isHomeCtrl(e)) {
 			this.list?._itemNavigation._handleHome();
-			this.list?.items[this.list?._itemNavigation._currentIndex].focus();
+			this.list?.getSlottedNodes<IMultiComboBoxItem>("items")[this.list?._itemNavigation._currentIndex].focus();
 		}
 
 		if (isEndCtrl(e)) {
 			this.list?._itemNavigation._handleEnd();
-			this.list?.items[this.list?._itemNavigation._currentIndex].focus();
+			this.list?.getSlottedNodes<IMultiComboBoxItem>("items")[this.list?._itemNavigation._currentIndex].focus();
 		}
 
 		e.preventDefault();
@@ -1094,12 +1097,12 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 
 		if ((isUpCtrl(e)) && !isFirstItem) {
 			this.list?._itemNavigation._handleUp();
-			this.list?.items[this.list?._itemNavigation._currentIndex].focus();
+			this.list?.getSlottedNodes<IMultiComboBoxItem>("items")[this.list?._itemNavigation._currentIndex].focus();
 		}
 
 		if (isDownCtrl(e)) {
 			this.list?._itemNavigation._handleDown();
-			this.list?.items[this.list?._itemNavigation._currentIndex].focus();
+			this.list?.getSlottedNodes<IMultiComboBoxItem>("items")[this.list?._itemNavigation._currentIndex].focus();
 		}
 
 		if (isShow(e)) {
@@ -1114,7 +1117,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		if (isFirstItem && isArrowUp) {
 			if (this.showSelectAll) {
 				if (isFirstItemGroup) {
-					this.list?.items[0].focus();
+					this.list?.getSlottedNodes<IMultiComboBoxItem>("items")[0].focus();
 					return;
 				}
 
@@ -1181,10 +1184,11 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	}
 
 	async _handleArrowDown() {
-		const firstListItem = this.list?.listItems[0];
+		const firstListItem = this.list?.getSlottedNodes<IMultiComboBoxItem>("items")[0];
+		const focusRef = firstListItem?.hasAttribute("ui5-mcb-item-group") ? (firstListItem as MultiComboBoxItemGroup).getFocusDomRef() : firstListItem;
 
 		if (this.open) {
-			firstListItem && this.list?._itemNavigation.setCurrentItem(firstListItem);
+			firstListItem && focusRef && this.list?._itemNavigation.setCurrentItem(focusRef);
 			this.value = this.valueBeforeAutoComplete || this.value;
 
 			// wait item navigation to apply correct tabindex
@@ -1197,8 +1201,8 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 
 	_handleItemRangeSelection(e: KeyboardEvent) {
 		const items = this._getItems();
-		const listItems = this.list?.items;
-		const currentItemIdx = Number(listItems?.indexOf(e.target as ListItemBase));
+		const listItems = this.list?.getSlottedNodes<IMultiComboBoxItem>("items");
+		const currentItemIdx = Number(listItems?.indexOf(e.target as IMultiComboBoxItem));
 		const nextItemIdx = currentItemIdx + 1;
 		const prevItemIdx = currentItemIdx - 1;
 		this._previouslySelectedItems = this._getSelectedItems();
@@ -1365,8 +1369,19 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		const itemsToFilter = this._getItems().filter(item => !item.isGroupItem);
 		const filteredItems = (Filters[this.filter] || Filters.StartsWithPerTerm)(str, itemsToFilter, "text");
 
-		// Return the filtered items and their group items
-		return this._getItems().filter((item, idx, allItems) => MultiComboBox._groupItemFilter(item, ++idx, allItems, filteredItems) || filteredItems.indexOf(item) !== -1);
+		this._getItems().forEach(item => {
+			if (isInstanceOfMultiComboBoxItem(item)) {
+				item._isVisible = filteredItems.includes(item);
+			}
+		});
+
+		return this.items.filter(item => {
+			if (item.isGroupItem) {
+				return (item as MultiComboBoxItemGroup).items.some(listItem => listItem._isVisible) ? item : false;
+			}
+
+			return item._isVisible;
+		});
 	}
 
 	/**
@@ -1433,12 +1448,14 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 	_listSelectionChange(e: CustomEvent<ListSelectionChangeEventDetail>) {
 		let changePrevented;
 
-		if (!isPhone()) {
-			this._previouslySelectedItems = this._getSelectedItems();
+		if (this.readonly) {
+			e.preventDefault();
+			return;
 		}
 
-		// sync list items and cb items
-		this.syncItems((e.target as List).listItems);
+		if (!isPhone()) {
+			this._previouslySelectedItems = e.detail.previouslySelectedItems;
+		}
 
 		// don't call selection change right after selection as user can cancel it on phone
 		if (!isPhone()) {
@@ -1477,16 +1494,6 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		this.value = this.valueBeforeAutoComplete || "";
 	}
 
-	syncItems(listItems: Array<ListItemBase>) {
-		listItems.forEach(item => {
-			this._getItems().forEach(mcbItem => {
-				if (mcbItem._id === item.getAttribute("data-ui5-token-id")) {
-					mcbItem.selected = item.selected;
-				}
-			});
-		});
-	}
-
 	fireSelectionChange() {
 		const changePrevented = !this.fireDecoratorEvent<MultiComboBoxSelectionChangeEventDetail>("selection-change", {
 			items: this._getSelectedItems(),
@@ -1609,11 +1616,8 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 
 		if (this.open) {
 			const list = this._getList();
-			const selectedListItemsCount = list?.querySelectorAll("[ui5-li][selected]")?.length;
-			const items = this._getItems().filter(item => !item.isGroupItem);
-			const listItems = list?.querySelectorAll("[ui5-li]")?.length;
-			const selectedItemsCount = items.filter(item => item.selected).length;
-			this._allSelected = selectedItemsCount === items.length || selectedListItemsCount === listItems;
+			const selectedListItemsCount = this.items.filter(item => item.selected).length;
+			this._allSelected = selectedListItemsCount > 0 && ((selectedListItemsCount === this.items.length) || (list?.getSlottedNodes("items").length === selectedListItemsCount));
 		}
 
 		this._effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled);
@@ -1629,6 +1633,12 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		this.style.setProperty(getScopedVarName("--_ui5-input-icons-count"), `${this.iconsCount}`);
 
 		if (!input || !value) {
+			this._getItems().forEach(item => {
+				if (isInstanceOfMultiComboBoxItem(item)) {
+					item._isVisible = true;
+					item._readonly = this.readonly;
+				}
+			});
 			return;
 		}
 		// Typehead causes issues on Android devices, so we disable it for now
@@ -1665,10 +1675,6 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		if (this._tokenizer.expanded && this.hasAttribute("focused")) {
 			this._tokenizer.scrollToEnd();
 		}
-
-		this._getItems().forEach(item => {
-			item._getRealDomRef = () => this._getResponsivePopover()!.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
-		});
 	}
 
 	get _isPhone() {
@@ -1769,7 +1775,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 
 		this._clearingValue = false;
 
-		if (!isPhone() && (((e.relatedTarget as HTMLElement)?.tagName !== "UI5-STATIC-AREA-ITEM") || !e.relatedTarget)) {
+		if (!isPhone() && e.target === this._innerInput) {
 			this._innerInput.setSelectionRange(0, this.value.length);
 		}
 		this._tokenizer.tokens.forEach(token => {
@@ -1786,6 +1792,7 @@ class MultiComboBox extends UI5Element implements IFormInputElement {
 		const focusIsGoingInValueStatePopup = this?.contains(e.relatedTarget as Node);
 
 		if (focusIsGoingInValueStatePopup) {
+			this.focused = false;
 			e.stopImmediatePropagation();
 			return;
 		}
diff --git a/packages/main/src/MultiComboBoxItem.hbs b/packages/main/src/MultiComboBoxItem.hbs
new file mode 100644
index 000000000000..2b3a2b996c80
--- /dev/null
+++ b/packages/main/src/MultiComboBoxItem.hbs
@@ -0,0 +1,19 @@
+{{>include "./ComboBoxItem.hbs"}}
+
+{{#*inline "listItemContent"}}
+	<ui5-checkbox ?disabled="{{_readonly}}" ?checked="{{selected}}" tabindex="invalid" accessible-name="{{_accessibleName}}"></ui5-checkbox>
+	<div part="content" id="content" class="ui5-li-content">
+		<div class="ui5-li-text-wrapper">
+			<span part="title" class="ui5-li-title">
+				{{{text}}}
+			</span>
+			{{#if additionalText}}
+				<span part="additional-text" class="ui5-li-additional-text">{{additionalText}}</span>
+			{{/if}}
+		</div>
+	</div>
+{{/inline}}
+
+{{#*inline "listItemAttributes"}}
+	role="option"
+{{/inline}}
\ No newline at end of file
diff --git a/packages/main/src/MultiComboBoxItem.ts b/packages/main/src/MultiComboBoxItem.ts
index 726742708340..c00d027ac43b 100644
--- a/packages/main/src/MultiComboBoxItem.ts
+++ b/packages/main/src/MultiComboBoxItem.ts
@@ -1,18 +1,38 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { event } from "@ui5/webcomponents-base/dist/decorators.js";
 import ComboBoxItem from "./ComboBoxItem.js";
+import CheckBox from "./CheckBox.js";
 import type { IMultiComboBoxItem } from "./MultiComboBox.js";
+import {
+	ARIA_LABEL_LIST_ITEM_CHECKBOX,
+} from "./generated/i18n/i18n-defaults.js";
+
+import styles from "./generated/themes/MultiComboBoxItem.css.js";
+import MultiComboBoxItemTemplate from "./generated/templates/MultiComboBoxItemTemplate.lit.js";
+import type { SelectionRequestEventDetail } from "./ListItem.js";
 
 /**
  * @class
  * The `ui5-mcb-item` represents the item for a `ui5-multi-combobox`.
  * @constructor
  * @extends ComboBoxItem
- * @abstract
  * @implements {IMultiComboBoxItem}
  * @public
  */
-@customElement("ui5-mcb-item")
+@customElement({
+	tag: "ui5-mcb-item",
+	template: MultiComboBoxItemTemplate,
+	styles: [ComboBoxItem.styles, styles],
+	dependencies: [...ComboBoxItem.dependencies, CheckBox],
+})
+
+@event("_selection-requested", {
+	bubbles: true,
+})
+
 class MultiComboBoxItem extends ComboBoxItem implements IMultiComboBoxItem {
 	/**
 	 * Defines the selected state of the component.
@@ -29,9 +49,27 @@ class MultiComboBoxItem extends ComboBoxItem implements IMultiComboBoxItem {
 	@property({ type: Boolean, noAttribute: true })
 	_isVisible = false;
 
+	@property({ type: Boolean, noAttribute: true })
+	_readonly = false;
+
+	@i18n("@ui5/webcomponents")
+	static i18nBundle: I18nBundle;
+
 	get isMultiComboBoxItem() {
 		return true;
 	}
+
+	_onclick(e: MouseEvent) {
+		if ((e.target as HTMLElement)?.hasAttribute("ui5-checkbox")) {
+			return this.fireDecoratorEvent<SelectionRequestEventDetail>("_selection-requested", { item: this, selected: (e.target as CheckBox).checked, selectionComponentPressed: true });
+		}
+
+		super._onclick(e);
+	}
+
+	get _accessibleName() {
+		return MultiComboBoxItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX);
+	}
 }
 
 const isInstanceOfMultiComboBoxItem = (object: any): object is MultiComboBoxItem => {
diff --git a/packages/main/src/MultiComboBoxItemGroup.hbs b/packages/main/src/MultiComboBoxItemGroup.hbs
new file mode 100644
index 000000000000..4cc129d71a5d
--- /dev/null
+++ b/packages/main/src/MultiComboBoxItemGroup.hbs
@@ -0,0 +1,9 @@
+{{>include "./ListItemGroup.hbs"}}
+
+{{#*inline "items"}}
+	{{#each items}}
+		{{#if _isVisible}}
+			<slot name="{{this._individualSlot}}"></slot>
+		{{/if}}
+	{{/each}}
+{{/inline}}
\ No newline at end of file
diff --git a/packages/main/src/MultiComboBoxItemGroup.ts b/packages/main/src/MultiComboBoxItemGroup.ts
index 2997679a0a9a..6fbc2a1bbb73 100644
--- a/packages/main/src/MultiComboBoxItemGroup.ts
+++ b/packages/main/src/MultiComboBoxItemGroup.ts
@@ -1,31 +1,26 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import type { IMultiComboBoxItem } from "./MultiComboBox.js";
 import type MultiComboBoxItem from "./MultiComboBoxItem.js";
+import MultiComboBoxItemGroupTemplate from "./generated/templates/MultiComboBoxItemGroupTemplate.lit.js";
+import type ListItemGroupHeader from "./ListItemGroupHeader.js";
+import ComboBoxItemGroup from "./ComboBoxItemGroup.js";
 
 /**
  * @class
  * The `ui5-mcb-item-group` is type of suggestion item,
  * that can be used to split the `ui5-multi-combobox` suggestions into groups.
  * @constructor
- * @extends UI5Element
- * @abstract
+ * @extends ComboBoxItemGroup
  * @public
  * @implements {IMultiComboBoxItem}
  * @since 2.0.0
  */
-@customElement("ui5-mcb-item-group")
-class MultiComboBoxItemGroup extends UI5Element implements IMultiComboBoxItem {
-	/**
-	 * Defines the text of the component.
-	 * @default undefined
-	 * @public
-	 */
-	@property()
-	headerText?: string;
-
+@customElement({
+	tag: "ui5-mcb-item-group",
+	template: MultiComboBoxItemGroupTemplate,
+})
+class MultiComboBoxItemGroup extends ComboBoxItemGroup implements IMultiComboBoxItem {
 	/**
 	 * Defines the items of the <code>ui5-mcb-item-group</code>.
 	 * @public
@@ -33,6 +28,7 @@ class MultiComboBoxItemGroup extends UI5Element implements IMultiComboBoxItem {
 	@slot({
 		"default": true,
 		invalidateOnChildChange: true,
+		individualSlots: true,
 		type: HTMLElement,
 	})
 	items!: Array<MultiComboBoxItem>;
@@ -52,6 +48,10 @@ class MultiComboBoxItemGroup extends UI5Element implements IMultiComboBoxItem {
 	get stableDomRef() {
 		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
+
+	getFocusDomRef() {
+		return this.shadowRoot!.querySelector("[ui5-li-group-header]") as ListItemGroupHeader;
+	}
 }
 
 MultiComboBoxItemGroup.define();
diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
index ee5fc1308e79..79ffc2c77421 100644
--- a/packages/main/src/MultiComboBoxPopover.hbs
+++ b/packages/main/src/MultiComboBoxPopover.hbs
@@ -80,33 +80,13 @@
 	{{#if filterSelected}}
 		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list" accessible-role="ListBox">
 			{{#each selectedItems}}
-				{{#if isGroupItem}}
-					<ui5-li-group header-text="{{this.headerText}}" data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">
-						{{#each this.items}}
-							{{#if _isVisible}}
-								{{> listItem}}
-							{{/if}}
-						{{/each}}
-					</ui5-li-group>
-				{{else}}
-					{{> listItem}}
-				{{/if}}
+				{{> listItem}}
 			{{/each}}
 		</ui5-list>
 	{{else}}
-		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list" accessible-role="ListBox">
+		<ui5-list separators="None" selection-mode="Multiple" class="ui5-multi-combobox-all-items-list" accessible-role="ListBox" @keydown="{{_onItemKeydown}}">
 			{{#each _filteredItems}}
-				{{#if isGroupItem}}
-					<ui5-li-group header-text="{{this.headerText}}" data-ui5-stable="{{this.stableDomRef}}" @keydown="{{../_onItemKeydown}}">
-						{{#each this.items}}
-							{{#if _isVisible}}
-								{{> listItem}}
-							{{/if}}
-						{{/each}}
-					</ui5-li-group>
-				{{else}}
-					{{> listItem}}
-				{{/if}}
+				{{> listItem}}
 			{{/each}}
 		</ui5-list>
 	{{/if}}
@@ -152,24 +132,13 @@
 {{/inline}}
 
 {{#*inline "listItem"}}
-	<ui5-li
-		wrapping-type="Normal"
-		type="{{../_listItemsType}}"
-		additional-text={{this.additionalText}}
-		?selected={{this.selected}}
-		data-ui5-token-id="{{this._id}}"
-		data-ui5-stable="{{this.stableDomRef}}"
-		@keydown="{{../_onItemKeydown}}"
-		accessible-role="Option"
-	>
-		{{this.text}}
-	</ui5-li>
+	<slot name="{{this._individualSlot}}"></slot>
 {{/inline}}
 
 {{#*inline "selectAllWrapper"}}
 	{{#if showSelectAll}}
 		<div class="ui5-mcb-select-all-header" @keydown="{{_onListHeaderKeydown}}" tabindex="0">
-			<ui5-checkbox ?checked={{_allSelected}} class="ui5-mcb-select-all-checkbox" text="{{selectAllCheckboxLabel}}" @ui5-change="{{_handleSelectAllCheckboxClick}}"></ui5-checkbox>
+			<ui5-checkbox ?disabled={{this.readonly}} ?checked={{_allSelected}} class="ui5-mcb-select-all-checkbox" text="{{selectAllCheckboxLabel}}" @ui5-change="{{_handleSelectAllCheckboxClick}}"></ui5-checkbox>
 		</div>
 	{{/if}}
 {{/inline}}
diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
index bb9816803f3c..223baf30f13d 100644
--- a/packages/main/src/Popover.ts
+++ b/packages/main/src/Popover.ts
@@ -303,11 +303,13 @@ class Popover extends Popup {
 		}
 
 		const rootNode = this.getRootNode();
+		const openerHTMLElement = rootNode instanceof Document ? rootNode.getElementById(opener) : document.getElementById(opener);
 
-		if (rootNode instanceof Document) {
-			return rootNode.getElementById(opener);
+		if (openerHTMLElement && this._isUI5Element(openerHTMLElement)) {
+			return openerHTMLElement.getFocusDomRef();
 		}
-		return document.getElementById(opener);
+
+		return openerHTMLElement;
 	}
 
 	shouldCloseDueToOverflow(placement: `${PopoverPlacement}`, openerRect: DOMRect): boolean {
diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts
index 956610307291..6a916618a86d 100644
--- a/packages/main/src/Popup.ts
+++ b/packages/main/src/Popup.ts
@@ -12,7 +12,7 @@ import {
 	isPhone,
 } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
 import { isEnter, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
diff --git a/packages/main/src/RadioButton.hbs b/packages/main/src/RadioButton.hbs
index cff24eed07c8..2804a65a506d 100644
--- a/packages/main/src/RadioButton.hbs
+++ b/packages/main/src/RadioButton.hbs
@@ -17,7 +17,7 @@
 			<circle part="outer-ring" class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
 			<circle part="inner-ring" class="ui5-radio-svg-inner" cx="50%" cy="50%" />
 		</svg>
-		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{effectiveAriaDisabled}}" name="{{name}}"  data-sap-no-tab-ref/>
+		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}"  data-sap-no-tab-ref/>
 	</div>
 
 	{{#if text}}
diff --git a/packages/main/src/RadioButton.ts b/packages/main/src/RadioButton.ts
index a57f2af8c270..5dc1d3f37563 100644
--- a/packages/main/src/RadioButton.ts
+++ b/packages/main/src/RadioButton.ts
@@ -7,7 +7,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import {
 	isSpace,
@@ -102,8 +102,8 @@ class RadioButton extends UI5Element implements IFormInputElement {
 	/**
 	 * Defines whether the component is read-only.
 	 *
-	 * **Note:** A read-only component is not editable,
-	 * but still provides visual feedback upon user interaction.
+	 * **Note:** A read-only component isn't editable or selectable.
+	 * However, because it's focusable, it still provides visual feedback upon user interaction.
 	 * @default false
 	 * @public
 	 */
@@ -125,6 +125,9 @@ class RadioButton extends UI5Element implements IFormInputElement {
 	 * **Note:** The property value can be changed with user interaction,
 	 * either by clicking/tapping on the component,
 	 * or by using the Space or Enter key.
+	 *
+	 * **Note:** Only enabled radio buttons can be checked.
+	 * Read-only radio buttons are not selectable, and therefore are always unchecked.
 	 * @default false
 	 * @formEvents change
 	 * @formProperty
@@ -406,7 +409,7 @@ class RadioButton extends UI5Element implements IFormInputElement {
 	}
 
 	get effectiveAriaDisabled() {
-		return this.disabled ? "true" : null;
+		return (this.disabled || this.readonly) ? "true" : null;
 	}
 
 	get ariaLabelText() {
diff --git a/packages/main/src/RadioButtonGroup.ts b/packages/main/src/RadioButtonGroup.ts
index d7e45c98b69d..5a32b63a906f 100644
--- a/packages/main/src/RadioButtonGroup.ts
+++ b/packages/main/src/RadioButtonGroup.ts
@@ -1,3 +1,4 @@
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import type RadioButton from "./RadioButton.js";
 
 class RadioButtonGroup {
@@ -83,12 +84,12 @@ class RadioButtonGroup {
 			return;
 		}
 
-		const nextItemToSelect = this._nextSelectable(currentItemPosition, group);
-		if (!nextItemToSelect) {
+		const nextItemToFocus = this._nextFocusable(currentItemPosition, group);
+		if (!nextItemToFocus) {
 			return;
 		}
 
-		this.updateSelectionInGroup(nextItemToSelect, groupName);
+		this.updateSelectionInGroup(nextItemToFocus, groupName);
 	}
 
 	static updateFormValidity(groupName: string) {
@@ -117,8 +118,21 @@ class RadioButtonGroup {
 		const hasCheckedRadio = group.some(radioBtn => radioBtn.checked);
 
 		group.filter(radioBtn => !radioBtn.disabled).forEach((radioBtn, idx) => {
+			let activeElement: Element | RadioButton = getActiveElement()!;
+
+			if (activeElement.classList.contains("ui5-radio-root")) {
+				activeElement = activeElement.getRootNode() as Element;
+				if (activeElement instanceof ShadowRoot) {
+					activeElement = activeElement.host;
+				}
+			}
+
 			if (hasCheckedRadio) {
-				radioBtn._tabIndex = radioBtn.checked ? "0" : "-1";
+				if (activeElement.hasAttribute("ui5-radio-button") && (activeElement as RadioButton).readonly) {
+					radioBtn._tabIndex = activeElement === radioBtn && radioBtn.readonly ? "0" : "-1";
+				} else {
+					radioBtn._tabIndex = radioBtn.checked ? "0" : "-1";
+				}
 			} else {
 				radioBtn._tabIndex = idx === 0 ? "0" : "-1";
 			}
@@ -139,12 +153,12 @@ class RadioButtonGroup {
 			return;
 		}
 
-		const previousItemToSelect = this._previousSelectable(currentItemPosition, group);
-		if (!previousItemToSelect) {
+		const previousItemToFocus = this._previousFocusable(currentItemPosition, group);
+		if (!previousItemToFocus) {
 			return;
 		}
 
-		this.updateSelectionInGroup(previousItemToSelect, groupName);
+		this.updateSelectionInGroup(previousItemToFocus, groupName);
 	}
 
 	static selectItem(item: RadioButton, groupName: string) {
@@ -155,12 +169,24 @@ class RadioButtonGroup {
 	static updateSelectionInGroup(radioBtnToSelect: RadioButton, groupName: string) {
 		const checkedRadio = this.getCheckedRadioFromGroup(groupName);
 
-		if (checkedRadio) {
+		if (checkedRadio && !radioBtnToSelect.readonly) {
 			this._deselectRadio(checkedRadio);
+			this.checkedRadios.set(groupName, radioBtnToSelect);
 		}
 
-		this._selectRadio(radioBtnToSelect);
-		this.checkedRadios.set(groupName, radioBtnToSelect);
+		// the focusable radio buttons are the enabled and the read-only ones, but only the enabled are selectable
+		if (radioBtnToSelect) {
+			radioBtnToSelect.focus();
+
+			if (!radioBtnToSelect.readonly) {
+				this._selectRadio(radioBtnToSelect);
+			} else {
+				// Ensure updateTabOrder is called after focus
+				setTimeout(() => {
+					this.updateTabOrder(groupName);
+				}, 0);
+			}
+		}
 	}
 
 	static _deselectRadio(radioBtn: RadioButton) {
@@ -170,51 +196,48 @@ class RadioButtonGroup {
 	}
 
 	static _selectRadio(radioBtn: RadioButton) {
-		if (radioBtn) {
-			radioBtn.focus();
-			radioBtn.checked = true;
-			radioBtn._checked = true;
-			radioBtn.fireDecoratorEvent("change");
-		}
+		radioBtn.checked = true;
+		radioBtn._checked = true;
+		radioBtn.fireDecoratorEvent("change");
 	}
 
-	static _nextSelectable(pos: number, group: RadioButton[]): RadioButton | null {
+	static _nextFocusable(pos: number, group: RadioButton[]): RadioButton | null {
 		if (!group) {
 			return null;
 		}
 
 		const groupLength = group.length;
-		let nextRadioToSelect = null;
+		let nextRadioToFocus = null;
 
 		if (pos === groupLength - 1) {
-			if (group[0].disabled || group[0].readonly) {
-				return this._nextSelectable(1, group);
+			if (group[0].disabled) {
+				return this._nextFocusable(1, group);
 			}
-			nextRadioToSelect = group[0];
-		} else if (group[pos + 1].disabled || group[pos + 1].readonly) {
-			return this._nextSelectable(pos + 1, group);
+			nextRadioToFocus = group[0];
+		} else if (group[pos + 1].disabled) {
+			return this._nextFocusable(pos + 1, group);
 		} else {
-			nextRadioToSelect = group[pos + 1];
+			nextRadioToFocus = group[pos + 1];
 		}
 
-		return nextRadioToSelect;
+		return nextRadioToFocus;
 	}
 
-	static _previousSelectable(pos: number, group: RadioButton[]): RadioButton | null {
+	static _previousFocusable(pos: number, group: RadioButton[]): RadioButton | null {
 		const groupLength = group.length;
-		let previousRadioToSelect = null;
+		let previousRadioToFocus = null;
 		if (pos === 0) {
-			if (group[groupLength - 1].disabled || group[groupLength - 1].readonly) {
-				return this._previousSelectable(groupLength - 1, group);
+			if (group[groupLength - 1].disabled) {
+				return this._previousFocusable(groupLength - 1, group);
 			}
-			previousRadioToSelect = group[groupLength - 1];
-		} else if (group[pos - 1].disabled || group[pos - 1].readonly) {
-			return this._previousSelectable(pos - 1, group);
+			previousRadioToFocus = group[groupLength - 1];
+		} else if (group[pos - 1].disabled) {
+			return this._previousFocusable(pos - 1, group);
 		} else {
-			previousRadioToSelect = group[pos - 1];
+			previousRadioToFocus = group[pos - 1];
 		}
 
-		return previousRadioToSelect;
+		return previousRadioToFocus;
 	}
 
 	static enforceSingleSelection(radioBtn: RadioButton, groupName: string) {
diff --git a/packages/main/src/RatingIndicator.ts b/packages/main/src/RatingIndicator.ts
index 5ae268f65059..aa989847ce76 100644
--- a/packages/main/src/RatingIndicator.ts
+++ b/packages/main/src/RatingIndicator.ts
@@ -14,7 +14,7 @@ import {
 	isHome,
 	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts
index c6318f0e9575..a516879eaece 100644
--- a/packages/main/src/SegmentedButtonItem.ts
+++ b/packages/main/src/SegmentedButtonItem.ts
@@ -6,7 +6,7 @@ import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { getEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index dde52d32285b..aadec8c3843b 100644
--- a/packages/main/src/Select.ts
+++ b/packages/main/src/Select.ts
@@ -17,7 +17,7 @@ import {
 	isTabPrevious,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/error.js";
@@ -199,6 +199,15 @@ type SelectLiveChangeEventDetail = {
 @event("selected-item-changed", {
 	bubbles: true,
 })
+
+/**
+ * Fired to make Vue.js two way data binding work properly.
+ * @private
+ */
+@event("input", {
+	bubbles: true,
+})
+
 class Select extends UI5Element implements IFormInputElement {
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
@@ -749,6 +758,9 @@ class Select extends UI5Element implements IFormInputElement {
 		//  Angular two way data binding
 		this.fireDecoratorEvent("selected-item-changed");
 
+		// Fire input event for Vue.js two-way binding
+		this.fireDecoratorEvent("input");
+
 		if (changePrevented) {
 			this._select(this._selectedIndexBeforeOpen);
 		}
diff --git a/packages/main/src/SliderBase.ts b/packages/main/src/SliderBase.ts
index e9ac5ff37560..d2e7b926404a 100644
--- a/packages/main/src/SliderBase.ts
+++ b/packages/main/src/SliderBase.ts
@@ -343,12 +343,12 @@ abstract class SliderBase extends UI5Element {
 
 	_onInputChange() {
 		if (this._valueOnInteractionStart !== this.value) {
-			this.fireEvent("change");
+			this.fireDecoratorEvent("change");
 		}
 	}
 
 	_onInputInput() {
-		this.fireEvent("input");
+		this.fireDecoratorEvent("input");
 	}
 
 	_updateValueFromInput(e: Event) {
diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts
index 34437c438045..75455c375850 100644
--- a/packages/main/src/StepInput.ts
+++ b/packages/main/src/StepInput.ts
@@ -20,7 +20,7 @@ import {
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
diff --git a/packages/main/src/Switch.ts b/packages/main/src/Switch.ts
index f90929c28144..796faacb0eaf 100644
--- a/packages/main/src/Switch.ts
+++ b/packages/main/src/Switch.ts
@@ -10,7 +10,7 @@ import { isDesktop, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { ClassMap } from "@ui5/webcomponents-base/dist/types.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
 import "@ui5/webcomponents-icons/dist/less.js";
diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts
index cb75c5c1f126..4ef5af1314a3 100644
--- a/packages/main/src/Table.ts
+++ b/packages/main/src/Table.ts
@@ -5,7 +5,7 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
diff --git a/packages/main/src/TableGrowing.ts b/packages/main/src/TableGrowing.ts
index 04b5f014977e..60edcf93e1b0 100644
--- a/packages/main/src/TableGrowing.ts
+++ b/packages/main/src/TableGrowing.ts
@@ -114,6 +114,9 @@ class TableGrowing extends UI5Element implements ITableGrowing {
 
 	/**
 	 * Disables the growing feature.
+	 *
+	 * @default false
+	 * @public
 	 */
 	@property({ type: Boolean })
 	disabled = false;
@@ -126,12 +129,16 @@ class TableGrowing extends UI5Element implements ITableGrowing {
 	@property({ type: Boolean })
 	_activeState = false;
 
+	@property({ type: Number, noAttribute: true })
+	_invalidate = 0;
+
 	readonly identifier = "TableGrowing";
 	_table?: Table;
 	_observer?: IntersectionObserver;
 	_individualSlot?: string;
 	_currentLastRow?: HTMLElement;
 	_shouldFocusRow?: boolean;
+	_renderContent = true;
 
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
@@ -139,9 +146,6 @@ class TableGrowing extends UI5Element implements ITableGrowing {
 	onTableActivate(table: Table): void {
 		this._table = table;
 		this._shouldFocusRow = false;
-		if (this._hasScrollToLoad()) {
-			this._observeTableEnd();
-		}
 	}
 
 	onTableRendered(): void {
@@ -163,7 +167,12 @@ class TableGrowing extends UI5Element implements ITableGrowing {
 			return;
 		}
 
-		if (this._hasScrollToLoad()) {
+		if (this._renderContent !== this.hasGrowingComponent()) {
+			this._invalidate++;
+			return;
+		}
+
+		if (this._hasScrollToLoad() && !this.hasGrowingComponent() && !this._observer) {
 			this._observeTableEnd();
 		}
 	}
@@ -179,15 +188,20 @@ class TableGrowing extends UI5Element implements ITableGrowing {
 		this._observer?.disconnect();
 		this._observer = undefined;
 		this._currentLastRow = undefined;
+		this._renderContent = this.hasGrowingComponent();
 		this._invalidateTable();
 	}
 
 	hasGrowingComponent(): boolean {
-		if (this._hasScrollToLoad()) {
-			return !(this._table && this._table._scrollContainer.scrollHeight > this._table._scrollContainer.clientHeight);
+		if (this.disabled) {
+			return false;
+		}
+
+		if (this.type === TableGrowingMode.Scroll) {
+			return !!this._table && this._table._scrollContainer.clientHeight >= this._table._tableElement.scrollHeight;
 		}
 
-		return this.type === TableGrowingMode.Button && !this.disabled;
+		return this.type === `${TableGrowingMode.Button}`;
 	}
 
 	/**
@@ -230,11 +244,7 @@ class TableGrowing extends UI5Element implements ITableGrowing {
 	 */
 	_getIntersectionObserver(): IntersectionObserver {
 		if (!this._observer) {
-			this._observer = new IntersectionObserver(this._onIntersection.bind(this), {
-				root: document,
-				rootMargin: "10px",
-				threshold: 1.0,
-			});
+			this._observer = new IntersectionObserver(this._onIntersection.bind(this), { root: document });
 		}
 		return this._observer;
 	}
diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts
index fe0e9d4224aa..19ba9b3d2b6d 100644
--- a/packages/main/src/TextArea.ts
+++ b/packages/main/src/TextArea.ts
@@ -7,7 +7,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText, getAssociatedLabelForTexts } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts
index 25c2b894ee91..8382c78246cc 100644
--- a/packages/main/src/TimePicker.ts
+++ b/packages/main/src/TimePicker.ts
@@ -11,7 +11,7 @@ import { submitForm } from "@ui5/webcomponents-base/dist/features/InputElementsF
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
diff --git a/packages/main/src/Tokenizer.hbs b/packages/main/src/Tokenizer.hbs
index 91479bd121dd..cabc70339d31 100644
--- a/packages/main/src/Tokenizer.hbs
+++ b/packages/main/src/Tokenizer.hbs
@@ -8,26 +8,37 @@
 		@focusout="{{_onfocusout}}"
 		@focusin="{{_onfocusin}}"
 		@ui5-select="{{onTokenSelect}}"
-		role="listbox"
-		aria-label="{{tokenizerLabel}}"
-		aria-description="{{tokenizerAriaDescription}}"
-		aria-disabled="{{_ariaDisabled}}"
-		aria-readonly="{{_ariaReadonly}}"
 	>
-		{{#each tokens}}
-			<slot name="{{this._individualSlot}}"></slot>
-		{{/each}}
+		<div class="ui5-tokenizer--list"
+			role="listbox"
+			aria-label="{{tokenizerLabel}}"
+			aria-description="{{tokenizerAriaDescription}}"
+			aria-disabled="{{_ariaDisabled}}"
+			aria-readonly="{{_ariaReadonly}}"
+		>
+			{{#each tokens}}
+				<slot name="{{this._individualSlot}}"></slot>
+			{{/each}}
+		</div>
+
+		{{#if showEffectiveClearAll}}
+			<span
+				role="button"
+				@click={{handleClearAll}}
+				class="ui5-tokenizer--clear-all">
+				{{_clearAllText}}</span>
+		{{/if}}
 	</div>
 
-	{{#if showNMore}}
-		<span
-			role="button"
-			aria-haspopup="dialog"
-			@click="{{_handleNMoreClick}}"
-			class="ui5-tokenizer-more-text"
-			part="n-more-text"
-		>{{_nMoreText}}</span>
-	{{/if}}
+		{{#if showNMore}}
+			<span
+				role="button"
+				aria-haspopup="dialog"
+				@click="{{_handleNMoreClick}}"
+				class="ui5-tokenizer-more-text"
+				part="n-more-text"
+			>{{_nMoreText}}</span>
+		{{/if}}
 </div>
 
 {{>include "./TokenizerPopover.hbs"}}
\ No newline at end of file
diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts
index 1b013bde3eee..8e43b80c47d4 100644
--- a/packages/main/src/Tokenizer.ts
+++ b/packages/main/src/Tokenizer.ts
@@ -2,13 +2,14 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { getFocusedElement } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
@@ -66,6 +67,7 @@ import {
 	TOKENIZER_ARIA_CONTAIN_ONE_TOKEN,
 	TOKENIZER_ARIA_CONTAIN_SEVERAL_TOKENS,
 	TOKENIZER_SHOW_ALL_ITEMS,
+	TOKENIZER_CLEAR_ALL,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -144,6 +146,7 @@ enum ClipboardDataOperation {
 		ResponsivePopoverCommonCss,
 		SuggestionsCss,
 		TokenizerPopoverCss,
+		getEffectiveScrollbarStyle(),
 	],
 	dependencies: [
 		ResponsivePopover,
@@ -211,6 +214,26 @@ class Tokenizer extends UI5Element {
 	@property({ type: Boolean })
 	readonly = false;
 
+	/**
+	 * Defines whether tokens are displayed on multiple lines.
+	 *
+	 * **Note:** The `multiLine` property is in an experimental state and is a subject to change.
+	 * @default false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	multiLine = false;
+
+	/**
+	 * Defines whether "Clear All" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.
+	 *
+	 * **Note:** The `showClearAll` property is in an experimental state and is a subject to change.
+	 * @default false
+	 * @public
+	 */
+	@property({ type: Boolean })
+	showClearAll = false;
+
 	/**
 	 * Defines whether the component is disabled.
 	 *
@@ -324,7 +347,7 @@ class Tokenizer extends UI5Element {
 	static i18nBundle: I18nBundle;
 	_resizeHandler: ResizeObserverCallback;
 	_itemNav: ItemNavigation;
-	_scrollEnablement: ScrollEnablement;
+	_scrollEnablement: ScrollEnablement | undefined;
 	_expandedScrollWidth?: number;
 	_tokenDeleting = false;
 	_preventCollapse = false;
@@ -347,16 +370,23 @@ class Tokenizer extends UI5Element {
 			getItemsCallback: this._getVisibleTokens.bind(this),
 		});
 
-		this._scrollEnablement = new ScrollEnablement(this);
 		this._deletedDialogItems = [];
 	}
 
+	handleClearAll() {
+		this.fireDecoratorEvent<TokenizerTokenDeleteEventDetail>("token-delete", { tokens: this._tokens });
+	}
+
 	onBeforeRendering() {
+		if (!this.multiLine) {
+			this._scrollEnablement = new ScrollEnablement(this);
+		}
+
 		const tokensLength = this._tokens.length;
 		this._tokensCount = tokensLength;
 
 		this._tokens.forEach(token => {
-			token.singleToken = tokensLength === 1;
+			token.singleToken = (tokensLength === 1) || this.multiLine;
 			token.readonly = this.readonly;
 		});
 	}
@@ -406,13 +436,19 @@ class Tokenizer extends UI5Element {
 		}
 	}
 
-	onTokenSelect() {
+	onTokenSelect(e: CustomEvent) {
 		const tokens = this._tokens;
 		const firstToken = tokens[0];
+		const targetToken = e.target as Token;
 
 		if (tokens.length === 1 && firstToken.isTruncatable) {
 			this.open = firstToken.selected;
 		}
+
+		if (this.multiLine && targetToken.isTruncatable) {
+			this.opener = targetToken;
+			this.open = targetToken.selected;
+		}
 	}
 
 	_getVisibleTokens() {
@@ -435,7 +471,9 @@ class Tokenizer extends UI5Element {
 			firstToken.forcedTabIndex = "0";
 		}
 
-		this._scrollEnablement.scrollContainer = this.contentDom;
+		if (this._scrollEnablement) {
+			this._scrollEnablement.scrollContainer = this.contentDom;
+		}
 
 		if (this.expanded) {
 			this._expandedScrollWidth = this.contentDom.scrollWidth;
@@ -575,9 +613,16 @@ class Tokenizer extends UI5Element {
 	}
 
 	handleBeforeOpen() {
-		this._tokens.forEach(token => {
-			token._isVisible = true;
-		});
+		if (this.multiLine) {
+			this._resetTokensVisibility();
+
+			const focusedToken = this._tokens.find(token => token.focused);
+			focusedToken!._isVisible = true;
+		} else {
+			this._tokens.forEach(token => {
+				token._isVisible = true;
+			});
+		}
 
 		const list = this._getList();
 		const firstListItem = list.querySelectorAll("[ui5-li]")[0]! as ListItem;
@@ -938,6 +983,20 @@ class Tokenizer extends UI5Element {
 		}
 	}
 
+	_resetTokensVisibility() {
+		this._tokens.forEach(token => {
+			token._isVisible = false;
+		});
+	}
+
+	get hasTokens() {
+		return this._tokens.length > 0;
+	}
+
+	get showEffectiveClearAll() {
+		return this.showClearAll && this.hasTokens && this.multiLine && !this.readonly;
+	}
+
 	_fillClipboard(shortcutName: ClipboardDataOperation, tokens: Array<IToken>) {
 		const tokensTexts = tokens.filter(token => token.selected).map(token => token.text).join("\r\n");
 
@@ -960,8 +1019,8 @@ class Tokenizer extends UI5Element {
 	 * @protected
 	 */
 	scrollToStart() {
-		if (this._scrollEnablement.scrollContainer) {
-			this._scrollEnablement.scrollTo(0, 0);
+		if (this._scrollEnablement?.scrollContainer) {
+			this._scrollEnablement?.scrollTo(0, 0);
 		}
 	}
 
@@ -972,8 +1031,8 @@ class Tokenizer extends UI5Element {
 	 */
 	scrollToEnd() {
 		const expandedTokenizerScrollWidth = this.contentDom && (this.effectiveDir !== "rtl" ? this.contentDom.scrollWidth : -this.contentDom.scrollWidth);
-		if (this._scrollEnablement.scrollContainer) {
-			this._scrollEnablement.scrollTo(expandedTokenizerScrollWidth, 0, 5, 10);
+		if (this._scrollEnablement?.scrollContainer) {
+			this._scrollEnablement?.scrollTo(expandedTokenizerScrollWidth, 0, 5, 10);
 		}
 	}
 
@@ -991,9 +1050,9 @@ class Tokenizer extends UI5Element {
 		const tokenContainerRect = this.contentDom.getBoundingClientRect();
 
 		if (tokenRect.left < tokenContainerRect.left) {
-			this._scrollEnablement.scrollTo(this.contentDom.scrollLeft - (tokenContainerRect.left - tokenRect.left + 5), 0);
+			this._scrollEnablement?.scrollTo(this.contentDom.scrollLeft - (tokenContainerRect.left - tokenRect.left + 5), 0);
 		} else if (tokenRect.right > tokenContainerRect.right) {
-			this._scrollEnablement.scrollTo(this.contentDom.scrollLeft + (tokenRect.right - tokenContainerRect.right + 5), 0);
+			this._scrollEnablement?.scrollTo(this.contentDom.scrollLeft + (tokenRect.right - tokenContainerRect.right + 5), 0);
 		}
 	}
 
@@ -1025,6 +1084,10 @@ class Tokenizer extends UI5Element {
 		return Tokenizer.i18nBundle.getText(TOKENIZER_SHOW_ALL_ITEMS, this._nMoreCount);
 	}
 
+	get _clearAllText() {
+		return Tokenizer.i18nBundle.getText(TOKENIZER_CLEAR_ALL);
+	}
+
 	get showNMore() {
 		return !this.expanded && !!this.overflownTokens.length;
 	}
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
index 2e6659de7836..7a65fc96ebb1 100644
--- a/packages/main/src/Toolbar.ts
+++ b/packages/main/src/Toolbar.ts
@@ -9,7 +9,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import "@ui5/webcomponents-icons/dist/overflow.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
@@ -333,6 +333,8 @@ class Toolbar extends UI5Element {
 	onBeforeRendering() {
 		this.detachListeners();
 		this.attachListeners();
+
+		this.preprocessItems();
 	}
 
 	async onAfterRendering() {
@@ -348,19 +350,19 @@ class Toolbar extends UI5Element {
 	 */
 	isOverflowOpen(): boolean {
 		const overflowPopover = this.getOverflowPopover();
-		return overflowPopover!.open;
+		return overflowPopover.open;
 	}
 
 	openOverflow(): void {
 		const overflowPopover = this.getOverflowPopover();
-		overflowPopover!.opener = this.overflowButtonDOM!;
-		overflowPopover!.open = true;
-		this.reverseOverflow = overflowPopover!.actualPlacement === "Top";
+		overflowPopover.opener = this.overflowButtonDOM!;
+		overflowPopover.open = true;
+		this.reverseOverflow = overflowPopover.actualPlacement === "Top";
 	}
 
 	closeOverflow() {
 		const overflowPopover = this.getOverflowPopover();
-		overflowPopover!.open = false;
+		overflowPopover.open = false;
 	}
 
 	toggleOverflow() {
@@ -371,8 +373,8 @@ class Toolbar extends UI5Element {
 		}
 	}
 
-	getOverflowPopover(): Popover | null {
-		return this.shadowRoot!.querySelector<Popover>(".ui5-overflow-popover");
+	getOverflowPopover(): Popover {
+		return this.shadowRoot!.querySelector<Popover>(".ui5-overflow-popover")!;
 	}
 
 	/**
@@ -526,7 +528,7 @@ class Toolbar extends UI5Element {
 			const abstractItem = this.getItemByID(refItemId);
 			const eventType = e.type;
 			const eventTypeNonPrefixed: string = e.type.replace("ui5-", "");
-			const prevented = !abstractItem?.fireEvent(eventTypeNonPrefixed, e.detail, true);
+			const prevented = !abstractItem?.fireDecoratorEvent(eventTypeNonPrefixed, { ...e.detail, targetRef: target });
 			const eventOptions = abstractItem?.subscribedEvents.get(eventType) || abstractItem?.subscribedEvents.get(eventTypeNonPrefixed);
 
 			if (prevented || abstractItem?.preventOverflowClosing || eventOptions?.preventClosing) {
@@ -616,6 +618,13 @@ class Toolbar extends UI5Element {
 	getRegisteredToolbarItemByID(id: string): HTMLElement | null {
 		return this.itemsDOM!.querySelector(`[data-ui5-external-action-item-id="${id}"]`);
 	}
+
+	preprocessItems() {
+		this.items.forEach(item => {
+			item._getRealDomRef = () => this.getDomRef()!.querySelector(`[data-ui5-stable*=${item.stableDomRef}]`)
+				?? this.getOverflowPopover().querySelector(`[data-ui5-stable*=${item.stableDomRef}]`)!;
+		});
+	}
 }
 
 Toolbar.define();
diff --git a/packages/main/src/ToolbarButton.hbs b/packages/main/src/ToolbarButton.hbs
index 3c8ad9f04fab..02db797dd118 100644
--- a/packages/main/src/ToolbarButton.hbs
+++ b/packages/main/src/ToolbarButton.hbs
@@ -13,7 +13,6 @@
 	?hidden="{{this.hidden}}"
 	data-ui5-external-action-item-id="{{this._id}}"
 	data-ui5-stable="{{this.stableDomRef}}"
-	.refItemId="{{this._id}}"
 >
 		{{this.text}}
 </ui5-button>
\ No newline at end of file
diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts
index 187626692ad5..b4f846dd23f9 100644
--- a/packages/main/src/ToolbarButton.ts
+++ b/packages/main/src/ToolbarButton.ts
@@ -45,7 +45,11 @@ type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes;
  * property is set to `true`.
  * @public
  */
-@event("click")
+@event("click", {
+	bubbles: true,
+	cancelable: true,
+})
+
 class ToolbarButton extends ToolbarItem {
 	/**
 	 * Defines if the action is disabled.
diff --git a/packages/main/src/ToolbarPopoverSelect.hbs b/packages/main/src/ToolbarPopoverSelect.hbs
index 38011e45caaa..0590af8dfb87 100644
--- a/packages/main/src/ToolbarPopoverSelect.hbs
+++ b/packages/main/src/ToolbarPopoverSelect.hbs
@@ -1,5 +1,6 @@
 <ui5-select 
 	class="ui5-tb-popover-item"
+	data-ui5-stable="{{this.stableDomRef}}"
 	data-ui5-external-action-item-id="{{this._id}}"
 	value-state="{{this.valueState}}"
 	?disabled="{{this.disabled}}"
diff --git a/packages/main/src/ToolbarPopoverSeparator.hbs b/packages/main/src/ToolbarPopoverSeparator.hbs
index b5b76fa82063..be0052db33d9 100644
--- a/packages/main/src/ToolbarPopoverSeparator.hbs
+++ b/packages/main/src/ToolbarPopoverSeparator.hbs
@@ -1,5 +1,6 @@
 <div
 	class="ui5-tb-separator-in-overflow ui5-tb-popover-item"
+	data-ui5-stable="{{this.stableDomRef}}"
 	data-ui5-external-action-item-id="{{this._id}}"
 	?visible="{{visible}}"
 ></div>
\ No newline at end of file
diff --git a/packages/main/src/ToolbarSelect.hbs b/packages/main/src/ToolbarSelect.hbs
index ff7bd3735acf..159b38e413c1 100644
--- a/packages/main/src/ToolbarSelect.hbs
+++ b/packages/main/src/ToolbarSelect.hbs
@@ -1,6 +1,7 @@
 <ui5-select 
 	class="ui5-tb-item"
 	style="{{this.styles}}"
+	data-ui5-stable="{{this.stableDomRef}}"
 	data-ui5-external-action-item-id="{{this._id}}"
 	value-state="{{this.valueState}}"
 	?disabled="{{this.disabled}}"
diff --git a/packages/main/src/ToolbarSeparator.hbs b/packages/main/src/ToolbarSeparator.hbs
index 5200768d19b7..6a78678bbfc7 100644
--- a/packages/main/src/ToolbarSeparator.hbs
+++ b/packages/main/src/ToolbarSeparator.hbs
@@ -1,4 +1,5 @@
 <div
 	class="ui5-tb-separator ui5-tb-item"
+	data-ui5-stable="{{this.stableDomRef}}"
 	data-ui5-external-action-item-id="{{this._id}}"
 ></div>
\ No newline at end of file
diff --git a/packages/main/src/ToolbarSpacer.ts b/packages/main/src/ToolbarSpacer.ts
index ab67e5083691..011d602c5291 100644
--- a/packages/main/src/ToolbarSpacer.ts
+++ b/packages/main/src/ToolbarSpacer.ts
@@ -38,11 +38,11 @@ class ToolbarSpacer extends ToolbarItem {
 	}
 
 	get ignoreSpace() {
-		return this.width === "";
+		return this.width === "" || this.width === undefined || this.width === "auto";
 	}
 
 	get hasFlexibleWidth() {
-		return this.width === "";
+		return this.width === "" || this.width === undefined || this.width === "auto";
 	}
 
 	static get toolbarTemplate() {
diff --git a/packages/main/src/Tree.hbs b/packages/main/src/Tree.hbs
index 5493684efae3..6fc08787aa27 100644
--- a/packages/main/src/Tree.hbs
+++ b/packages/main/src/Tree.hbs
@@ -4,7 +4,10 @@
     .footerText="{{footerText}}"
     .noDataText="{{noDataText}}"
     .accessibleRole="{{_role}}"
-    .accessibleName="{{_label}}"
+    .accessibleName="{{accessibleName}}"
+    .accessibleNameRef="{{accessibleNameRef}}"
+    .accessibleDescription="{{accessibleDescription}}"
+    .accessibleDescriptionRef="{{accessibleDescriptionRef}}"
 	@dragenter="{{_ondragenter}}"
 	@dragover="{{_ondragover}}"
 	@drop="{{_ondrop}}"
diff --git a/packages/main/src/Tree.ts b/packages/main/src/Tree.ts
index f549e1e4a5d4..8c37a38a4ff6 100644
--- a/packages/main/src/Tree.ts
+++ b/packages/main/src/Tree.ts
@@ -8,7 +8,6 @@ import Orientation from "@ui5/webcomponents-base/dist/types/Orientation.js";
 import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import DropIndicator from "./DropIndicator.js";
 import TreeItem from "./TreeItem.js";
 import type TreeItemBase from "./TreeItemBase.js";
@@ -304,6 +303,24 @@ class Tree extends UI5Element {
 	@property()
 	accessibleNameRef?: string;
 
+	/**
+	 * Defines the accessible description of the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.5.0
+	 */
+	@property()
+	accessibleDescription?: string;
+
+	/**
+	 * Defines the IDs of the elements that describe the component.
+	 * @default undefined
+	 * @public
+	 * @since 2.5.0
+	 */
+	@property()
+	accessibleDescriptionRef?: string;
+
 	/**
 	 * Defines the items of the component. Tree items may have other tree items as children.
 	 *
@@ -353,10 +370,6 @@ class Tree extends UI5Element {
 		return ListAccessibleRole.Tree;
 	}
 
-	get _label() {
-		return getEffectiveAriaLabelText(this);
-	}
-
 	get _hasHeader() {
 		return !!this.header.length;
 	}
diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
index eadb967ade56..6035281c047b 100644
--- a/packages/main/src/i18n/messagebundle.properties
+++ b/packages/main/src/i18n/messagebundle.properties
@@ -444,6 +444,9 @@ TOKENIZER_POPOVER_REMOVE=All items
 #XFLD: Token number indicator which is used to show all tokens in Tokenizer when all of the tokens are hidden
 TOKENIZER_SHOW_ALL_ITEMS={0} Items
 
+#XFLD: Clear All link text in Tokenizer
+TOKENIZER_CLEAR_ALL=Clear All
+
 #XACT: Label text for TreeListItem
 TREE_ITEM_ARIA_LABEL=Tree Item
 
diff --git a/packages/main/src/i18n/messagebundle_en.properties b/packages/main/src/i18n/messagebundle_en.properties
index aadd5d2df75c..deb53c8e15d7 100644
--- a/packages/main/src/i18n/messagebundle_en.properties
+++ b/packages/main/src/i18n/messagebundle_en.properties
@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=All items
 
 TOKENIZER_SHOW_ALL_ITEMS={0} Items
 
+TOKENIZER_CLEAR_ALL=Clear All
+
 TREE_ITEM_ARIA_LABEL=Tree Item
 
 TREE_ITEM_EXPAND_NODE=Expand Node
diff --git a/packages/main/src/i18n/messagebundle_en_US_sappsd.properties b/packages/main/src/i18n/messagebundle_en_US_sappsd.properties
index 6b2164502790..de82fba95944 100644
--- a/packages/main/src/i18n/messagebundle_en_US_sappsd.properties
+++ b/packages/main/src/i18n/messagebundle_en_US_sappsd.properties
@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=[[[Āĺĺ įţēɱş∙∙∙∙∙]]]
 
 TOKENIZER_SHOW_ALL_ITEMS=[[[{0} Ĭţēɱş]]]
 
+TOKENIZER_CLEAR_ALL=[[[Ĉĺēąŗ Āĺĺ∙∙∙∙∙]]]
+
 TREE_ITEM_ARIA_LABEL=[[[Ţŗēē Ĭţēɱ∙∙∙∙∙]]]
 
 TREE_ITEM_EXPAND_NODE=[[[Ĕχρąŋƌ Ńŏƌē∙∙∙∙∙∙∙∙]]]
diff --git a/packages/main/src/i18n/messagebundle_en_US_saprigi.properties b/packages/main/src/i18n/messagebundle_en_US_saprigi.properties
index cbaeff16153f..b9f4dd67e40d 100644
--- a/packages/main/src/i18n/messagebundle_en_US_saprigi.properties
+++ b/packages/main/src/i18n/messagebundle_en_US_saprigi.properties
@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=‌‍​‍​‍‌​​‌‍‌​​‍
 
 TOKENIZER_SHOW_ALL_ITEMS=‍​‍‌‌‌​​‍‌‍‍‌​‍​‌‌‌‍‌‌‌‌‍‌‌​‍‍‌​​‍​‌‍‍​‌​​​{0}‌‌‌ Items
 
+TOKENIZER_CLEAR_ALL=‌‌​‍‍​‍‍​‍‍​​​‌​‍​‌​‍‍​‌​‌‌‍​‍​​​‍​​‌‌​​‍Clear All
+
 TREE_ITEM_ARIA_LABEL=‌‌‌​​‌​​​‍‍‌‌​‍‍‍​‍‌​‍​​‍‌‌‍‌‌‌‌‌​‍‌‌‍​‍​Tree Item
 
 TREE_ITEM_EXPAND_NODE=‍‍‍‍​​‍​‌‍‍​‌‍‍​‍‌‍​​​‌​‍‍‌‌​​‌‌‍‌​‍‌‌​‍Expand Node
diff --git a/packages/main/src/i18n/messagebundle_en_US_saptrc.properties b/packages/main/src/i18n/messagebundle_en_US_saptrc.properties
index 6d25d69477b7..1e48ca99a9d9 100644
--- a/packages/main/src/i18n/messagebundle_en_US_saptrc.properties
+++ b/packages/main/src/i18n/messagebundle_en_US_saptrc.properties
@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=bn0YEn1E+sLzSCHk+3jGag_All items
 
 TOKENIZER_SHOW_ALL_ITEMS=516vV/mWdfVu9olV3JhrZA_{0} Items
 
+TOKENIZER_CLEAR_ALL=E5kwB9f60GvHRDcIYdEY9A_Clear All
+
 TREE_ITEM_ARIA_LABEL=EfdKcPq8l5pVMMqYgxkNpQ_Tree Item
 
 TREE_ITEM_EXPAND_NODE=ApvHBxS7YmQKM7e9vkCptA_Expand Node
diff --git a/packages/main/src/i18n/messagebundle_sv.properties b/packages/main/src/i18n/messagebundle_sv.properties
index 8a91c96aaf10..6aeff113b10e 100644
--- a/packages/main/src/i18n/messagebundle_sv.properties
+++ b/packages/main/src/i18n/messagebundle_sv.properties
@@ -332,7 +332,7 @@ MONTH_PICKER_DESCRIPTION=Månadsväljare
 
 YEAR_PICKER_DESCRIPTION=Årsväljare
 
-SLIDER_TOOLTIP_INPUT_DESCRIPTION=Press F2 to enter a value
+SLIDER_TOOLTIP_INPUT_DESCRIPTION=Tryck på F2 för att ange ett värde
 
 SLIDER_TOOLTIP_INPUT_LABEL=Aktuellt värde
 
diff --git a/packages/main/src/themes/ComboBoxItem.css b/packages/main/src/themes/ComboBoxItem.css
new file mode 100644
index 000000000000..c500bb0dd498
--- /dev/null
+++ b/packages/main/src/themes/ComboBoxItem.css
@@ -0,0 +1,14 @@
+:host([ui5-cb-item]) {
+	height: auto;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-cb-item]) .ui5-li-root {
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-cb-item]) .ui5-li-content {
+	padding-bottom: .875rem;
+	padding-top: .875rem;
+	box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css
index 6105faad10ca..4f18624a43ab 100644
--- a/packages/main/src/themes/Dialog.css
+++ b/packages/main/src/themes/Dialog.css
@@ -21,6 +21,7 @@
 	max-height: 100%;
 	max-width: 100%;
 	border-radius: 0;
+	min-width: 0; /*this is for preventing the dialog to hold its width on small screens*/
 }
 
 :host([draggable]) .ui5-popup-header-root,
diff --git a/packages/main/src/themes/Form.css b/packages/main/src/themes/Form.css
index ccf84c66e7ee..4434bb83eec1 100644
--- a/packages/main/src/themes/Form.css
+++ b/packages/main/src/themes/Form.css
@@ -1,5 +1,5 @@
 @import "./FormLayout.css";
-@import "./FormLabelSpan.css";
+@import "./FormItemSpan.css";
 
 :host {
 	display: block;
diff --git a/packages/main/src/themes/FormItem.css b/packages/main/src/themes/FormItem.css
index 446eda5d6b96..e7fa0525538d 100644
--- a/packages/main/src/themes/FormItem.css
+++ b/packages/main/src/themes/FormItem.css
@@ -9,7 +9,7 @@
 :host([column-span="3"]) {
 	grid-column: span 3;
 }
-	
+
 :host([column-span="4"]) {
 	grid-column: span 4;
 }
@@ -62,4 +62,34 @@
 }
 ::slotted([ui5-select]) {
 	width: 100%;
+}
+
+
+@container (max-width: 600px) {
+	:host {
+		order: var(--ui5-form-item-order-S, unset);
+	}
+}
+
+/* M  - 1 column by default, up to 2 columns */
+@container (width > 600px) and (width <= 1024px) {
+	:host {
+		order: var(--ui5-form-item-order-M, unset);
+	}
+
+}
+
+/* L - 2 columns by default, up to 3 columns */
+@container (width > 1024px) and (width <= 1440px) {
+	:host {
+		order: var(--ui5-form-item-order-L, unset);
+	}
+}
+
+/* XL - 3 columns by default, up to 6 */
+@container (min-width: 1441px) {
+	:host {
+		order: var(--ui5-form-item-order-Xl, unset);
+	}
+
 }
\ No newline at end of file
diff --git a/packages/main/src/themes/FormItemSpan.css b/packages/main/src/themes/FormItemSpan.css
new file mode 100644
index 000000000000..7657b599eec5
--- /dev/null
+++ b/packages/main/src/themes/FormItemSpan.css
@@ -0,0 +1,59 @@
+/* 
+* By default, 
+* - in M, L ans XL sizes the Form's labels take 4 cells out 12 of the whole width, e.g 4:8:0
+* - in S size, it  the Form's labels take the whole width 12/12 cells, e.g the label and the input are displayed vertically.
+*
+* The ratio can be changed via the labelSpan and the emptySpan properties.
+*/
+
+@container (max-width: 600px) {
+	.ui5-form-item,
+	.ui5-form-group {
+		--ui5-form-item-layout: var(--ui5-form-item-layout-S);
+	}
+
+	:host([label-span-s="12"]) .ui5-form-item,
+	:host([label-span-s="12"]) .ui5-form-group {
+		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
+		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
+	}
+}
+
+@container (width > 600px) and (width <= 1024px) {
+	.ui5-form-item,
+	.ui5-form-group {
+		--ui5-form-item-layout: var(--ui5-form-item-layout-M);
+	}
+
+	:host([label-span-m="12"]) .ui5-form-item,
+	:host([label-span-m="12"]) .ui5-form-group {
+		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
+		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
+	}
+}
+
+@container (width > 1024px) and (width <= 1440px) {
+	.ui5-form-item,
+	.ui5-form-group {
+		--ui5-form-item-layout: var(--ui5-form-item-layout-L);
+	}
+
+	:host([label-span-l="12"]) .ui5-form-item,
+	:host([label-span-l="12"]) .ui5-form-group {
+		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
+		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
+	}
+}
+
+@container (min-width: 1441px) {
+	.ui5-form-item,
+	.ui5-form-group {
+		--ui5-form-item-layout: var(--ui5-form-item-layout-XL);
+	}
+
+	:host([label-span-xl="12"]) .ui5-form-item,
+	:host([label-span-xl="12"]) .ui5-form-group {
+		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
+		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
+	}
+}
diff --git a/packages/main/src/themes/FormLabelSpan.css b/packages/main/src/themes/FormLabelSpan.css
deleted file mode 100644
index bfbe6c150755..000000000000
--- a/packages/main/src/themes/FormLabelSpan.css
+++ /dev/null
@@ -1,267 +0,0 @@
-/* 
-* The Form's labels take 4 cells out 12 in M, L ans XL sizes,
-* and 12 cells (whole row) in S size.
-* The ratio can be changed trough the labelSpan property.
-*/
-
-/* S - 12 cells */
-@container (max-width: 600px) {
-	:host([label-span-s="1"]) .ui5-form-item,
-	:host([label-span-s="1"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span1);
-	}
-
-	:host([label-span-s="2"]) .ui5-form-item,
-	:host([label-span-s="2"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span2);
-	}
-
-	:host([label-span-s="3"]) .ui5-form-item,
-	:host([label-span-s="3"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span3);
-	}
-
-	:host([label-span-s="4"]) .ui5-form-item,
-	:host([label-span-s="4"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span4);
-	}
-
-	:host([label-span-s="5"]) .ui5-form-item,
-	:host([label-span-s="5"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span5);
-	}
-
-	:host([label-span-s="6"]) .ui5-form-item,
-	:host([label-span-s="6"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span6);
-	}
-
-	:host([label-span-s="7"]) .ui5-form-item,
-	:host([label-span-s="7"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span7);
-	}
-
-	:host([label-span-s="8"]) .ui5-form-item,
-	:host([label-span-s="8"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span8);
-	}
-
-	:host([label-span-s="9"]) .ui5-form-item,
-	:host([label-span-s="9"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span9);
-	}
-
-	:host([label-span-s="10"]) .ui5-form-item,
-	:host([label-span-s="10"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span10);
-	}
-
-	:host([label-span-s="11"]) .ui5-form-item,
-	:host([label-span-s="11"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span11);
-	}
-
-	:host(:not([label-span-s])) .ui5-form-item,
-	:host(:not([label-span-s])) .ui5-form-group,
-	:host([label-span-s="12"]) .ui5-form-item,
-	:host([label-span-s="12"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span12);
-		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
-		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
-	}
-}
-
-/* M  - 4 cells by default, up to 12 cells */
-@container (width > 600px) and (width <= 1024px) {
-	:host([label-span-m="1"]) .ui5-form-item,
-	:host([label-span-m="1"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span1);
-	}
-
-	:host([label-span-m="2"]) .ui5-form-item,
-	:host([label-span-m="2"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span2);
-	}
-
-	:host([label-span-m="3"]) .ui5-form-item,
-	:host([label-span-m="3"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span3);
-	}
-
-	:host([label-span-m="4"]) .ui5-form-item,
-	:host([label-span-m="4"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span4);
-	}
-
-	:host([label-span-m="5"]) .ui5-form-item,
-	:host([label-span-m="5"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span5);
-	}
-
-	:host([label-span-m="6"]) .ui5-form-item,
-	:host([label-span-m="6"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span6);
-	}
-
-	:host([label-span-m="7"]) .ui5-form-item,
-	:host([label-span-m="7"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span7);
-	}
-
-	:host([label-span-m="8"]) .ui5-form-item,
-	:host([label-span-m="8"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span8);
-	}
-
-	:host([label-span-m="9"]) .ui5-form-item,
-	:host([label-span-m="9"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span9);
-	}
-
-	:host([label-span-m="10"]) .ui5-form-item,
-	:host([label-span-m="10"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span10);
-	}
-
-	:host([label-span-m="11"]) .ui5-form-item,
-	:host([label-span-m="11"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span11);
-	}
-
-	:host([label-span-m="12"]) .ui5-form-item,
-	:host([label-span-m="12"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span12);
-		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
-		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
-	}
-}
-
-/* L - 4 cells by default, up to 12 cells */
-@container (width > 1024px) and (width <= 1440px) {
-	:host([label-span-l="1"]) .ui5-form-item,
-	:host([label-span-l="1"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span1);
-	}
-
-	:host([label-span-l="2"]) .ui5-form-item,
-	:host([label-span-l="2"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span2);
-	}
-
-	:host([label-span-l="3"]) .ui5-form-item,
-	:host([label-span-l="3"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span3);
-	}
-
-	:host([label-span-l="4"]) .ui5-form-item,
-	:host([label-span-l="4"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span4);
-	}
-
-	:host([label-span-l="5"]) .ui5-form-item,
-	:host([label-span-l="5"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span5);
-	}
-
-	:host([label-span-l="6"]) .ui5-form-item,
-	:host([label-span-l="6"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span6);
-	}
-
-	:host([label-span-l="7"]) .ui5-form-item,
-	:host([label-span-l="7"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span7);
-	}
-
-	:host([label-span-l="8"]) .ui5-form-item,
-	:host([label-span-l="8"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span8);
-	}
-
-	:host([label-span-l="9"]) .ui5-form-item,
-	:host([label-span-l="9"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span9);
-	}
-
-	:host([label-span-l="10"]) .ui5-form-item,
-	:host([label-span-l="10"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span10);
-	}
-
-	:host([label-span-l="11"]) .ui5-form-item,
-	:host([label-span-l="11"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span11);
-	}
-
-	:host([label-span-l="12"]) .ui5-form-item,
-	:host([label-span-l="12"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span12);
-		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
-		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
-	}
-}
-
-/* XL - 4 cells by default, up to 12 cells */
-@container (min-width: 1441px) {
-	:host([label-span-xl="1"]) .ui5-form-item,
-	:host([label-span-xl="1"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span1);
-	}
-
-	:host([label-span-xl="2"]) .ui5-form-item,
-	:host([label-span-xl="2"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span2);
-	}
-
-	:host([label-span-xl="3"]) .ui5-form-item,
-	:host([label-span-xl="3"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span3);
-	}
-
-	:host([label-span-xl="4"]) .ui5-form-item,
-	:host([label-span-xl="4"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span4);
-	}
-
-	:host([label-span-xl="5"]) .ui5-form-item,
-	:host([label-span-xl="5"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span5);
-	}
-
-	:host([label-span-xl="6"]) .ui5-form-item,
-	:host([label-span-xl="6"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span6);
-	}
-
-	:host([label-span-xl="7"]) .ui5-form-item,
-	:host([label-span-xl="7"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span7);
-	}
-
-	:host([label-span-xl="8"]) .ui5-form-item,
-	:host([label-span-xl="8"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span8);
-	}
-
-	:host([label-span-xl="9"]) .ui5-form-item,
-	:host([label-span-xl="9"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span9);
-	}
-
-	:host([label-span-xl="10"]) .ui5-form-item,
-	:host([label-span-xl="10"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span10);
-	}
-
-	:host([label-span-xl="11"]) .ui5-form-item,
-	:host([label-span-xl="11"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span11);
-	}
-
-	:host([label-span-xl="12"]) .ui5-form-item,
-	:host([label-span-xl="12"]) .ui5-form-group {
-		--ui5-form-item-layout: var(--ui5-form-item-layout-span12);
-		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
-		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
-	}
-}
\ No newline at end of file
diff --git a/packages/main/src/themes/ListItem.css b/packages/main/src/themes/ListItem.css
index 9d1000921f9b..3b848249f726 100644
--- a/packages/main/src/themes/ListItem.css
+++ b/packages/main/src/themes/ListItem.css
@@ -22,6 +22,10 @@
 	color: var(--sapList_Active_TextColor);
 }
 
+:host([active][actionable]) .ui5-li-additional-text {
+	text-shadow: none;
+}
+
 /* [ui5-li]: additionalTextState */
 :host([additional-text-state="Critical"]) .ui5-li-additional-text {
 	color: var(--sapCriticalTextColor);
diff --git a/packages/main/src/themes/ListItemBase.css b/packages/main/src/themes/ListItemBase.css
index e259cf92a626..fd03a490727a 100644
--- a/packages/main/src/themes/ListItemBase.css
+++ b/packages/main/src/themes/ListItemBase.css
@@ -27,11 +27,19 @@
 :host([selected]) {
 	background-color: var(--sapList_SelectionBackgroundColor);
 	border-bottom: var(--ui5-listitem-selected-border-bottom);
+
+	.ui5-li-additional-text {
+		text-shadow: var(--sapContent_TextShadow);
+	}
 }
 
 /* hovered */
 :host([actionable]:not([active]):not([selected]):not([ui5-li-group-header]):hover) {
     background-color: var(--sapList_Hover_Background);
+
+	.ui5-li-additional-text {
+		text-shadow: var(--sapContent_TextShadow);
+	}
 }
 
 /* selected and hovered */
diff --git a/packages/main/src/themes/MultiComboBoxItem.css b/packages/main/src/themes/MultiComboBoxItem.css
new file mode 100644
index 000000000000..c9256a465239
--- /dev/null
+++ b/packages/main/src/themes/MultiComboBoxItem.css
@@ -0,0 +1,19 @@
+:host([ui5-mcb-item]) {
+	height: auto;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-mcb-item]) .ui5-li-root {
+	padding-inline-start: 0;
+	min-height: var(--_ui5_list_item_base_height);
+}
+
+:host([ui5-mcb-item]) .ui5-li-content {
+	padding-bottom: .875rem;
+	padding-top: .875rem;
+	box-sizing: border-box;
+}
+
+:host([ui5-mcb-item]) [ui5-checkbox] {
+	overflow: visible;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/MultiComboBoxPopover.css b/packages/main/src/themes/MultiComboBoxPopover.css
index d6ca89bbb8d7..573e396b4767 100644
--- a/packages/main/src/themes/MultiComboBoxPopover.css
+++ b/packages/main/src/themes/MultiComboBoxPopover.css
@@ -31,4 +31,8 @@
 
 .ui5-mcb-select-all-checkbox::part(label) {
 	font-family: var(--sapFontBoldFamily);
-}
\ No newline at end of file
+}
+
+:host([readonly]) ::slotted([ui5-mcb-item]) {
+	cursor: auto;
+}
diff --git a/packages/main/src/themes/TabContainer.css b/packages/main/src/themes/TabContainer.css
index 78cabcf4a3eb..c23d495a23c1 100644
--- a/packages/main/src/themes/TabContainer.css
+++ b/packages/main/src/themes/TabContainer.css
@@ -176,4 +176,4 @@
 
 :host([media-range="XL"]) .ui5-tc__content {
 	padding: 1rem 3rem;
-}
\ No newline at end of file
+}
diff --git a/packages/main/src/themes/Table.css b/packages/main/src/themes/Table.css
index 85e7af1752c1..7bb0d299645f 100644
--- a/packages/main/src/themes/Table.css
+++ b/packages/main/src/themes/Table.css
@@ -9,14 +9,11 @@
     display: none;
 }
 
-:host([overflow-mode="Scroll"]) {
-    overflow-x: scroll;
-}
-
 #table {
     display: grid;
     grid-auto-rows: minmax(min-content, auto);
     background: var(--sapList_Background);
+    height: -moz-fill, -webkit-fill-available, 100%;
 }
 
 #nodata-cell {
diff --git a/packages/main/src/themes/Tokenizer.css b/packages/main/src/themes/Tokenizer.css
index ba08b89f3fe6..49671ca52812 100644
--- a/packages/main/src/themes/Tokenizer.css
+++ b/packages/main/src/themes/Tokenizer.css
@@ -7,6 +7,28 @@
 	height: 2.25rem;
 }
 
+:host([multi-line]) {
+	height: auto;
+}
+
+:host([multi-line]) .ui5-tokenizer--content {
+	display: flex;
+	align-content: baseline;
+	flex-wrap: wrap;
+	padding: .25rem;
+	box-sizing: border-box;
+	gap: var(--_ui5_tokenizer_gap);
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+:host([multi-line])::slotted([ui5-token]) {
+	margin: 0;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	max-width: 100%;
+}
+
 :host([disabled]) {
 	opacity: 40%;
 	pointer-events: none;
@@ -52,6 +74,10 @@
 	box-sizing: border-box;
 }
 
+.ui5-tokenizer--list{
+	display: contents;
+}
+
 :host([_tokens-count="1"]) .ui5-tokenizer--content {
 	padding-inline-end: 4px;
 	box-sizing: border-box;
@@ -77,3 +103,21 @@
 .ui5-tokenizer-more-text:active {
 	text-decoration: none;
 }
+
+.ui5-tokenizer--clear-all {
+	color: var(--sapLinkColor);
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	cursor: pointer;
+	outline: none;
+}
+
+.ui5-tokenizer--clear-all:hover {
+	color: var(--sapLink_Hover_Color);
+	text-decoration: var(--_ui5_link_hover_text_decoration);
+}
+
+.ui5-tokenizer--clear-all:active {
+	color: var(--sapLink_Active_Color);
+	text-decoration: var(--_ui5_link_active_text_decoration);
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/base/Form-parameters.css b/packages/main/src/themes/base/Form-parameters.css
index 958e9fb34292..71683d39d005 100644
--- a/packages/main/src/themes/base/Form-parameters.css
+++ b/packages/main/src/themes/base/Form-parameters.css
@@ -1,17 +1,5 @@
 :root {
-	--ui5-form-item-layout: 1fr 2fr;
-	--ui5-form-item-layout-span1: 1fr 11fr;
-	--ui5-form-item-layout-span2: 2fr 10fr;
-	--ui5-form-item-layout-span3: 3fr 9fr;
-	--ui5-form-item-layout-span4: 4fr 8fr;
-	--ui5-form-item-layout-span5: 5fr 7fr;
-	--ui5-form-item-layout-span6: 6fr 6fr;
-	--ui5-form-item-layout-span7: 7fr 5fr;
-	--ui5-form-item-layout-span8: 8fr 4fr;
-	--ui5-form-item-layout-span9: 9fr 3fr;
-	--ui5-form-item-layout-span10: 10fr 2fr;
-	--ui5-form-item-layout-span11: 11fr 1fr;
-	--ui5-form-item-layout-span12: 1fr;
+	--ui5-form-item-layout: 4fr 8fr 0fr;
 	--ui5-form-item-label-justify: end;
 	--ui5-form-item-label-justify-span12: start;
 	--ui5-form-item-label-padding: 0.125rem 0;
diff --git a/packages/main/src/themes/base/Tokenizer-parameters.css b/packages/main/src/themes/base/Tokenizer-parameters.css
index 181da6d5fef5..3d76ae334150 100644
--- a/packages/main/src/themes/base/Tokenizer-parameters.css
+++ b/packages/main/src/themes/base/Tokenizer-parameters.css
@@ -1,5 +1,6 @@
 :root {
 	--_ui5_tokenizer_padding: 0.3125rem;
+	--_ui5_tokenizer_gap: 0.625rem 0.25rem;
 	--_ui5_tokenizer_n_more_text_color: var(--sapField_TextColor);
 	--_ui5_tokenizer-popover_offset: .3125rem;
 }
@@ -7,5 +8,6 @@
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
+	--_ui5_tokenizer_gap: 0.375em 0.25rem;
 	--_ui5_tokenizer-popover_offset: .1875rem;
 }
\ No newline at end of file
diff --git a/packages/main/src/types/ColorPickerDisplayMode.ts b/packages/main/src/types/ColorPickerDisplayMode.ts
new file mode 100644
index 000000000000..5914080b26d4
--- /dev/null
+++ b/packages/main/src/types/ColorPickerDisplayMode.ts
@@ -0,0 +1,19 @@
+/**
+ * ColorPicker display modes.
+ * @public
+ */
+enum ColorPickerDisplayMode {
+	/**
+	 * Default display mode. Includes all color picker features.
+	 * @public
+	 */
+	 Default = "Default",
+
+	/**
+	 * Simplified display mode. Doesn't include alpha slider and inputs for RGB values.
+	 * @public
+	 */
+	Simplified = "Simplified",
+}
+
+export default ColorPickerDisplayMode;
diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html
index ce84de46d124..ee98e137bd16 100644
--- a/packages/main/test/pages/Button.html
+++ b/packages/main/test/pages/Button.html
@@ -70,6 +70,9 @@
 	<ui5-button icon="employee" accessible-name="Download book" class="button4auto">Action Bar Button</ui5-button>
 	<ui5-button end-icon="employee" accessible-name="Download book" class="button4auto">Action Bar Button</ui5-button>
 
+	<ui5-label>Button with accessibleDescription:</ui5-label>
+	<ui5-button icon="bar-code" accessible-description="Scan bar code">Scan</ui5-button>
+
 	<br />
 	<br />
 
diff --git a/packages/main/test/pages/ColorPicker.html b/packages/main/test/pages/ColorPicker.html
index 3e2cac1f1e7d..7bf1cbf5b891 100644
--- a/packages/main/test/pages/ColorPicker.html
+++ b/packages/main/test/pages/ColorPicker.html
@@ -45,6 +45,14 @@
 
 	<ui5-color-picker id="cp3"></ui5-color-picker>
 
+	<br>
+	<br>
+	<br>
+
+	<ui5-title>Simplified Color Picker</ui5-title>
+	<br>
+	<ui5-color-picker id="cp-simplified" value="#dbf692" display-mode="Simplified"></ui5-color-picker>
+
 	<script>
 		var colorPicker = document.querySelector("#change-event"),
 			colorLabel = document.querySelector("#color-input"),
diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
index 61e6c8906bbe..d6725c22c9b9 100644
--- a/packages/main/test/pages/ComboBox.html
+++ b/packages/main/test/pages/ComboBox.html
@@ -389,7 +389,9 @@ <h3>ComboBox in Compact</h3>
 
 			// remove busy state
 			event.target.loading = false;
-		});
+			
+			// load the items once or turn off filtering
+		}, { once: true });
 	</script>
 
 	<script type="module">
diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html
index c2a73c3e55d5..66ad50023d99 100644
--- a/packages/main/test/pages/DatePicker.html
+++ b/packages/main/test/pages/DatePicker.html
@@ -223,6 +223,14 @@ <h3>DatePicker with format `yyyy` should open picker on years</h3>
 			e.preventDefault();
 	});
 
+	dpCalendarModeDays.addEventListener("ui5-open", function(e) {
+		console.log("Picker is opened");
+	});
+
+	dpCalendarModeDays.addEventListener("ui5-close", function(e) {
+		console.log("Picker is closed");
+	});
+
 	</script>
 </body>
 </html>
diff --git a/packages/main/test/pages/EventBubbling.html b/packages/main/test/pages/EventBubbling.html
index a16ff10aaf29..a477ba761484 100644
--- a/packages/main/test/pages/EventBubbling.html
+++ b/packages/main/test/pages/EventBubbling.html
@@ -22,6 +22,12 @@
 				<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
 			</ui5-input>
 
+			<ui5-button id="btnOpen">Open Menu</ui5-button>
+			<ui5-menu id="myMenu" header-text="Menu" opener="btnOpen">
+				<ui5-menu-item id="menuItemNewFile" text="New File"></ui5-menu-item>
+				<ui5-menu-item text="New Folder"></ui5-menu-item>
+			</ui5-menu>
+
 			<ui5-multi-combobox id="myMcb">
 				<ui5-mcb-item text="Cosy"></ui5-mcb-item>
 				<ui5-mcb-item selected text="Compact"></ui5-mcb-item>
@@ -53,8 +59,11 @@
 	mySelect.addEventListener("close", function(e) {
 		console.log("Select on close")
 	});
+	myMenu.addEventListener("close", function(e) {
+		console.log("Menu on close")
+	});
 	myMcb.addEventListener("close", function(e) {
-		console.log("myMcb on close")
+		console.log("Mcb on close")
 	});
 	myInput.addEventListener("close", function(e) {
 		console.log("Input on close")
@@ -65,5 +74,9 @@
 	myMsgStrip.addEventListener("close", function(e) {
 		console.log("MessageStrip on close")
 	});
+
+	btnOpen.addEventListener("click", function(e) {
+		myMenu.open = true;
+	});
 </script>
 </html>
diff --git a/packages/main/test/pages/Link.html b/packages/main/test/pages/Link.html
index cf4c902c3e37..2f4444204131 100644
--- a/packages/main/test/pages/Link.html
+++ b/packages/main/test/pages/Link.html
@@ -86,9 +86,11 @@ <h2>Link designs</h2>
 	</section>
 
 	<section class="group">
-		<label id="lbl">Text from aria-labelledby</label>
-		<ui5-link id="ariaLbl" accessible-name="Text from aria-label">Go to</ui5-link>
-		<ui5-link id="ariaLblBy" accessible-name-ref="lbl">Go to</ui5-link>
+		<label id="lbl">Text from aria-labelledby</label> <br>
+		<ui5-link id="ariaLbl" accessible-name="Text from aria-label">Go to</ui5-link> <br>
+		<ui5-link id="ariaLblBy" accessible-name-ref="lbl">Go to</ui5-link> <br>
+		<label>Link with aria-description:</label> <br>
+		<ui5-link accessible-description="Text from aria-description">Go to</ui5-link>
 	</section>
 
 	<section class="group">
diff --git a/packages/main/test/pages/List.html b/packages/main/test/pages/List.html
index 339f1499df55..4735dc05c240 100644
--- a/packages/main/test/pages/List.html
+++ b/packages/main/test/pages/List.html
@@ -497,6 +497,23 @@ <h3 id="infoLbl">Items 3/3</h3>
 		</ui5-li>
 	</ui5-list>
 
+	<br/><br/>
+	<h2>With accessible description ref</h2>
+	<ui5-label id="description">Accessible description ref works</ui5-label>
+	<ui5-list accessible-description-ref="description">
+		<ui5-li>Item 1</ui5-li>
+		<ui5-li>Item 2</ui5-li>
+		<ui5-li>Item 3</ui5-li>
+	</ui5-list>
+
+	<br/><br/>
+	<h2>With accessible description</h2>
+	<ui5-list accessible-description="Accessible description works">
+		<ui5-li>Item 1</ui5-li>
+		<ui5-li>Item 2</ui5-li>
+		<ui5-li>Item 3</ui5-li>
+	</ui5-list>
+
 	<br>
 
 	<div id="host">
diff --git a/packages/main/test/pages/RadioButton.html b/packages/main/test/pages/RadioButton.html
index 59cc111a1264..11376127dcb4 100644
--- a/packages/main/test/pages/RadioButton.html
+++ b/packages/main/test/pages/RadioButton.html
@@ -27,6 +27,11 @@
 		<ui5-radio-button id="testRbtn11" name="test2" checked text="Selected A"></ui5-radio-button>
 		<ui5-radio-button id="testRbtn12" name="test2" disabled text="Disabled B"></ui5-radio-button>
 		<ui5-radio-button id="testRbtn13" name="test2" text="Standard C"></ui5-radio-button>
+		<ui5-radio-button name="test2" readonly text="Read-Only D"></ui5-radio-button>
+		<ui5-radio-button name="test2" readonly text="Read-Only E"></ui5-radio-button>
+		<ui5-radio-button name="test2" text="Standard F"></ui5-radio-button>
+		<ui5-radio-button name="test2" readonly text="Read-Only G"></ui5-radio-button>
+		<ui5-radio-button name="test2" text="Standard H"></ui5-radio-button>
 	</div>
 
 	<div aria-labelledby="radioGroupTitle3" role="radiogroup" class="radio-section">
diff --git a/packages/main/test/pages/TableHorizontal.html b/packages/main/test/pages/TableHorizontal.html
index 1c3e51b9c292..253ac536b09f 100644
--- a/packages/main/test/pages/TableHorizontal.html
+++ b/packages/main/test/pages/TableHorizontal.html
@@ -16,7 +16,7 @@
 </head>
 
 <body style="margin: 0;">
-	<ui5-table id="table" overflow-mode="Scroll" height="300px" sticky-top="0px" style="width: 300px;" accessible-name-ref="title">
+	<ui5-table id="table" overflow-mode="Scroll" height="300px" sticky-top="0px" style="width: 300px; overflow: auto;" accessible-name-ref="title">
 		<ui5-table-selection id="selection" selected="0 2" slot="features"></ui5-table-selection>
 		<ui5-table-header-row slot="headerRow" sticky>
 			<ui5-table-header-cell id="produtCol" width="200px"><span>Product</span></ui5-table-header-cell>
diff --git a/packages/main/test/pages/Tokenizer-multi-line.html b/packages/main/test/pages/Tokenizer-multi-line.html
new file mode 100644
index 000000000000..064f91562bb9
--- /dev/null
+++ b/packages/main/test/pages/Tokenizer-multi-line.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+
+	<title>Tokenizer - multi-line</title>
+	<meta name="viewport" content="width=device-width">
+	<meta charset="utf-8">
+
+	<script data-ui5-config type="application/json">
+		{
+			"language": "EN"
+		}
+	</script>
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+	<link rel="stylesheet" type="text/css" href="./styles/Tokenizer.css">
+</head>
+
+<body>
+	<div class="wrapper">
+		<h1 class="sample-container-title">Multi Line</h1>
+		<ui5-tokenizer multi-line style="width: 320px;">
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+			<ui5-token text="Hungary"></ui5-token>
+			<ui5-token text="Ireland"></ui5-token>
+			<ui5-token text="Japan"></ui5-token>
+			<ui5-token text="Korea"></ui5-token>
+			<ui5-token text="Latvia"></ui5-token>
+		</ui5-tokenizer>
+
+		<h1 class="sample-container-title">Multi Line with long token</h1>
+		<ui5-tokenizer multi-line style="width: 320px;" dir="rtl">
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Mexico Mexico Mexico Mexico Mexico Mexico Mexico"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+			<ui5-token text="Hungary"></ui5-token>
+			<ui5-token text="Ireland"></ui5-token>
+			<ui5-token text="Japan"></ui5-token>
+			<ui5-token text="Korea"></ui5-token>
+			<ui5-token text="Latvia"></ui5-token>
+			<ui5-token text="Mexico Mexico Mexico Mexico Mexico Mexico Mexico"></ui5-token>
+		</ui5-tokenizer>
+
+		<h1 class="sample-container-title">Multi Line with long token and restricted height</h1>
+		<ui5-tokenizer multi-line style="height: 100px; width: 320px;">
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+			<ui5-token text="Hungary"></ui5-token>
+			<ui5-token text="Ireland"></ui5-token>
+			<ui5-token text="Japan"></ui5-token>
+			<ui5-token text="Korea"></ui5-token>
+			<ui5-token text="Latvia"></ui5-token>
+			<ui5-token text="Mexico Mexico Mexico Mexico Mexico Mexico Mexico"></ui5-token>
+		</ui5-tokenizer>
+
+		<h1 class="sample-container-title">Multi Line with clear all</h1>
+		<ui5-tokenizer id='clear-all' class="deletable-tokenizer" show-clear-all multi-line style="width: 320px;">
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+			<ui5-token text="Hungary"></ui5-token>
+			<ui5-token text="Ireland"></ui5-token>
+			<ui5-token text="Japan"></ui5-token>
+			<ui5-token text="Korea"></ui5-token>
+			<ui5-token text="Latvia"></ui5-token>
+		</ui5-tokenizer>
+
+		<h1 class="sample-container-title">Multi Line with restricted height and clear all</h1>
+		<ui5-tokenizer class="deletable-tokenizer" show-clear-all multi-line
+			style="width: 320px; height:100px; border: solid 1px grey;">
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+			<ui5-token text="Hungary"></ui5-token>
+			<ui5-token text="Ireland"></ui5-token>
+			<ui5-token text="Japan"></ui5-token>
+			<ui5-token text="Korea"></ui5-token>
+			<ui5-token text="Latvia"></ui5-token>
+		</ui5-tokenizer>
+
+
+		<h1 class="sample-container-title">Multi Line with clear all - single token</h1>
+		<ui5-tokenizer show-clear-all multi-line style="width: 320px;">
+			<ui5-token text="Bulgaria"></ui5-token>
+		</ui5-tokenizer>
+
+		<h1 class="sample-container-title">Multi Line in readonly mode</h1>
+		<ui5-tokenizer class="deletable-tokenizer" multi-line show-clear-all readonly style="width: 320px;">
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+			<ui5-token text="Hungary"></ui5-token>
+			<ui5-token text="Ireland"></ui5-token>
+			<ui5-token text="Japan"></ui5-token>
+			<ui5-token text="Korea"></ui5-token>
+			<ui5-token text="Latvia"></ui5-token>
+		</ui5-tokenizer>
+
+		<h1 class="sample-container-title">Multi Line in disabled mode</h1>
+		<ui5-tokenizer class="deletable-tokenizer" multi-line show-clear-all disabled style="width: 320px;">
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+			<ui5-token text="Hungary"></ui5-token>
+			<ui5-token text="Ireland"></ui5-token>
+			<ui5-token text="Japan"></ui5-token>
+			<ui5-token text="Korea"></ui5-token>
+			<ui5-token text="Latvia"></ui5-token>
+		</ui5-tokenizer>
+	</div>
+
+
+	<script>
+		const deletableTokenizers = document.querySelectorAll('.deletable-tokenizer');
+
+		deletableTokenizers.forEach(tokenizer => {
+			tokenizer.addEventListener('token-delete', () => {
+				const tokens = event.detail?.tokens;
+
+				if (tokens) {
+					tokens.forEach(token => token.remove());
+				}
+			});
+		});
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/main/test/pages/Toolbar.html b/packages/main/test/pages/Toolbar.html
index 4625486e5c54..ad1a4b860972 100644
--- a/packages/main/test/pages/Toolbar.html
+++ b/packages/main/test/pages/Toolbar.html
@@ -13,6 +13,17 @@
 </head>
 <body>
 	<div id="toolbars-container">
+
+		<ui5-toolbar>
+			<ui5-toolbar-button icon="add" text="Plus" design="Default"></ui5-toolbar-button>
+			<ui5-toolbar-button icon="employee" text="Hire"></ui5-toolbar-button>
+			<ui5-toolbar-separator></ui5-toolbar-separator>
+			<ui5-toolbar-button icon="add" text="Add"></ui5-toolbar-button>
+			<ui5-toolbar-button icon="decline" text="Decline"></ui5-toolbar-button>
+			<ui5-toolbar-spacer></ui5-toolbar-spacer>
+			<ui5-toolbar-button icon="add" text="Append"></ui5-toolbar-button>
+		</ui5-toolbar>
+
 		<ui5-title level="H3">Basic</ui5-title>
 		<br /><br />
 		<ui5-toolbar id="clickCountToolbar">
@@ -21,7 +32,19 @@
 			<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
 			<ui5-toolbar-separator></ui5-toolbar-separator>
 			<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+			<ui5-toolbar-button id="btnOpenMenu" text="Open Menu" prevent-overflow-closing></ui5-toolbar-button>
 		</ui5-toolbar>
+		  <ui5-menu header-text="Basic Menu with Items" id="menu" opener="btnOpenMenu">
+			<ui5-menu-item text="New File" icon="add-document"></ui5-menu-item>
+			<ui5-menu-item text="New Folder" icon="add-folder" disabled></ui5-menu-item>
+			<ui5-menu-separator></ui5-menu-separator>
+			<ui5-menu-item text="Open" icon="open-folder"></ui5-menu-item>
+			<ui5-menu-item text="Close"></ui5-menu-item>
+			<ui5-menu-separator></ui5-menu-separator>
+			<ui5-menu-item text="Preferences" icon="action-settings"></ui5-menu-item>
+			<ui5-menu-item text="Exit" icon="journey-arrive"></ui5-menu-item>
+		  </ui5-menu>
+		  
 		<ui5-input id="input" value="0"></ui5-input>
 
 		<br /><br />
@@ -29,7 +52,7 @@
 		<ui5-title level="H3">Standard Toolbar with ToolbarSelect</ui5-title>
 		<br />
 		<section>
-			<ui5-toolbar>
+			<ui5-toolbar id="otb_standard">
 				<ui5-toolbar-button icon="add" stable-dom-ref="otb_button_1" text="Left 1 (long)"></ui5-toolbar-button>
 				<ui5-toolbar-button icon="decline" text="Left 2"></ui5-toolbar-button>
 				<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
@@ -321,6 +344,13 @@
 		toolbarSlider.addEventListener("input", e => {
 			document.getElementById("toolbars-container").setAttribute("style", "width:" + e.target.value + "%");
 		})
+
+		const btnOpenMenu = document.getElementById("btnOpenMenu");
+		const menu = document.getElementById("menu");
+
+		btnOpenMenu.addEventListener("ui5-click", function(event) {
+			menu.open = !menu.open;
+		});
 	</script>
 	</body>
 </html>
diff --git a/packages/main/test/pages/Tree.html b/packages/main/test/pages/Tree.html
index afc5d5b22123..eeb2899ee481 100644
--- a/packages/main/test/pages/Tree.html
+++ b/packages/main/test/pages/Tree.html
@@ -206,6 +206,25 @@
 			<ui5-tree-item text="Should have checkbox"></ui5-tree-item>
 		</ui5-tree-item>
 	</ui5-tree>
+
+	<br><br>
+
+	<h2>With accessible description ref</h2>
+	<ui5-label id="description">Tree with accessible description ref</ui5-label>
+	<ui5-tree accessible-description-ref="description">
+		<ui5-tree-item text="Item 1"></ui5-tree-item>
+		<ui5-tree-item text="Item 2"></ui5-tree-item>
+		<ui5-tree-item text="Item 3"></ui5-tree-item>
+	</ui5-tree>
+
+	<br><br>
+	<h2>With accessible description</h2>
+	<ui5-tree accessible-description="This is a tree with accessible description">
+		<ui5-tree-item text="Item 1"></ui5-tree-item>
+		<ui5-tree-item text="Item 2"></ui5-tree-item>
+		<ui5-tree-item text="Item 3"></ui5-tree-item>
+	</ui5-tree>
+
 	<script>
 		const mouseOverInput = document.getElementById("mouseover-counter");
 		const mouseOutInput = document.getElementById("mouseout-counter");
diff --git a/packages/main/test/pages/base/AriaLabelHelper.html b/packages/main/test/pages/base/AccessibilityTextsHelper.html
similarity index 99%
rename from packages/main/test/pages/base/AriaLabelHelper.html
rename to packages/main/test/pages/base/AccessibilityTextsHelper.html
index f9317fdde179..d9970416d892 100644
--- a/packages/main/test/pages/base/AriaLabelHelper.html
+++ b/packages/main/test/pages/base/AccessibilityTextsHelper.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>AriaLabelHelper</title>
+    <title>AccessibilityTextsHelper</title>
     <script src="../%VITE_BUNDLE_PATH%" type="module"></script>
 </head>
 
diff --git a/packages/main/test/pages/form/Form.html b/packages/main/test/pages/form/Form.html
new file mode 100644
index 000000000000..237e792fe1de
--- /dev/null
+++ b/packages/main/test/pages/form/Form.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+	<title>Form Basic</title>
+	<script src="../%VITE_BUNDLE_PATH%" type="module"></script>
+	<link rel="stylesheet" type="text/css" href="../styles/FormLayout.css">
+</head>
+
+<body>
+	<div id="result"></div>
+
+	<script>
+		const result = document.getElementById("result");
+		const columns = [
+			1,
+			2,
+			3,
+			4,
+			5,
+			6
+		];
+		const arrays = [
+			[0],
+			[0, 1],
+			[0, 1, 2],
+			[0, 1, 2, 3],
+			[0, 1, 2, 3, 4],
+			[0, 1, 2, 3, 4, 5],
+			[0, 1, 2, 3, 4, 5, 6],
+			[0, 1, 2, 3, 4, 5, 6, 7],
+			[0, 1, 2, 3, 4, 5, 6, 7, 8],
+			[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
+			[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+			[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
+			[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+			[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
+			[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14],
+			[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
+			[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
+			[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17],
+			[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
+			[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
+		];
+
+		const formItem = (value) => {
+			return `<ui5-form-item>
+<ui5-label required for="nameInp" slot="labelContent">${value}:</ui5-label>
+<ui5-input value="${value}"></ui5-input>
+</ui5-form-item>`
+		};
+
+		const form = (columns, items, newSolution) => {
+			const rows = Math.ceil(items.length / columns);
+
+			return `<ui5-form layout="S1 M2 L3 XL${columns}" header-text="${items.length} items, ${columns} x ${rows} (Columns x Rows)">
+	<ui5-form-group>
+		${items.map(formItem).join("\n")}
+	</ui5-form-group>
+</ui5-form>`
+		};
+
+		columns.forEach(column => {
+			arrays.forEach(items => {
+				result.innerHTML += form(column, items);
+			})
+		})
+
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/main/test/pages/form/FormEmptySpan.html b/packages/main/test/pages/form/FormEmptySpan.html
new file mode 100644
index 000000000000..471e34a2f2d3
--- /dev/null
+++ b/packages/main/test/pages/form/FormEmptySpan.html
@@ -0,0 +1,736 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+	<title>Form</title>
+	<script src="../%VITE_BUNDLE_PATH%" type="module"></script>
+	<link rel="stylesheet" type="text/css" href="../styles/FormLayout.css">
+
+	<script id='sap-ui-bootstrap'
+		src='https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js'
+		data-sap-ui-theme='sap_horizon'
+		data-sap-ui-libs='sap.m, sap.ui.core, sap.ui.layout'
+		data-sap-ui-preload="async"
+	></script>
+
+	<script>
+        sap.ui.getCore().attachInit(function() {
+			var oLayout1 = new sap.ui.layout.form.ColumnLayout("L1");
+			var oForm1 = new sap.ui.layout.form.Form("F1",{
+				title: "SAPUI5 :: Display",
+				editable: false,
+				layout: oLayout1,
+				formContainers: [
+					new sap.ui.layout.form.FormContainer("C1",{
+						formElements: [
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Name"}),
+								fields: [new sap.m.Text({text: "Red Point Stores"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "ZIP Code/City",
+								fields: [new sap.m.Text({text: "411 Maintown"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Street"}),
+								fields: [new sap.m.Text({text: "Main St 1618"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Country",
+								fields: [new sap.m.Text({text: "Germany"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "WebSite",
+								fields: [new sap.m.Link({text: "sap.com"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Delivery address",
+								fields: [new sap.m.Text({text: "Newtown"})]
+							}),
+						]
+					})
+				]
+			});
+			oForm1.placeAt("sapui5content");
+
+			var oLayout2 = new sap.ui.layout.form.ColumnLayout("L2");
+			var oForm2 = new sap.ui.layout.form.Form("F2",{
+				title: "SAPUI5 :: Edit",
+				editable: true,
+				layout: oLayout2,
+				formContainers: [
+					new sap.ui.layout.form.FormContainer("C2",{
+						formElements: [
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Name"}),
+								fields: [new sap.m.Input({value: "Red Point Stores"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "ZIP Code/City",
+								fields: [new sap.m.Input({value: "411"}), new sap.m.Input({value: "Maintown"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Street"}),
+								fields: [new sap.m.Input({value: "Main St", layoutData: new sap.ui.layout.form.ColumnElementData({cellsSmall: 6, cellsLarge: 2})}), new sap.m.Input({value: "1618"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Country",
+								fields: [new sap.m.Select({selectedKey: "DE",
+									items: [new sap.ui.core.ListItem({key: "GB", text: "England"}),
+													new sap.ui.core.ListItem({key: "US", text: "USA"}),
+													new sap.ui.core.ListItem({key: "DE", text: "Germany"})]
+								})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "WebSite",
+								fields: [new sap.m.Input({value: "sap.com"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Delivery address",
+								fields: [new sap.m.Input({value: "Newtown"})]
+							}),
+						]
+					})
+				]
+			});
+			oForm2.placeAt("sapui5content2");
+
+			var oLayout4 = new sap.ui.layout.form.ColumnLayout("L4", {
+				columnsM: 2,
+				columnsL: 3,
+				columnsXL: 4,
+			});
+			var oForm4 = new sap.ui.layout.form.Form("F4",{
+				title: "SAPUI5 :: Supplier 3gr (S1 M2 L3 XL4)",
+				editable: false,
+				layout: oLayout4,
+				formContainers: [
+					new sap.ui.layout.form.FormContainer("C41",{
+						title: "Address",
+						formElements: [
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Name"}),
+								fields: [new sap.m.Text({text: "Red Point Stores"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "ZIP Code/City",
+								fields: [new sap.m.Text({text: "411 Maintown"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Street"}),
+								fields: [new sap.m.Text({text: "Main St 1618"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Country",
+								fields: [new sap.m.Text({text: "Germany"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "WebSite",
+								fields: [new sap.m.Link({text: "sap.com"})]
+							}),
+						]
+					}),
+					new sap.ui.layout.form.FormContainer("C42",{
+						title: "Contact",
+						formElements: [
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Twitter"}),
+								fields: [new sap.m.Text({text: "@sap"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Email",
+								fields: [new sap.m.Text({text: "john.smith@sap.com"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Tel"}),
+								fields: [new sap.m.Text({text: "+49 6227 747474"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "SMS",
+								fields: [new sap.m.Text({text: "+49 6227 747474"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Mobile",
+								fields: [new sap.m.Text({text: "+49 173 123456"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Pager",
+								fields: [new sap.m.Text({text: "+49 173 123456"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Fax",
+								fields: [new sap.m.Text({text: "+49 173 123456"})]
+							}),
+						]
+					}),
+					new sap.ui.layout.form.FormContainer("C43",{
+						title: "Other Info",
+						formElements: [
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Name"}),
+								fields: [new sap.m.Text({text: "Red Point Stores"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "ZIP Code/City",
+								fields: [new sap.m.Text({text: "411 Maintown"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Street"}),
+								fields: [new sap.m.Text({text: "Main St 1618"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Country",
+								fields: [new sap.m.Text({text: "Germany"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "WebSite",
+								fields: [new sap.m.Link({text: "sap.com"})]
+							}),
+						]
+					})
+				]
+			});
+			oForm4.placeAt("sapui5content4");
+			
+
+			var oLayout5 = new sap.ui.layout.form.ColumnLayout("L5", {
+				columnsM: 2,
+				columnsL: 3,
+				columnsXL: 6,
+			});
+			var oForm5 = new sap.ui.layout.form.Form("F5",{
+				title: "SAPUI5 :: Supplier 3gr (S1 M2 L3 XL6)",
+				editable: false,
+				layout: oLayout5,
+				formContainers: [
+					new sap.ui.layout.form.FormContainer("C51",{
+						title: "Address",
+						formElements: [
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Name"}),
+								fields: [new sap.m.Text({text: "Red Point Stores"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "ZIP Code/City",
+								fields: [new sap.m.Text({text: "411 Maintown"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Street"}),
+								fields: [new sap.m.Text({text: "Main St 1618"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Country",
+								fields: [new sap.m.Text({text: "Germany"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "WebSite",
+								fields: [new sap.m.Link({text: "sap.com"})]
+							}),
+						]
+					}),
+					new sap.ui.layout.form.FormContainer("C52",{
+						title: "Contact",
+						formElements: [
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Twitter"}),
+								fields: [new sap.m.Text({text: "@sap"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Email",
+								fields: [new sap.m.Text({text: "john.smith@sap.com"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Tel"}),
+								fields: [new sap.m.Text({text: "+49 6227 747474"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "SMS",
+								fields: [new sap.m.Text({text: "+49 6227 747474"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Mobile",
+								fields: [new sap.m.Text({text: "+49 173 123456"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Pager",
+								fields: [new sap.m.Text({text: "+49 173 123456"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Fax",
+								fields: [new sap.m.Text({text: "+49 173 123456"})]
+							}),
+						]
+					}),
+					new sap.ui.layout.form.FormContainer("C53",{
+						title: "Other Info",
+						formElements: [
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Name"}),
+								fields: [new sap.m.Text({text: "Red Point Stores"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "ZIP Code/City",
+								fields: [new sap.m.Text({text: "411 Maintown"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: new sap.m.Label({text:"Street"}),
+								fields: [new sap.m.Text({text: "Main St 1618"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "Country",
+								fields: [new sap.m.Text({text: "Germany"})]
+							}),
+							new sap.ui.layout.form.FormElement({
+								label: "WebSite",
+								fields: [new sap.m.Link({text: "sap.com"})]
+							}),
+						]
+					})
+				]
+			});
+			oForm5.placeAt("sapui5content5");
+
+			window.oLayout1 = oLayout1;
+			window.oForm1 = oForm1;
+			window.oLayout2 = oLayout2;
+			window.oForm2 = oForm2;
+			window.oLayout4 = oLayout4;
+			window.oForm4 = oForm4;
+			window.oLayout5 = oLayout5;
+			window.oForm5 = oForm5;
+        });
+    </script>
+</head>
+
+<body class="bg">
+	<ui5-slider id="slider" min="1" max="100" value="100" class="slider"></ui5-slider>
+	
+	<section id="container">
+		<div class="banner"><div class="banner-inner"></div></div>
+
+		<div class="controls"> 
+			Label Span
+			<ui5-select id="selLabelSpan">
+				<ui5-option value="S12 M1 L1 XL1">S12 M1 L1 XL1</ui5-option>
+				<ui5-option value="S12 M2 L2 XL2">S12 M2 L2 XL2</ui5-option>
+				<ui5-option value="S12 M3 L3 XL3">S12 M3 L3 XL3</ui5-option>
+				<ui5-option selected id="optSide2" value="S12 M4 L4 XL4">S12 M4 L4 XL4</ui5-option>
+				<ui5-option value="S12 M4 L4 XL5">S12 M4 L4 XL5</ui5-option>
+				<ui5-option value="S12 M4 L4 XL6">S12 M4 L4 XL6</ui5-option>
+				<ui5-option value="S12 M4 L5 XL6">S12 M4 L5 XL6</ui5-option>
+				<ui5-option value="S12 M4 L6 XL6">S12 M4 L6 XL6</ui5-option>
+				<ui5-option value="S12 M5 L6 XL6">S12 M5 L6 XL6</ui5-option>
+				<ui5-option value="S12 M6 L6 XL6">S12 M6 L6 XL6</ui5-option>
+				<ui5-option value="S12 M7 L7 XL7">S12 M7 L7 XL7</ui5-option>
+				<ui5-option value="S12 M8 L8 XL8">S12 M8 L8 XL8</ui5-option>
+				<ui5-option id="optTop2" value="S12 M12 L12 XL12">S12 M12 L12 XL12</ui5-option>
+			</ui5-select>
+			
+			Empty Span
+			<ui5-select id="selEmptySpan">
+				<ui5-option value="S0 M0 L0 XL0">S0 M0 L0 XL0</ui5-option>
+				<ui5-option value="S0 M1 L1 XL1">S0 M1 L1 XL1</ui5-option>
+				<ui5-option value="S0 M1 L2 XL2">S0 M1 L2 XL2</ui5-option>
+				<ui5-option value="S0 M2 L3 XL3">S0 M2 L3 XL3</ui5-option>
+				<ui5-option value="S0 M2 L4 XL4">S0 M2 L4 XL4</ui5-option>
+				<ui5-option value="S0 M2 L5 XL5">S0 M2 L5 XL5</ui5-option>
+				<ui5-option value="S0 M2 L6 XL6">S0 M2 L6 XL6</ui5-option>
+				<ui5-option value="S0 M2 L7 XL7">S0 M2 L7 XL7</ui5-option>
+				<ui5-option value="S0 M2 L8 XL8">S0 M2 L8 XL8</ui5-option>
+				<ui5-option value="S0 M2 L9 XL9">S0 M2 L9 XL9</ui5-option>
+				<ui5-option value="S0 M2 L10 XL10">S0 M2 L10 XL10</ui5-option>
+				
+			</ui5-select>
+
+			<ui5-select id="selLabelPlacement">
+				<ui5-option id="optTop" value="Top">Top</ui5-option>
+				<ui5-option id="optSide" selected value="Side">Side</ui5-option>
+			</ui5-select>
+		</div>
+		
+		<section>
+			<ui5-form class="addressForm" header-text="WebC :: Display">
+				<ui5-form-item>
+					<ui5-label slot="labelContent">Name:</ui5-label>
+					<span class="text">Red Point Stores</span>
+				</ui5-form-item>
+				
+				<ui5-form-item>
+					<ui5-label slot="labelContent">ZIP Code/City:</ui5-label>
+					<span class="text">411 Maintown</span>
+				</ui5-form-item>
+				
+				<ui5-form-item>
+					<ui5-label slot="labelContent">Street:</ui5-label>
+					<span class="text">Main St 1618</span>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label slot="labelContent">Country:</ui5-label>
+					<span class="text">Germany</span>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label for="wsInp" slot="labelContent">WebSite:</ui5-label>
+					<ui5-link href="sap.com">sap.com</ui5-link>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label for="delInp" slot="labelContent">Delivery address:</ui5-label>
+					<span class="text">Newtown</span>
+				</ui5-form-item>
+			</ui5-form>
+		</section>
+	
+		<section id="sapui5content"></section>
+
+		<br><br><br>
+
+		<section>
+			<ui5-form class="addressForm" header-text="WebC :: Edit">
+				<ui5-form-item>
+					<ui5-label for="nameInp" slot="labelContent">Name:</ui5-label>
+					<ui5-input value="Red Point Stores" id="nameInp"></ui5-input>
+				</ui5-form-item>
+				
+				<ui5-form-item>
+					<ui5-label id="cityLbl" for="cityInp" slot="labelContent">ZIP Code/City:</ui5-label>
+					<ui5-input id="cityInp" value="411" accessible-name-ref="cityLbl"></ui5-input>
+					<ui5-input value="Maintown" accessible-name-ref="cityLbl"></ui5-input>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label id="streetLbl" for="streetInp" slot="labelContent">Street:</ui5-label>
+					<ui5-input id="streetInp" value="Main St" accessible-name-ref="streetLbl"></ui5-input>
+					<ui5-input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl"></ui5-input>
+				</ui5-form-item>
+				
+				<ui5-form-item>
+					<ui5-label id="countryLbl" for="countrySel" slot="labelContent">Country:</ui5-label>
+					<ui5-select id="countrySel" accessible-name-ref="countryLbl">
+						<ui5-option>Australia</ui5-option>
+						<ui5-option selected>Germany</ui5-option>
+						<ui5-option>England</ui5-option>
+					</ui5-select>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label for="wsInp" slot="labelContent">WebSite:</ui5-label>
+					<ui5-input value="sap.com" id="wsInp"></ui5-input>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label for="delInp" slot="labelContent">Delivery address:</ui5-label>
+					<ui5-input value="Newtown" id="delInp"></ui5-input>
+				</ui5-form-item>
+			</ui5-form>
+		</section>
+
+		<section id="sapui5content2"></section>
+
+		<br><br><br>
+
+		<section>
+			<ui5-form class="addressForm" header-text="WebC :: Supplier 3gr (S1 M2 L3 XL4)" layout="S1 M2 L3 XL4">
+
+				<ui5-form-group header-text="Address">
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Name:</ui5-label>
+						<span class="text">Red Point Stores</span>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label slot="labelContent">ZIP Code/City:</ui5-label>
+						<span class="text">411 Maintown</span>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Street:</ui5-label>
+						<span class="text">Main St 1618</span>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Country:</ui5-label>
+						<span class="text">Germany</span>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label slot="labelContent">WebSite:</ui5-label>
+						<ui5-link href="sap.com">sap.com</ui5-link>
+					</ui5-form-item>
+				</ui5-form-group>
+
+				<ui5-form-group header-text="Contact">
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Twitter:</ui5-label>
+						<span class="text">@sap</span>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Email:</ui5-label>
+						<span class="text">john.smith@sap.com</span>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Tel:</ui5-label>
+						<span class="text">+49 6227 747474</span>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label slot="labelContent">SMS:</ui5-label>
+						<span class="text">+49 6227 747474</span>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Mobile:</ui5-label>
+						<ui5-link href="sap.com">+49 6227 747474</ui5-link>
+					</ui5-form-item>
+
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Pager:</ui5-label>
+						<ui5-link href="sap.com">+49 6227 747474</ui5-link>
+					</ui5-form-item>
+
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Fax:</ui5-label>
+						<ui5-link href="sap.com">+49 6227 747474</ui5-link>
+					</ui5-form-item>
+
+				</ui5-form-group>
+			
+				<ui5-form-group header-text="Other info">
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Name:</ui5-label>
+						<span class="text">Red Point Stores</span>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label slot="labelContent">ZIP Code/City:</ui5-label>
+						<span class="text">411 Maintown</span>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Street:</ui5-label>
+						<span class="text">Main St 1618</span>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Country:</ui5-label>
+						<span class="text">Germany</span>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label slot="labelContent">WebSite:</ui5-label>
+						<ui5-link href="sap.com">sap.com</ui5-link>
+					</ui5-form-item>
+				</ui5-form-group>
+			</ui5-form>
+		</section>
+
+		<section id='sapui5content4'></section>
+		<br><br><br>
+
+		<section>
+			<ui5-form class="addressForm" header-text="WebC :: Supplier 3gr (S1 M2 L3 XL6)" layout="S1 M2 L3 XL6">
+
+				<ui5-form-group header-text="Address">
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Name:</ui5-label>
+						<span class="text">Red Point Stores</span>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label slot="labelContent">ZIP Code/City:</ui5-label>
+						<span class="text">411 Maintown</span>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Street:</ui5-label>
+						<span class="text">Main St 1618</span>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Country:</ui5-label>
+						<span class="text">Germany</span>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label slot="labelContent">WebSite:</ui5-label>
+						<ui5-link href="sap.com">sap.com</ui5-link>
+					</ui5-form-item>
+				</ui5-form-group>
+
+				<ui5-form-group header-text="Contact">
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Twitter:</ui5-label>
+						<span class="text">@sap</span>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Email:</ui5-label>
+						<span class="text">john.smith@sap.com</span>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Tel:</ui5-label>
+						<span class="text">+49 6227 747474</span>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label slot="labelContent">SMS:</ui5-label>
+						<span class="text">+49 6227 747474</span>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Mobile:</ui5-label>
+						<ui5-link href="sap.com">+49 6227 747474</ui5-link>
+					</ui5-form-item>
+
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Pager:</ui5-label>
+						<ui5-link href="sap.com">+49 6227 747474</ui5-link>
+					</ui5-form-item>
+
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Fax:</ui5-label>
+						<ui5-link href="sap.com">+49 6227 747474</ui5-link>
+					</ui5-form-item>
+
+				</ui5-form-group>
+			
+				<ui5-form-group header-text="Other info">
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Name:</ui5-label>
+						<span class="text">Red Point Stores</span>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label slot="labelContent">ZIP Code/City:</ui5-label>
+						<span class="text">411 Maintown</span>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Street:</ui5-label>
+						<span class="text">Main St 1618</span>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label slot="labelContent">Country:</ui5-label>
+						<span class="text">Germany</span>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label slot="labelContent">WebSite:</ui5-label>
+						<ui5-link href="sap.com">sap.com</ui5-link>
+					</ui5-form-item>
+				</ui5-form-group>
+			</ui5-form>
+		</section>
+
+		<section id='sapui5content5'></section>
+		<br><br><br>
+
+		<section>
+			<h3>Label always Top</h3>
+			<ui5-form id="addressFormEdit2" header-text="WebC :: Edit" label-span="S12 M12 L12 XL12">
+				<ui5-form-item>
+					<ui5-label for="nameInp" slot="labelContent">Name:</ui5-label>
+					<ui5-input value="Red Point Stores" id="nameInp"></ui5-input>
+				</ui5-form-item>
+				
+				<ui5-form-item>
+					<ui5-label id="cityLbl" for="cityInp" slot="labelContent">ZIP Code/City:</ui5-label>
+					<ui5-input id="cityInp" value="411" accessible-name-ref="cityLbl"></ui5-input>
+					<ui5-input value="Maintown" accessible-name-ref="cityLbl"></ui5-input>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label id="streetLbl" for="streetInp" slot="labelContent">Street:</ui5-label>
+					<ui5-input id="streetInp" value="Main St" accessible-name-ref="streetLbl"></ui5-input>
+					<ui5-input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl"></ui5-input>
+				</ui5-form-item>
+				
+				<ui5-form-item>
+					<ui5-label id="countryLbl" for="countrySel" slot="labelContent">Country:</ui5-label>
+					<ui5-select id="countrySel" accessible-name-ref="countryLbl">
+						<ui5-option>Australia</ui5-option>
+						<ui5-option selected>Germany</ui5-option>
+						<ui5-option>England</ui5-option>
+					</ui5-select>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label for="wsInp" slot="labelContent">WebSite:</ui5-label>
+					<ui5-input value="sap.com" id="wsInp"></ui5-input>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label for="delInp" slot="labelContent">Delivery address:</ui5-label>
+					<ui5-input value="Newtown" id="delInp"></ui5-input>
+				</ui5-form-item>
+			</ui5-form>
+		</section>
+	</section>
+
+	<script>
+		const forms = [...document.querySelectorAll(".addressForm")];
+
+		const setLabelSpan = (labelSpan) => {
+			forms.forEach((form) => {
+				form.labelSpan = labelSpan;
+			});
+
+			optTop.selected = labelSpan === "S12 M12 L12 XL12";
+			optSide.selected = labelSpan !== "S12 M12 L12 XL12";
+		};
+
+		const setLabelPlacement = (labelPlacement) => {
+			forms.forEach((form) => {
+				form.labelSpan = labelPlacement === "Top" ?  "S12 M12 L12 XL12" :  "S12 M4 L4 XL4";
+			});
+
+			optTop2.selected = labelPlacement === "Top";
+			optSide2.selected = labelPlacement !== "Top";
+		};
+
+		const setEmptySpan = (emptySpan ) => {
+			forms.forEach((form) => {
+				form.emptySpan = emptySpan ;
+			});
+		};
+
+		const setSAPUI5LabelSpan = (labelSpan) => {
+			const labelSpanXL = parseInt(labelSpan.slice(labelSpan.indexOf("XL") + 2));
+			[oLayout1, oLayout2, oLayout4, oLayout5].forEach((UI5Layout) => {
+				UI5Layout.setLabelCellsLarge(labelSpanXL);
+			});
+		};
+
+		const setSAPUI5LabelPlacement = (labelPlacement) => {
+			[oLayout1, oLayout2, oLayout4, oLayout5].forEach((UI5Layout) => {
+				UI5Layout.setLabelCellsLarge(labelPlacement === "Top" ? 12 : 4);
+			});
+		};
+
+		slider.addEventListener("ui5-input", function (event) {
+			container.style.width = event.target.value + '%';
+			slider.value = event.target.value;
+		});
+
+		selLabelSpan.addEventListener("ui5-change", function (event) {
+			setLabelSpan(event.detail.selectedOption.value);
+			setSAPUI5LabelSpan(event.detail.selectedOption.value);
+		});
+
+		selEmptySpan.addEventListener("ui5-change", function (event) {
+			setEmptySpan(event.detail.selectedOption.value);
+		});
+
+		selLabelPlacement.addEventListener("ui5-change", function (event) {
+			setLabelPlacement(event.detail.selectedOption.value);
+			setSAPUI5LabelPlacement(event.detail.selectedOption.value);
+		});
+	</script>
+</body>
+</html>
diff --git a/packages/main/test/pages/form/FormF6.html b/packages/main/test/pages/form/FormF6.html
new file mode 100644
index 000000000000..70a73b9b8f3d
--- /dev/null
+++ b/packages/main/test/pages/form/FormF6.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+	<title>Form Basic</title>
+	<script src="../%VITE_BUNDLE_PATH%" type="module"></script>
+	<link rel="stylesheet" type="text/css" href="../styles/FormLayout.css">
+
+	<!-- <script id='sap-ui-bootstrap'
+		src='https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js'
+		data-sap-ui-theme='sap_horizon'
+		data-sap-ui-libs='sap.m, sap.ui.core, sap.ui.layout'
+		data-sap-ui-preload="async"
+	></script> -->
+</head>
+
+<body class="bg">
+	<ui5-slider id="slider" min="1" max="100" value="100" class="slider"></ui5-slider>
+	
+	<section id="container">
+		<div class="banner"><div class="banner-inner"></div></div>
+
+		<section>
+			<ui5-form class="addressForm" header-text="WebC Form :: Address">
+
+				<ui5-form-group header-text="Address">
+					<ui5-form-item>
+						<ui5-label for="nameInp" slot="labelContent">Name:</ui5-label>
+						<ui5-input value="Red Point Stores" id="nameInp"></ui5-input>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label id="cityLbl" for="cityInp" slot="labelContent">ZIP Code/City:</ui5-label>
+						<ui5-input id="cityInp" value="411" accessible-name-ref="cityLbl"></ui5-input>
+						<ui5-input value="Maintown" accessible-name-ref="cityLbl"></ui5-input>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label id="streetLbl" for="streetInp" slot="labelContent">Street:</ui5-label>
+						<ui5-input id="streetInp" value="Main St" accessible-name-ref="streetLbl"></ui5-input>
+						<ui5-input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl"></ui5-input>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label id="countryLbl" for="countrySel" slot="labelContent">Country:</ui5-label>
+						<ui5-select id="countrySel" accessible-name-ref="countryLbl">
+							<ui5-option>Australia</ui5-option>
+							<ui5-option selected>Germany</ui5-option>
+							<ui5-option>England</ui5-option>
+						</ui5-select>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label for="wsInp" slot="labelContent">WebSite:</ui5-label>
+						<ui5-input value="sap.com" id="wsInp"></ui5-input>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label for="delInp" slot="labelContent">Delivery address:</ui5-label>
+						<ui5-input value="Newtown" id="delInp"></ui5-input>
+					</ui5-form-item>
+				</ui5-form-group>
+
+				<ui5-form-group header-text="Contact">
+					<ui5-form-item>
+						<ui5-label for="nameInp" slot="labelContent">Name:</ui5-label>
+						<ui5-input value="Red Point Stores" id="nameInp"></ui5-input>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label id="cityLbl" for="cityInp" slot="labelContent">ZIP Code/City:</ui5-label>
+						<ui5-input id="cityInp" value="411" accessible-name-ref="cityLbl"></ui5-input>
+						<ui5-input value="Maintown" accessible-name-ref="cityLbl"></ui5-input>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label id="streetLbl" for="streetInp" slot="labelContent">Street:</ui5-label>
+						<ui5-input id="streetInp" value="Main St" accessible-name-ref="streetLbl"></ui5-input>
+						<ui5-input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl"></ui5-input>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label id="countryLbl" for="countrySel" slot="labelContent">Country:</ui5-label>
+						<ui5-select id="countrySel" accessible-name-ref="countryLbl">
+							<ui5-option>Australia</ui5-option>
+							<ui5-option selected>Germany</ui5-option>
+							<ui5-option>England</ui5-option>
+						</ui5-select>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label for="wsInp" slot="labelContent">WebSite:</ui5-label>
+						<ui5-input value="sap.com" id="wsInp"></ui5-input>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label for="delInp" slot="labelContent">Delivery address:</ui5-label>
+						<ui5-input value="Newtown" id="delInp"></ui5-input>
+					</ui5-form-item>
+
+				</ui5-form-group>
+			
+				<ui5-form-group header-text="Other info">
+					<ui5-form-item>
+						<ui5-label for="nameInp" slot="labelContent">Name:</ui5-label>
+						<ui5-input value="Red Point Stores" id="nameInp"></ui5-input>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label id="cityLbl" for="cityInp" slot="labelContent">ZIP Code/City:</ui5-label>
+						<ui5-input id="cityInp" value="411" accessible-name-ref="cityLbl"></ui5-input>
+						<ui5-input value="Maintown" accessible-name-ref="cityLbl"></ui5-input>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label id="streetLbl" for="streetInp" slot="labelContent">Street:</ui5-label>
+						<ui5-input id="streetInp" value="Main St" accessible-name-ref="streetLbl"></ui5-input>
+						<ui5-input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl"></ui5-input>
+					</ui5-form-item>
+					
+					<ui5-form-item>
+						<ui5-label id="countryLbl" for="countrySel" slot="labelContent">Country:</ui5-label>
+						<ui5-select id="countrySel" accessible-name-ref="countryLbl">
+							<ui5-option>Australia</ui5-option>
+							<ui5-option selected>Germany</ui5-option>
+							<ui5-option>England</ui5-option>
+						</ui5-select>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label for="wsInp" slot="labelContent">WebSite:</ui5-label>
+						<ui5-input value="sap.com" id="wsInp"></ui5-input>
+					</ui5-form-item>
+	
+					<ui5-form-item>
+						<ui5-label for="delInp" slot="labelContent">Delivery address:</ui5-label>
+						<ui5-input value="Newtown" id="delInp"></ui5-input>
+					</ui5-form-item>
+				</ui5-form-group>
+			</ui5-form>
+		</section>
+		
+		<section>
+			<ui5-form class="addressForm" header-text="WebC :: Edit">
+				<ui5-form-item>
+					<ui5-label for="nameInp" slot="labelContent">Name:</ui5-label>
+					<ui5-input value="Red Point Stores" id="nameInp"></ui5-input>
+				</ui5-form-item>
+				
+				<ui5-form-item>
+					<ui5-label id="cityLbl" for="cityInp" slot="labelContent">ZIP Code/City:</ui5-label>
+					<ui5-input id="cityInp" value="411" accessible-name-ref="cityLbl"></ui5-input>
+					<ui5-input value="Maintown" accessible-name-ref="cityLbl"></ui5-input>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label id="streetLbl" for="streetInp" slot="labelContent">Street:</ui5-label>
+					<ui5-input id="streetInp" value="Main St" accessible-name-ref="streetLbl"></ui5-input>
+					<ui5-input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl"></ui5-input>
+				</ui5-form-item>
+				
+				<ui5-form-item>
+					<ui5-label id="countryLbl" for="countrySel" slot="labelContent">Country:</ui5-label>
+					<ui5-select id="countrySel" accessible-name-ref="countryLbl">
+						<ui5-option>Australia</ui5-option>
+						<ui5-option selected>Germany</ui5-option>
+						<ui5-option>England</ui5-option>
+					</ui5-select>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label for="wsInp" slot="labelContent">WebSite:</ui5-label>
+					<ui5-input value="sap.com" id="wsInp"></ui5-input>
+				</ui5-form-item>
+
+				<ui5-form-item>
+					<ui5-label for="delInp" slot="labelContent">Delivery address:</ui5-label>
+					<ui5-input value="Newtown" id="delInp"></ui5-input>
+				</ui5-form-item>
+			</ui5-form>
+		</section>
+
+	</section>
+
+	<script>
+		slider.addEventListener("ui5-input", function (event) {
+			container.style.width = event.target.value + '%';
+		});
+	</script>
+</body>
+</html>
diff --git a/packages/main/test/specs/ComboBox.mobile.spec.js b/packages/main/test/specs/ComboBox.mobile.spec.js
index ebf074971508..544f3bb87a36 100644
--- a/packages/main/test/specs/ComboBox.mobile.spec.js
+++ b/packages/main/test/specs/ComboBox.mobile.spec.js
@@ -1,7 +1,27 @@
 import { assert } from "chai";
 
+const getVisibleItems = async (combo) => {
+	const items = await combo.$$("ui5-cb-item");
+	const filteredItems = await Promise.all(items.map(async item => {
+			return (await item.getProperty("_isVisible")) ? item : null;
+	}));
+
+	// filter out null values
+	return filteredItems.filter(item => item !== null);
+};
+
+const getVisibleGroupItems = async (combo) => {
+	const items = await combo.$$("ui5-cb-item-group");
+	const filteredItems = await Promise.all(items.map(async item => {
+			return (await item.getProperty("_isVisible")) ? item : null;
+	}));
+
+	// filter out null values
+	return filteredItems.filter(item => item !== null);
+};
+
 describe("Basic mobile picker rendering and interaction", () => {
-	before(async () => {
+	beforeEach(async () => {
 		await browser.url("test/pages/ComboBox.html");
 		await browser.emulateDevice('iPhone X');
 	});
@@ -23,10 +43,13 @@ describe("Basic mobile picker rendering and interaction", () => {
 	});
 
 	it("Should close the mobile picker dialog when pressing the close button", async () => {
-		const combo = await browser.$("#combo2");
-		const picker =  await combo.shadow$("ui5-responsive-popover");
-		const dialogCloseButton = await picker.$(".ui5-responsive-popover-close-btn");
+		const combo = await $("#combo2");
+
+		await combo.click();
 
+		const picker = await combo.shadow$("ui5-responsive-popover");
+		const dialogCloseButton = await picker.$(".ui5-responsive-popover-close-btn");
+		
 		assert.ok(await picker.isDisplayed(), "Picker is still opened");
 
 		await dialogCloseButton.click();
@@ -95,7 +118,7 @@ describe("Eventing", () => {
 		await combo.scrollIntoView();
 		await combo.click();
 
-		const suggestionItem = await combo.shadow$("ui5-responsive-popover").$$("ui5-li")[1];
+		const suggestionItem = (await getVisibleItems(combo))[1];
 		await suggestionItem.click();
 
 		assert.strictEqual(await combo.getAttribute("value"), "Bulgaria", "The combo box's value is updated properly");
@@ -264,11 +287,10 @@ describe("Picker filtering", () => {
 		await combo.click();
 
 		const dialogInput = await combo.shadow$("ui5-responsive-popover").$("[ui5-input]");
-		const dialogList = await combo.shadow$("ui5-responsive-popover").$('ui5-list')
 
-		assert.strictEqual(await dialogList.$$('ui5-li').length, 9, "All of the items are shown (8)");
+		assert.strictEqual((await getVisibleItems(combo)).length, 9, "All of the items are shown (8)");
 		await dialogInput.keys("B");
-		assert.strictEqual(await dialogList.$$('ui5-li').length, 4, "There are 4 filtered items");
+		assert.strictEqual((await getVisibleItems(combo)).length, 4, "There are 4 filtered items");
 	});
 
 	it("Should filter group header list items", async () => {
@@ -280,11 +302,10 @@ describe("Picker filtering", () => {
 		await combo.click();
 
 		const dialogInput = await combo.shadow$("ui5-responsive-popover").$("[ui5-input]");
-		const dialogList = await combo.shadow$("ui5-responsive-popover").$('ui5-list')
 
-		assert.strictEqual(await dialogList.$$('ui5-li-group').length, 3, "All of the group header list items are shown (3)");
+		assert.strictEqual((await getVisibleGroupItems(combo)).length, 3, "All of the group header list items are shown (3)");
 		await dialogInput.keys("B");
-		assert.strictEqual(await dialogList.$$('ui5-li-group').length, 2, "There is only 1 visible group");
+		assert.strictEqual((await getVisibleGroupItems(combo)).length, 2, "There is only 1 visible group");
 	});
 });
 
diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js
index 38883e51fab1..5e8cc90d76a0 100644
--- a/packages/main/test/specs/ComboBox.spec.js
+++ b/packages/main/test/specs/ComboBox.spec.js
@@ -1,5 +1,25 @@
 import { assert } from "chai";
 
+const getVisibleItems = async (combo) => {
+	const items = await combo.$$("ui5-cb-item");
+	const filteredItems = await Promise.all(items.map(async item => {
+			return (await item.getProperty("_isVisible")) ? item : null;
+	}));
+
+	// filter out null values
+	return filteredItems.filter(item => item !== null);
+};
+
+const getVisibleGroupItems = async (combo) => {
+	const items = await combo.$$("ui5-cb-item-group");
+	const filteredItems = await Promise.all(items.map(async item => {
+			return (await item.getProperty("_isVisible")) ? item : null;
+	}));
+
+	// filter out null values
+	return filteredItems.filter(item => item !== null);
+};
+
 describe("General interaction", () => {
 
 	it ("Should open the popover when clicking on the arrow", async () => {
@@ -31,33 +51,31 @@ describe("General interaction", () => {
 	it ("Items filtration", async () => {
 		await browser.url(`test/pages/ComboBox.html`);
 
-		const combo = await browser.$("#combo");
+		const combo = await $("#combo");
 		const arrow = await combo.shadow$(".inputIcon");
 		const input = await combo.shadow$("#ui5-combobox-input");
-		const popover = await combo.shadow$("ui5-responsive-popover");
-		let listItems = await popover.$("ui5-list").$$("ui5-li");
+		let listItems = await combo.$$("ui5-cb-item");
 
 		// act
 		await arrow.click();
 
 		// assert
-		assert.strictEqual(listItems.length, 11, "All items are shown with selected item");
+		assert.strictEqual((await getVisibleItems(combo)).length, 11, "All items are shown with selected item");
 
 		// act
 		await input.click();
 		await browser.keys("Backspace");
 
 		// assert
-		listItems = await popover.$("ui5-list").$$("ui5-li");
-		assert.strictEqual(listItems.length, 1, "Items are filtered on input value change");
-
+		listItems = await combo.$$("ui5-cb-item");
+		assert.strictEqual((await getVisibleItems(combo)).length, 1, "Items are filtered on input value change");
 	});
 
 	it ("Should open the popover when typing a value", async () => {
 		await browser.url(`test/pages/ComboBox.html`);
 
-		const combo = await browser.$("#combo");
-		const lazy = await browser.$("#lazy");
+		const combo = await $("#combo");
+		const lazy = await $("#lazy");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const popover = await combo.shadow$("ui5-responsive-popover");
 
@@ -77,7 +95,7 @@ describe("General interaction", () => {
 		});
 
 		assert.strictEqual(selection, "ahrain", "ahrain should be selected");
-		const listItems = await popover.$("ui5-list").$$("ui5-li");
+		const listItems = (await getVisibleItems(combo));
 		assert.ok(await listItems[0].getProperty("selected"), "List Item should be selected");
 
 		await lazy.click();
@@ -91,7 +109,7 @@ describe("General interaction", () => {
 		const combo = await browser.$("#cb-filter-none");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const popover = await combo.shadow$("ui5-responsive-popover");
-		let listItems = await popover.$("ui5-list").$$("ui5-li");
+		let listItems = await combo.$$("ui5-cb-item");
 
 		// act
 		await input.click();
@@ -100,7 +118,7 @@ describe("General interaction", () => {
 		await input.keys("I");
 
 		setTimeout(async () => {
-			listItems = await popover.$("ui5-list").$$("ui5-li");
+			listItems = await getVisibleItems(combo);
 			const firstListItemText = await listItems[0].shadow$(".ui5-li-title").getText();
 
 			// assert
@@ -116,7 +134,7 @@ describe("General interaction", () => {
 		const arrow = await combo.shadow$(".inputIcon");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const popover = await combo.shadow$("ui5-responsive-popover");
-		let listItems = await popover.$("ui5-list").$$("ui5-li");
+		let listItems = await combo.$$("ui5-cb-item");
 
 		// act
 		await arrow.click();
@@ -128,21 +146,21 @@ describe("General interaction", () => {
 		await input.keys("a");
 
 		// assert
-		listItems = await popover.$("ui5-list").$$("ui5-li");
+		listItems = await getVisibleItems(combo);
 		assert.strictEqual(listItems.length, 5, "Items should be 5");
 
 		// act
 		await input.keys("u");
 
 		// assert
-		listItems = await popover.$("ui5-list").$$("ui5-li");
+		listItems = await getVisibleItems(combo);
 		// assert.strictEqual(listItems.length, 2, "Items should be 2");
 
 		// act
 		await input.keys("z");
 		await input.keys("z");
 		await input.keys("z");
-		listItems = await popover.$("ui5-list").$$("ui5-li");
+		listItems = await getVisibleItems(combo);
 
 		// assert
 		assert.notOk(listItems.some(item => item._isVisible), "Rendered items should be 0");
@@ -152,11 +170,11 @@ describe("General interaction", () => {
 	it ("Should close popover on item click / change event", async () => {
 		await browser.url(`test/pages/ComboBox.html`);
 
-		const combo = await browser.$("#combo2");
+		const combo = await $("#combo2");
 		const arrow = await combo.shadow$(".inputIcon");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const popover = await combo.shadow$("ui5-responsive-popover");
-		let listItems = await popover.$("ui5-list").$$("ui5-li");
+		let listItems = await getVisibleItems(combo);
 
 		// act
 		await input.click();
@@ -176,8 +194,8 @@ describe("General interaction", () => {
 
 		assert.ok(await popover.getProperty("open"), "Popover should be displayed")
 
-		listItems = await popover.$("ui5-list").$$("ui5-li");
-		await listItems[0].click();
+		listItems = await getVisibleItems(combo);
+		await (await listItems[0].shadow$("li")).click();
 
 		// assert
 		assert.notOk(await popover.getProperty("open"), "Popover should be closed");
@@ -220,11 +238,11 @@ describe("General interaction", () => {
 		const placeholder = await browser.$("#change-placeholder");
 		const arrow = await combo.shadow$(".inputIcon");
 
+		await combo.scrollIntoView();
 		await arrow.click();
 
 		// click on first item
-		const popover = await combo.shadow$("ui5-responsive-popover");
-		await (await popover.$("ui5-list").$$("ui5-li")[0]).click();
+		await (await combo.$$("ui5-cb-item"))[0].click();
 
 		assert.strictEqual(await placeholder.getText(), "Argentina", "Text should not be empty");
 		assert.strictEqual(await counter.getText(), "1", "Call count should be 1");
@@ -233,7 +251,7 @@ describe("General interaction", () => {
 
 		assert.strictEqual(await counter.getText(), "1", "Call count should be 1");
 
-		await (await popover.$("ui5-list").$$("ui5-li"))[1].click();
+		await (await combo.$$("ui5-cb-item"))[1].click();
 		assert.strictEqual(await counter.getText(), "2", "Call count should be 2");
 	});
 
@@ -263,7 +281,6 @@ describe("General interaction", () => {
 		assert.strictEqual(await counter.getText(), "0", "Call count should be 0");
 
 		// click on first item
-		const popover = await combo.shadow$("ui5-responsive-popover");
 		const link = await combo.$("div[slot='valueStateMessage'] a");
 
 		await link.click();
@@ -306,27 +323,26 @@ describe("General interaction", () => {
 	});
 
 	it("should fire change event after the user has typed in value, but also selects it from the popover", async () => {
-        await browser.url(`test/pages/ComboBox.html`);
+		await browser.url(`test/pages/ComboBox.html`);
 
 		// Setup
 		const changeValue = await browser.$("#change-placeholder");
-        const counter = await browser.$("#change-count");
-        const combo = await browser.$("#change-cb");
+		const counter = await browser.$("#change-count");
+		const combo = await browser.$("#change-cb");
 		const input = await combo.shadow$("[inner-input]");
 
+		await combo.scrollIntoView();
 
 		// Type something which is in the list
 		await input.click();
 		await input.keys("Bulgaria");
 
 		// Click on the item
-		const popover = await combo.shadow$("ui5-responsive-popover");
-		await (await popover.$("ui5-list").$$("ui5-li")[0]).click();
-
+		await ((await getVisibleItems(combo))[0]).click();
 
 		assert.strictEqual(await counter.getText(), "1", "Call count should be 1");
 		assert.strictEqual(await changeValue.getText(), "Bulgaria", "The value should be changed accordingly");
-    });
+	});
 
 	it ("Value should be reset on ESC key", async () => {
 		await browser.url(`test/pages/ComboBox.html`);
@@ -370,8 +386,7 @@ describe("General interaction", () => {
 
 		assert.strictEqual(await counter.getText(), "0", "Change event should not be fired on item navigation.");
 
-		const popover = await combo.shadow$("ui5-responsive-popover");
-		await (await popover.$("ui5-list").$$("ui5-li"))[0].click();
+		await (await combo.$$("ui5-cb-item"))[0].click();
 
 		assert.strictEqual(await counter.getText(), "1", "Change event should be fired on item selection.");
 	});
@@ -400,17 +415,20 @@ describe("General interaction", () => {
 	it ("Tests change event after type and item select", async () => {
 		await browser.url(`test/pages/ComboBox.html`);
 
-		const counter = await browser.$("#change-count");
-		const combo = await browser.$("#change-cb");
+		const counter = await $("#change-count");
+		const combo = await $("#change-cb");
 		const input = await combo.shadow$("[inner-input]");
-		const placeholder = await browser.$("#change-placeholder");
+		const placeholder = await $("#change-placeholder");
+
+		await combo.scrollIntoView();
 
 		await input.click();
 		await input.keys("a");
 
 		// click on first item
-		const popover = await combo.shadow$("ui5-responsive-popover");
-		await (await popover.$("ui5-list").$$("ui5-li"))[0].click();
+		const items = await getVisibleItems(combo);
+
+		await items[0].click();
 
 		assert.strictEqual(await placeholder.getText(), "Argentina", "Text should correspond to item.");
 		assert.strictEqual(await counter.getText(), "1", "Call count should be 1");
@@ -450,23 +468,22 @@ describe("General interaction", () => {
 		const combo = await browser.$("#contains-cb");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const arrow = await combo.shadow$(".inputIcon");
-		const popover = await combo.shadow$("ui5-responsive-popover");
-		let listItems = await popover.$("ui5-list").$$("ui5-li");
-
 		await arrow.click();
 
+		let listItems = await getVisibleItems(combo);
+
 		assert.strictEqual(listItems.length, 4, "Items should be 4");
 
 		await input.keys("n");
-		listItems = await popover.$("ui5-list").$$("ui5-li");
+		listItems = await getVisibleItems(combo);
 		assert.strictEqual(listItems.length, 3, "Items should be 3");
 
 		await input.keys("a");
-		listItems = await popover.$("ui5-list").$$("ui5-li");
+		listItems = await getVisibleItems(combo);
 		assert.strictEqual(listItems.length, 2, "Items should be 2");
 
 		await input.keys("d");
-		listItems = await popover.$("ui5-list").$$("ui5-li");
+		listItems = await getVisibleItems(combo);
 		const firstListItemText = await listItems[0].shadow$(".ui5-li-title").getText();
 
 		assert.strictEqual(listItems.length, 1, "Items should be 1");
@@ -478,21 +495,21 @@ describe("General interaction", () => {
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const arrow = await combo.shadow$(".inputIcon");
 		const popover = await combo.shadow$("ui5-responsive-popover");
-		let listItems = await popover.$("ui5-list").$$("ui5-li");
 
 		await arrow.click();
 
+		let listItems = await getVisibleItems(combo);
 		assert.strictEqual(listItems.length, 4, "Items should be 4");
 
 		await input.keys("a");
-		listItems = await popover.$("ui5-list").$$("ui5-li");
+		listItems = await getVisibleItems(combo);
 		const firstListItemText = await listItems[0].shadow$(".ui5-li-title").getText();
 
 		assert.strictEqual(listItems.length, 1, "Items should be 1");
 		assert.strictEqual(firstListItemText, "Argentina");
 
 		await input.keys("a");
-		listItems = await popover.$("ui5-list").$$("ui5-li");
+		listItems = await combo.$$("ui5-cb-item");
 		assert.notOk(popover.open, "Popover should be closed when no match");
 	});
 
@@ -501,7 +518,7 @@ describe("General interaction", () => {
 		const label = await browser.$("#selection-change-event-result");
 		const arrow = await combo.shadow$(".inputIcon");
 		const popover = await combo.shadow$("ui5-responsive-popover");
-		let listItems = await popover.$("ui5-list").$$("ui5-li");
+		let listItems = await combo.$$("ui5-cb-item");
 
 		await arrow.click();
 
@@ -518,7 +535,7 @@ describe("General interaction", () => {
 		let label = await browser.$("#selection-change-event-result");
 		const arrow = await combo.shadow$(".inputIcon");
 		const popover = await combo.shadow$("ui5-responsive-popover");
-		let listItems = await popover.$("ui5-list").$$("ui5-li");
+		let listItems = await combo.$$("ui5-cb-item");
 
 		await arrow.click();
 		await combo.keys("Backspace");
@@ -556,10 +573,9 @@ describe("General interaction", () => {
 	});
 
 	it ("Tests Combo with two-column layout", async () => {
-		const combo = await browser.$("#combobox-two-column-layout");
+		const combo = await $("#combobox-two-column-layout");
 		const arrow = await combo.shadow$(".inputIcon");
-		const popover = await combo.shadow$("ui5-responsive-popover");
-		const listItem = await popover.$("ui5-list").$$("ui5-li")[0];
+		const listItem = (await getVisibleItems(combo))[0];
 
 		await arrow.click();
 		assert.strictEqual(await listItem.shadow$(".ui5-li-additional-text").getText(), "DZ", "Additional item text should be displayed");
@@ -585,11 +601,11 @@ describe("General interaction", () => {
 		await btn.click();
 		await arrow.click();
 
-		const initialListItems = await cb.shadow$("ui5-responsive-popover").$$("ui5-li");
+		const initialListItems = await getVisibleItems(cb);
 
 		await browser.pause(2000);
 
-		const updatedListItems = await cb.shadow$("ui5-responsive-popover").$$("ui5-li");
+		const updatedListItems = await getVisibleItems(cb);
 
 		assert.notEqual(initialListItems.length, updatedListItems.length, "item count should be updated");
 	});
@@ -638,8 +654,7 @@ describe("General interaction", () => {
 		await input.keys("z");
 		await arrow.click();
 
-		const popover = await cb.shadow$("ui5-responsive-popover");
-		let listItems = await popover.$("ui5-list").$$("ui5-li");
+		let listItems = await getVisibleItems(cb);
 
 		// assert
 		assert.strictEqual(listItems.length, 11, "All items are shown");
@@ -647,67 +662,59 @@ describe("General interaction", () => {
 });
 
 describe("Grouping", () => {
-
-	it ("Tests group filtering", async () => {
+	beforeEach(async () => {
 		await browser.url(`test/pages/ComboBox.html`);
+	});
 
-		const combo = await browser.$("#combo-grouping");
+	it ("Tests group filtering", async () => {
+		const combo = await $("#combo-grouping");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const arrow = await combo.shadow$(".inputIcon");
-		let popover = await combo.shadow$("ui5-responsive-popover");
 		let listItems;
 		let groupItems;
 
 		await arrow.click();
 
-		groupItems = await popover.$("ui5-list").$$("ui5-li-group");
-		listItems = await popover.$("ui5-list").$$("ui5-li-group ui5-li");
+		groupItems = (await getVisibleGroupItems(combo));
+		listItems = (await getVisibleItems(combo));
 
 		assert.strictEqual(groupItems.length, 4, "Group items should be 4");
 		assert.strictEqual(listItems.length, 13, "Items should be 13");
 
 		await input.keys("c");
 
-		popover = await combo.shadow$("ui5-responsive-popover");
-		groupItems = await popover.$("ui5-list").$$("ui5-li-group");
-		listItems = await popover.$("ui5-list").$$("ui5-li");
+		groupItems = (await getVisibleGroupItems(combo));
+		listItems = (await getVisibleItems(combo));
 
 		assert.strictEqual(groupItems.length, 1, "Filtered group items should be 1");
 		assert.strictEqual(listItems.length, 2, "Filtered items should be 2");
 	});
 
 	it ("Tests group item focusability", async () => {
-		await browser.url(`test/pages/ComboBox.html`);
-
 		const combo = await browser.$("#combo-grouping");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const arrow = await combo.shadow$(".inputIcon");
-		const popover = await combo.shadow$("ui5-responsive-popover");
-		let groupItem;
 
 		await arrow.click();
 		await input.keys("ArrowDown");
 
-		groupItem = await popover.$("ui5-list").$("ui5-li-group").shadow$("ui5-li-group-header");
+		const groupItem = (await getVisibleGroupItems(combo))[0];
 
 		assert.ok(await groupItem.getProperty("focused"),  "The first group header should be focused");
 	});
 
 	it ("Tests input value while group item is focused", async () => {
-		const combo = await browser.$("#combo-grouping");
+		const combo = await $("#combo-grouping");
 		const input = await combo.shadow$("#ui5-combobox-input");
-		const popover = await combo.shadow$("ui5-responsive-popover");
-		let groupItem;
 
+		await input.click();
 		await input.keys("a");
 		await input.keys("ArrowDown");
 		await input.keys("ArrowDown");
 		await input.keys("ArrowDown");
 		await input.keys("ArrowDown");
-		await input.keys("ArrowDown");
-		await input.keys("ArrowDown");
 
-		groupItem = await popover.$("ui5-list").$$("ui5-li-group")[1];
+		const groupItem = (await getVisibleGroupItems(combo))[1];
 
 		assert.ok(await groupItem.getProperty("focused"),  "The second group header should be focused");
 		assert.strictEqual(await combo.getProperty("filterValue"), "a", "Filter value should be the initial one");
@@ -715,14 +722,12 @@ describe("Grouping", () => {
 	});
 
 	it ("Pressing enter on a group item should not close the picker", async () => {
-		await browser.url(`test/pages/ComboBox.html`);
-
 		const combo = await browser.$("#combo-grouping");
+		const arrow = await combo.shadow$(".inputIcon");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const popover = await combo.shadow$("ui5-responsive-popover");
 
-		await input.click();
-		await input.keys("a");
+		await arrow.click();
 		await input.keys("ArrowDown");
 		await input.keys("Enter");
 
@@ -730,21 +735,20 @@ describe("Grouping", () => {
 	});
 
 	it ("Grouped items should be filtered and with the correct role attributes", async () => {
-		await browser.url(`test/pages/ComboBox.html`);
-
-		const combo = await browser.$("#combo-grouping");
+		const combo = await $("#combo-grouping");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const popover = await combo.shadow$("ui5-responsive-popover");
 		const list = await popover.$("ui5-list");
-		const listItem = await list.$("ui5-li");
 
 		await input.click();
 		await input.keys("a");
 
+		const listItem = (await getVisibleItems(combo))[0];
+
 		assert.ok(await listItem, "The filtered item is shown");
 		assert.strictEqual(await list.getAttribute("accessible-role"), "ListBox", "The list item has the correct role attribute");
-		assert.strictEqual(await listItem.getAttribute("accessible-role"), "Option", "The list item has the correct role attribute");
-		assert.strictEqual(await list.$$("ui5-li").length, 5, "Group items are filtered correctly");
+		assert.strictEqual(await listItem.shadow$("li").getAttribute("role"), "option", "The list item has the correct role attribute");
+		assert.strictEqual((await getVisibleItems(combo)).length, 5, "Group items are filtered correctly");
 	});
 });
 
@@ -757,8 +761,8 @@ describe("Accessibility", async () => {
 		const arrow = await combo.shadow$(".inputIcon");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const invisibleMessageSpan = await browser.$(".ui5-invisiblemessage-polite");
-		const itemAnnouncement1 = "List item 1 of 11";
-		const itemAnnouncement2 = "List item 2 of 11";
+		const itemAnnouncement1 = "List item 10 of 11";
+		const itemAnnouncement2 = "List item 11 of 11";
 
 		await arrow.click();
 
@@ -798,8 +802,8 @@ describe("Accessibility", async () => {
 		const arrow = await combo.shadow$(".inputIcon");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const invisibleMessageSpan = await browser.$(".ui5-invisiblemessage-polite");
-		const itemAnnouncement1 = "DZ List item 1 of 10";
-		const itemAnnouncement2 = "AR List item 2 of 10";
+		const itemAnnouncement1 = "CA List item 9 of 10";
+		const itemAnnouncement2 = "CL List item 10 of 10";
 
 		await arrow.click();
 
@@ -934,27 +938,28 @@ describe("Accessibility", async () => {
 		const combo = await browser.$("#combo");
 		const innerInput = await combo.shadow$("input");
 		const popover = await combo.shadow$("ui5-responsive-popover");
-	
+
 		await combo.scrollIntoView();
-	
+
 		assert.strictEqual(await innerInput.getAttribute("aria-controls"), await popover.getAttribute("id"), "aria-controls attribute is correct.");
 	});
 });
 
 describe("Keyboard navigation", async () => {
-	it ("Should focus the first item on arrow down and then the input on arrow up",  async () => {
+	beforeEach(async () => {
 		await browser.url(`test/pages/ComboBox.html`);
+	});
 
-		const combo = await browser.$("#combo-grouping");
+	it ("Should focus the first item on arrow down and then the input on arrow up",  async () => {
+		const combo = await $("#combo-grouping");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const arrow = await combo.shadow$(".inputIcon");
-		const popover = await combo.shadow$("ui5-responsive-popover");
 		let groupItem, listItem;
 
 		await arrow.click();
 		await input.keys("ArrowDown");
 
-		groupItem = await popover.$("ui5-list").$$("ui5-li-group")[0];
+		groupItem = (await getVisibleGroupItems(combo))[0];
 
 		assert.strictEqual(await groupItem.getProperty("focused"), true, "The first group header should be focused");
 
@@ -964,7 +969,7 @@ describe("Keyboard navigation", async () => {
 		await input.keys("ArrowDown");
 		await input.keys("ArrowDown");
 
-		listItem = await popover.$("ui5-list").$("ui5-li-group ui5-li");
+		listItem = (await getVisibleItems(combo))[0];
 
 		assert.strictEqual(await listItem.getProperty("focused"), true, "The first list item after the group header should be focused");
 
@@ -976,7 +981,7 @@ describe("Keyboard navigation", async () => {
 	it ("Should focus the value state header and then the input", async () => {
 		await browser.url(`test/pages/ComboBox.html`);
 
-		const combo = await browser.$("#value-state-grouping");
+		const combo = await $("#value-state-grouping");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const arrow = await combo.shadow$(".inputIcon");
 		const popover = await combo.shadow$("ui5-responsive-popover");
@@ -999,7 +1004,7 @@ describe("Keyboard navigation", async () => {
 		await input.keys("ArrowDown");
 		await input.keys("ArrowDown");
 
-		groupItem = await popover.$("ui5-list").$("ui5-li-group");
+		groupItem = (await getVisibleGroupItems(combo))[0];
 
 		assert.strictEqual(await groupItem.getProperty("focused"), true, "The first group header should be focused");
 	});
@@ -1007,16 +1012,15 @@ describe("Keyboard navigation", async () => {
 	it ("Previous focus should not remain on the item after reopening the picker and choosing another one", async () => {
 		await browser.url(`test/pages/ComboBox.html`);
 
-		const combo = await browser.$("#value-state-grouping");
+		const combo = await $("#value-state-grouping");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const arrow = await combo.shadow$(".inputIcon");
-		const popover = await combo.shadow$("ui5-responsive-popover");
 		let listItem, prevListItem;
 
 		await input.click();
 		await input.keys("A");
 
-		listItem = await popover.$("ui5-list").$$("ui5-li")[1];
+		listItem = (await getVisibleItems(combo))[1];
 
 		assert.strictEqual(await listItem.getProperty("focused"), false, "The selected item is not focused");
 
@@ -1034,12 +1038,12 @@ describe("Keyboard navigation", async () => {
 
 		await arrow.click();
 
-		listItem = await popover.$("ui5-list").$$("ui5-li")[3];
+		listItem = (await getVisibleItems(combo))[3];
 
 		await listItem.click();
 
 		await arrow.click();
-		prevListItem = await popover.$("ui5-list").$$("ui5-li")[5];
+		prevListItem = (await getVisibleItems(combo))[5];
 
 		assert.strictEqual(await prevListItem.getProperty("focused"), false, "The previously focused item is no longer focused");
 	});
@@ -1050,7 +1054,6 @@ describe("Keyboard navigation", async () => {
 		const combo = await browser.$("#value-state-grouping");
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const arrow = await combo.shadow$(".inputIcon");
-		const popover = await combo.shadow$("ui5-responsive-popover");
 		let prevListItem;
 
 		await input.click();
@@ -1076,7 +1079,7 @@ describe("Keyboard navigation", async () => {
 
 		await arrow.click();
 
-		prevListItem = await popover.$("ui5-list").$$("ui5-li")[5];
+		prevListItem = (await getVisibleItems(combo))[5];
 
 		assert.strictEqual(await prevListItem.getProperty("focused"), false, "The previously focused item is no longer focused");
 	});
@@ -1129,7 +1132,6 @@ describe("Keyboard navigation", async () => {
 		const comboBox = await browser.$("#combo2");
 		const input = await comboBox.shadow$("#ui5-combobox-input");
 		const pickerIcon = await comboBox.shadow$(".inputIcon");
-		const respPopover = await comboBox.shadow$("ui5-responsive-popover");
 		let listItem;
 
 		// Opened picker
@@ -1138,20 +1140,20 @@ describe("Keyboard navigation", async () => {
 		await input.keys("ArrowDown");
 
 		await input.keys("Home");
-		listItem = await respPopover.$("ui5-list").$("ui5-li");
+		listItem = (await getVisibleItems(comboBox))[0];
 		assert.strictEqual(await listItem.getProperty("focused"), true, "The first item should be focused on HOME");
 		assert.strictEqual(await comboBox.getProperty("focused"), false, "The ComboBox should not be focused");
 
 		await input.keys("End");
-		listItem = await respPopover.$("ui5-list").$$("ui5-li")[10];
+		listItem = (await getVisibleItems(comboBox))[10];
 		assert.strictEqual(await listItem.getProperty("focused"), true, "The last item should be focused on END");
 
 		await input.keys("PageUp");
-		listItem = await respPopover.$("ui5-list").$("ui5-li");
+		listItem = (await getVisibleItems(comboBox))[0];
 		assert.strictEqual(await listItem.getProperty("focused"), true, "The -10 item should be focused on PAGEUP");
 
 		await input.keys("PageDown");
-		listItem = await respPopover.$("ui5-list").$$("ui5-li")[10];
+		listItem = (await getVisibleItems(comboBox))[10];
 		assert.strictEqual(await listItem.getProperty("focused"), true, "The +10 item should be focused on PAGEDOWN");
 
 		// Closed picker
@@ -1224,7 +1226,7 @@ describe("Keyboard navigation", async () => {
 
 		assert.strictEqual(await input.getProperty("value"), "Argentina", "Value should be Argentina");
 
-		const listItems = await popover.$("ui5-list").$$("ui5-li");
+		const listItems = await getVisibleItems(comboBox);
 
 		assert.ok(await listItems[0].getProperty("selected"), "List Item should be selected");
 		assert.notOk(await listItems[1].getProperty("selected"), "List Item should not be selected");
@@ -1233,15 +1235,14 @@ describe("Keyboard navigation", async () => {
 	it("Should select the matching item when input has matching value and F4 is pressed", async () => {
 		await browser.url(`test/pages/ComboBox.html`);
 
-		const comboBox = await browser.$("#combo");
+		const comboBox = await $("#combo");
 		const input = await comboBox.shadow$("#ui5-combobox-input");
 		const value = await input.getProperty("value");
 
 		await comboBox.click();
 		await comboBox.keys("F4");
 
-		const popover = await comboBox.shadow$("ui5-responsive-popover");
-		const selectedListItem = await popover.$("ui5-list").$("ui5-li[selected]");
+		const selectedListItem = (await getVisibleItems(comboBox))[8];
 
 		assert.strictEqual(await selectedListItem.shadow$(".ui5-li-title").getText(), value, "Selected item is correct.");
 	});
@@ -1257,6 +1258,7 @@ describe("Keyboard navigation", async () => {
 
 		await comboBox.keys("F4");
 
+
 		const popover = await comboBox.shadow$("ui5-responsive-popover");
 		const selectedListItems = await popover.$("ui5-list").$$("ui5-li[selected]");
 
@@ -1275,8 +1277,7 @@ describe("Keyboard navigation", async () => {
 		await input.click();
 		await comboBox.keys("F4");
 
-		const popover = await comboBox.shadow$("ui5-responsive-popover");
-		const listItems = await popover.$("ui5-list").$$("ui5-li");
+		const listItems = await getVisibleItems(comboBox);
 		const firstListItemText = await listItems[0].shadow$(".ui5-li-title").getText();
 
 		value = await input.getProperty("value");
@@ -1295,8 +1296,7 @@ describe("Keyboard navigation", async () => {
 		await input.click();
 		await comboBox.keys("F4");
 
-		const popover = await comboBox.shadow$("ui5-responsive-popover");
-		const listItems = await popover.$("ui5-list").$$("ui5-li");
+		const listItems = await getVisibleItems(comboBox);
 		const firstListItemText = await listItems[0].shadow$(".ui5-li-title").getText();
 
 		value = await input.getProperty("value");
@@ -1375,15 +1375,15 @@ describe("Keyboard navigation", async () => {
 		const input = await combo.shadow$("#ui5-combobox-input");
 		const arrow = await combo.shadow$(".inputIcon");
 
-		await combo.scrollIntoView();
 
+		await combo.scrollIntoView();
 
 		await arrow.click();
 
 		let isInVisibleArea = await browser.executeAsync(async done => {
 			const combobox = document.getElementById("combo-grouping");
 			const picker = await combobox._getPicker();
-			const listItem = picker.querySelector(".ui5-combobox-items-list ui5-li-group:last-child ui5-li:last-child");
+			const listItem = combobox.querySelector("ui5-cb-item-group:last-child ui5-cb-item:last-child");
 			const scrollableRect = picker.shadowRoot.querySelector(".ui5-popup-content").getBoundingClientRect();
 			const elementRect = listItem.getBoundingClientRect();
 
@@ -1406,13 +1406,15 @@ describe("Keyboard navigation", async () => {
 		assert.notOk(isInVisibleArea, "Item should not be displayed in the viewport");
 
 		// click ArrowDown 16 times
-		await input.keys(["ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown"]);
-		await input.keys(["ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowDown"]);
+		for (let i = 0; i < 16; i++) {
+            await browser.keys("ArrowDown"),
+            await browser.pause(10);
+        }
 
 		isInVisibleArea = await browser.executeAsync(async done => {
 			const combobox = document.getElementById("combo-grouping");
 			const picker = await combobox._getPicker();
-			const listItem = picker.querySelector(".ui5-combobox-items-list ui5-li-group:last-child ui5-li:last-child");
+			const listItem = combobox.querySelector("ui5-cb-item-group:last-child ui5-cb-item:last-child");
 			const scrollableRect = picker.shadowRoot.querySelector(".ui5-popup-content").getBoundingClientRect();
 			const elementRect = listItem.getBoundingClientRect();
 
@@ -1439,7 +1441,7 @@ describe("Keyboard navigation", async () => {
 		let isFirstItemInVisibleArea = await browser.executeAsync(async done => {
 			const combobox = document.getElementById("combo-grouping");
 			const picker = await combobox._getPicker();
-			const firstListItem = picker.querySelector(".ui5-combobox-items-list ui5-li-group:first-child ui5-li:first-child");
+			const firstListItem = combobox.querySelector("ui5-cb-item-group:first-child ui5-cb-item:first-child");
 			const scrollableRect = picker.shadowRoot.querySelector(".ui5-popup-content").getBoundingClientRect();
 			const firstItemBoundingClientRect = firstListItem.getBoundingClientRect();
 
@@ -1457,14 +1459,14 @@ describe("Keyboard navigation", async () => {
 			);
 
 			done(isFirstItemInVisibleArea);
-			});
+		});
 
 		assert.ok(isFirstItemInVisibleArea, "The first item should be displayed in the viewport");
 
 		let isLastItemInVisibleArea = await browser.executeAsync(async done => {
 			const combobox = document.getElementById("combo-grouping");
 			const picker = await combobox._getPicker();
-			const lastListItem = picker.querySelector(".ui5-combobox-items-list ui5-li-group:first-child ui5-li:first-child");
+			const lastListItem = combobox.querySelector("ui5-cb-item-group:first-child ui5-cb-item:first-child");
 			const scrollableRect = picker.shadowRoot.querySelector(".ui5-popup-content").getBoundingClientRect();
 			const lastItemBoundingClientRect = lastListItem.getBoundingClientRect();
 
@@ -1482,7 +1484,7 @@ describe("Keyboard navigation", async () => {
 			);
 
 			done(isLastItemInVisibleArea);
-			});
+		});
 
 		assert.ok(isLastItemInVisibleArea, "The first item should be displayed in the viewport");
 	});
diff --git a/packages/main/test/specs/MultiComboBox.mobile.spec.js b/packages/main/test/specs/MultiComboBox.mobile.spec.js
index fa5f394f05e5..edc545397cc7 100644
--- a/packages/main/test/specs/MultiComboBox.mobile.spec.js
+++ b/packages/main/test/specs/MultiComboBox.mobile.spec.js
@@ -1,5 +1,15 @@
 import { assert } from "chai";
 
+const getVisibleItems = async (id) => {
+	const slottedItems = await browser.executeAsync((mcbId, done) => {
+		const mcb = document.getElementById(mcbId);
+		
+		done(mcb.shadowRoot.querySelector(".ui5-multi-combobox-all-items-list").getSlottedNodes("items"));
+	}, id);
+
+	return slottedItems;
+};
+
 describe("Basic interaction", () => {
 	before(async () => {
 		await browser.url(`test/pages/MultiComboBox.html`);
@@ -93,7 +103,7 @@ describe("Basic interaction", () => {
 		const toggleSelectedButton =  await multiCombo.shadow$("ui5-responsive-popover").$("ui5-toggle-button");
 		assert.strictEqual(await toggleSelectedButton.getAttribute("pressed"), "", "Toggle selected items button is pressed");
 
-		const itemsCount = await multiCombo.shadow$("ui5-responsive-popover").$("ui5-list").$$("ui5-li")
+		const itemsCount = (await getVisibleItems("multi1"));
 		assert.strictEqual(itemsCount.length, 3, "Only the selected items are shown");
 	});
 
@@ -104,7 +114,7 @@ describe("Basic interaction", () => {
 
 		toggleSelectedButton.click();
 
-		const itemsCount = await multiCombo.shadow$("ui5-responsive-popover").$("ui5-list").$$("ui5-li")
+		const itemsCount = await multiCombo.$$(`ui5-mcb-item`);
 		assert.strictEqual(itemsCount.length, 4, "All items are shown");
 
 		const dialogCloseButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
@@ -223,7 +233,7 @@ describe("Items selection", () => {
 		await multiCombo.scrollIntoView();
 		await mcbInput.click();
 
-		const listItem = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[0];
+		const listItem = await multiCombo.$$("ui5-mcb-item")[0];
 		await listItem.click();
 
 		const token = await multiCombo.shadow$("ui5-tokenizer").$("ui5-token");
@@ -237,7 +247,7 @@ describe("Items selection", () => {
 		await multiCombo.scrollIntoView();
 		await mcbInput.click();
 
-		const listItemCheckbox = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[1].shadow$("ui5-checkbox");
+		const listItemCheckbox = await multiCombo.$$("ui5-mcb-item")[1].shadow$("ui5-checkbox");
 		await listItemCheckbox.click();
 
 		const dialogOkButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
@@ -254,7 +264,7 @@ describe("Items selection", () => {
 		await multiCombo.scrollIntoView();
 		await mcbInput.click();
 
-		const listItemCheckbox = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[2].shadow$("ui5-checkbox");
+		const listItemCheckbox = await multiCombo.$$("ui5-mcb-item")[2].shadow$("ui5-checkbox");
 		await listItemCheckbox.click();
 
 		const dialogCloseButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
@@ -270,10 +280,10 @@ describe("Items selection", () => {
 		await multiCombo.scrollIntoView();
 		await multiCombo.shadow$('ui5-tokenizer').shadow$(".ui5-tokenizer-more-text").click();
 
-		const listItemCheckbox = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[0].shadow$("ui5-checkbox");
+		const listItemCheckbox = await multiCombo.$$("ui5-mcb-item")[0].shadow$("ui5-checkbox");
 		await listItemCheckbox.click();
 
-		const listItem = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[1];
+		const listItem = await multiCombo.$$("ui5-mcb-item")[2];
 		await listItem.click();
 
 		const dialogOkButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
@@ -294,7 +304,7 @@ describe("Items selection", () => {
 		const toggleSelectedButton =  await multiCombo.shadow$("ui5-responsive-popover").$("ui5-toggle-button");
 		await toggleSelectedButton.click();
 
-		const listItem = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[1];
+		const listItem = await multiCombo.$$("ui5-mcb-item")[1];
 		await listItem.click();
 
 		const dialogOkButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
@@ -341,12 +351,11 @@ describe("Items selection", () => {
 
 	it("should not close the dialog on checkbox click", async () => {
 		const mcb = await $("#mcb-select-all-vs");
-		const popover = await mcb.shadow$("ui5-responsive-popover");
 
 		await mcb.scrollIntoView();
 		await mcb.click();
 
-		const listItemCheckbox = await popover.$$("ui5-li")[0].shadow$("ui5-checkbox");
+		const listItemCheckbox = await mcb.$("ui5-mcb-item").shadow$("ui5-checkbox");
 		await listItemCheckbox.click();
 
 		assert.strictEqual(await mcb.getProperty("open"), true, "Mobile dialog is not closed on checkbox click");
@@ -386,7 +395,7 @@ describe("Eventing", () => {
 		await multiCombo.scrollIntoView();
 		await mcbInput.click();
 
-		const listItem = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[0];
+		const listItem = await multiCombo.$$("ui5-mcb-item")[0];
 		await listItem.click();
 
 		assert.strictEqual(await browser.$("#events-input").getValue(), "selectionChange", "The correct event was fired");
@@ -401,7 +410,7 @@ describe("Eventing", () => {
 		await multiCombo.scrollIntoView();
 		await mcbInput.click();
 
-		const listItemCheckbox = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[1].shadow$("ui5-checkbox");
+		const listItemCheckbox = await multiCombo.$$("ui5-mcb-item")[1].shadow$("ui5-checkbox");
 		await listItemCheckbox.click();
 
 		const dialogOkButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
@@ -421,7 +430,7 @@ describe("Eventing", () => {
 		await multiCombo.scrollIntoView();
 		await multiCombo.shadow$("ui5-icon").click();
 
-		const listItemCheckbox = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[2].shadow$("ui5-checkbox");
+		const listItemCheckbox = await multiCombo.$$("ui5-mcb-item")[2].shadow$("ui5-checkbox");
 		await listItemCheckbox.click();
 
 		const dialogCloseButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
@@ -442,7 +451,7 @@ describe("Eventing", () => {
 		let tokens = await multiCombo.shadow$("ui5-tokenizer").$$("ui5-token");
 		assert.strictEqual(tokens.length, 1, "There should be only one token.");
 
-		const listItemCheckbox = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[0].shadow$("ui5-checkbox");
+		const listItemCheckbox = await multiCombo.$$("ui5-mcb-item")[0].shadow$("ui5-checkbox");
 		await listItemCheckbox.click();
 
 		const dialogOkButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
index d6e006156e76..18d13866bc94 100644
--- a/packages/main/test/specs/MultiComboBox.spec.js
+++ b/packages/main/test/specs/MultiComboBox.spec.js
@@ -1,8 +1,28 @@
 import { assert } from "chai";
 
+const getVisibleItems = async (combo) => {
+	const items = await combo.$$("ui5-mcb-item");
+	const filteredItems = await Promise.all(items.map(async item => {
+			return (await item.getProperty("_isVisible")) ? item : null;
+	}));
+
+	// filter out null values
+	return filteredItems.filter(item => item !== null);
+};
+
+const getVisibleGroupItems = async (combo) => {
+	const items = await combo.$$("ui5-mcb-item-group");
+	const assignedItems = await Promise.all(items.map(async item => {
+		return (await item.getProperty("assignedSlot")) ? item : null;
+	}));
+
+	return assignedItems.filter(item => item !== null);
+};
+
 describe("MultiComboBox general interaction", () => {
-	before(async () => {
+	beforeEach(async () => {
 		await browser.url(`test/pages/MultiComboBox.html`);
+		await browser.setWindowSize(1920, 1080);
 	});
 
 	describe("toggling", () => {
@@ -41,8 +61,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Apply focus", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#multi1");
 			const focusBtn = await browser.$("#focus-mcb");
 
@@ -76,8 +94,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Opens selected items Popover", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			await browser.setWindowSize(400, 1250);
 			const mcb = await browser.$("#multi1");
 			const showMore = await mcb.shadow$(".ui5-multi-combobox-tokenizer").shadow$(".ui5-tokenizer-more-text");
@@ -90,9 +106,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Checks if tokenizer is expanded when adding items dynamically", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-			await browser.setWindowSize(1920, 1080);
-
 			const btn = await $("#add");
 			const mcb = await $("#mcb-dynamic-selection");
 
@@ -109,8 +122,7 @@ describe("MultiComboBox general interaction", () => {
 			const tokenizer = await mcb.shadow$("ui5-tokenizer");
 			const body = await browser.$(".multicombobox1auto");
 			const nMoreText = await tokenizer.shadow$(".ui5-tokenizer-more-text");
-			const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
-			const firstItemCheckbox = await popover.$("ui5-list > ui5-li").shadow$("ui5-checkbox");
+			const firstItemCheckbox = await mcb.$("ui5-mcb-item").shadow$("ui5-checkbox");
 
 			await arrow.click();
 			await browser.keys("ArrowDown");
@@ -132,7 +144,6 @@ describe("MultiComboBox general interaction", () => {
 
 	describe("selection and filtering", () => {
 		beforeEach(async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
 			await browser.setWindowSize(1920, 1080);
 		});
 
@@ -140,8 +151,8 @@ describe("MultiComboBox general interaction", () => {
 			const mcb = await browser.$("#mcb");
 			const icon = await mcb.shadow$(".inputIcon");
 			const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
-			const firstItem = await popover.$("ui5-list > ui5-li");
-			const firstItemCheckbox = await firstItem.shadow$("ui5-checkbox");
+			const firstItem = await mcb.$("ui5-mcb-item");
+			const firstItemCheckbox = await mcb.$("ui5-mcb-item").shadow$("ui5-checkbox");
 			const eventInput = await browser.$("#events-input");
 			const paramsInput = await browser.$("#events-parameters");
 			const callCountInput = await browser.$("#events-call-count");
@@ -173,7 +184,7 @@ describe("MultiComboBox general interaction", () => {
 			const mcb = await browser.$("#mcb-success");
 			const icon = await browser.$("#mcb-success").shadow$(".inputIcon");
 			const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
-			const firstItem = await popover.$(".ui5-multi-combobox-all-items-list > ui5-li");
+			const firstItem = await mcb.$("ui5-mcb-item");
 
 			await icon.click();
 
@@ -283,7 +294,7 @@ describe("MultiComboBox general interaction", () => {
 			const mcb = await browser.$("#another-mcb");
 			const input = await browser.$("#another-mcb").shadow$("#ui5-multi-combobox-input");
 			const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
-			const firstItem = await popover.$(".ui5-multi-combobox-all-items-list > ui5-li");
+			const firstItem = await mcb.$("ui5-mcb-item");
 
 			await input.click();
 			await input.keys("c");
@@ -302,7 +313,7 @@ describe("MultiComboBox general interaction", () => {
 			const mcb = await browser.$("#another-mcb");
 			const input = await browser.$("#another-mcb").shadow$("#ui5-multi-combobox-input");
 			const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
-			const firstItemCheckbox = await popover.$(".ui5-multi-combobox-all-items-list > ui5-li").shadow$("ui5-checkbox");
+			const firstItemCheckbox = await mcb.$("ui5-mcb-item").shadow$("ui5-checkbox");
 
 			await input.click();
 			await input.keys("c");
@@ -326,7 +337,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("tests if clicking n more will prefilter items before opening the popover", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
 			await browser.setWindowSize(1920, 1080);
 
 			const mcb = await $("#more-mcb");
@@ -364,8 +374,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("tests if tokenizer is scrolled to the end when expanded and to start when narrowed", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await $("#more-mcb");
 			const input = mcb.shadow$("input");
 
@@ -382,8 +390,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("tests if tokenizer is not expanded/collapsed when the suggestions are opened from a selected token", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await $("#more-mcb");
 			let tokenizer = await mcb.shadow$("ui5-tokenizer")
 			let tokens = await browser.$("#more-mcb").shadow$$(".ui5-multi-combobox-token");
@@ -400,7 +406,6 @@ describe("MultiComboBox general interaction", () => {
 		})
 
 		it("tests filtering of items when nmore popover is open and user types in the input fueld", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
 			await browser.setWindowSize(1920, 1080);
 
 			const mcb = await $("#more-mcb");
@@ -411,16 +416,16 @@ describe("MultiComboBox general interaction", () => {
 			const input = await mcb.shadow$("input");
 
 			await nMoreText.click();
+			await input.click();
+			await input.keys("c");
 
 			const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
 			const list = await popover.$(".ui5-multi-combobox-all-items-list");
-			const lastListItem = await list.$("ui5-li:last-child");
-
-			await input.click();
-			await input.keys("c");
+			const items = (await getVisibleItems(mcb))
+			const lastItem = items[items.length - 1];
 
 			assert.strictEqual((await list.getProperty("items")).length, 3, "3 items should be shown (all selected)");
-			assert.notOk(await lastListItem.getProperty("selected"), "last item should not be selected");
+			assert.notOk(await lastItem.getProperty("selected"), "last item should not be selected");
 		})
 
 		it("tests if tokenizer is collapsed after focusout of the Popover", async () => {
@@ -428,19 +433,20 @@ describe("MultiComboBox general interaction", () => {
 			const input = await mcb.shadow$("#ui5-multi-combobox-input");
 			const tokenizer = await mcb.shadow$("ui5-tokenizer");
 			const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
-			const firstItemCheckbox = await popover.$(".ui5-multi-combobox-all-items-list > ui5-li").shadow$("ui5-checkbox");
-
+			
 			await input.click();
 			await input.keys("Comp");
-
+			
 			assert.ok(await popover.getProperty("open"), "The popover should be opened");
+			
+			const visibleItems = await getVisibleItems(mcb);
+			const firstItemCheckbox = await visibleItems[0].shadow$("ui5-checkbox");
 
 			await firstItemCheckbox.click();
 			await firstItemCheckbox.click();
 			await browser.keys("Tab");
 
 			assert.notOk(await popover.getProperty("open"), "The popover should not be opened.");
-
 			assert.notOk(await tokenizer.getProperty("expanded"), "The tokenizer should be collapsed.");
 		});
 
@@ -473,8 +479,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Should make a selection on ENTER and discard on ESC", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			let tokens;
 
 			const mcb = await browser.$("#mcb");
@@ -497,13 +501,10 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should reset typeahead on item navigation and restore it on focus input", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb");
 			const input = await mcb.shadow$("input");
 			const icon = await mcb.shadow$(".inputIcon");
-			const popover = await mcb.shadow$("ui5-responsive-popover");
-			const listItem = await popover.$("ui5-li");
+			const listItem = await mcb.$("ui5-mcb-item");
 
 			await icon.click();
 			await mcb.keys("c");
@@ -522,7 +523,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("tests if clicking delete icon of a token removes it from the selection", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
 			await browser.setWindowSize(1920, 1080);
 
 			const mcb = $("#mcb-long-token");
@@ -542,8 +542,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("tests if clicking delete icon of a token removes it from the selection (mcb with grouping)", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = $("#mcb-grouping");
 			const inner = mcb.shadow$("input");
 
@@ -551,8 +549,7 @@ describe("MultiComboBox general interaction", () => {
 			await inner.click();
 
 			await inner.keys("a");
-			const popover = await mcb.shadow$("ui5-responsive-popover");
-			const firstItem = await popover.$(".ui5-multi-combobox-all-items-list > ui5-li");
+			const firstItem = (await getVisibleItems(mcb))[0];
 			await firstItem.click();
 
 			let tokens = await mcb.shadow$$(".ui5-multi-combobox-token");
@@ -570,12 +567,10 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("prevents selection change event when clicking an item", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = $("#mcb-prevent");
 			const input = mcb.shadow$("#ui5-multi-combobox-input");
 			const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
-			const firstItem = await popover.$(".ui5-multi-combobox-all-items-list > ui5-li");
+			const firstItem = (await getVisibleItems(mcb))[0];
 			const mcbTokens = await mcb.shadow$$(".ui5-multi-combobox-token");
 
 			assert.equal(mcbTokens.length, 1, "1 token is created.");
@@ -594,8 +589,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("prevents selection change event when deleting a token", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = $("#mcb-prevent");
 			let tokens = await mcb.shadow$$(".ui5-multi-combobox-token");
 
@@ -610,8 +603,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should prevent selection-change on CTRL+A", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = $("#mcb-prevent");
 			const input = await mcb.shadow$("input");
 
@@ -707,10 +698,6 @@ describe("MultiComboBox general interaction", () => {
 	});
 
 	describe("keyboard handling", () => {
-		before(async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-		});
-
 		it("tests backspace when combobox has an empty value", async () => {
 			let tokens = await browser.$("#multi1").shadow$$(".ui5-multi-combobox-token");
 			const input = await browser.$("#multi1").shadow$("input");
@@ -728,8 +715,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Value should be reset on ESC key", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mCombo = await browser.$("#another-mcb");
 			const mCombo2 = await browser.$("#more-mcb");
 			const input = await mCombo.shadow$("#ui5-multi-combobox-input");
@@ -763,8 +748,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("selects an item when enter is pressed and value matches a text of an item in the list", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-with-placeholder");
 			const input = await mcb.shadow$("input");
 
@@ -790,13 +773,11 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("focuses the value state header and item on arrow down then the value state and the input on arrow up", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-error");
 			const input = await mcb.shadow$("input");
 			const icon = await mcb.shadow$(".inputIcon");
 			const popover = await mcb.shadow$("ui5-responsive-popover");
-			const listItem = await popover.$("ui5-li");
+			const listItem = (await getVisibleItems(mcb))[0];
 
 			await icon.click();
 			await input.keys("ArrowDown");
@@ -833,8 +814,7 @@ describe("MultiComboBox general interaction", () => {
 			const mcb = await browser.$("#mcb-with-placeholder");
 			const input = await mcb.shadow$("input");
 			const icon = await mcb.shadow$(".inputIcon");
-			const popover = await mcb.shadow$("ui5-responsive-popover");
-			const listItem = await popover.$("ui5-li");
+			const listItem = (await getVisibleItems(mcb))[0];
 
 			await icon.click();
 			await mcb.keys("ArrowDown");
@@ -853,8 +833,7 @@ describe("MultiComboBox general interaction", () => {
 			const input = await mcb.shadow$("input");
 			const popover = await mcb.shadow$("ui5-responsive-popover");
 			const checkbox = await popover.$("ui5-checkbox");
-			const listItemGroup = await popover.$("ui5-li-group");
-
+			const listItemGroup = await mcb.$("ui5-mcb-item-group");
 
 			await input.click();
 			await mcb.keys("F4");
@@ -902,8 +881,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should reset current navigation state on user input", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb");
 
 			await mcb.click();
@@ -928,8 +905,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("arrow up when no item is selected should go to the last item", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb");
 
 			await mcb.click();
@@ -939,8 +914,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should focus input after all tokens are deleted", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-compact");
 			const input = await mcb.shadow$("input");
 
@@ -953,8 +926,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("first HOME should move caret to start of the input, second HOME should focus the first token, END should focus last token", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-error");
 			const input = await mcb.shadow$("input");
 			const tokens = await mcb.shadow$$(".ui5-multi-combobox-token");
@@ -980,13 +951,10 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("CTRL + HOME focus the first item, CTRL + END should focus last item", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb");
 			const input = await mcb.shadow$("input");
-			const popover = await mcb.shadow$("ui5-responsive-popover");
-			const firstItem = await popover.$("ui5-li");
-			const lastItem = await popover.$("ui5-li:last-child");
+			const firstItem = await mcb.$("ui5-mcb-item");
+			const lastItem = await mcb.$("ui5-mcb-item:last-child");
 
 			await input.click();
 			await mcb.keys("F4");
@@ -1001,8 +969,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should close the picker and focus the next element on TAB", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb");
 			const mcb2 = await browser.$("#mcb-no-typeahead");
 
@@ -1029,8 +995,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should close the picker and focus the next element on TAB over an item or value state header", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-warning");
 			const input = await mcb.shadow$("input");
 			const mcb2 = await browser.$("#mcb-error");
@@ -1061,8 +1025,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should select/unselect next/previous item on shift+arrow", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb");
 
 			await mcb.click();
@@ -1083,8 +1045,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should move focus to the previous token with arrow left", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-error");
 			const input = await mcb.shadow$("input");
 
@@ -1103,8 +1063,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should navigate through the items with CTRL + arrow up/down keys when the picker is closed", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb");
 
 			await mcb.click();
@@ -1123,12 +1081,10 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("focuses the value state header and item on CTRL + arrow down then the value state and the input on CTRL + arrow up", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-error");
 			const icon = await mcb.shadow$(".inputIcon");
 			const popover = await mcb.shadow$("ui5-responsive-popover");
-			const listItem = await popover.$("ui5-li");
+			const listItem = mcb.$("ui5-mcb-item");
 
 			await icon.click();
 			await mcb.keys(["Control", "ArrowDown"]);
@@ -1164,8 +1120,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should select all filtered items on CTRL+A", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb");
 			const input = await mcb.shadow$("input");
 
@@ -1199,8 +1153,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should copy a token with CTRL+C and paste it with CTRL+V", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#multi1");
 			const mcb2 = await browser.$("#mcb");
 			const input = await mcb2.shadow$("input");
@@ -1220,8 +1172,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should not be able to paste token with CTRL+V in read only multi combo box", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#multi1");
 			const mcb2 = await browser.$("#readonly-value-state-mcb");
 			const input = await mcb2.shadow$("input");
@@ -1238,8 +1188,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should cut a token with CTRL+X and paste it with CTRL+V", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#multi1");
 			const mcb2 = await browser.$("#mcb");
 			const input = await mcb2.shadow$("input");
@@ -1258,8 +1206,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should cut a token with SHIFT+DELETE and paste it with SHIFT+INSERT", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#multi1");
 			const mcb2 = await browser.$("#mcb");
 			const input = await mcb2.shadow$("input");
@@ -1278,8 +1224,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should copy a token with CTRL+INSERT and paste it with SHIFT+INSERT", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#multi1");
 			const mcb2 = await browser.$("#mcb");
 			const input = await mcb2.shadow$("input");
@@ -1294,8 +1238,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("should select a token with CTRL+SPACE", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-error");
 			const input = await mcb.shadow$("input");
 
@@ -1309,8 +1251,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("CTRL+SPACE should do nothing when pressed in the input field", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb");
 			const input = await mcb.shadow$("input");
 
@@ -1321,13 +1261,9 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("F4 should focus the selected item or the first one if there is no selected", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb");
-			const popover = await mcb.shadow$("ui5-responsive-popover");
-			const listItem = await popover.$("ui5-li");
-			const listItem2 = await popover.$$("ui5-li")[1];
-
+			const listItem = await mcb.$$("ui5-mcb-item")[0];
+			const listItem2 = await mcb.$$("ui5-mcb-item")[1];
 			await mcb.click();
 			await mcb.keys("F4");
 
@@ -1342,12 +1278,9 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Alt + Down should focus the corresponding item to the token from which the combination is pressed", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-items");
-			const popover = await mcb.shadow$("ui5-responsive-popover");
 			const tokens = await mcb.shadow$$(".ui5-multi-combobox-token");
-			const listItem = await popover.$$("ui5-li")[3];
+			const listItem = await mcb.$$("ui5-mcb-item")[3];
 
 			await tokens[2].click();
 			await tokens[2].keys(["Alt", "ArrowDown"]);
@@ -1356,11 +1289,8 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Alt + Down should focus the first item if no selected items are present", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#multi-acv");
-			const popover = await mcb.shadow$("ui5-responsive-popover");
-			const listItem = await popover.$("ui5-li");
+			const listItem = await mcb.$("ui5-mcb-item");
 
 			await mcb.click();
 			await mcb.keys(["Alt", "ArrowDown"]);
@@ -1369,24 +1299,19 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Alt + Down should not filter items", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb");
 			const input = await mcb.shadow$("input");
-			const popover = await mcb.shadow$("ui5-responsive-popover");
 
 			await input.click();
 			await input.keys(["a", "b"]);
 			await input.keys(["Alt", "ArrowDown"]);
 
-			const listItem = await popover.$("ui5-li");
+			const listItem = await mcb.$("ui5-mcb-item");
 
 			assert.ok(await listItem.matches(":focus"), "The items are not filtered and the first item is focused");
 		});
 
 		it("Alt + Down should focus the item corresponding to the text value", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb");
 			const input = await mcb.shadow$("input");
 			const popover = await mcb.shadow$("ui5-responsive-popover");
@@ -1396,14 +1321,12 @@ describe("MultiComboBox general interaction", () => {
 			await input.keys("ArrowDown");
 			await input.keys(["Alt", "ArrowDown"]);
 
-			const listItem = await popover.$$("ui5-li")[1];
+			const listItem = await mcb.$$("ui5-mcb-item")[1];
 
 			assert.ok(await listItem.matches(":focus"), "The second item is focused");
 		});
 
 		it("Backspace deletes token and forwards the focus to the last token without collapsing the tokenizer", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#n-more-many-items");
 			const inner = await mcb.shadow$("input");
 			let tokens = await mcb.shadow$$(".ui5-multi-combobox-token");
@@ -1422,8 +1345,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Backspace should not delete tokens, when MCB is readonly", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-ro");
 			const inner = await mcb.shadow$("input");
 			let tokens = await mcb.shadow$$(".ui5-multi-combobox-token");
@@ -1466,13 +1387,9 @@ describe("MultiComboBox general interaction", () => {
 	});
 
 	describe("General", () => {
-		before(async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-		});
-
 		it("tests text selection on focus", async () => {
-			const mcb = await browser.$("#multi-acv");
-			const mcb2 = await browser.$("#mcb-with-placeholder");
+			const mcb = await $("#multi-acv");
+			const mcb2 = await $("#mcb-with-placeholder");
 
 			await mcb.click();
 
@@ -1497,8 +1414,7 @@ describe("MultiComboBox general interaction", () => {
 		it("tests two-column layout", async () => {
 			const mcb = await browser.$("#mcb-two-column-layout");
 			const icon = await mcb.shadow$(".inputIcon");
-			const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
-			const listItem = await popover.$("ui5-li");
+			const listItem = await mcb.$("ui5-mcb-item");
 
 			await icon.click();
 			assert.strictEqual(await listItem.shadow$(".ui5-li-additional-text").getText(), "DZ", "Additional item text should be displayed");
@@ -1599,8 +1515,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Should check clear icon availability", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const cb = await browser.$("#clear-icon-cb");
 			const inner = cb.shadow$("input");
 			const clearIcon = await cb.shadow$(".ui5-input-clear-icon-wrapper");
@@ -1614,8 +1528,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Should check clear icon events", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const cb = await browser.$("#clear-icon-cb");
 
 			await cb.shadow$("input").click();
@@ -1631,8 +1543,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Should not fire submit event when confirming selection", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const cb = await browser.$("#mcb-form");
 
 			await cb.shadow$("input").click();
@@ -1647,8 +1557,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Should remove header when value state is reset", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = $("#mcb-error");
 
 			// click on arrow
@@ -1669,10 +1577,6 @@ describe("MultiComboBox general interaction", () => {
 	});
 
 	describe("MultiComboBox Truncated Token", () => {
-		beforeEach(async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-		});
-
 		it("should truncate token when single token is in the multicombobox and open popover on click", async () => {
 			const mcb = await browser.$("#truncated-token");
 			const token = await mcb.shadow$("ui5-token");
@@ -1729,10 +1633,6 @@ describe("MultiComboBox general interaction", () => {
 	});
 
 	describe("ARIA attributes", () => {
-		before(async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-		});
-
 		it("aria-describedby value according to the tokens count and the value state", async () => {
 			const mcb = await browser.$("#mcb-error");
 			const innerInput = await mcb.shadow$("input");
@@ -1753,8 +1653,6 @@ describe("MultiComboBox general interaction", () => {
 			const innerInput = await mcb.shadow$("input");
 			let invisibleText = await mcb.shadow$(".ui5-hidden-text");
 			const inivisbleTextId = await invisibleText.getProperty("id");
-			const popover = await mcb.shadow$("ui5-responsive-popover");
-			let firstItem = await popover.$("ui5-list").$("ui5-li");
 			let tokens = await mcb.shadow$$(".ui5-multi-combobox-token");
 			let resourceBundleText = null;
 
@@ -1796,8 +1694,11 @@ describe("MultiComboBox general interaction", () => {
 			assert.strictEqual(tokens.length, 0, "should not have tokens");
 			assert.ok(await ariaHiddenText.includes(resourceBundleText), "aria-describedby text is correct");
 
+			
 			await innerInput.click();
 			await innerInput.keys("i");
+
+			const firstItem = (await getVisibleItems(mcb))[0];
 			await firstItem.click();
 
 			tokens = await mcb.shadow$$(".ui5-multi-combobox-token");
@@ -1845,8 +1746,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Value state type should be added to the screen readers default value states announcement", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mCbWarning = await browser.$("#mcb-warning");
 			const mCbSuccess = await browser.$("#mcb-success");
 			const mCbError = await browser.$("#mcb-error");
@@ -1898,25 +1797,24 @@ describe("MultiComboBox general interaction", () => {
 
 	describe("Grouping", () => {
 		it("Tests group filtering", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-grouping");
 			const input = await mcb.shadow$("#ui5-multi-combobox-input");
 			const arrow = await mcb.shadow$(".inputIcon");
 			let popover = await mcb.shadow$("ui5-responsive-popover");
-			let groupItems = await popover.$("ui5-list").$$("ui5-li-group");
-			let listItems = await popover.$("ui5-list").$$("ui5-li");
-
+			
 			await arrow.click();
 
+			let groupItems = await getVisibleGroupItems(mcb);
+			let listItems = await getVisibleItems(mcb);
+
 			assert.strictEqual(groupItems.length, 3, "Group items should be 3");
 			assert.strictEqual(listItems.length, 12, "Items should be 12");
 
 			await input.keys("B");
 
 			popover = await mcb.shadow$("ui5-responsive-popover");
-			groupItems = await popover.$("ui5-list").$$("ui5-li-group");
-			listItems = await popover.$("ui5-list").$$("ui5-li");
+			groupItems = await getVisibleGroupItems(mcb);
+			listItems = await getVisibleItems(mcb);
 
 			assert.strictEqual(groupItems.length, 1, "Filtered group items should be 1");
 			assert.strictEqual(listItems.length, 1, "Filtered items should be 1");
@@ -1928,40 +1826,32 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Tests group item focusability", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-grouping");
 			const input = await mcb.shadow$("#ui5-multi-combobox-input");
 			const arrow = await mcb.shadow$(".inputIcon");
-			const popover = await mcb.shadow$("ui5-responsive-popover");
 			let groupItem;
 
 			await arrow.click();
 			await input.keys("ArrowDown");
 
-			groupItem = await popover.$("ui5-list").$("ui5-li-group").shadow$("ui5-li-group-header");
+			groupItem = (await getVisibleGroupItems(mcb))[0];
 
 			assert.ok(await groupItem.matches(":focus"), "The first group header should be focused");
 		});
 
 		it("Tests group item focusability with keyboard", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-grouping");
 			const input = await mcb.shadow$("#ui5-multi-combobox-input");
-			const popover = await mcb.shadow$("ui5-responsive-popover");
 
 			await input.click();
 			await input.keys("F4");
 
-			let firstItem = await popover.$("ui5-list").$("ui5-li");
+			let firstItem = (await getVisibleItems(mcb))[0];
 
 			assert.ok(await firstItem.matches(":focus"), "The first item inside the first group should be focused");
 		});
 
 		it("Group header keyboard handling", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-grouping");
 			const input = await mcb.shadow$("#ui5-multi-combobox-input");
 			const arrow = await mcb.shadow$(".inputIcon");
@@ -1971,7 +1861,7 @@ describe("MultiComboBox general interaction", () => {
 			await arrow.click();
 			await input.keys("ArrowDown");
 
-			groupItem = await popover.$("ui5-list").$("ui5-li-group").shadow$("ui5-li-group-header");
+			groupItem = (await getVisibleGroupItems(mcb))[0];
 
 			await groupItem.keys("Enter");
 
@@ -1979,7 +1869,7 @@ describe("MultiComboBox general interaction", () => {
 			assert.equal(await popover.getProperty("open"), true, "Popover should not be open");
 			assert.strictEqual(await input.getValue(), "", "The value is not updated");
 
-			groupItem = await popover.$("ui5-list").$("ui5-li-group").shadow$("ui5-li-group-header");
+			groupItem = (await getVisibleGroupItems(mcb))[0];
 
 			await groupItem.keys("Space");
 
@@ -1987,7 +1877,7 @@ describe("MultiComboBox general interaction", () => {
 			assert.equal(await popover.getProperty("open"), true, "Popover should not be open");
 			assert.strictEqual(await input.getValue(), "", "The value is not updated)");
 
-			groupItem = await popover.$("ui5-list").$("ui5-li-group").shadow$("ui5-li-group-header");
+			groupItem = (await getVisibleGroupItems(mcb))[0];
 
 			await groupItem.keys("ArrowUp");
 
@@ -1996,8 +1886,6 @@ describe("MultiComboBox general interaction", () => {
 		});
 
 		it("Should not select group headers", async () => {
-			await browser.url(`test/pages/MultiComboBox.html`);
-
 			const mcb = await browser.$("#mcb-grouping");
 			const input = await mcb.shadow$("#ui5-multi-combobox-input");
 
diff --git a/packages/main/test/specs/RadioButton.spec.js b/packages/main/test/specs/RadioButton.spec.js
index cf4116e1fd38..b5999caa6f4c 100644
--- a/packages/main/test/specs/RadioButton.spec.js
+++ b/packages/main/test/specs/RadioButton.spec.js
@@ -23,6 +23,7 @@ describe("Rendering", () => {
 
 		assert.notOk(await readOnlyRadioButtonRoot.getAttribute("aria-readonly"), "aria-readonly is not set to the root level");
 		assert.strictEqual(await readOnlyRadioButtonInput.getAttribute("readonly"), "true", "internal input is readonly");
+		assert.strictEqual(await readOnlyRadioButtonRoot.getAttribute("aria-disabled"), "true", "aria-disabled = true");
 	});
 });
 
@@ -87,6 +88,7 @@ describe("RadioButton general interaction", () => {
 		const field = await browser.$("#tabField");
 		const radioButtonPreviouslySelected = await browser.$("#groupRb1");
 		const radioButtonToBeSelected = await browser.$("#groupRb3");
+		const radioButtonToBeSelectedNext = await browser.$("#groupRbReadOnly");
 
 		await field.click();
 		await field.keys("Tab");
@@ -96,7 +98,14 @@ describe("RadioButton general interaction", () => {
 		assert.notOk(await radioButtonPreviouslySelected.getProperty("checked"), "Previously selected item has been de-selected.");
 		assert.ok(await radioButtonToBeSelected.getProperty("checked"), "Pressing ArrowRight selects the next (not disabled) radio in the group.");
 
-		await radioButtonToBeSelected.keys("Tab");
+		await radioButtonToBeSelected.keys("ArrowRight");
+		const activeElementId = await browser.$(await browser.getActiveElement()).getAttribute("id");
+
+		assert.ok(await radioButtonToBeSelected.getProperty("checked"), "Previously selected item is still selected");
+		assert.notOk(await radioButtonToBeSelectedNext.getProperty("checked"), "Read-only radio button is not selected.");
+		assert.ok(activeElementId === "groupRbReadOnly", " Focus is on the last radio button, which is read-only");
+
+		await radioButtonToBeSelectedNext.keys("Tab");
 	});
 
 	it("tests radio buttons selection within group with ARROW-LEFT key", async () => {
diff --git a/packages/main/test/specs/TableGrowing.spec.js b/packages/main/test/specs/TableGrowing.spec.js
index 415639cd5b4c..fdf17638bdde 100644
--- a/packages/main/test/specs/TableGrowing.spec.js
+++ b/packages/main/test/specs/TableGrowing.spec.js
@@ -231,43 +231,4 @@ describe('Table - Growing with Scroll', async () => {
 		await endRow.scrollIntoView();
 		assert.strictEqual(await loadMoreCounter.getProperty("value"), "2", "The load-more event is dispatched");
 	});
-
-	
 });
-
-describe('Table - Growing with Scroll (Edge Cases)', async () => {
-	before(async () => {
-		await browser.url(`test/pages/TableGrowing.html`);
-		await browser.setWindowSize(2000, 2000);
-
-		const tableGrowing = await browser.$("#growing");
-		await tableGrowing.setAttribute("type", "Scroll");
-	});
-
-	it('Check if growing button is rendered, when no scrollbar is visible', async () => {
-		const tableGrowing = await browser.$("#growing");
-
-		const table = await browser.$("#table0");
-
-		const growingButtonRow = await table.shadow$("#growing-row");
-		assert.ok(await growingButtonRow.isExisting(), "Growing Button Row exists");
-
-		const growingButtonCell = await table.shadow$("#growing-cell");
-		assert.ok(await growingButtonCell.isExisting(), "Growing Button Cell exists");
-
-		const growingButton = await tableGrowing.shadow$("#growing-button");
-		assert.ok(await growingButton.isExisting(), "Growing Button exists");
-
-		await growingButton.click();
-		assert.ok(await growingButtonRow.isExisting(), "Growing Button Row exists");
-		await growingButton.click();
-		assert.ok(await growingButtonRow.isExisting(), "Growing Button Row exists");
-		await growingButton.click();
-		assert.ok(await growingButtonRow.isExisting(), "Growing Button Row exists");
-
-		await growingButton.click();
-
-		assert.notOk(await growingButtonRow.isExisting(), "Growing Button Row is not rendered");
-		assert.notOk(await growingButtonCell.isExisting(), "Growing Button Cell is not rendered");
-	});
-});
\ No newline at end of file
diff --git a/packages/main/test/specs/Tokenizer.spec.js b/packages/main/test/specs/Tokenizer.spec.js
index 341ce4c763a6..d406b994179e 100644
--- a/packages/main/test/specs/Tokenizer.spec.js
+++ b/packages/main/test/specs/Tokenizer.spec.js
@@ -233,44 +233,45 @@ describe("Accessibility", () => {
 
 	it("should test aria-readonly attribute", async () => {
 		const tokenizer = await browser.$("#nmore-tokenizer");
-		const tokenizerContent = await tokenizer.shadow$(".ui5-tokenizer--content");
+		const tokenizerList = await tokenizer.shadow$(".ui5-tokenizer--list");
 		const readonlyTokenizer = await browser.$("#readonly-tokenizer");
-		const readonlyTokenizerContent = await readonlyTokenizer.shadow$(".ui5-tokenizer--content");
+		const readonlyTokenizerList = await readonlyTokenizer.shadow$(".ui5-tokenizer--list");
 
 		assert.notOk(await tokenizer.getAttribute("readonly"), "tokenizer should not be readonly");
-		assert.notOk(await tokenizerContent.getAttribute("aria-readonly"), "aria-readonly should not be set on tokenizer");
+		assert.notOk(await tokenizerList.getAttribute("aria-readonly"), "aria-readonly should not be set on tokenizer");
 
 		assert.ok(await readonlyTokenizer.getAttribute("readonly"), "tokenizer should be readonly");
-		assert.ok(await readonlyTokenizerContent.getAttribute("aria-readonly"), "aria-readonly should be set on disabled tokenizer");
+		assert.ok(await readonlyTokenizerList.getAttribute("aria-readonly"), "aria-readonly should be set on disabled tokenizer");
 	});
 
 	it("should test aria-disabled attribute", async () => {
 		const tokenizer = await browser.$("#nmore-tokenizer");
-		const tokenizerContent = await tokenizer.shadow$(".ui5-tokenizer--content");
+		const tokenizerList = await tokenizer.shadow$(".ui5-tokenizer--list");
+
 		const disabledTokenizer = await browser.$("#disabled-tokenizer");
-		const disabledTokenizerContent = await disabledTokenizer.shadow$(".ui5-tokenizer--content");
+		const disabledTokenizerList = await disabledTokenizer.shadow$(".ui5-tokenizer--list");
 
 		assert.notOk(await tokenizer.getAttribute("disabled"), "tokenizer should not be disabled");
-		assert.notOk(await tokenizerContent.getAttribute("aria-disabled"), "aria-disabled should not be set on tokenizer");
+		assert.notOk(await tokenizerList.getAttribute("aria-disabled"), "aria-disabled should not be set on tokenizer");
 
 		assert.ok(await disabledTokenizer.getAttribute("disabled"), "tokenizer should be disabled");
-		assert.ok(await disabledTokenizerContent.getAttribute("aria-disabled"), "aria-disabled should be set on disabled tokenizer");
+		assert.ok(await disabledTokenizerList.getAttribute("aria-disabled"), "aria-disabled should be set on disabled tokenizer");
 	});
 
 	it("should test tokenizer content aria attributes", async () => {
 		const tokenizer = await browser.$("#nmore-tokenizer");
-		const tokenizerContent = await tokenizer.shadow$(".ui5-tokenizer--content");
+		const tokenizerList = await tokenizer.shadow$(".ui5-tokenizer--list");
 		const expandedTokenizer = await browser.$("#expanded-tokenizer");
-		const expandedTokenizerContent = await expandedTokenizer.shadow$(".ui5-tokenizer--content");
+		const expandedTokenizerList = await expandedTokenizer.shadow$(".ui5-tokenizer--list");
 		const keys = [
 			"TOKENIZER_ARIA_LABEL",
 		];
 		const texts = await getResourceBundleTexts(keys);
 
-		assert.strictEqual(await tokenizerContent.getAttribute("role"), "listbox", "tokenizer content should have correct role=listbox");
-		assert.strictEqual(await tokenizerContent.getAttribute("aria-label"), texts.TOKENIZER_ARIA_LABEL, "tokenizer content should have correct aria-label");
-		assert.strictEqual(await expandedTokenizerContent.getAttribute("aria-label"), 'Test label', "tokenizer content should have correct aria-label when accesible name is set");
-		assert.strictEqual(await expandedTokenizerContent.getAttribute("aria-description"), texts.TOKENIZER_ARIA_LABEL, "tokenizer content should have correct aria-description when accesible name is set");
+		assert.strictEqual(await tokenizerList.getAttribute("role"), "listbox", "tokenizer content should have correct role=listbox");
+		assert.strictEqual(await tokenizerList.getAttribute("aria-label"), texts.TOKENIZER_ARIA_LABEL, "tokenizer content should have correct aria-label");
+		assert.strictEqual(await expandedTokenizerList.getAttribute("aria-label"), 'Test label', "tokenizer content should have correct aria-label when accesible name is set");
+		assert.strictEqual(await expandedTokenizerList.getAttribute("aria-description"), texts.TOKENIZER_ARIA_LABEL, "tokenizer content should have correct aria-description when accesible name is set");
 	});
 
 	it("should test nMore aria attributes", async () => {
diff --git a/packages/main/test/specs/Toolbar.spec.js b/packages/main/test/specs/Toolbar.spec.js
index 06b4842b085b..271e6f3e240e 100644
--- a/packages/main/test/specs/Toolbar.spec.js
+++ b/packages/main/test/specs/Toolbar.spec.js
@@ -72,6 +72,4 @@ describe("Toolbar general interaction", () => {
 		assert.strictEqual(await input.getProperty("value"), "1", "Button click event only called once");
 		await input.setAttribute("value", "0");
 	});
-
-
 });
diff --git a/packages/theming/CHANGELOG.md b/packages/theming/CHANGELOG.md
index ea87b7497382..0ced87d97f9a 100644
--- a/packages/theming/CHANGELOG.md
+++ b/packages/theming/CHANGELOG.md
@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-theming
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+**Note:** Version bump only for package @ui5/webcomponents-theming
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+**Note:** Version bump only for package @ui5/webcomponents-theming
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-theming
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-theming
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 **Note:** Version bump only for package @ui5/webcomponents-theming
diff --git a/packages/theming/package.json b/packages/theming/package.json
index 8c3ca6e18394..dc0d89308213 100644
--- a/packages/theming/package.json
+++ b/packages/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-theming",
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "description": "UI5 Web Components: webcomponents.theming",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -31,10 +31,10 @@
   },
   "dependencies": {
     "@sap-theming/theming-base-content": "11.17.1",
-    "@ui5/webcomponents-base": "2.4.0-rc.4"
+    "@ui5/webcomponents-base": "2.5.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.4.0-rc.4",
+    "@ui5/webcomponents-tools": "2.5.0-rc.2",
     "globby": "^13.1.1",
     "json-beautify": "^1.1.1",
     "nps": "^5.10.0",
diff --git a/packages/tools/CHANGELOG.md b/packages/tools/CHANGELOG.md
index e5363bb0b808..f28b4ff6239f 100644
--- a/packages/tools/CHANGELOG.md
+++ b/packages/tools/CHANGELOG.md
@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools
diff --git a/packages/tools/lib/cem/event.mjs b/packages/tools/lib/cem/event.mjs
index ee83381ebe3b..cfe39f37287b 100644
--- a/packages/tools/lib/cem/event.mjs
+++ b/packages/tools/lib/cem/event.mjs
@@ -104,7 +104,7 @@ function processEvent(ts, event, classNode, moduleDoc) {
 	result.description = description;
 	result._ui5Cancelable = eventCancelable !== undefined ? eventCancelable : false;
 	result._ui5allowPreventDefault = result._ui5Cancelable;
-	result._ui5Bubbles = eventBubbles !== undefined ? eventBubbles : true;
+	result._ui5Bubbles = eventBubbles !== undefined ? eventBubbles : false;
 
 	if (native) {
 		result.type = { text: "Event" };
diff --git a/packages/tools/package.json b/packages/tools/package.json
index 1728896e255a..b2b10d34c1e4 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
diff --git a/packages/website/CHANGELOG.md b/packages/website/CHANGELOG.md
index bcdb0d718b69..992b190be0ae 100644
--- a/packages/website/CHANGELOG.md
+++ b/packages/website/CHANGELOG.md
@@ -3,6 +3,61 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.1...v2.5.0-rc.2) (2024-11-28)
+
+
+### Features
+
+* **ui5-form:** add new `emptySpan` property ([#10194](https://github.com/SAP/ui5-webcomponents/issues/10194)) ([48b0cc8](https://github.com/SAP/ui5-webcomponents/commit/48b0cc89b36dd859dd07c17021eedf7a99375150)), closes [#9963](https://github.com/SAP/ui5-webcomponents/issues/9963)
+
+
+
+
+
+# [2.5.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.5.0-rc.0...v2.5.0-rc.1) (2024-11-21)
+
+**Note:** Version bump only for package @ui5/webcomponents-website
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.1-rc.0...v2.5.0-rc.0) (2024-11-14)
+
+
+### Bug Fixes
+
+* **ui5-dynamic-page:** move subheading slot outside the title wrapper ([#10163](https://github.com/SAP/ui5-webcomponents/issues/10163)) ([6466b8a](https://github.com/SAP/ui5-webcomponents/commit/6466b8ad7f73c85a5c105dea3c196f6bfb78f27a))
+
+
+### Features
+
+* **ui5-color-picker:** add simplified display mode ([#10153](https://github.com/SAP/ui5-webcomponents/issues/10153)) ([bf9c0d6](https://github.com/SAP/ui5-webcomponents/commit/bf9c0d653be5af5473a7b616f2c91803db46beb3)), closes [#9979](https://github.com/SAP/ui5-webcomponents/issues/9979)
+* **ui5-tokenizer:** enable multiline mode ([#9964](https://github.com/SAP/ui5-webcomponents/issues/9964)) ([1071746](https://github.com/SAP/ui5-webcomponents/commit/107174616b5b3b96c174160488eba18b9cdb9cae))
+
+
+
+
+
+## [2.4.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0...v2.4.1-rc.0) (2024-11-07)
+
+
+### Bug Fixes
+
+* **ui5-menu:** make close event non-bubbling ([#10133](https://github.com/SAP/ui5-webcomponents/issues/10133)) ([e7ccce9](https://github.com/SAP/ui5-webcomponents/commit/e7ccce968cab25a07837c41f36d94603c31e007e)), closes [#10041](https://github.com/SAP/ui5-webcomponents/issues/10041)
+
+
+
+
+
+# [2.4.0](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.4...v2.4.0) (2024-11-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-website
+
+
+
+
+
 # [2.4.0-rc.4](https://github.com/SAP/ui5-webcomponents/compare/v2.4.0-rc.3...v2.4.0-rc.4) (2024-10-31)
 
 
diff --git a/packages/website/build-scripts/local-cdn.mjs b/packages/website/build-scripts/local-cdn.mjs
index 06f7624b5f7b..d19fe86859cc 100644
--- a/packages/website/build-scripts/local-cdn.mjs
+++ b/packages/website/build-scripts/local-cdn.mjs
@@ -24,7 +24,7 @@ await Promise.all([
     cp("../localization/package.json", "local-cdn/local-cdn/localization/package.json"),
 
     cp("../../node_modules/@zxing/library/umd/index.min.js", "local-cdn/local-cdn/zxing/umd/index.min.js"),
-    cp("../../node_modules/@zxing/library/esm5/index.js", "local-cdn/local-cdn/zxing/esm5/index.js"),
+    cp("../../node_modules/@zxing/library/esm/index.js", "local-cdn/local-cdn/zxing/esm/index.js"),
 ]);
 
 const files = await readdir("local-cdn", {recursive: true, withFileTypes: true});
diff --git a/packages/website/docs/_components_pages/fiori/NavigationLayout/NavigationLayout.mdx b/packages/website/docs/_components_pages/fiori/NavigationLayout/NavigationLayout.mdx
index 1de4d9dac80c..c3ba0a51727c 100644
--- a/packages/website/docs/_components_pages/fiori/NavigationLayout/NavigationLayout.mdx
+++ b/packages/website/docs/_components_pages/fiori/NavigationLayout/NavigationLayout.mdx
@@ -1,3 +1,7 @@
+---
+sidebar_class_name: newComponentBadge
+---
+
 import Basic from "../../../_samples/fiori/NavigationLayout/Basic/Basic.md";
 
 <%COMPONENT_OVERVIEW%>
diff --git a/packages/website/docs/_components_pages/main/ColorPicker.mdx b/packages/website/docs/_components_pages/main/ColorPicker.mdx
index b62193f76f92..075124d82e11 100644
--- a/packages/website/docs/_components_pages/main/ColorPicker.mdx
+++ b/packages/website/docs/_components_pages/main/ColorPicker.mdx
@@ -3,10 +3,16 @@ slug: ../ColorPicker
 ---
 
 import Basic from "../../_samples/main/ColorPicker/Basic/Basic.md";
+import Simplified from "../../_samples/main/ColorPicker/Simplified/Simplified.md";
 
 <%COMPONENT_OVERVIEW%>
 
 ## Basic Sample
 <Basic />
 
-<%COMPONENT_METADATA%>
\ No newline at end of file
+<%COMPONENT_METADATA%>
+
+## More Samples
+
+### Simplified Picker
+<Simplified />
\ No newline at end of file
diff --git a/packages/website/docs/_components_pages/main/Form/Form.mdx b/packages/website/docs/_components_pages/main/Form/Form.mdx
index 1216bc9680fb..b0a6acfa2652 100644
--- a/packages/website/docs/_components_pages/main/Form/Form.mdx
+++ b/packages/website/docs/_components_pages/main/Form/Form.mdx
@@ -8,6 +8,7 @@ import Groups from "../../../_samples/main/Form/Groups/Groups.md";
 import Edit from "../../../_samples/main/Form/Edit/Edit.md";
 import Layout from "../../../_samples/main/Form/Layout/Layout.md";
 import LabelSpan from "../../../_samples/main/Form/LabelSpan/LabelSpan.md";
+import EmptySpan from "../../../_samples/main/Form/EmptySpan/EmptySpan.md";
 import LabelsOnTop from "../../../_samples/main/Form/LabelsOnTop/LabelsOnTop.md";
 import GroupColumnSpan from "../../../_samples/main/Form/GroupColumnSpan/GroupColumnSpan.md";
 import HeaderTextWrapping from "../../../_samples/main/Form/HeaderTextWrapping/HeaderTextWrapping.md";
@@ -44,7 +45,9 @@ You can define groups via the **ui5-form-group** web component.
 
 
 ### Label Span
-Use the Form#**labelSpan** property to define the width proportion of the labels and fields of a FormItem by breakpoint.
+Use the **labelSpan** property to define the width proportion of the labels and fields of a FormItem by breakpoint.
+
+For example:
 
 - S12 M4 L4 XL4 - the label takes 1/3 in M, L, XL
 - S12 M6 L6 XL6 - the label takes 1/2 in M, L, XL
@@ -53,6 +56,16 @@ Use the Form#**labelSpan** property to define the width proportion of the labels
 <LabelSpan />
 
 
+### Empty Span
+Use the **emptySpan** property to define the empty space at the FormItem's end.
+
+For example:
+
+- emptySpan="S1 M1 L1 XL1" + labelSpan="S4 M4 L4 XL4" will define "4 | 7 | 1" proportion between the label, the field and the empty space
+- emptySpan="S3 M3 L3 XL3" + labelSpan="S4 M4 L4 XL4" will define "4 | 5 | 3" proportion between the label, the field and the empty space
+
+<EmptySpan />
+
 
 ### Labels On Top
 Force labels always on top Form#**labelSpan=S12 M12 L12 XL12**.
diff --git a/packages/website/docs/_components_pages/main/Tokenizer.mdx b/packages/website/docs/_components_pages/main/Tokenizer.mdx
index a39a0c15f524..82a521bcdc38 100644
--- a/packages/website/docs/_components_pages/main/Tokenizer.mdx
+++ b/packages/website/docs/_components_pages/main/Tokenizer.mdx
@@ -4,10 +4,19 @@ sidebar_class_name: newComponentBadge
 ---
 
 import Basic from "../../_samples/main/Tokenizer/Basic/Basic.md";
+import MultiLine from "../../_samples/main/Tokenizer/MultiLine/Basic.md";
 
 <%COMPONENT_OVERVIEW%>
 
 ## Basic Sample
 <Basic />
 
+## More Samples
+
+### Multi-line and Clear All
+With multiLine enabled, tokens are displayed across multiple lines for improved readability.
+The showClearAll option adds a convenient 'Clear All' button, allowing users to remove all tokens at once.
+
+<MultiLine />
+
 <%COMPONENT_METADATA%>
diff --git a/packages/website/docs/_samples/fiori/DynamicPage/Basic/main.css b/packages/website/docs/_samples/fiori/DynamicPage/Basic/main.css
index a69b41156bab..889ecc1fa56c 100644
--- a/packages/website/docs/_samples/fiori/DynamicPage/Basic/main.css
+++ b/packages/website/docs/_samples/fiori/DynamicPage/Basic/main.css
@@ -61,6 +61,7 @@
 }
 .snapped-title-heading [ui5-avatar] {
     position: absolute;
+    top: 0;
 }
 .snapped-title-heading [ui5-title] {
     font-family: var(--sapObjectHeader_Title_FontFamily);
diff --git a/packages/website/docs/_samples/main/ColorPicker/Simplified/Simplified.md b/packages/website/docs/_samples/main/ColorPicker/Simplified/Simplified.md
new file mode 100644
index 000000000000..17798ecc59ab
--- /dev/null
+++ b/packages/website/docs/_samples/main/ColorPicker/Simplified/Simplified.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/main/ColorPicker/Simplified/main.js b/packages/website/docs/_samples/main/ColorPicker/Simplified/main.js
new file mode 100644
index 000000000000..cf4af63d9e43
--- /dev/null
+++ b/packages/website/docs/_samples/main/ColorPicker/Simplified/main.js
@@ -0,0 +1 @@
+import "@ui5/webcomponents/dist/ColorPicker.js";
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/ColorPicker/Simplified/sample.html b/packages/website/docs/_samples/main/ColorPicker/Simplified/sample.html
new file mode 100644
index 000000000000..1d89501b4cbf
--- /dev/null
+++ b/packages/website/docs/_samples/main/ColorPicker/Simplified/sample.html
@@ -0,0 +1,20 @@
+<!-- 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)">
+    <!-- playground-fold-end -->
+
+    <ui5-color-picker display-mode="Simplified" value="#F6A192">Picker</ui5-color-picker>
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
diff --git a/packages/website/docs/_samples/main/Form/EmptySpan/EmptySpan.md b/packages/website/docs/_samples/main/Form/EmptySpan/EmptySpan.md
new file mode 100644
index 000000000000..ef4652628b4d
--- /dev/null
+++ b/packages/website/docs/_samples/main/Form/EmptySpan/EmptySpan.md
@@ -0,0 +1,5 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+import css from '!!raw-loader!./main.css';
+
+<Editor html={html} js={js} css={css} />
diff --git a/packages/website/docs/_samples/main/Form/EmptySpan/main.css b/packages/website/docs/_samples/main/Form/EmptySpan/main.css
new file mode 100644
index 000000000000..42918f8ede52
--- /dev/null
+++ b/packages/website/docs/_samples/main/Form/EmptySpan/main.css
@@ -0,0 +1,6 @@
+ui5-form-item::part(layout) {
+	background: var(--sapHoverColor);
+}
+ui5-form-item::part(content) {
+	background: var(--sapAvatar_1_Background);
+}
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/Form/EmptySpan/main.js b/packages/website/docs/_samples/main/Form/EmptySpan/main.js
new file mode 100644
index 000000000000..d2809c970324
--- /dev/null
+++ b/packages/website/docs/_samples/main/Form/EmptySpan/main.js
@@ -0,0 +1,32 @@
+import "@ui5/webcomponents/dist/Form.js";
+import "@ui5/webcomponents/dist/FormItem.js";
+
+
+// The following code is required only for the sample
+import "@ui5/webcomponents/dist/Label.js";
+import "@ui5/webcomponents/dist/Text.js";
+import "@ui5/webcomponents/dist/Slider.js";
+import "@ui5/webcomponents/dist/Input.js";
+import "@ui5/webcomponents/dist/Select.js";
+import "@ui5/webcomponents/dist/Option.js";
+
+const slider = document.getElementById("slider");
+const txtLayout = document.getElementById("txtLayout");
+const container = document.getElementById("container");
+
+slider.addEventListener("ui5-input", () => {
+	const width = (slider.value / 100 * 1500);
+	container.style.width = `${width}px`;
+	txtLayout.innerHTML = getLayoutByWidth(width);
+});
+
+const getLayoutByWidth = (width) => {
+	if (width > 599 && width <= 1023) {
+		return "M";
+	} else if (width >= 1024 && width <= 1439) {
+		return "L"
+	} else if (width >= 1440) {
+		return "XL"
+	}
+	return "S";
+};
diff --git a/packages/website/docs/_samples/main/Form/EmptySpan/sample.html b/packages/website/docs/_samples/main/Form/EmptySpan/sample.html
new file mode 100644
index 000000000000..a15c4cfd7923
--- /dev/null
+++ b/packages/website/docs/_samples/main/Form/EmptySpan/sample.html
@@ -0,0 +1,104 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Form Label Span Sample</title>
+    <link rel="stylesheet" href="./main.css">
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <!-- playground-fold-end -->
+
+    <ui5-label show-colon>Page Size</ui5-label><ui5-text id="txtLayout">L</ui5-text>
+    <ui5-slider id="slider" value="85"></ui5-slider>
+
+    <div id="container" style="max-width: 1500px; width: 1250px; overflow-x: auto">
+
+		<ui5-form  header-text="Empty Span: S1 M1 L1 XL1" label-span="S4 M4 L4 XL4" empty-span="S1 M1 L1 XL1">
+			<ui5-form-item>
+				<ui5-label for="nameInp" slot="labelContent">Name:</ui5-label>
+				<ui5-input value="Red Point Stores" id="nameInp"></ui5-input>
+			</ui5-form-item>
+			
+			<ui5-form-item>
+				<ui5-label id="countryLbl" for="countrySel" slot="labelContent">Country:</ui5-label>
+				<ui5-select id="countrySel" accessible-name-ref="countryLbl">
+					<ui5-option>Australia</ui5-option>
+					<ui5-option selected>Germany</ui5-option>
+					<ui5-option>England</ui5-option>
+				</ui5-select>
+			</ui5-form-item>
+
+			<ui5-form-item>
+				<ui5-label id="cityLbl" for="cityInp" slot="labelContent">ZIP Code/City:</ui5-label>
+				<ui5-input id="cityInp" value="411" accessible-name-ref="cityLbl"></ui5-input>
+				<ui5-input value="Maintown" accessible-name-ref="cityLbl"></ui5-input>
+			</ui5-form-item>
+
+			<ui5-form-item>
+				<ui5-label for="wsInp" slot="labelContent">WebSite:</ui5-label>
+				<ui5-input value="sap.com" id="wsInp"></ui5-input>
+			</ui5-form-item>
+
+			<ui5-form-item>
+				<ui5-label id="streetLbl" for="streetInp" slot="labelContent">Street:</ui5-label>
+				<ui5-input id="streetInp" value="Main St" accessible-name-ref="streetLbl"></ui5-input>
+				<ui5-input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl"></ui5-input>
+			</ui5-form-item>
+
+			<ui5-form-item>
+				<ui5-label for="delInp" slot="labelContent">Delivery address:</ui5-label>
+				<ui5-input value="Newtown" id="delInp"></ui5-input>
+			</ui5-form-item>
+		</ui5-form>
+
+		<br><br>
+
+		<ui5-form  header-text="Empty Span: S3 M3 L3 XL3" label-span="S4 M4 L4 XL4"  empty-span="S3 M3 L3 XL3">
+			<ui5-form-item>
+				<ui5-label for="nameInp" slot="labelContent">Name:</ui5-label>
+				<ui5-input value="Red Point Stores" id="nameInp"></ui5-input>
+			</ui5-form-item>
+			
+			<ui5-form-item>
+				<ui5-label id="countryLbl" for="countrySel" slot="labelContent">Country:</ui5-label>
+				<ui5-select id="countrySel" accessible-name-ref="countryLbl">
+					<ui5-option>Australia</ui5-option>
+					<ui5-option selected>Germany</ui5-option>
+					<ui5-option>England</ui5-option>
+				</ui5-select>
+			</ui5-form-item>
+
+			<ui5-form-item>
+				<ui5-label id="cityLbl" for="cityInp" slot="labelContent">ZIP Code/City:</ui5-label>
+				<ui5-input id="cityInp" value="411" accessible-name-ref="cityLbl"></ui5-input>
+				<ui5-input value="Maintown" accessible-name-ref="cityLbl"></ui5-input>
+			</ui5-form-item>
+
+			<ui5-form-item>
+				<ui5-label for="wsInp" slot="labelContent">WebSite:</ui5-label>
+				<ui5-input value="sap.com" id="wsInp"></ui5-input>
+			</ui5-form-item>
+
+			<ui5-form-item>
+				<ui5-label id="streetLbl" for="streetInp" slot="labelContent">Street:</ui5-label>
+				<ui5-input id="streetInp" value="Main St" accessible-name-ref="streetLbl"></ui5-input>
+				<ui5-input id="streetNumberInp" value="1618" accessible-name-ref="streetLbl"></ui5-input>
+			</ui5-form-item>
+
+			<ui5-form-item>
+				<ui5-label for="delInp" slot="labelContent">Delivery address:</ui5-label>
+				<ui5-input value="Newtown" id="delInp"></ui5-input>
+			</ui5-form-item>
+		</ui5-form>
+	</div>
+
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->
diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md b/packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md
index 17798ecc59ab..ef4652628b4d 100644
--- a/packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md
+++ b/packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md
@@ -1,4 +1,5 @@
 import html from '!!raw-loader!./sample.html';
 import js from '!!raw-loader!./main.js';
+import css from '!!raw-loader!./main.css';
 
-<Editor html={html} js={js} />
+<Editor html={html} js={js} css={css} />
diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm/main.css b/packages/website/docs/_samples/main/Form/FreeStyleForm/main.css
new file mode 100644
index 000000000000..41c3fe254384
--- /dev/null
+++ b/packages/website/docs/_samples/main/Form/FreeStyleForm/main.css
@@ -0,0 +1,13 @@
+:root {
+	--my-margin: -0.6875rem;
+}
+.ui5-content-density-compact {
+	--my-margin: -0.5rem;
+}
+
+.margin--density-aware {
+	margin-inline-start: var(--my-margin);
+}
+.margin--fixed {
+	margin-inline-start: -0.5rem;
+}
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html b/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html
index 4aae25886b75..c8ea0fdf29ce 100644
--- a/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html
+++ b/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html
@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sample</title>
+    <link rel="stylesheet" href="./main.css">
 </head>
 
 <body style="background-color: var(--sapBackgroundColor)">
@@ -59,13 +60,14 @@
 
             <ui5-form-group header-text="Group2 (Cb, Rb, Switch)">
                 <ui5-form-item>
-                    <ui5-checkbox text="Here comes your checkbox text"></ui5-checkbox>
+                    <ui5-label required slot="labelContent" for="rbGroup">Label:</ui5-label>
+                    <ui5-checkbox class="margin--density-aware" text="Here comes your checkbox text"></ui5-checkbox>
                 </ui5-form-item>
 
                 <ui5-form-item>
                     <ui5-label required slot="labelContent" for="rbGroup">Label:</ui5-label>
 
-                    <div role="radiogroup">
+                    <div role="radiogroup" class="margin--density-aware">
                         <ui5-radio-button id="rbGroup" text="With Text" name="test"></ui5-radio-button>
                         <ui5-radio-button text="With Tex" name="test"></ui5-radio-button>
                     </div>
@@ -73,7 +75,7 @@
 
                 <ui5-form-item>
                     <ui5-label required slot="labelContent" for="swGroup">Label:</ui5-label>
-                    <ui5-switch id="swGrou" checked></ui5-switch>
+                    <ui5-switch id="swGrou" class="margin--fixed" checked></ui5-switch>
                 </ui5-form-item>
             </ui5-form-group>
 
diff --git a/packages/website/docs/_samples/main/Form/HeaderTextWrapping/sample.html b/packages/website/docs/_samples/main/Form/HeaderTextWrapping/sample.html
index b2225aa4c488..cb8c19c8bae6 100644
--- a/packages/website/docs/_samples/main/Form/HeaderTextWrapping/sample.html
+++ b/packages/website/docs/_samples/main/Form/HeaderTextWrapping/sample.html
@@ -10,9 +10,6 @@
 
 <body style="background-color: var(--sapBackgroundColor)">
     <!-- playground-fold-end -->
-    <!-- <ui5-label show-colon>Form Layout</ui5-label><ui5-text>S1 M1 L2 XL3</ui5-text></br> -->
-    <!-- <ui5-label show-colon>Page Size</ui5-label><ui5-text id="txtLayout">L</ui5-text> -->
-    <!-- <ui5-slider id="slider" value="85"></ui5-slider> -->
 
     <div id="container" style="max-width: 1500px; width: 300px; overflow-x: auto">
         <ui5-form class="addressForm" header-text="A very long header title for the form and more">
diff --git a/packages/website/docs/_samples/main/Tokenizer/MultiLine/Basic.md b/packages/website/docs/_samples/main/Tokenizer/MultiLine/Basic.md
new file mode 100644
index 000000000000..ffccbf6dd13e
--- /dev/null
+++ b/packages/website/docs/_samples/main/Tokenizer/MultiLine/Basic.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/Tokenizer/MultiLine/main.js b/packages/website/docs/_samples/main/Tokenizer/MultiLine/main.js
new file mode 100644
index 000000000000..e7554d001aac
--- /dev/null
+++ b/packages/website/docs/_samples/main/Tokenizer/MultiLine/main.js
@@ -0,0 +1,13 @@
+import "@ui5/webcomponents/dist/Token.js";
+import "@ui5/webcomponents/dist/Tokenizer.js";
+
+const clearAllTokenizer = document.getElementById('clear-all');
+
+
+clearAllTokenizer.addEventListener("ui5-token-delete", event => {
+    const tokens = event.detail?.tokens;
+
+    if (tokens) {
+        tokens.forEach(token => token.remove());
+    }
+});
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/Tokenizer/MultiLine/sample.html b/packages/website/docs/_samples/main/Tokenizer/MultiLine/sample.html
new file mode 100644
index 000000000000..3dd006c60105
--- /dev/null
+++ b/packages/website/docs/_samples/main/Tokenizer/MultiLine/sample.html
@@ -0,0 +1,31 @@
+<!-- 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: 300px;">
+<!-- playground-fold-end -->
+
+<ui5-tokenizer id='clear-all' show-clear-all multi-line style="width: 320px;">
+    <ui5-token text="Andora"></ui5-token>
+    <ui5-token text="Bulgaria"></ui5-token>
+    <ui5-token text="Canada"></ui5-token>
+    <ui5-token text="Denmark"></ui5-token>
+    <ui5-token text="Estonia"></ui5-token>
+    <ui5-token text="Finland"></ui5-token>
+    <ui5-token text="Germany"></ui5-token>
+    <ui5-token text="Hungary"></ui5-token>
+    <ui5-token text="Ireland"></ui5-token>
+    <ui5-token text="Japan"></ui5-token>
+    <ui5-token text="Korea"></ui5-token>
+    <ui5-token text="Latvia"></ui5-token>
+</ui5-tokenizer>
+<!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+</html>
+<!-- playground-fold-end -->
+
diff --git a/packages/website/docs/_samples/patterns/AIAcknowledgement/Basic/sample.html b/packages/website/docs/_samples/patterns/AIAcknowledgement/Basic/sample.html
index 02f989aace43..b574c6a7919d 100644
--- a/packages/website/docs/_samples/patterns/AIAcknowledgement/Basic/sample.html
+++ b/packages/website/docs/_samples/patterns/AIAcknowledgement/Basic/sample.html
@@ -11,7 +11,7 @@
 	<ui5-dialog id="dialog" state="Information" header-text="Information">
 		<br>
 		<ui5-text>
-			SAP CX AI Toolkit now provides embedded AI services. For more information, see the <ui5-link href="https://www.sap.com" target="_blank">SAP Help Portal.</ui5-link>
+			[ &lt;Application Help&gt; ] now provides embedded AI ("Artificial Intelligence") services. For more information, see <ui5-link href="https://www.sap.com" target="_blank">&lt;link&gt;</ui5-link>.
 		</ui5-text>
 		<br>
 		<ui5-title level="H5">Disclaimer</ui5-title>
@@ -19,8 +19,9 @@
 		<ui5-text>Artificial Intelligence (AI) generates results based on multiple sources. Outputs may contain errors and inaccuracies. Consider reviewing all generated results and adjust as necessary.</ui5-text>
 		<br>
 		<ui5-checkbox style="margin-inline-start: -0.625rem;" text="Don't show this message again"></ui5-checkbox>
-		<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; align-items: center">
+		<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; align-items: center; gap: 0.25rem;">
 			<ui5-button design="Emphasized" class="dialogCloser">OK</ui5-button>
+			<ui5-button class="dialogCloser">Cancel</ui5-button>
 		</div>
 	</ui5-dialog>
 
diff --git a/packages/website/docs/_samples/patterns/AIGuidedPrompt/Dialog/main.js b/packages/website/docs/_samples/patterns/AIGuidedPrompt/Dialog/main.js
index cc23c29159ae..27b2227e0686 100644
--- a/packages/website/docs/_samples/patterns/AIGuidedPrompt/Dialog/main.js
+++ b/packages/website/docs/_samples/patterns/AIGuidedPrompt/Dialog/main.js
@@ -51,8 +51,8 @@ let options = {
 let text;
 let dialogGenerationId;
 
-function startGeneration() {
-	console.warn("startGeneration");
+function startGenerating() {
+	console.warn("startGenerating");
 	dialogOutput.value = "";
 	text = texts[options.structure][options.language][options.toneOfVoice];
 	let generatedWordIndex = 0;
@@ -60,7 +60,7 @@ function startGeneration() {
 	const words = text.split(" ");
 	const maxWordIndex = words.length - 1;
 	if (generatedWordIndex > maxWordIndex) {
-		stopGeneration(generationId);
+		stopGenerating(generationId);
 		aiDialogButton.state = "revise";
 		openDialogButton.innerText = "Revise";
 		closeDialogButton.disabled = false;
@@ -73,8 +73,8 @@ function startGeneration() {
 	return generationId;
 }
 
-function stopGeneration(generationId) {
-	console.warn("stopGeneration");
+function stopGenerating(generationId) {
+	console.warn("stopGenerating");
 	closeDialogButton.disabled = false;
 	clearTimeout(generationId);
 }
@@ -88,24 +88,24 @@ function aiDialogButtonClickHandler(evt) {
 	switch (button.state) {
 	case "":
 	case "generate":
-		startGenerationFromDialog();
+		startGeneratingFromDialog();
 		break;
 	case "revise":
-		startGenerationFromDialog();
+		startGeneratingFromDialog();
 		break;
 	case "generating":
 		button.state = "generate";
 		openDialogButton.innerText = "Generate";
 		closeDialogButton.disabled = false;
-		stopGeneration(dialogGenerationId, closeDialogButton);
+		stopGenerating(dialogGenerationId, closeDialogButton);
 		break;
 	}
 }
 
-function startGenerationFromDialog() {
+function startGeneratingFromDialog() {
 	aiDialogButton.state = "generating";
 	closeDialogButton.disabled = true;
-	dialogGenerationId = startGeneration();
+	dialogGenerationId = startGenerating();
 }
 
 function openDialog() {
diff --git a/packages/website/docs/_samples/patterns/AIGuidedPrompt/DynamicSideContent/main.css b/packages/website/docs/_samples/patterns/AIGuidedPrompt/DynamicSideContent/main.css
index 1a10b01a8539..a72442d42dc3 100644
--- a/packages/website/docs/_samples/patterns/AIGuidedPrompt/DynamicSideContent/main.css
+++ b/packages/website/docs/_samples/patterns/AIGuidedPrompt/DynamicSideContent/main.css
@@ -43,6 +43,7 @@
 
 [ui5-dynamic-side-content] .guidedPromptForm {
 	margin-bottom: 1rem;
+	padding: 0 1rem;
 }
 
 .hidden {
diff --git a/packages/website/docs/_samples/patterns/AIGuidedPrompt/DynamicSideContent/main.js b/packages/website/docs/_samples/patterns/AIGuidedPrompt/DynamicSideContent/main.js
index 5145f90897ea..43bdd5dbd48a 100644
--- a/packages/website/docs/_samples/patterns/AIGuidedPrompt/DynamicSideContent/main.js
+++ b/packages/website/docs/_samples/patterns/AIGuidedPrompt/DynamicSideContent/main.js
@@ -50,8 +50,8 @@ let options = {
 let text;
 let sideContentGenerationId;
 
-function startGeneration() {
-	console.warn('startGeneration');
+function startGenerating() {
+	console.warn('startGenerating');
 	output.value = '';
 	text = texts[options.structure][options.language][options.toneOfVoice];
 	let generatedWordIndex = 0;
@@ -61,7 +61,7 @@ function startGeneration() {
 		const maxWordIndex = words.length - 1;
 		
 		if (generatedWordIndex > maxWordIndex) {
-			stopGeneration(generationId);
+			stopGenerating(generationId);
 			aiSideContentButton.state = 'revise';
 			openSideContentButton.innerText = 'Revise';
 			closeSideContentButton.disabled = false;
@@ -73,8 +73,8 @@ function startGeneration() {
 	return generationId;
 }
 
-function stopGeneration(generationId) {
-	console.warn('stopGeneration');
+function stopGenerating(generationId) {
+	console.warn('stopGenerating');
 	closeSideContentButton.disabled = false;
 	clearTimeout(generationId);
 }
@@ -88,23 +88,23 @@ function aiSideContentButtonClickHandler(evt) {
 	switch (button.state) {
 	case '':
 	case 'generate':
-		startGenerationFromSideContent(button);
+		startGeneratingFromSideContent(button);
 		break;
 	case 'revise':
-		startGenerationFromSideContent(button);
+		startGeneratingFromSideContent(button);
 		break;
 	case 'generating':
 		button.state = 'generate';
 		openSideContentButton.innerText = 'Generate';
-		stopGeneration(sideContentGenerationId);
+		stopGenerating(sideContentGenerationId);
 		break;
 	}
 }
 
-function startGenerationFromSideContent(button) {
+function startGeneratingFromSideContent(button) {
 	button.state = 'generating';
 	closeSideContentButton.disabled = true;
-	sideContentGenerationId = startGeneration();
+	sideContentGenerationId = startGenerating();
 }
 
 function openSideContent() {
diff --git a/packages/website/docs/_samples/patterns/AIGuidedPrompt/DynamicSideContent/sample.html b/packages/website/docs/_samples/patterns/AIGuidedPrompt/DynamicSideContent/sample.html
index e01a8a2208a0..4f087c3a8ab6 100644
--- a/packages/website/docs/_samples/patterns/AIGuidedPrompt/DynamicSideContent/sample.html
+++ b/packages/website/docs/_samples/patterns/AIGuidedPrompt/DynamicSideContent/sample.html
@@ -37,7 +37,7 @@
 		
 			<div id="sideContent" slot="sideContent">
 				<ui5-bar>
-				<ui5-title level="H6">Improve Text</ui5-title>
+				<ui5-title level="H6" slot="startContent">Improve Text</ui5-title>
 				<ui5-button id="closeSideContentButton" slot="endContent"
 					>Close</ui5-button
 				>
@@ -51,7 +51,7 @@
 						</ui5-select>
 					</div>
 					<div class="guidedPromptFormGroup">
-						<ui5-label>Length:</ui5-label>
+						<ui5-label>Choose the length:</ui5-label>
 						<ui5-range-slider
 						min="50"
 						max="150"
diff --git a/packages/website/docs/_samples/patterns/AIGuidedPrompt/Popover/main.js b/packages/website/docs/_samples/patterns/AIGuidedPrompt/Popover/main.js
index 21235dab33e4..a68f0528d8c2 100644
--- a/packages/website/docs/_samples/patterns/AIGuidedPrompt/Popover/main.js
+++ b/packages/website/docs/_samples/patterns/AIGuidedPrompt/Popover/main.js
@@ -48,8 +48,8 @@ let options = {
 let text;
 let popoverGenerationId;
 
-function startGeneration() {
-	console.warn("startGeneration");
+function startGenerating() {
+	console.warn("startGenerating");
 	output.value = "";
 	text = texts[options.structure][options.language][options.toneOfVoice];
 	sendButton.disabled = true;
@@ -61,7 +61,7 @@ function startGeneration() {
 		const maxWordIndex = words.length - 1;
 
 		if (generatedWordIndex > maxWordIndex) {
-			stopGeneration(generationId);
+			stopGenerating(generationId);
 			aiButton.state = "revise";
 			sendButton.disabled = false;
 			return;
@@ -72,8 +72,8 @@ function startGeneration() {
 	return generationId;
 }
 
-function stopGeneration(generationId) {
-	console.warn("stopGeneration");
+function stopGenerating(generationId) {
+	console.warn("stopGenerating");
 	clearTimeout(generationId);
 }
 
@@ -87,7 +87,7 @@ function aiButtonClickHandler(evt) {
 		case "generating":
 			button.state = "generate";
 			sendButton.disabled = false;
-			stopGeneration(popoverGenerationId);
+			stopGenerating(popoverGenerationId);
 			break;
 		case "revise":
 			openPopover();
@@ -97,7 +97,7 @@ function aiButtonClickHandler(evt) {
 
 function applyButtonClickHandler(evt) {
 	aiButton.state = "generating";
-	popoverGenerationId = startGeneration();
+	popoverGenerationId = startGenerating();
 	closePopover();
 }
 
diff --git a/packages/website/docs/components/patterns/AI CustomPrompt/Level 4/main.js b/packages/website/docs/components/patterns/AI CustomPrompt/Level 4/main.js
index 391e37e34d44..19ea6b4c9a4a 100644
--- a/packages/website/docs/components/patterns/AI CustomPrompt/Level 4/main.js	
+++ b/packages/website/docs/components/patterns/AI CustomPrompt/Level 4/main.js	
@@ -65,7 +65,7 @@ myAiButtonIconOnly.addEventListener("click", aiButtonClickHandler);
 promptInput.addEventListener("ui5-change", function(evt) {
 	promptCounter++;
 	promptCount.textContent = promptCounter;
-	responseTextArea.value = "your response ot query " + evt.target.value + " is that.";
+	responseTextArea.value = "your response to query " + evt.target.value + " is that.";
 })
 
 menu.addEventListener("item-click", function(evt) {
diff --git a/packages/website/docs/components/patterns/AI QuickPrompt/main.js b/packages/website/docs/components/patterns/AI QuickPrompt/main.js
index cb68b08cf695..85a5605f4fdb 100644
--- a/packages/website/docs/components/patterns/AI QuickPrompt/main.js	
+++ b/packages/website/docs/components/patterns/AI QuickPrompt/main.js	
@@ -111,7 +111,7 @@ menu1.addEventListener("item-click", function (e) {
 		case "Clear Error":
 			clearValueState(output);
 			break;
-		case "Fix Spelling & Grammar":
+		case "Fix Spelling and Grammar":
 			fixSpellingAndGrammar(button, output);
 			break;
 		case "Generate Error":
@@ -126,7 +126,7 @@ menu1.addEventListener("item-click", function (e) {
 		case "Rephrase":
 			startTextGeneration(button, "reviseGenerating", predefinedTextsRephrased);
 			break;
-		case "Summarise":
+		case "Summarize":
 			startTextGeneration(button, "reviseGenerating", predefinedTextsSummarized);
 			break;
 		case "Bulgarian":
@@ -166,7 +166,7 @@ function setNegativeValueState(output) {
 	output.valueState = "Negative";
 	const div = document.createElement("div");
 	div.setAttribute("slot", "valueStateMessage");
-	div.textContent = "Spelling or grammar issues found, please try again!";
+	div.textContent = "Something went wrong during the generation process. Please try again.";
 
 	if (!output.querySelector("[slot='valueStateMessage']")) {
 		output.appendChild(div);
diff --git a/packages/website/docs/components/patterns/AI QuickPrompt/sample.html b/packages/website/docs/components/patterns/AI QuickPrompt/sample.html
index 7ffd9f2fb6e0..415f17258a93 100644
--- a/packages/website/docs/components/patterns/AI QuickPrompt/sample.html	
+++ b/packages/website/docs/components/patterns/AI QuickPrompt/sample.html	
@@ -42,12 +42,12 @@
 	<ui5-menu id="menu1">
 		<ui5-menu-item text="Regenerate"></ui5-menu-item>
 		<ui5-menu-separator></ui5-menu-separator>
-		<ui5-menu-item text="Fix Spelling & Grammar"></ui5-menu-item>
+		<ui5-menu-item text="Fix Spelling and Grammar"></ui5-menu-item>
 		<ui5-menu-item text="Rewrite Text">
 			<ui5-menu-item text="Simplify"></ui5-menu-item>
 			<ui5-menu-item text="Expand"></ui5-menu-item>
 			<ui5-menu-item text="Rephrase"></ui5-menu-item>
-			<ui5-menu-item text="Summarise"></ui5-menu-item>
+			<ui5-menu-item text="Summarize"></ui5-menu-item>
 		</ui5-menu-item>
 		<ui5-menu-item text="Make Bulleted List"></ui5-menu-item>
 		<ui5-menu-item text="Translate">
diff --git a/packages/website/package.json b/packages/website/package.json
index 4750710f08b9..4fd21b141f6c 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-website",
-  "version": "2.4.0-rc.4",
+  "version": "2.5.0-rc.2",
   "private": true,
   "scripts": {
     "generate-local-cdn": "rimraf ./local-cdn && node ./build-scripts/local-cdn.mjs",
diff --git a/yarn.lock b/yarn.lock
index c68e6f367ea1..1371888cd24a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4976,12 +4976,12 @@
   dependencies:
     argparse "^2.0.1"
 
-"@zxing/library@^0.17.1":
-  version "0.17.1"
-  resolved "https://registry.yarnpkg.com/@zxing/library/-/library-0.17.1.tgz#4c82bf401391c2b79bfbab0a6b1143da6d8feb1a"
-  integrity sha512-RuiBZuteGaFXCle/b0X+g3peN8UpDc3pGe/J7hZBzKWaMZLbjensR7ja3vy47xWhXU4e8MICGqegPMxc2V2sow==
+"@zxing/library@^0.21.3":
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/@zxing/library/-/library-0.21.3.tgz#0a4cb777701884131832b05922d7e88ef1b87ab4"
+  integrity sha512-hZHqFe2JyH/ZxviJZosZjV+2s6EDSY0O24R+FQmlWZBZXP9IqMo7S3nb3+2LBWxodJQkSurdQGnqE7KXqrYgow==
   dependencies:
-    ts-custom-error "^3.0.0"
+    ts-custom-error "^3.2.1"
   optionalDependencies:
     "@zxing/text-encoding" "~0.9.0"
 
@@ -6292,10 +6292,10 @@ chrome-trace-event@^1.0.2:
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
   integrity sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==
 
-chromedriver@^129.0.0:
-  version "129.0.4"
-  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-129.0.4.tgz#64e598061b74f0f65fae605242327af84ebbfd28"
-  integrity sha512-j5I55cQwodFJUaYa1tWUmj2ss9KcPRBWmUa5Qonq3X8kqv2ASPyTboFYb4YB/YLztkYTUUw2E43txXw0wYzT/A==
+chromedriver@^131.0.0:
+  version "131.0.0"
+  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-131.0.0.tgz#08bbc6d9fcd1c42abfe70ac7e3412fba96f44723"
+  integrity sha512-ukYmdCox2eRsjpCYUB4AOLV1fSfWQ1ZPfcUc0PIUWZKoyjyXKEl8i4DJ14bcNzNbEvaVx2Z2pnx/nLK2CM+ruQ==
   dependencies:
     "@testim/chrome-version" "^1.1.4"
     axios "^1.7.4"
@@ -17098,7 +17098,7 @@ ts-api-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.0.3.tgz#f12c1c781d04427313dbac808f453f050e54a331"
   integrity sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==
 
-ts-custom-error@^3.0.0:
+ts-custom-error@^3.2.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/ts-custom-error/-/ts-custom-error-3.3.1.tgz#8bd3c8fc6b8dc8e1cb329267c45200f1e17a65d1"
   integrity sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==