From e4baa19b2a2a82f129ad6ee5079f6c7b9c70015f Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 7 May 2025 10:45:34 +0200
Subject: [PATCH 01/17] update deps

---
 package.json                           |  12 +-
 packages/ai/package.json               |   2 +-
 packages/base/package.json             |   2 +-
 packages/charts/package.json           |   4 +-
 packages/compat/package.json           |   4 +-
 packages/cypress-commands/package.json |   4 +-
 packages/main/package.json             |   8 +-
 yarn.lock                              | 170 ++++++++++++-------------
 8 files changed, 103 insertions(+), 103 deletions(-)

diff --git a/package.json b/package.json
index 712cd0ccc60..99854c234e0 100644
--- a/package.json
+++ b/package.json
@@ -43,11 +43,11 @@
     "@storybook/react": "8.6.12",
     "@storybook/react-vite": "8.6.12",
     "@storybook/theming": "8.6.12",
-    "@ui5/webcomponents": "2.9.0",
-    "@ui5/webcomponents-ai": "2.9.0",
-    "@ui5/webcomponents-compat": "2.9.0",
-    "@ui5/webcomponents-fiori": "2.9.0",
-    "@ui5/webcomponents-icons": "2.9.0",
+    "@ui5/webcomponents": "2.10.0",
+    "@ui5/webcomponents-ai": "2.10.0",
+    "@ui5/webcomponents-compat": "2.10.0",
+    "@ui5/webcomponents-fiori": "2.10.0",
+    "@ui5/webcomponents-icons": "2.10.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "remark-gfm": "^4.0.0",
@@ -69,7 +69,7 @@
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.1",
-    "@ui5/webcomponents-tools": "2.9.0",
+    "@ui5/webcomponents-tools": "2.10.0",
     "@vitejs/plugin-react": "^4.2.0",
     "chromatic": "^11.0.0",
     "cssnano": "^7.0.0",
diff --git a/packages/ai/package.json b/packages/ai/package.json
index bf1b06f15c3..c3c7d20dac1 100644
--- a/packages/ai/package.json
+++ b/packages/ai/package.json
@@ -33,7 +33,7 @@
     "@ui5/webcomponents-react-base": "workspace:~"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-ai": "~2.9.0",
+    "@ui5/webcomponents-ai": "~2.10.0",
     "react": "^18 || ^19"
   },
   "publishConfig": {
diff --git a/packages/base/package.json b/packages/base/package.json
index b507e70ff4b..78a100e3608 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -32,7 +32,7 @@
   },
   "peerDependencies": {
     "@types/react": "*",
-    "@ui5/webcomponents-base": "~2.9.0",
+    "@ui5/webcomponents-base": "~2.10.0",
     "react": "^18 || ^19"
   },
   "peerDependenciesMeta": {
diff --git a/packages/charts/package.json b/packages/charts/package.json
index 20a73609b54..4f530097b29 100644
--- a/packages/charts/package.json
+++ b/packages/charts/package.json
@@ -39,8 +39,8 @@
     "recharts": "2.15.3"
   },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "~2.9.0",
-    "@ui5/webcomponents-react-base": "~2.9.0",
+    "@ui5/webcomponents-react": "~2.10.0",
+    "@ui5/webcomponents-react-base": "~2.10.0",
     "react": "^18 || ^19"
   },
   "publishConfig": {
diff --git a/packages/compat/package.json b/packages/compat/package.json
index 69820aa6df0..19c117fcdff 100644
--- a/packages/compat/package.json
+++ b/packages/compat/package.json
@@ -41,8 +41,8 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents-compat": "~2.9.0",
-    "@ui5/webcomponents-react": "~2.9.0",
+    "@ui5/webcomponents-compat": "~2.10.0",
+    "@ui5/webcomponents-react": "~2.10.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json
index 14a987db05c..f02e3cac51b 100644
--- a/packages/cypress-commands/package.json
+++ b/packages/cypress-commands/package.json
@@ -23,8 +23,8 @@
     "clean": "rimraf dist api-commands.json api-queries.json"
   },
   "peerDependencies": {
-    "@ui5/webcomponents": "~2.9.0",
-    "@ui5/webcomponents-base": "~2.9.0",
+    "@ui5/webcomponents": "~2.10.0",
+    "@ui5/webcomponents-base": "~2.10.0",
     "cypress": "^12 || ^13 || ^14"
   },
   "peerDependenciesMeta": {
diff --git a/packages/main/package.json b/packages/main/package.json
index 34ba9433b9e..5827d9b5d48 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -57,10 +57,10 @@
   "peerDependencies": {
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@ui5/webcomponents": "~2.9.0",
-    "@ui5/webcomponents-base": "~2.9.0",
-    "@ui5/webcomponents-fiori": "~2.9.0",
-    "@ui5/webcomponents-icons": "~2.9.0",
+    "@ui5/webcomponents": "~2.10.0",
+    "@ui5/webcomponents-base": "~2.10.0",
+    "@ui5/webcomponents-fiori": "~2.10.0",
+    "@ui5/webcomponents-icons": "~2.10.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
   },
diff --git a/yarn.lock b/yarn.lock
index 450904dbdd3..6a297024c17 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6302,42 +6302,42 @@ __metadata:
   dependencies:
     "@ui5/webcomponents-react-base": "workspace:~"
   peerDependencies:
-    "@ui5/webcomponents-ai": ~2.9.0
+    "@ui5/webcomponents-ai": ~2.10.0
     react: ^18 || ^19
   languageName: unknown
   linkType: soft
 
-"@ui5/webcomponents-ai@npm:2.9.0":
-  version: 2.9.0
-  resolution: "@ui5/webcomponents-ai@npm:2.9.0"
+"@ui5/webcomponents-ai@npm:2.10.0":
+  version: 2.10.0
+  resolution: "@ui5/webcomponents-ai@npm:2.10.0"
   dependencies:
-    "@ui5/webcomponents": "npm:2.9.0"
-    "@ui5/webcomponents-base": "npm:2.9.0"
-    "@ui5/webcomponents-icons": "npm:2.9.0"
-    "@ui5/webcomponents-theming": "npm:2.9.0"
-  checksum: 10c0/b65b86e3a38a50f71e6f6fb7e220259f0a197e7d1d24d34369a3b596669021c869abb12d12d9473efe272745f0ddac8b51e3db3f4682e21fd53c35eb4af85ad5
+    "@ui5/webcomponents": "npm:2.10.0"
+    "@ui5/webcomponents-base": "npm:2.10.0"
+    "@ui5/webcomponents-icons": "npm:2.10.0"
+    "@ui5/webcomponents-theming": "npm:2.10.0"
+  checksum: 10c0/261b95f3c60b5b0917aa84569529c76c01c008fcb209479c0002f8cf9f535ca7cd967e0094534eb2129b8315519552eac4c865f0b634ff234fe0e3357d778000
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-base@npm:2.9.0":
-  version: 2.9.0
-  resolution: "@ui5/webcomponents-base@npm:2.9.0"
+"@ui5/webcomponents-base@npm:2.10.0":
+  version: 2.10.0
+  resolution: "@ui5/webcomponents-base@npm:2.10.0"
   dependencies:
     "@lit-labs/ssr-dom-shim": "npm:^1.1.2"
     lit-html: "npm:^2.0.1"
-  checksum: 10c0/db9ff95ec67447d907a2b366c528d2625dbc4d38d2eb3af36a6c0e646a7cf873df5e155f3a4e5ad36f4e306f48de8016d35cfb793faca0d3241db8804aa47b06
+  checksum: 10c0/82aa5ea3e312f084203e3a5625eae966cf524bcad08b365d0cd08b3fe46fca1fbcba02cca268ad5b38bfb0f6fc7ccc4ec0e162528ed11a315cf1c96c4f72b05e
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-compat@npm:2.9.0":
-  version: 2.9.0
-  resolution: "@ui5/webcomponents-compat@npm:2.9.0"
+"@ui5/webcomponents-compat@npm:2.10.0":
+  version: 2.10.0
+  resolution: "@ui5/webcomponents-compat@npm:2.10.0"
   dependencies:
-    "@ui5/webcomponents": "npm:2.9.0"
-    "@ui5/webcomponents-base": "npm:2.9.0"
-    "@ui5/webcomponents-icons": "npm:2.9.0"
-    "@ui5/webcomponents-theming": "npm:2.9.0"
-  checksum: 10c0/3535bdbdd5436f148d8f03e8fbb79e0d495c72abeb11315b69a6d51e369f5150a65dc3c90881a0c40bdfcbf4d9a6a3475feee0907c6367304e75b4056e4beccf
+    "@ui5/webcomponents": "npm:2.10.0"
+    "@ui5/webcomponents-base": "npm:2.10.0"
+    "@ui5/webcomponents-icons": "npm:2.10.0"
+    "@ui5/webcomponents-theming": "npm:2.10.0"
+  checksum: 10c0/8596e092d336b0d2a439a16f13adacde58f3e28617dcce0d202e739752993ec89e4c5c073cc0d7b406f3c1f76149b8ddc58574127af216a817c7d55f84799318
   languageName: node
   linkType: hard
 
@@ -6345,8 +6345,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@ui5/webcomponents-cypress-commands@workspace:packages/cypress-commands"
   peerDependencies:
-    "@ui5/webcomponents": ~2.9.0
-    "@ui5/webcomponents-base": ~2.9.0
+    "@ui5/webcomponents": ~2.10.0
+    "@ui5/webcomponents-base": ~2.10.0
     cypress: ^12 || ^13 || ^14
   peerDependenciesMeta:
     "@ui5/webcomponents":
@@ -6356,53 +6356,53 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@ui5/webcomponents-fiori@npm:2.9.0":
-  version: 2.9.0
-  resolution: "@ui5/webcomponents-fiori@npm:2.9.0"
+"@ui5/webcomponents-fiori@npm:2.10.0":
+  version: 2.10.0
+  resolution: "@ui5/webcomponents-fiori@npm:2.10.0"
   dependencies:
-    "@ui5/webcomponents": "npm:2.9.0"
-    "@ui5/webcomponents-base": "npm:2.9.0"
-    "@ui5/webcomponents-icons": "npm:2.9.0"
-    "@ui5/webcomponents-theming": "npm:2.9.0"
+    "@ui5/webcomponents": "npm:2.10.0"
+    "@ui5/webcomponents-base": "npm:2.10.0"
+    "@ui5/webcomponents-icons": "npm:2.10.0"
+    "@ui5/webcomponents-theming": "npm:2.10.0"
     "@zxing/library": "npm:^0.21.3"
-  checksum: 10c0/d1855b4dc06cb78121a6d53ae3abdd0e20429d08ea0f3f526c801aa85dfcde7c54f0c5488750dbaa3aac0cc612c78ab50f789dec0a3748cd9ccba78e8ed63d64
+  checksum: 10c0/c25d7a83c9de23623a617bb109dbfca3bdecac5d77d45a1a4c246223318d38ebb917d1a84fa0accdc0f8c540d2192102d943ac4c48dbb782d68454af50dc0b11
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-icons-business-suite@npm:2.9.0":
-  version: 2.9.0
-  resolution: "@ui5/webcomponents-icons-business-suite@npm:2.9.0"
+"@ui5/webcomponents-icons-business-suite@npm:2.10.0":
+  version: 2.10.0
+  resolution: "@ui5/webcomponents-icons-business-suite@npm:2.10.0"
   dependencies:
-    "@ui5/webcomponents-base": "npm:2.9.0"
-  checksum: 10c0/b8103f0ab45945d5100c4e043fc6e8e0b7d99ae233f940b23b6fbc51bad5742a779edca630cbe0956370751ce27bfc4261063798dff4f384ac52a5f6157d4399
+    "@ui5/webcomponents-base": "npm:2.10.0"
+  checksum: 10c0/c2933dfb1c662da2aca347ba5ee11fa7232dbedf81522ccca3d141494753c2ec0314c742efeefdd43bc81a05c25420ffae31e72dc73270162f18b3cb435bd983
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-icons-tnt@npm:2.9.0":
-  version: 2.9.0
-  resolution: "@ui5/webcomponents-icons-tnt@npm:2.9.0"
+"@ui5/webcomponents-icons-tnt@npm:2.10.0":
+  version: 2.10.0
+  resolution: "@ui5/webcomponents-icons-tnt@npm:2.10.0"
   dependencies:
-    "@ui5/webcomponents-base": "npm:2.9.0"
-  checksum: 10c0/4cb892558293419cbb842833c87cc20a8711f7a940ec1043979a55b4e4c8e9dfc35a75fb1258e829711c668b22f12d9709c9ae4a1e21ce806d8bb3f5c36e45b6
+    "@ui5/webcomponents-base": "npm:2.10.0"
+  checksum: 10c0/c75d2d834dfac78f5ef511ca1b9bb1f05a7c5222c12943085d2c5e52f0d1a9429e8cb460955ce3adfc8aa8ca9a2c8600520a4ea5e754c82e5746a1325bfa1b7a
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-icons@npm:2.9.0":
-  version: 2.9.0
-  resolution: "@ui5/webcomponents-icons@npm:2.9.0"
+"@ui5/webcomponents-icons@npm:2.10.0":
+  version: 2.10.0
+  resolution: "@ui5/webcomponents-icons@npm:2.10.0"
   dependencies:
-    "@ui5/webcomponents-base": "npm:2.9.0"
-  checksum: 10c0/d0931704c9ac6f8b1c8902ae6baf11e7c362ca82800ec60b531b5b143cbf04524ba2853a22890002e331f2466ab9592d9b209349c45619e1f10d35666353d063
+    "@ui5/webcomponents-base": "npm:2.10.0"
+  checksum: 10c0/ca6ecd4e06208caeb8080187665481586d3f096deac7ec4e3fc7c443051d9b09fcf7e57446d21c3b0420ab3c0de6fb7525ee5f412e42a523d3dc0a4c8622beb4
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-localization@npm:2.9.0":
-  version: 2.9.0
-  resolution: "@ui5/webcomponents-localization@npm:2.9.0"
+"@ui5/webcomponents-localization@npm:2.10.0":
+  version: 2.10.0
+  resolution: "@ui5/webcomponents-localization@npm:2.10.0"
   dependencies:
     "@types/openui5": "npm:^1.113.0"
-    "@ui5/webcomponents-base": "npm:2.9.0"
-  checksum: 10c0/7b332fb4fd55be704b769cce8b111b5e37725421da9cf0d46c35c4879d63a544096753d90d6cc4dfeeca1602e295c906d99dda1f0f8c11f9bde57b4433411c38
+    "@ui5/webcomponents-base": "npm:2.10.0"
+  checksum: 10c0/c021d3fee3620303702902d9f0a679e16e51ee58416da5eceb32a4d6c5a6befb84ee5963faa0c095ec4c7d6f04de2e7b8a11fd52f12e42454f2d004ac17ac07b
   languageName: node
   linkType: hard
 
@@ -6411,7 +6411,7 @@ __metadata:
   resolution: "@ui5/webcomponents-react-base@workspace:packages/base"
   peerDependencies:
     "@types/react": "*"
-    "@ui5/webcomponents-base": ~2.9.0
+    "@ui5/webcomponents-base": ~2.10.0
     react: ^18 || ^19
   peerDependenciesMeta:
     "@types/react":
@@ -6429,8 +6429,8 @@ __metadata:
     react-content-loader: "npm:7.0.2"
     recharts: "npm:2.15.3"
   peerDependencies:
-    "@ui5/webcomponents-react": ~2.9.0
-    "@ui5/webcomponents-react-base": ~2.9.0
+    "@ui5/webcomponents-react": ~2.10.0
+    "@ui5/webcomponents-react-base": ~2.10.0
     react: ^18 || ^19
   languageName: unknown
   linkType: soft
@@ -6453,8 +6453,8 @@ __metadata:
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    "@ui5/webcomponents-compat": ~2.9.0
-    "@ui5/webcomponents-react": ~2.9.0
+    "@ui5/webcomponents-compat": ~2.10.0
+    "@ui5/webcomponents-react": ~2.10.0
     react: ^18 || ^19
     react-dom: ^18 || ^19
   peerDependenciesMeta:
@@ -6480,10 +6480,10 @@ __metadata:
   peerDependencies:
     "@types/react": "*"
     "@types/react-dom": "*"
-    "@ui5/webcomponents": ~2.9.0
-    "@ui5/webcomponents-base": ~2.9.0
-    "@ui5/webcomponents-fiori": ~2.9.0
-    "@ui5/webcomponents-icons": ~2.9.0
+    "@ui5/webcomponents": ~2.10.0
+    "@ui5/webcomponents-base": ~2.10.0
+    "@ui5/webcomponents-fiori": ~2.10.0
+    "@ui5/webcomponents-icons": ~2.10.0
     react: ^18 || ^19
     react-dom: ^18 || ^19
   peerDependenciesMeta:
@@ -6498,19 +6498,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@ui5/webcomponents-theming@npm:2.9.0":
-  version: 2.9.0
-  resolution: "@ui5/webcomponents-theming@npm:2.9.0"
+"@ui5/webcomponents-theming@npm:2.10.0":
+  version: 2.10.0
+  resolution: "@ui5/webcomponents-theming@npm:2.10.0"
   dependencies:
     "@sap-theming/theming-base-content": "npm:11.26.0"
-    "@ui5/webcomponents-base": "npm:2.9.0"
-  checksum: 10c0/528a9fbcc43dfa5069da80c34a9583ea091e59312451a494f66ac038b12632653fb3f0edcad38c1ae14cf79d81807c9c3516d01d84b43b4c10719f50fbe19c24
+    "@ui5/webcomponents-base": "npm:2.10.0"
+  checksum: 10c0/4a82a6d7408d6e49e954d18c2c871d9820899b711c183cd94717ff8c7a38ab172cb2f458baf0e91480ebe1a2b59b1f8f9e05b488230b08b4bd1b0e68776730af
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents-tools@npm:2.9.0":
-  version: 2.9.0
-  resolution: "@ui5/webcomponents-tools@npm:2.9.0"
+"@ui5/webcomponents-tools@npm:2.10.0":
+  version: 2.10.0
+  resolution: "@ui5/webcomponents-tools@npm:2.10.0"
   dependencies:
     "@custom-elements-manifest/analyzer": "npm:^0.10.4"
     "@typescript-eslint/eslint-plugin": "npm:^6.9.0"
@@ -6568,21 +6568,21 @@ __metadata:
   bin:
     wc-create-ui5-element: bin/create-ui5-element.js
     wc-dev: bin/dev.js
-  checksum: 10c0/cf90d8f9a369677b78161f37192254f53edddc68e7b3d0f41e8953e8fe0ac39b5cdc64008bb22a4340ffd985a64921c7c9def821b16db797801e3cc9ff6393cd
+  checksum: 10c0/9c64ce7e915e96a6d33def9855f716fc3b5d64e9136c734997cf5dfb64c9794a9e370dc2bb324fae3f01654ec06bbdb9396fdacc21dfd7acca70900e079a6cb4
   languageName: node
   linkType: hard
 
-"@ui5/webcomponents@npm:2.9.0":
-  version: 2.9.0
-  resolution: "@ui5/webcomponents@npm:2.9.0"
+"@ui5/webcomponents@npm:2.10.0":
+  version: 2.10.0
+  resolution: "@ui5/webcomponents@npm:2.10.0"
   dependencies:
-    "@ui5/webcomponents-base": "npm:2.9.0"
-    "@ui5/webcomponents-icons": "npm:2.9.0"
-    "@ui5/webcomponents-icons-business-suite": "npm:2.9.0"
-    "@ui5/webcomponents-icons-tnt": "npm:2.9.0"
-    "@ui5/webcomponents-localization": "npm:2.9.0"
-    "@ui5/webcomponents-theming": "npm:2.9.0"
-  checksum: 10c0/dd4e1f14fdf7bd3b4870fe6ad0a562987ed6dcb9ab5fcd2c9e71493678c9562a4db4c803ddfda863762214fcd31740e80844a1145e31712af98d9c1c4c92e732
+    "@ui5/webcomponents-base": "npm:2.10.0"
+    "@ui5/webcomponents-icons": "npm:2.10.0"
+    "@ui5/webcomponents-icons-business-suite": "npm:2.10.0"
+    "@ui5/webcomponents-icons-tnt": "npm:2.10.0"
+    "@ui5/webcomponents-localization": "npm:2.10.0"
+    "@ui5/webcomponents-theming": "npm:2.10.0"
+  checksum: 10c0/107ab1f0195427cb4bd858579fcac1b34bdd0e414f38a4084ea75ca3e06fe0c104603ef1749934b822181bdc97107ec6b2c7d0449b064898b40c61195901c467
   languageName: node
   linkType: hard
 
@@ -24060,12 +24060,12 @@ __metadata:
     "@types/node": "npm:^22.0.0"
     "@types/react": "npm:^19.0.1"
     "@types/react-dom": "npm:^19.0.1"
-    "@ui5/webcomponents": "npm:2.9.0"
-    "@ui5/webcomponents-ai": "npm:2.9.0"
-    "@ui5/webcomponents-compat": "npm:2.9.0"
-    "@ui5/webcomponents-fiori": "npm:2.9.0"
-    "@ui5/webcomponents-icons": "npm:2.9.0"
-    "@ui5/webcomponents-tools": "npm:2.9.0"
+    "@ui5/webcomponents": "npm:2.10.0"
+    "@ui5/webcomponents-ai": "npm:2.10.0"
+    "@ui5/webcomponents-compat": "npm:2.10.0"
+    "@ui5/webcomponents-fiori": "npm:2.10.0"
+    "@ui5/webcomponents-icons": "npm:2.10.0"
+    "@ui5/webcomponents-tools": "npm:2.10.0"
     "@vitejs/plugin-react": "npm:^4.2.0"
     chromatic: "npm:^11.0.0"
     cssnano: "npm:^7.0.0"

From c7b619cbcb0fb9efe8bd0a2f60361d15f751c365 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 7 May 2025 11:21:25 +0200
Subject: [PATCH 02/17] run "main" wrapper script

---
 .../custom-element-manifests/fiori.json       | 651 ++++++++++++++++--
 .storybook/custom-element-manifests/main.json | 399 +++++++++--
 .../main/src/webComponents/Button/index.tsx   |  20 +-
 .../main/src/webComponents/CheckBox/index.tsx |   3 +
 .../main/src/webComponents/Form/index.tsx     |  20 +-
 .../src/webComponents/FormGroup/index.tsx     |  12 +-
 .../IllustratedMessage/index.tsx              |  12 +-
 .../webComponents/ListItemStandard/index.tsx  |  37 +-
 .../main/src/webComponents/Menu/index.tsx     |  13 +-
 .../main/src/webComponents/Search/index.tsx   |  20 +-
 .../main/src/webComponents/ShellBar/index.tsx |  45 +-
 .../src/webComponents/ShellBarItem/index.tsx  |   2 +-
 .../webComponents/ShellBarSearch/index.tsx    | 194 ++++++
 .../SideNavigationGroup/index.tsx             |   3 +-
 .../SideNavigationItem/index.tsx              |   3 +-
 .../SideNavigationSubItem/index.tsx           |   3 +-
 .../webComponents/TableHeaderCell/index.tsx   |  30 +-
 .../src/webComponents/ToggleButton/index.tsx  |  20 +-
 .../Tokenizer/Tokenizer.stories.tsx           |   1 +
 .../src/webComponents/Tokenizer/index.tsx     |   7 +-
 .../main/src/webComponents/TreeItem/index.tsx |  21 +-
 .../webComponents/TreeItemCustom/index.tsx    |  24 +-
 22 files changed, 1355 insertions(+), 185 deletions(-)
 create mode 100644 packages/main/src/webComponents/ShellBarSearch/index.tsx

diff --git a/.storybook/custom-element-manifests/fiori.json b/.storybook/custom-element-manifests/fiori.json
index aa3d797baa4..1e3440bdb3c 100644
--- a/.storybook/custom-element-manifests/fiori.json
+++ b/.storybook/custom-element-manifests/fiori.json
@@ -3572,6 +3572,17 @@
               "default": "undefined",
               "privacy": "public",
               "_ui5since": "1.7.0"
+            },
+            {
+              "kind": "field",
+              "name": "decorative",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.",
+              "privacy": "public",
+              "_ui5since": "2.10.0"
             }
           ],
           "attributes": [
@@ -3619,6 +3630,15 @@
               "type": {
                 "text": "string | undefined"
               }
+            },
+            {
+              "description": "Defines whether the illustration is decorative.\n\nWhen set to `true`, the attributes `role=\"presentation\"` and `aria-hidden=\"true\"` are applied to the SVG element.",
+              "name": "decorative",
+              "default": "false",
+              "fieldName": "decorative",
+              "type": {
+                "text": "boolean"
+              }
             }
           ],
           "superclass": {
@@ -5268,7 +5288,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "### Overview\n\nA `ui5-search` is an input with suggestions, used for user search.\n\nThe `ui5-search` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n- Suggestions - a list with available search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/fiori/dist/Search.js\";`",
+          "description": "### Overview\n\nA `ui5-search` is an input with suggestions, used for user search.\n\nThe `ui5-search` consists of several elements parts:\n- Scope - displays a select in the beggining of the component, used for filtering results by their scope.\n- Input field - for user input value\n- Clear button - gives the possibility for deleting the entered value\n- Search button - a primary button for performing search, when the user has entered a search term\n- Suggestions - a list with available search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Search.js\";`",
           "name": "Search",
           "slots": [
             {
@@ -5390,20 +5410,6 @@
                 "module": "dist/SearchField.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "collapsed",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Defines whether the component is collapsed.",
-              "privacy": "public",
-              "inheritedFrom": {
-                "name": "SearchField",
-                "module": "dist/SearchField.js"
-              }
-            },
             {
               "kind": "field",
               "name": "value",
@@ -5448,11 +5454,11 @@
             },
             {
               "kind": "field",
-              "name": "searchIconTooltip",
+              "name": "accessibleDescription",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines the tooltip of the search icon component.",
+              "description": "Defines the accessible ARIA description of the field.",
               "privacy": "public",
               "default": "undefined",
               "inheritedFrom": {
@@ -5588,19 +5594,6 @@
                 "module": "dist/SearchField.js"
               }
             },
-            {
-              "description": "Defines whether the component is collapsed.",
-              "name": "collapsed",
-              "default": "false",
-              "fieldName": "collapsed",
-              "type": {
-                "text": "boolean"
-              },
-              "inheritedFrom": {
-                "name": "SearchField",
-                "module": "dist/SearchField.js"
-              }
-            },
             {
               "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
               "name": "value",
@@ -5641,10 +5634,10 @@
               }
             },
             {
-              "description": "Defines the tooltip of the search icon component.",
-              "name": "search-icon-tooltip",
+              "description": "Defines the accessible ARIA description of the field.",
+              "name": "accessible-description",
               "default": "undefined",
-              "fieldName": "searchIconTooltip",
+              "fieldName": "accessibleDescription",
               "type": {
                 "text": "string | undefined"
               },
@@ -5713,7 +5706,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "### Overview\n\nA `ui5-search-item` is a list item, used for displaying search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/fiori/dist/SearchItem.js\";`",
+          "description": "### Overview\n\nA `ui5-search-item` is a list item, used for displaying search suggestions\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SearchItem.js\";`",
           "name": "SearchItem",
           "members": [
             {
@@ -6314,6 +6307,26 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "hideSearchButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "disableSearchCollapse",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the automatic search field expansion/collapse when the available space is not enough.\n\n**Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "primaryTitle",
@@ -6364,16 +6377,6 @@
               "description": "Defines, if the product switch icon would be displayed.",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "showSearchField",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.",
-              "privacy": "public"
-            },
             {
               "kind": "field",
               "name": "accessibilityAttributes",
@@ -6388,10 +6391,20 @@
                 ]
               },
               "default": "{}",
-              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
+              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
               "privacy": "public",
               "_ui5since": "1.10.0"
             },
+            {
+              "kind": "field",
+              "name": "showSearchField",
+              "description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.",
+              "default": "false",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "kind": "method",
               "name": "closeOverflow",
@@ -6462,6 +6475,19 @@
               "default": "null",
               "readonly": true,
               "_ui5since": "1.0.0-rc.16"
+            },
+            {
+              "kind": "method",
+              "name": "getSearchButtonDomRef",
+              "return": {
+                "type": {
+                  "text": "Promise<HTMLElement | null>"
+                },
+                "description": "The search icon DOM ref"
+              },
+              "description": "Returns the `search` icon DOM ref.",
+              "privacy": "public",
+              "_ui5since": "2.10.0"
             }
           ],
           "events": [
@@ -6643,6 +6669,35 @@
                 }
               ]
             },
