@ui5/webcomponents-fiori 2.27.2 → 2.28.1

package/dist/vscode.html-custom-data.json

@@ -937,7 +937,7 @@
     },
     {
       "name": "ui5-side-navigation",
-      "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user's current work context.\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on smaller screens.\nAdditionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is clicked.\n- **item-toggle** - Fired when a `ui5-side-navigation-item` or `ui5-side-navigation-group` is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event to suppress the expand/collapse.\nThe `expanded` state stays unchanged. This is handy, for example, if you want to\ndynamically load child items before allowing a parent item to expand.\n- **selection-change** - Fired when the selection has changed via user interaction.\n\n### **Slots:**\n - **default** - Defines the main items of the component.\n- **fixedItems** - Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n- **header** - Defines the header of the `ui5-side-navigation`.\n\n**Note:** The header is displayed when the component is expanded - the property `collapsed` is false;",
+      "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user's current work context.\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on smaller screens.\nAdditionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is clicked.\n- **item-toggle** - Fired when a `ui5-side-navigation-item` or `ui5-side-navigation-group` is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event to suppress the expand/collapse.\nThe `expanded` state stays unchanged. This is handy, for example, if you want to\ndynamically load child items before allowing a parent item to expand.\n- **selection-change** - Fired when the selection has changed via user interaction.\n\n### **Methods:**\n - **announceSearchMatchCount(count: _number_): _void_** - Announces the number of search matches found in the side navigation to assistive technologies.\n\nThis method uses an invisible live region message so screen readers can inform users\nabout the current number of search matches.\n\n### **Slots:**\n - **default** - Defines the main items of the component.\n- **filterSection** - Defines the filter section of the `ui5-side-navigation`.\n\n**Note:** The filter section is displayed when the component is expanded - the property `collapsed` is false;\n- **fixedItems** - Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n- **header** - Defines the header of the `ui5-side-navigation`.\n\n**Note:** The header is displayed when the component is expanded - the property `collapsed` is false;",
       "attributes": [
         {
           "name": "accessible-name",
@@ -948,6 +948,11 @@
           "name": "collapsed",
           "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.",
           "values": []
+        },
+        {
+          "name": "highlighted-text",
+          "description": "Specifies a term to be highlighted in the navigation items' text.\nWhen set, matching portions of item and group texts are visually emphasized during rendering.",
+          "values": []
         }
       ],
       "references": []
@@ -1051,6 +1056,43 @@
       ],
       "references": []
     },
