@ui5/webcomponents 2.3.0-rc.2 → 2.3.0

package/dist/custom-elements-internal.json

@@ -2887,6 +2887,70 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/types/TableCellHorizontalAlign.js",
+      "declarations": [
+        {
+          "kind": "enum",
+          "name": "TableCellHorizontalAlign",
+          "description": "Alignment of the <ui5-table-cell> component.",
+          "_ui5privacy": "public",
+          "members": [
+            {
+              "kind": "field",
+              "static": true,
+              "privacy": "public",
+              "default": "Left",
+              "name": "Left",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "static": true,
+              "privacy": "public",
+              "default": "Start",
+              "name": "Start",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "static": true,
+              "privacy": "public",
+              "default": "Right",
+              "name": "Right",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "static": true,
+              "privacy": "public",
+              "default": "End",
+              "name": "End",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "static": true,
+              "privacy": "public",
+              "default": "Center",
+              "name": "Center",
+              "readonly": true
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TableCellHorizontalAlign",
+            "module": "dist/types/TableCellHorizontalAlign.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/types/TableGrowingMode.js",
@@ -6292,7 +6356,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on mobile - the user can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`",
+          "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`",
           "name": "Carousel",
           "cssParts": [
             {
@@ -6361,7 +6425,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.\n\n**Note:** The navigation arrows are never displayed on touch devices.\nIn this case, the user can swipe to navigate through the items.",
+              "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.\n\n**Note:** The navigation arrows are always displayed on touch devices.",
               "privacy": "public",
               "_ui5since": "1.0.0-rc.15"
             },
@@ -6566,7 +6630,7 @@
               }
             },
             {
-              "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.\n\n**Note:** The navigation arrows are never displayed on touch devices.\nIn this case, the user can swipe to navigate through the items.",
+              "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.\n\n**Note:** The navigation arrows are always displayed on touch devices.",
               "name": "hide-navigation-arrows",
               "default": "false",
               "fieldName": "hideNavigationArrows",
@@ -11307,7 +11371,7 @@
         },
         {
           "kind": "class",
-          "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### 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\";",
+          "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\";",
           "name": "Form",
           "cssParts": [
             {
@@ -12121,7 +12185,8 @@
               "type": {
                 "text": "CustomEvent"
               },
-              "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected."
+              "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.",
+              "_ui5allowPreventDefault": true
             },
             {
               "name": "select",
@@ -16582,6 +16647,7 @@
                 "text": "CustomEvent"
               },
               "description": "Fired when the value of the component changes at each keystroke,\nand when a suggestion item has been selected.",
+              "_ui5allowPreventDefault": true,
               "inheritedFrom": {
                 "name": "Input",
                 "module": "dist/Input.js"
@@ -23312,7 +23378,7 @@
           },
           "tagName": "ui5-table",
           "customElement": true,
-          "_ui5experimental": "This Table web component is available since 2.0 and has been newly implemented to provide better screen reader and keyboard handling support.\nCurrently, it's considered experimental as its API is subject to change.\nThis Table replaces the previous Table web component, that has been part of **@ui5/webcomponents** version 1.x.\nFor compatibility reasons, we moved the previous Table implementation to the **@ui5/webcomponents-compat** package\nand will be maintained until the new Table is experimental.",
+          "_ui5experimental": "This Table web component is available since 2.0 and has been newly implemented to provide better screen reader and keyboard handling support.\nCurrently, it's considered experimental as its API is subject to change.\nThis Table replaces the previous Table web component, that has been part of **@ui5/webcomponents** version 1.x.\nFor compatibility reasons, we moved the previous Table implementation to the **@ui5/webcomponents-compat** package\nand will be maintained until the new Table is experimental.\nKeep in mind that you can use either the compat/Table, or the main/Table - you can't use them both as they both define the `ui5-table` tag name.",
           "_ui5since": "2.0.0",
           "_ui5privacy": "public"
         }
@@ -23353,7 +23419,45 @@
           "customElement": true,
           "_ui5experimental": "This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.",
           "_ui5since": "2.0.0",
-          "_ui5privacy": "public"
+          "_ui5privacy": "public",
+          "attributes": [
+            {
+              "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.",
+              "name": "horizontal-align",
+              "default": "undefined",
+              "fieldName": "horizontalAlign",
+              "type": {
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
+              },
+              "inheritedFrom": {
+                "name": "TableCellBase",
+                "module": "dist/TableCellBase.js"
+              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "horizontalAlign",
+              "type": {
+                "text": "TableCellHorizontalAlign | undefined",
+                "references": [
+                  {
+                    "name": "TableCellHorizontalAlign",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/TableCellHorizontalAlign.js"
+                  }
+                ]
+              },
+              "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.",
+              "default": "undefined",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "TableCellBase",
+                "module": "dist/TableCellBase.js"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -23394,6 +23498,36 @@
               "_ui5privacy": "public"
             }
           ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "horizontalAlign",
+              "type": {
+                "text": "TableCellHorizontalAlign | undefined",
+                "references": [
+                  {
+                    "name": "TableCellHorizontalAlign",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/TableCellHorizontalAlign.js"
+                  }
+                ]
+              },
+              "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.",
+              "default": "undefined",
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "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.",
+              "name": "horizontal-align",
+              "default": "undefined",
+              "fieldName": "horizontalAlign",
+              "type": {
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
+              }
+            }
+          ],
           "superclass": {
             "name": "UI5Element",
             "package": "@ui5/webcomponents-base",
@@ -23596,6 +23730,27 @@
               "default": "0",
               "description": "Defines the importance of the column.\n\nThis property affects the popin behaviour.\nColumns with higher importance will move into the popin area later then less important\ncolumns.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "horizontalAlign",
+              "type": {
+                "text": "TableCellHorizontalAlign | undefined",
+                "references": [
+                  {
+                    "name": "TableCellHorizontalAlign",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/TableCellHorizontalAlign.js"
+                  }
+                ]
+              },
+              "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.",
+              "default": "undefined",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "TableCellBase",
+                "module": "dist/TableCellBase.js"
+              }
             }
           ],
           "attributes": [
@@ -23634,6 +23789,19 @@
               "type": {
                 "text": "number"
               }
+            },
+            {
+              "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.",
+              "name": "horizontal-align",
+              "default": "undefined",
+              "fieldName": "horizontalAlign",
+              "type": {
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
+              },
+              "inheritedFrom": {
+                "name": "TableCellBase",
+                "module": "dist/TableCellBase.js"
+              }
             }
           ],
           "superclass": {

package/dist/custom-elements.json

@@ -770,6 +770,21 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/types/TableCellHorizontalAlign.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TableCellHorizontalAlign",
+            "module": "dist/types/TableCellHorizontalAlign.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/types/TableGrowingMode.js",
@@ -3356,7 +3371,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on mobile - the user can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`",
+          "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`",
           "name": "Carousel",
           "cssParts": [
             {
@@ -3418,7 +3433,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.\n\n**Note:** The navigation arrows are never displayed on touch devices.\nIn this case, the user can swipe to navigate through the items.",
+              "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.\n\n**Note:** The navigation arrows are always displayed on touch devices.",
               "privacy": "public"
             },
             {
@@ -3602,7 +3617,7 @@
               }
             },
             {
-              "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.\n\n**Note:** The navigation arrows are never displayed on touch devices.\nIn this case, the user can swipe to navigate through the items.",
+              "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.\n\n**Note:** The navigation arrows are always displayed on touch devices.",
               "name": "hide-navigation-arrows",
               "default": "false",
               "fieldName": "hideNavigationArrows",
@@ -7835,7 +7850,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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### 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\";",
+          "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\";",
           "name": "Form",
           "cssParts": [
             {
@@ -18464,7 +18479,45 @@
             "module": "dist/TableCellBase.js"
           },
           "tagName": "ui5-table-cell",
-          "customElement": true
+          "customElement": true,
+          "attributes": [
+            {
+              "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.",
+              "name": "horizontal-align",
+              "default": "undefined",
+              "fieldName": "horizontalAlign",
+              "type": {
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
+              },
+              "inheritedFrom": {
+                "name": "TableCellBase",
+                "module": "dist/TableCellBase.js"
+              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "horizontalAlign",
+              "type": {
+                "text": "TableCellHorizontalAlign | undefined",
+                "references": [
+                  {
+                    "name": "TableCellHorizontalAlign",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/TableCellHorizontalAlign.js"
+                  }
+                ]
+              },
+              "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.",
+              "default": "undefined",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "TableCellBase",
+                "module": "dist/TableCellBase.js"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -18500,6 +18553,36 @@
               "description": "Defines the content of the component."
             }
           ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "horizontalAlign",
+              "type": {
+                "text": "TableCellHorizontalAlign | undefined",
+                "references": [
+                  {
+                    "name": "TableCellHorizontalAlign",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/TableCellHorizontalAlign.js"
+                  }
+                ]
+              },
+              "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.",
+              "default": "undefined",
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "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.",
+              "name": "horizontal-align",
+              "default": "undefined",
+              "fieldName": "horizontalAlign",
+              "type": {
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
+              }
+            }
+          ],
           "superclass": {
             "name": "UI5Element",
             "package": "@ui5/webcomponents-base",
@@ -18695,6 +18778,27 @@
               "default": "0",
               "description": "Defines the importance of the column.\n\nThis property affects the popin behaviour.\nColumns with higher importance will move into the popin area later then less important\ncolumns.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "horizontalAlign",
+              "type": {
+                "text": "TableCellHorizontalAlign | undefined",
+                "references": [
+                  {
+                    "name": "TableCellHorizontalAlign",
+                    "package": "@ui5/webcomponents",
+                    "module": "dist/types/TableCellHorizontalAlign.js"
+                  }
+                ]
+              },
+              "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.",
+              "default": "undefined",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "TableCellBase",
+                "module": "dist/TableCellBase.js"
+              }
             }
           ],
           "attributes": [
@@ -18733,6 +18837,19 @@
               "type": {
                 "text": "number"
               }
+            },
+            {
+              "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.",
+              "name": "horizontal-align",
+              "default": "undefined",
+              "fieldName": "horizontalAlign",
+              "type": {
+                "text": "\"Start\" | \"End\" | \"Center\" | \"Left\" | \"Right\" | undefined"
+              },
+              "inheritedFrom": {
+                "name": "TableCellBase",
+                "module": "dist/TableCellBase.js"
+              }
             }
           ],
           "superclass": {

package/dist/features/ColorPaletteMoreColors.d.ts

@@ -6,7 +6,6 @@ import ColorPicker from "../ColorPicker.js";
 declare class ColorPaletteMoreColors extends ComponentFeature {
     static get dependencies(): (typeof Button | typeof Dialog | typeof ColorPicker)[];
     static i18nBundle: I18nBundle;
-    static define(): Promise<void>;
     get colorPaletteDialogTitle(): string;
     get colorPaletteDialogOKButton(): string;
     get colorPaletteCancelButton(): string;

package/dist/features/ColorPaletteMoreColors.js

@@ -1,5 +1,4 @@
 import { ComponentFeature, registerComponentFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Dialog from "../Dialog.js";
 import Button from "../Button.js";
 import ColorPicker from "../ColorPicker.js";
@@ -12,9 +11,6 @@ class ColorPaletteMoreColors extends ComponentFeature {
             ColorPicker,
         ];
     }
-    static async define() {
-        ColorPaletteMoreColors.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-    }
     get colorPaletteDialogTitle() {
         return ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_TITLE);
     }

package/dist/features/ColorPaletteMoreColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPaletteMoreColors.js","sourceRoot":"","sources":["../../src/features/ColorPaletteMoreColors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,kDAAkD,CAAC;AAC9G,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAG3E,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAE5C,OAAO,EACN,kCAAkC,EAClC,8BAA8B,EAC9B,0BAA0B,GAC1B,MAAM,oCAAoC,CAAC;AAE5C,MAAM,sBAAuB,SAAQ,gBAAgB;IACpD,MAAM,KAAK,YAAY;QACtB,OAAO;YACN,MAAM;YACN,MAAM;YACN,WAAW;SACX,CAAC;IACH,CAAC;IAID,MAAM,CAAC,KAAK,CAAC,MAAM;QAClB,sBAAsB,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,oBAAoB,CAAC,CAAC;IAC/E,CAAC;IAED,IAAI,uBAAuB;QAC1B,OAAO,sBAAsB,CAAC,UAAU,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;IAC9E,CAAC;IAED,IAAI,0BAA0B;QAC7B,OAAO,sBAAsB,CAAC,UAAU,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAAC;IAClF,CAAC;IAED,IAAI,wBAAwB;QAC3B,OAAO,sBAAsB,CAAC,UAAU,CAAC,OAAO,CAAC,kCAAkC,CAAC,CAAC;IACtF,CAAC;CACD;AAED,wBAAwB,CAAC,wBAAwB,EAAE,sBAAsB,CAAC,CAAC;AAE3E,eAAe,sBAAsB,CAAC","sourcesContent":["import { ComponentFeature, registerComponentFeature } from \"@ui5/webcomponents-base/dist/FeaturesRegistry.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n\nimport Dialog from \"../Dialog.js\";\nimport Button from \"../Button.js\";\nimport ColorPicker from \"../ColorPicker.js\";\n\nimport {\n\tCOLOR_PALETTE_DIALOG_CANCEL_BUTTON,\n\tCOLOR_PALETTE_DIALOG_OK_BUTTON,\n\tCOLOR_PALETTE_DIALOG_TITLE,\n} from \"../generated/i18n/i18n-defaults.js\";\n\nclass ColorPaletteMoreColors extends ComponentFeature {\n\tstatic get dependencies() {\n\t\treturn [\n\t\t\tDialog,\n\t\t\tButton,\n\t\t\tColorPicker,\n\t\t];\n\t}\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async define() {\n\t\tColorPaletteMoreColors.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\tget colorPaletteDialogTitle() {\n\t\treturn ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_TITLE);\n\t}\n\n\tget colorPaletteDialogOKButton() {\n\t\treturn ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_OK_BUTTON);\n\t}\n\n\tget colorPaletteCancelButton() {\n\t\treturn ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);\n\t}\n}\n\nregisterComponentFeature(\"ColorPaletteMoreColors\", ColorPaletteMoreColors);\n\nexport default ColorPaletteMoreColors;\n"]}
+{"version":3,"file":"ColorPaletteMoreColors.js","sourceRoot":"","sources":["../../src/features/ColorPaletteMoreColors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,kDAAkD,CAAC;AAG9G,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAE5C,OAAO,EACN,kCAAkC,EAClC,8BAA8B,EAC9B,0BAA0B,GAC1B,MAAM,oCAAoC,CAAC;AAE5C,MAAM,sBAAuB,SAAQ,gBAAgB;IACpD,MAAM,KAAK,YAAY;QACtB,OAAO;YACN,MAAM;YACN,MAAM;YACN,WAAW;SACX,CAAC;IACH,CAAC;IAID,IAAI,uBAAuB;QAC1B,OAAO,sBAAsB,CAAC,UAAU,CAAC,OAAO,CAAC,0BAA0B,CAAC,CAAC;IAC9E,CAAC;IAED,IAAI,0BAA0B;QAC7B,OAAO,sBAAsB,CAAC,UAAU,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAAC;IAClF,CAAC;IAED,IAAI,wBAAwB;QAC3B,OAAO,sBAAsB,CAAC,UAAU,CAAC,OAAO,CAAC,kCAAkC,CAAC,CAAC;IACtF,CAAC;CACD;AAED,wBAAwB,CAAC,wBAAwB,EAAE,sBAAsB,CAAC,CAAC;AAE3E,eAAe,sBAAsB,CAAC","sourcesContent":["import { ComponentFeature, registerComponentFeature } from \"@ui5/webcomponents-base/dist/FeaturesRegistry.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\n\nimport Dialog from \"../Dialog.js\";\nimport Button from \"../Button.js\";\nimport ColorPicker from \"../ColorPicker.js\";\n\nimport {\n\tCOLOR_PALETTE_DIALOG_CANCEL_BUTTON,\n\tCOLOR_PALETTE_DIALOG_OK_BUTTON,\n\tCOLOR_PALETTE_DIALOG_TITLE,\n} from \"../generated/i18n/i18n-defaults.js\";\n\nclass ColorPaletteMoreColors extends ComponentFeature {\n\tstatic get dependencies() {\n\t\treturn [\n\t\t\tDialog,\n\t\t\tButton,\n\t\t\tColorPicker,\n\t\t];\n\t}\n\n\tstatic i18nBundle: I18nBundle;\n\n\tget colorPaletteDialogTitle() {\n\t\treturn ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_TITLE);\n\t}\n\n\tget colorPaletteDialogOKButton() {\n\t\treturn ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_OK_BUTTON);\n\t}\n\n\tget colorPaletteCancelButton() {\n\t\treturn ColorPaletteMoreColors.i18nBundle.getText(COLOR_PALETTE_DIALOG_CANCEL_BUTTON);\n\t}\n}\n\nregisterComponentFeature(\"ColorPaletteMoreColors\", ColorPaletteMoreColors);\n\nexport default ColorPaletteMoreColors;\n"]}

package/dist/features/InputSuggestions.d.ts

@@ -98,7 +98,6 @@ declare class Suggestions extends ComponentFeature {
     _clearValueStateFocus(): void;
     _clearSelectedSuggestionAndaccInfo(): void;
     static get dependencies(): (typeof Button | typeof Icon | typeof List | typeof SuggestionItem | typeof SuggestionItemGroup)[];
-    static define(): Promise<void>;
 }
 export default Suggestions;
 export type { SuggestionComponent, };

package/dist/features/InputSuggestions.js

@@ -1,5 +1,4 @@
 import { ComponentFeature, registerComponentFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import generateHighlightedMarkup from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js";
 import List from "../List.js";
 import SuggestionItem from "../SuggestionItem.js";
@@ -321,7 +320,12 @@ class Suggestions extends ComponentFeature {
         const rectItem = item.getDomRef().getBoundingClientRect();
         const rectInput = this._getComponent().getDomRef().getBoundingClientRect();
         const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
-        return (rectItem.top + Suggestions.SCROLL_STEP <= windowHeight) && (rectItem.top >= rectInput.top);
+        let headerHeight = 0;
+        if (this._hasValueState) {
+            const valueStateHeader = this._getPicker().querySelector("[slot=header]");
+            headerHeight = valueStateHeader.getBoundingClientRect().height;
+        }
+        return (rectItem.top + Suggestions.SCROLL_STEP <= windowHeight) && (rectItem.top >= rectInput.top + headerHeight);
     }
     _scrollItemIntoView(item) {
         item.scrollIntoView({
@@ -401,9 +405,6 @@ class Suggestions extends ComponentFeature {
             Icon,
         ];
     }
-    static async define() {
-        Suggestions.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-    }
 }
 Suggestions.SCROLL_STEP = 60;
 // Add suggestions support to the global features registry so that Input.js can use it