@ui5/webcomponents 2.5.0-rc.2 → 2.5.0

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

@@ -105,7 +105,7 @@
     },
     {
       "name": "ui5-bar",
-      "description": "### Overview\nThe Bar is a container which is primarily used to hold titles, buttons and input elements\nand its design and functionality is the basis for page headers and footers.\nThe component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\nIt has the capability to center content, such as a title, while having other components on the left and right side.\n\n### Usage\nWith the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\n**Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n### Responsive Behavior\nThe default slot will be centered in the available space between the startContent and the endContent areas,\ntherefore it might not always be centered in the entire bar.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Bar.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **startContent** - Defines the content at the start of the bar.\n- **default** - Defines the content in the middle of the bar.\n- **endContent** - Defines the content at the end of the bar.\n\n### **CSS Parts:**\n - **bar** - Used to style the wrapper of the content of the component",
+      "description": "### Overview\nThe Bar is a container which is primarily used to hold titles, buttons and input elements\nand its design and functionality is the basis for page headers and footers.\nThe component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\nIt has the capability to center content, such as a title, while having other components on the left and right side.\n\n### Usage\nWith the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\n**Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n### Responsive Behavior\nThe default slot will be centered in the available space between the startContent and the endContent areas,\ntherefore it might not always be centered in the entire bar.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Bar.js\";`\n\n\n---\n\n\n\n\n### **Slots:**\n - **startContent** - Defines the content at the start of the bar.\n- **default** - Defines the content in the middle of the bar.\n- **endContent** - Defines the content at the end of the bar.\n\n### **CSS Parts:**\n - **bar** - Used to style the wrapper of the content of the component\n- **startContent** - Used to style the wrapper of the start content of the component\n- **midContent** - Used to style the wrapper of the middle content of the component\n- **endContent** - Used to style the wrapper of the end content of the component",
       "attributes": [
         {
           "name": "design",
@@ -254,6 +254,11 @@
           "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
           "values": [{ "name": "ButtonAccessibilityAttributes" }]
         },
+        {
+          "name": "accessible-description",
+          "description": "Defines the accessible description of the component.",
+          "values": []
+        },
         {
           "name": "type",
           "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -762,9 +767,9 @@
           "values": []
         },
         {
-          "name": "display-mode",
-          "description": "Defines the display mode of the component.",
-          "values": [{ "name": "Default" }, { "name": "Simplified" }]
+          "name": "simplified",
+          "description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.",
+          "values": []
         }
       ],
       "references": []
@@ -1523,7 +1528,7 @@
     },
     {
       "name": "ui5-icon",
-      "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`\n\n\n---\n\n\n\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-icon`.",
+      "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`\n\n\n---\n\n\n\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-icon`.",
       "attributes": [
         {
           "name": "design",
@@ -1747,6 +1752,11 @@
           "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.",
           "values": [{ "name": "LinkAccessibilityAttributes" }]
         },
+        {
+          "name": "accessible-description",
+          "description": "Defines the accessible description of the component.",
+          "values": []
+        },
         {
           "name": "icon",
           "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
@@ -3732,11 +3742,6 @@
           "name": "growing-sub-text",
           "description": "Defines the text that will be displayed below the `growingText` inside the growing button.\nHas no effect when type is set to Scroll.",
           "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "Disables the growing feature.",
-          "values": []
         }
       ],
       "references": []
@@ -3800,6 +3805,11 @@
           "description": "Unique identifier of the row.",
           "values": []
         },
+        {
+          "name": "position",
+          "description": "Defines the position of the row respect to the total number of rows within the table when the <code>ui5-table-virtualizer</code> feature is used.",
+          "values": []
+        },
         {
           "name": "interactive",
           "description": "Defines the interactive state of the row.",
@@ -3840,6 +3850,28 @@
       ],
       "references": []
     },
