@ui5/webcomponents 2.24.0 → 2.25.0-rc.3

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.24.0",
+  "version": "2.25.0-rc.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3718,7 +3718,7 @@
         },
         {
           "name": "ui5-dialog",
-          "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true`, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true`, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n---\n\n\n### **Events:**\n - **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **close** - Fired after the component is closed.\n- **open** - Fired after the component is opened.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **default** - Defines the content of the Popup.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component\n- **header** - Used to style the header of the component",
+          "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true`, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true`, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n#### Fullscreen\nWhen the `ui5-dialog` has the `showFullscreenButton` property set to `true`, the user can toggle fullscreen mode\nwith the following keyboard shortcut:\n\n- [Shift] + [Ctrl] + [F] - Toggle fullscreen mode.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n---\n\n\n### **Events:**\n - **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **close** - Fired after the component is closed.\n- **open** - Fired after the component is opened.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **default** - Defines the content of the Popup.\n- **footer** - Defines the footer HTML Element.\n- **header** - Defines the header HTML Element.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component\n- **header** - Used to style the header of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -3784,6 +3784,11 @@
               "description": "Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "show-fullscreen-button",
+              "description": "Defines whether a fullscreen toggle button is shown in the dialog header.\nWhen pressed, it toggles the `stretch` property.\nThe fullscreen button is not available on phone devices.\n\n**Note:** The fullscreen button is not available on phone devices,\nnor when a custom header slot is provided — the application is expected\nto render its own toggle inside the custom header in those cases.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "state",
               "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.",
@@ -3892,6 +3897,11 @@
                 "description": "Configures the component to be resizable.\nIf this property is set to true, the Dialog will have a resize handle in its bottom right corner in LTR languages.\nIn RTL languages, the resize handle will be placed in the bottom left corner.\n\n**Note:** The component can be resizable only in desktop mode.\n\n**Note:** Upon resizing, externally defined height and width styling will be ignored.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "show-fullscreen-button",
+                "description": "Defines whether a fullscreen toggle button is shown in the dialog header.\nWhen pressed, it toggles the `stretch` property.\nThe fullscreen button is not available on phone devices.\n\n**Note:** The fullscreen button is not available on phone devices,\nnor when a custom header slot is provided — the application is expected\nto render its own toggle inside the custom header in those cases.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "state",
                 "description": "Defines the state of the `Dialog`.\n\n**Note:** If `\"Negative\"` and `\"Critical\"` states is set, it will change the\naccessibility role to \"alertdialog\", if the accessibleRole property is set to `\"Dialog\"`.",
@@ -3989,6 +3999,11 @@
           "description": "### Overview\n\nThe `ui5-dynamic-date-range` component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., \"Today\", \"Yesterday\", etc.).\nIt allows users to select a date range from a predefined set of options or enter custom dates.\n\n### Usage\n\nThe component is typically used in scenarios where users need to filter data based on date ranges, such as in reports, dashboards, or data analysis tools.\nIt can be used with the predefined options or extended with custom options to suit specific requirements. You can create your own options by extending the `IDynamicDateRangeOption` interface.\nEvery option should be registered using the `DynamicDateRange.register` method.\n\nIf needed, you can also create a range of dates based on specific option using the `toDates` method.\n\n### Standard Options\n\nThe component comes with a set of standard options, including:\n- \"TODAY\" - Represents the current date. An example value is `{ operator: \"TODAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Today.js\";`\n- \"YESTERDAY\" - Represents the previous date. An example value is `{ operator: \"YESTERDAY\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Yesterday.js\";`\n- \"TOMORROW\" - Represents the next date. An example value is `{ operator: \"TOMORROW\"}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/Tomorrow.js\";`\n- \"DATE\" - Represents a single date. An example value is `{ operator: \"DATE\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/SingleDate.js\";`\n- \"DATERANGE\" - Represents a range of dates. An example value is `{ operator: \"DATERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateRange.js\";`\n- \"DATETIMERANGE\" - Represents a range of dates with times. An example value is `{ operator: \"DATETIMERANGE\", values: [new Date(), new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/DateTimeRange.js\";`\n- \"FROMDATETIME\" - Represents a range from date and time. An example value is `{ operator: \"FROMDATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/FromDateTime.js\";`\n- \"TODATETIME\" - Represents a range to date and time. An example value is `{ operator: \"TODATETIME\", values: [new Date()]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/ToDateTime.js\";`\n- \"LASTDAYS\" - Represents Last X Days from today. An example value is `{ operator: \"LASTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTWEEKS\" - Represents Last X Weeks from today. An example value is `{ operator: \"LASTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTMONTHS\" - Represents Last X Months from today. An example value is `{ operator: \"LASTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTQUARTERS\" - Represents Last X Quarters from today. An example value is `{ operator: \"LASTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"LASTYEARS\" - Represents Last X Years from today. An example value is `{ operator: \"LASTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/LastOptions.js\";`\n- \"NEXTDAYS\" - Represents Next X Days from today. An example value is `{ operator: \"NEXTDAYS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTWEEKS\" - Represents Next X Weeks from today. An example value is `{ operator: \"NEXTWEEKS\", values: [3]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTMONTHS\" - Represents Next X Months from today. An example value is `{ operator: \"NEXTMONTHS\", values: [6]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTQUARTERS\" - Represents Next X Quarters from today. An example value is `{ operator: \"NEXTQUARTERS\", values: [2]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n- \"NEXTYEARS\" - Represents Next X Years from today. An example value is `{ operator: \"NEXTYEARS\", values: [1]}`. Import: `import \"@ui5/webcomponents/dist/dynamic-date-range-options/NextOptions.js\";`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DynamicDateRange.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout or a value is selected in the popover.\n\n### **Methods:**\n - **toDates(value: _DynamicDateRangeValue_): _Array<Date>_** - Converts a `value` into concrete `startDate` and `endDate` JavaScript `Date` objects.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "accessible-name-ref",
+              "description": "Receives id(or many ids) of the elements that label the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "options",
               "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"",
@@ -4011,6 +4026,11 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "accessible-name-ref",
+                "description": "Receives id(or many ids) of the elements that label the component.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "options",
                 "description": "Defines the options listed as a string, separated by commas and using capital case.\nExample: \"TODAY, YESTERDAY, DATERANGE\"",
@@ -4884,6 +4904,94 @@
             ]
           }
         },
