@ui5/webcomponents 2.20.1 → 2.21.0-rc.1

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.20.1",
+  "version": "2.21.0-rc.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3589,7 +3589,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` and the header is focused, 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` and the header is focused, 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\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.\n- **header** - Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\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` and the header is focused, 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` and the header is focused, 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",
           "doc-url": "",
           "attributes": [
             {
@@ -3676,11 +3676,11 @@
             },
             {
               "name": "footer",
-              "description": "Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings."
+              "description": "Defines the footer HTML Element."
             },
             {
               "name": "header",
-              "description": "Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\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."
+              "description": "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."
             }
           ],
           "events": [
@@ -4386,7 +4386,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-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### **Events:**\n - **click** - Fired on mouseup, `SPACE` and `ENTER`.\n- on mouse click, the icon fires native `click` event\n- on `SPACE` and `ENTER`, the icon fires custom `click` event\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\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated by mouse/touch, keyboard (Enter or Space),\nor screen reader virtual cursor activation.\n\n**Note:** The event will not be fired if the `mode` property is set to `Decorative` or `Image`.\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-icon`.",
           "doc-url": "",
           "attributes": [
             {
@@ -4424,7 +4424,7 @@
           "events": [
             {
               "name": "click",
-              "description": "Fired on mouseup, `SPACE` and `ENTER`.\n- on mouse click, the icon fires native `click` event\n- on `SPACE` and `ENTER`, the icon fires custom `click` event"
+              "description": "Fired when the component is activated by mouse/touch, keyboard (Enter or Space),\nor screen reader virtual cursor activation.\n\n**Note:** The event will not be fired if the `mode` property is set to `Decorative` or `Image`."
             }
           ],
           "js": {
@@ -4462,7 +4462,7 @@
             "events": [
               {
                 "name": "click",
-                "description": "Fired on mouseup, `SPACE` and `ENTER`.\n- on mouse click, the icon fires native `click` event\n- on `SPACE` and `ENTER`, the icon fires custom `click` event"
+                "description": "Fired when the component is activated by mouse/touch, keyboard (Enter or Space),\nor screen reader virtual cursor activation.\n\n**Note:** The event will not be fired if the `mode` property is set to `Decorative` or `Image`."
               }
             ]
           }
@@ -9563,7 +9563,7 @@
             },
             {
               "name": "checked",
-              "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking the component, or by pressing the `Enter` or `Space` key.",
+              "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by clicking the component, or by pressing the `Enter` or `Space` key.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -9584,6 +9584,11 @@
               "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "readonly",
+              "description": "Defines whether the component is in readonly state.\n\n**Note:** A readonly switch cannot be toggled by user interaction,\nbut can still be focused and its value read programmatically.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "required",
               "description": "Defines whether the component is required.",
@@ -9630,7 +9635,7 @@
               },
               {
                 "name": "checked",
-                "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by cliking the component, or by pressing the `Enter` or `Space` key.",
+                "description": "Defines if the component is checked.\n\n**Note:** The property can be changed with user interaction,\neither by clicking the component, or by pressing the `Enter` or `Space` key.",
                 "value": { "type": "boolean" }
               },
               {
@@ -9648,6 +9653,11 @@
                 "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "readonly",
+                "description": "Defines whether the component is in readonly state.\n\n**Note:** A readonly switch cannot be toggled by user interaction,\nbut can still be focused and its value read programmatically.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "required",
                 "description": "Defines whether the component is required.",
@@ -11058,7 +11068,7 @@
         },
         {
           "name": "ui5-time-picker",
-          "description": "### Overview\nThe `ui5-time-picker` component provides an input field with assigned clocks which are opened on user action.\nThe `ui5-time-picker` allows users to select a localized time using touch, mouse, or keyboard input.\nIt consists of two parts: the time input field and the clocks.\n\n### Usage\nThe user can enter a time by:\n\n- Using the clocks that are displayed in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and chooses the enter key, the clocks show the corresponding time (hours, minutes and seconds separately).\nWhen the user directly triggers the clocks display, the actual time is displayed.\nFor the `ui5-time-picker`\n\n### Formatting\n\nIf a time is entered by typing it into\nthe input field, it must fit to the used time format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the `format-pattern` is \"HH:mm:ss\",\na valid value string is \"11:42:35\" and the same is displayed in the input.\n\n### Keyboard handling\n[F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.\n\nWhen closed:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n-\n\nWhen opened:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n- [A] or [P] - Selects AM or PM respectively.\n- [0]-[9] - Allows direct time selecting (hours/minutes/seconds).\n- [:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TimePicker.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by clicking the \"OK\" button or\nwhen the text in the input field has changed and the focus leaves the input field.\n- **close** - Fired after the value-help dialog of the component is closed.\n- **input** - Fired when the value of the `ui5-time-picker` is changed at each key stroke.\n- **open** - Fired after the value-help dialog of the component is opened.\n\n### **Methods:**\n - **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date and time\naccording to the `formatPattern` property of the TimePicker instance\n- **isValid(value: _string | undefined_): _boolean_** - Checks if a value is valid against the current `formatPattern` value.\n\n**Note:** an empty string is considered as valid value.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the `ui5-time-picker`.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-time-picker` is in `Information`, `Critical` or `Negative` value state.\n\n### **CSS Parts:**\n - **input** - Used to style the input element. This part is forwarded to the underlying ui5-input element.",
+          "description": "### Overview\nThe `ui5-time-picker` component provides an input field with assigned clocks which are opened on user action.\nThe `ui5-time-picker` allows users to select a localized time using touch, mouse, or keyboard input.\nIt consists of two parts: the time input field and the clocks.\n\n### Usage\nThe user can enter a time by:\n\n- Using the clocks that are displayed in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and chooses the enter key, the clocks show the corresponding time (hours, minutes and seconds separately).\nWhen the user directly triggers the clocks display, the actual time is displayed.\nFor the `ui5-time-picker`\n\n### Formatting\n\nIf a time is entered by typing it into\nthe input field, it must fit to the used time format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the valueFormat is \"HH:mm:ss\", the displayFormat is \"hh:mm: ss a\", and the used locale is English, a valid value string is \"11:42:35\", which leads to an output of \"11:42:35 AM\".\nIf no placeholder is set to the TimePicker, the used displayFormat is displayed as a placeholder. If another placeholder is needed, it must be set.\n\n### Keyboard handling\n[F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.\n\nWhen closed:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n-\n\nWhen opened:\n\n- [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.\n- [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.\n- [Shift]+[Page Up] - Increments minutes by 1.\n- [Shift]+[Page Down] - Decrements minutes by 1.\n- [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.\n- [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.\n- [A] or [P] - Selects AM or PM respectively.\n- [0]-[9] - Allows direct time selecting (hours/minutes/seconds).\n- [:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TimePicker.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by clicking the \"OK\" button or\nwhen the text in the input field has changed and the focus leaves the input field.\n- **close** - Fired after the value-help dialog of the component is closed.\n- **input** - Fired when the value of the `ui5-time-picker` is changed at each key stroke.\n- **open** - Fired after the value-help dialog of the component is opened.\n\n### **Methods:**\n - **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date and time\naccording to the `formatPattern` property of the TimePicker instance\n- **isValid(value: _string | undefined_): _boolean_** - Checks if a value is valid against the current `formatPattern` value.\n\n**Note:** an empty string is considered as valid value.\n- **isValidValue(value: _string | undefined_): _boolean_** - Checks if a value is valid against the current `valueFormat` value.\n\n**Note:** an empty string is considered as valid value.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the `ui5-time-picker`.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-time-picker` is in `Information`, `Critical` or `Negative` value state.\n\n### **CSS Parts:**\n - **input** - Used to style the input element. This part is forwarded to the underlying ui5-input element.",
           "doc-url": "",
           "attributes": [
             {
@@ -11091,6 +11101,11 @@
               "description": "Defines the disabled state of the comonent.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "display-format",
+              "description": "Determines the format, displayed in the input field.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "format-pattern",
               "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)",
@@ -11126,6 +11141,11 @@
               "description": "Defines a formatted time value.",
               "value": { "type": "string", "default": "\"\"" }
             },
+            {
+              "name": "value-format",
+              "description": "Determines the format, used for the value attribute.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "value-state",
               "description": "Defines the value state of the component.",
@@ -11191,6 +11211,11 @@
                 "description": "Defines the disabled state of the comonent.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "display-format",
+                "description": "Determines the format, displayed in the input field.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "format-pattern",
                 "description": "Determines the format, displayed in the input field.\n\nExample:\nHH:mm:ss -> 11:42:35\nhh:mm:ss a -> 2:23:15 PM\nmm:ss -> 12:04 (only minutes and seconds)",
@@ -11226,6 +11251,11 @@
                 "description": "Defines a formatted time value.",
                 "value": { "type": "string" }
               },
+              {
+                "name": "value-format",
+                "description": "Determines the format, used for the value attribute.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "value-state",
                 "description": "Defines the value state of the component.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.20.1",
+  "version": "2.21.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,22 +54,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.20.1",
-    "@ui5/webcomponents-icons": "2.20.1",
-    "@ui5/webcomponents-icons-business-suite": "2.20.1",
-    "@ui5/webcomponents-icons-tnt": "2.20.1",
-    "@ui5/webcomponents-localization": "2.20.1",
-    "@ui5/webcomponents-theming": "2.20.1"
+    "@ui5/webcomponents-base": "2.21.0-rc.1",
+    "@ui5/webcomponents-icons": "2.21.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.21.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.21.0-rc.1",
+    "@ui5/webcomponents-localization": "2.21.0-rc.1",
+    "@ui5/webcomponents-theming": "2.21.0-rc.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.20.1",
+    "@ui5/webcomponents-tools": "2.21.0-rc.1",
     "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "e99d0cc3b83e5320263a207f7ae3fcd159982e9f"
+  "gitHead": "ca81ad3bb0594ea51472c46d517d34d7e0a719b8"
 }

package/src/CarouselTemplate.tsx

@@ -21,7 +21,7 @@ export default function CarouselTemplate(this: Carousel) {
 			onMouseDown={this._onmousedown}
 		>
 			<div class={this.classes.viewport} part="content">
-				<div role="list" aria-label={this._ariaListLabel} class={this.classes.content} style={{ transform: `translate3d(${this._isRTL ? "" : "-"}${this._currentSlideIndex * (this._itemWidth || 0)}px, 0, 0` }}>
+				<div role="list" aria-label={this._ariaListLabel} class={this.classes.content} style={{ transform: `translate3d(${this._isRTL ? "" : "-"}${this._currentPageIndex * (this._itemWidth || 0)}px, 0, 0` }}>
 					{this.items.map((itemInfo, i) =>
 						<div
 							data-sap-focus-ref={this._focusedItemIndex === i ? true : undefined}
@@ -67,7 +67,7 @@ function arrowBack(this: Carousel) {
 	return <Icon name={slimArrowLeft}
 		tabindex={-1}
 		data-ui5-arrow-back
-		title={this.previousPageText	}
+		title={this.previousPageText}
 		mode="Decorative"
 		class={{
 			"ui5-carousel-navigation-button": true,
@@ -106,5 +106,5 @@ function navIndicator(this: Carousel) {
 		<div
 			dir="auto"
 			class="ui5-carousel-navigation-text"
-		>{this._currentSlideIndex + 1}&nbsp;{this.ofText}&nbsp;{this.pagesCount}</div>;
+		>{this._currentPageIndex + 1}&nbsp;{this.ofText}&nbsp;{this.pagesCount}</div>;
 }

package/src/ColorPaletteTemplate.tsx

@@ -59,8 +59,8 @@ export default function ColorPaletteTemplate(this: ColorPalette) {
 					<div class="ui5-cp-recent-colors-wrapper">
 						<div class="ui5-cp-separator"></div>
 						<div class="ui5-cp-recent-colors-container" onKeyDown={this._onRecentColorsContainerKeyDown}>
-							{this.recentColors.map(color =>
-								<ColorPaletteItem value={color}/>
+							{this.recentColors.map((color, index) =>
+								<ColorPaletteItem value={color} index={index + 1}/>
 							)}
 						</div>
 					</div>

package/src/ComboBoxTemplate.tsx

@@ -62,6 +62,7 @@ export default function ComboBoxTemplate(this: ComboBox) {
 						"inputIcon--pressed": this._iconPressed,
 					}}
 					accessibleName={this._iconAccessibleNameText}
+					onMouseDown={this._arrowMouseDown}
 					onClick={this._arrowClick}
 				/>
 				}

package/src/DayPickerTemplate.tsx

@@ -24,7 +24,7 @@ export default function DayPickerTemplate(this: DayPicker) {
 							aria-label={day.ultraShortName ? day.name : undefined}
 							class={day.classes}
 						>
-							{day.ultraShortName ? day.ultraShortName : <span aria-hidden="true" class="ui5-hidden-text">{day.name}</span>}
+							{day.ultraShortName ? day.ultraShortName : <span class="ui5-hidden-text">{day.name}</span>}
 						</div>
 					)}
 				</div>

package/src/IconTemplate.tsx

@@ -16,6 +16,7 @@ export default function IconTemplate(this: Icon) {
 			xmlns="http://www.w3.org/2000/svg"
 			onKeyDown={this._onkeydown}
 			onKeyUp={this._onkeyup}
+			onClick={this._onclick}
 		>
 			{ this.hasIconTooltip &&
                 <title id={`${this._id}-tooltip`} > {this.effectiveAccessibleName} </title>

package/src/MenuItemTemplate.tsx

@@ -59,7 +59,15 @@ function rightContent(this: MenuItem) {
 			</div>
 		);
 	case this.hasEndContent:
-		return <slot name="endContent" onKeyDown={this._endContentKeyDown}></slot>;
+		return (
+			<div
+				class="ui5-menu-item-end-content"
+				role="group"
+				aria-label={this.endContentAccessibleName}
+			>
+				<slot name="endContent" onKeyDown={this._endContentKeyDown}></slot>
+			</div>
+		);
 	case !!this.additionalText:
 		return (
 			<span
@@ -123,6 +131,7 @@ function listItemPostContent(this: MenuItem) {
 		<div
 			id={`${this._id}-menu-main`}
 			class={this.loading ? "menu-busy-indicator-main" : ""}
+			aria-busy={this.loading}
 		>
 			{
 				this.items.length ? (
@@ -150,6 +159,7 @@ function listItemPostContent(this: MenuItem) {
 				/>
 			}
 		</div >
+
 		{
 			this.isPhone && (
 				<div slot="footer" class="ui5-menu-dialog-footer">

package/src/SwitchTemplate.tsx

@@ -20,10 +20,12 @@ export default function SwitchTemplate(this: Switch) {
 			aria-label={this.ariaLabelText}
 			aria-checked={this.checked}
 			aria-disabled={this.effectiveAriaDisabled}
+			aria-readonly={this.effectiveAriaReadonly}
 			aria-required={this.required}
 			onClick={this._onclick}
 			onKeyUp={this._onkeyup}
 			onKeyDown={this._onkeydown}
+			onFocusIn={this._onfocusin}
 			tabindex={this.effectiveTabIndex}
 			title={this.tooltip}
 		>
@@ -52,8 +54,8 @@ export default function SwitchTemplate(this: Switch) {
 									</>
 									:
 									<>
-										<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{this._textOn}</span>
-										<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{this._textOff}</span>
+										<span class="ui5-switch-text ui5-switch-text--on" part="text-on" aria-hidden={this._textAriaHidden}>{this._textOn}</span>
+										<span class="ui5-switch-text ui5-switch-text--off" part="text-off" aria-hidden={this._textAriaHidden}>{this._textOff}</span>
 									</>
 								}
 							</>

package/src/TimePickerTemplate.tsx

@@ -13,7 +13,7 @@ export default function TimePickerTemplate(this: TimePicker) {
 					id={`${this._id}-inner`}
 					class="ui5-time-picker-input"
 					part="input"
-					value={this.value}
+					value={this.displayValue}
 					placeholder={this._placeholder}
 					disabled={this.disabled}
 					readonly={this.readonly}

package/src/ToolbarTemplate.tsx

@@ -17,9 +17,8 @@ export default function ToolbarTemplate(this: Toolbar) {
 				return (
 					<div class={{
 						"ui5-tb-item": !item.hasFlexibleWidth,
-						"ui5-tb-spacer": item.hasFlexibleWidth,
 						"ui5-tb-self-overflow": item.hasOverflow,
-					}} id={item._individualSlot}>
+					}} id={item._individualSlot} style={item.isSpacer ? item.styles : undefined}>
 						<slot name={item._individualSlot}></slot>
 					</div>
 				);

package/src/i18n/messagebundle.properties

@@ -226,6 +226,9 @@ DATEPICKER_OPEN_ICON_TITLE_OPENED=Close Picker
 #XACT: Aria information for the Date Picker
 DATEPICKER_DATE_DESCRIPTION=Date Input
 
+#XFLD: DatePicker dialog header title on mobile
+DATEPICKER_MOBILE_HEADER_TITLE=Enter date
+
 DATEPICKER_VALUE_MISSING=Fill in the date value in the format: {0}.
 
 DATEPICKER_PATTERN_MISSMATCH=This format is not supported. Fill in the date and time range values in the format: {0}.
@@ -257,7 +260,7 @@ DATERANGE_OVERFLOW=Fill in a value that is lower than the set max. value of {0}.
 DATERANGE_UNDERFLOW=Fill in a value that is higher than the set min. value of {0}.
 
 #XACT: Aria information for the Date Picker popover
-DATEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date for {0}
+DATEPICKER_POPOVER_ACCESSIBLE_NAME=Enter date for {0}
 
 #XTXT: Date Picker placeholder prefix
 DATETIME_COMPONENTS_PLACEHOLDER_PREFIX=e.g.
@@ -617,7 +620,7 @@ DATETIME_PICKER_TIME_BUTTON=Time
 TOKEN_ARIA_DELETABLE=Deletable
 
 #XACT: ARIA announcement for token removal
-TOKEN_ARIA_REMOVE=Remove
+TOKEN_ARIA_DELETE=Delete
 
 #XACT: ARIA announcement for token label
 TOKEN_ARIA_LABEL=Token
@@ -808,6 +811,12 @@ MENU_ITEM_GROUP_SINGLE_ACCESSIBLE_NAME=Contains Selectable Items
 #XACT: ARIA information for the Menu Item Group with itemSelectionMode "MultiSelect"
 MENU_ITEM_GROUP_MULTI_ACCESSIBLE_NAME=Contains Multi-Selectable Items
 
+#XACT: ARIA information for the Menu Item end content slot
+MENU_ITEM_END_CONTENT_ACCESSIBLE_NAME=Additional Actions
+
+#XACT: ARIA information for the Menu Item loading state
+MENU_ITEM_LOADING=Loading
+
 #XACT: ARIA announcement for roldesecription attribute of Dialog header
 DIALOG_HEADER_ARIA_ROLE_DESCRIPTION=Interactive Header
 
@@ -1008,6 +1017,12 @@ DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=Next X {0} (included)
 #XFLD: Suffix text for included date range options.
 DYNAMIC_DATE_RANGE_INCLUDED_TEXT=(included)
 
+#XACT: Default text for switch "on" state, used to detect duplicate screen reader announcements
+SWITCH_ON=On
+
+#XACT: Default text for switch "off" state, used to detect duplicate screen reader announcements
+SWITCH_OFF=Off
+
 #XACT: ARIA announcement for icon type image
 ICON_ARIA_TYPE_IMAGE=Image
 

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -244,6 +244,8 @@ LINK_SUBTLE=‌​​‌‍‍​‌​‌‍‍​​‌​‌‍‍
 
 LINK_EMPHASIZED=‌​‌‌‍‍​​‌‍‌‍‌​‌‌​​‌‌‍‌‌​‍‌‌‍​‍​‌​‌‍​‍‍‌‌‌Emphasized
 
+LIST_ROLE_DESCRIPTION=‍‍‌‍‍‌‍​‌‍‍‍‌‌‍​​​​​​‍‍‌‍‍‍​‍‍‍‍‍‌‌‍​‍​‍List with interactive items. To move to the content, press F2.
+
 LIST_ITEM_ACTIVE=‌​‌‌‍‌‍‌‍‌‍‌‌‌‌‌‍​‍​​​​‍​‌‌​​​‌‌‍‌‌‍‍​​‌‍Is Active
 
 LIST_ITEM_POSITION=‌‌‍‍​‌‌​​​​‍‌‌‍​‌‌​‍‌​‍‍‌​‍‍​‌​​‌‌​‌‍‍​‍List item ​​​{0}‌‌‌ of ​​​{1}‌‌‌

package/src/themes/Breadcrumbs.css

@@ -29,6 +29,10 @@
     align-self: center;
 }
 
+.ui5-breadcrumbs-current-location [ui5-label] {
+	color: var(--_ui5_breadcrumbs_current_location_color);
+}
+
 .ui5-breadcrumbs-current-location,
 .ui5-breadcrumbs-link-wrapper:last-child {
 	min-width: 1%;
@@ -96,7 +100,7 @@
 	content: "/"; /* default separator is "Slash" */
 	padding: 0 .25rem;
 	cursor: auto;
-	color: var(--sapContent_LabelColor);
+	color: var(--_ui5_breadcrumbs_separator_color);
 	display: inline-block;
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSize);
@@ -121,4 +125,4 @@
 
 :host([separators="DoubleGreaterThan"]) .ui5-breadcrumbs-separator::after {
 	content: ">>";
-}
+}

package/src/themes/CalendarHeader.css

@@ -70,7 +70,7 @@
 }
 
 .ui5-calheader-arrowbtn:not(:active) .ui5-calheader-btn-sectext {
-	color: var(--sapNeutralElementColor);
+	color: var(--sapContent_LabelColor);
 	font-size: var(--sapFontSmallSize);
 }
 

package/src/themes/ColorPaletteItem.css

@@ -123,6 +123,20 @@
 	pointer-events: none;
 }
 
+/* White outline for selected state on mobile */
+:host([selected]:not([_disabled])[on-phone]) .ui5-cp-item::after {
+	content: "";
+	box-sizing: border-box;
+	position: absolute;
+	top: calc(-1 * var(--_ui5_color_palette_item_height) + 0.375rem);
+	left: 0;
+	right: 0;
+	bottom: calc(-100%);
+	border: var(--_ui5_color-palette-item-after-not-focus-color);
+	border-radius: 0.1875rem;
+	pointer-events: none;
+}
+
 :host(:not([_disabled]):not([on-phone]):not([selected]):not(:hover)) .ui5-cp-item:focus:not(:hover)::after {
 	border: var(--_ui5_color-palette-item-after-focus-not-selected-border);
 }

package/src/themes/DatePickerPopover.css

@@ -37,3 +37,8 @@
 .ui5-dt-picker-action {
 	margin: 0.25rem;
 }
+
+[ui5-responsive-popover]::part(header) {
+	font-family: var(--_ui5_button_fontFamily);
+	text-align: left;
+}

package/src/themes/DayPicker.css

@@ -422,7 +422,7 @@
 }
 
 .ui5-dp-item--withsecondtype .ui5-dp-daytext {
-	font-size: 0.75rem;
+	font-size: var(--_ui5_dp_item_withsecondtype_font_size);
 }
 
 .ui5-dp-item.ui5-dp-item--withsecondtype .ui5-dp-specialday,

package/src/themes/MenuItem.css

@@ -126,6 +126,11 @@
 	padding-top: 0.25rem;
 }
 
+.ui5-menu-item-end-content {
+	display: inline-flex;
+	align-items: center;
+}
+
 .ui5-menu-busy-indicator {
 	position: absolute;
 	width: 100%;

package/src/themes/MonthPicker.css

@@ -48,8 +48,8 @@
 }
 
 .ui5-dp-monthsectext {
-	font-size: 0.75rem;
-	color: var(--sapNeutralElementColor);
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapTextColor);
 }
 
 .ui5-mp-item.ui5-mp-item--selected,

package/src/themes/MultiComboBox.css

@@ -8,7 +8,7 @@
 }
 
 :host([tokenizer-available]) {
-	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
+	min-width: calc(var(--_ui5_input_min_width_tokenizer_available) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
 }
 
 :host(:not([hidden])) {

package/src/themes/MultiInput.css

@@ -5,7 +5,7 @@
 }
 
 :host([tokenizer-available]) {
-	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
+	min-width: calc(var(--_ui5_input_min_width_tokenizer_available) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width));
 }
 
 .ui5-multi-input-tokenizer {

package/src/themes/PopupsCommon.css

@@ -142,4 +142,11 @@
 
 ::slotted([slot="footer"][ui5-toolbar]) {
 	border: 0;
+}
+
+::slotted([slot="footer"][ui5-bar][design="Footer"]),
+::slotted([slot="header"][ui5-bar][design="Header"]) {
+	--_ui5_bar-start-container-padding-start: 0;
+	--_ui5_bar-mid-container-padding-start-end: 0;
+	--_ui5_bar-end-container-padding-end: 0;
 }