+    {
+      "name": "ui5-table-virtualizer",
+      "description": "### Overview\n\nThe `ui5-table-virtualizer` component is used inside the `ui5-table` to virtualize the table rows, if the `overflowMode` property of the table is set to 'Scroll'.\nIt is responsible for rendering only the rows that are visible in the viewport and updating them on scroll.\nThis allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible.\n\n**Note:** The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TableVirtualizer.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **range-change** - Fired when the virtualizer is changed by user interaction e.g. on scrolling.\n\n### **Methods:**\n - **reset(): _void_** - Resets the virtualizer to its initial state and triggers the `range-change` event.",
+      "attributes": [
+        {
+          "name": "row-height",
+          "description": "Defines the height of the rows in the table.\n\n**Note:** This property is mandatory for the virtualization to work properly.",
+          "values": []
+        },
+        {
+          "name": "row-count",
+          "description": "Defines the total count of rows in the table.\n\n**Note:** This property is mandatory for the virtualization to work properly.",
+          "values": []
+        },
+        {
+          "name": "extra-rows",
+          "description": "Defines the count of extra rows to be rendered at the top and bottom of the table.\n\n**Note:** This property is experimental and may be changed or deleted in the future.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "ui5-tag",
       "description": "### Overview\n\nThe `ui5-tag` is a component which serves\nthe purpose to attract the user attention to some piece\nof information (state, quantity, condition, etc.).\nIt can contain icon and text information, and its design can be chosen from specific design types.\n\n### Usage Guidelines\n\n- If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n- Colors can be semantic or not semantic.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Tag.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **icon** - Defines the icon to be displayed in the component.",
@@ -4187,6 +4219,11 @@
           "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
           "values": [{ "name": "ButtonAccessibilityAttributes" }]
         },
+        {
+          "name": "accessible-description",
+          "description": "Defines the accessible description of the component.",
+          "values": []
+        },
         {
           "name": "type",
           "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",

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",
-  "version": "2.5.0-rc.2",
+  "version": "2.5.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -232,7 +232,7 @@
         },
         {
           "name": "ui5-bar",
-          "description": "### Overview\nThe Bar is a container which is primarily used to hold titles, buttons and input elements\nand its design and functionality is the basis for page headers and footers.\nThe component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\nIt has the capability to center content, such as a title, while having other components on the left and right side.\n\n### Usage\nWith the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\n**Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n### Responsive Behavior\nThe default slot will be centered in the available space between the startContent and the endContent areas,\ntherefore it might not always be centered in the entire bar.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Bar.js\";`\n---\n\n\n### **Slots:**\n - **startContent** - Defines the content at the start of the bar.\n- **default** - Defines the content in the middle of the bar.\n- **endContent** - Defines the content at the end of the bar.\n\n### **CSS Parts:**\n - **bar** - Used to style the wrapper of the content of the component",
+          "description": "### Overview\nThe Bar is a container which is primarily used to hold titles, buttons and input elements\nand its design and functionality is the basis for page headers and footers.\nThe component consists of three areas to hold its content - startContent slot, default slot and endContent slot.\nIt has the capability to center content, such as a title, while having other components on the left and right side.\n\n### Usage\nWith the use of the design property, you can set the style of the Bar to appear designed like a Header, Subheader, Footer and FloatingFooter.\n\n**Note:** Do not place a Bar inside another Bar or inside any bar-like component. Doing so may cause unpredictable behavior.\n\n### Responsive Behavior\nThe default slot will be centered in the available space between the startContent and the endContent areas,\ntherefore it might not always be centered in the entire bar.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Bar.js\";`\n---\n\n\n### **Slots:**\n - **startContent** - Defines the content at the start of the bar.\n- **default** - Defines the content in the middle of the bar.\n- **endContent** - Defines the content at the end of the bar.\n\n### **CSS Parts:**\n - **bar** - Used to style the wrapper of the content of the component\n- **startContent** - Used to style the wrapper of the start content of the component\n- **midContent** - Used to style the wrapper of the middle content of the component\n- **endContent** - Used to style the wrapper of the end content of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -506,6 +506,11 @@
                 "default": "{}"
               }
             },
+            {
+              "name": "accessible-description",
+              "description": "Defines the accessible description of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "type",
               "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -584,6 +589,11 @@
                 "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
                 "value": { "type": "ButtonAccessibilityAttributes" }
               },
+              {
+                "name": "accessible-description",
+                "description": "Defines the accessible description of the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "type",
                 "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -1525,12 +1535,9 @@
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "display-mode",
-              "description": "Defines the display mode of the component.",
-              "value": {
-                "type": "\"Default\" | \"Simplified\"",
-                "default": "\"Default\""
-              }
+              "name": "simplified",
+              "description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.",
+              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [
@@ -1552,9 +1559,9 @@
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "display-mode",
-                "description": "Defines the display mode of the component.",
-                "value": { "type": "\"Default\" | \"Simplified\"" }
+                "name": "simplified",
+                "description": "When set to `true`, the alpha slider and inputs for RGB values will not be displayed.",
+                "value": { "type": "boolean" }
               }
             ],
             "events": [
@@ -3140,7 +3147,7 @@
         },
         {
           "name": "ui5-icon",
-          "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`\n---\n\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-icon`.",
+          "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n- [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`\n---\n\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-icon`.",
           "doc-url": "",
           "attributes": [
             {
@@ -3577,6 +3584,11 @@
                 "default": "{}"
               }
             },
+            {
+              "name": "accessible-description",
+              "description": "Defines the accessible description of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "icon",
               "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
@@ -3652,6 +3664,11 @@
                 "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`.\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.",
                 "value": { "type": "LinkAccessibilityAttributes" }
               },
+              {
+                "name": "accessible-description",
+                "description": "Defines the accessible description of the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "icon",
                 "description": "Defines the icon, displayed as graphical element within the component before the link's text.\nThe SAP-icons font provides numerous options.\n\n**Note:** Usage of icon-only link is not supported, the link must always have a text.\n\n**Note:** We recommend using аn icon in the beginning or the end only, and with text.\n\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
@@ -7782,11 +7799,6 @@
               "name": "growing-sub-text",
               "description": "Defines the text that will be displayed below the `growingText` inside the growing button.\nHas no effect when type is set to Scroll.",
               "value": { "type": "string | undefined", "default": "undefined" }
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the growing feature.",
-              "value": { "type": "boolean", "default": "false" }
             }
           ],
           "events": [
@@ -7811,11 +7823,6 @@
                 "name": "growing-sub-text",
                 "description": "Defines the text that will be displayed below the `growingText` inside the growing button.\nHas no effect when type is set to Scroll.",
                 "value": { "type": "string | undefined" }
-              },
-              {
-                "name": "disabled",
-                "description": "Disables the growing feature.",
-                "value": { "type": "boolean" }
               }
             ],
             "events": [
@@ -7933,6 +7940,11 @@
               "description": "Unique identifier of the row.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "position",
+              "description": "Defines the position of the row respect to the total number of rows within the table when the <code>ui5-table-virtualizer</code> feature is used.",
+              "value": { "type": "number", "default": "-1" }
+            },
             {
               "name": "interactive",
               "description": "Defines the interactive state of the row.",
@@ -7958,6 +7970,11 @@
                 "description": "Unique identifier of the row.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "position",
+                "description": "Defines the position of the row respect to the total number of rows within the table when the <code>ui5-table-virtualizer</code> feature is used.",
+                "value": { "type": "number" }
+              },
               {
                 "name": "interactive",
                 "description": "Defines the interactive state of the row.",
@@ -8018,6 +8035,59 @@
             ]
           }
         },
