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

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.",

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.1",
   "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.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.4.0-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.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.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.4.0-rc.0",
+    "@ui5/webcomponents-tools": "2.4.0-rc.1",
     "chromedriver": "^128.0.3",
     "lit": "^2.0.0"
   },
-  "gitHead": "464fc0e663f3e1142cdbba076cad777cf6ab2738"
+  "gitHead": "478542af62e30ca4df65b0778bcbeab837d583d6"
 }

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,88 @@
 			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="ui5-slider-startHandleDesc"
+			aria-disabled="{{_ariaDisabled}}"
+			.aria-describedby="{{_ariaDescribedByHandleText}}"
+		>
+			<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="ui5-slider-endHandleDesc"
+			.aria-describedby="{{_ariaDescribedByHandleText}}"
+			aria-disabled="{{_ariaDisabled}}"
+		>
+			<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}} ui5-sliderDesc"
+			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/themes/ColorPicker.css

@@ -62,9 +62,17 @@
     width: 0.9375rem;
     height: 1.5rem;
     background: transparent;
+    box-sizing: border-box;
+}
+
+[ui5-slider]::part(handle-container) {
     margin-inline-start: -2px;
     margin-top: var(--_ui5_color_picker_slider_handle_margin_top);
-    box-sizing: border-box;
+}
+
+[ui5-slider]::part(handle-container):focus-within {
+    margin-inline-start: unset;
+    margin-top: unset;
 }
 
 [ui5-slider]::part(handle)::after {

package/src/themes/Form.css

@@ -15,10 +15,11 @@
 
 .ui5-form-header {
 	display: flex;
-	height: 2.75rem;
+	min-height: 2.75rem;
 	align-items: center;
 	border-bottom: 1px solid var(--sapGroup_TitleBorderColor);
-	padding: 0 1rem 0 1rem;
+	padding: 0.875rem 1rem;
+	box-sizing: border-box;
 }
 
 .ui5-form-layout {

package/src/themes/FormLayout.css

@@ -1,6 +1,6 @@
 /* 
 * The Form layout is divided into one or more columns. 
-* XL - max. 4 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column.
+* XL - max. 6 columns, L - max. 3 columns, M - max. 2 columns and S - 1 column.
 */
 /* 
 * S max-width: 600px - container padding 24px
@@ -76,10 +76,10 @@
 	}
 }
 
-/* XL - 2 columns by default, up to 6 */
+/* XL - 3 columns by default, up to 6 */
 @container (min-width: 1441px) {
 	.ui5-form-layout {
-		grid-template-columns: repeat(2, 1fr);
+		grid-template-columns: repeat(3, 1fr);
 	}
 
 	:host([columns-xl="1"]) .ui5-form-layout {

package/src/themes/ListItemBase.css

@@ -15,7 +15,7 @@
 }
 
 /* actionable (type="Active" + desktop) */
-:host([actionable]:not([disabled]):not(ui5-li-group-header)) {
+:host([actionable]:not([disabled]):not([ui5-li-group-header])) {
 	cursor: pointer;
 }
 
@@ -30,7 +30,7 @@
 }
 
 /* hovered */
-:host([actionable]:not([active]):not([selected]):not(ui5-li-group-header):hover) {
+:host([actionable]:not([active]):not([selected]):not([ui5-li-group-header]):hover) {
     background-color: var(--sapList_Hover_Background);
 }
 

package/src/themes/SliderBase.css

@@ -100,9 +100,7 @@
 	background: var(--_ui5_slider_handle_background);
 	border: var(--_ui5_slider_handle_border);
 	border-radius: var(--_ui5_slider_handle_border_radius);
-	margin-inline-start: calc(-1 * var(--_ui5_slider_handle_width) / 2);
-	top: var(--_ui5_slider_handle_top);
-	position: absolute;
+	position: relative;
 	outline: none;
 	height: var(--_ui5_slider_handle_height);
 	width: var(--_ui5_slider_handle_width);
@@ -148,13 +146,18 @@
 	border: var(--_ui5_slider_handle_focus_border);
 }
 
-.ui5-slider-tooltip {
+.ui5-slider-handle-container {
+	position: absolute;
+	margin-inline-start: calc(-1 * var(--_ui5_slider_handle_width) / 2);
+	top: var(--_ui5_slider_handle_top);
+}
+
+:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip {
 	display: flex;
+	font-family: var(--sapFontFamily);
 	justify-content: center;
 	align-items: center;
 	visibility: hidden;
-	pointer-events: none;
-	line-height: 1rem;
 	position: absolute;
 	left: 50%;
 	transform: translate(-50%);
@@ -171,6 +174,22 @@
 	box-sizing: var(--_ui5_slider_tooltip_border_box);
 }
 
+:host(:not([hidden])):host([editable-tooltip]) .ui5-slider-handle-container .ui5-slider-tooltip {
+	border: none;
+	background: none;
+	box-shadow: none;
+}
+
+:host([editable-tooltip]) .ui5-slider-tooltip {
+	padding: 0;
+	box-shadow: none;
+}
+
+.ui5-slider-tooltip [ui5-input] {
+	width: 100%;
+	text-align: center;
+}
+
 .ui5-slider-tooltip-value {
 	position: relative;
 	display: flex;
@@ -195,6 +214,7 @@
 	text-align: center;
 	display: inline-block;
 	color: var(--_ui5_slider_label_color);
+	font-family: var(--sapFontFamily);
 	font-size: var(--_ui5_slider_label_fontsize);
 	padding-top: 0;
 	box-sizing: border-box;
@@ -236,4 +256,4 @@
 	position: absolute;
 	border-radius: var(--_ui5_slider_handle_border_radius);
 	pointer-events: none;
-}
+}

package/src/themes/base/sizes-parameters.css

@@ -344,7 +344,7 @@
 
 	/* Slider */
 	--_ui5_slider_handle_height: 1.25rem;
-	--_ui5_slider_handle_width: 1.25rem;
+	--_ui5_slider_handle_width: 1.5rem;
 	--_ui5_slider_handle_top: -.5rem;
 	--_ui5_slider_tooltip_height: 1rem;
 	--_ui5_slider_tooltip_padding: 0.25rem;

package/src/themes/sap_fiori_3/SliderBase-parameters.css

@@ -15,3 +15,10 @@
 	--_ui5_slider_handle_box_sizing: border-box;
 	--_ui5_slider_tickmark_top: -.34375rem;
 }
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+--_ui5_slider_handle_width: 1.25rem;
+--_ui5_slider_handle_height: 1.25rem;
+}

package/src/themes/sap_fiori_3/sizes-parameters.css

@@ -15,4 +15,8 @@
 
 	/* Timeline Group Item */
 	--_ui5_timeline_tlgi_root_horizontal_height: 20.90625rem;
+
+	/* Slider, Range Slider */
+	--_ui5_slider_handle_width: 1.25rem;
+	--_ui5_slider_handle_height: 1.25rem;
 }