@ui5/webcomponents 2.3.1-rc.0 → 2.4.0-rc.1

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

@@ -1312,7 +1312,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\n`ui5-dialog` on full screen.\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\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\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 - **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- **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\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer 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\n`ui5-dialog` on full screen.\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\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\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 - **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- **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\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
       "attributes": [
         {
           "name": "header-text",
@@ -1452,11 +1452,11 @@
     },
     {
       "name": "ui5-form",
-      "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 2)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise  - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";\n\n\n---\n\n\n\n\n### **Slots:**\n - **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n- **default** - Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\n### **CSS Parts:**\n - **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.\n- **column** - Used to style a single column of the form column layout.",
+      "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise  - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";\n\n\n---\n\n\n\n\n### **Slots:**\n - **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n- **default** - Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\n### **CSS Parts:**\n - **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.\n- **column** - Used to style a single column of the form column layout.",
       "attributes": [
         {
           "name": "layout",
-          "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 2 columns by default (up to 6 columns  are recommended)",
+          "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns  are recommended)",
           "values": []
         },
         {
@@ -2559,7 +2559,7 @@
     },
     {
       "name": "ui5-popover",
-      "description": "### Overview\n\nThe `ui5-popover` component displays additional information for an object\nin a compact way and without leaving the page.\nThe Popover can contain various UI elements, such as fields, tables, images, and charts.\nIt can also include actions in the footer.\n\n### Structure\n\nThe popover has three main areas:\n\n- Header (optional)\n- Content\n- Footer (optional)\n\n**Note:** The `ui5-popover` is closed when the user clicks\nor taps outside the popover\nor selects an action within the popover. You can prevent this with the\n`modal` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Popover.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\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 - **header** - Defines the header HTML Element.\n- **footer** - Defines the footer HTML Element.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
+      "description": "### Overview\n\nThe `ui5-popover` component displays additional information for an object\nin a compact way and without leaving the page.\nThe Popover can contain various UI elements, such as fields, tables, images, and charts.\nIt can also include actions in the footer.\n\n### Structure\n\nThe popover has three main areas:\n\n- Header (optional)\n- Content\n- Footer (optional)\n\n**Note:** The `ui5-popover` is closed when the user clicks\nor taps outside the popover\nor selects an action within the popover. You can prevent this with the\n`modal` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Popover.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\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 - **header** - Defines the header HTML Element.\n- **footer** - Defines the footer HTML Element.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
       "attributes": [
         {
           "name": "header-text",
@@ -2660,7 +2660,7 @@
     },
     {
       "name": "popup",
-      "description": "### Overview\nBase class for all popup Web Components.\n\nIf you need to create your own popup-like custom UI5 Web Components.\n\n1. The Popup class handles modality:\n - The \"isModal\" getter can be overridden by derivatives to provide their own conditions when they are modal or not\n - Derivatives may call the \"blockPageScrolling\" and \"unblockPageScrolling\" static methods to temporarily remove scrollbars on the html element\n - Derivatives may call the \"openPopup\" and \"closePopup\" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer\n\n 2. Provides blocking layer (relevant for modal popups only):\n  - Controlled by the \"open\" and \"close\" methods\n\n3. The Popup class \"traps\" focus:\n - Derivatives may call the \"applyInitialFocus\" method (usually when opening, to transfer focus inside the popup)\n\n4. The template of this component exposes two inline partials you can override in derivatives:\n - beforeContent (upper part of the box, useful for header/title/close button)\n - afterContent (lower part, useful for footer/action buttons)\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\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.",
+      "description": "### Overview\nBase class for all popup Web Components.\n\nIf you need to create your own popup-like custom UI5 Web Components.\n\n1. The Popup class handles modality:\n - The \"isModal\" getter can be overridden by derivatives to provide their own conditions when they are modal or not\n - Derivatives may call the \"blockPageScrolling\" and \"unblockPageScrolling\" static methods to temporarily remove scrollbars on the html element\n - Derivatives may call the \"openPopup\" and \"closePopup\" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer\n\n 2. Provides blocking layer (relevant for modal popups only):\n  - Controlled by the \"open\" and \"close\" methods\n\n3. The Popup class \"traps\" focus:\n - Derivatives may call the \"applyInitialFocus\" method (usually when opening, to transfer focus inside the popup)\n\n4. The template of this component exposes two inline partials you can override in derivatives:\n - beforeContent (upper part of the box, useful for header/title/close button)\n - afterContent (lower part, useful for footer/action buttons)\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\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.",
       "attributes": [
         {
           "name": "initial-focus",
@@ -2859,6 +2859,11 @@
           "description": "Enables handle tooltip displaying the current value.",
           "values": []
         },
+        {
+          "name": "editable-tooltip",
+          "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.",
+          "values": []
+        },
         {
           "name": "disabled",
           "description": "Defines whether the slider is in disabled state.",
@@ -2921,7 +2926,7 @@
     },
     {
       "name": "ui5-responsive-popover",
-      "description": "### Overview\nThe `ui5-responsive-popover` acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.\nThe component improves tremendously the user experience on mobile.\n\n### Usage\nUse it when you want to make sure that all the content is visible on any device.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ResponsivePopover.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
+      "description": "### Overview\nThe `ui5-responsive-popover` acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.\nThe component improves tremendously the user experience on mobile.\n\n### Usage\nUse it when you want to make sure that all the content is visible on any device.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ResponsivePopover.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
       "attributes": [
         {
           "name": "header-text",
@@ -3181,6 +3186,11 @@
           "description": "Enables handle tooltip displaying the current value.",
           "values": []
         },
+        {
+          "name": "editable-tooltip",
+          "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.",
+          "values": []
+        },
         {
           "name": "disabled",
           "description": "Defines whether the slider is in disabled state.",
@@ -3233,6 +3243,11 @@
           "description": "Enables handle tooltip displaying the current value.",
           "values": []
         },
+        {
+          "name": "editable-tooltip",
+          "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.",
+          "values": []
+        },
         {
           "name": "disabled",
           "description": "Defines whether the slider is in disabled state.",

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.3.1-rc.0",
+  "version": "2.4.0-rc.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2572,7 +2572,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\n`ui5-dialog` on full screen.\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-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\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 - **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- **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\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer 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\n`ui5-dialog` on full screen.\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-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\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 - **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- **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\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -2655,19 +2655,19 @@
           "events": [
             {
               "name": "before-open",
-              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**"
+              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
             },
             {
               "name": "open",
-              "description": "Fired after the component is opened. **This event does not bubble.**"
+              "description": "Fired after the component is opened."
             },
             {
               "name": "before-close",
-              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**"
+              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
             },
             {
               "name": "close",
-              "description": "Fired after the component is closed. **This event does not bubble.**"
+              "description": "Fired after the component is closed."
             }
           ],
           "js": {
@@ -2738,19 +2738,19 @@
             "events": [
               {
                 "name": "before-open",
-                "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**"
+                "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
               },
               {
                 "name": "open",
-                "description": "Fired after the component is opened. **This event does not bubble.**"
+                "description": "Fired after the component is opened."
               },
               {
                 "name": "before-close",
-                "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**"
+                "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
               },
               {
                 "name": "close",
-                "description": "Fired after the component is closed. **This event does not bubble.**"
+                "description": "Fired after the component is closed."
               }
             ]
           }
@@ -2903,13 +2903,13 @@
         },
         {
           "name": "ui5-form",
-          "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 2)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise  - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";\n---\n\n\n### **Slots:**\n - **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n- **default** - Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\n### **CSS Parts:**\n - **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.\n- **column** - Used to style a single column of the form column layout.",
+          "description": "### Overview\n\nThe Form is a layout component that arranges labels and form fields (like input fields) pairs\ninto a specific number of columns.\n\n**Note:** The Form web component is a layout component, it isn't a replacement for the native `form` HTML element.\nThe Form web component does not provide any APIs for form submission.\n\n### Structure\n\n- **Form** (`ui5-form`) is the top-level container component, responsible for the content layout and responsiveness.\n- **FormGroup** (`ui5-form-group`) enables the grouping of the Form content.\n- **FormItem** (`ui5-form-item`) is a pair of label and form fields and can be used directly in a Form, or as part of a FormGroup.\n\nThe simplest Form (`ui5-form`) consists of a header area on top,\ndisplaying a header text (see the `headingText` property) and content below - an arbitrary number of FormItems (ui5-form-item),\nrepresenting the pairs of label and form fields.\n\nAnd, there is also \"grouping\" available to assist the implementation of richer UIs.\nThis is enabled by the FormGroup (`ui5-form-group`) component.\nIn this case, the Form is structured into FormGroups and each FormGroup consists of FormItems.\n\n### Responsiveness\n\nThe Form component reacts and changes its layout on predefined breakpoints.\nDepending on its size, the Form content (FormGroups and FormItems) gets divided into one or more columns as follows:\n- **S** (< 600px) – 1 column is recommended (default: 1)\n- **M** (600px - 1022px) – up to 2 columns are recommended (default: 1)\n- **L** (1023px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (> 1439px) – up to 6 columns are recommended (default: 3)\n\nTo change the layout, use the `layout` property - f.e. layout=\"S1 M2 L3 XL6\".\n\n### Groups\n\nTo make better use of screen space, there is built-in logic to determine how many columns should a FormGroup occupy.\n\n- **Example #1** (perfect match):\n4 columns and 4 groups: each group will use 1 column.\n\n- **Example #2** (balanced distribution):\n4 columns and 2 groups: each group will use 2 columns.\n6 columns and 2 groups: each group will use 3 columns.\n\n- **Example #3** (unbalanced distribution):\n3 columns and 2 groups: the larger one will use 2 columns, the smaller 1 column.\n5 columns and 3 groups: two of the groups will use 2 columns each, the smallest 1 column.\n\n**Note:** The size of a group element is determined by the number of FormItems assigned to it.\nIn the case of equality, the first in the DOM will use more columns, and the last - fewer columns.\n\n- **Example #4** (more groups than columns):\n3 columns and 4 groups: each FormGroup uses only 1 column, the last FormGroup will wrap on the second row.\n\n### Groups Column Span\n\nTo influence the built-in group distribution, described in the previous section,\nyou can use the FormGroup's `columnSpan` property, that defines how many columns the group should expand to.\n\n### Items Column Span\n\nFormItem's columnSpan property defines how many columns the form item should expand to inside a form group or the form.\n\n### Items Label Span\n\nThe placement of the labels depends on the size of the used column.\nIf there is enough space, the labels are next to their associated fields, otherwise  - above the fields.\nBy default, the labels take 4/12 of the FormItem, leaving 8/12 parts to associated fields.\nYou can control what space the labels should take via the `labelSpan` property.\n\n**For example:** To always place the labels on top set: `labelSpan=\"S12 M12 L12 XL12\"` property.\n\n### ES6 Module Import\n\n- import @ui5/webcomponents/dist/Form.js\";\n- import @ui5/webcomponents/dist/FormGroup.js\";\n- import @ui5/webcomponents/dist/FormItem.js\";\n---\n\n\n### **Slots:**\n - **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n- **default** - Defines the component content - FormGroups or FormItems.\n\n**Note:** Mixing FormGroups and standalone FormItems (not belonging to a group) is not supported.\nEither use FormGroups and make sure all FormItems are part of a FormGroup, or use just FormItems without any FormGroups.\n\n### **CSS Parts:**\n - **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.\n- **column** - Used to style a single column of the form column layout.",
           "doc-url": "",
           "attributes": [
             {
               "name": "layout",
-              "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 2 columns by default (up to 6 columns  are recommended)",
-              "value": { "type": "string", "default": "\"S1 M1 L2 XL2\"" }
+              "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns  are recommended)",
+              "value": { "type": "string", "default": "\"S1 M1 L2 XL3\"" }
             },
             {
               "name": "label-span",
@@ -2945,7 +2945,7 @@
             "properties": [
               {
                 "name": "layout",
-                "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 2 columns by default (up to 6 columns  are recommended)",
+                "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns  are recommended)",
                 "value": { "type": "string" }
               },
               {
@@ -5361,7 +5361,7 @@
         },
         {
           "name": "ui5-popover",
-          "description": "### Overview\n\nThe `ui5-popover` component displays additional information for an object\nin a compact way and without leaving the page.\nThe Popover can contain various UI elements, such as fields, tables, images, and charts.\nIt can also include actions in the footer.\n\n### Structure\n\nThe popover has three main areas:\n\n- Header (optional)\n- Content\n- Footer (optional)\n\n**Note:** The `ui5-popover` is closed when the user clicks\nor taps outside the popover\nor selects an action within the popover. You can prevent this with the\n`modal` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Popover.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\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 - **header** - Defines the header HTML Element.\n- **footer** - Defines the footer HTML Element.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
+          "description": "### Overview\n\nThe `ui5-popover` component displays additional information for an object\nin a compact way and without leaving the page.\nThe Popover can contain various UI elements, such as fields, tables, images, and charts.\nIt can also include actions in the footer.\n\n### Structure\n\nThe popover has three main areas:\n\n- Header (optional)\n- Content\n- Footer (optional)\n\n**Note:** The `ui5-popover` is closed when the user clicks\nor taps outside the popover\nor selects an action within the popover. You can prevent this with the\n`modal` property.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Popover.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\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 - **header** - Defines the header HTML Element.\n- **footer** - Defines the footer HTML Element.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -5465,19 +5465,19 @@
           "events": [
             {
               "name": "before-open",
-              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**"
+              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
             },
             {
               "name": "open",
-              "description": "Fired after the component is opened. **This event does not bubble.**"
+              "description": "Fired after the component is opened."
             },
             {
               "name": "before-close",
-              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**"
+              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
             },
             {
               "name": "close",
-              "description": "Fired after the component is closed. **This event does not bubble.**"
+              "description": "Fired after the component is closed."
             }
           ],
           "js": {
@@ -5567,19 +5567,19 @@
             "events": [
               {
                 "name": "before-open",
-                "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**"
+                "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
               },
               {
                 "name": "open",
-                "description": "Fired after the component is opened. **This event does not bubble.**"
+                "description": "Fired after the component is opened."
               },
               {
                 "name": "before-close",
-                "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**"
+                "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
               },
               {
                 "name": "close",
-                "description": "Fired after the component is closed. **This event does not bubble.**"
+                "description": "Fired after the component is closed."
               }
             ]
           }
@@ -5843,6 +5843,11 @@
               "description": "Enables handle tooltip displaying the current value.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "editable-tooltip",
+              "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "disabled",
               "description": "Defines whether the slider is in disabled state.",
@@ -5911,6 +5916,11 @@
                 "description": "Enables handle tooltip displaying the current value.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "editable-tooltip",
+                "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "disabled",
                 "description": "Defines whether the slider is in disabled state.",
@@ -6039,7 +6049,7 @@
         },
         {
           "name": "ui5-responsive-popover",
-          "description": "### Overview\nThe `ui5-responsive-popover` acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.\nThe component improves tremendously the user experience on mobile.\n\n### Usage\nUse it when you want to make sure that all the content is visible on any device.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ResponsivePopover.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**\n- **open** - Fired after the component is opened. **This event does not bubble.**\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**\n- **close** - Fired after the component is closed. **This event does not bubble.**\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
+          "description": "### Overview\nThe `ui5-responsive-popover` acts as a Popover on desktop and tablet, while on phone it acts as a Dialog.\nThe component improves tremendously the user experience on mobile.\n\n### Usage\nUse it when you want to make sure that all the content is visible on any device.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ResponsivePopover.js\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -6133,19 +6143,19 @@
           "events": [
             {
               "name": "before-open",
-              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**"
+              "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
             },
             {
               "name": "open",
-              "description": "Fired after the component is opened. **This event does not bubble.**"
+              "description": "Fired after the component is opened."
             },
             {
               "name": "before-close",
-              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**"
+              "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
             },
             {
               "name": "close",
-              "description": "Fired after the component is closed. **This event does not bubble.**"
+              "description": "Fired after the component is closed."
             }
           ],
           "js": {
@@ -6235,19 +6245,19 @@
             "events": [
               {
                 "name": "before-open",
-                "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**"
+                "description": "Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening."
               },
               {
                 "name": "open",
-                "description": "Fired after the component is opened. **This event does not bubble.**"
+                "description": "Fired after the component is opened."
               },
               {
                 "name": "before-close",
-                "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. **This event does not bubble.**"
+                "description": "Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing."
               },
               {
                 "name": "close",
-                "description": "Fired after the component is closed. **This event does not bubble.**"
+                "description": "Fired after the component is closed."
               }
             ]
           }
@@ -6594,6 +6604,11 @@
               "description": "Enables handle tooltip displaying the current value.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "editable-tooltip",
+              "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "disabled",
               "description": "Defines whether the slider is in disabled state.",
@@ -6657,6 +6672,11 @@
                 "description": "Enables handle tooltip displaying the current value.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "editable-tooltip",
+                "description": "\nIndicates whether input fields should be used as tooltips for the handles.\n\n**Note:** Setting this option to true will only work if showTooltip is set to true.\n**Note:** In order for the component to comply with the accessibility standard, it is recommended to set the editableTooltip property to true.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "disabled",
                 "description": "Defines whether the slider is in disabled state.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.3.1-rc.0",
+  "version": "2.4.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -50,17 +50,17 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.3.1-rc.0",
-    "@ui5/webcomponents-icons": "2.3.1-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.3.1-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.3.1-rc.0",
-    "@ui5/webcomponents-localization": "2.3.1-rc.0",
-    "@ui5/webcomponents-theming": "2.3.1-rc.0"
+    "@ui5/webcomponents-base": "2.4.0-rc.1",
+    "@ui5/webcomponents-icons": "2.4.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.4.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.4.0-rc.1",
+    "@ui5/webcomponents-localization": "2.4.0-rc.1",
+    "@ui5/webcomponents-theming": "2.4.0-rc.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.3.1-rc.0",
+    "@ui5/webcomponents-tools": "2.4.0-rc.1",
     "chromedriver": "^128.0.3",
     "lit": "^2.0.0"
   },
-  "gitHead": "2857fcf8b4da8ccd7bbfa9dd0b0c2eb4c925cf4f"
+  "gitHead": "478542af62e30ca4df65b0778bcbeab837d583d6"
 }

package/src/Link.hbs

@@ -13,7 +13,6 @@
 	aria-expanded="{{accessibilityAttributes.expanded}}"
 	aria-current="{{accessibilityAttributes.current}}"
 	@focusin={{_onfocusin}}
-	@focusout={{_onfocusout}}
 	@click={{_onclick}}
 	@keydown={{_onkeydown}}
 	@keyup={{_onkeyup}}>

package/src/List.hbs

@@ -19,7 +19,7 @@
 	<ui5-busy-indicator
 		id="{{_id}}-busyIndicator"
 		delay="{{loadingDelay}}"
-		?active="{{loading}}"
+		?active="{{showBusyIndicatorOverlay}}"
 		class="ui5-list-busy-indicator"
 	>
 	<div class="ui5-list-scroll-container">
@@ -96,6 +96,12 @@
 			@mouseup="{{_onLoadMoreMouseup}}"
 			growing-button-inner
 		>
+			{{#if loading}}
+				<ui5-busy-indicator
+					delay="{{loadingDelay}}"
+					active>
+				</ui5-busy-indicator>
+			{{/if}}
 			<span id="{{_id}}-growingButton-text" growing-button-text>{{_growingButtonText}}</span>
 		</div>
 	</div>

package/src/Popup.hbs

@@ -14,7 +14,7 @@
 	@mousedown={{_onmousedown}}
 >
 
-	<span class="first-fe" data-ui5-focus-trap tabindex="0" @focusin={{forwardToLast}}></span>
+	<span class="first-fe" data-ui5-focus-trap role="none" tabindex="0" @focusin={{forwardToLast}}></span>
 
 	{{> beforeContent}}
 
@@ -24,7 +24,7 @@
 
 	{{> afterContent}}
 
-	<span class="last-fe" data-ui5-focus-trap tabindex="0" @focusin={{forwardToFirst}}></span>
+	<span class="last-fe" data-ui5-focus-trap role="none" tabindex="0" @focusin={{forwardToFirst}}></span>
 
 </section>