+        {
+          "name": "ui5-table-virtualizer",
+          "description": "### Overview\n\nThe `ui5-table-virtualizer` component is used inside the `ui5-table` to virtualize the table rows, if the `overflowMode` property of the table is set to 'Scroll'.\nIt is responsible for rendering only the rows that are visible in the viewport and updating them on scroll.\nThis allows large numbers of rows to exist, but maintain high performance by only paying the cost for those that are currently visible.\n\n**Note:** The maximum number of virtualized rows is limited by browser constraints, specifically the maximum supported height for a DOM element.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/TableVirtualizer.js\";`\n---\n\n\n### **Events:**\n - **range-change** - Fired when the virtualizer is changed by user interaction e.g. on scrolling.\n\n### **Methods:**\n - **reset(): _void_** - Resets the virtualizer to its initial state and triggers the `range-change` event.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "row-height",
+              "description": "Defines the height of the rows in the table.\n\n**Note:** This property is mandatory for the virtualization to work properly.",
+              "value": { "type": "number", "default": "45" }
+            },
+            {
+              "name": "row-count",
+              "description": "Defines the total count of rows in the table.\n\n**Note:** This property is mandatory for the virtualization to work properly.",
+              "value": { "type": "number", "default": "100" }
+            },
+            {
+              "name": "extra-rows",
+              "description": "Defines the count of extra rows to be rendered at the top and bottom of the table.\n\n**Note:** This property is experimental and may be changed or deleted in the future.",
+              "value": { "type": "number", "default": "0" }
+            }
+          ],
+          "events": [
+            {
+              "name": "range-change",
+              "description": "Fired when the virtualizer is changed by user interaction e.g. on scrolling."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "row-height",
+                "description": "Defines the height of the rows in the table.\n\n**Note:** This property is mandatory for the virtualization to work properly.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "row-count",
+                "description": "Defines the total count of rows in the table.\n\n**Note:** This property is mandatory for the virtualization to work properly.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "extra-rows",
+                "description": "Defines the count of extra rows to be rendered at the top and bottom of the table.\n\n**Note:** This property is experimental and may be changed or deleted in the future.",
+                "value": { "type": "number" }
+              }
+            ],
+            "events": [
+              {
+                "name": "range-change",
+                "description": "Fired when the virtualizer is changed by user interaction e.g. on scrolling."
+              }
+            ]
+          }
+        },
         {
           "name": "ui5-tag",
           "description": "### Overview\n\nThe `ui5-tag` is a component which serves\nthe purpose to attract the user attention to some piece\nof information (state, quantity, condition, etc.).\nIt can contain icon and text information, and its design can be chosen from specific design types.\n\n### Usage Guidelines\n\n- If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n- Colors can be semantic or not semantic.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Tag.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n- **icon** - Defines the icon to be displayed in the component.",
@@ -8721,6 +8791,11 @@
                 "default": "{}"
               }
             },
