@ui5/webcomponents 2.4.0-rc.0 → 2.4.0-rc.2

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

@@ -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": []
         },
         {
@@ -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.",
@@ -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.",
@@ -3639,7 +3654,7 @@
       "attributes": [
         {
           "name": "horizontal-align",
-          "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
+          "description": "Determines the horizontal alignment of table cells.\n**Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.",
           "values": [
             { "name": "Start" },
             { "name": "End" },
@@ -3657,7 +3672,7 @@
       "attributes": [
         {
           "name": "horizontal-align",
-          "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
+          "description": "Determines the horizontal alignment of table cells.\n**Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.",
           "values": [
             { "name": "Start" },
             { "name": "End" },
@@ -3717,7 +3732,7 @@
         },
         {
           "name": "horizontal-align",
-          "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
+          "description": "Determines the horizontal alignment of table cells.\n**Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.",
           "values": [
             { "name": "Start" },
             { "name": "End" },

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.4.0-rc.0",
+  "version": "2.4.0-rc.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -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" }
               },
               {
@@ -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.",
@@ -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.",
@@ -7572,7 +7592,7 @@
           "attributes": [
             {
               "name": "horizontal-align",
-              "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
+              "description": "Determines the horizontal alignment of table cells.\n**Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.",
               "value": {
                 "type": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined",
                 "default": "undefined"
@@ -7584,7 +7604,7 @@
             "properties": [
               {
                 "name": "horizontal-align",
-                "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
+                "description": "Determines the horizontal alignment of table cells.\n**Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.",
                 "value": {
                   "type": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
                 }
@@ -7676,7 +7696,7 @@
             },
             {
               "name": "horizontal-align",
-              "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
+              "description": "Determines the horizontal alignment of table cells.\n**Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.",
               "value": {
                 "type": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined",
                 "default": "undefined"
@@ -7708,7 +7728,7 @@
               },
               {
                 "name": "horizontal-align",
-                "description": "Determines the horizontal alignment of table cells.\nNote: All values valid for justify-content can be used not just the ones inside the enum.",
+                "description": "Determines the horizontal alignment of table cells.\n**Note:** All values valid for justify-content can be used, not just the ones inside the enumeration.",
                 "value": {
                   "type": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
                 }

package/package.json

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

package/src/List.hbs

@@ -99,6 +99,7 @@
 			{{#if loading}}
 				<ui5-busy-indicator
 					delay="{{loadingDelay}}"
+					class="ui5-list-growing-button-busy-indicator"
 					active>
 				</ui5-busy-indicator>
 			{{/if}}

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>
 

package/src/RangeSlider.hbs

@@ -1,8 +1,8 @@
 {{>include "./SliderBase.hbs"}}
 
 {{#*inline "handlesAriaText"}}
-	<span id="{{_id}}-startHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.startHandleText}}</span>
-	<span id="{{_id}}-endHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.endHandleText}}</span>
+	<span id="ui5-slider-startHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.startHandleText}}</span>
+	<span id="ui5-slider-endHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.endHandleText}}</span>
 {{/inline}}
 
 {{#*inline "progressBar"}}
@@ -22,56 +22,90 @@
 			aria-valuemax="{{max}}"
 			aria-valuenow="{{_ariaValueNow}}"
 			aria-valuetext="From {{startValue}} to {{endValue}}"
-			aria-labelledby="{{_ariaLabelledByProgressBarRefs}}"
+			aria-labelledby="ui5-slider-sliderDesc"
 			aria-disabled="{{_ariaDisabled}}"
 		></div>
 	</div>
 {{/inline}}
 
 {{#*inline "handles"}}
-	<div class="ui5-slider-handle ui5-slider-handle--start"
-		part="handle"
-		style="{{styles.startHandle}}"
-		@focusin="{{_onfocusin}}"
-		@focusout="{{_onfocusout}}"
-		role="slider"
-		tabindex="{{_tabIndex}}"
-		aria-orientation="horizontal"
-		aria-valuemin="{{min}}"
-		aria-valuemax="{{max}}"
-		aria-valuenow="{{startValue}}"
-		aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
-		aria-disabled="{{_ariaDisabled}}"
-	>
-		<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
+	<div class="ui5-slider-handle-container" style="{{styles.startHandle}}" part="handle-container">
+
+		<div class="ui5-slider-handle ui5-slider-handle--start"
+			part="handle"
+			@focusin="{{_onfocusin}}"
+			@focusout="{{_onfocusout}}"
+			role="slider"
+			tabindex="{{_tabIndex}}"
+			aria-orientation="horizontal"
+			aria-valuemin="{{min}}"
+			aria-valuemax="{{max}}"
+			aria-valuenow="{{startValue}}"
+			aria-labelledby="{{_ariaLabelledByStartHandleText}}"
+			aria-disabled="{{_ariaDisabled}}"
+			aria-describedby="{{_ariaDescribedByHandleText}}"
+			aria-keyshortcuts="F2"
+		>
+			<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
+		</div>
 
 		{{#if showTooltip}}
-			<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
+		<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
+			{{#if editableTooltip}}
+				<ui5-input
+					type="Number"
+					value="{{startValue}}"
+					accessible-name-ref="ui5-slider-InputLabel"
+					@focusout="{{_onInputFocusOut}}"
+					@keydown="{{_onInputKeydown}}"
+					@ui5-change="{{_onInputChange}}"
+					@ui5-input="{{_onInputInput}}"
+					data-sap-ui-start-value
+					tabindex="-1"
+				></ui5-input>
+			{{else}}
 				<span class="ui5-slider-tooltip-value">{{tooltipStartValue}}</span>
-			</div>
+			{{/if}}
+		</div>
 		{{/if}}
 	</div>
-
-	<div class="ui5-slider-handle ui5-slider-handle--end"
-		part="handle"
-		style="{{styles.endHandle}}"
-		@focusin="{{_onfocusin}}"
-		@focusout="{{_onfocusout}}"
-		role="slider"
-		tabindex="{{_tabIndex}}"
-		aria-orientation="horizontal"
-		aria-valuemin="{{min}}"
-		aria-valuemax="{{max}}"
-		aria-valuenow="{{endValue}}"
-		aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
-		aria-disabled="{{_ariaDisabled}}"
-	>
-		<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
+	<div class="ui5-slider-handle-container" style="{{styles.endHandle}}" part="handle-container">
+		<div class="ui5-slider-handle ui5-slider-handle--end"
+			part="handle"
+			@focusin="{{_onfocusin}}"
+			@focusout="{{_onfocusout}}"
+			role="slider"
+			tabindex="{{_tabIndex}}"
+			aria-orientation="horizontal"
+			aria-valuemin="{{min}}"
+			aria-valuemax="{{max}}"
+			aria-valuenow="{{endValue}}"
+			aria-labelledby="{{_ariaLabelledByEndHandleText}}"
+			aria-describedby="{{_ariaDescribedByHandleText}}"
+			aria-disabled="{{_ariaDisabled}}"
+			aria-keyshortcuts="F2"
+		>
+			<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
+		</div>
 
 		{{#if showTooltip}}
-			<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">
+		<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">
+			{{#if editableTooltip}}
+				<ui5-input
+					type="Number"
+					value="{{endValue}}"
+					accessible-name-ref="ui5-slider-InputLabel"
+					@focusout="{{_onInputFocusOut}}"
+					@keydown="{{_onInputKeydown}}"
+					@ui5-change="{{_onInputChange}}"
+					@ui5-input="{{_onInputInput}}"
+					data-sap-ui-end-value
+					tabindex="-1"
+				></ui5-input>
+			{{else}}
 				<span class="ui5-slider-tooltip-value">{{tooltipEndValue}}</span>
-			</div>
+			{{/if}}
+		</div>
 		{{/if}}
 	</div>
 {{/inline}}

package/src/Slider.hbs

@@ -17,26 +17,45 @@
 {{/inline}}
 
 {{#*inline "handles"}}
-	<div class="ui5-slider-handle"
-		style="{{styles.handle}}"
-		@focusout="{{_onfocusout}}"
-		@focusin="{{_onfocusin}}"
-		role="slider"
-		tabindex="{{_tabIndex}}"
-		aria-orientation="horizontal"
-		aria-valuemin="{{min}}"
-		aria-valuemax="{{max}}"
-		aria-valuenow="{{value}}"
-		aria-labelledby="{{_ariaLabelledByHandleRefs}}"
-		aria-disabled="{{_ariaDisabled}}"
-		data-sap-focus-ref
-		part="handle"
-	>
-			<ui5-icon mode="Decorative" name="direction-arrows" part="icon-slider" slider-icon></ui5-icon>
+	<div class="ui5-slider-handle-container" style="{{styles.handle}}" part="handle-container">
+		<div class="ui5-slider-handle"
+			@focusout="{{_onfocusout}}"
+			@focusin="{{_onfocusin}}"
+			role="slider"
+			tabindex="{{_tabIndex}}"
+			aria-orientation="horizontal"
+			aria-valuemin="{{min}}"
+			aria-valuemax="{{max}}"
+			aria-valuenow="{{value}}"
+			aria-labelledby="{{_ariaLabelledByHandleText}}"
+			aria-disabled="{{_ariaDisabled}}"
+			aria-keyshortcuts="F2"
+			aria-describedby="{{_ariaDescribedByHandleText}}"
+
+			data-sap-focus-ref
+			part="handle"
+		>
+				<ui5-icon name="direction-arrows" mode="Decorative" part="icon-slider" slider-icon></ui5-icon>
+		</div>
 		{{#if showTooltip}}
-			<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
+		<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
+			{{#if editableTooltip}}
+				<ui5-input
+					value="{{_tooltipInputValue}}"
+					value-state="{{_tooltipInputValueState}}"
+					type="Number"
+					accessible-name-ref="ui5-slider-InputLabel"
+					@focusout="{{_onInputFocusOut}}"
+					@keydown="{{_onInputKeydown}}"
+					@ui5-change="{{_onInputChange}}"
+					@ui5-input="{{_onInputInput}}"
+					data-sap-ui-end-value
+					tabindex="-1"
+				></ui5-input>
+			{{else}}
 				<span class="ui5-slider-tooltip-value">{{tooltipValue}}</span>
-			</div>
+			{{/if}}
+		</div>
 		{{/if}}
 	</div>
 {{/inline}}

package/src/SliderBase.hbs

@@ -5,7 +5,7 @@
 	@mouseover="{{_onmouseover}}"
 	@mouseout="{{_onmouseout}}"
 	@keydown="{{_onkeydown}}"
-	@keyup="{{_onkeyup}}"
+	@keyup="{{_onKeyupBase}}"
 	part="root-container"
 >
 	{{> handlesAriaText}}
@@ -37,11 +37,20 @@
 		{{> handles}}
 	</div>
 
-	<span id="{{_id}}-accName" class="ui5-hidden-text">{{accessibleName}}</span>
-	<span id="{{_id}}-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
+	{{#if accessibleName}}
+		<span id="ui5-slider-accName" class="ui5-hidden-text">{{accessibleName}}</span>
+	{{/if}}
+
+	<span id="ui5-slider-sliderDesc" class="ui5-hidden-text">{{_ariaLabelledByText}}</span>
+
+	{{#if editableTooltip}}
+		<span id="ui5-slider-InputDesc" class="ui5-hidden-text">{{_ariaDescribedByInputText}}</span>
+		<span id="ui5-slider-InputLabel" class="ui5-hidden-text">{{_ariaLabelledByInputText}}</span>
+	{{/if}}
+
 </div>
 
 
 {{#*inline "handlesAriaText"}}{{/inline}}
 {{#*inline "progressBar"}}{{/inline}}
-{{#*inline "handles"}}{{/inline}}
+{{#*inline "handles"}}{{/inline}}

package/src/i18n/messagebundle.properties

@@ -498,6 +498,12 @@ MONTH_PICKER_DESCRIPTION = Month Picker
 #XACT: ARIA description for year picker
 YEAR_PICKER_DESCRIPTION = Year Picker
 
+#XACT: ARIA description for slider tooltip input
+SLIDER_TOOLTIP_INPUT_DESCRIPTION = Press F2 to enter a value
+
+#XACT: ARIA label for slider tooltip input
+SLIDER_TOOLTIP_INPUT_LABEL = Current Value
+
 #XTOL: tooltip for decrease button of the StepInput
 STEPINPUT_DEC_ICON_TITLE=Decrease
 

package/src/i18n/messagebundle_ar.properties

@@ -332,6 +332,10 @@ MONTH_PICKER_DESCRIPTION=أداة انتقاء الشهر
 
 YEAR_PICKER_DESCRIPTION=أداة انتقاء السنة
 
+SLIDER_TOOLTIP_INPUT_DESCRIPTION=اضغط على F2 لإدخال قيمة.
+
+SLIDER_TOOLTIP_INPUT_LABEL=القيمة الحالية
+
 STEPINPUT_DEC_ICON_TITLE=تخفيض
 
 STEPINPUT_INC_ICON_TITLE=زيادة

package/src/i18n/messagebundle_bg.properties

@@ -332,6 +332,10 @@ MONTH_PICKER_DESCRIPTION=Избор на месец
 
 YEAR_PICKER_DESCRIPTION=Избор на година
 
+SLIDER_TOOLTIP_INPUT_DESCRIPTION=Натиснете F2, за да въведете стойност
+
+SLIDER_TOOLTIP_INPUT_LABEL=Текуща стойност
+
 STEPINPUT_DEC_ICON_TITLE=Намаляване
 
 STEPINPUT_INC_ICON_TITLE=Увеличаване

package/src/i18n/messagebundle_ca.properties

@@ -332,6 +332,10 @@ MONTH_PICKER_DESCRIPTION=Selector de mes
 
 YEAR_PICKER_DESCRIPTION=Selector d''any
 
+SLIDER_TOOLTIP_INPUT_DESCRIPTION=Prémer F2 per introduir un valor
+
+SLIDER_TOOLTIP_INPUT_LABEL=Valor actual
+
 STEPINPUT_DEC_ICON_TITLE=Reduir
 
 STEPINPUT_INC_ICON_TITLE=Ampliar

package/src/i18n/messagebundle_cnr.properties

@@ -332,6 +332,10 @@ MONTH_PICKER_DESCRIPTION=Odabir mjeseca
 
 YEAR_PICKER_DESCRIPTION=Odabir godine
 
+SLIDER_TOOLTIP_INPUT_DESCRIPTION=Pritisnite F2 da biste unijeli vrijednost
+
+SLIDER_TOOLTIP_INPUT_LABEL=Trenutna vrijednost
+
 STEPINPUT_DEC_ICON_TITLE=Smanji
 
 STEPINPUT_INC_ICON_TITLE=Povećaj

package/src/i18n/messagebundle_cs.properties

@@ -332,6 +332,10 @@ MONTH_PICKER_DESCRIPTION=Volič měsíce
 
 YEAR_PICKER_DESCRIPTION=Volič roku
 
+SLIDER_TOOLTIP_INPUT_DESCRIPTION=Stiskněte F2 pro zadání hodnoty
+
+SLIDER_TOOLTIP_INPUT_LABEL=Aktuální hodnota
+
 STEPINPUT_DEC_ICON_TITLE=Zmenšení
 
 STEPINPUT_INC_ICON_TITLE=Zvětšení

package/src/i18n/messagebundle_cy.properties

@@ -332,6 +332,10 @@ MONTH_PICKER_DESCRIPTION=Dewiswr Mis
 
 YEAR_PICKER_DESCRIPTION=Dewiswr Blwyddyn
 
+SLIDER_TOOLTIP_INPUT_DESCRIPTION=Pwyswch F2 i roi gwerth
+
+SLIDER_TOOLTIP_INPUT_LABEL=Gwerth Cyfredol
+
 STEPINPUT_DEC_ICON_TITLE=Lleihau
 
 STEPINPUT_INC_ICON_TITLE=Cynyddu

package/src/i18n/messagebundle_da.properties

@@ -332,6 +332,10 @@ MONTH_PICKER_DESCRIPTION=Månedsselektion
 
 YEAR_PICKER_DESCRIPTION=Årsselektion
 
+SLIDER_TOOLTIP_INPUT_DESCRIPTION=Tryk på F2 for at indtaste en værdi
+
+SLIDER_TOOLTIP_INPUT_LABEL=Aktuel værdi
+
 STEPINPUT_DEC_ICON_TITLE=Formindsk
 
 STEPINPUT_INC_ICON_TITLE=Forstør