+        {
+          "name": "ui5-input-icon",
+          "description": "### Overview\nThe `ui5-input-icon` component represents an interactive icon that can be placed inside an `ui5-input` component.\nUnlike the standard `ui5-icon`, this component provides button-like behavior with hover, focus, and active states,\nmatching the visual style of the input's built-in clear icon.\n\n### Usage\nUse `ui5-input-icon` for interactive icons that users can click (e.g., search, voice input, camera).\nFor decorative icons, use the standard `ui5-icon` component instead.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/InputIcon.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the `ui5-input-icon` is activated either with a click/tap or by using the Enter or Space key.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "disabled",
+              "description": "Defines whether the icon is disabled.\n\n**Note:** Disabled icons are not interactive and do not fire click events.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "name",
+              "description": "Defines the icon name to be displayed.\n\n**Note:** Make sure you import the desired icon before using it.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "readonly",
+              "description": "Defines whether the icon is readonly.\n\n**Note:** Readonly icons are not interactive and do not fire click events.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "show-tooltip",
+              "description": "Defines whether the tooltip is shown.\n\n**Note:** The tooltip text should be provided via the `accessible-name` property.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value-state",
+              "description": "Defines the value state of the icon.\n\n**Note:** This property should match the parent input's value state for consistent styling.",
+              "value": {
+                "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\"",
+                "default": "\"None\""
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "description": "Fired when the `ui5-input-icon` is activated either with a click/tap or by using the Enter or Space key."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "disabled",
+                "description": "Defines whether the icon is disabled.\n\n**Note:** Disabled icons are not interactive and do not fire click events.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "name",
+                "description": "Defines the icon name to be displayed.\n\n**Note:** Make sure you import the desired icon before using it.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "readonly",
+                "description": "Defines whether the icon is readonly.\n\n**Note:** Readonly icons are not interactive and do not fire click events.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "show-tooltip",
+                "description": "Defines whether the tooltip is shown.\n\n**Note:** The tooltip text should be provided via the `accessible-name` property.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "value-state",
+                "description": "Defines the value state of the icon.\n\n**Note:** This property should match the parent input's value state for consistent styling.",
+                "value": {
+                  "type": "\"None\" | \"Positive\" | \"Critical\" | \"Negative\" | \"Information\""
+                }
+              }
+            ],
+            "events": [
+              {
+                "name": "click",
+                "description": "Fired when the `ui5-input-icon` is activated either with a click/tap or by using the Enter or Space key."
+              }
+            ]
+          }
+        },
         {
           "name": "ui5-label",
           "description": "### Overview\n\nThe `ui5-label` is a component used to represent a label for elements like input, textarea, select.\nThe `for` property of the `ui5-label` must be the same as the id attribute of the related input element.\nScreen readers read out the label, when the user focuses the labelled control.\n\nThe `ui5-label` appearance can be influenced by properties,\nsuch as `required` and `wrappingType`.\nThe appearance of the Label can be configured in a limited way by using the design property.\nFor a broader choice of designs, you can use custom styles.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Label\";`\n---\n\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.",
@@ -6349,24 +6457,11 @@
         },
         {
           "name": "ui5-menu-separator",
-          "description": "The `ui5-menu-separator` represents a horizontal line to separate menu items inside a `ui5-menu`.\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\n**Note:** The event will not be fired if the `disabled` property is set to `true`.",
+          "description": "The `ui5-menu-separator` represents a horizontal line to separate menu items inside a `ui5-menu`.\n---\n",
           "doc-url": "",
           "attributes": [],
-          "events": [
-            {
-              "name": "click",
-              "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`."
-            }
-          ],
-          "js": {
-            "properties": [],
-            "events": [
-              {
-                "name": "click",
-                "description": "Fired when the component is activated either with a mouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled` property is set to `true`."
-              }
-            ]
-          }
+          "events": [],
+          "js": { "properties": [], "events": [] }
         },
         {
           "name": "ui5-message-strip",
@@ -12467,17 +12562,17 @@
         },
         {
           "name": "ui5-toolbar",
-          "description": "### Overview\n\nThe `ui5-toolbar` component is used to create a horizontal layout with items.\nThe items can be overflowing in a popover, when the space is not enough to show all of them.\n\n### Keyboard Handling\nThe `ui5-toolbar` provides advanced keyboard handling.\n\n- The control is not interactive, but can contain of interactive elements\n- [Tab] - iterates through elements\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Toolbar.js\";`\n---\n\n\n### **Methods:**\n - **isOverflowOpen(): _boolean_** - Returns if the overflow popup is open.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.",
+          "description": "### Overview\n\nThe `ui5-toolbar` component is used to create a horizontal layout with items.\nThe items can be overflowing in a popover, when the space is not enough to show all of them.\n\n### Keyboard Handling\nThe `ui5-toolbar` provides advanced keyboard handling.\n\n- [Left]/[Right] - navigate among toolbar items\n- [Home]/[End] - move to first/last toolbar item\n- [Tab] / [Shift]+[Tab] - exit the toolbar\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Toolbar.js\";`\n---\n\n\n### **Methods:**\n - **isOverflowOpen(): _boolean_** - Returns if the overflow popup is open.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.",
           "doc-url": "",
           "attributes": [
             {
               "name": "accessible-name",
-              "description": "Defines the accessible ARIA name of the component.",
+              "description": "Defines the accessible ARIA name of the component.\n\n**Note:** It is strongly recommended to always set this property or `accessibleNameRef`\nwhen the toolbar has `role=\"toolbar\"` (i.e. when it contains more than one interactive item).\nWithout an accessible name, screen readers will announce the toolbar without any context,\nmaking it harder for keyboard-only and AT users to understand its purpose.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "accessible-name-ref",
-              "description": "Receives id(or many ids) of the elements that label the input.",
+              "description": "Receives id(or many ids) of the elements that label the input.\n\n**Note:** When the toolbar has `role=\"toolbar\"`, at least one of `accessibleName` or\n`accessibleNameRef` should be provided to satisfy WCAG 2.1 success criterion 4.1.2.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
@@ -12510,12 +12605,12 @@
             "properties": [
               {
                 "name": "accessible-name",
-                "description": "Defines the accessible ARIA name of the component.",
+                "description": "Defines the accessible ARIA name of the component.\n\n**Note:** It is strongly recommended to always set this property or `accessibleNameRef`\nwhen the toolbar has `role=\"toolbar\"` (i.e. when it contains more than one interactive item).\nWithout an accessible name, screen readers will announce the toolbar without any context,\nmaking it harder for keyboard-only and AT users to understand its purpose.",
                 "value": { "type": "string | undefined" }
               },
               {
                 "name": "accessible-name-ref",
-                "description": "Receives id(or many ids) of the elements that label the input.",
+                "description": "Receives id(or many ids) of the elements that label the input.\n\n**Note:** When the toolbar has `role=\"toolbar\"`, at least one of `accessibleName` or\n`accessibleNameRef` should be provided to satisfy WCAG 2.1 success criterion 4.1.2.",
                 "value": { "type": "string | undefined" }
               },
               {
@@ -12892,6 +12987,11 @@
               "name": "selected",
               "description": "Defines the selected state of the component.",
               "value": { "type": "any", "default": "false" }
+            },
+            {
+              "name": "value",
+              "description": "Defines the value of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -12907,6 +13007,11 @@
                 "name": "selected",
                 "description": "Defines the selected state of the component.",
                 "value": { "type": "any" }
+              },
+              {
+                "name": "value",
+                "description": "Defines the value of the component.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []

package/package-scripts.cjs

@@ -9,6 +9,7 @@ const options = {
 	cssVariablesTarget: "host",
 	internal: {
 		cypress_code_coverage: false,
+		cypress_visual: process.env.CYPRESS_VISUAL === "true",
 	},
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.24.0",
+  "version": "2.25.0-rc.3",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -33,6 +33,8 @@
     "test:cypress:suite-3": "wc-dev test-cy-ci-suite-3",
     "test:cypress:suite-4": "wc-dev test-cy-ci-suite-4",
     "test:cypress:open": "wc-dev test-cy-open",
+    "test:cypress:visual": "CYPRESS_VISUAL=true yarn test:cypress",
+    "test:cypress:open:visual": "CYPRESS_VISUAL=true yarn test:cypress:open",
     "test:cypress:single": "npx cypress run --component --browser chrome --spec",
     "test:vitest": "yarn vitest run",
     "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
@@ -54,22 +56,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.24.0",
-    "@ui5/webcomponents-icons": "2.24.0",
-    "@ui5/webcomponents-icons-business-suite": "2.24.0",
-    "@ui5/webcomponents-icons-tnt": "2.24.0",
-    "@ui5/webcomponents-localization": "2.24.0",
-    "@ui5/webcomponents-theming": "2.24.0"
+    "@ui5/webcomponents-base": "2.25.0-rc.3",
+    "@ui5/webcomponents-icons": "2.25.0-rc.3",
+    "@ui5/webcomponents-icons-business-suite": "2.25.0-rc.3",
+    "@ui5/webcomponents-icons-tnt": "2.25.0-rc.3",
+    "@ui5/webcomponents-localization": "2.25.0-rc.3",
+    "@ui5/webcomponents-theming": "2.25.0-rc.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.24.0",
-    "cypress": "15.9.0",
+    "@ui5/webcomponents-tools": "2.25.0-rc.3",
+    "cypress": "15.18.1",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
-    "vitest": "^3.0.2"
+    "vitest": "^3.2.7"
   },
-  "gitHead": "0823d74956236280e547b9f58bd06ff736180396"
+  "gitHead": "f3a7ff8716c57d513a3464958de2a01c1eb793fc"
 }

package/src/CarouselTemplate.tsx

@@ -10,7 +10,6 @@ export default function CarouselTemplate(this: Carousel) {
 				"ui5-carousel-root": true,
 				[`ui5-carousel-background-${this._backgroundDesign}`]: true,
 			}}
-			role="region"
 			aria-label={this.ariaLabelTxt}
 			aria-roledescription={this._roleDescription}
 			onFocusIn={this._onfocusin}

package/src/DialogTemplate.tsx

@@ -3,6 +3,7 @@ import type Dialog from "./Dialog.js";
 import PopupTemplate from "./PopupTemplate.js";
 import Title from "./Title.js";
 import Icon from "./Icon.js";
+import Button from "./Button.js";
 
 export default function DialogTemplate(this: Dialog) {
 	return PopupTemplate.call(this, {
@@ -20,6 +21,7 @@ function beforeContent(this: Dialog) {
 				role="region"
 				aria-label={this._headerAriaLabel}
 				onMouseDown={this._onDragMouseDown}
+				onDblClick={this._showFullscreenButton ? this._onHeaderDblClick : undefined}
 				part="header"
 				// state={this.state}
 			>
@@ -31,6 +33,17 @@ function beforeContent(this: Dialog) {
 					:
 					<Title level="H1" id="ui5-popup-header-text" class="ui5-popup-header-text">{this.headerText}</Title>
 				}
+				{this._showFullscreenButton &&
+					<Button
+						class="ui5-dialog-fullscreen-btn"
+						icon={this._fullscreenButtonIcon}
+						design="Transparent"
+						tooltip={this._fullscreenButtonTooltip}
+						accessibleName={this._fullscreenButtonTooltip}
+						accessibilityAttributes={this._fullscreenButtonAccessibilityAttributes}
+						onClick={this._toggleFullscreen}
+					></Button>
+				}
 			</div>
 		}
 	</>);

package/src/DynamicDateRangeInputTemplate.tsx

@@ -11,6 +11,7 @@ export default function DynamicDateRangeInputTemplate(this: DynamicDateRange) {
 				id={`${this._id}-inner`}
 				class="ui5-dynamic-date-range-input"
 				value={this.value && this.getOption(this.value?.operator)?.format(this.value)}
+				_inputAccInfo={this._accInfo}
 				onChange={this.onInputChange}
 				onKeyDown={this.onInputKeyDown}
 			>

package/src/FileUploaderTemplate.tsx

@@ -35,10 +35,14 @@ export default function FileUploaderTemplate(this: FileUploader) {
 						aria-description={this.accInfo.ariaDescription}
 						aria-required={this.accInfo.ariaRequired}
 						aria-invalid={this.accInfo.ariaInvalid}
+						aria-describedby={this.accInfo.ariaDescribedBy}
 						onClick={this._onNativeInputClick}
 						onChange={this._onChange}
 						data-sap-focus-ref
 					/>
+					{this.hasValueState &&
+						<span id="valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
+					}
 				</div>
 
 				{this.hideInput ? (

package/src/InputIconTemplate.tsx

@@ -0,0 +1,42 @@
+import type InputIcon from "./InputIcon.js";
+import Icon from "./Icon.js";
+
+export default function InputIconTemplate(this: InputIcon) {
+	return (
+		<>
+			{!this.readonly &&
+				<div
+					class={{
+						"ui5-input-icon-root": true,
+						"inputIcon": true,
+						"inputIcon--pressed": this._pressed,
+						"inputIcon--focused": this._focused,
+						"inputIcon--disabled": this.disabled,
+					}}
+					role="button"
+					tabindex={this.effectiveTabIndex}
+					aria-label={this.effectiveAriaLabel}
+					aria-disabled={this.disabled}
+					title={this.effectiveTitle}
+					onClick={this._onclick}
+					onMouseDown={this._onmousedown}
+					onMouseUp={this._onmouseup}
+					onMouseLeave={this._onmouseleave}
+					onFocus={this._onfocus}
+					onBlur={this._onblur}
+					onKeyDown={this._onkeydown}
+					onKeyUp={this._onkeyup}
+					part="root"
+				>
+					{this.name && (
+						<Icon
+							name={this.name}
+							class="ui5-input-icon-inner"
+							aria-hidden="true"
+						/>
+					)}
+				</div>
+			}
+		</>
+	);
+}

package/src/MenuSeparatorTemplate.tsx

@@ -1,12 +1,10 @@
 import type MenuSeparator from "./MenuSeparator.js";
-import ListItemCustom from "./ListItemCustom.js";
 
 export default function MenuSeparatorTemplate(this: MenuSeparator) {
 	return (
-		<ListItemCustom
+		<li
+			role="separator"
 			class="ui5-menu-separator"
-			_forcedAccessibleRole="separator"
-			disabled={true}
 		/>
 	);
 }

package/src/MultiComboBoxItemTemplate.tsx

@@ -3,12 +3,15 @@ import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
 import type MultiComboBoxItem from "./MultiComboBoxItem.js";
 
 export default function MultiComboBoxItemTemplate(this: MultiComboBoxItem) {
-	return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" });
+	return ListItemBaseTemplate.call(this, { listItemContent }, {
+		role: "option",
+	});
 }
 
 function listItemContent(this: MultiComboBoxItem) {
 	return (
 		<>
+			<span class="ui5-hidden-text">{this._selectionStateText}</span>
 			<CheckBox
 				disabled={this._readonly}
 				checked={this.selected}

package/src/SliderTemplate.tsx

@@ -78,6 +78,7 @@ export default function SliderTemplate(this: Slider) {
 					max={this.max}
 					step={this.step}
 					startValue={this.min}
+					progressAriaValueNow={this.value}
 					showTickmarks={this.showTickmarks || this._hasCustomTickmarks}
 					labelInterval={this._hasCustomTickmarks ? 1 : this.labelInterval}
 					tickmarks={this.tickmarks}

package/src/ToolbarSelectTemplate.tsx

@@ -25,6 +25,7 @@ export default function ToolbarSelectTemplate(this: ToolbarSelect) {
 			{this.options.map((option, index) => (
 				<Option
 					selected={option.selected}
+					value={option.value}
 					data-ui5-external-action-item-index={index}
 				>
 					{option.textContent}

package/src/i18n/messagebundle.properties

@@ -430,7 +430,7 @@ MESSAGE_STRIP_WARNING=Warning Message Strip
 MESSAGE_STRIP_SUCCESS=Success Message Strip
 
 #XACT: ARIA announcement for the MessageStrip's "Information" state
-MESSAGE_STRIP_INFORMATION=Message Strip
+MESSAGE_STRIP_INFORMATION=Information Message Strip
 
 #XACT: ARIA announcement for the MessageStrip's "Custom" state
 MESSAGE_STRIP_CUSTOM=Custom Message Strip
@@ -873,6 +873,13 @@ DIALOG_CONTENT_ARIA_LABEL=Content
 
 #XACT: ARIA label for the Dialog footer region
 DIALOG_FOOTER_ARIA_LABEL=Footer
+
+#XACT: Tooltip for dialog fullscreen button (maximize)
+DIALOG_FULLSCREEN_MAXIMIZE=Maximize (Shift+Ctrl+F)
+
+#XACT: Tooltip for dialog fullscreen button (restore)
+DIALOG_FULLSCREEN_RESTORE=Restore (Shift+Ctrl+F)
+
 #XFLD: A colon to separate the "label" from an input. In some languages there might be a different symbol used for such a colon
 LABEL_COLON=:
 

package/src/themes/ColorPalette.css

@@ -116,4 +116,5 @@
 .ui5-cp-default-color-button,
 .ui5-cp-more-colors {
 	padding: 0.0625rem;
+	border-radius: 0;
 }

package/src/themes/DatePicker.css

@@ -62,5 +62,4 @@
 
 .ui5-date-picker-popover::part(header) {
 	padding: 0;
-}
-
+}

package/src/themes/Dialog.css

@@ -29,7 +29,7 @@
 	cursor: move;
 }
 
-:host([draggable]) .ui5-popup-header-root * {
+:host([draggable]) .ui5-popup-header-root *:not(.ui5-dialog-fullscreen-btn) {
 	cursor: auto;
 }
 
@@ -125,6 +125,18 @@
 	height: 100%;
 }
 
+:host(:not([header-text])[_show-fullscreen-button]) .ui5-popup-header-root {
+	justify-content: flex-end;
+}
+
+:host([header-text][_show-fullscreen-button]) .ui5-popup-header-root {
+	justify-content: space-between;
+}
+
+.ui5-popup-header-root {
+	gap: 0.5rem;
+}
+
 .ui5-popup-content {
 	min-height: var(--_ui5_dialog_content_min_height);
 	flex: 1 1 auto;
@@ -144,6 +156,15 @@
 	color: var(--sapButton_Lite_TextColor);
 }
 
+.ui5-popup-header-text {
+	min-width: 0;
+	justify-content: flex-start;
+}
+
+:host([on-phone]) .ui5-dialog-fullscreen-btn {
+	display: none;
+}
+
 :host::backdrop {
 	background-color: var(--_ui5_popup_block_layer_background);
 	opacity: var(--_ui5_popup_block_layer_opacity);

package/src/themes/Input.css

@@ -381,6 +381,10 @@
 
 /* Input Icon */
 
+::slotted([ui5-input-icon]) {
+	height: 100%;
+}
+
 .ui5-input-icon-root {
 	min-width: var(--_ui5_input_icon_min_width);
 	height: 100%;