+            {
+              "name": "accessible-description",
+              "description": "Defines the accessible description of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "type",
               "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -8798,6 +8873,11 @@
                 "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
                 "value": { "type": "ButtonAccessibilityAttributes" }
               },
+              {
+                "name": "accessible-description",
+                "description": "Defines the accessible description of the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "type",
                 "description": "Defines whether the button has special form-related functionality.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -9950,6 +10030,18 @@
           "name": "part(bar)",
           "description": "Used to style the wrapper of the content of the component"
         },
+        {
+          "name": "part(startContent)",
+          "description": "Used to style the wrapper of the start content of the component"
+        },
+        {
+          "name": "part(midContent)",
+          "description": "Used to style the wrapper of the middle content of the component"
+        },
+        {
+          "name": "part(endContent)",
+          "description": "Used to style the wrapper of the end content of the component"
+        },
         {
           "name": "part(button)",
           "description": "Used to style the native button element"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.5.0-rc.2",
+  "version": "2.5.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -50,17 +50,17 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.5.0-rc.2",
-    "@ui5/webcomponents-icons": "2.5.0-rc.2",
-    "@ui5/webcomponents-icons-business-suite": "2.5.0-rc.2",
-    "@ui5/webcomponents-icons-tnt": "2.5.0-rc.2",
-    "@ui5/webcomponents-localization": "2.5.0-rc.2",
-    "@ui5/webcomponents-theming": "2.5.0-rc.2"
+    "@ui5/webcomponents-base": "2.5.0",
+    "@ui5/webcomponents-icons": "2.5.0",
+    "@ui5/webcomponents-icons-business-suite": "2.5.0",
+    "@ui5/webcomponents-icons-tnt": "2.5.0",
+    "@ui5/webcomponents-localization": "2.5.0",
+    "@ui5/webcomponents-theming": "2.5.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.5.0-rc.2",
+    "@ui5/webcomponents-tools": "2.5.0",
     "chromedriver": "^131.0.0",
     "lit": "^2.0.0"
   },
