@ui5/webcomponents-fiori 2.22.0-rc.3 → 2.22.0

package/dist/generated/themes/UserMenuItem.css.js

@@ -3,6 +3,6 @@ import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/s
 import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "u" + "i" + "5" + "/" + "w" + "e" + "b" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s" + "-" + "f" + "i" + "o" + "r" + "i", "sap_horizon", async () => defaultTheme, "host");
-export default `:host{height:40px;border:none}:host(:last-of-type){margin-bottom:0}:host(:first-of-type){margin-top:0}
+export default `:host{height:2.5rem;min-height:2.5rem;border:none}.ui5-li-root{min-height:2.5rem}:host(:last-of-type){margin-bottom:0}:host(:first-of-type){margin-top:0}:host([show-selection]){height:3.25rem;min-height:3.25rem}:host([show-selection]) .ui5-li-root{min-height:3.25rem;padding-block:.5rem}.ui5-user-menu-item-text-wrapper{display:flex;flex-direction:column;gap:.25rem;overflow:hidden;flex:1;min-width:0}.ui5-user-menu-item-selection-text{font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;color:var(--sapContent_LabelColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 `;
 //# sourceMappingURL=UserMenuItem.css.js.map

package/dist/generated/themes/UserMenuItem.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserMenuItem.css.js","sourceRoot":"","sources":["../../../src/generated/themes/UserMenuItem.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC9N,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\" + \"-\" + \"f\" + \"i\" + \"o\" + \"r\" + \"i\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `:host{height:40px;border:none}:host(:last-of-type){margin-bottom:0}:host(:first-of-type){margin-top:0}\n`"]}
+{"version":3,"file":"UserMenuItem.css.js","sourceRoot":"","sources":["../../../src/generated/themes/UserMenuItem.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;AAC9N,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"u\" + \"i\" + \"5\" + \"/\" + \"w\" + \"e\" + \"b\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\" + \"-\" + \"f\" + \"i\" + \"o\" + \"r\" + \"i\", \"sap_horizon\", async () => defaultTheme, \"host\");\nexport default `:host{height:2.5rem;min-height:2.5rem;border:none}.ui5-li-root{min-height:2.5rem}:host(:last-of-type){margin-bottom:0}:host(:first-of-type){margin-top:0}:host([show-selection]){height:3.25rem;min-height:3.25rem}:host([show-selection]) .ui5-li-root{min-height:3.25rem;padding-block:.5rem}.ui5-user-menu-item-text-wrapper{display:flex;flex-direction:column;gap:.25rem;overflow:hidden;flex:1;min-width:0}.ui5-user-menu-item-selection-text{font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;color:var(--sapContent_LabelColor);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n`"]}

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

@@ -1137,7 +1137,7 @@
     },
     {
       "name": "ui5-timeline",
-      "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n### Header Bar\n\nThe Timeline supports a `header-bar` slot for search, filter, and sort functionality.\nUse the `ui5-timeline-header-bar` component in this slot.\nThe Timeline fires `search`, `filter`, and `sort` events that the application should handle\nby adding, removing, or reordering items in the DOM. The Timeline itself does not perform\nfiltering or sorting — it renders whatever items are provided in the default slot.\n\n\n---\n\n\n\n\n### **Events:**\n - **filter** - Fired when the user changes filter selection in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the filter selection.\n- **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n- **search** - Fired when the user performs a search in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the search results.\n- **sort** - Fired when the user changes sort order in the header bar.\n\n**Note:** The Timeline does not perform sorting. The application should handle\nthis event and reorder the items in the DOM accordingly.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.\n- **headerBar** - Defines the header bar of the timeline.\nUse `ui5-timeline-header-bar` for filtering, sorting, and search functionality.\n\n**Note:** The Timeline fires `search`, `filter`, and `sort` events when the user interacts\nwith the header bar. The application should handle these events to filter/sort the items.",
+      "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n\n---\n\n\n\n\n### **Events:**\n - **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.",
       "attributes": [
         {
           "name": "accessible-name",
@@ -1171,23 +1171,6 @@
       ],
       "references": []
     },
-    {
-      "name": "ui5-timeline-filter-option",
-      "description": "### Overview\n\nThe `ui5-timeline-filter-option` component defines individual filter values within a `ui5-timeline-header-bar`.\nIt represents a single selectable option that users can choose to filter timeline items.\n\n### Usage\n\nThe `ui5-timeline-filter-option` is used as a child component within `ui5-timeline-header-bar`.\nEach option represents a specific value that can be used for filtering.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/TimelineFilterOption.js\";`\n\n\n---\n\n\n",
-      "attributes": [
-        {
-          "name": "selected",
-          "description": "Defines if the filter option is selected.",
-          "values": []
-        },
-        {
-          "name": "text",
-          "description": "Defines the text of the filter option.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "ui5-timeline-group-item",
       "description": "### Overview\n\nAn entry posted on the timeline.\nIt is intented to represent a group of `<ui5-timeline-item>`s.\n\n**Note**: Please do not use empty groups in order to preserve the intended design.\n\n\n---\n\n\n\n\n### **Events:**\n - **toggle** - Fired when the group item is expanded or collapsed.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline-group-item`.",
@@ -1205,48 +1188,6 @@
       ],
       "references": []
     },
-    {
-      "name": "ui5-timeline-header-bar",
-      "description": "### Overview\n\nThe `ui5-timeline-header-bar` component provides search, filter, and sort functionality\nfor the `ui5-timeline` component. It is designed to be slotted into the `header-bar` slot\nof the Timeline.\n\n### Usage\n\nThe component fires events (`search`, `filter`, `sort`) that the application should handle\nto filter/sort the timeline items. The Timeline component itself does not perform any\nfiltering or sorting - this is the responsibility of the application.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/TimelineHeaderBar.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **filter** - Fired when the user changes filter selection.\n- **search** - Fired when the user performs a search.\n- **sort** - Fired when the user changes sort order.\n\n### **Slots:**\n - **default** - Filter options to display in the filter dialog.",
-      "attributes": [
-        {
-          "name": "filter-by",
-          "description": "The current filter category label.",
-          "values": []
-        },
-        {
-          "name": "search-value",
-          "description": "The current search value.",
-          "values": []
-        },
-        {
-          "name": "show-filter",
-          "description": "Shows the filter button.",
-          "values": []
-        },
-        {
-          "name": "show-filter-by-date",
-          "description": "Shows the filter by date option.",
-          "values": []
-        },
-        {
-          "name": "show-search",
-          "description": "Shows the search input field.",
-          "values": []
-        },
-        {
-          "name": "show-sort",
-          "description": "Shows the sort button.",
-          "values": []
-        },
-        {
-          "name": "sort-order",
-          "description": "The current sort order.",
-          "values": [{ "name": "Ascending" }, { "name": "Descending" }]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "ui5-timeline-item",
       "description": "### Overview\n\nAn entry posted on the timeline.\n\n\n---\n\n\n\n\n### **Events:**\n - **name-click** - Fired when the item name is pressed either with a\nclick/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `name-clickable`\nattribute is not set.\n\n### **Slots:**\n - **default** - Defines the content of the `ui5-timeline-item`.",
@@ -1509,7 +1450,13 @@
     {
       "name": "ui5-user-menu-item",
       "description": "### Overview\n\n`ui5-user-menu-item` is the item to use inside a `ui5-user-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-user-menu-item` represents a node in a `ui5-user-menu`. The user menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a menu item in that menu. Therefore, you should only use\n`ui5-user-menu-item` directly in your apps. The `ui5-menu` menu item is internal for the menu, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-user-menu-item` for the intended design.",
-      "attributes": [],
+      "attributes": [
+        {
+          "name": "show-selection",
+          "description": "When set, a second line appears below the menu item text showing the text\nof the currently selected sub-item. Intended for use with a single-select\nui5-menu-item-group (check-mode=\"Single\").\nWhen enabled, the checked sub-item cannot be unchecked,\nensuring the selection text is always displayed.",
+          "values": []
+        }
+      ],
       "references": []
     },
     {
@@ -1694,13 +1641,8 @@
     },
     {
       "name": "ui5-view-settings-dialog",
-      "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened.\n- **cancel** - Fired when cancel button is activated.\n- **close** - Fired after the dialog is closed.\n- **confirm** - Fired when confirmation button is activated.\n- **open** - Fired after the dialog is opened.\n- **reset-click** - Fired when the Reset button is clicked.\n\n**Note:** Use this event to reset the state of custom tab content,\nas the component cannot detect changes within custom tabs.\n\n### **Methods:**\n - **setConfirmedSettings(settings: _VSDSettings_): _void_** - Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:\n\n### **Slots:**\n - **customTabs** - Defines custom tabs for the dialog.\n\nThe custom tabs are rendered after the built-in tabs (`Sort`, `Filter`, `Group`).\n\n**Note:** If you want to use this slot, you need to import the item: `import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js\";`\n- **filterItems** - Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n- **groupItems** - Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n- **sortItems** - Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n\n### **CSS Parts:**\n - **header** - Used to style the header.",
+      "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened.\n- **cancel** - Fired when cancel button is activated.\n- **close** - Fired after the dialog is closed.\n- **confirm** - Fired when confirmation button is activated.\n- **open** - Fired after the dialog is opened.\n- **reset** - Fired when the Reset button is clicked.\n\n**Note:** This event is particularly relevant when the dialog contains custom tabs.\nBy default, the Reset button resets all built-in settings (sort, filter, group) to their\ninitial values. However, the component has no knowledge of the content or state inside\ncustom tabs — it cannot detect what has changed or what the \"default\" values are.\nTherefore, when this event is fired, it is the application developer's responsibility\nto listen for it and manually reset the custom tab content to its initial state.\n\n### **Methods:**\n - **setConfirmedSettings(settings: _VSDSettings_): _void_** - Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:\n\n### **Slots:**\n - **customTabs** - Defines custom tabs for the dialog.\n\nThe custom tabs are rendered after the built-in tabs (`Sort`, `Filter`, `Group`).\n\n**Note:** If you want to use this slot, you need to import the item: `import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js\";`\n- **filterItems** - Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n- **groupItems** - Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n- **sortItems** - Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n\n### **CSS Parts:**\n - **header** - Used to style the header.",
       "attributes": [
-        {
-          "name": "enable-reset",
-          "description": "Defines whether the Reset button is always enabled.\n\n**Note:** By default, the Reset button is only enabled when the dialog settings\ndiffer from their initial state. Set this property to `true` to keep the Reset\nbutton always enabled, which is useful when working with custom tabs\nwhose internal state changes cannot be detected by the component.",
-          "values": []
-        },
         {
           "name": "group-descending",
           "description": "Defines the initial group order.",
@@ -1711,6 +1653,11 @@
           "description": "Indicates if the dialog is open.",
           "values": []
         },
+        {
+          "name": "reset-enabled",
+          "description": "Controls whether the Reset button is always enabled.\n\nBy default, the Reset button is enabled only when the built-in settings (Sort, Filter, Group)\ndiffer from their initial state — the component can detect these changes automatically.\nHowever, when the dialog contains custom tabs, the component has no way to detect\nwhether the custom tab content has been modified by the user.\n\nSet this property to `true` when the user has made changes inside a custom tab, so that\nthe Reset button becomes enabled and the user can trigger a reset.\nSet it back to `false` once the custom tab content is back to its initial state\n(e.g. after the user confirms or after a reset is applied).",
+          "values": []
+        },
         {
           "name": "sort-descending",
           "description": "Defines the initial sort order.",
@@ -1725,12 +1672,12 @@
       "attributes": [
         {
           "name": "icon",
-          "description": "Defines the icon of the custom tab.\n\n**Note:** If not provided, the tab should not be rendered.",
+          "description": "Defines the icon of the custom tab button in the segmented button.",
           "values": []
         },
         {
-          "name": "title",
-          "description": "Defines the title of the custom tab.\n\n**Note:** It is displayed in the dialog header when this tab is selected.",
+          "name": "title-text",
+          "description": "Defines the title text of the custom tab.\n\n**Note:** It is displayed in the dialog header when this tab is selected.",
           "values": []
         },
         {

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.22.0-rc.3",
+  "version": "2.22.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2697,7 +2697,7 @@
         },
         {
           "name": "ui5-timeline",
-          "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n\n### Header Bar\n\nThe Timeline supports a `header-bar` slot for search, filter, and sort functionality.\nUse the `ui5-timeline-header-bar` component in this slot.\nThe Timeline fires `search`, `filter`, and `sort` events that the application should handle\nby adding, removing, or reordering items in the DOM. The Timeline itself does not perform\nfiltering or sorting — it renders whatever items are provided in the default slot.\n---\n\n\n### **Events:**\n - **filter** - Fired when the user changes filter selection in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the filter selection.\n- **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n- **search** - Fired when the user performs a search in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the search results.\n- **sort** - Fired when the user changes sort order in the header bar.\n\n**Note:** The Timeline does not perform sorting. The application should handle\nthis event and reorder the items in the DOM accordingly.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.\n- **headerBar** - Defines the header bar of the timeline.\nUse `ui5-timeline-header-bar` for filtering, sorting, and search functionality.\n\n**Note:** The Timeline fires `search`, `filter`, and `sort` events when the user interacts\nwith the header bar. The application should handle these events to filter/sort the items.",
+          "description": "### Overview\n\nThe `ui5-timeline` component shows entries (such as objects, events, or posts) in chronological order.\nA common use case is to provide information about changes to an object, or events related to an object.\nThese entries can be generated by the system (for example, value XY changed from A to B), or added manually.\nThere are two distinct variants of the timeline: basic and social. The basic timeline is read-only,\nwhile the social timeline offers a high level of interaction and collaboration, and is integrated within SAP Jam.\n---\n\n\n### **Events:**\n - **load-more** - Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline`.",
           "doc-url": "",
           "attributes": [
             {
@@ -2736,28 +2736,12 @@
             {
               "name": "default",
               "description": "Determines the content of the `ui5-timeline`."
-            },
-            {
-              "name": "headerBar",
-              "description": "Defines the header bar of the timeline.\nUse `ui5-timeline-header-bar` for filtering, sorting, and search functionality.\n\n**Note:** The Timeline fires `search`, `filter`, and `sort` events when the user interacts\nwith the header bar. The application should handle these events to filter/sort the items."
             }
           ],
           "events": [
-            {
-              "name": "filter",
-              "description": "Fired when the user changes filter selection in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the filter selection."
-            },
             {
               "name": "load-more",
               "description": "Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`."
-            },
-            {
-              "name": "search",
-              "description": "Fired when the user performs a search in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the search results."
-            },
-            {
-              "name": "sort",
-              "description": "Fired when the user changes sort order in the header bar.\n\n**Note:** The Timeline does not perform sorting. The application should handle\nthis event and reorder the items in the DOM accordingly."
             }
           ],
           "js": {
@@ -2789,58 +2773,13 @@
               }
             ],
             "events": [
-              {
-                "name": "filter",
-                "description": "Fired when the user changes filter selection in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the filter selection."
-              },
               {
                 "name": "load-more",
                 "description": "Fired when the user presses the `More` button or scrolls to the Timeline's end.\n\n**Note:** The event will be fired if `growing` is set to `Button` or `Scroll`."
-              },
-              {
-                "name": "search",
-                "description": "Fired when the user performs a search in the header bar.\n\n**Note:** The Timeline does not perform filtering. The application should handle\nthis event and add/remove items from the DOM to reflect the search results."
-              },
-              {
-                "name": "sort",
-                "description": "Fired when the user changes sort order in the header bar.\n\n**Note:** The Timeline does not perform sorting. The application should handle\nthis event and reorder the items in the DOM accordingly."
               }
             ]
           }
         },
-        {
-          "name": "ui5-timeline-filter-option",
-          "description": "### Overview\n\nThe `ui5-timeline-filter-option` component defines individual filter values within a `ui5-timeline-header-bar`.\nIt represents a single selectable option that users can choose to filter timeline items.\n\n### Usage\n\nThe `ui5-timeline-filter-option` is used as a child component within `ui5-timeline-header-bar`.\nEach option represents a specific value that can be used for filtering.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/TimelineFilterOption.js\";`\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "selected",
-              "description": "Defines if the filter option is selected.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "text",
-              "description": "Defines the text of the filter option.",
-              "value": { "type": "string", "default": "\"\"" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "selected",
-                "description": "Defines if the filter option is selected.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "text",
-                "description": "Defines the text of the filter option.",
-                "value": { "type": "string" }
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "ui5-timeline-group-item",
           "description": "### Overview\n\nAn entry posted on the timeline.\nIt is intented to represent a group of `<ui5-timeline-item>`s.\n\n**Note**: Please do not use empty groups in order to preserve the intended design.\n---\n\n\n### **Events:**\n - **toggle** - Fired when the group item is expanded or collapsed.\n\n### **Slots:**\n - **default** - Determines the content of the `ui5-timeline-group-item`.",
@@ -2890,124 +2829,6 @@
             ]
           }
         },
-        {
-          "name": "ui5-timeline-header-bar",
-          "description": "### Overview\n\nThe `ui5-timeline-header-bar` component provides search, filter, and sort functionality\nfor the `ui5-timeline` component. It is designed to be slotted into the `header-bar` slot\nof the Timeline.\n\n### Usage\n\nThe component fires events (`search`, `filter`, `sort`) that the application should handle\nto filter/sort the timeline items. The Timeline component itself does not perform any\nfiltering or sorting - this is the responsibility of the application.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/TimelineHeaderBar.js\";`\n---\n\n\n### **Events:**\n - **filter** - Fired when the user changes filter selection.\n- **search** - Fired when the user performs a search.\n- **sort** - Fired when the user changes sort order.\n\n### **Slots:**\n - **default** - Filter options to display in the filter dialog.",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "filter-by",
-              "description": "The current filter category label.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "search-value",
-              "description": "The current search value.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "show-filter",
-              "description": "Shows the filter button.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "show-filter-by-date",
-              "description": "Shows the filter by date option.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "show-search",
-              "description": "Shows the search input field.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "show-sort",
-              "description": "Shows the sort button.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "sort-order",
-              "description": "The current sort order.",
-              "value": {
-                "type": "\"Ascending\" | \"Descending\"",
-                "default": "\"Ascending\""
-              }
-            }
-          ],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Filter options to display in the filter dialog."
-            }
-          ],
-          "events": [
-            {
-              "name": "filter",
-              "description": "Fired when the user changes filter selection."
-            },
-            {
-              "name": "search",
-              "description": "Fired when the user performs a search."
-            },
-            {
-              "name": "sort",
-              "description": "Fired when the user changes sort order."
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "filter-by",
-                "description": "The current filter category label.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "search-value",
-                "description": "The current search value.",
-                "value": { "type": "string" }
-              },
-              {
-                "name": "show-filter",
-                "description": "Shows the filter button.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "show-filter-by-date",
-                "description": "Shows the filter by date option.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "show-search",
-                "description": "Shows the search input field.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "show-sort",
-                "description": "Shows the sort button.",
-                "value": { "type": "boolean" }
-              },
-              {
-                "name": "sort-order",
-                "description": "The current sort order.",
-                "value": { "type": "\"Ascending\" | \"Descending\"" }
-              }
-            ],
-            "events": [
-              {
-                "name": "filter",
-                "description": "Fired when the user changes filter selection."
-              },
-              {
-                "name": "search",
-                "description": "Fired when the user performs a search."
-              },
-              {
-                "name": "sort",
-                "description": "Fired when the user changes sort order."
-              }
-            ]
-          }
-        },
         {
           "name": "ui5-timeline-item",
           "description": "### Overview\n\nAn entry posted on the timeline.\n---\n\n\n### **Events:**\n - **name-click** - Fired when the item name is pressed either with a\nclick/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `name-clickable`\nattribute is not set.\n\n### **Slots:**\n - **default** - Defines the content of the `ui5-timeline-item`.",
@@ -3640,7 +3461,13 @@
           "name": "ui5-user-menu-item",
           "description": "### Overview\n\n`ui5-user-menu-item` is the item to use inside a `ui5-user-menu`.\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Usage\n\n`ui5-user-menu-item` represents a node in a `ui5-user-menu`. The user menu itself is rendered as a list,\nand each `ui5-menu-item` is represented by a menu item in that menu. Therefore, you should only use\n`ui5-user-menu-item` directly in your apps. The `ui5-menu` menu item is internal for the menu, and not intended for public use.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/UserMenuItem.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-user-menu-item` for the intended design.",
           "doc-url": "",
-          "attributes": [],
+          "attributes": [
+            {
+              "name": "show-selection",
+              "description": "When set, a second line appears below the menu item text showing the text\nof the currently selected sub-item. Intended for use with a single-select\nui5-menu-item-group (check-mode=\"Single\").\nWhen enabled, the checked sub-item cannot be unchecked,\nensuring the selection text is always displayed.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
           "slots": [
             {
               "name": "default",
@@ -3648,7 +3475,16 @@
             }
           ],
           "events": [],
-          "js": { "properties": [], "events": [] }
+          "js": {
+            "properties": [
+              {
+                "name": "show-selection",
+                "description": "When set, a second line appears below the menu item text showing the text\nof the currently selected sub-item. Intended for use with a single-select\nui5-menu-item-group (check-mode=\"Single\").\nWhen enabled, the checked sub-item cannot be unchecked,\nensuring the selection text is always displayed.",
+                "value": { "type": "boolean" }
+              }
+            ],
+            "events": []
+          }
         },
         {
           "name": "ui5-user-menu-item-group",
@@ -4127,14 +3963,9 @@
         },
         {
           "name": "ui5-view-settings-dialog",
-          "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened.\n- **cancel** - Fired when cancel button is activated.\n- **close** - Fired after the dialog is closed.\n- **confirm** - Fired when confirmation button is activated.\n- **open** - Fired after the dialog is opened.\n- **reset-click** - Fired when the Reset button is clicked.\n\n**Note:** Use this event to reset the state of custom tab content,\nas the component cannot detect changes within custom tabs.\n\n### **Methods:**\n - **setConfirmedSettings(settings: _VSDSettings_): _void_** - Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:\n\n### **Slots:**\n - **customTabs** - Defines custom tabs for the dialog.\n\nThe custom tabs are rendered after the built-in tabs (`Sort`, `Filter`, `Group`).\n\n**Note:** If you want to use this slot, you need to import the item: `import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js\";`\n- **filterItems** - Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n- **groupItems** - Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n- **sortItems** - Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n\n### **CSS Parts:**\n - **header** - Used to style the header.",
+          "description": "### Overview\nThe `ui5-view-settings-dialog` component helps the user to sort data within a list or a table.\nIt consists of several lists like `Sort order` which is built-in and `Sort By` and `Filter By` lists,\nfor which you must be provide items(`ui5-sort-item` & `ui5-filter-item` respectively)\nThese options can be used to create sorters for a table.\n\nThe `ui5-view-settings-dialog` interrupts the current application processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe `ui5-view-settings-dialog` is modal, which means that user action is required before returning to the parent window is possible.\n\n### Structure\nA `ui5-view-settings-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-view-settings-dialog` is usually displayed at the center of the screen.\n\n### Responsive Behavior\n`ui5-view-settings-dialog` stretches on full screen on phones.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened.\n- **cancel** - Fired when cancel button is activated.\n- **close** - Fired after the dialog is closed.\n- **confirm** - Fired when confirmation button is activated.\n- **open** - Fired after the dialog is opened.\n- **reset** - Fired when the Reset button is clicked.\n\n**Note:** This event is particularly relevant when the dialog contains custom tabs.\nBy default, the Reset button resets all built-in settings (sort, filter, group) to their\ninitial values. However, the component has no knowledge of the content or state inside\ncustom tabs — it cannot detect what has changed or what the \"default\" values are.\nTherefore, when this event is fired, it is the application developer's responsibility\nto listen for it and manually reset the custom tab content to its initial state.\n\n### **Methods:**\n - **setConfirmedSettings(settings: _VSDSettings_): _void_** - Sets a JavaScript object, as settings to the `ui5-view-settings-dialog`.\nThis method can be used after the dialog is initially open, as the dialog needs\nto set its initial settings.\nThe `ui5-view-settings-dialog` throws an event called \"before-open\",\nwhich can be used as a trigger point.\nThe object should have the following format:\n\n### **Slots:**\n - **customTabs** - Defines custom tabs for the dialog.\n\nThe custom tabs are rendered after the built-in tabs (`Sort`, `Filter`, `Group`).\n\n**Note:** If you want to use this slot, you need to import the item: `import \"@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js\";`\n- **filterItems** - Defines the `filterItems` list.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/FilterItem.js\";`\n- **groupItems** - Defines the list of items against which the user could group data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/GroupItem.js\";`\n- **sortItems** - Defines the list of items against which the user could sort data.\n\n**Note:** If you want to use this slot, you need to import used item: `import \"@ui5/webcomponents-fiori/dist/SortItem.js\";`\n\n### **CSS Parts:**\n - **header** - Used to style the header.",
           "doc-url": "",
           "attributes": [
-            {
-              "name": "enable-reset",
-              "description": "Defines whether the Reset button is always enabled.\n\n**Note:** By default, the Reset button is only enabled when the dialog settings\ndiffer from their initial state. Set this property to `true` to keep the Reset\nbutton always enabled, which is useful when working with custom tabs\nwhose internal state changes cannot be detected by the component.",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "group-descending",
               "description": "Defines the initial group order.",
@@ -4145,6 +3976,11 @@
               "description": "Indicates if the dialog is open.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "reset-enabled",
+              "description": "Controls whether the Reset button is always enabled.\n\nBy default, the Reset button is enabled only when the built-in settings (Sort, Filter, Group)\ndiffer from their initial state — the component can detect these changes automatically.\nHowever, when the dialog contains custom tabs, the component has no way to detect\nwhether the custom tab content has been modified by the user.\n\nSet this property to `true` when the user has made changes inside a custom tab, so that\nthe Reset button becomes enabled and the user can trigger a reset.\nSet it back to `false` once the custom tab content is back to its initial state\n(e.g. after the user confirms or after a reset is applied).",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "sort-descending",
               "description": "Defines the initial sort order.",
@@ -4191,17 +4027,12 @@
               "description": "Fired after the dialog is opened."
             },
             {
-              "name": "reset-click",
-              "description": "Fired when the Reset button is clicked.\n\n**Note:** Use this event to reset the state of custom tab content,\nas the component cannot detect changes within custom tabs."
+              "name": "reset",
+              "description": "Fired when the Reset button is clicked.\n\n**Note:** This event is particularly relevant when the dialog contains custom tabs.\nBy default, the Reset button resets all built-in settings (sort, filter, group) to their\ninitial values. However, the component has no knowledge of the content or state inside\ncustom tabs — it cannot detect what has changed or what the \"default\" values are.\nTherefore, when this event is fired, it is the application developer's responsibility\nto listen for it and manually reset the custom tab content to its initial state."
             }
           ],
           "js": {
             "properties": [
-              {
-                "name": "enable-reset",
-                "description": "Defines whether the Reset button is always enabled.\n\n**Note:** By default, the Reset button is only enabled when the dialog settings\ndiffer from their initial state. Set this property to `true` to keep the Reset\nbutton always enabled, which is useful when working with custom tabs\nwhose internal state changes cannot be detected by the component.",
-                "value": { "type": "boolean" }
-              },
               {
                 "name": "group-descending",
                 "description": "Defines the initial group order.",
@@ -4212,6 +4043,11 @@
                 "description": "Indicates if the dialog is open.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "reset-enabled",
+                "description": "Controls whether the Reset button is always enabled.\n\nBy default, the Reset button is enabled only when the built-in settings (Sort, Filter, Group)\ndiffer from their initial state — the component can detect these changes automatically.\nHowever, when the dialog contains custom tabs, the component has no way to detect\nwhether the custom tab content has been modified by the user.\n\nSet this property to `true` when the user has made changes inside a custom tab, so that\nthe Reset button becomes enabled and the user can trigger a reset.\nSet it back to `false` once the custom tab content is back to its initial state\n(e.g. after the user confirms or after a reset is applied).",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "sort-descending",
                 "description": "Defines the initial sort order.",
@@ -4240,8 +4076,8 @@
                 "description": "Fired after the dialog is opened."
               },
               {
-                "name": "reset-click",
-                "description": "Fired when the Reset button is clicked.\n\n**Note:** Use this event to reset the state of custom tab content,\nas the component cannot detect changes within custom tabs."
+                "name": "reset",
+                "description": "Fired when the Reset button is clicked.\n\n**Note:** This event is particularly relevant when the dialog contains custom tabs.\nBy default, the Reset button resets all built-in settings (sort, filter, group) to their\ninitial values. However, the component has no knowledge of the content or state inside\ncustom tabs — it cannot detect what has changed or what the \"default\" values are.\nTherefore, when this event is fired, it is the application developer's responsibility\nto listen for it and manually reset the custom tab content to its initial state."
               }
             ]
           }
@@ -4253,12 +4089,12 @@
           "attributes": [
             {
               "name": "icon",
-              "description": "Defines the icon of the custom tab.\n\n**Note:** If not provided, the tab should not be rendered.",
-              "value": { "type": "string", "default": "\"\"" }
+              "description": "Defines the icon of the custom tab button in the segmented button.",
+              "value": { "type": "string", "default": "\"action-settings\"" }
             },
             {
-              "name": "title",
-              "description": "Defines the title of the custom tab.\n\n**Note:** It is displayed in the dialog header when this tab is selected.",
+              "name": "title-text",
+              "description": "Defines the title text of the custom tab.\n\n**Note:** It is displayed in the dialog header when this tab is selected.",
               "value": { "type": "string", "default": "\"\"" }
             },
             {
@@ -4282,12 +4118,12 @@
             "properties": [
               {
                 "name": "icon",
-                "description": "Defines the icon of the custom tab.\n\n**Note:** If not provided, the tab should not be rendered.",
+                "description": "Defines the icon of the custom tab button in the segmented button.",
                 "value": { "type": "string" }
               },
               {
-                "name": "title",
-                "description": "Defines the title of the custom tab.\n\n**Note:** It is displayed in the dialog header when this tab is selected.",
+                "name": "title-text",
+                "description": "Defines the title text of the custom tab.\n\n**Note:** It is displayed in the dialog header when this tab is selected.",
                 "value": { "type": "string" }
               },
               {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.22.0-rc.3",
+  "version": "2.22.0",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.22.0-rc.3",
-    "@ui5/webcomponents-base": "2.22.0-rc.3",
-    "@ui5/webcomponents-icons": "2.22.0-rc.3",
-    "@ui5/webcomponents-theming": "2.22.0-rc.3",
+    "@ui5/webcomponents": "2.22.0",
+    "@ui5/webcomponents-base": "2.22.0",
+    "@ui5/webcomponents-icons": "2.22.0",
+    "@ui5/webcomponents-theming": "2.22.0",
     "@zxing/library": "^0.21.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.22.0-rc.3",
+    "@ui5/webcomponents-tools": "2.22.0",
     "cypress": "15.9.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "yarn": "^1.22.22"
   },
-  "gitHead": "38fe9415447d8f3d68eb801e4c0fab65295dca7f"
+  "gitHead": "1b2500a573cf0e268d87aa10b22564058a6e4de8"
 }

package/src/NavigationMenuItemTemplate.tsx

@@ -1,17 +1,17 @@
 import type NavigationMenuItem from "./NavigationMenuItem.js";
 import MenuItemTemplate from "@ui5/webcomponents/dist/MenuItemTemplate.js";
+import type { MenuItemHooks } from "@ui5/webcomponents/dist/MenuItemTemplate.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import slimArrowRightIcon from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import arrowRightIcon from "@ui5/webcomponents-icons/dist/arrow-right.js";
-import type { ListItemHooks } from "@ui5/webcomponents/dist/ListItemTemplate.js";
 
-const predefinedHooks: Partial<ListItemHooks> = {
+const predefinedHooks: Partial<MenuItemHooks> = {
 	listItemContent,
 	iconBegin,
 	iconEnd,
 };
 
-export default function NavigationMenuItemTemplate(this: NavigationMenuItem, hooks?: Partial<ListItemHooks>) {
+export default function NavigationMenuItemTemplate(this: NavigationMenuItem, hooks?: Partial<MenuItemHooks>) {
 	const currentHooks = { ...predefinedHooks, ...hooks, };
 
 	return <>