+    {
+      "name": "ui5-side-navigation-search-field",
+      "description": "### Overview\n\nA `ui5-side-navigation-search-field` is a search field,\nused to filter the items of a `ui5-side-navigation`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSearchField.js\";`\n---\n\n\n### **Events:**\n - **input** - Fired when typing in input or clear icon is pressed.\n- **search** - Fired when the user has triggered search with Enter key or Search Button press.",
+      "attributes": [
+        {
+          "name": "accessible-description-ref",
+          "description": "Receives id (or many ids) of the elements that describe the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-name",
+          "description": "Defines the accessible ARIA name of the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-name-ref",
+          "description": "Receives id (or many ids) of the elements that label the component.",
+          "values": []
+        },
+        {
+          "name": "hide-clear-icon",
+          "description": "Defines whether the clear icon of the search will be hidden.\n\n**Note:** When not set, the clear icon is displayed while the component has a value.",
+          "values": []
+        },
+        {
+          "name": "placeholder",
+          "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "ui5-side-navigation-sub-item",
       "description": "### Overview\nRepresents a single navigation action within `ui5-side-navigation-item`.\nThe `ui5-side-navigation-sub-item` is intended to be used inside a `ui5-side-navigation-item` only.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.\n\n### **Slots:**\n - **tag** - Defines the tag to be displayed.\n\n**Note:** Tags are visible when the <code>NavigationList</code> is in expanded mode,\nand hidden when collapsed, but they are visible in the overflow of the collapsed mode.\n\n**Note:** Only one `ui5-tag` is allowed. The tag should use `design=\"Set2\"`, `hide-state-icon`,\nand `colorScheme` values 5-10 to avoid confusion with semantic colors (1-4).\n\n**Note:** It is recommended to limit tag width to 64px (4rem). If tag text exceeds this,\nuse shortened forms or abbreviations (e.g., \"Experimental\" → \"Exp\").\n\n**Important:** The <code>ui5-tag</code> must never be interactive (i.e., <code>active</code> must not be set to <code>true</code>),\nas this would lead to nesting of interactive elements, which is not allowed.",

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.27.2",
+  "version": "2.28.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2435,7 +2435,7 @@
         },
         {
           "name": "ui5-side-navigation",
-          "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user's current work context.\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on smaller screens.\nAdditionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is clicked.\n- **item-toggle** - Fired when a `ui5-side-navigation-item` or `ui5-side-navigation-group` is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event to suppress the expand/collapse.\nThe `expanded` state stays unchanged. This is handy, for example, if you want to\ndynamically load child items before allowing a parent item to expand.\n- **selection-change** - Fired when the selection has changed via user interaction.\n\n### **Slots:**\n - **default** - Defines the main items of the component.\n- **fixedItems** - Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n- **header** - Defines the header of the `ui5-side-navigation`.\n\n**Note:** The header is displayed when the component is expanded - the property `collapsed` is false;",
+          "description": "### Overview\n\nThe `SideNavigation` is used as a standard menu in applications.\nIt consists of three containers: header (top-aligned), main navigation section (top-aligned) and the secondary section (bottom-aligned).\n\n - The header is meant for displaying user related information - profile data, avatar, etc.\n - The main navigation section is related to the user's current work context.\n - The secondary section is mostly used to link additional information that may be of interest (legal information, developer communities, external help, contact information and so on).\n\n### Usage\n\nUse the available `ui5-side-navigation-group`, `ui5-side-navigation-item`\nand `ui5-side-navigation-sub-item` components to build your menu.\nThe items can consist of text only or an icon with text. The use or non-use of icons must be consistent for all items on one level.\nYou must not combine entries with and without icons on the same level. We strongly recommend that you do not use icons on the second level.\n\nThe `ui5-side-navigation` component is designed to be used within a `ui5-navigation-layout` component to ensure an optimal user experience.\n\nUsing it standalone may not match the intended design and functionality.\nFor example, the side navigation may not exhibit the correct behavior on smaller screens.\nAdditionally, the padding of the `ui5-shellbar` will not match the padding of the side navigation.\n\n### Keyboard Handling\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigation.js\"`\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationGroup.js\";` (for `ui5-side-navigation-group`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationItem.js\";` (for `ui5-side-navigation-item`)\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";` (for `ui5-side-navigation-sub-item`)\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is clicked.\n- **item-toggle** - Fired when a `ui5-side-navigation-item` or `ui5-side-navigation-group` is expanded or collapsed.\n\n**Note:** You can call `preventDefault()` on the event to suppress the expand/collapse.\nThe `expanded` state stays unchanged. This is handy, for example, if you want to\ndynamically load child items before allowing a parent item to expand.\n- **selection-change** - Fired when the selection has changed via user interaction.\n\n### **Methods:**\n - **announceSearchMatchCount(count: _number_): _void_** - Announces the number of search matches found in the side navigation to assistive technologies.\n\nThis method uses an invisible live region message so screen readers can inform users\nabout the current number of search matches.\n\n### **Slots:**\n - **default** - Defines the main items of the component.\n- **filterSection** - Defines the filter section of the `ui5-side-navigation`.\n\n**Note:** The filter section is displayed when the component is expanded - the property `collapsed` is false;\n- **fixedItems** - Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)\n- **header** - Defines the header of the `ui5-side-navigation`.\n\n**Note:** The header is displayed when the component is expanded - the property `collapsed` is false;",
           "doc-url": "",
           "attributes": [
             {
@@ -2447,6 +2447,11 @@
               "name": "collapsed",
               "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "highlighted-text",
+              "description": "Specifies a term to be highlighted in the navigation items' text.\nWhen set, matching portions of item and group texts are visually emphasized during rendering.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -2454,6 +2459,10 @@
               "name": "default",
               "description": "Defines the main items of the component."
             },
+            {
+              "name": "filterSection",
+              "description": "Defines the filter section of the `ui5-side-navigation`.\n\n**Note:** The filter section is displayed when the component is expanded - the property `collapsed` is false;"
+            },
             {
               "name": "fixedItems",
               "description": "Defines the fixed items at the bottom of the component.\n\n**Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items \"flat\" (do not pass sub-items)"
@@ -2488,6 +2497,11 @@
                 "name": "collapsed",
                 "description": "Defines whether the `ui5-side-navigation` is expanded or collapsed.\n\n**Note:** On small screens (screen width of 599px or less) the collapsed mode is not supported, and in\nexpanded mode the side navigation will take the whole width of the screen.\nThe `ui5-side-navigation` component is intended to be used within a `ui5-navigation-layout`\ncomponent to ensure proper responsive behavior. If you choose not to use the\n`ui5-navigation-layout`, you will need to implement the appropriate responsive patterns yourself,\nparticularly for smaller screens where the collapsed mode should not be used.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "highlighted-text",
+                "description": "Specifies a term to be highlighted in the navigation items' text.\nWhen set, matching portions of item and group texts are visually emphasized during rendering.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": [
@@ -2734,6 +2748,97 @@
             ]
           }
         },
+        {
+          "name": "ui5-side-navigation-search-field",
+          "description": "### Overview\n\nA `ui5-side-navigation-search-field` is a search field,\nused to filter the items of a `ui5-side-navigation`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSearchField.js\";`\n---\n\n\n### **Events:**\n - **input** - Fired when typing in input or clear icon is pressed.\n- **search** - Fired when the user has triggered search with Enter key or Search Button press.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "accessible-description-ref",
+              "description": "Receives id (or many ids) of the elements that describe the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Receives id (or many ids) of the elements that label the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "hide-clear-icon",
+              "description": "Defines whether the clear icon of the search will be hidden.\n\n**Note:** When not set, the clear icon is displayed while the component has a value.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "value",
+              "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
+              "value": { "type": "string", "default": "\"\"" }
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "description": "Fired when typing in input or clear icon is pressed."
+            },
+            {
+              "name": "search",
+              "description": "Fired when the user has triggered search with Enter key or Search Button press."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "accessible-description-ref",
+                "description": "Receives id (or many ids) of the elements that describe the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name-ref",
+                "description": "Receives id (or many ids) of the elements that label the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "hide-clear-icon",
+                "description": "Defines whether the clear icon of the search will be hidden.\n\n**Note:** When not set, the clear icon is displayed while the component has a value.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "placeholder",
+                "description": "Defines a short hint intended to aid the user with data entry when the\ncomponent has no value.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "value",
+                "description": "Defines the value of the component.\n\n**Note:** The property is updated upon typing.",
+                "value": { "type": "string" }
+              }
+            ],
+            "events": [
+              {
+                "name": "input",
+                "description": "Fired when typing in input or clear icon is pressed."
+              },
+              {
+                "name": "search",
+                "description": "Fired when the user has triggered search with Enter key or Search Button press."
+              }
+            ]
+          }
+        },
         {
           "name": "ui5-side-navigation-sub-item",
           "description": "### Overview\nRepresents a single navigation action within `ui5-side-navigation-item`.\nThe `ui5-side-navigation-sub-item` is intended to be used inside a `ui5-side-navigation-item` only.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.\n\n### **Slots:**\n - **tag** - Defines the tag to be displayed.\n\n**Note:** Tags are visible when the <code>NavigationList</code> is in expanded mode,\nand hidden when collapsed, but they are visible in the overflow of the collapsed mode.\n\n**Note:** Only one `ui5-tag` is allowed. The tag should use `design=\"Set2\"`, `hide-state-icon`,\nand `colorScheme` values 5-10 to avoid confusion with semantic colors (1-4).\n\n**Note:** It is recommended to limit tag width to 64px (4rem). If tag text exceeds this,\nuse shortened forms or abbreviations (e.g., \"Experimental\" → \"Exp\").\n\n**Important:** The <code>ui5-tag</code> must never be interactive (i.e., <code>active</code> must not be set to <code>true</code>),\nas this would lead to nesting of interactive elements, which is not allowed.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.27.2",
+  "version": "2.28.1",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -56,20 +56,20 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.27.2",
-    "@ui5/webcomponents-base": "2.27.2",
-    "@ui5/webcomponents-icons": "2.27.2",
-    "@ui5/webcomponents-theming": "2.27.2",
+    "@ui5/webcomponents": "2.28.1",
+    "@ui5/webcomponents-base": "2.28.1",
+    "@ui5/webcomponents-icons": "2.28.1",
+    "@ui5/webcomponents-theming": "2.28.1",
     "@zxing/library": "^0.21.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.27.2",
+    "@ui5/webcomponents-tools": "2.28.1",
     "cypress": "15.18.1",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "yarn": "^1.22.22"
   },