-  "gitHead": "9208967c396111dd2ee4bf45f3a5fea021fa5704"
+  "gitHead": "fcedbbfe572884f193b3f8900b16931b51a5c48d"
 }

package/src/Bar.hbs

@@ -4,13 +4,13 @@
 	role="toolbar"
 	part="bar"
 >
-	<div class="ui5-bar-content-container ui5-bar-startcontent-container">
+	<div class="ui5-bar-content-container ui5-bar-startcontent-container" part="startContent">
 		<slot name="startContent"></slot>
 	</div>
-	<div class="ui5-bar-content-container ui5-bar-midcontent-container">
+	<div class="ui5-bar-content-container ui5-bar-midcontent-container" part="midContent">
 		<slot></slot>
 	</div>
-	<div class="ui5-bar-content-container ui5-bar-endcontent-container">
+	<div class="ui5-bar-content-container ui5-bar-endcontent-container" part="endContent">
 		<slot name="endContent"></slot>
 	</div>
 </div>

package/src/Button.hbs

@@ -17,6 +17,7 @@
 	aria-haspopup="{{_hasPopup}}"
 	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedbyText}}"
+	aria-description="{{ariaDescriptionText}}"
 	title="{{buttonTitle}}"
 	part="button"
 	role="{{effectiveAccRole}}"

package/src/Link.hbs

@@ -12,6 +12,7 @@
 	aria-haspopup="{{_hasPopup}}"
 	aria-expanded="{{accessibilityAttributes.expanded}}"
 	aria-current="{{accessibilityAttributes.current}}"
+	aria-description="{{ariaDescriptionText}}"
 	@click={{_onclick}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}>

package/src/RatingIndicator.hbs

@@ -27,7 +27,7 @@
 				</li>
 			{{else if this.halfStar}}
 				<li class="ui5-rating-indicator-item ui5-rating-indicator-item-half">
-					<ui5-icon data-ui5-value="{{this.index}}" name="unfavorite"></ui5-icon>
+					<ui5-icon data-ui5-value="{{this.index}}" name="{{../halfStarIconName}}"></ui5-icon>
 					<div class="ui5-rating-indicator-half-icon-wrapper">
 						<ui5-icon data-ui5-value="{{this.index}}" name="favorite" class="ui5-rating-indicator-half-icon"></ui5-icon>
 					</div>

package/src/ResponsivePopover.hbs

@@ -8,8 +8,8 @@
 		?prevent-initial-focus="{{preventInitialFocus}}"
 		initial-focus="{{initialFocus}}"
 		@ui5-before-open="{{_beforeDialogOpen}}"
-		@ui5-open="{{_propagateDialogEvent}}"
-		@ui5-before-close="{{_propagateDialogEvent}}"
+		@ui5-open="{{_afterDialogOpen}}"
+		@ui5-before-close="{{_beforeDialogClose}}"
 		@ui5-close="{{_afterDialogClose}}"
 		exportparts="content, header, footer"
 		.open={{open}}

package/src/Table.hbs

@@ -3,10 +3,15 @@
 <div id="table" role="grid"
     style="{{styles.table}}"
     aria-label="{{_ariaLabel}}"
+    aria-rowcount="{{_ariaRowCount}}"
     aria-multiselectable="{{_ariaMultiSelectable}}"
 >
     <slot name="headerRow"></slot>
