@ui5/webcomponents-fiori 2.22.0 → 2.22.1-rc.0

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

@@ -64,7 +64,7 @@
       "attributes": [
         {
           "name": "accessibility-attributes",
-          "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.",
+          "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n- **mainContent**:\n  - **ariaLabel**: defines the aria-label of the main content area. Accepts any string.\n  - **role**: defines the role of the main content area. When not set, defaults to `\"main\"`. Set to `undefined` to remove the role attribute.\n\n- **sideContent**:\n  - **ariaLabel**: defines the aria-label of the side content area. Accepts any string.\n  - **role**: defines the role of the side content area. When not set, defaults to `\"complementary\"`. Set to `undefined` to remove the role attribute.",
           "values": [{ "name": "DynamicSideContentAccessibilityAttributes" }]
         },
         {
@@ -396,6 +396,26 @@
           "name": "growing",
           "description": "Defines whether the component will have growing capability by pressing a `More` button.\nWhen button is pressed `load-more` event will be fired.",
           "values": [{ "name": "Button" }, { "name": "None" }]
+        },
+        {
+          "name": "loading",
+          "description": "Defines if a busy indicator would be displayed over the item.",
+          "values": []
+        },
+        {
+          "name": "loading-delay",
+          "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
+          "values": []
+        },
+        {
+          "name": "read",
+          "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.",
+          "values": []
+        },
+        {
+          "name": "title-text",
+          "description": "Defines the `titleText` of the item.",
+          "values": []
         }
       ],
       "references": []
@@ -414,13 +434,28 @@
     },
     {
       "name": "ui5-li-notification",
-      "description": "### Overview\nThe `ui5-li-notification` is a type of list item, meant to display notifications.\n\nThe component has a rich set of various properties that allows the user to set `avatar`, `menu`, `titleText`, descriptive `content`\nand `footnotes` to fully describe a notification.\n\nThe user can:\n\n- display a `Close` button\n- can control whether the `titleText` and `description` should wrap or truncate\nand display a `ShowMore` button to switch between less and more information\n- add actions by using the `ui5-menu` component\n\n**Note:** Adding custom actions by using the `ui5-notification-action` component is deprecated as of version 2.0!\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Enter] - select an item (trigger \"item-click\" event)\n- [Delete] - close an item (trigger \"item-close\" event)\n\n#### Fast Navigation\nThis component provides a fast navigation using the following keyboard shortcuts:\n\n- [Shift] + [Enter] - 'More'/'Less' link will be triggered\n- [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListItem.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **close** - Fired when the `Close` button is pressed.\n\n### **Slots:**\n - **avatar** - Defines the avatar, displayed in the `ui5-li-notification`.\n\n**Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\n**Note:** In order to be complaint with the UX guidlines and for best experience,\nwe recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\nyou can set its `size` property to `XS` to get the required size - `<ui5-avatar size=\"XS\"></ui5-avatar>`.\n- **default** - Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **footnotes** - Defines the elements, displayed in the footer of the of the component.\n- **menu** - Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.\n\n### **CSS Parts:**\n - **title-text** - Used to style the titleText of the notification list item",
+      "description": "### Overview\nThe `ui5-li-notification` is a type of list item, meant to display notifications.\n\nThe component has a rich set of various properties that allows the user to set `avatar`, `menu`, `titleText`, descriptive `content`\nand `footnotes` to fully describe a notification.\n\nThe user can:\n\n- display a `Close` button\n- can control whether the `titleText` and `description` should wrap or truncate\nand display a `ShowMore` button to switch between less and more information\n- add actions by using the `ui5-menu` component\n\n**Note:** Adding custom actions by using the `ui5-notification-action` component is deprecated as of version 2.0!\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Enter] - select an item (trigger \"item-click\" event)\n- [Delete] - close an item (trigger \"item-close\" event)\n\n#### Fast Navigation\nThis component provides a fast navigation using the following keyboard shortcuts:\n\n- [Shift] + [Enter] - 'More'/'Less' link will be triggered\n- [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListItem.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n- **close** - Fired when the `Close` button is pressed.\n\n### **Slots:**\n - **avatar** - Defines the avatar, displayed in the `ui5-li-notification`.\n\n**Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\n**Note:** In order to be complaint with the UX guidlines and for best experience,\nwe recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\nyou can set its `size` property to `XS` to get the required size - `<ui5-avatar size=\"XS\"></ui5-avatar>`.\n- **default** - Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **footnotes** - Defines the elements, displayed in the footer of the of the component.\n- **menu** - Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.\n\n### **CSS Parts:**\n - **title-text** - Used to style the titleText of the notification list item",
       "attributes": [
         {
           "name": "importance",
           "description": "Defines the `Important` label of the item.",
           "values": [{ "name": "Standard" }, { "name": "Important" }]
         },
+        {
+          "name": "loading",
+          "description": "Defines if a busy indicator would be displayed over the item.",
+          "values": []
+        },
+        {
+          "name": "loading-delay",
+          "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
+          "values": []
+        },
+        {
+          "name": "read",
+          "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.",
+          "values": []
+        },
         {
           "name": "show-close",
           "description": "Defines if the `Close` button would be displayed.",
@@ -437,6 +472,11 @@
             { "name": "Information" }
           ]
         },
+        {
+          "name": "title-text",
+          "description": "Defines the `titleText` of the item.",
+          "values": []
+        },
         {
           "name": "wrapping-type",
           "description": "Defines if the `titleText` and `description` should wrap,\nthey truncate by default.\n\n**Note:** by default the `titleText` and `description`,\nand a `ShowMore/Less` button would be displayed.",
@@ -445,6 +485,33 @@
       ],
       "references": []
     },