+            {
+              "name": "search-field-toggle",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent<ShellBarSearchFieldToggleEventDetail>",
+                "references": [
+                  {
+                    "name": "ShellBarSearchFieldToggleEventDetail",
+                    "package": "@ui5/webcomponents-fiori",
+                    "module": "dist/ShellBar.js"
+                  }
+                ]
+              },
+              "description": "Fired, when the search field is expanded or collapsed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
+              "_ui5since": "2.10.0",
+              "_ui5parameters": [
+                {
+                  "type": {
+                    "text": "Boolean"
+                  },
+                  "name": "expanded",
+                  "_ui5privacy": "public",
+                  "description": "whether the search field is expanded"
+                }
+              ]
+            },
             {
               "name": "content-item-visibility-change",
               "_ui5privacy": "public",
@@ -6674,6 +6729,24 @@
             }
           ],
           "attributes": [
+            {
+              "description": "Defines the visibility state of the search button.\n\n**Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.",
+              "name": "hide-search-button",
+              "default": "false",
+              "fieldName": "hideSearchButton",
+              "type": {
+                "text": "boolean"
+              }
+            },
+            {
+              "description": "Disables the automatic search field expansion/collapse when the available space is not enough.\n\n**Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.",
+              "name": "disable-search-collapse",
+              "default": "false",
+              "fieldName": "disableSearchCollapse",
+              "type": {
+                "text": "boolean"
+              }
+            },
             {
               "description": "Defines the `primaryTitle`.\n\n**Note:** The `primaryTitle` would be hidden on S screen size (less than approx. 700px).",
               "name": "primary-title",
@@ -6720,16 +6793,7 @@
               }
             },
             {
-              "description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.",
-              "name": "show-search-field",
-              "default": "false",
-              "fieldName": "showSearchField",
-              "type": {
-                "text": "boolean"
-              }
-            },
-            {
-              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
+              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields,\nwhere each field is an object supporting one or more accessibility attributes:\n\n- **logo** - `logo.role` and `logo.name`.\n- **notifications** - `notifications.expanded` and `notifications.hasPopup`.\n- **profile** - `profile.expanded`, `profile.hasPopup` and `profile.name`.\n- **product** - `product.expanded` and `product.hasPopup`.\n- **search** - `search.hasPopup`.\n- **overflow** - `overflow.expanded` and `overflow.hasPopup`.\n- **branding** - `branding.name`.\n\nThe accessibility attributes support the following values:\n\n- **role**: Defines the accessible ARIA role of the logo area.\nAccepts the following string values: `button` or `link`.\n\n- **expanded**: Indicates whether the button, or another grouping element it controls,\nis currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element,\nsuch as menu or dialog, that can be triggered by the button.\n\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n- **name**: Defines the accessible ARIA name of the area.\nAccepts any string.",
               "name": "accessibility-attributes",
               "default": "{}",
               "fieldName": "accessibilityAttributes",
@@ -6737,6 +6801,15 @@
                 "text": "ShellBarAccessibilityAttributes"
               }
             },
+            {
+              "description": "Defines, if the Search Field would be displayed when there is a valid `searchField` slot.\n\n**Note:** By default the Search Field is not displayed.",
+              "name": "show-search-field",
+              "default": "false",
+              "fieldName": "showSearchField",
+              "type": {
+                "text": "any"
+              }
+            },
             {
               "description": "Returns the `logo` DOM ref.",
               "name": "logo-dom-ref",
@@ -6838,7 +6911,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines the item text.\n \n  **Note:** The text is only displayed inside the overflow popover list view.",
+              "description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.",
               "default": "undefined",
               "privacy": "public"
             },
@@ -6913,7 +6986,7 @@
               }
             },
             {
-              "description": "Defines the item text.\n \n  **Note:** The text is only displayed inside the overflow popover list view.",
+              "description": "Defines the item text.\n\n**Note:** The text is only displayed inside the overflow popover list view.",
               "name": "text",
               "default": "undefined",
               "fieldName": "text",
@@ -6970,6 +7043,450 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/ShellBarSearch.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Search field for the ShellBar component.",
+          "name": "ShellBarSearch",
+          "members": [
+            {
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether a loading indicator should be shown in the popup.",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "Search",
+                "module": "dist/Search.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "noTypeahead",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the value will be autcompleted to match an item.",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "Search",
+                "module": "dist/Search.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the items picker is open.",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "Search",
+                "module": "dist/Search.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "showClearIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Defines whether the clear icon of the search will be shown.",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+              "default": "undefined",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "accessibleName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the accessible ARIA name of the component.",
+              "privacy": "public",
+              "default": "undefined",
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "accessibleDescription",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the accessible ARIA description of the field.",
+              "privacy": "public",
+              "default": "undefined",
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "Search",
+            "package": "@ui5/webcomponents-fiori",
+            "module": "dist/Search.js"
+          },
+          "tagName": "ui5-shellbar-search",
+          "customElement": true,
+          "_ui5experimental": true,
+          "_ui5since": "2.10.0",
+          "_ui5privacy": "public",
+          "slots": [
+            {
+              "name": "default",
+              "description": "Defines the Search suggestion items.",
+              "_ui5propertyName": "items",
+              "_ui5type": {
+                "text": "Array<SearchItem | SearchItemGroup>"
+              },
+              "_ui5privacy": "public",
+              "inheritedFrom": {
+                "name": "Search",
+                "module": "dist/Search.js"
+              }
+            },
+            {
+              "name": "action",
+              "description": "Defines the popup footer action button.",
+              "_ui5type": {
+                "text": "Array<Button>",
+                "references": [
+                  {
+                    "name": "Button",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/Button.js"
+                  }
+                ]
+              },
+              "_ui5privacy": "public",
+              "inheritedFrom": {
+                "name": "Search",
+                "module": "dist/Search.js"
+              }
+            },
+            {
+              "name": "illustration",
+              "description": "Defines the illustrated message to be shown in the popup.",
+              "_ui5type": {
+                "text": "Array<IllustratedMessage>",
+                "references": [
+                  {
+                    "name": "IllustratedMessage",
+                    "package": "@ui5/webcomponents-fiori",
+                    "module": "dist/IllustratedMessage.js"
+                  }
+                ]
+              },
+              "_ui5privacy": "public",
+              "inheritedFrom": {
+                "name": "Search",
+                "module": "dist/Search.js"
+              }
+            },
+            {
+              "name": "messageArea",
+              "description": "Defines the illustrated message to be shown in the popup.",
+              "_ui5type": {
+                "text": "Array<SearchMessageArea>",
+                "references": [
+                  {
+                    "name": "SearchMessageArea",
+                    "package": "@ui5/webcomponents-fiori",
+                    "module": "dist/SearchMessageArea.js"
+                  }
+                ]
+              },
+              "_ui5privacy": "public",
+              "inheritedFrom": {
+                "name": "Search",
+                "module": "dist/Search.js"
+              }
+            },
+            {
+              "name": "scopes",
+              "description": "Defines the component scope options.",
+              "_ui5type": {
+                "text": "Array<ISearchScope>",
+                "references": [
+                  {
+                    "name": "ISearchScope",
+                    "package": "@ui5/webcomponents-fiori",
+                    "module": "dist/SearchField.js"
+                  }
+                ]
+              },
+              "_ui5privacy": "public",
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Indicates whether a loading indicator should be shown in the popup.",
+              "name": "loading",
+              "default": "false",
+              "fieldName": "loading",
+              "type": {
+                "text": "boolean"
+              },
+              "inheritedFrom": {
+                "name": "Search",
+                "module": "dist/Search.js"
+              }
+            },
+            {
+              "description": "Defines whether the value will be autcompleted to match an item.",
+              "name": "no-typeahead",
+              "default": "false",
+              "fieldName": "noTypeahead",
+              "type": {
+                "text": "boolean"
+              },
+              "inheritedFrom": {
+                "name": "Search",
+                "module": "dist/Search.js"
+              }
+            },
+            {
+              "description": "Indicates whether the items picker is open.",
+              "name": "open",
+              "default": "false",
+              "fieldName": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "inheritedFrom": {
+                "name": "Search",
+                "module": "dist/Search.js"
+              }
+            },
+            {
+              "description": "Defines whether the clear icon of the search will be shown.",
+              "name": "show-clear-icon",
+              "default": "false",
+              "fieldName": "showClearIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            },
+            {
+              "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
+              "name": "value",
+              "default": "\"\"",
+              "fieldName": "value",
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            },
+            {
+              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+              "name": "placeholder",
+              "default": "undefined",
+              "fieldName": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            },
+            {
+              "description": "Defines the accessible ARIA name of the component.",
+              "name": "accessible-name",
+              "default": "undefined",
+              "fieldName": "accessibleName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            },
+            {
+              "description": "Defines the accessible ARIA description of the field.",
+              "name": "accessible-description",
+              "default": "undefined",
+              "fieldName": "accessibleDescription",
+              "type": {
+                "text": "string | undefined"
+              },
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "open",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the popup is opened.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": false,
+              "inheritedFrom": {
+                "name": "Search",
+                "module": "dist/Search.js"
+              }
+            },
+            {
+              "name": "close",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the popup is closed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": false,
+              "inheritedFrom": {
+                "name": "Search",
+                "module": "dist/Search.js"
+              }
+            },
+            {
+              "name": "input",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when typing in input or clear icon is pressed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            },
+            {
+              "name": "scope-change",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent<SearchFieldScopeSelectionChangeDetails>",
+                "references": [
+                  {
+                    "name": "SearchFieldScopeSelectionChangeDetails",
+                    "package": "@ui5/webcomponents-fiori",
+                    "module": "dist/SearchField.js"
+                  }
+                ]
+              },
+              "description": "Fired when the scope has changed.",
+              "_ui5Cancelable": false,
+              "_ui5allowPreventDefault": false,
+              "_ui5Bubbles": true,
+              "_ui5parameters": [
+                {
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "name": "scope",
+                  "_ui5privacy": "public",
+                  "description": "The newly selected scope"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            },
+            {
+              "name": "search",
+              "_ui5privacy": "public",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the user has triggered search with Enter key or Search Button press.",
+              "_ui5Cancelable": true,
+              "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
+              "inheritedFrom": {
+                "name": "SearchField",
+                "module": "dist/SearchField.js"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ShellBarSearch",
+            "module": "dist/ShellBarSearch.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "ui5-shellbar-search",
+          "declaration": {
+            "name": "ShellBarSearch",
+            "module": "dist/ShellBarSearch.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/ShellBarSpacer.js",
@@ -7242,7 +7759,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).",
+              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
               "default": "undefined",
               "privacy": "public",
               "_ui5since": "2.0.0",
@@ -7289,7 +7806,7 @@
               }
             },
             {
-              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).",
+              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
               "name": "tooltip",
               "default": "undefined",
               "fieldName": "tooltip",
@@ -7522,7 +8039,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).",
+              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
               "default": "undefined",
               "privacy": "public",
               "_ui5since": "2.0.0",
@@ -7660,7 +8177,7 @@
               }
             },
             {
-              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).",
+              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
               "name": "tooltip",
               "default": "undefined",
               "fieldName": "tooltip",
@@ -7757,7 +8274,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).",
+              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
               "default": "undefined",
               "privacy": "public",
               "_ui5since": "2.0.0"
@@ -7783,7 +8300,7 @@
               }
             },
             {
-              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).",
+              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
               "name": "tooltip",
               "default": "undefined",
               "fieldName": "tooltip",