-    <slot></slot>
+    <div id="rows">
+        <div id="spacer" style="{{styles.spacer}}">
+            <slot></slot>
+        </div>
+    </div>
     {{#unless rows.length}}
         <ui5-table-row id="nodata-row">
             <ui5-table-cell id="nodata-cell" excluded-from-navigation>

package/src/i18n/messagebundle_ar.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=كل البنود
 
 TOKENIZER_SHOW_ALL_ITEMS={0} من البنود
 
+TOKENIZER_CLEAR_ALL=مسح الكل
+
 TREE_ITEM_ARIA_LABEL=عنصر الشجرة
 
 TREE_ITEM_EXPAND_NODE=توسيع العقدة

package/src/i18n/messagebundle_bg.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=Всички позиции
 
 TOKENIZER_SHOW_ALL_ITEMS={0} позиции
 
+TOKENIZER_CLEAR_ALL=Изчистване на всичко
+
 TREE_ITEM_ARIA_LABEL=Позиция от дърво
 
 TREE_ITEM_EXPAND_NODE=Разширяване на възел

package/src/i18n/messagebundle_ca.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=Tots els articles
 
 TOKENIZER_SHOW_ALL_ITEMS={0} elements
 
+TOKENIZER_CLEAR_ALL=Esborrar-ho tot
+
 TREE_ITEM_ARIA_LABEL=Element d''arbre
 
 TREE_ITEM_EXPAND_NODE=Desplegar nodes

package/src/i18n/messagebundle_cnr.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=Sve stavke
 
 TOKENIZER_SHOW_ALL_ITEMS={0} stavke(i)
 
+TOKENIZER_CLEAR_ALL=Izbriši sve
+
 TREE_ITEM_ARIA_LABEL=Stavka stabla
 
 TREE_ITEM_EXPAND_NODE=Proširi čvor

package/src/i18n/messagebundle_cs.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=Všechny položky
 
 TOKENIZER_SHOW_ALL_ITEMS={0} položky
 
+TOKENIZER_CLEAR_ALL=Výmaz všech
+
 TREE_ITEM_ARIA_LABEL=Prvek stromu
 
 TREE_ITEM_EXPAND_NODE=Rozbalit uzel

package/src/i18n/messagebundle_cy.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=Pob eitem
 
 TOKENIZER_SHOW_ALL_ITEMS={0} Eitem
 
+TOKENIZER_CLEAR_ALL=Clirio Pob Un
+
 TREE_ITEM_ARIA_LABEL=Eitem Coeden
 
 TREE_ITEM_EXPAND_NODE=Ehangu Nodyn

package/src/i18n/messagebundle_da.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=Alle elementer
 
 TOKENIZER_SHOW_ALL_ITEMS={0} elementer
 
+TOKENIZER_CLEAR_ALL=Nulstil alle
+
 TREE_ITEM_ARIA_LABEL=Træelement
 
 TREE_ITEM_EXPAND_NODE=Ekspander knude

package/src/i18n/messagebundle_de.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=Alle Elemente
 
 TOKENIZER_SHOW_ALL_ITEMS={0} Elemente
 
+TOKENIZER_CLEAR_ALL=Alle löschen
+
 TREE_ITEM_ARIA_LABEL=Baumelement
 
 TREE_ITEM_EXPAND_NODE=Knoten expandieren

package/src/i18n/messagebundle_el.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=Όλα τα στοιχεία
 
 TOKENIZER_SHOW_ALL_ITEMS={0} Είδη
 
+TOKENIZER_CLEAR_ALL=Εκκαθάριση Ολων
+
 TREE_ITEM_ARIA_LABEL=Αναλ.Γραμ.Δέντρου
 
 TREE_ITEM_EXPAND_NODE=Επέκταση Κόμβου

package/src/i18n/messagebundle_en_GB.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=All items
 
 TOKENIZER_SHOW_ALL_ITEMS={0} Items
 
+TOKENIZER_CLEAR_ALL=Clear All
+
 TREE_ITEM_ARIA_LABEL=Tree Item
 
 TREE_ITEM_EXPAND_NODE=Expand Node