+    {
+      "name": "notification-list-item-base",
+      "description": "The base class of the `NotificationListItem` and `NotificationListGroupItem`.\n\n\n---\n\n\n",
+      "attributes": [
+        {
+          "name": "loading",
+          "description": "Defines if a busy indicator would be displayed over the item.",
+          "values": []
+        },
+        {
+          "name": "loading-delay",
+          "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
+          "values": []
+        },
+        {
+          "name": "read",
+          "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.",
+          "values": []
+        },
+        {
+          "name": "title-text",
+          "description": "Defines the `titleText` of the item.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "ui5-page",
       "description": "### Overview\n\nThe `ui5-page` is a container component that holds one whole screen of an application.\nThe page has three distinct areas that can hold content - a header, content area and a footer.\n### Structure\n#### Header\nThe top most area of the page is occupied by the header. The standard header includes a navigation button and a title.\n#### Content\nThe content occupies the main part of the page. Only the content area is scrollable by default.\nThis can be prevented by setting `noScrolling` to `true`.\n#### Footer\nThe footer is optional and occupies the part above the bottom part of the content. Alternatively, the footer can be fixed at the bottom of the page by enabling the `fixedFooter` property.\n\n**Note:** `ui5-page` occipues the whole available space of its parent. In order to achieve the intended design you have to make sure\nthat there is enough space for the `ui5-page` to be rendered.\n**Note:** In order for the `ui5-page` to be displayed, the parent element should have fixed height.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/Page.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the content HTML Element.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n### **CSS Parts:**\n - **content** - Used to style the content section of the component",

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",
+  "version": "2.22.1-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -229,7 +229,7 @@
           "attributes": [
             {
               "name": "accessibility-attributes",
-              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.",
+              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n- **mainContent**:\n  - **ariaLabel**: defines the aria-label of the main content area. Accepts any string.\n  - **role**: defines the role of the main content area. When not set, defaults to `\"main\"`. Set to `undefined` to remove the role attribute.\n\n- **sideContent**:\n  - **ariaLabel**: defines the aria-label of the side content area. Accepts any string.\n  - **role**: defines the role of the side content area. When not set, defaults to `\"complementary\"`. Set to `undefined` to remove the role attribute.",
               "value": {
                 "type": "DynamicSideContentAccessibilityAttributes",
                 "default": "{}"
@@ -289,7 +289,7 @@
             "properties": [
               {
                 "name": "accessibility-attributes",
-                "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n - **mainContent**: `mainContent.ariaLabel` defines the aria-label of the main content area. Accepts any string.\n - **sideContent**: `sideContent.ariaLabel` defines the aria-label of the side content area. Accepts any string.",
+                "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following fields:\n\n- **mainContent**:\n  - **ariaLabel**: defines the aria-label of the main content area. Accepts any string.\n  - **role**: defines the role of the main content area. When not set, defaults to `\"main\"`. Set to `undefined` to remove the role attribute.\n\n- **sideContent**:\n  - **ariaLabel**: defines the aria-label of the side content area. Accepts any string.\n  - **role**: defines the role of the side content area. When not set, defaults to `\"complementary\"`. Set to `undefined` to remove the role attribute.",
                 "value": { "type": "DynamicSideContentAccessibilityAttributes" }
               },
               {
@@ -982,6 +982,26 @@
                 "type": "\"Button\" | \"None\"",
                 "default": "\"None\""
               }
+            },
+            {
+              "name": "loading",
+              "description": "Defines if a busy indicator would be displayed over the item.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "loading-delay",
+              "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
+              "value": { "type": "number", "default": "1000" }
+            },
+            {
+              "name": "read",
+              "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "title-text",
+              "description": "Defines the `titleText` of the item.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -1011,6 +1031,26 @@
                 "name": "growing",
                 "description": "Defines whether the component will have growing capability by pressing a `More` button.\nWhen button is pressed `load-more` event will be fired.",
                 "value": { "type": "\"Button\" | \"None\"" }
+              },
+              {
+                "name": "loading",
+                "description": "Defines if a busy indicator would be displayed over the item.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "loading-delay",
+                "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "read",
+                "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "title-text",
+                "description": "Defines the `titleText` of the item.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": [
@@ -1043,7 +1083,7 @@
         },
         {
           "name": "ui5-li-notification",
-          "description": "### Overview\nThe `ui5-li-notification` is a type of list item, meant to display notifications.\n\nThe component has a rich set of various properties that allows the user to set `avatar`, `menu`, `titleText`, descriptive `content`\nand `footnotes` to fully describe a notification.\n\nThe user can:\n\n- display a `Close` button\n- can control whether the `titleText` and `description` should wrap or truncate\nand display a `ShowMore` button to switch between less and more information\n- add actions by using the `ui5-menu` component\n\n**Note:** Adding custom actions by using the `ui5-notification-action` component is deprecated as of version 2.0!\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Enter] - select an item (trigger \"item-click\" event)\n- [Delete] - close an item (trigger \"item-close\" event)\n\n#### Fast Navigation\nThis component provides a fast navigation using the following keyboard shortcuts:\n\n- [Shift] + [Enter] - 'More'/'Less' link will be triggered\n- [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListItem.js\";`\n---\n\n\n### **Events:**\n - **close** - Fired when the `Close` button is pressed.\n\n### **Slots:**\n - **avatar** - Defines the avatar, displayed in the `ui5-li-notification`.\n\n**Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\n**Note:** In order to be complaint with the UX guidlines and for best experience,\nwe recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\nyou can set its `size` property to `XS` to get the required size - `<ui5-avatar size=\"XS\"></ui5-avatar>`.\n- **default** - Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **footnotes** - Defines the elements, displayed in the footer of the of the component.\n- **menu** - Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.\n\n### **CSS Parts:**\n - **title-text** - Used to style the titleText of the notification list item",
+          "description": "### Overview\nThe `ui5-li-notification` is a type of list item, meant to display notifications.\n\nThe component has a rich set of various properties that allows the user to set `avatar`, `menu`, `titleText`, descriptive `content`\nand `footnotes` to fully describe a notification.\n\nThe user can:\n\n- display a `Close` button\n- can control whether the `titleText` and `description` should wrap or truncate\nand display a `ShowMore` button to switch between less and more information\n- add actions by using the `ui5-menu` component\n\n**Note:** Adding custom actions by using the `ui5-notification-action` component is deprecated as of version 2.0!\n\n### Usage\nThe component should be used inside a `ui5-notification-list`.\n\n### Keyboard Handling\n\n#### Basic Navigation\nThe user can use the following keyboard shortcuts to perform actions (such as select, delete):\n\n- [Enter] - select an item (trigger \"item-click\" event)\n- [Delete] - close an item (trigger \"item-close\" event)\n\n#### Fast Navigation\nThis component provides a fast navigation using the following keyboard shortcuts:\n\n- [Shift] + [Enter] - 'More'/'Less' link will be triggered\n- [Shift] + [F10] - 'Menu' (Actions) button will be triggered (clicked)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/NotificationListItem.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n- **close** - Fired when the `Close` button is pressed.\n\n### **Slots:**\n - **avatar** - Defines the avatar, displayed in the `ui5-li-notification`.\n\n**Note:** Consider using the `ui5-avatar` to display icons, initials or images.\n\n**Note:** In order to be complaint with the UX guidlines and for best experience,\nwe recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the `ui5-avatar`\nyou can set its `size` property to `XS` to get the required size - `<ui5-avatar size=\"XS\"></ui5-avatar>`.\n- **default** - Defines the content of the `ui5-li-notification`,\nusually a description of the notification.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **footnotes** - Defines the elements, displayed in the footer of the of the component.\n- **menu** - Defines the menu, displayed in the `ui5-li-notification`.\n\n**Note:** Use this for implementing actions.\n\n**Note:** Should be used instead `u5-notification-action`, which is deprecated as of version 2.0.\n\n### **CSS Parts:**\n - **title-text** - Used to style the titleText of the notification list item",
           "doc-url": "",
           "attributes": [
             {
@@ -1054,6 +1094,21 @@
                 "default": "\"Standard\""
               }
             },
+            {
+              "name": "loading",
+              "description": "Defines if a busy indicator would be displayed over the item.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "loading-delay",
+              "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
+              "value": { "type": "number", "default": "1000" }
+            },
+            {
+              "name": "read",
+              "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "show-close",
               "description": "Defines if the `Close` button would be displayed.",
@@ -1067,6 +1122,11 @@
                 "default": "\"None\""
               }
             },
+            {
+              "name": "title-text",
+              "description": "Defines the `titleText` of the item.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "wrapping-type",
               "description": "Defines if the `titleText` and `description` should wrap,\nthey truncate by default.\n\n**Note:** by default the `titleText` and `description`,\nand a `ShowMore/Less` button would be displayed.",
@@ -1095,6 +1155,10 @@
             }
           ],
           "events": [
+            {
+              "name": "click",
+              "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key."
+            },
             {
               "name": "close",
               "description": "Fired when the `Close` button is pressed."
@@ -1107,6 +1171,21 @@
                 "description": "Defines the `Important` label of the item.",
                 "value": { "type": "\"Standard\" | \"Important\"" }
               },
+              {
+                "name": "loading",
+                "description": "Defines if a busy indicator would be displayed over the item.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "loading-delay",
+                "description": "Defines the delay in milliseconds, after which the busy indicator will show up for this component.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "read",
+                "description": "Defines if the `notification` is new or has been already read.\n\n**Note:** if set to `false` the `titleText` has bold font,\nif set to true - it has a normal font.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "show-close",
                 "description": "Defines if the `Close` button would be displayed.",
@@ -1119,6 +1198,11 @@
                   "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\""
                 }
               },
+              {
+                "name": "title-text",
+                "description": "Defines the `titleText` of the item.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "wrapping-type",
                 "description": "Defines if the `titleText` and `description` should wrap,\nthey truncate by default.\n\n**Note:** by default the `titleText` and `description`,\nand a `ShowMore/Less` button would be displayed.",
@@ -1126,6 +1210,10 @@
               }
             ],
             "events": [
+              {
+                "name": "click",
+                "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key."
+              },
               {
                 "name": "close",
                 "description": "Fired when the `Close` button is pressed."

package/package-scripts.cjs

@@ -18,6 +18,7 @@ const options = {
 	dev: true,
 	fioriPackage: true,
 	noWatchTS: true,
+	standalone: false,
 	internal: {
 		cypress_code_coverage: false,
 	},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.22.0",
+  "version": "2.22.1-rc.0",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.22.0",
-    "@ui5/webcomponents-base": "2.22.0",
-    "@ui5/webcomponents-icons": "2.22.0",
-    "@ui5/webcomponents-theming": "2.22.0",
+    "@ui5/webcomponents": "2.22.1-rc.0",
+    "@ui5/webcomponents-base": "2.22.1-rc.0",
+    "@ui5/webcomponents-icons": "2.22.1-rc.0",
+    "@ui5/webcomponents-theming": "2.22.1-rc.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",
+    "@ui5/webcomponents-tools": "2.22.1-rc.0",
     "cypress": "15.9.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "yarn": "^1.22.22"
   },
-  "gitHead": "1b2500a573cf0e268d87aa10b22564058a6e4de8"
+  "gitHead": "9e6891583a3a6f14d19812a700c86495a46ee276"
 }

package/src/DynamicSideContentTemplate.tsx

@@ -24,7 +24,7 @@ export default function DynamicSideContentTemplate(this: DynamicSideContent) {
 function mainContent(this: DynamicSideContent) {
 	return (
 		<div
-			role="main"
+			role={this.accInfo.mainContent?.role}
 			aria-label={this.accInfo.mainContent?.ariaLabel}
 			class={this.classes.main}
 			style={this.styles.main}
@@ -37,7 +37,7 @@ function mainContent(this: DynamicSideContent) {
 function sideContent(this: DynamicSideContent) {
 	return (
 		<aside
-			role="complementary"
+			role={this.accInfo.sideContent?.role}
 			aria-label={this.accInfo.sideContent?.ariaLabel}
 			class={this.classes.side}
 			style={this.styles.side}

package/src/i18n/messagebundle_ar.properties

@@ -118,7 +118,7 @@ SHELLBAR_NOTIFICATIONS={0} إشعارات
 
 SHELLBAR_NOTIFICATIONS_NO_COUNT=الإشعارات
 
-SHELLBAR_PROFILE=ملف التعريف
+SHELLBAR_PROFILE=قائمة المستخدم
 
 SHELLBAR_PRODUCTS=المنتجات
 
@@ -384,9 +384,9 @@ USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT=إدارة الحساب
 
 USER_MENU_SIGN_OUT_BUTTON_TXT=تسجيل الخروج
 
-USER_MENU_EDIT_AVATAR_TXT=تحرير الصورة الرمزية
+USER_MENU_EDIT_AVATAR_TXT=تحرير صورة ملف التعريف 
 
-USER_MENU_EDIT_ACCOUNTS_TXT=تحرير الحسابات
+USER_MENU_EDIT_ACCOUNTS_TXT=تحرير الحساب
 
 USER_MENU_POPOVER_ACCESSIBLE_NAME=قائمة المستخدم لـ
 
@@ -398,7 +398,7 @@ USER_MENU_CURRENT_INFORMATION_TXT=معلومات المستخدم الحالي
 
 USER_MENU_ACTIONS_TXT=الإجراءات
 
-USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=مربع حوار إعدادات المستخدم
+USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=إعدادات المستخدم
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=بند إعدادات المستخدم
 

package/src/i18n/messagebundle_bg.properties

@@ -118,7 +118,7 @@ SHELLBAR_NOTIFICATIONS={0} Известия
 
 SHELLBAR_NOTIFICATIONS_NO_COUNT=Известия
 
-SHELLBAR_PROFILE=Профил
+SHELLBAR_PROFILE=Потребителско меню
 
 SHELLBAR_PRODUCTS=Продукти
 
@@ -384,9 +384,9 @@ USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT=Управление на акаунт
 
 USER_MENU_SIGN_OUT_BUTTON_TXT=Изход
 
-USER_MENU_EDIT_AVATAR_TXT=Редактиране на аватар
+USER_MENU_EDIT_AVATAR_TXT=Редактиране на профилното изображение
 
-USER_MENU_EDIT_ACCOUNTS_TXT=Редактиране на акаунти
+USER_MENU_EDIT_ACCOUNTS_TXT=Редактиране на акаунта
 
 USER_MENU_POPOVER_ACCESSIBLE_NAME=Потребителско меню за
 
@@ -398,9 +398,9 @@ USER_MENU_CURRENT_INFORMATION_TXT=Информация за текущия по
 
 USER_MENU_ACTIONS_TXT=Действия
 
-USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Диалог за настройки на потребител
+USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Потребителски настройки
 
-USER_SETTINGS_LIST_ARIA_ROLE_DESC=Позиция от настройки на потребител
+USER_SETTINGS_LIST_ARIA_ROLE_DESC=Позиция от потребителските настройки
 
 USER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT=Затваряне
 

package/src/i18n/messagebundle_ca.properties

@@ -118,7 +118,7 @@ SHELLBAR_NOTIFICATIONS=Notificacions {0}
 
 SHELLBAR_NOTIFICATIONS_NO_COUNT=Notificacions
 
-SHELLBAR_PROFILE=Perfil
+SHELLBAR_PROFILE=Menú d''usuari
 
 SHELLBAR_PRODUCTS=Productes
 
@@ -166,7 +166,7 @@ WIZARD_NAV_STEP_DEFAULT_HEADING=Pas
 
 VSD_DIALOG_TITLE_SORT=Configuració de vista
 
-VSD_SUBMIT_BUTTON=Acceptar
+VSD_SUBMIT_BUTTON=D''acord
 
 VSD_CANCEL_BUTTON=Cancel·lar
 
@@ -384,9 +384,9 @@ USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT=Gestionar compte
 
 USER_MENU_SIGN_OUT_BUTTON_TXT=Tancar la sessió
 
-USER_MENU_EDIT_AVATAR_TXT=Editar avatar
+USER_MENU_EDIT_AVATAR_TXT=Editar imatge de perfil
 
-USER_MENU_EDIT_ACCOUNTS_TXT=Editar comptes
+USER_MENU_EDIT_ACCOUNTS_TXT=Editar compte
 
 USER_MENU_POPOVER_ACCESSIBLE_NAME=Menú d''usuari per a
 
@@ -398,7 +398,7 @@ USER_MENU_CURRENT_INFORMATION_TXT=Informació d''usuari actual
 
 USER_MENU_ACTIONS_TXT=Accions
 
-USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Diàleg de configuració d''usuari
+USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Opcions d’usuari
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=Element de configuració d''usuari
 

package/src/i18n/messagebundle_cnr.properties

@@ -118,7 +118,7 @@ SHELLBAR_NOTIFICATIONS={0} obavještenja
 
 SHELLBAR_NOTIFICATIONS_NO_COUNT=Obavještenja
 
-SHELLBAR_PROFILE=Profil
+SHELLBAR_PROFILE=Korisnički meni
 
 SHELLBAR_PRODUCTS=Proizvodi
 
@@ -384,9 +384,9 @@ USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT=Upravljaj nalogom
 
 USER_MENU_SIGN_OUT_BUTTON_TXT=Odjavi se
 
-USER_MENU_EDIT_AVATAR_TXT=Uredi avatar
+USER_MENU_EDIT_AVATAR_TXT=Uredi sliku profila
 
-USER_MENU_EDIT_ACCOUNTS_TXT=Uredi naloge
+USER_MENU_EDIT_ACCOUNTS_TXT=Uredi nalog
 
 USER_MENU_POPOVER_ACCESSIBLE_NAME=Korisnički meni za
 
@@ -398,7 +398,7 @@ USER_MENU_CURRENT_INFORMATION_TXT=Trenutne informacije o korisniku
 
 USER_MENU_ACTIONS_TXT=Radnje
 
-USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Dijalog korisničkih podešavanja
+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

@@ -118,7 +118,7 @@ SHELLBAR_NOTIFICATIONS={0} oznámení
 
 SHELLBAR_NOTIFICATIONS_NO_COUNT=Oznámení
 
-SHELLBAR_PROFILE=Profil
+SHELLBAR_PROFILE=Uživatelské menu
 
 SHELLBAR_PRODUCTS=Produkty
 
@@ -384,9 +384,9 @@ USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT=Správa účtu
 
 USER_MENU_SIGN_OUT_BUTTON_TXT=Odhlásit
 
-USER_MENU_EDIT_AVATAR_TXT=Upravit avatar
+USER_MENU_EDIT_AVATAR_TXT=Upravit obrázek profilu
 
-USER_MENU_EDIT_ACCOUNTS_TXT=Upravit účty
+USER_MENU_EDIT_ACCOUNTS_TXT=Upravit účet
 
 USER_MENU_POPOVER_ACCESSIBLE_NAME=Uživatelské menu pro
 
@@ -398,7 +398,7 @@ USER_MENU_CURRENT_INFORMATION_TXT=Informace o aktuálním uživateli
 
 USER_MENU_ACTIONS_TXT=Akce
 
-USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Dialog uživatelských nastavení
+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

@@ -118,7 +118,7 @@ SHELLBAR_NOTIFICATIONS={0} Hysbysiadau
 
 SHELLBAR_NOTIFICATIONS_NO_COUNT=Hysbysiadau
 
-SHELLBAR_PROFILE=Proffil
+SHELLBAR_PROFILE=Dewislen Defnyddiwr
 
 SHELLBAR_PRODUCTS=Cynnyrch
 
@@ -384,9 +384,9 @@ USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT=Rheoli Cyfrif
 
 USER_MENU_SIGN_OUT_BUTTON_TXT=Allgofnodi
 
-USER_MENU_EDIT_AVATAR_TXT=Golygu Afatar
+USER_MENU_EDIT_AVATAR_TXT=Golygu Delwedd Proffil
 
-USER_MENU_EDIT_ACCOUNTS_TXT=Golygu cyfrifon
+USER_MENU_EDIT_ACCOUNTS_TXT=Golygu cyfrif
 
 USER_MENU_POPOVER_ACCESSIBLE_NAME=Dewislen defnyddiwr ar gyfer
 
@@ -398,7 +398,7 @@ USER_MENU_CURRENT_INFORMATION_TXT=Gwybodaeth y defnyddiwr cyfredol
 
 USER_MENU_ACTIONS_TXT=Gweithredoedd
 
-USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Deialog Gosodiadau Defnyddiwr
+USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Gosodiadau''r Defnyddiwr
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=Eitem Gosodiadau Defnyddiwr
 

package/src/i18n/messagebundle_da.properties

@@ -118,7 +118,7 @@ SHELLBAR_NOTIFICATIONS={0} meddelelser
 
 SHELLBAR_NOTIFICATIONS_NO_COUNT=Meddelelser
 
-SHELLBAR_PROFILE=Profil
+SHELLBAR_PROFILE=Brugermenu
 
 SHELLBAR_PRODUCTS=Produkter
 
@@ -224,7 +224,7 @@ IM_TITLE_NOMAIL=Ingen e-mail
 
 IM_SUBTITLE_NOMAIL=Kontroller igen senere.
 
-IM_TITLE_NOENTRIES=Der er endnu ingen entries
+IM_TITLE_NOENTRIES=Der er endnu ingen poster
 
 IM_SUBTITLE_NOENTRIES=Når der er, ses de her.
 
@@ -384,9 +384,9 @@ USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT=Administrer konto
 
 USER_MENU_SIGN_OUT_BUTTON_TXT=Log af
 
-USER_MENU_EDIT_AVATAR_TXT=Rediger avatar
+USER_MENU_EDIT_AVATAR_TXT=Rediger profilbillede
 
-USER_MENU_EDIT_ACCOUNTS_TXT=Rediger konti
+USER_MENU_EDIT_ACCOUNTS_TXT=Rediger konto
 
 USER_MENU_POPOVER_ACCESSIBLE_NAME=Brugermenu for
 
@@ -398,7 +398,7 @@ USER_MENU_CURRENT_INFORMATION_TXT=Oplysninger om aktuel bruger
 
 USER_MENU_ACTIONS_TXT=Handlinger
 
-USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Dialog for brugerindstillinger
+USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Brugerindstillinger
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=Brugerindstillingselement
 

package/src/i18n/messagebundle_de.properties

@@ -118,7 +118,7 @@ SHELLBAR_NOTIFICATIONS={0} Benachrichtigungen
 
 SHELLBAR_NOTIFICATIONS_NO_COUNT=Benachrichtigungen
 
-SHELLBAR_PROFILE=Profil
+SHELLBAR_PROFILE=Benutzermenü
 
 SHELLBAR_PRODUCTS=Produkte
 
@@ -384,9 +384,9 @@ USER_MENU_MANAGE_ACCOUNT_BUTTON_TXT=Konto verwalten
 
 USER_MENU_SIGN_OUT_BUTTON_TXT=Abmelden
 
-USER_MENU_EDIT_AVATAR_TXT=Avatar bearbeiten
+USER_MENU_EDIT_AVATAR_TXT=Profilbild bearbeiten
 
-USER_MENU_EDIT_ACCOUNTS_TXT=Konten bearbeiten
+USER_MENU_EDIT_ACCOUNTS_TXT=Konto bearbeiten
 
 USER_MENU_POPOVER_ACCESSIBLE_NAME=Benutzermenü für
 
@@ -398,7 +398,7 @@ USER_MENU_CURRENT_INFORMATION_TXT=Aktuelle Benutzerinformationen
 
 USER_MENU_ACTIONS_TXT=Aktionen
 
-USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Benutzereinstellungsdialog
+USER_SETTINGS_DIALOG_ACCESSIBLE_NAME=Benutzereinstellungen
 
 USER_SETTINGS_LIST_ARIA_ROLE_DESC=Benutzereinstellungselement