@@ -7947,7 +8464,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).",
+              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
               "default": "undefined",
               "privacy": "public",
               "_ui5since": "2.0.0",
@@ -8061,7 +8578,7 @@
               }
             },
             {
-              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).",
+              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
               "name": "tooltip",
               "default": "undefined",
               "fieldName": "tooltip",
@@ -8257,7 +8774,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).",
+              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
               "default": "undefined",
               "privacy": "public",
               "_ui5since": "2.0.0",
@@ -8396,7 +8913,7 @@
               }
             },
             {
-              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).",
+              "description": "Defines the tooltip of the component.\n\nA tooltip attribute should be provided, in order to represent meaning/function,\nwhen the component is collapsed (\"icon only\" design is visualized) or the item text is truncated.",
               "name": "tooltip",
               "default": "undefined",
               "fieldName": "tooltip",
diff --git a/.storybook/custom-element-manifests/main.json b/.storybook/custom-element-manifests/main.json
index 933be33871f..5c0f60e37ce 100644
--- a/.storybook/custom-element-manifests/main.json
+++ b/.storybook/custom-element-manifests/main.json
@@ -38,6 +38,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/features/ListItemStandardExpandableText.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "dist/popup-utils/OpenedPopupsRegistry.js",
@@ -1465,6 +1471,12 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/types/ExpandableTextTemplateParams.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "dist/types/FormItemSpacing.js",
@@ -5162,12 +5174,62 @@
               "name": "click",
               "_ui5privacy": "public",
               "type": {
-                "text": "Event"
+                "text": "CustomEvent<ButtonClickEventDetail>",
+                "references": [
+                  {
+                    "name": "ButtonClickEventDetail",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/Button.js"
+                  }
+                ]
               },
-              "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.",
-              "_ui5Cancelable": false,
-              "_ui5allowPreventDefault": false,
-              "_ui5Bubbles": true
+              "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.",
+              "_ui5Cancelable": true,
+              "_ui5allowPreventDefault": true,
+              "_ui5Bubbles": true,
+              "_ui5since": "2.10.0",
+              "_ui5parameters": [
+                {
+                  "type": {
+                    "text": "Event"
+                  },
+                  "name": "originalEvent",
+                  "_ui5privacy": "public",
+                  "description": "Returns original event that comes from user's **click** interaction"
+                },
+                {
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "name": "altKey",
+                  "_ui5privacy": "public",
+                  "description": "Returns whether the \"ALT\" key was pressed when the event was triggered."
+                },
+                {
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "name": "ctrlKey",
+                  "_ui5privacy": "public",
+                  "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered."
+                },
+                {
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "name": "metaKey",
+                  "_ui5privacy": "public",
+                  "description": "Returns whether the \"META\" key was pressed when the event was triggered."
+                },
+                {
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "name": "shiftKey",
+                  "_ui5privacy": "public",
+                  "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered."
+                }
+              ]
             }
           ],
           "attributes": [
@@ -7203,7 +7265,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Defines whether the component is required.",
+              "description": "Defines whether the component is required.\n\n**Note:** We advise against using the text property of the checkbox when there is a\nlabel associated with it to avoid having two required asterisks.",
               "privacy": "public",
               "_ui5since": "1.3.0"
             },
@@ -7345,7 +7407,7 @@
               }
             },
             {
-              "description": "Defines whether the component is required.",
+              "description": "Defines whether the component is required.\n\n**Note:** We advise against using the text property of the checkbox when there is a\nlabel associated with it to avoid having two required asterisks.",
               "name": "required",
               "default": "false",
               "fieldName": "required",
@@ -12356,6 +12418,17 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "accessibleName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the accessible ARIA name of the component.",
+              "default": "undefined",
+              "privacy": "public",
+              "_ui5since": "2.10.0"
+            },
             {
               "kind": "field",
               "name": "layout",
@@ -12397,6 +12470,24 @@
               "default": "undefined",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "headerLevel",
+              "type": {
+                "text": "TitleLevel",
+                "references": [
+                  {
+                    "name": "TitleLevel",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/TitleLevel.js"
+                  }
+                ]
+              },
+              "default": "\"H2\"",
+              "description": "Defines the compoennt heading level,\nset by the `headerText`.",
+              "privacy": "public",
+              "_ui5since": "2.10.0"
+            },
             {
               "kind": "field",
               "name": "itemSpacing",
@@ -12416,6 +12507,15 @@
             }
           ],
           "attributes": [
+            {
+              "description": "Defines the accessible ARIA name of the component.",
+              "name": "accessible-name",
+              "default": "undefined",
+              "fieldName": "accessibleName",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
             {
               "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns  are recommended)",
               "name": "layout",
@@ -12452,6 +12552,15 @@
                 "text": "string | undefined"
               }
             },
+            {
+              "description": "Defines the compoennt heading level,\nset by the `headerText`.",
+              "name": "header-level",
+              "default": "\"H2\"",
+              "fieldName": "headerLevel",
+              "type": {
+                "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\""
+              }
+            },
             {
               "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"non-edit\" and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"non-edit\" mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"non-edit\" mode and the input fields in \"edit\" mode.",
               "name": "item-spacing",
@@ -12529,6 +12638,24 @@
               "default": "undefined",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "headerLevel",
+              "type": {
+                "text": "TitleLevel",
+                "references": [
+                  {
+                    "name": "TitleLevel",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/TitleLevel.js"
+                  }
+                ]
+              },
+              "default": "\"H3\"",
+              "description": "Defines the compoennt heading level,\nset by the `headerText`.",
+              "privacy": "public",
+              "_ui5since": "2.10.0"
+            },
             {
               "kind": "field",
               "name": "columnSpan",
@@ -12550,6 +12677,15 @@
                 "text": "string | undefined"
               }
             },
+            {
+              "description": "Defines the compoennt heading level,\nset by the `headerText`.",
+              "name": "header-level",
+              "default": "\"H3\"",
+              "fieldName": "headerLevel",
+              "type": {
+                "text": "\"H1\" | \"H2\" | \"H3\" | \"H4\" | \"H5\" | \"H6\""
+              }
+            },
             {
               "description": "Defines column span of the component,\ne.g how many columns the group should span to.",
               "name": "column-span",
@@ -15501,7 +15637,7 @@
           ],
           "slots": [
             {
-              "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.",
+              "description": "Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. <br/>\n**Note:** Deprecated since version `2.10.0`. Use the `text` property instead. <br/>\nOnly use the default slot if you need to apply custom text formatting with HTML elements (like `<b>`, `<i>`, etc.).",
               "name": "default",
               "_ui5privacy": "public",
               "_ui5type": {
@@ -15539,6 +15675,17 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the text of the component.",
+              "default": "undefined",
+              "privacy": "public",
+              "_ui5since": "2.10.0"
+            },
             {
               "kind": "field",
               "name": "description",
@@ -15629,6 +15776,24 @@
                 "module": "dist/ListItem.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "wrappingType",
+              "type": {
+                "text": "WrappingType",
+                "references": [
+                  {
+                    "name": "WrappingType",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/WrappingType.js"
+                  }
+                ]
+              },
+              "default": "\"None\"",
+              "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).",
+              "privacy": "public",
+              "_ui5since": "2.10.0"
+            },
             {
               "kind": "field",
               "name": "type",
@@ -15740,6 +15905,15 @@
             }
           ],
           "attributes": [
+            {
+              "description": "Defines the text of the component.",
+              "name": "text",
+              "default": "undefined",
+              "fieldName": "text",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
             {
               "description": "Defines the description displayed right under the item text, if such is present.",
               "name": "description",
@@ -15803,6 +15977,15 @@
                 "text": "string | undefined"
               }
             },
+            {
+              "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).",
+              "name": "wrapping-type",
+              "default": "\"None\"",
+              "fieldName": "wrappingType",
+              "type": {
+                "text": "\"None\" | \"Normal\""
+              }
+            },
             {
               "description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive` and `Detail` - will not.",
               "name": "type",
@@ -15978,10 +16161,27 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates if the menu is open",
+              "description": "Indicates if the menu is open.",
               "privacy": "public",
               "_ui5since": "1.10.0"
             },
+            {
+              "kind": "field",
+              "name": "horizontalAlign",
+              "type": {
+                "text": "PopoverHorizontalAlign",
+                "references": [
+                  {
+                    "name": "PopoverHorizontalAlign",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/PopoverHorizontalAlign.js"
+                  }
+                ]
+              },
+              "default": "\"Start\"",
+              "description": "Determines the horizontal alignment of the menu relative to its opener control.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "loading",
@@ -16000,7 +16200,7 @@
                 "text": "number"
               },
               "default": "1000",
-              "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover..",
+              "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.",
               "privacy": "public",
               "_ui5since": "1.13.0"
             },
@@ -16147,7 +16347,7 @@
               }
             },
             {
-              "description": "Indicates if the menu is open",
+              "description": "Indicates if the menu is open.",
               "name": "open",
               "default": "false",
               "fieldName": "open",
@@ -16155,6 +16355,15 @@
                 "text": "boolean"
               }
             },