-  "gitHead": "5529f5dc2aa697c9152ca73f5b0c0211bd0b557e"
+  "gitHead": "a1c8be3fdb2b6ece9f6f0a3c0e03a90cfe3878f3"
 }

package/src/SideNavigationGroupTemplate.tsx

@@ -35,7 +35,7 @@ function TreeItemTemplate(this: SideNavigationGroup) {
 				 title={this._tooltip}
 				 aria-owns={this._groupId}
 			>
-				<div class="ui5-sn-item-text">{this.text}</div>
+				<div class="ui5-sn-item-text" dangerouslySetInnerHTML={{ __html: this._markupText }}></div>
 				{!!this.items.length &&
 					<Icon class="ui5-sn-item-toggle-icon"
 						  name={this.expanded ? navDownArrow : navRightArrow}

package/src/SideNavigationItemTemplate.tsx

@@ -52,7 +52,7 @@ function ItemTemplate(this: SideNavigationItem) {
 					:
 					this.icon && <Icon class="ui5-sn-item-icon" name={this.icon}/>
 				}
-				<div class="ui5-sn-item-text" id={this._textId}>{this.text}</div>
+				<div class="ui5-sn-item-text" id={this._textId} dangerouslySetInnerHTML={{ __html: this._markupText }}></div>
 				{this.hasTag &&
 					<div id={this._tagId} class="ui5-sn-item-tag-slot">
 						<slot name="tag"></slot>

package/src/SideNavigationSearchFieldTemplate.tsx

@@ -0,0 +1,31 @@
+import Input from "@ui5/webcomponents/dist/Input.js";
+import InputIcon from "@ui5/webcomponents/dist/InputIcon.js";
+import search from "@ui5/webcomponents-icons/dist/search.js";
+import type SideNavigationSearchField from "./SideNavigationSearchField.js";
+
+export default function SideNavigationSearchFieldTemplate(this: SideNavigationSearchField) {
+	return (
+		<div class="ui5-side-navigation-search-field-root">
+			<Input
+				id={`${this._id}-inner`}
+				class="ui5-side-navigation-search-field-input"
+				value={this.value}
+				type="Search"
+				placeholder={this._effectivePlaceholder}
+				showClearIcon={!this.hideClearIcon}
+				noTypeahead={true}
+				_inputAccInfo={this._inputAccInfo}
+				data-sap-focus-ref
+				onInput={this._handleInput}
+				onKeyDown={this._onkeydown}>
+				<InputIcon
+					slot="icon"
+					class="ui5-side-navigation-search-field-search-icon"
+					name={search}
+					accessibleName={this._translations.searchIcon}
+					onClick={this._handleSearchIconPress}
+				/>
+			</Input>
+		</div>
+	);
+}

package/src/SideNavigationSubItemTemplate.tsx

@@ -29,7 +29,7 @@ export default function SideNavigationSubItemTemplate(this: SideNavigationSubIte
 				{this.icon &&
 					<Icon class="ui5-sn-item-icon" name={this.icon}/>
 				}
-				<div class="ui5-sn-item-text" id={this._textId}>{this.text}</div>
+				<div class="ui5-sn-item-text" id={this._textId} dangerouslySetInnerHTML={{ __html: this._markupText }}></div>
 				{this.hasTag &&
 					<div id={this._tagId} class="ui5-sn-item-tag-slot">
 						<slot name="tag"></slot>

package/src/SideNavigationTemplate.tsx

@@ -14,6 +14,8 @@ export default function SideNavigationTemplate(this: SideNavigation) {
 		>
 			{header.call(this)}
 
+			{filterSection.call(this)}
+
 			{this.collapsed ?
 				<div role="menubar"
 					class="ui5-sn-list ui5-sn-flexible"
@@ -39,6 +41,14 @@ export default function SideNavigationTemplate(this: SideNavigation) {
 					aria-label={this.navigationMenuPrimaryHiddenText}
 				>
 					<slot></slot>
+					{this.showNoMatchText &&
+						<SideNavigationItem
+							text={this.noMatchText}
+							unselectable={true}
+							forcedTabIndex="0"
+							class="ui5-sn-item-no-match"
+						/>
+					}
 				</ul>
 			}
 
@@ -73,3 +83,11 @@ function header(this: SideNavigation) {
 		<slot name="header"></slot>
 	) : undefined;
 }
+
+function filterSection(this: SideNavigation) {
+	return !this.collapsed && this.filterSection.length ? (
+		<div class="ui5-sn-filter-section">
+			<slot name="filterSection"></slot>
+		</div>
+	) : undefined;
+}

package/src/UserMenuTemplate.tsx

@@ -37,13 +37,14 @@ export default function UserMenuTemplate(this: UserMenu) {
 			onScroll={this._handleScroll}
 		>
 			<>
+				<Title level="H1" class="ui5-hidden-text">{this._userMenuHeadingText}</Title>
 				<Bar class={{
 					"ui5-user-menu-fixed-header": true,
 					"ui5-user-menu-rp-scrolled": this._isScrolled || this._titleMovedToHeader
 				}} slot="header" accessible-name={this._ariaLabelledByAccountInformationText}>
 					{this._titleMovedToHeader &&
 						<Title
-							level="H1"
+							level="H2"
 							wrappingType="None"
 						>
 							{this._selectedAccount.titleText}
@@ -116,7 +117,7 @@ function headerContent(this: UserMenu) {
 					</Avatar>
 				</span>
 				{this._selectedAccount.titleText &&
-					<Text id="selected-account-title" class="ui5-user-menu-selected-account-title">{this._selectedAccount.titleText}</Text>
+					<Title level="H2" id="selected-account-title" class="ui5-user-menu-selected-account-title">{this._selectedAccount.titleText}</Title>
 				}
 
 				{this._selectedAccount.subtitleText &&
@@ -147,7 +148,7 @@ function otherAccountsContent(this: UserMenu) {
 	return (<>
 		<Panel collapsed={true} class="ui5-user-menu-other-accounts" accessibleName={`${this._otherAccountsButtonText} (${this._otherAccounts.length})`}>
 			<div slot="header" class="ui5-user-menu-account-header">
-				<Title slot="header" level="H4" wrapping-type="None">{this._otherAccountsButtonText} ({this._otherAccounts.length})</Title>
+				<Title slot="header" level="H3" wrapping-type="None">{this._otherAccountsButtonText} ({this._otherAccounts.length})</Title>
 				{this.showEditAccounts &&
 					<Button slot="header" class="ui5-user-menu-add-account-btn" design="Transparent" icon={userEdit} onClick={this._handleEditAccountsClick} tooltip={this._editAccountsTooltip}/>
 				}

package/src/UserSettingsAppearanceViewTemplate.tsx

@@ -7,7 +7,7 @@ export default function UserSettingsAppearanceViewTemplate(this: UserSettingsApp
 		<div class="ui5-user-settings-view-container">
 			<div class="ui5-user-settings-view">
 				<slot name="additionalContent"></slot>
-				<List class="user-settings-appearance-view-list" onItemClick={this._handleItemClick} data-sap-ui-fastnavgroup="false">
+				<List class="user-settings-appearance-view-list" onSelectionChange={this._handleSelectionChange} selectionMode="Single" data-sap-ui-fastnavgroup="false">
 					{this.text && <ListItemGroupHeader class="user-settings-appearance-view-top-header">{this.text}</ListItemGroupHeader>}
 					<slot></slot>
 				</List>

package/src/UserSettingsDialogTemplate.tsx

@@ -67,7 +67,7 @@ export default function UserSettingsDialogTemplate(this: UserSettingsDialog) {
 }
 
 function renderList(this: UserSettingsDialog, items: Array<UserSettingsItem> = [], classes: string) {
-	return <List onItemClick={this._handleItemClick} class={classes} separators="None" data-sap-ui-fastnavgroup="false">
+	return <List onSelectionChange={this._handleSelectionChange} onItemClick={this._handleItemClick} selectionMode="Single" class={classes} separators="None" data-sap-ui-fastnavgroup="false">
 		{items.map(item => (
 			<ListItemStandard
 				class={!item._icon && item._siblingsWithIcon ? "ui5-user-settings-item-no-icon" : ""}

package/src/UserSettingsItemTemplate.tsx

@@ -38,13 +38,13 @@ export default function UserSettingsItemTemplate(this: UserSettingsItem) {
 
 	return (
 		<div class="ui5-user-settings-item">
-			<header class="ui5-user-settings-item-header-container">
+			<div class="ui5-user-settings-item-header-container">
 				<div class={`ui5-user-settings-item-header${this._shouldShowBackButton ? " ui5-user-settings-item-header--with-back" : ""}`}>
 					<Button icon="nav-back" design="Transparent" onClick={this._handleBackButtonClick} class="ui5-user-settings-item-collapse-btn" style={{ display: this._shouldShowBackButton ? "block" : "" }}></Button>
 
 					<Title level="H2" size="H5">{this._hasSelectedPageView ? this._selectedPageView.text : this.headerText}</Title>
 				</div>
-			</header>
+			</div>
 
 			{this.loading ? loadingState : content}
 		</div>

package/src/i18n/messagebundle.properties

@@ -509,6 +509,15 @@ SEARCH_FIELD_LABEL=Search field
 #XFLD: Placeholder text for search field with scope on mobile
 SEARCH_FIELD_PLACEHOLDER_WITH_SCOPE=Search in: {0}
 
+#XFLD: Default placeholder text for the side navigation search field
+SIDE_NAVIGATION_SEARCH_FIELD_PLACEHOLDER=Find in Navigation
+
+#XACT: Default ARIA label for the side navigation search field
+SIDE_NAVIGATION_SEARCH_FIELD_LABEL=Side navigation filter
+
+#XACT: Default ARIA description for the side navigation search field
+SIDE_NAVIGATION_SEARCH_DESCRIPTION=Results update as you type. Press Enter for the number of results
+
 #XACT: ARIA announcement for search field clear icon
 SEARCH_FIELD_CLEAR_ICON=Clear search
 
@@ -563,6 +572,12 @@ SIDE_NAVIGATION_FLEXIBLE_LIST_LABEL=Primary Navigation Menu
 #XTXT: Text for the Side Navigation Footer list
 SIDE_NAVIGATION_FIXED_LIST_LABEL=Footer Navigation Menu
 
+#XACT: Screen reader announcement when the applied filter matches a single navigation item
+SIDE_NAVIGATION_SEARCH_MATCH_COUNT_SINGULAR={0} match found
+
+#XACT: Screen reader announcement when the applied filter matches multiple navigation items
+SIDE_NAVIGATION_SEARCH_MATCH_COUNT_PLURAL={0} matches found
+
 #XTXT
 SIDE_NAVIGATION_ICON_COLLAPSE=Colapse
 
@@ -602,6 +617,9 @@ USER_MENU_CURRENT_INFORMATION_TXT=Current user information
 #XTXT: ARIA User menu actions
 USER_MENU_ACTIONS_TXT=Actions
 
+#XTXT: ARIA User menu heading
+USER_MENU_HEADING_TXT=User menu
+
 #XACT: ARIA information for the user settings dialog
 USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=User settings
 
@@ -635,8 +653,8 @@ USER_SETTINGS_ACCOUNT_EDIT_AVATAR_TXT=Edit avatar
 #XTXT: User settings account view manage button
 USER_SETTINGS_ACCOUNT_MANAGE_ACCOUNT_BUTTON_TXT=Manage account
 
-#XTXT: Accessible name for the notifications list in the primary notifications view
-USER_SETTINGS_NOTIFICATIONS_LIST_LABEL=List of Notifications Type
+#XACT: Accessible name for the notifications list in the primary notifications view
+USER_SETTINGS_NOTIFICATIONS_LIST_LABEL=List of Notification Types
 
-#XTXT: Accessible name for the notifications preferences list in the secondary notifications view
-USER_SETTINGS_NOTIFICATIONS_PREFERENCES_LIST_LABEL=List of Notifications Preferences
+#XACT: Accessible name for the notifications preferences list in the secondary notifications view
+USER_SETTINGS_NOTIFICATIONS_PREFERENCES_LIST_LABEL=List of Notification Preferences

package/src/i18n/messagebundle_ar.properties

@@ -402,6 +402,8 @@ USER_MENU_CURRENT_INFORMATION_TXT=معلومات المستخدم الحالي
 
 USER_MENU_ACTIONS_TXT=الإجراءات
 
+USER_MENU_HEADING_TXT=قائمة المستخدم
+
 USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=إعدادات المستخدم
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=بند إعدادات المستخدم

package/src/i18n/messagebundle_bg.properties

@@ -402,6 +402,8 @@ USER_MENU_CURRENT_INFORMATION_TXT=Информация за текущия по
 
 USER_MENU_ACTIONS_TXT=Действия
 
+USER_MENU_HEADING_TXT=Потребителско меню
+
 USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Потребителски настройки
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=Позиция от потребителските настройки

package/src/i18n/messagebundle_ca.properties

@@ -402,6 +402,8 @@ USER_MENU_CURRENT_INFORMATION_TXT=Informació d''usuari actual
 
 USER_MENU_ACTIONS_TXT=Accions
 
+USER_MENU_HEADING_TXT=Menú d''usuari
+
 USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Opcions d’usuari
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=Element de configuració d''usuari
@@ -424,6 +426,6 @@ USER_SETTINGS_ACCOUNT_EDIT_AVATAR_TXT=Editar avatar
 
 USER_SETTINGS_ACCOUNT_MANAGE_ACCOUNT_BUTTON_TXT=Gestionar compte
 
-USER_SETTINGS_NOTIFICATIONS_LIST_LABEL=Llista de tipus de notificacions
+USER_SETTINGS_NOTIFICATIONS_LIST_LABEL=Llista de tipus de notificació
 
-USER_SETTINGS_NOTIFICATIONS_PREFERENCES_LIST_LABEL=Llista de preferències de notificacions
+USER_SETTINGS_NOTIFICATIONS_PREFERENCES_LIST_LABEL=Llista de preferències de notificació

package/src/i18n/messagebundle_cnr.properties

@@ -402,6 +402,8 @@ USER_MENU_CURRENT_INFORMATION_TXT=Trenutne informacije o korisniku
 
 USER_MENU_ACTIONS_TXT=Radnje
 
+USER_MENU_HEADING_TXT=Korisnički meni
+
 USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Korisnička podešavanja
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=Stavka korisničkih podešavanja

package/src/i18n/messagebundle_cs.properties

@@ -402,6 +402,8 @@ USER_MENU_CURRENT_INFORMATION_TXT=Informace o aktuálním uživateli
 
 USER_MENU_ACTIONS_TXT=Akce
 
+USER_MENU_HEADING_TXT=Uživatelské menu
+
 USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Uživatelská nastavení
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=Položka uživatelských nastavení

package/src/i18n/messagebundle_cy.properties

@@ -402,6 +402,8 @@ USER_MENU_CURRENT_INFORMATION_TXT=Gwybodaeth y defnyddiwr cyfredol
 
 USER_MENU_ACTIONS_TXT=Gweithredoedd
 
+USER_MENU_HEADING_TXT=Dewislen Defnyddiwr
+
 USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Gosodiadau''r Defnyddiwr
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=Eitem Gosodiadau Defnyddiwr

package/src/i18n/messagebundle_da.properties

@@ -402,6 +402,8 @@ USER_MENU_CURRENT_INFORMATION_TXT=Oplysninger om aktuel bruger
 
 USER_MENU_ACTIONS_TXT=Handlinger
 
+USER_MENU_HEADING_TXT=Brugermenu
+
 USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Brugerindstillinger
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=Brugerindstillingselement
@@ -424,6 +426,6 @@ USER_SETTINGS_ACCOUNT_EDIT_AVATAR_TXT=Rediger avatar
 
 USER_SETTINGS_ACCOUNT_MANAGE_ACCOUNT_BUTTON_TXT=Administrer konto
 
-USER_SETTINGS_NOTIFICATIONS_LIST_LABEL=Liste over meddelelsestype
+USER_SETTINGS_NOTIFICATIONS_LIST_LABEL=Liste over meddelelsestyper
 
 USER_SETTINGS_NOTIFICATIONS_PREFERENCES_LIST_LABEL=Liste over meddelelsespræferencer

package/src/i18n/messagebundle_de.properties

@@ -402,6 +402,8 @@ USER_MENU_CURRENT_INFORMATION_TXT=Aktuelle Benutzerinformationen
 
 USER_MENU_ACTIONS_TXT=Aktionen
 
+USER_MENU_HEADING_TXT=Benutzermenü
+
 USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Benutzereinstellungen
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=Benutzereinstellungselement

package/src/i18n/messagebundle_el.properties

@@ -402,6 +402,8 @@ USER_MENU_CURRENT_INFORMATION_TXT=Πληροφορίες τρέχοντος χρ
 
 USER_MENU_ACTIONS_TXT=Ενέργειες
 
+USER_MENU_HEADING_TXT=Μενού Χρήστη
+
 USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Ρυθμίσεις Χρήστη
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=Στοιχείο Ρυθμίσεων Χρήστη
@@ -424,6 +426,6 @@ USER_SETTINGS_ACCOUNT_EDIT_AVATAR_TXT=Επεξεργασία Avatar
 
 USER_SETTINGS_ACCOUNT_MANAGE_ACCOUNT_BUTTON_TXT=Διαχείριση Λογαριασμού
 
-USER_SETTINGS_NOTIFICATIONS_LIST_LABEL=Λίστα Τύπου Ειδοποιήσεων
+USER_SETTINGS_NOTIFICATIONS_LIST_LABEL=Λίστα Τύπων Ειδοποίησης
 
-USER_SETTINGS_NOTIFICATIONS_PREFERENCES_LIST_LABEL=Λίστα Προτιμήσεων Ειδοποιήσεων
+USER_SETTINGS_NOTIFICATIONS_PREFERENCES_LIST_LABEL=Λίστα Προτιμήσεων Ειδοποίησης