+            {
+              "description": "Determines the horizontal alignment of the menu relative to its opener control.",
+              "name": "horizontal-align",
+              "default": "\"Start\"",
+              "fieldName": "horizontalAlign",
+              "type": {
+                "text": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
+              }
+            },
             {
               "description": "Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.",
               "name": "loading",
@@ -16165,7 +16374,7 @@
               }
             },
             {
-              "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover..",
+              "description": "Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.",
               "name": "loading-delay",
               "default": "1000",
               "fieldName": "loadingDelay",
@@ -19471,7 +19680,7 @@
               "default": "\"Center\"",
               "fieldName": "horizontalAlign",
               "type": {
-                "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
+                "text": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
               }
             },
             {
@@ -21468,7 +21677,7 @@
               "default": "\"Center\"",
               "fieldName": "horizontalAlign",
               "type": {
-                "text": "\"Start\" | \"End\" | \"Center\" | \"Stretch\""
+                "text": "\"Center\" | \"Start\" | \"End\" | \"Stretch\""
               },
               "inheritedFrom": {
                 "name": "Popover",
@@ -25621,7 +25830,7 @@
               "default": "undefined",
               "fieldName": "horizontalAlign",
               "type": {
-                "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
+                "text": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined"
               },
               "inheritedFrom": {
                 "name": "TableCellBase",
@@ -25695,7 +25904,7 @@
               "default": "undefined",
               "fieldName": "horizontalAlign",
               "type": {
-                "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
+                "text": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined"
               }
             }
           ],
@@ -25915,31 +26124,21 @@
               "kind": "field",
               "name": "width",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "\"auto\"",
-              "description": "Defines the width of column.",
+              "description": "Defines the width of the column.\n\nBy default, the column will grow and shrink according to the available space.\nThis will distribute the space proportionally among all columns with no specific width set.\n\nSee [\\<length\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and\n[\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) for possible width values.",
+              "default": "undefined",
               "privacy": "public"
             },
             {
               "kind": "field",
               "name": "minWidth",
               "type": {
-                "text": "string"
-              },
-              "default": "\"auto\"",
-              "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\n**Note:** If `minWidth` has the `auto` value, the table ensures that the column is wider than at least `3rem`.",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "maxWidth",
-              "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "\"auto\"",
-              "description": "Defines the maximum width of the column.",
-              "privacy": "public"
+              "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\nBy default, the table prevents the column from becoming too small.\nChanging this value to a small value might lead to accessibility issues.\n\n**Note:** This property only takes effect for columns with a [\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) value\nor the default width.",
+              "privacy": "public",
+              "default": "undefined"
             },
             {
               "kind": "field",
@@ -26015,30 +26214,21 @@
           ],
           "attributes": [
             {
-              "description": "Defines the width of column.",
+              "description": "Defines the width of the column.\n\nBy default, the column will grow and shrink according to the available space.\nThis will distribute the space proportionally among all columns with no specific width set.\n\nSee [\\<length\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and\n[\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) for possible width values.",
               "name": "width",
-              "default": "\"auto\"",
+              "default": "undefined",
               "fieldName": "width",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               }
             },
             {
-              "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\n**Note:** If `minWidth` has the `auto` value, the table ensures that the column is wider than at least `3rem`.",
+              "description": "Defines the minimum width of the column.\n\nIf the table is in `Popin` mode and the minimum width does not fit anymore,\nthe column will move into the popin.\n\nBy default, the table prevents the column from becoming too small.\nChanging this value to a small value might lead to accessibility issues.\n\n**Note:** This property only takes effect for columns with a [\\<percentage\\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) value\nor the default width.",
               "name": "min-width",
-              "default": "\"auto\"",
+              "default": "undefined",
               "fieldName": "minWidth",
               "type": {
-                "text": "string"
-              }
-            },
-            {
-              "description": "Defines the maximum width of the column.",
-              "name": "max-width",
-              "default": "\"auto\"",
-              "fieldName": "maxWidth",
-              "type": {
-                "text": "string"
+                "text": "string | undefined"
               }
             },
             {
@@ -26083,7 +26273,7 @@
               "default": "undefined",
               "fieldName": "horizontalAlign",
               "type": {
-                "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
+                "text": "\"Center\" | \"Start\" | \"End\" | \"Left\" | \"Right\" | undefined"
               },
               "inheritedFrom": {
                 "name": "TableCellBase",
@@ -29449,12 +29639,62 @@
               "name": "click",
               "_ui5privacy": "public",
               "type": {
-                "text": "Event"
+                "text": "CustomEvent<ButtonClickEventDetail>",
+                "references": [
+                  {
+                    "name": "ButtonClickEventDetail",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/Button.js"
+                  }
+                ]
               },
-              "description": "Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.",
-              "_ui5Cancelable": false,
-              "_ui5allowPreventDefault": false,
+              "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`.",
+              "_ui5Cancelable": true,
+              "_ui5allowPreventDefault": true,
               "_ui5Bubbles": true,
+              "_ui5since": "2.10.0",
+              "_ui5parameters": [
+                {
+                  "type": {
+                    "text": "Event"
+                  },
+                  "name": "originalEvent",
+                  "_ui5privacy": "public",
+                  "description": "Returns original event that comes from user's **click** interaction"
+                },
+                {
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "name": "altKey",
+                  "_ui5privacy": "public",
+                  "description": "Returns whether the \"ALT\" key was pressed when the event was triggered."
+                },
+                {
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "name": "ctrlKey",
+                  "_ui5privacy": "public",
+                  "description": "Returns whether the \"CTRL\" key was pressed when the event was triggered."
+                },
+                {
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "name": "metaKey",
+                  "_ui5privacy": "public",
+                  "description": "Returns whether the \"META\" key was pressed when the event was triggered."
+                },
+                {
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "name": "shiftKey",
+                  "_ui5privacy": "public",
+                  "description": "Returns whether the \"SHIFT\" key was pressed when the event was triggered."
+                }
+              ],
               "inheritedFrom": {
                 "name": "Button",
                 "module": "dist/Button.js"
@@ -29610,6 +29850,24 @@
           "kind": "class",
           "description": "### Overview\n\nA `ui5-tokenizer` is an invisible container for `ui5-token`s that supports keyboard navigation and token selection.\n\nThe `ui5-tokenizer` consists of two parts:\n- Tokens - displays the available tokens.\n- N-more indicator - contains the number of the remaining tokens that cannot be displayed due to the limited space.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe `ui5-tokenizer` provides advanced keyboard handling.\nWhen a token is focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- [Left] or [Right] / [Up] or [Down] - Navigates left and right through the tokens.\n- [Home] - Navigates to the first token.\n- [End] - Navigates to the last token.\n\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Space] - Selects a token.\n- [Backspace] / [Delete] - Deletes a token.\n**Note:** The deletion of a token is handled by the application with the use of the `token-delete` event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Tokenizer.js\";`",
           "name": "Tokenizer",
+          "slots": [
+            {
+              "name": "default",
+              "description": "Defines the tokens to be displayed.",
+              "_ui5propertyName": "tokens",
+              "_ui5type": {
+                "text": "Array<Token>",
+                "references": [
+                  {
+                    "name": "Token",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/Token.js"
+                  }
+                ]
+              },
+              "_ui5privacy": "public"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -31914,6 +32172,19 @@
                 "module": "dist/TreeItemBase.js"
               }
             },
+            {
+              "name": "image",
+              "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.",
+              "_ui5since": "2.10.0",
+              "_ui5type": {
+                "text": "Array<HTMLElement>"
+              },
+              "_ui5privacy": "public",
+              "inheritedFrom": {
+                "name": "TreeItemBase",
+                "module": "dist/TreeItemBase.js"
+              }
+            },
             {
               "name": "deleteButton",
               "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.",
@@ -31998,6 +32269,15 @@
               },
               "_ui5privacy": "public"
             },
+            {
+              "name": "image",
+              "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.",
+              "_ui5since": "2.10.0",
+              "_ui5type": {
+                "text": "Array<HTMLElement>"
+              },
+              "_ui5privacy": "public"
+            },
             {
               "name": "deleteButton",
               "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.",
@@ -32466,6 +32746,19 @@
                 "module": "dist/TreeItemBase.js"
               }
             },
+            {
+              "name": "image",
+              "description": "**Note:** While the slot allows option for setting custom avatar, to match the\ndesign guidelines, please use the `ui5-avatar` with size XS.\n\n**Note:** If bigger `ui5-avatar` needs to be used, then the size of the\n`ui5-tree-item` should be customized in order to fit.",
+              "_ui5since": "2.10.0",
+              "_ui5type": {
+                "text": "Array<HTMLElement>"
+              },
+              "_ui5privacy": "public",
+              "inheritedFrom": {
+                "name": "TreeItemBase",
+                "module": "dist/TreeItemBase.js"
+              }
+            },
             {
               "name": "deleteButton",
               "description": "Defines the delete button, displayed in \"Delete\" mode.\n**Note:** While the slot allows custom buttons, to match\ndesign guidelines, please use the `ui5-button` component.\n**Note:** When the slot is not present, a built-in delete button will be displayed.",
diff --git a/packages/main/src/webComponents/Button/index.tsx b/packages/main/src/webComponents/Button/index.tsx
index cf1c14936f4..73f2956552e 100644
--- a/packages/main/src/webComponents/Button/index.tsx
+++ b/packages/main/src/webComponents/Button/index.tsx
@@ -1,13 +1,13 @@
 'use client';
 
 import '@ui5/webcomponents/dist/Button.js';
-import type { ButtonAccessibilityAttributes } from '@ui5/webcomponents/dist/Button.js';
+import type { ButtonAccessibilityAttributes, ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
 import type ButtonAccessibleRole from '@ui5/webcomponents/dist/types/ButtonAccessibleRole.js';
 import type ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import type ButtonType from '@ui5/webcomponents/dist/types/ButtonType.js';
-import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
+import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
 import { withWebComponent } from '@ui5/webcomponents-react-base';
-import type { MouseEventHandler, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 interface ButtonAttributes {
   /**
@@ -154,17 +154,19 @@ interface ButtonPropTypes
    */
   children?: ReactNode | ReactNode[];
   /**
-   * Fired when the component is activated either with a
-   * mouse/tap or by using the Enter or Space key.
+   * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
    *
-   * **Note:** The event will not be fired if the `disabled`
-   * property is set to `true`.
+   * **Note:** The event will not be fired if the `disabled` property is set to `true`.
+   *
+   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
+   *
+   * **Note:** Available since [v2.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents**.
    *
    * | cancelable | bubbles |
    * | :--------: | :-----: |
-   * | ❌|✅|
+   * | ✅|✅|
    */
-  onClick?: MouseEventHandler<ButtonDomRef>;
+  onClick?: (event: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail>) => void;
 }
 
 /**
diff --git a/packages/main/src/webComponents/CheckBox/index.tsx b/packages/main/src/webComponents/CheckBox/index.tsx
index 020bbdc79bc..0458d1e0497 100644
--- a/packages/main/src/webComponents/CheckBox/index.tsx
+++ b/packages/main/src/webComponents/CheckBox/index.tsx
@@ -88,6 +88,9 @@ interface CheckBoxAttributes {
   /**
    * Defines whether the component is required.
    *
+   * **Note:** We advise against using the text property of the checkbox when there is a
+   * label associated with it to avoid having two required asterisks.
+   *
    * **Note:** Available since [v1.3.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.3.0) of **@ui5/webcomponents**.
    * @default false
    */
diff --git a/packages/main/src/webComponents/Form/index.tsx b/packages/main/src/webComponents/Form/index.tsx
index 93e8f174677..0236ed5a6ab 100644
--- a/packages/main/src/webComponents/Form/index.tsx
+++ b/packages/main/src/webComponents/Form/index.tsx
@@ -2,11 +2,20 @@
 
 import '@ui5/webcomponents/dist/Form.js';
 import type FormItemSpacing from '@ui5/webcomponents/dist/types/FormItemSpacing.js';
+import type TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
 import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
 import type { ReactNode } from 'react';
 
 interface FormAttributes {
+  /**
+   * Defines the accessible ARIA name of the component.
+   *
+   * **Note:** Available since [v2.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  accessibleName?: string | undefined;
+
   /**
    * Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.
    *
@@ -22,6 +31,15 @@ interface FormAttributes {
    */
   emptySpan?: string;
 
+  /**
+   * Defines the compoennt heading level,
+   * set by the `headerText`.
+   *
+   * **Note:** Available since [v2.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents**.
+   * @default "H2"
+   */
+  headerLevel?: TitleLevel | keyof typeof TitleLevel;
+
   /**
    * Defines the header text of the component.
    *
@@ -231,7 +249,7 @@ interface FormPropTypes extends FormAttributes, Omit<CommonProps, keyof FormAttr
  */
 const Form = withWebComponent<FormPropTypes, FormDomRef>(
   'ui5-form',
-  ['emptySpan', 'headerText', 'itemSpacing', 'labelSpan', 'layout'],
+  ['accessibleName', 'emptySpan', 'headerLevel', 'headerText', 'itemSpacing', 'labelSpan', 'layout'],
   [],
   ['header'],
   []
diff --git a/packages/main/src/webComponents/FormGroup/index.tsx b/packages/main/src/webComponents/FormGroup/index.tsx
index 063a4e63fea..0e0e738ce35 100644
--- a/packages/main/src/webComponents/FormGroup/index.tsx
+++ b/packages/main/src/webComponents/FormGroup/index.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import '@ui5/webcomponents/dist/FormGroup.js';
+import type TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
 import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { CommonProps, Ui5DomRef } from '@ui5/webcomponents-react-base';
 import type { ReactNode } from 'react';
@@ -13,6 +14,15 @@ interface FormGroupAttributes {
    */
   columnSpan?: number | undefined;
 
+  /**
+   * Defines the compoennt heading level,
+   * set by the `headerText`.
+   *
+   * **Note:** Available since [v2.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents**.
+   * @default "H3"
+   */
+  headerLevel?: TitleLevel | keyof typeof TitleLevel;
+
   /**
    * Defines header text of the component.
    * @default undefined
@@ -52,7 +62,7 @@ interface FormGroupPropTypes extends FormGroupAttributes, Omit<CommonProps, keyo
  */
 const FormGroup = withWebComponent<FormGroupPropTypes, FormGroupDomRef>(
   'ui5-form-group',
-  ['columnSpan', 'headerText'],
+  ['columnSpan', 'headerLevel', 'headerText'],
   [],
   [],
   []
diff --git a/packages/main/src/webComponents/IllustratedMessage/index.tsx b/packages/main/src/webComponents/IllustratedMessage/index.tsx
index 4ab60ba4819..74f7602cc9e 100644
--- a/packages/main/src/webComponents/IllustratedMessage/index.tsx
+++ b/packages/main/src/webComponents/IllustratedMessage/index.tsx
@@ -15,6 +15,16 @@ interface IllustratedMessageAttributes {
    */
   accessibleNameRef?: string | undefined;
 
+  /**
+   * Defines whether the illustration is decorative.
+   *
+   * When set to `true`, the attributes `role="presentation"` and `aria-hidden="true"` are applied to the SVG element.
+   *
+   * **Note:** Available since [v2.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents-fiori**.
+   * @default false
+   */
+  decorative?: boolean;
+
   /**
    * Determines which illustration breakpoint variant is used.
    *
@@ -147,7 +157,7 @@ interface IllustratedMessagePropTypes
 const IllustratedMessage = withWebComponent<IllustratedMessagePropTypes, IllustratedMessageDomRef>(
   'ui5-illustrated-message',
   ['accessibleNameRef', 'design', 'name', 'subtitleText', 'titleText'],
-  [],
+  ['decorative'],
   ['subtitle', 'title'],
   []
 );
diff --git a/packages/main/src/webComponents/ListItemStandard/index.tsx b/packages/main/src/webComponents/ListItemStandard/index.tsx
index 91ca6e4fe59..c12ea7bfbf8 100644
--- a/packages/main/src/webComponents/ListItemStandard/index.tsx
+++ b/packages/main/src/webComponents/ListItemStandard/index.tsx
@@ -4,9 +4,10 @@ import '@ui5/webcomponents/dist/ListItemStandard.js';
 import type { ListItemAccessibilityAttributes } from '@ui5/webcomponents/dist/ListItem.js';
 import type Highlight from '@ui5/webcomponents/dist/types/Highlight.js';
 import type ListItemType from '@ui5/webcomponents/dist/types/ListItemType.js';
+import type WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js';
 import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
-import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
+import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { ReactNode } from 'react';
 
 interface ListItemStandardAttributes {
@@ -100,6 +101,14 @@ interface ListItemStandardAttributes {
    */
   selected?: boolean;
 
+  /**
+   * Defines the text of the component.
+   *
+   * **Note:** Available since [v2.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents**.
+   * @default undefined
+   */
+  text?: string | undefined;
+
   /**
    * Defines the text of the tooltip that would be displayed for the list item.
    *
@@ -117,6 +126,24 @@ interface ListItemStandardAttributes {
    * @default "Active"
    */
   type?: ListItemType | keyof typeof ListItemType;
+
+  /**
+   * Defines if the text of the component should wrap when it's too long.
+   * When set to "Normal", the content (title, description) will be wrapped
+   * using the `ExpandableText` component.<br/>
+   *
+   * The text can wrap up to 100 characters on small screens (size S) and
+   * up to 300 characters on larger screens (size M and above). When text exceeds
+   * these limits, it truncates with an ellipsis followed by a text expansion trigger.
+   *
+   * Available options are:
+   * - `None` (default) - The text will truncate with an ellipsis.
+   * - `Normal` - The text will wrap (without truncation).
+   *
+   * **Note:** Available since [v2.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents**.
+   * @default "None"
+   */
+  wrappingType?: WrappingType | keyof typeof WrappingType;
 }
 
 interface ListItemStandardDomRef extends Required<ListItemStandardAttributes>, Ui5DomRef {}
@@ -127,7 +154,9 @@ interface ListItemStandardPropTypes
   /**
    * Defines the text of the component.
    *
-   * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+   * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. <br/>
+   * **Note:** Deprecated since version `2.10.0`. Use the `text` property instead. <br/>
+   * Only use the default slot if you need to apply custom text formatting with HTML elements (like `<b>`, `<i>`, etc.).
    */
   children?: ReactNode | ReactNode[];
 
@@ -192,8 +221,10 @@ const ListItemStandard = withWebComponent<ListItemStandardPropTypes, ListItemSta
     'description',
     'highlight',
     'icon',
+    'text',
     'tooltip',
-    'type'
+    'type',
+    'wrappingType'
   ],
   ['iconEnd', 'movable', 'navigated', 'selected'],
   ['deleteButton', 'image'],
diff --git a/packages/main/src/webComponents/Menu/index.tsx b/packages/main/src/webComponents/Menu/index.tsx
index 0d03a422a75..2cf73cbc5dd 100644
--- a/packages/main/src/webComponents/Menu/index.tsx
+++ b/packages/main/src/webComponents/Menu/index.tsx
@@ -6,6 +6,7 @@ import type {
   MenuBeforeOpenEventDetail,
   MenuItemClickEventDetail
 } from '@ui5/webcomponents/dist/Menu.js';
+import type PopoverHorizontalAlign from '@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js';
 import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base';
 import type { ReactNode } from 'react';
@@ -17,6 +18,12 @@ interface MenuAttributes {
    */
   headerText?: string | undefined;
 
+  /**
+   * Determines the horizontal alignment of the menu relative to its opener control.
+   * @default "Start"
+   */
+  horizontalAlign?: PopoverHorizontalAlign | keyof typeof PopoverHorizontalAlign;
+
   /**
    * Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.
    *
@@ -26,7 +33,7 @@ interface MenuAttributes {
   loading?: boolean;
 
   /**
-   * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover..
+   * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.
    *
    * **Note:** Available since [v1.13.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.13.0) of **@ui5/webcomponents**.
    * @default 1000
@@ -34,7 +41,7 @@ interface MenuAttributes {
   loadingDelay?: number;
 
   /**
-   * Indicates if the menu is open
+   * Indicates if the menu is open.
    *
    * **Note:** Available since [v1.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.10.0) of **@ui5/webcomponents**.
    * @default false
@@ -166,7 +173,7 @@ interface MenuPropTypes
  */
 const Menu = withWebComponent<MenuPropTypes, MenuDomRef>(
   'ui5-menu',
-  ['headerText', 'loadingDelay', 'opener'],
+  ['headerText', 'horizontalAlign', 'loadingDelay', 'opener'],
   ['loading', 'open'],
   [],
   ['before-close', 'before-open', 'close', 'item-click', 'open']
diff --git a/packages/main/src/webComponents/Search/index.tsx b/packages/main/src/webComponents/Search/index.tsx
index a2daa70782c..ca90bc4cffd 100644
--- a/packages/main/src/webComponents/Search/index.tsx
+++ b/packages/main/src/webComponents/Search/index.tsx
@@ -8,16 +8,16 @@ import type { ReactNode } from 'react';
 
 interface SearchAttributes {
   /**
-   * Defines the accessible ARIA name of the component.
+   * Defines the accessible ARIA description of the field.
    * @default undefined
    */
-  accessibleName?: string | undefined;
+  accessibleDescription?: string | undefined;
 
   /**
-   * Defines whether the component is collapsed.
-   * @default false
+   * Defines the accessible ARIA name of the component.
+   * @default undefined
    */
-  collapsed?: boolean;
+  accessibleName?: string | undefined;
 
   /**
    * Indicates whether a loading indicator should be shown in the popup.
@@ -44,12 +44,6 @@ interface SearchAttributes {
    */
   placeholder?: string | undefined;
 
-  /**
-   * Defines the tooltip of the search icon component.
-   * @default undefined
-   */
-  searchIconTooltip?: string | undefined;
-
   /**
    * Defines whether the clear icon of the search will be shown.
    * @default false
@@ -197,8 +191,8 @@ interface SearchPropTypes
  */
 const Search = withWebComponent<SearchPropTypes, SearchDomRef>(
   'ui5-search',
-  ['accessibleName', 'placeholder', 'searchIconTooltip', 'value'],
-  ['collapsed', 'loading', 'noTypeahead', 'open', 'showClearIcon'],
+  ['accessibleDescription', 'accessibleName', 'placeholder', 'value'],
+  ['loading', 'noTypeahead', 'open', 'showClearIcon'],
   ['action', 'illustration', 'messageArea', 'scopes'],
   ['close', 'input', 'open', 'scope-change', 'search']
 );
diff --git a/packages/main/src/webComponents/ShellBar/index.tsx b/packages/main/src/webComponents/ShellBar/index.tsx
index ca72f8adca0..48b1b0a84fc 100644
--- a/packages/main/src/webComponents/ShellBar/index.tsx
+++ b/packages/main/src/webComponents/ShellBar/index.tsx
@@ -9,7 +9,8 @@ import type {
   ShellBarNotificationsClickEventDetail,
   ShellBarProductSwitchClickEventDetail,
   ShellBarProfileClickEventDetail,
-  ShellBarSearchButtonEventDetail
+  ShellBarSearchButtonEventDetail,
+  ShellBarSearchFieldToggleEventDetail
 } from '@ui5/webcomponents-fiori/dist/ShellBar.js';
 import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
@@ -28,6 +29,7 @@ interface ShellBarAttributes {
    * - **product** - `product.expanded` and `product.hasPopup`.
    * - **search** - `search.hasPopup`.
    * - **overflow** - `overflow.expanded` and `overflow.hasPopup`.
+   * - **branding** - `branding.name`.
    *
    * The accessibility attributes support the following values:
    *
@@ -50,6 +52,22 @@ interface ShellBarAttributes {
    */
   accessibilityAttributes?: ShellBarAccessibilityAttributes;
 
+  /**
+   * Disables the automatic search field expansion/collapse when the available space is not enough.
+   *
+   * **Note:** The `disableSearchCollapse` property is in an experimental state and is a subject to change.
+   * @default false
+   */
+  disableSearchCollapse?: boolean;
+
+  /**
+   * Defines the visibility state of the search button.
+   *
+   * **Note:** The `hideSearchButton` property is in an experimental state and is a subject to change.
+   * @default false
+   */
+  hideSearchButton?: boolean;
+
   /**
    * Defines the `notificationsCount`,
    * displayed in the notification icon top-right corner.
@@ -102,6 +120,14 @@ interface ShellBarDomRef extends Required<ShellBarAttributes>, Ui5DomRef {
    */
   closeOverflow: () => void;
 
+  /**
+   * Returns the `search` icon DOM ref.
+   *
+   * **Note:** Available since [v2.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents-fiori**.
+   * @returns {Promise<HTMLElement | null>} - The search icon DOM ref
+   */
+  getSearchButtonDomRef: () => Promise<HTMLElement | null>;
+
   /**
    * Returns the `logo` DOM ref.
    */
@@ -148,6 +174,7 @@ interface ShellBarPropTypes
       | 'onProductSwitchClick'
       | 'onProfileClick'
       | 'onSearchButtonClick'
+      | 'onSearchFieldToggle'
     > {
   /**
    * Defines the assistant slot.
@@ -332,6 +359,17 @@ interface ShellBarPropTypes
    * | ✅|✅|
    */
   onSearchButtonClick?: (event: Ui5CustomEvent<ShellBarDomRef, ShellBarSearchButtonEventDetail>) => void;
+
+  /**
+   * Fired, when the search field is expanded or collapsed.
+   *
+   * **Note:** Available since [v2.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents-fiori**.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
+   */
+  onSearchFieldToggle?: (event: Ui5CustomEvent<ShellBarDomRef, ShellBarSearchFieldToggleEventDetail>) => void;
 }
 
 /**
@@ -362,7 +400,7 @@ interface ShellBarPropTypes
 const ShellBar = withWebComponent<ShellBarPropTypes, ShellBarDomRef>(
   'ui5-shellbar',
   ['accessibilityAttributes', 'notificationsCount', 'primaryTitle', 'secondaryTitle'],
-  ['showNotifications', 'showProductSwitch', 'showSearchField'],
+  ['disableSearchCollapse', 'hideSearchButton', 'showNotifications', 'showProductSwitch', 'showSearchField'],
   ['assistant', 'content', 'logo', 'menuItems', 'profile', 'searchField', 'startButton'],
   [
     'content-item-visibility-change',
@@ -371,7 +409,8 @@ const ShellBar = withWebComponent<ShellBarPropTypes, ShellBarDomRef>(
     'notifications-click',
     'product-switch-click',
     'profile-click',
-    'search-button-click'
+    'search-button-click',
+    'search-field-toggle'
   ]
 );
 
diff --git a/packages/main/src/webComponents/ShellBarItem/index.tsx b/packages/main/src/webComponents/ShellBarItem/index.tsx
index f03a844f2b3..45225235e2b 100644
--- a/packages/main/src/webComponents/ShellBarItem/index.tsx
+++ b/packages/main/src/webComponents/ShellBarItem/index.tsx
@@ -45,7 +45,7 @@ interface ShellBarItemAttributes {
   /**
    * Defines the item text.
    *
-   *   **Note:** The text is only displayed inside the overflow popover list view.
+   * **Note:** The text is only displayed inside the overflow popover list view.
    * @default undefined
    */
   text?: string | undefined;
diff --git a/packages/main/src/webComponents/ShellBarSearch/index.tsx b/packages/main/src/webComponents/ShellBarSearch/index.tsx
new file mode 100644
index 00000000000..fefb91470aa
--- /dev/null
+++ b/packages/main/src/webComponents/ShellBarSearch/index.tsx
@@ -0,0 +1,194 @@
+'use client';
+
+import '@ui5/webcomponents-fiori/dist/ShellBarSearch.js';
+import type { SearchFieldScopeSelectionChangeDetails } from '@ui5/webcomponents-fiori/dist/SearchField.js';
+import { withWebComponent } from '@ui5/webcomponents-react-base';
+import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
+import type { ReactNode } from 'react';
+
+interface ShellBarSearchAttributes {
+  /**
+   * Defines the accessible ARIA description of the field.
+   * @default undefined
+   */
+  accessibleDescription?: string | undefined;
+
+  /**
+   * Defines the accessible ARIA name of the component.
+   * @default undefined
+   */
+  accessibleName?: string | undefined;
+
+  /**
+   * Indicates whether a loading indicator should be shown in the popup.
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Defines whether the value will be autcompleted to match an item.
+   * @default false
+   */
+  noTypeahead?: boolean;
+
+  /**
+   * Indicates whether the items picker is open.
+   * @default false
+   */
+  open?: boolean;
+
+  /**
+   * Defines a short hint intended to aid the user with data entry when the
+   * component has no value.
+   * @default undefined
+   */
+  placeholder?: string | undefined;
+
+  /**
+   * Defines whether the clear icon of the search will be shown.
+   * @default false
+   */
+  showClearIcon?: boolean;
+
+  /**
+   * Defines the value of the component.
+   *
+   * **Note:** The property is updated upon typing.
+   */
+  value?: string;
+}
+
+interface ShellBarSearchDomRef extends Required<ShellBarSearchAttributes>, Ui5DomRef {}
+
+interface ShellBarSearchPropTypes
+  extends ShellBarSearchAttributes,
+    Omit<
+      CommonProps,
+      | keyof ShellBarSearchAttributes
+      | 'action'
+      | 'children'
+      | 'illustration'
+      | 'messageArea'
+      | 'scopes'
+      | 'onClose'
+      | 'onInput'
+      | 'onOpen'
+      | 'onScopeChange'
+      | 'onSearch'
+    > {
+  /**
+   * Defines the popup footer action button.
+   *
+   * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="action"`).
+   * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
+   *
+   * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
+   * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   */
+  action?: UI5WCSlotsNode;
+
+  /**
+   * Defines the Search suggestion items.
+   */
+  children?: ReactNode | ReactNode[];
+
+  /**
+   * Defines the illustrated message to be shown in the popup.
+   *
+   * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="illustration"`).
+   * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
+   *
+   * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
+   * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   */
+  illustration?: UI5WCSlotsNode;
+
+  /**
+   * Defines the illustrated message to be shown in the popup.
+   *
+   * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="messageArea"`).
+   * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
+   *
+   * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
+   * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   */
+  messageArea?: UI5WCSlotsNode;
+
+  /**
+   * Defines the component scope options.
+   *
+   * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="scopes"`).
+   * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
+   *
+   * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
+   * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   */
+  scopes?: UI5WCSlotsNode;
+  /**
+   * Fired when the popup is closed.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|❌|
+   */
+  onClose?: (event: Ui5CustomEvent<ShellBarSearchDomRef>) => void;
+
+  /**
+   * Fired when typing in input or clear icon is pressed.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
+   */
+  onInput?: (event: Ui5CustomEvent<ShellBarSearchDomRef>) => void;
+
+  /**
+   * Fired when the popup is opened.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|❌|
+   */
+  onOpen?: (event: Ui5CustomEvent<ShellBarSearchDomRef>) => void;
+
+  /**
+   * Fired when the scope has changed.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ❌|✅|
+   */
+  onScopeChange?: (event: Ui5CustomEvent<ShellBarSearchDomRef, SearchFieldScopeSelectionChangeDetails>) => void;
+
+  /**
+   * Fired when the user has triggered search with Enter key or Search Button press.
+   *
+   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
+   *
+   * | cancelable | bubbles |
+   * | :--------: | :-----: |
+   * | ✅|✅|
+   */
+  onSearch?: (event: Ui5CustomEvent<ShellBarSearchDomRef>) => void;
+}
+
+/**
+ * Search field for the ShellBar component.
+ *
+ * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
+ *
+ * @since [2.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.10.0) of __@ui5/webcomponents-fiori__.
+ * @experimental
+ */
+const ShellBarSearch = withWebComponent<ShellBarSearchPropTypes, ShellBarSearchDomRef>(
+  'ui5-shellbar-search',
+  ['accessibleDescription', 'accessibleName', 'placeholder', 'value'],
+  ['loading', 'noTypeahead', 'open', 'showClearIcon'],
+  ['action', 'illustration', 'messageArea', 'scopes'],
+  ['close', 'input', 'open', 'scope-change', 'search']
+);
+
+ShellBarSearch.displayName = 'ShellBarSearch';
+
+export { ShellBarSearch };
+export type { ShellBarSearchDomRef, ShellBarSearchPropTypes };
diff --git a/packages/main/src/webComponents/SideNavigationGroup/index.tsx b/packages/main/src/webComponents/SideNavigationGroup/index.tsx
index 1033a11a7a4..7dd4d71d70f 100644
--- a/packages/main/src/webComponents/SideNavigationGroup/index.tsx
+++ b/packages/main/src/webComponents/SideNavigationGroup/index.tsx
@@ -31,7 +31,8 @@ interface SideNavigationGroupAttributes {
   /**
    * Defines the tooltip of the component.
    *
-   * A tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).
+   * A tooltip attribute should be provided, in order to represent meaning/function,
+   * when the component is collapsed ("icon only" design is visualized) or the item text is truncated.
    *
    * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-fiori**.
    * @default undefined
diff --git a/packages/main/src/webComponents/SideNavigationItem/index.tsx b/packages/main/src/webComponents/SideNavigationItem/index.tsx
index 00c01ccc820..bc2f9ef2b57 100644
--- a/packages/main/src/webComponents/SideNavigationItem/index.tsx
+++ b/packages/main/src/webComponents/SideNavigationItem/index.tsx
@@ -102,7 +102,8 @@ interface SideNavigationItemAttributes {
   /**
    * Defines the tooltip of the component.
    *
-   * A tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).
+   * A tooltip attribute should be provided, in order to represent meaning/function,
+   * when the component is collapsed ("icon only" design is visualized) or the item text is truncated.
    *
    * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-fiori**.
    * @default undefined
diff --git a/packages/main/src/webComponents/SideNavigationSubItem/index.tsx b/packages/main/src/webComponents/SideNavigationSubItem/index.tsx
index ee0a4bcb12b..768d5b9ece9 100644
--- a/packages/main/src/webComponents/SideNavigationSubItem/index.tsx
+++ b/packages/main/src/webComponents/SideNavigationSubItem/index.tsx
@@ -95,7 +95,8 @@ interface SideNavigationSubItemAttributes {
   /**
    * Defines the tooltip of the component.
    *
-   * A tooltip attribute should be provided, in order to represent meaning/function, when the component is collapsed(icon only is visualized).
+   * A tooltip attribute should be provided, in order to represent meaning/function,
+   * when the component is collapsed ("icon only" design is visualized) or the item text is truncated.
    *
    * **Note:** Available since [v2.0.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.0.0) of **@ui5/webcomponents-fiori**.
    * @default undefined
diff --git a/packages/main/src/webComponents/TableHeaderCell/index.tsx b/packages/main/src/webComponents/TableHeaderCell/index.tsx
index a1a0ba1360b..e2468570216 100644
--- a/packages/main/src/webComponents/TableHeaderCell/index.tsx
+++ b/packages/main/src/webComponents/TableHeaderCell/index.tsx
@@ -24,22 +24,20 @@ interface TableHeaderCellAttributes {
    */
   importance?: number;
 
-  /**
-   * Defines the maximum width of the column.
-   * @default "auto"
-   */
-  maxWidth?: string;
-
   /**
    * Defines the minimum width of the column.
    *
    * If the table is in `Popin` mode and the minimum width does not fit anymore,
    * the column will move into the popin.
    *
-   * **Note:** If `minWidth` has the `auto` value, the table ensures that the column is wider than at least `3rem`.
-   * @default "auto"
+   * By default, the table prevents the column from becoming too small.
+   * Changing this value to a small value might lead to accessibility issues.
+   *
+   * **Note:** This property only takes effect for columns with a [\<percentage\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) value
+   * or the default width.
+   * @default undefined
    */
-  minWidth?: string;
+  minWidth?: string | undefined;
 
   /**
    * Defines if the column is hidden in the popin.
@@ -69,10 +67,16 @@ interface TableHeaderCellAttributes {
   sortIndicator?: SortOrder | keyof typeof SortOrder;
 
   /**
-   * Defines the width of column.
-   * @default "auto"
+   * Defines the width of the column.
+   *
+   * By default, the column will grow and shrink according to the available space.
+   * This will distribute the space proportionally among all columns with no specific width set.
+   *
+   * See [\<length\>](https://developer.mozilla.org/en-US/docs/Web/CSS/length) and
+   * [\<percentage\>](https://developer.mozilla.org/en-US/docs/Web/CSS/percentage) for possible width values.
+   * @default undefined
    */
-  width?: string;
+  width?: string | undefined;
 }
 
 interface TableHeaderCellDomRef extends Required<TableHeaderCellAttributes>, Ui5DomRef {}
@@ -116,7 +120,7 @@ interface TableHeaderCellPropTypes
  */
 const TableHeaderCell = withWebComponent<TableHeaderCellPropTypes, TableHeaderCellDomRef>(
   'ui5-table-header-cell',
-  ['horizontalAlign', 'importance', 'maxWidth', 'minWidth', 'popinText', 'sortIndicator', 'width'],
+  ['horizontalAlign', 'importance', 'minWidth', 'popinText', 'sortIndicator', 'width'],
   ['popinHidden'],
   ['action'],
   []
diff --git a/packages/main/src/webComponents/ToggleButton/index.tsx b/packages/main/src/webComponents/ToggleButton/index.tsx
index ec7809938be..5af0f700e57 100644
--- a/packages/main/src/webComponents/ToggleButton/index.tsx
+++ b/packages/main/src/webComponents/ToggleButton/index.tsx
@@ -1,13 +1,13 @@
 'use client';
 
 import '@ui5/webcomponents/dist/ToggleButton.js';
-import type { ButtonAccessibilityAttributes } from '@ui5/webcomponents/dist/Button.js';
+import type { ButtonAccessibilityAttributes, ButtonClickEventDetail } from '@ui5/webcomponents/dist/Button.js';
 import type ButtonAccessibleRole from '@ui5/webcomponents/dist/types/ButtonAccessibleRole.js';
 import type ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import type ButtonType from '@ui5/webcomponents/dist/types/ButtonType.js';
-import type { CommonProps, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
+import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base';
 import { withWebComponent } from '@ui5/webcomponents-react-base';
-import type { MouseEventHandler, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 interface ToggleButtonAttributes {
   /**
@@ -160,17 +160,19 @@ interface ToggleButtonPropTypes
    */
   children?: ReactNode | ReactNode[];
   /**
-   * Fired when the component is activated either with a
-   * mouse/tap or by using the Enter or Space key.
+   * Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.
    *
-   * **Note:** The event will not be fired if the `disabled`
-   * property is set to `true`.
+   * **Note:** The event will not be fired if the `disabled` property is set to `true`.
+   *
+   * **Note:** Call `event.preventDefault()` inside the handler of this event to prevent its default action/s.
+   *
+   * **Note:** Available since [v2.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents**.
    *
    * | cancelable | bubbles |
    * | :--------: | :-----: |
-   * | ❌|✅|
+   * | ✅|✅|
    */
-  onClick?: MouseEventHandler<ToggleButtonDomRef>;
+  onClick?: (event: Ui5CustomEvent<ToggleButtonDomRef, ButtonClickEventDetail>) => void;
 }
 
 /**
diff --git a/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx b/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx
index 81ece0264e5..5eb4cf6a94b 100644
--- a/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx
+++ b/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx
@@ -77,6 +77,7 @@ export const WithLogic = {
         setSelectedCountries(selectedTokens);
       }
     };
+    console.log(selectedCountries);
     return (
       <>
         <Tokenizer {...args} onTokenDelete={handleTokenDelete} onSelectionChange={handleSelectionChange}>
diff --git a/packages/main/src/webComponents/Tokenizer/index.tsx b/packages/main/src/webComponents/Tokenizer/index.tsx
index 400ca78effe..81721ffafa1 100644
--- a/packages/main/src/webComponents/Tokenizer/index.tsx
+++ b/packages/main/src/webComponents/Tokenizer/index.tsx
@@ -7,6 +7,7 @@ import type {
 } from '@ui5/webcomponents/dist/Tokenizer.js';
 import { withWebComponent } from '@ui5/webcomponents-react-base';
 import type { CommonProps, Ui5CustomEvent, Ui5DomRef } from '@ui5/webcomponents-react-base';
+import type { ReactNode } from 'react';
 
 interface TokenizerAttributes {
   /**
@@ -63,7 +64,11 @@ interface TokenizerDomRef extends Required<TokenizerAttributes>, Ui5DomRef {}
 
 interface TokenizerPropTypes
   extends TokenizerAttributes,
-    Omit<CommonProps, keyof TokenizerAttributes | 'onSelectionChange' | 'onTokenDelete'> {
+    Omit<CommonProps, keyof TokenizerAttributes | 'children' | 'onSelectionChange' | 'onTokenDelete'> {
+  /**
+   * Defines the tokens to be displayed.
+   */
+  children?: ReactNode | ReactNode[];
   /**
    * Fired when token selection is changed by user interaction
    *
diff --git a/packages/main/src/webComponents/TreeItem/index.tsx b/packages/main/src/webComponents/TreeItem/index.tsx
index 9ad7bdd23fd..86c62785d21 100644
--- a/packages/main/src/webComponents/TreeItem/index.tsx
+++ b/packages/main/src/webComponents/TreeItem/index.tsx
@@ -154,7 +154,7 @@ interface TreeItemDomRef extends Required<TreeItemAttributes>, Ui5DomRef {
 
 interface TreeItemPropTypes
   extends TreeItemAttributes,
-    Omit<CommonProps, keyof TreeItemAttributes | 'children' | 'deleteButton' | 'onDetailClick'> {
+    Omit<CommonProps, keyof TreeItemAttributes | 'children' | 'deleteButton' | 'image' | 'onDetailClick'> {
   /**
    * Defines the items of the component.
    *
@@ -177,6 +177,23 @@ interface TreeItemPropTypes
    * **Note:** Available since [v1.9.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.9.0) of **@ui5/webcomponents**.
    */
   deleteButton?: UI5WCSlotsNode;
+
+  /**
+   * **Note:** While the slot allows option for setting custom avatar, to match the
+   * design guidelines, please use the `Avatar` with size XS.
+   *
+   * **Note:** If bigger `Avatar` needs to be used, then the size of the
+   * `TreeItem` should be customized in order to fit.
+   *
+   * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="image"`).
+   * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
+   *
+   * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
+   * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   *
+   * **Note:** Available since [v2.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents**.
+   */
+  image?: UI5WCSlotsNode;
   /**
    * Fired when the user clicks on the detail button when type is `Detail`.
    *
@@ -211,7 +228,7 @@ const TreeItem = withWebComponent<TreeItemPropTypes, TreeItemDomRef>(
     'type'
   ],
   ['expanded', 'hasChildren', 'indeterminate', 'movable', 'navigated', 'selected'],
-  ['deleteButton'],
+  ['deleteButton', 'image'],
   ['detail-click']
 );
 
diff --git a/packages/main/src/webComponents/TreeItemCustom/index.tsx b/packages/main/src/webComponents/TreeItemCustom/index.tsx
index 24dd7465d23..fc62892929e 100644
--- a/packages/main/src/webComponents/TreeItemCustom/index.tsx
+++ b/packages/main/src/webComponents/TreeItemCustom/index.tsx
@@ -148,7 +148,10 @@ interface TreeItemCustomDomRef extends Required<TreeItemCustomAttributes>, Ui5Do
 
 interface TreeItemCustomPropTypes
   extends TreeItemCustomAttributes,
-    Omit<CommonProps, keyof TreeItemCustomAttributes | 'children' | 'content' | 'deleteButton' | 'onDetailClick'> {
+    Omit<
+      CommonProps,
+      keyof TreeItemCustomAttributes | 'children' | 'content' | 'deleteButton' | 'image' | 'onDetailClick'
+    > {
   /**
    * Defines the items of the component.
    *
@@ -182,6 +185,23 @@ interface TreeItemCustomPropTypes
    * **Note:** Available since [v1.9.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.9.0) of **@ui5/webcomponents**.
    */
   deleteButton?: UI5WCSlotsNode;
+
+  /**
+   * **Note:** While the slot allows option for setting custom avatar, to match the
+   * design guidelines, please use the `Avatar` with size XS.
+   *
+   * **Note:** If bigger `Avatar` needs to be used, then the size of the
+   * `TreeItem` should be customized in order to fit.
+   *
+   * __Note:__ The content of the prop will be rendered into a [&lt;slot&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="image"`).
+   * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers.
+   *
+   * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component.
+   * Learn more about it [here](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs).
+   *
+   * **Note:** Available since [v2.10.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v2.10.0) of **@ui5/webcomponents**.
+   */
+  image?: UI5WCSlotsNode;
   /**
    * Fired when the user clicks on the detail button when type is `Detail`.
    *
@@ -210,7 +230,7 @@ const TreeItemCustom = withWebComponent<TreeItemCustomPropTypes, TreeItemCustomD
   'ui5-tree-item-custom',
   ['accessibilityAttributes', 'accessibleName', 'additionalTextState', 'highlight', 'icon', 'tooltip', 'type'],
   ['expanded', 'hasChildren', 'hideSelectionElement', 'indeterminate', 'movable', 'navigated', 'selected'],
-  ['content', 'deleteButton'],
+  ['content', 'deleteButton', 'image'],
   ['detail-click']
 );
 

From 73637a6a54d96555066cdc8f6131bc8b874477fd Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 7 May 2025 12:05:07 +0200
Subject: [PATCH 03/17] update `ListItemStandard` implementations

---
 docs/knowledge-base/ChangeEvents.mdx          | 12 ++-----
 docs/knowledge-base/Styling.mdx               |  6 ++--
 .../test/UI5WebComponentsChild.cy.tsx         |  2 +-
 .../defaults/Column/ColumnHeaderModal.tsx     | 35 +++++++++++--------
 .../SelectDialog/SelectDialog.cy.tsx          | 10 +++---
 .../components/SelectDialog/SelectDialog.mdx  |  9 ++---
 .../SelectDialog/SelectDialog.stories.tsx     | 10 +++---
 .../VariantManagement/VariantItem.tsx         |  4 ++-
 .../src/webComponents/Card/Card.stories.tsx   |  6 ++--
 .../webComponents/Dialog/Dialog.stories.tsx   |  6 ++--
 .../FlexibleColumnLayout.stories.tsx          | 26 ++++++--------
 .../src/webComponents/List/List.stories.tsx   | 12 +++----
 .../src/webComponents/Panel/Panel.stories.tsx | 14 ++++----
 .../webComponents/Popover/Popover.stories.tsx |  6 ++--
 .../ResponsivePopover.stories.tsx             |  6 ++--
 .../ShellBar/ShellBar.stories.tsx             |  6 ++--
 .../UserSettingsDialog.stories.tsx            |  8 ++---
 17 files changed, 85 insertions(+), 93 deletions(-)

diff --git a/docs/knowledge-base/ChangeEvents.mdx b/docs/knowledge-base/ChangeEvents.mdx
index da56c9a8fc8..984881943ad 100644
--- a/docs/knowledge-base/ChangeEvents.mdx
+++ b/docs/knowledge-base/ChangeEvents.mdx
@@ -46,15 +46,9 @@ const onSelectionChange = (event) => {
 };
 
 <List mode={ListSelectionMode.MultiSelect} onSelectionChange={onSelectionChange}>
-  <ListItemStandard additionalText="3" data-custom="custom value of list item 1">
-    List Item 1
-  </ListItemStandard>
-  <ListItemStandard additionalText="2" data-custom="custom value of list item 2">
-    List Item 2
-  </ListItemStandard>
-  <ListItemStandard additionalText="1" data-custom="custom value of list item 3">
-    List Item 3
-  </ListItemStandard>
+  <ListItemStandard additionalText="3" data-custom="custom value of list item 1" text="List Item 1" />
+  <ListItemStandard additionalText="2" data-custom="custom value of list item 2" text="List Item 2" />
+  <ListItemStandard additionalText="1" data-custom="custom value of list item 3" text="List Item 3" />
 </List>;
 ```
 
diff --git a/docs/knowledge-base/Styling.mdx b/docs/knowledge-base/Styling.mdx
index 9b8a1bad96b..d0a724e0a26 100644
--- a/docs/knowledge-base/Styling.mdx
+++ b/docs/knowledge-base/Styling.mdx
@@ -163,9 +163,9 @@ function MyComponent() {
       className="card"
     >
       <List>
-        <ListItemStandard description="Software Architect">Richard Wilson</ListItemStandard>
-        <ListItemStandard description="Visual Designer">Elena Petrova</ListItemStandard>
-        <ListItemStandard description="Quality Specialist">John Miller</ListItemStandard>
+        <ListItemStandard description="Software Architect" text="Richard Wilson" />
+        <ListItemStandard description="Visual Designer" text="Elena Petrova" />
+        <ListItemStandard description="Quality Specialist" text="John Miller" />
       </List>
     </Card>
   );
diff --git a/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx b/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx
index ddcfe1e7b4b..6fca438f41d 100644
--- a/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx
+++ b/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx
@@ -125,7 +125,7 @@ describe('UI5 Web Components - Child Commands', () => {
   it('click list item', () => {
     cy.mount(
       <List selectionMode="Multiple">
-        <ListItemStandard data-testid="s">ListItemStandard</ListItemStandard>
+        <ListItemStandard data-testid="s" text="ListItemStandard" />
         <ListItemCustom data-testid="c">ListItemCustom</ListItemCustom>
       </List>
     );
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx
index 21c7c1809ba..c74a8aeeb0b 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx
@@ -195,24 +195,26 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
         data-component-name="ATHeaderPopoverList"
       >
         {isSortedAscending && (
-          <ListItemStandard type={ListItemType.Active} icon={iconDecline} data-sort="clear">
-            {clearSortingText}
-          </ListItemStandard>
+          <ListItemStandard type={ListItemType.Active} icon={iconDecline} data-sort="clear" text={clearSortingText} />
         )}
         {showSort && !isSortedAscending && (
-          <ListItemStandard type={ListItemType.Active} icon={iconSortAscending} data-sort="asc">
-            {sortAscendingText}
-          </ListItemStandard>
+          <ListItemStandard
+            type={ListItemType.Active}
+            icon={iconSortAscending}
+            data-sort="asc"
+            text={sortAscendingText}
+          />
         )}
         {showSort && !isSortedDescending && (
-          <ListItemStandard type={ListItemType.Active} icon={iconSortDescending} data-sort="desc">
-            {sortDescendingText}
-          </ListItemStandard>
+          <ListItemStandard
+            type={ListItemType.Active}
+            icon={iconSortDescending}
+            data-sort="desc"
+            text={sortDescendingText}
+          />
         )}
         {isSortedDescending && (
-          <ListItemStandard type={ListItemType.Active} icon={iconDecline} data-sort="clear">
-            {clearSortingText}
-          </ListItemStandard>
+          <ListItemStandard type={ListItemType.Active} icon={iconDecline} data-sort="clear" text={clearSortingText} />
         )}
         {showFilter && (
           <ListItemCustom type={ListItemType.Inactive} onKeyDown={handleCustomLiKeyDown} accessibleName={filterText}>
@@ -244,9 +246,12 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
           </ListItemCustom>
         )}
         {showGroup && (
-          <ListItemStandard type={ListItemType.Active} icon={iconGroup} data-sort={'group'}>
-            {column.isGrouped ? ungroupText : groupText}
-          </ListItemStandard>
+          <ListItemStandard
+            type={ListItemType.Active}
+            icon={iconGroup}
+            data-sort={'group'}
+            text={column.isGrouped ? ungroupText : groupText}
+          />
         )}
       </List>
     </Popover>
diff --git a/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx b/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx
index ce9ace8643c..e3256aa9e0e 100644
--- a/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx
+++ b/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx
@@ -4,11 +4,11 @@ import { useState } from 'react';
 import type { ListPropTypes, SelectDialogPropTypes } from '../..';
 import { Button, SelectDialog, ListItemStandard } from '../..';
 
-const listItems = new Array(5).fill('o_O').map((_, index) => (
-  <ListItemStandard key={index} data-li={index} description={`description${index}`}>
-    {`Product${index}`}
-  </ListItemStandard>
-));
+const listItems = new Array(5)
+  .fill('o_O')
+  .map((_, index) => (
+    <ListItemStandard key={index} data-li={index} description={`description${index}`} text={`Product${index}`} />
+  ));
 
 describe('SelectDialog', () => {
   it('Basic', () => {
diff --git a/packages/main/src/components/SelectDialog/SelectDialog.mdx b/packages/main/src/components/SelectDialog/SelectDialog.mdx
index e42bf4406e9..3c5b8f538c6 100644
--- a/packages/main/src/components/SelectDialog/SelectDialog.mdx
+++ b/packages/main/src/components/SelectDialog/SelectDialog.mdx
@@ -34,9 +34,7 @@ const MyComponentWithSelectDialog = () => {
         Open SelectDialog
       </Button>
       <SelectDialog open={dialogIsOpen} headerText="Select Product">
-        <ListItemStandard image="pathToImg" description="description">
-          Product
-        </ListItemStandard>
+        <ListItemStandard image="pathToImg" description="description" text="Product" />
       </SelectDialog>
     </>
   );
@@ -154,9 +152,8 @@ const MultiSelectDialog = () => {
                 data-description={`${currentProduct.description}${index}`}
                 key={`${currentProduct.text}${index}`}
                 selected={selectedItems[description]}
-              >
-                {currentProduct.text}
-              </ListItemStandard>
+                text={currentProduct.text}
+              />
             );
           })
           .filter(Boolean)}
diff --git a/packages/main/src/components/SelectDialog/SelectDialog.stories.tsx b/packages/main/src/components/SelectDialog/SelectDialog.stories.tsx
index b6961c8541d..05f0a2ceca7 100644
--- a/packages/main/src/components/SelectDialog/SelectDialog.stories.tsx
+++ b/packages/main/src/components/SelectDialog/SelectDialog.stories.tsx
@@ -58,9 +58,8 @@ export const Default: Story = {
                 image={<img src={currentProduct.img} alt="Example Image" />}
                 description={`${currentProduct.description}${index}`}
                 key={`${currentProduct.text}${index}`}
-              >
-                {currentProduct.text}
-              </ListItemStandard>
+                text={currentProduct.text}
+              />
             );
           })}
         </SelectDialog>
@@ -161,9 +160,8 @@ export const MultiSelect: Story = {
                   data-description={`${currentProduct.description}${index}`}
                   key={`${currentProduct.text}${index}`}
                   selected={selectedItems[description]}
-                >
-                  {currentProduct.text}
-                </ListItemStandard>
+                  text={currentProduct.text}
+                />
               );
             })
             .filter(Boolean)}
diff --git a/packages/main/src/components/VariantManagement/VariantItem.tsx b/packages/main/src/components/VariantManagement/VariantItem.tsx
index 9356cd59791..b41388a658e 100644
--- a/packages/main/src/components/VariantManagement/VariantItem.tsx
+++ b/packages/main/src/components/VariantManagement/VariantItem.tsx
@@ -102,12 +102,14 @@ const VariantItem = forwardRef<ListItemStandardDomRef, VariantItemPropTypes>((pr
     }
   }, [selected]);
 
+  // ToDo: rename `children` to `text` in next major release (check `ListItemStandard`)
   // inputProps are passed through to input components used in the configuration dialogs
-  const { manageViewsInputProps: _0, saveViewInputProps: _1, ...rest } = props;
+  const { manageViewsInputProps: _0, saveViewInputProps: _1, children: _2, ...rest } = props;
 
   return (
     <ListItemStandard
       {...rest}
+      text={children}
       ref={componentRef}
       className={clsx(classNames.variantItem)}
       data-is-default={isDefault}
diff --git a/packages/main/src/webComponents/Card/Card.stories.tsx b/packages/main/src/webComponents/Card/Card.stories.tsx
index 8901e992164..66afd2313a4 100644
--- a/packages/main/src/webComponents/Card/Card.stories.tsx
+++ b/packages/main/src/webComponents/Card/Card.stories.tsx
@@ -39,9 +39,9 @@ export const Default: Story = {
     return (
       <Card {...args}>
         <List>
-          <ListItemStandard description="Software Architect">Richard Wilson</ListItemStandard>
-          <ListItemStandard description="Visual Designer">Elena Petrova</ListItemStandard>
-          <ListItemStandard description="Quality Specialist">John Miller</ListItemStandard>
+          <ListItemStandard description="Software Architect" text="Richard Wilson" />
+          <ListItemStandard description="Visual Designer" text="Elena Petrova" />
+          <ListItemStandard description="Quality Specialist" text="John Miller" />
         </List>
       </Card>
     );
diff --git a/packages/main/src/webComponents/Dialog/Dialog.stories.tsx b/packages/main/src/webComponents/Dialog/Dialog.stories.tsx
index 8fddda594d3..138386dcb94 100644
--- a/packages/main/src/webComponents/Dialog/Dialog.stories.tsx
+++ b/packages/main/src/webComponents/Dialog/Dialog.stories.tsx
@@ -15,9 +15,9 @@ const meta = {
   args: {
     children: (
       <List>
-        <ListItemStandard additionalText="Fruits">Apples</ListItemStandard>
-        <ListItemStandard additionalText="Fruits">Bananas</ListItemStandard>
-        <ListItemStandard additionalText="Vegetables">Potato</ListItemStandard>
+        <ListItemStandard additionalText="Fruits" text="Apples" />
+        <ListItemStandard additionalText="Fruits" text="Bananas" />
+        <ListItemStandard additionalText="Vegetables" text="Potato" />
       </List>
     ),
     headerText: 'Dialog Header',
diff --git a/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx b/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx
index ae05900c2f1..2eed1bbd325 100644
--- a/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx
+++ b/packages/main/src/webComponents/FlexibleColumnLayout/FlexibleColumnLayout.stories.tsx
@@ -44,23 +44,23 @@ export const Default: Story = {
         layout={args.layout}
         startColumn={
           <List headerText="Start Column List">
-            <ListItemStandard>List Item 1</ListItemStandard>
-            <ListItemStandard>List Item 2</ListItemStandard>
-            <ListItemStandard>List Item 3</ListItemStandard>
+            <ListItemStandard text="List Item 1" />
+            <ListItemStandard text="List Item 2" />
+            <ListItemStandard text="List Item 3" />
           </List>
         }
         midColumn={
           <List headerText="Mid Column List">
-            <ListItemStandard>List Item 1</ListItemStandard>
-            <ListItemStandard>List Item 2</ListItemStandard>
-            <ListItemStandard>List Item 3</ListItemStandard>
+            <ListItemStandard text="List Item 1" />
+            <ListItemStandard text="List Item 2" />
+            <ListItemStandard text="List Item 3" />
           </List>
         }
         endColumn={
           <List headerText="End Column List">
-            <ListItemStandard>List Item 1</ListItemStandard>
-            <ListItemStandard>List Item 2</ListItemStandard>
-            <ListItemStandard>List Item 3</ListItemStandard>
+            <ListItemStandard text="List Item 1" />
+            <ListItemStandard text="List Item 2" />
+            <ListItemStandard text="List Item 3" />
           </List>
         }
       />
@@ -95,9 +95,7 @@ export const WithDifferentColumns: Story = {
             />
             <List headerText="Movies" onItemClick={onStartColumnClick}>
               {movieData.map((item) => (
-                <ListItemStandard description={item.genre} data-movie={item.movie} key={item.movie}>
-                  {item.movie}
-                </ListItemStandard>
+                <ListItemStandard description={item.genre} data-movie={item.movie} key={item.movie} text={item.movie} />
               ))}
             </List>
           </>
@@ -138,9 +136,7 @@ export const WithDifferentColumns: Story = {
             </FlexBox>
             <List headerText="Cast" onItemClick={onMiddleColumnClick}>
               {castData.map((item) => (
-                <ListItemStandard description={item.gender} data-name={item.name} key={item.name}>
-                  {item.name}
-                </ListItemStandard>
+                <ListItemStandard description={item.gender} data-name={item.name} key={item.name} text={item.name} />
               ))}
             </List>
           </>
diff --git a/packages/main/src/webComponents/List/List.stories.tsx b/packages/main/src/webComponents/List/List.stories.tsx
index fcb7c4e581f..b46c04eea99 100644
--- a/packages/main/src/webComponents/List/List.stories.tsx
+++ b/packages/main/src/webComponents/List/List.stories.tsx
@@ -37,9 +37,9 @@ export const Default: Story = {
   render: (args) => {
     return (
       <List {...args}>
-        <ListItemStandard additionalText="3">List Item 1</ListItemStandard>
-        <ListItemStandard additionalText="2">List Item 2</ListItemStandard>
-        <ListItemStandard additionalText="1">List Item 3</ListItemStandard>
+        <ListItemStandard additionalText="3" text="List Item 1" />
+        <ListItemStandard additionalText="2" text="List Item 2" />
+        <ListItemStandard additionalText="1" text="List Item 3" />
       </List>
     );
   }
@@ -79,11 +79,11 @@ export const ListItemGroupStory: Story = {
     return (
       <List {...args}>
         <ListItemGroup headerText="ListItemGroup 1">
-          <ListItemStandard>List Item</ListItemStandard>
-          <ListItemStandard>List Item</ListItemStandard>
+          <ListItemStandard text="List Item" />
+          <ListItemStandard text="List Item" />
         </ListItemGroup>
         <ListItemGroup headerText="ListItemGroup 2">
-          <ListItemStandard>List Item</ListItemStandard>
+          <ListItemStandard text="List Item" />
         </ListItemGroup>
       </List>
     );
diff --git a/packages/main/src/webComponents/Panel/Panel.stories.tsx b/packages/main/src/webComponents/Panel/Panel.stories.tsx
index 24d98cb068a..6fa265ffef7 100644
--- a/packages/main/src/webComponents/Panel/Panel.stories.tsx
+++ b/packages/main/src/webComponents/Panel/Panel.stories.tsx
@@ -60,13 +60,13 @@ export const WithCustomHeader: Story = {
     return (
       <Panel {...args}>
         <List>
-          <ListItemStandard description="Language: Spanish">Argentina</ListItemStandard>
-          <ListItemStandard description="Language: Portuguese">Portugal</ListItemStandard>
-          <ListItemStandard description="Language: Spanish">Mexico</ListItemStandard>
-          <ListItemStandard description="Language: Portuguese">Brazil</ListItemStandard>
-          <ListItemStandard description="Language: German">Germany</ListItemStandard>
-          <ListItemStandard description="Language: English">Australia</ListItemStandard>
-          <ListItemStandard description="Language: German">Austria</ListItemStandard>
+          <ListItemStandard description="Language: Spanish" text="Argentina" />
+          <ListItemStandard description="Language: Portuguese" text="Portugal" />
+          <ListItemStandard description="Language: Spanish" text="Mexico" />
+          <ListItemStandard description="Language: Portuguese" text="Brazil" />
+          <ListItemStandard description="Language: German" text="Germany" />
+          <ListItemStandard description="Language: English" text="Australia" />
+          <ListItemStandard description="Language: German" text="Austria" />
         </List>
       </Panel>
     );
diff --git a/packages/main/src/webComponents/Popover/Popover.stories.tsx b/packages/main/src/webComponents/Popover/Popover.stories.tsx
index 97e277e567c..77e07bf1c8a 100644
--- a/packages/main/src/webComponents/Popover/Popover.stories.tsx
+++ b/packages/main/src/webComponents/Popover/Popover.stories.tsx
@@ -21,9 +21,9 @@ const meta = {
   args: {
     children: (
       <List>
-        <ListItemStandard additionalText="Fruits">Apples</ListItemStandard>
-        <ListItemStandard additionalText="Fruits">Bananas</ListItemStandard>
-        <ListItemStandard additionalText="Vegetables">Potato</ListItemStandard>
+        <ListItemStandard additionalText="Fruits" text="Apples" />
+        <ListItemStandard additionalText="Fruits" text="Bananas" />
+        <ListItemStandard additionalText="Vegetables" text="Potato" />
       </List>
     ),
     headerText: 'Popover Header',
diff --git a/packages/main/src/webComponents/ResponsivePopover/ResponsivePopover.stories.tsx b/packages/main/src/webComponents/ResponsivePopover/ResponsivePopover.stories.tsx
index ad241d29763..73d857bf46d 100644
--- a/packages/main/src/webComponents/ResponsivePopover/ResponsivePopover.stories.tsx
+++ b/packages/main/src/webComponents/ResponsivePopover/ResponsivePopover.stories.tsx
@@ -21,9 +21,9 @@ const meta = {
   args: {
     children: (
       <List>
-        <ListItemStandard additionalText="Fruits">Apples</ListItemStandard>
-        <ListItemStandard additionalText="Fruits">Bananas</ListItemStandard>
-        <ListItemStandard additionalText="Vegetables">Potato</ListItemStandard>
+        <ListItemStandard additionalText="Fruits" text="Apples" />
+        <ListItemStandard additionalText="Fruits" text="Bananas" />
+        <ListItemStandard additionalText="Vegetables" text="Potato" />
       </List>
     ),
     headerText: 'ResponsivePopover Header',
diff --git a/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx b/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx
index ff4d594840f..88d3831ed5d 100644
--- a/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx
+++ b/packages/main/src/webComponents/ShellBar/ShellBar.stories.tsx
@@ -25,9 +25,9 @@ const meta = {
     ),
     menuItems: (
       <>
-        <ListItemStandard data-key="1">Menu Item 1</ListItemStandard>
-        <ListItemStandard data-key="2">Menu Item 2</ListItemStandard>
-        <ListItemStandard data-key="3">Menu Item 3</ListItemStandard>
+        <ListItemStandard data-key="1" text="Menu Item 1" />
+        <ListItemStandard data-key="2" text="Menu Item 2" />
+        <ListItemStandard data-key="3" text="Menu Item 3" />
       </>
     ),
     searchField: <Input showClearIcon icon={<Icon name={searchIcon} />} />,
diff --git a/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx b/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx
index 550592261a9..f4c1d0edad4 100644
--- a/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx
+++ b/packages/main/src/webComponents/UserSettingsDialog/UserSettingsDialog.stories.tsx
@@ -142,10 +142,10 @@ export const Default: Story = {
           <UserSettingsItem icon="palette" text="Appearance" tooltip="Appearance" headerText="Appearance">
             <UserSettingsView text="Themes">
               <List separators="Inner">
-                <ListItemStandard icon="palette">SAP Morning Horizon</ListItemStandard>
-                <ListItemStandard icon="palette">SAP Evening Horizon</ListItemStandard>
-                <ListItemStandard icon="palette">SAP High Contrast Black (SAP Horizon)</ListItemStandard>
-                <ListItemStandard icon="palette">SAP High Contrast White (SAP Horizon)</ListItemStandard>
+                <ListItemStandard icon="palette" text="SAP Morning Horizon" />
+                <ListItemStandard icon="palette" text="SAP Evening Horizon" />
+                <ListItemStandard icon="palette" text="SAP High Contrast Black (SAP Horizon)" />
+                <ListItemStandard icon="palette" text="SAP High Contrast White (SAP Horizon)" />
               </List>
               <Button className="save-btn" design="Emphasized">
                 Save

From b0261f68aca586819644edaceedf216de19200d8 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 7 May 2025 12:09:22 +0200
Subject: [PATCH 04/17] version-info

---
 config/version-info.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/config/version-info.json b/config/version-info.json
index 4e48d71a5d2..ae5e69b275a 100644
--- a/config/version-info.json
+++ b/config/version-info.json
@@ -51,5 +51,6 @@
   "2.6.0": "2.6.2",
   "2.7.0": "2.7.0",
   "2.8.0": "2.8.0",
-  "2.9.0": "2.9.0"
+  "2.9.0": "2.9.0",
+  "2.10.0": "2.10.0"
 }

From 62b0ad5e38e913810990a67a3ea5d0accafab098 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 7 May 2025 13:59:32 +0200
Subject: [PATCH 05/17] docs(Shellbar): add `ShellBarSearch` subcomponent

---
 packages/main/src/webComponents/ShellBar/ShellBar.mdx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/main/src/webComponents/ShellBar/ShellBar.mdx b/packages/main/src/webComponents/ShellBar/ShellBar.mdx
index 9879aeebc73..08b08fa14f2 100644
--- a/packages/main/src/webComponents/ShellBar/ShellBar.mdx
+++ b/packages/main/src/webComponents/ShellBar/ShellBar.mdx
@@ -3,6 +3,7 @@ import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
 import { ArgTypes, Canvas, Description, Markdown, Meta } from '@storybook/blocks';
 import { ShellBarItem } from '../ShellBarItem/index';
 import { ShellBarSpacer } from '../ShellBarSpacer/index';
+import { ShellBarSearch } from '../ShellBarSearch/index';
 import * as ComponentStories from './ShellBar.stories';
 import { excludePropsForAbstract } from '@sb/utils';
 
@@ -69,4 +70,9 @@ const ShellBarComponent = () => {
 <Description of={ShellBarSpacer} />
 <ArgTypes hideHTMLPropsNote exclude={excludePropsForAbstract} of={ShellBarSpacer} />
 
+## ShellBarSearch (experimental)
+
+<Description of={ShellBarSearch} />
+<ArgTypes hideHTMLPropsNote of={ShellBarSearch} />
+
 <Footer />

From 01b0e67c0c9f1806758fc95010dfe46016b12116 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 7 May 2025 14:00:15 +0200
Subject: [PATCH 06/17] [ci chromatic]


From e1b75de2b048e16d686ab6ac9bc4d7ea15aaed85 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 7 May 2025 14:11:37 +0200
Subject: [PATCH 07/17] MessageViewsDialog: replace removed `maxWidth`

---
 .../src/components/VariantManagement/ManageViewsDialog.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx b/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx
index b4a935a8051..7c23216b0e7 100644
--- a/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx
+++ b/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx
@@ -94,12 +94,12 @@ export const ManageViewsDialog = (props: ManageViewsDialogPropTypes) => {
         {viewHeaderText}
       </TableHeaderCell>
       {showShare && (
-        <TableHeaderCell minWidth="7.5rem" maxWidth="8rem">
+        <TableHeaderCell minWidth="7.5rem" width="8rem">
           {sharingHeaderText}
         </TableHeaderCell>
       )}
       {showSetAsDefault && (
-        <TableHeaderCell minWidth="8rem" maxWidth="8rem">
+        <TableHeaderCell minWidth="8rem" width="8rem">
           {defaultHeaderText}
         </TableHeaderCell>
       )}

From 6a920a6ef52ab4c08203e5648371826542683fbd Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 7 May 2025 14:14:22 +0200
Subject: [PATCH 08/17] [ci chromatic]


From 303f543d12792899bb15561c84f3bcecb95ebb6e Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 7 May 2025 14:20:33 +0200
Subject: [PATCH 09/17] Update index.tsx

---
 packages/main/src/components/ObjectPageAnchorBar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/components/ObjectPageAnchorBar/index.tsx b/packages/main/src/components/ObjectPageAnchorBar/index.tsx
index bdd5d2da39f..10809da46b5 100644
--- a/packages/main/src/components/ObjectPageAnchorBar/index.tsx
+++ b/packages/main/src/components/ObjectPageAnchorBar/index.tsx
@@ -86,7 +86,7 @@ const ObjectPageAnchorBar = forwardRef<HTMLElement, ObjectPageAnchorBarPropTypes
   const showBothActions = shouldRenderHeaderPinnableButton;
 
   const onPinHeader: ToggleButtonPropTypes['onClick'] = (e) => {
-    const target = e.target as ToggleButtonDomRef;
+    const target = e.target;
     setHeaderPinned(target.pressed);
   };
 

From 4c97ad118bd535d4b2b331795e54ffdd6b2c6288 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 7 May 2025 15:18:07 +0200
Subject: [PATCH 10/17] cypress-commands: fix `clickUi5ListItemByText`

---
 packages/cypress-commands/src/commands.ts     | 25 +++++++++++++----
 .../test/UI5WebComponentsChild.cy.tsx         | 28 +++++++++++++++----
 2 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/packages/cypress-commands/src/commands.ts b/packages/cypress-commands/src/commands.ts
index 137e7c0cbc5..4577851b430 100644
--- a/packages/cypress-commands/src/commands.ts
+++ b/packages/cypress-commands/src/commands.ts
@@ -64,11 +64,17 @@ declare global {
       closeUi5PopupWithEsc(): Chainable<Element>;
 
       /**
-       * Click on a list item of the `List` component by text.
+       * Click on a list item of the `ui5-list` component by text.
+       *
+       * __Note:__ Chaining this command to a `ui5-list` selector is recommended.
+       *
        * @param {string} text The text of the list item that should be clicked.
-       * @example cy.clickUi5ListItemByText("List Item")
+       * @param options ClickOptions
+       * @example
+       * cy.get('[ui5-list]').clickUi5ListItemByText("List Item")
+       * cy.clickUi5ListItemByText("List Item")
        */
-      clickUi5ListItemByText(text: string): Chainable<Element>;
+      clickUi5ListItemByText(text: string, options: Partial<ClickOptions>): Chainable<Element>;
 
       /**
        * Click on an `ui5-option` of the `ui5-select` component by text.
@@ -188,8 +194,17 @@ Cypress.Commands.add('closeUi5PopupWithEsc', () => {
   cy.get('body').type('{esc}', { force: true });
 });
 
-Cypress.Commands.add('clickUi5ListItemByText', (text) => {
-  cy.contains(text).find('li').click({ force: true });
+Cypress.Commands.add('clickUi5ListItemByText', { prevSubject: 'optional' }, (subject, text) => {
+  cy.document().then((doc) => {
+    const _subject = subject?.[0] || doc;
+    const li = _subject.querySelector(`[text="${text}"]`);
+
+    if (li) {
+      cy.wrap(li).click();
+    } else {
+      cy.wrap(_subject).contains(text).click();
+    }
+  });
 });
 
 Cypress.Commands.add('clickUi5SelectOptionByText', { prevSubject: 'element' }, (subject, text, options = {}) => {
diff --git a/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx b/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx
index 6fca438f41d..66c4af08af3 100644
--- a/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx
+++ b/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx
@@ -124,13 +124,29 @@ describe('UI5 Web Components - Child Commands', () => {
 
   it('click list item', () => {
     cy.mount(
-      <List selectionMode="Multiple">
-        <ListItemStandard data-testid="s" text="ListItemStandard" />
-        <ListItemCustom data-testid="c">ListItemCustom</ListItemCustom>
-      </List>
+      <>
+        <List selectionMode="Multiple" data-testid="list">
+          <ListItemStandard data-testid="li1" text="ListItemStandard" />
+          <ListItemStandard data-testid="li2">ListItemStandard2</ListItemStandard>
+          <ListItemCustom data-testid="li3">ListItemCustom</ListItemCustom>
+        </List>
+      </>
     );
-    cy.findByText('ListItemStandard').click();
-    cy.findByTestId('c').click();
+    cy.clickUi5ListItemByText('ListItemStandard');
+    cy.clickUi5ListItemByText('ListItemStandard2');
+    cy.clickUi5ListItemByText('ListItemCustom');
+
+    cy.findByTestId('li1').should('have.attr', 'selected', 'selected');
+    cy.findByTestId('li2').should('have.attr', 'selected', 'selected');
+    cy.findByTestId('li3').should('have.attr', 'selected', 'selected');
+
+    cy.get('[ui5-list]').clickUi5ListItemByText('ListItemStandard');
+    cy.get('[ui5-list]').clickUi5ListItemByText('ListItemStandard2');
+    cy.get('[ui5-list]').clickUi5ListItemByText('ListItemCustom');
+
+    cy.findByTestId('li1').should('not.have.attr', 'selected');
+    cy.findByTestId('li2').should('not.have.attr', 'selected');
+    cy.findByTestId('li3').should('not.have.attr', 'selected');
   });
 
   // TODO figure out how to re-enable this test. Currently the popover directly closes after any interaction with the component.

From b2bf2f202783f802a190f29ef635359d770914e2 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 7 May 2025 15:27:11 +0200
Subject: [PATCH 11/17] Update commands.ts

---
 packages/cypress-commands/src/commands.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/cypress-commands/src/commands.ts b/packages/cypress-commands/src/commands.ts
index 4577851b430..ec0dd384000 100644
--- a/packages/cypress-commands/src/commands.ts
+++ b/packages/cypress-commands/src/commands.ts
@@ -74,7 +74,7 @@ declare global {
        * cy.get('[ui5-list]').clickUi5ListItemByText("List Item")
        * cy.clickUi5ListItemByText("List Item")
        */
-      clickUi5ListItemByText(text: string, options: Partial<ClickOptions>): Chainable<Element>;
+      clickUi5ListItemByText(text: string, options: Partial<ClickOptions>): Chainable<JQuery<HTMLElement>>;
 
       /**
        * Click on an `ui5-option` of the `ui5-select` component by text.
@@ -196,7 +196,7 @@ Cypress.Commands.add('closeUi5PopupWithEsc', () => {
 
 Cypress.Commands.add('clickUi5ListItemByText', { prevSubject: 'optional' }, (subject, text) => {
   cy.document().then((doc) => {
-    const _subject = subject?.[0] || doc;
+    const _subject = (subject as Cypress.JQueryWithSelector<UI5Element>)?.[0] || doc;
     const li = _subject.querySelector(`[text="${text}"]`);
 
     if (li) {

From 4db27c3c84731cfc19a1a2ad5ab2444bf2a3b0b5 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 7 May 2025 15:56:34 +0200
Subject: [PATCH 12/17] AnalyticalTable: fix tests

---
 .../AnalyticalTable/AnalyticalTable.cy.tsx    | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
index d9bd6c38a9f..f010922ea0e 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -111,21 +111,21 @@ describe('AnalyticalTable', () => {
 
     cy.findByText('Name').click();
     cy.get('[ui5-popover]').should('be.visible');
-    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
     cy.get('@onSortSpy').should('have.been.calledWithMatch', {
       detail: { column: { id: 'name' }, sortDirection: 'asc' }
     });
     cy.get('[aria-rowindex="3"] > [aria-colindex="1"]').should('text', 'C');
 
     cy.findByText('Name').click();
-    cy.findByText('Clear Sorting').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Clear Sorting');
     cy.get('@onSortSpy').should('have.been.calledWithMatch', {
       detail: { column: { id: 'name' }, sortDirection: 'clear' }
     });
     cy.get('[aria-rowindex="3"] > [aria-colindex="1"]').should('text', 'X');
 
     cy.findByText('Name').click();
-    cy.findByText('Sort Descending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Descending');
     cy.get('@onSortSpy').should('have.been.calledWithMatch', {
       detail: { column: { id: 'name' }, sortDirection: 'desc' }
     });
@@ -873,7 +873,7 @@ describe('AnalyticalTable', () => {
     cy.findByTestId('isSelected').should('have.text', 'true');
 
     cy.findByText('Friend Name').click();
-    cy.findByText('Group').realClick();
+    cy.get('[ui5-list]').clickUi5ListItemByText('Group');
     cy.focused()
       .should('have.attr', 'data-row-index', '0')
       .and('have.attr', 'data-column-index', '2')
@@ -894,7 +894,7 @@ describe('AnalyticalTable', () => {
     cy.findByTestId('isSelected').should('have.text', 'false');
 
     cy.findByText('Friend Name').click();
-    cy.findByText('Ungroup').realClick();
+    cy.get('[ui5-list]').clickUi5ListItemByText('Ungroup');
     cy.focused()
       .should('have.attr', 'data-row-index', '0')
       .and('have.attr', 'data-column-index', '3')
@@ -1560,7 +1560,7 @@ describe('AnalyticalTable', () => {
 
     testAlternateRowColor();
     cy.findByText('Name').click();
-    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
     testAlternateRowColor();
   });
 
@@ -2336,22 +2336,22 @@ describe('AnalyticalTable', () => {
     cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.attr', 'aria-label', 'Age 40 ');
 
     cy.findByText('Name').click();
-    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
     cy.get('[data-column-id="name"]').should('have.attr', 'aria-sort', 'ascending');
     cy.findByText('Name').click();
-    cy.findByText('Clear Sorting').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Clear Sorting');
     cy.get('[data-column-id="name"]').should('not.have.attr', 'aria-sort');
     cy.findByText('Name').click();
-    cy.findByText('Sort Descending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Descending');
     cy.get('[data-column-id="name"]').should('have.attr', 'aria-sort', 'descending');
     cy.findByText('Name').click();
-    cy.findByText('Sort Ascending').shadow().get('[ui5-input]').typeIntoUi5Input('A{enter}');
+    cy.get('[text="Sort Ascending"]').shadow().get('[ui5-input]').typeIntoUi5Input('A{enter}');
     cy.get('[data-column-id="name"]')
       .should('have.attr', 'aria-sort', 'descending')
       .and('have.attr', 'aria-label', 'Filtered');
 
     cy.findByText('Name').click();
-    cy.findByText('Group').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Group');
     cy.get('[data-column-id="name"]')
       .should('have.attr', 'aria-sort', 'descending')
       .and('have.attr', 'aria-label', 'Filtered Grouped');
@@ -2367,14 +2367,14 @@ describe('AnalyticalTable', () => {
       'Name A Grouped, To collapse the row, press the spacebar.'
     );
     cy.findByText('Name').click();
-    cy.findByText('Ungroup').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Ungroup');
     cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.attr', 'aria-label', 'Name A ');
     cy.get('[data-column-id="name"]')
       .should('have.attr', 'aria-sort', 'descending')
       .and('have.attr', 'aria-label', 'Filtered');
 
     cy.findByText('Name').click();
-    cy.findByText('Sort Ascending').shadow().get('[ui5-input]').typeIntoUi5Input('{selectall}{backspace}{enter}');
+    cy.get('[text="Sort Ascending"]').shadow().get('[ui5-input]').typeIntoUi5Input('{selectall}{backspace}{enter}');
     cy.get('[data-column-id="name"]').should('have.attr', 'aria-sort', 'descending').and('have.attr', 'aria-label', '');
 
     cy.get('[data-column-id="friend.age"]').should('have.attr', 'aria-label', 'Custom Label ');
@@ -2436,7 +2436,7 @@ describe('AnalyticalTable', () => {
 
     cy.mount(<AnalyticalTable data={[...data, ...data]} columns={columns} visibleRows={5} groupable />);
     cy.findByText('Name').click();
-    cy.findByText('Group').realClick();
+    cy.get('[ui5-list]').clickUi5ListItemByText('Group');
     cy.findByText('A (2)').trigger('keydown', {
       key: 'Enter'
     });
@@ -2522,9 +2522,9 @@ describe('AnalyticalTable', () => {
 
     //sort both Name and Age (multi-sort enabled)
     cy.findByText('Name').click();
-    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
     cy.findByText('Age').click();
-    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
 
     cy.get('[data-column-index="0"][data-row-index="1"]').children().should('have.text', 'A');
     cy.get('[data-column-index="1"][data-row-index="1"]').children().should('have.text', '30');
@@ -2545,7 +2545,7 @@ describe('AnalyticalTable', () => {
 
     //only sort Name2
     cy.findByText('Name 2').click();
-    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
 
     cy.get('[data-column-index="0"][data-row-index="1"]').children().should('have.text', 'B');
     cy.get('[data-column-index="1"][data-row-index="1"]').children().should('have.text', '60');
@@ -2753,7 +2753,7 @@ describe('AnalyticalTable', () => {
     cy.findByText('Aggregated').should('not.exist');
 
     cy.findByText('Name').click();
-    cy.findByText('Group').realClick();
+    cy.get('[ui5-list]').clickUi5ListItemByText('Group');
     cy.findByText('Simon').should('be.visible').should('have.length', 1);
     cy.findAllByText('Aggregated').should('be.visible').should('have.length', 2);
     cy.get('[ui5-icon][name="navigation-right-arrow"]').should('be.visible').should('have.length', 2);
@@ -2815,9 +2815,9 @@ describe('AnalyticalTable', () => {
 
     cy.mount(<TestComponent orderedIds={['name', 'name2', 'age', 'age2']} />);
     cy.findByText('Age').click();
-    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
     cy.findByText('Name').click();
-    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
 
     cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.text', 'Graham');
     cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.text', '40');
@@ -2825,7 +2825,7 @@ describe('AnalyticalTable', () => {
     cy.get('[data-visible-row-index="5"][data-visible-column-index="1"]').should('have.text', '20');
 
     cy.findByText('Name 2').click();
-    cy.findByText('Sort Descending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Descending');
 
     cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.text', 'Graham');
     cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.text', '62');
@@ -2835,7 +2835,7 @@ describe('AnalyticalTable', () => {
     cy.get('[data-visible-row-index="5"][data-visible-column-index="2"]').should('have.text', 'Willis');
 
     cy.findByText('Name 2').click();
-    cy.findByText('Clear Sorting').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Clear Sorting');
 
     cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.text', 'Graham');
     cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.text', '40');
@@ -2844,9 +2844,9 @@ describe('AnalyticalTable', () => {
 
     cy.mount(<TestComponent orderedIds={['name2']} />);
     cy.findByText('Age').click();
-    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
     cy.findByText('Name').click();
-    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
 
     cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.text', 'Kristen');
     cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.text', '20');
@@ -2854,7 +2854,7 @@ describe('AnalyticalTable', () => {
     cy.get('[data-visible-row-index="5"][data-visible-column-index="1"]').should('have.text', '40');
 
     cy.findByText('Age 2').click();
-    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
 
     cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.text', 'Kristen');
     cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.text', '20');
@@ -2864,7 +2864,7 @@ describe('AnalyticalTable', () => {
     cy.get('[data-visible-row-index="5"][data-visible-column-index="3"]').should('have.text', '18');
 
     cy.findByText('Name 2').click();
-    cy.findByText('Sort Ascending').shadow().findByRole('listitem').click({ force: true });
+    cy.get('[ui5-list]').clickUi5ListItemByText('Sort Ascending');
     cy.get('[data-visible-row-index="1"][data-visible-column-index="0"]').should('have.text', 'Kristen');
     cy.get('[data-visible-row-index="1"][data-visible-column-index="1"]').should('have.text', '20');
     cy.get('[data-visible-row-index="1"][data-visible-column-index="2"]').should('have.text', 'Alissa');

From 8f2ffe8e86b59cade9410ca8b182be5d60c2f004 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 7 May 2025 16:09:18 +0200
Subject: [PATCH 13/17] SelectDialog: fix test

---
 .../main/src/components/SelectDialog/SelectDialog.cy.tsx   | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx b/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx
index e3256aa9e0e..b4bcb325663 100644
--- a/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx
+++ b/packages/main/src/components/SelectDialog/SelectDialog.cy.tsx
@@ -69,7 +69,7 @@ describe('SelectDialog', () => {
             rememberSelections={rememberSelections}
             open={open}
             onConfirm={(e) => {
-              setItems(e.detail.selectedItems.map((item) => item.textContent));
+              setItems(e.detail.selectedItems.map((item) => item.text));
               confirm(e);
             }}
             onClose={(e) => {
@@ -89,7 +89,6 @@ describe('SelectDialog', () => {
     cy.clickUi5ListItemByText('Product1');
     cy.get('[ui5-dialog]').should('not.be.visible');
     cy.findByText('Last Selected Item: Product1').should('be.visible');
-
     cy.findByText('Open').click();
     cy.get('[ui5-li]').each(($li) => {
       cy.wrap($li).should('not.have.attr', 'selected');
@@ -102,7 +101,7 @@ describe('SelectDialog', () => {
     cy.findByText('Last Selected Item: Product1').should('be.visible');
     cy.findByText('Open').click();
     cy.get('[ui5-li]').each(($li) => {
-      if ($li.text() === 'Product1') {
+      if ($li.attr('text') === 'Product1') {
         cy.wrap($li).should('have.attr', 'selected');
       } else {
         cy.wrap($li).should('not.have.attr', 'selected');
@@ -143,7 +142,7 @@ describe('SelectDialog', () => {
     cy.findByText('Select').click();
     cy.findByText('Last Selected Item: Product1Product3').should('be.visible');
     cy.get('[ui5-li]').each(($li) => {
-      if ($li.text() === 'Product1' || $li.text() === 'Product3') {
+      if ($li.attr('text') === 'Product1' || $li.attr('text') === 'Product3') {
         cy.wrap($li).should('have.attr', 'selected');
       } else {
         cy.wrap($li).should('not.have.attr', 'selected');

From 9b63b1c7883319ed8345cd30c482b969239fb788 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 8 May 2025 08:27:50 +0200
Subject: [PATCH 14/17] VariantManagement: fix tests

---
 .../VariantManagement.cy.tsx                  | 80 ++++++++++---------
 1 file changed, 44 insertions(+), 36 deletions(-)

diff --git a/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx b/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx
index 0d99bc31803..8ddbbf8d45e 100644
--- a/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx
+++ b/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx
@@ -27,8 +27,9 @@ describe('VariantManagement', () => {
     cy.mount(<VariantManagement>{TwoVariantItems}</VariantManagement>);
     cy.get('[tooltip="Select View"]').click();
 
-    cy.findByText('VariantItem 1').should('be.visible');
-    cy.findAllByText('VariantItem 2').should('have.length', 2);
+    cy.get('[ui5-li][text="VariantItem 1"]').should('be.visible');
+    cy.get('[ui5-li][text="VariantItem 2"]').should('be.visible');
+    cy.findByText('VariantItem 2').should('be.visible');
   });
 
   it('Headings customization', () => {
@@ -37,8 +38,8 @@ describe('VariantManagement', () => {
         {TwoVariantItems}
       </VariantManagement>
     );
-    cy.contains('VariantItem 2').should('have.attr', 'level', TitleLevel.H1);
-    cy.contains('VariantItem 2').click();
+
+    cy.findByText('VariantItem 2').should('have.attr', 'level', TitleLevel.H1).click();
     cy.get('[role="dialog"]').contains('Popover Heading').should('be.visible');
   });
 
@@ -104,7 +105,7 @@ describe('VariantManagement', () => {
   it('saveViewInputProps & manageViewsInputProps', () => {
     // manageViewsInputProps
     cy.mount(<WithCustomValidation />);
-    cy.contains('Max 12 chars').click();
+    cy.findByText('Max 12 chars').click();
     cy.findByText('Manage').click();
     cy.get('[ui5-dialog]').should('have.attr', 'open');
     cy.findByTestId('12chars').typeIntoUi5Input('A');
@@ -114,13 +115,13 @@ describe('VariantManagement', () => {
     cy.get('body').click({ force: true });
     cy.realPress('Escape');
     cy.get('[ui5-dialog]').should('not.exist');
-    cy.contains('Max 12 chars').click();
+    cy.findByText('Max 12 chars').click();
     cy.findByText('Manage').click();
     cy.findByTestId('12chars').should('have.attr', 'value-state', 'None');
     cy.findByTestId('12chars').typeIntoUi5Input('A');
     cy.findByTestId('12chars').should('have.attr', 'value-state', ValueState.Negative);
     cy.findByText('Cancel').click();
-    cy.contains('Max 12 chars').click();
+    cy.findByText('Max 12 chars').click();
     cy.findByText('Manage').click();
     cy.findByTestId('12chars').should('have.attr', 'value-state', 'None');
     cy.findByTestId('12chars').typeIntoUi5Input('A');
@@ -133,12 +134,12 @@ describe('VariantManagement', () => {
     cy.findByText('Save').click();
     cy.findByTestId('12chars').should('not.exist');
     cy.get('[ui5-dialog]').should('not.exist');
-    cy.contains('Max 12 charB').should('be.visible');
+    cy.findByText('Max 12 charB').should('be.visible');
 
     //saveViewInputProps
     // @ts-expect-error: not a real prop, just for testing
     cy.mount(<WithCustomValidation selectedByIndex={0} />);
-    cy.contains('Only alphanumeric chars in Save View input').click();
+    cy.findByText('Only alphanumeric chars in Save View input').click();
     cy.findByText('Save As').click();
     cy.get('[ui5-dialog]').should('have.attr', 'open');
     cy.findByTestId('alphanumeric').typeIntoUi5Input('$');
@@ -147,13 +148,13 @@ describe('VariantManagement', () => {
     cy.get('[text="Apply Automatically"]').realClick();
     cy.realPress('Escape');
     cy.get('[ui5-dialog]').should('not.exist');
-    cy.contains('Only alphanumeric chars in Save View input').click();
+    cy.findByText('Only alphanumeric chars in Save View input').click();
     cy.findByText('Save As').click();
     cy.findByTestId('alphanumeric').should('have.attr', 'value-state', 'None');
     cy.findByTestId('alphanumeric').typeIntoUi5Input('$');
     cy.findByTestId('alphanumeric').should('have.attr', 'value-state', ValueState.Negative);
     cy.findByText('Cancel').click();
-    cy.contains('Only alphanumeric chars in Save View input').click();
+    cy.findByText('Only alphanumeric chars in Save View input').click();
     cy.findByText('Save As').click();
     cy.findByTestId('alphanumeric').should('have.attr', 'value-state', 'None');
     cy.findByTestId('alphanumeric').typeIntoUi5Input('$');
@@ -173,14 +174,18 @@ describe('VariantManagement', () => {
     cy.mount(<VariantManagement onSelect={select}>{TwoVariantItems}</VariantManagement>);
 
     cy.get('[ui5-responsive-popover]').should('not.be.visible');
-    cy.findAllByText('VariantItem 2').should('have.length', 2);
+    cy.get('[ui5-li][text="VariantItem 2"]').should('exist');
+    cy.findByText('VariantItem 2').should('be.visible');
     cy.get('[ui5-title]').contains('VariantItem 2').click();
     cy.get('[ui5-responsive-popover]').should('be.visible');
 
-    cy.findAllByText('VariantItem 1').should('have.length', 1);
-    cy.findByText('VariantItem 1').click();
-    cy.findAllByText('VariantItem 1').should('have.length', 2);
-    cy.findAllByText('VariantItem 2').should('have.length', 1);
+    cy.get('[ui5-li][text="VariantItem 1"]').should('be.visible');
+    cy.findByText('VariantItem 1').should('not.exist');
+    cy.get('[ui5-list]').clickUi5ListItemByText('VariantItem 1');
+    cy.get('[ui5-li][text="VariantItem 1"]').should('be.visible');
+    cy.findByText('VariantItem 1').should('be.visible');
+    cy.get('[ui5-li][text="VariantItem 2"]').should('be.visible');
+    cy.findByText('VariantItem 2').should('not.exist');
 
     cy.get('@select').should('have.been.calledOnce');
 
@@ -193,7 +198,7 @@ describe('VariantManagement', () => {
     cy.get('[ui5-responsive-popover]').should('not.be.visible');
     cy.get('[icon="navigation-down-arrow"]').click();
     cy.get('[ui5-responsive-popover]').should('be.visible');
-    cy.findByText('VariantItem 1').click();
+    cy.get('[ui5-list]').clickUi5ListItemByText('VariantItem 1');
     cy.get('[ui5-responsive-popover]').should('not.be.visible');
 
     cy.get('@select').should('have.been.calledTwice');
@@ -245,17 +250,17 @@ describe('VariantManagement', () => {
     cy.get('@save').should('have.been.calledOnce');
     cy.findByText('Saved Variant:VariantItem 2');
 
-    cy.findByText('VariantItem 3').click();
+    cy.get('[ui5-list]').clickUi5ListItemByText('VariantItem 3');
     cy.findByText('Save', { timeout: 200 }).should('not.exist');
-    cy.findByText('VariantItem 1').click();
+    cy.get('[ui5-list]').clickUi5ListItemByText('VariantItem 1');
     cy.findByText('Save').should('be.visible');
-    cy.findByText('VariantItem 4').click();
+    cy.get('[ui5-list]').clickUi5ListItemByText('VariantItem 4');
     cy.findByText('Save').should('be.visible');
-    cy.findByText('VariantItem 5').click();
+    cy.get('[ui5-list]').clickUi5ListItemByText('VariantItem 5');
     cy.findByText('Save', { timeout: 200 }).should('not.exist');
-    cy.findByText('VariantItem 6').click();
+    cy.get('[ui5-list]').clickUi5ListItemByText('VariantItem 6');
     cy.findByText('Save').should('be.visible');
-    cy.findByText('VariantItem 7').click();
+    cy.get('[ui5-list]').clickUi5ListItemByText('VariantItem 7');
     cy.findByText('Save').should('be.visible');
 
     cy.mount(<TestComp onSave={save} dirtyStateText="Dirty state" />);
@@ -309,7 +314,7 @@ describe('VariantManagement', () => {
     cy.get('[icon="navigation-down-arrow"]').click();
     cy.get('[ui5-li]').should('have.length', 11);
     cy.findByPlaceholderText('Search').typeIntoUi5Input('VariantItem 10');
-    cy.get('[ui5-li]').should('have.length', 1).should('have.text', 'VariantItem 10');
+    cy.get('[ui5-li]').should('have.length', 1).should('have.attr', 'text', 'VariantItem 10');
     cy.get('.ui5-input-clear-icon').click();
     cy.get('[ui5-li]').should('have.length', 11);
 
@@ -338,8 +343,9 @@ describe('VariantManagement', () => {
     );
     cy.get('[icon="navigation-down-arrow"]').click();
     cy.findByText('VariantItem 1', { timeout: 200 }).should('not.exist');
-    cy.findAllByText('Favorite VariantItem').should('have.length', 2);
-    cy.findByText('Default VariantItem').should('be.visible');
+    cy.get('[ui5-li][text="Favorite VariantItem"]').should('be.visible');
+    cy.findByText('Favorite VariantItem').should('be.visible');
+    cy.get('[ui5-li][text="Default VariantItem"]').should('be.visible');
   });
 
   it('Hide variant props', () => {
@@ -529,13 +535,14 @@ describe('VariantManagement', () => {
         if (showOnlyFavorites) {
           if (labelReadOnly) {
             if (favorite || isDefault) {
-              cy.findAllByText(rowId).should('have.length', 2);
+              cy.findAllByText(rowId).should('be.visible');
+              cy.get(`[ui5-li][text="${rowId}"]`).should('exist').and('not.be.visible');
             } else {
               cy.findAllByText(rowId).should('have.length', 1);
             }
           } else {
             if (favorite || isDefault) {
-              cy.findAllByText(rowId).should('have.length', 1);
+              cy.get(`[ui5-li][text="${rowId}"]`).should('exist').and('not.be.visible');
               cy.get('@row').find('[ui5-input]').findShadowInput().should('have.value', rowId);
             } else {
               cy.findByText(rowId, { timeout: 100 }).should('not.exist');
@@ -544,9 +551,10 @@ describe('VariantManagement', () => {
           }
         } else {
           if (labelReadOnly) {
-            cy.findAllByText(rowId).should('have.length', 2);
+            cy.findAllByText(rowId).should('be.visible');
+            cy.get(`[ui5-li][text="${rowId}"]`).should('exist').and('not.be.visible');
           } else {
-            cy.findAllByText(rowId).should('have.length', 1);
+            cy.get(`[ui5-li][text="${rowId}"]`).should('exist').and('not.be.visible');
             cy.get('@row').find('[ui5-input]').findShadowInput().should('have.value', rowId);
           }
         }
@@ -737,15 +745,15 @@ describe('VariantManagement', () => {
     cy.findByText('Select Item3').click();
     cy.get('[ui5-title]').contains('Item3').should('be.visible').click();
     cy.get('[ui5-responsive-popover]').should('be.visible');
-    cy.get('[ui5-list]').contains('Item3').should('have.attr', 'selected', 'selected');
-    cy.findByText('Item1').click();
-    cy.get('[ui5-list]').contains('Item3').should('not.have.attr', 'selected');
-    cy.get('[ui5-list]').contains('Item1').should('have.attr', 'selected', 'selected');
+    cy.get('[ui5-li][text="Item3"]').should('have.attr', 'selected', 'selected');
+    cy.get('[ui5-list]').clickUi5ListItemByText('Item1');
+    cy.get('[ui5-li][text="Item3"]').should('not.have.attr', 'selected');
+    cy.get('[ui5-li][text="Item1"]').should('have.attr', 'selected', 'selected');
     cy.realPress('Escape');
     cy.findByText('Select Item5').click();
     cy.get('[ui5-title]').contains('Item5').should('be.visible').click();
-    cy.get('[ui5-list]').contains('Item1').should('not.have.attr', 'selected');
-    cy.get('[ui5-list]').contains('Item5').should('have.attr', 'selected', 'selected');
+    cy.get('[ui5-li][text="Item1"]').should('not.have.attr', 'selected');
+    cy.get('[ui5-li][text="Item5"]').should('have.attr', 'selected', 'selected');
   });
 
   cypressPassThroughTestsFactory(VariantManagement);

From 640362f0e18ba866376c9f902aaa5f61bcd909f2 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 8 May 2025 09:29:53 +0200
Subject: [PATCH 15/17] Revert "cypress-commands: fix `clickUi5ListItemByText`"

This reverts commit 4c97ad118bd535d4b2b331795e54ffdd6b2c6288.
---
 packages/cypress-commands/src/commands.ts     | 25 ++++-------------
 .../test/UI5WebComponentsChild.cy.tsx         | 28 ++++---------------
 2 files changed, 11 insertions(+), 42 deletions(-)

diff --git a/packages/cypress-commands/src/commands.ts b/packages/cypress-commands/src/commands.ts
index ec0dd384000..137e7c0cbc5 100644
--- a/packages/cypress-commands/src/commands.ts
+++ b/packages/cypress-commands/src/commands.ts
@@ -64,17 +64,11 @@ declare global {
       closeUi5PopupWithEsc(): Chainable<Element>;
 
       /**
-       * Click on a list item of the `ui5-list` component by text.
-       *
-       * __Note:__ Chaining this command to a `ui5-list` selector is recommended.
-       *
+       * Click on a list item of the `List` component by text.
        * @param {string} text The text of the list item that should be clicked.
-       * @param options ClickOptions
-       * @example
-       * cy.get('[ui5-list]').clickUi5ListItemByText("List Item")
-       * cy.clickUi5ListItemByText("List Item")
+       * @example cy.clickUi5ListItemByText("List Item")
        */
-      clickUi5ListItemByText(text: string, options: Partial<ClickOptions>): Chainable<JQuery<HTMLElement>>;
+      clickUi5ListItemByText(text: string): Chainable<Element>;
 
       /**
        * Click on an `ui5-option` of the `ui5-select` component by text.
@@ -194,17 +188,8 @@ Cypress.Commands.add('closeUi5PopupWithEsc', () => {
   cy.get('body').type('{esc}', { force: true });
 });
 
-Cypress.Commands.add('clickUi5ListItemByText', { prevSubject: 'optional' }, (subject, text) => {
-  cy.document().then((doc) => {
-    const _subject = (subject as Cypress.JQueryWithSelector<UI5Element>)?.[0] || doc;
-    const li = _subject.querySelector(`[text="${text}"]`);
-
-    if (li) {
-      cy.wrap(li).click();
-    } else {
-      cy.wrap(_subject).contains(text).click();
-    }
-  });
+Cypress.Commands.add('clickUi5ListItemByText', (text) => {
+  cy.contains(text).find('li').click({ force: true });
 });
 
 Cypress.Commands.add('clickUi5SelectOptionByText', { prevSubject: 'element' }, (subject, text, options = {}) => {
diff --git a/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx b/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx
index 66c4af08af3..6fca438f41d 100644
--- a/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx
+++ b/packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx
@@ -124,29 +124,13 @@ describe('UI5 Web Components - Child Commands', () => {
 
   it('click list item', () => {
     cy.mount(
-      <>
-        <List selectionMode="Multiple" data-testid="list">
-          <ListItemStandard data-testid="li1" text="ListItemStandard" />
-          <ListItemStandard data-testid="li2">ListItemStandard2</ListItemStandard>
-          <ListItemCustom data-testid="li3">ListItemCustom</ListItemCustom>
-        </List>
-      </>
+      <List selectionMode="Multiple">
+        <ListItemStandard data-testid="s" text="ListItemStandard" />
+        <ListItemCustom data-testid="c">ListItemCustom</ListItemCustom>
+      </List>
     );
-    cy.clickUi5ListItemByText('ListItemStandard');
-    cy.clickUi5ListItemByText('ListItemStandard2');
-    cy.clickUi5ListItemByText('ListItemCustom');
-
-    cy.findByTestId('li1').should('have.attr', 'selected', 'selected');
-    cy.findByTestId('li2').should('have.attr', 'selected', 'selected');
-    cy.findByTestId('li3').should('have.attr', 'selected', 'selected');
-
-    cy.get('[ui5-list]').clickUi5ListItemByText('ListItemStandard');
-    cy.get('[ui5-list]').clickUi5ListItemByText('ListItemStandard2');
-    cy.get('[ui5-list]').clickUi5ListItemByText('ListItemCustom');
-
-    cy.findByTestId('li1').should('not.have.attr', 'selected');
-    cy.findByTestId('li2').should('not.have.attr', 'selected');
-    cy.findByTestId('li3').should('not.have.attr', 'selected');
+    cy.findByText('ListItemStandard').click();
+    cy.findByTestId('c').click();
   });
 
   // TODO figure out how to re-enable this test. Currently the popover directly closes after any interaction with the component.

From 02aad875407e41b3106297e2e2815502ca0feb11 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 8 May 2025 10:29:44 +0200
Subject: [PATCH 16/17] enable `ShellBarSearch` root import

---
 packages/main/src/webComponents/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/main/src/webComponents/index.ts b/packages/main/src/webComponents/index.ts
index 81c26e6e46b..105f9b4e937 100644
--- a/packages/main/src/webComponents/index.ts
+++ b/packages/main/src/webComponents/index.ts
@@ -84,6 +84,7 @@ export * from './SegmentedButtonItem/index.js';
 export * from './Select/index.js';
 export * from './ShellBar/index.js';
 export * from './ShellBarItem/index.js';
+export * from './ShellBarSearch/index.js';
 export * from './ShellBarSpacer/index.js';
 export * from './SideNavigation/index.js';
 export * from './SideNavigationGroup/index.js';

From 7ea0c9eb289a68d4d5472e8c173d3a7068af585f Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 8 May 2025 10:30:08 +0200
Subject: [PATCH 17/17] cleanup

---
 packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx b/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx
index 5eb4cf6a94b..81ece0264e5 100644
--- a/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx
+++ b/packages/main/src/webComponents/Tokenizer/Tokenizer.stories.tsx
@@ -77,7 +77,6 @@ export const WithLogic = {
         setSelectedCountries(selectedTokens);
       }
     };
-    console.log(selectedCountries);
     return (
       <>
         <Tokenizer {...args} onTokenDelete={handleTokenDelete} onSelectionChange={handleSelectionChange}>