@ui5/webcomponents 2.5.0-rc.1 → 2.5.0-rc.2

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

@@ -1462,7 +1462,7 @@
     },
     {
       "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: 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### Navigation flow\n\nThe Form component supports two layout options for keyboard navigation:\n\n#### Simple form\n\nIn this \"simple form\" layout, each `ui5-form-item` acts as a standalone group\nwith one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.\nThis layout is ideal for simpler forms and supports custom arrangements, e.g.,\n\n```\n| 1 | 2 |\n|   3   |\n| 4 | 5 |\n```\n\n#### Complex form\n\nIn this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n  ```\n  | 1 |\n  | 2 |\n  | 3 |\n  ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n  ```\n  | 1 | 4 |\n  | 2 | 5 |\n  | 3 | 6 |\n  ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\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### Items Empty Span\n\nBy default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:\n- **Label:** occupies 4 cells.\n- **Field:** occupies 8 cells.\n\nThe `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.\n\n**For example:** Setting \"S0 M0 L3 XL3\" (or just \"L3 XL3\") adjusts the layout as follows:\n- **Label:** remains 4 cells.\n- **Field:** is reduced to 5 cells.\n- **Empty space:** 3 cells are added at the end.\n\nGreater values increase the empty space at the end of the form item, reducing the space available for the label and its field.\nHowever, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.\n\n### Navigation flow\n\nThe Form component supports two layout options for keyboard navigation:\n\n#### Simple form\n\nIn this \"simple form\" layout, each `ui5-form-item` acts as a standalone group\nwith one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.\nThis layout is ideal for simpler forms and supports custom arrangements, e.g.,\n\n```\n| 1 | 2 |\n|   3   |\n| 4 | 5 |\n```\n\n#### Complex form\n\nIn this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n  ```\n  | 1 |\n  | 2 |\n  | 3 |\n  ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n  ```\n  | 1 | 4 |\n  | 2 | 5 |\n  | 3 | 6 |\n  ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\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",
@@ -1471,7 +1471,12 @@
         },
         {
           "name": "label-span",
-          "description": "Defines the width proportion of the labels and fields of a FormItem by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.",
+          "description": "Defines the width proportion of the labels and fields of a form item by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.",
+          "values": []
+        },
+        {
+          "name": "empty-span",
+          "description": "Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.\n\nBy default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.\nThe `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.\n\n**Note:**\n- The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.\n- When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.",
           "values": []
         },
         {
@@ -2778,7 +2783,7 @@
         },
         {
           "name": "readonly",
-          "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+          "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.",
           "values": []
         },
         {
@@ -2788,7 +2793,7 @@
         },
         {
           "name": "checked",
-          "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.",
+          "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.",
           "values": []
         },
         {

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.5.0-rc.1",
+  "version": "2.5.0-rc.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2992,7 +2992,7 @@
         },
         {
           "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: 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### Navigation flow\n\nThe Form component supports two layout options for keyboard navigation:\n\n#### Simple form\n\nIn this \"simple form\" layout, each `ui5-form-item` acts as a standalone group\nwith one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.\nThis layout is ideal for simpler forms and supports custom arrangements, e.g.,\n\n```\n| 1 | 2 |\n|   3   |\n| 4 | 5 |\n```\n\n#### Complex form\n\nIn this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n  ```\n  | 1 |\n  | 2 |\n  | 3 |\n  ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n  ```\n  | 1 | 4 |\n  | 2 | 5 |\n  | 3 | 6 |\n  ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\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### Items Empty Span\n\nBy default, a form item spans 12 cells, fully divided between its label and field, with no empty space at the end:\n- **Label:** occupies 4 cells.\n- **Field:** occupies 8 cells.\n\nThe `emptySpan` property provides additional layout flexibility by defining empty space at the form item’s end.\n\n**For example:** Setting \"S0 M0 L3 XL3\" (or just \"L3 XL3\") adjusts the layout as follows:\n- **Label:** remains 4 cells.\n- **Field:** is reduced to 5 cells.\n- **Empty space:** 3 cells are added at the end.\n\nGreater values increase the empty space at the end of the form item, reducing the space available for the label and its field.\nHowever, setting `emptySpan` to 1 cell is recommended and typically sufficient to achieve a balanced layout.\n\n### Navigation flow\n\nThe Form component supports two layout options for keyboard navigation:\n\n#### Simple form\n\nIn this \"simple form\" layout, each `ui5-form-item` acts as a standalone group\nwith one item, so focus moves horizontally across the grid from one `ui5-form-item` to the next.\nThis layout is ideal for simpler forms and supports custom arrangements, e.g.,\n\n```\n| 1 | 2 |\n|   3   |\n| 4 | 5 |\n```\n\n#### Complex form\n\nIn this layout, items are grouped into `ui5-form-group` elements, allowing more complex configurations:\n\n- **Single-Column Group**: Focus moves vertically down from one item to the next.\n  ```\n  | 1 |\n  | 2 |\n  | 3 |\n  ```\n\n- **Multi-Column Group**: Focus moves horizontally within each row, advancing to the next row after completing the current one.\n  ```\n  | 1 | 4 |\n  | 2 | 5 |\n  | 3 | 6 |\n  ```\n\n### Keyboard Handling\n\n- [Tab] - Moves the focus to the next interactive element within the Form/FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [Tab] - Moves the focus to the previous interactive element within the Form/FormGroup (if available) or to the previous element in the tab chain outside the Form\n- [F6] - Moves the focus to the first interactive element of the next FormGroup (if available) or to the next element in the tab chain outside the Form\n- [Shift] + [F6] - Moves the focus to the first interactive element of the previous FormGroup (if available) or to the previous element in the tab chain outside the Form\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": [
             {
@@ -3002,9 +3002,14 @@
             },
             {
               "name": "label-span",
-              "description": "Defines the width proportion of the labels and fields of a FormItem by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.",
+              "description": "Defines the width proportion of the labels and fields of a form item by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.",
               "value": { "type": "string", "default": "\"S12 M4 L4 XL4\"" }
             },
+            {
+              "name": "empty-span",
+              "description": "Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.\n\nBy default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.\nThe `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.\n\n**Note:**\n- The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.\n- When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.",
+              "value": { "type": "string", "default": "\"S0 M0 L0 XL0\"" }
+            },
             {
               "name": "header-text",
               "description": "Defines the header text of the component.\n\n**Note:** The property gets overridden by the `header` slot.",
@@ -3039,7 +3044,12 @@
               },
               {
                 "name": "label-span",
-                "description": "Defines the width proportion of the labels and fields of a FormItem by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.",
+                "description": "Defines the width proportion of the labels and fields of a form item by breakpoint.\n\nBy default, the labels take 4/12 (or 1/3) of the form item in M,L and XL sizes,\nand 12/12 in S size, e.g in S the label is on top of its associated field.\n\nThe supported values are between 1 and 12. Greater the number, more space the label will use.\n\n**Note:** If \"12\" is set, the label will be displayed on top of its assosiated field.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "empty-span",
+                "description": "Defines the number of cells that are empty at the end of each form item, configurable by breakpoint.\n\nBy default, a form item spans 12 cells, fully divided between its label (4 cells) and field (8 cells), with no empty space at the end.\nThe `emptySpan` provides additional layout flexibility by defining empty space at the form item’s end.\n\n**Note:**\n- The maximum allowable empty space is 10 cells. At least 1 cell each must remain for the label and the field.\n- When `emptySpan` is specified (greater than 0), ensure that the combined value of `emptySpan` and `labelSpan` does not exceed 11. This guarantees a minimum of 1 cell for the field.",
                 "value": { "type": "string" }
               },
               {
@@ -5801,7 +5811,7 @@
             },
             {
               "name": "readonly",
-              "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+              "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -5811,7 +5821,7 @@
             },
             {
               "name": "checked",
-              "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.",
+              "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -5871,7 +5881,7 @@
               },
               {
                 "name": "readonly",
-                "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component is not editable,\nbut still provides visual feedback upon user interaction.",
+                "description": "Defines whether the component is read-only.\n\n**Note:** A read-only component isn't editable or selectable.\nHowever, because it's focusable, it still provides visual feedback upon user interaction.",
                 "value": { "type": "boolean" }
               },
               {
@@ -5881,7 +5891,7 @@
               },
               {
                 "name": "checked",
-                "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.",
+                "description": "Defines whether the component is checked or not.\n\n**Note:** The property value can be changed with user interaction,\neither by clicking/tapping on the component,\nor by using the Space or Enter key.\n\n**Note:** Only enabled radio buttons can be checked.\nRead-only radio buttons are not selectable, and therefore are always unchecked.",
                 "value": { "type": "boolean" }
               },
               {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.5.0-rc.1",
+  "version": "2.5.0-rc.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -50,17 +50,17 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.5.0-rc.1",
-    "@ui5/webcomponents-icons": "2.5.0-rc.1",
-    "@ui5/webcomponents-icons-business-suite": "2.5.0-rc.1",
-    "@ui5/webcomponents-icons-tnt": "2.5.0-rc.1",
-    "@ui5/webcomponents-localization": "2.5.0-rc.1",
-    "@ui5/webcomponents-theming": "2.5.0-rc.1"
+    "@ui5/webcomponents-base": "2.5.0-rc.2",
+    "@ui5/webcomponents-icons": "2.5.0-rc.2",
+    "@ui5/webcomponents-icons-business-suite": "2.5.0-rc.2",
+    "@ui5/webcomponents-icons-tnt": "2.5.0-rc.2",
+    "@ui5/webcomponents-localization": "2.5.0-rc.2",
+    "@ui5/webcomponents-theming": "2.5.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.5.0-rc.1",
+    "@ui5/webcomponents-tools": "2.5.0-rc.2",
     "chromedriver": "^131.0.0",
     "lit": "^2.0.0"
   },
-  "gitHead": "6c65a517f883940378462a005bc1d251c6acac09"
+  "gitHead": "9208967c396111dd2ee4bf45f3a5fea021fa5704"
 }

package/src/RadioButton.hbs

@@ -17,7 +17,7 @@
 			<circle part="outer-ring" class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
 			<circle part="inner-ring" class="ui5-radio-svg-inner" cx="50%" cy="50%" />
 		</svg>
-		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{effectiveAriaDisabled}}" name="{{name}}"  data-sap-no-tab-ref/>
+		<input type='radio' ?required="{{required}}" ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}"  data-sap-no-tab-ref/>
 	</div>
 
 	{{#if text}}

package/src/i18n/messagebundle_en_US_saptrc.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=bn0YEn1E+sLzSCHk+3jGag_All items
 
 TOKENIZER_SHOW_ALL_ITEMS=516vV/mWdfVu9olV3JhrZA_{0} Items
 
+TOKENIZER_CLEAR_ALL=E5kwB9f60GvHRDcIYdEY9A_Clear All
+
 TREE_ITEM_ARIA_LABEL=EfdKcPq8l5pVMMqYgxkNpQ_Tree Item
 
 TREE_ITEM_EXPAND_NODE=ApvHBxS7YmQKM7e9vkCptA_Expand Node

package/src/themes/Form.css

@@ -1,5 +1,5 @@
 @import "./FormLayout.css";
-@import "./FormLabelSpan.css";
+@import "./FormItemSpan.css";
 
 :host {
 	display: block;

package/src/themes/FormItemSpan.css

@@ -0,0 +1,59 @@
+/* 
+* By default, 
+* - in M, L ans XL sizes the Form's labels take 4 cells out 12 of the whole width, e.g 4:8:0
+* - in S size, it  the Form's labels take the whole width 12/12 cells, e.g the label and the input are displayed vertically.
+*
+* The ratio can be changed via the labelSpan and the emptySpan properties.
+*/
+
+@container (max-width: 600px) {
+	.ui5-form-item,
+	.ui5-form-group {
+		--ui5-form-item-layout: var(--ui5-form-item-layout-S);
+	}
+
+	:host([label-span-s="12"]) .ui5-form-item,
+	:host([label-span-s="12"]) .ui5-form-group {
+		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
+		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
+	}
+}
+
+@container (width > 600px) and (width <= 1024px) {
+	.ui5-form-item,
+	.ui5-form-group {
+		--ui5-form-item-layout: var(--ui5-form-item-layout-M);
+	}
+
+	:host([label-span-m="12"]) .ui5-form-item,
+	:host([label-span-m="12"]) .ui5-form-group {
+		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
+		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
+	}
+}
+
+@container (width > 1024px) and (width <= 1440px) {
+	.ui5-form-item,
+	.ui5-form-group {
+		--ui5-form-item-layout: var(--ui5-form-item-layout-L);
+	}
+
+	:host([label-span-l="12"]) .ui5-form-item,
+	:host([label-span-l="12"]) .ui5-form-group {
+		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
+		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
+	}
+}
+
+@container (min-width: 1441px) {
+	.ui5-form-item,
+	.ui5-form-group {
+		--ui5-form-item-layout: var(--ui5-form-item-layout-XL);
+	}
+
+	:host([label-span-xl="12"]) .ui5-form-item,
+	:host([label-span-xl="12"]) .ui5-form-group {
+		--ui5-form-item-label-justify: var(--ui5-form-item-label-justify-span12);
+		--ui5-form-item-label-padding: var(--ui5-form-item-label-padding-span12);
+	}
+}

package/src/themes/TabContainer.css

@@ -176,4 +176,4 @@
 
 :host([media-range="XL"]) .ui5-tc__content {
 	padding: 1rem 3rem;
-}
+}

package/src/themes/Tokenizer.css

@@ -9,25 +9,24 @@
 
 :host([multi-line]) {
 	height: auto;
+}
 
-	.ui5-tokenizer--content {
-		display: flex;
-		align-content: baseline;
-		flex-wrap: wrap;
-		padding: .25rem;
-		box-sizing: border-box;
-		row-gap: .5rem;
-		column-gap: .25rem;
-		overflow-y: auto;
-		overflow-x: hidden;
-	}
-
-	::slotted(ui5-token) {
-		margin: 0;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		max-width: 100%;
-	}
+:host([multi-line]) .ui5-tokenizer--content {
+	display: flex;
+	align-content: baseline;
+	flex-wrap: wrap;
+	padding: .25rem;
+	box-sizing: border-box;
+	gap: var(--_ui5_tokenizer_gap);
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+:host([multi-line])::slotted([ui5-token]) {
+	margin: 0;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	max-width: 100%;
 }
 
 :host([disabled]) {

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

@@ -1,17 +1,5 @@
 :root {
-	--ui5-form-item-layout: 1fr 2fr;
-	--ui5-form-item-layout-span1: 1fr 11fr;
-	--ui5-form-item-layout-span2: 2fr 10fr;
-	--ui5-form-item-layout-span3: 3fr 9fr;
-	--ui5-form-item-layout-span4: 4fr 8fr;
-	--ui5-form-item-layout-span5: 5fr 7fr;
-	--ui5-form-item-layout-span6: 6fr 6fr;
-	--ui5-form-item-layout-span7: 7fr 5fr;
-	--ui5-form-item-layout-span8: 8fr 4fr;
-	--ui5-form-item-layout-span9: 9fr 3fr;
-	--ui5-form-item-layout-span10: 10fr 2fr;
-	--ui5-form-item-layout-span11: 11fr 1fr;
-	--ui5-form-item-layout-span12: 1fr;
+	--ui5-form-item-layout: 4fr 8fr 0fr;
 	--ui5-form-item-label-justify: end;
 	--ui5-form-item-label-justify-span12: start;
 	--ui5-form-item-label-padding: 0.125rem 0;

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

@@ -1,5 +1,6 @@
 :root {
 	--_ui5_tokenizer_padding: 0.3125rem;
+	--_ui5_tokenizer_gap: 0.625rem 0.25rem;
 	--_ui5_tokenizer_n_more_text_color: var(--sapField_TextColor);
 	--_ui5_tokenizer-popover_offset: .3125rem;
 }
@@ -7,5 +8,6 @@
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
+	--_ui5_tokenizer_gap: 0.375em 0.25rem;
 	--_ui5_tokenizer-popover_offset: .1875rem;
 }

package/dist/css/themes/FormLabelSpan.css

@@ -1 +0,0 @@
-@container (max-width: 600px){:host([label-span-s="1"]) .ui5-form-item,:host([label-span-s="1"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span1)}:host([label-span-s="2"]) .ui5-form-item,:host([label-span-s="2"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span2)}:host([label-span-s="3"]) .ui5-form-item,:host([label-span-s="3"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span3)}:host([label-span-s="4"]) .ui5-form-item,:host([label-span-s="4"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span4)}:host([label-span-s="5"]) .ui5-form-item,:host([label-span-s="5"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span5)}:host([label-span-s="6"]) .ui5-form-item,:host([label-span-s="6"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span6)}:host([label-span-s="7"]) .ui5-form-item,:host([label-span-s="7"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span7)}:host([label-span-s="8"]) .ui5-form-item,:host([label-span-s="8"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span8)}:host([label-span-s="9"]) .ui5-form-item,:host([label-span-s="9"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span9)}:host([label-span-s="10"]) .ui5-form-item,:host([label-span-s="10"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span10)}:host([label-span-s="11"]) .ui5-form-item,:host([label-span-s="11"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span11)}:host(:not([label-span-s])) .ui5-form-item,:host(:not([label-span-s])) .ui5-form-group,:host([label-span-s="12"]) .ui5-form-item,:host([label-span-s="12"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span12);--ui5-v2-5-0-rc-1-form-item-label-justify: var(--ui5-v2-5-0-rc-1-form-item-label-justify-span12);--ui5-v2-5-0-rc-1-form-item-label-padding: var(--ui5-v2-5-0-rc-1-form-item-label-padding-span12)}}@container (width > 600px) and (width <= 1024px){:host([label-span-m="1"]) .ui5-form-item,:host([label-span-m="1"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span1)}:host([label-span-m="2"]) .ui5-form-item,:host([label-span-m="2"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span2)}:host([label-span-m="3"]) .ui5-form-item,:host([label-span-m="3"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span3)}:host([label-span-m="4"]) .ui5-form-item,:host([label-span-m="4"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span4)}:host([label-span-m="5"]) .ui5-form-item,:host([label-span-m="5"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span5)}:host([label-span-m="6"]) .ui5-form-item,:host([label-span-m="6"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span6)}:host([label-span-m="7"]) .ui5-form-item,:host([label-span-m="7"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span7)}:host([label-span-m="8"]) .ui5-form-item,:host([label-span-m="8"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span8)}:host([label-span-m="9"]) .ui5-form-item,:host([label-span-m="9"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span9)}:host([label-span-m="10"]) .ui5-form-item,:host([label-span-m="10"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span10)}:host([label-span-m="11"]) .ui5-form-item,:host([label-span-m="11"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span11)}:host([label-span-m="12"]) .ui5-form-item,:host([label-span-m="12"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span12);--ui5-v2-5-0-rc-1-form-item-label-justify: var(--ui5-v2-5-0-rc-1-form-item-label-justify-span12);--ui5-v2-5-0-rc-1-form-item-label-padding: var(--ui5-v2-5-0-rc-1-form-item-label-padding-span12)}}@container (width > 1024px) and (width <= 1440px){:host([label-span-l="1"]) .ui5-form-item,:host([label-span-l="1"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span1)}:host([label-span-l="2"]) .ui5-form-item,:host([label-span-l="2"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span2)}:host([label-span-l="3"]) .ui5-form-item,:host([label-span-l="3"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span3)}:host([label-span-l="4"]) .ui5-form-item,:host([label-span-l="4"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span4)}:host([label-span-l="5"]) .ui5-form-item,:host([label-span-l="5"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span5)}:host([label-span-l="6"]) .ui5-form-item,:host([label-span-l="6"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span6)}:host([label-span-l="7"]) .ui5-form-item,:host([label-span-l="7"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span7)}:host([label-span-l="8"]) .ui5-form-item,:host([label-span-l="8"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span8)}:host([label-span-l="9"]) .ui5-form-item,:host([label-span-l="9"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span9)}:host([label-span-l="10"]) .ui5-form-item,:host([label-span-l="10"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span10)}:host([label-span-l="11"]) .ui5-form-item,:host([label-span-l="11"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span11)}:host([label-span-l="12"]) .ui5-form-item,:host([label-span-l="12"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span12);--ui5-v2-5-0-rc-1-form-item-label-justify: var(--ui5-v2-5-0-rc-1-form-item-label-justify-span12);--ui5-v2-5-0-rc-1-form-item-label-padding: var(--ui5-v2-5-0-rc-1-form-item-label-padding-span12)}}@container (min-width: 1441px){:host([label-span-xl="1"]) .ui5-form-item,:host([label-span-xl="1"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span1)}:host([label-span-xl="2"]) .ui5-form-item,:host([label-span-xl="2"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span2)}:host([label-span-xl="3"]) .ui5-form-item,:host([label-span-xl="3"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span3)}:host([label-span-xl="4"]) .ui5-form-item,:host([label-span-xl="4"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span4)}:host([label-span-xl="5"]) .ui5-form-item,:host([label-span-xl="5"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span5)}:host([label-span-xl="6"]) .ui5-form-item,:host([label-span-xl="6"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span6)}:host([label-span-xl="7"]) .ui5-form-item,:host([label-span-xl="7"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span7)}:host([label-span-xl="8"]) .ui5-form-item,:host([label-span-xl="8"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span8)}:host([label-span-xl="9"]) .ui5-form-item,:host([label-span-xl="9"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span9)}:host([label-span-xl="10"]) .ui5-form-item,:host([label-span-xl="10"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span10)}:host([label-span-xl="11"]) .ui5-form-item,:host([label-span-xl="11"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span11)}:host([label-span-xl="12"]) .ui5-form-item,:host([label-span-xl="12"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span12);--ui5-v2-5-0-rc-1-form-item-label-justify: var(--ui5-v2-5-0-rc-1-form-item-label-justify-span12);--ui5-v2-5-0-rc-1-form-item-label-padding: var(--ui5-v2-5-0-rc-1-form-item-label-padding-span12)}}

package/dist/generated/themes/FormLabelSpan.css.js

@@ -1,9 +0,0 @@
-import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
-import defaultThemeBase from "@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js";
-import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
-registerThemePropertiesLoader("@ui5/webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
-registerThemePropertiesLoader("@ui5/webcomponents", "sap_horizon", async () => defaultTheme);
-const styleData = { packageName: "@ui5/webcomponents", fileName: "themes/FormLabelSpan.css.ts", content: `@container (max-width: 600px){:host([label-span-s="1"]) .ui5-form-item,:host([label-span-s="1"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span1)}:host([label-span-s="2"]) .ui5-form-item,:host([label-span-s="2"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span2)}:host([label-span-s="3"]) .ui5-form-item,:host([label-span-s="3"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span3)}:host([label-span-s="4"]) .ui5-form-item,:host([label-span-s="4"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span4)}:host([label-span-s="5"]) .ui5-form-item,:host([label-span-s="5"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span5)}:host([label-span-s="6"]) .ui5-form-item,:host([label-span-s="6"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span6)}:host([label-span-s="7"]) .ui5-form-item,:host([label-span-s="7"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span7)}:host([label-span-s="8"]) .ui5-form-item,:host([label-span-s="8"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span8)}:host([label-span-s="9"]) .ui5-form-item,:host([label-span-s="9"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span9)}:host([label-span-s="10"]) .ui5-form-item,:host([label-span-s="10"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span10)}:host([label-span-s="11"]) .ui5-form-item,:host([label-span-s="11"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span11)}:host(:not([label-span-s])) .ui5-form-item,:host(:not([label-span-s])) .ui5-form-group,:host([label-span-s="12"]) .ui5-form-item,:host([label-span-s="12"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span12);--ui5-v2-5-0-rc-1-form-item-label-justify: var(--ui5-v2-5-0-rc-1-form-item-label-justify-span12);--ui5-v2-5-0-rc-1-form-item-label-padding: var(--ui5-v2-5-0-rc-1-form-item-label-padding-span12)}}@container (width > 600px) and (width <= 1024px){:host([label-span-m="1"]) .ui5-form-item,:host([label-span-m="1"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span1)}:host([label-span-m="2"]) .ui5-form-item,:host([label-span-m="2"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span2)}:host([label-span-m="3"]) .ui5-form-item,:host([label-span-m="3"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span3)}:host([label-span-m="4"]) .ui5-form-item,:host([label-span-m="4"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span4)}:host([label-span-m="5"]) .ui5-form-item,:host([label-span-m="5"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span5)}:host([label-span-m="6"]) .ui5-form-item,:host([label-span-m="6"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span6)}:host([label-span-m="7"]) .ui5-form-item,:host([label-span-m="7"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span7)}:host([label-span-m="8"]) .ui5-form-item,:host([label-span-m="8"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span8)}:host([label-span-m="9"]) .ui5-form-item,:host([label-span-m="9"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span9)}:host([label-span-m="10"]) .ui5-form-item,:host([label-span-m="10"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span10)}:host([label-span-m="11"]) .ui5-form-item,:host([label-span-m="11"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span11)}:host([label-span-m="12"]) .ui5-form-item,:host([label-span-m="12"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span12);--ui5-v2-5-0-rc-1-form-item-label-justify: var(--ui5-v2-5-0-rc-1-form-item-label-justify-span12);--ui5-v2-5-0-rc-1-form-item-label-padding: var(--ui5-v2-5-0-rc-1-form-item-label-padding-span12)}}@container (width > 1024px) and (width <= 1440px){:host([label-span-l="1"]) .ui5-form-item,:host([label-span-l="1"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span1)}:host([label-span-l="2"]) .ui5-form-item,:host([label-span-l="2"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span2)}:host([label-span-l="3"]) .ui5-form-item,:host([label-span-l="3"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span3)}:host([label-span-l="4"]) .ui5-form-item,:host([label-span-l="4"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span4)}:host([label-span-l="5"]) .ui5-form-item,:host([label-span-l="5"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span5)}:host([label-span-l="6"]) .ui5-form-item,:host([label-span-l="6"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span6)}:host([label-span-l="7"]) .ui5-form-item,:host([label-span-l="7"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span7)}:host([label-span-l="8"]) .ui5-form-item,:host([label-span-l="8"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span8)}:host([label-span-l="9"]) .ui5-form-item,:host([label-span-l="9"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span9)}:host([label-span-l="10"]) .ui5-form-item,:host([label-span-l="10"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span10)}:host([label-span-l="11"]) .ui5-form-item,:host([label-span-l="11"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span11)}:host([label-span-l="12"]) .ui5-form-item,:host([label-span-l="12"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span12);--ui5-v2-5-0-rc-1-form-item-label-justify: var(--ui5-v2-5-0-rc-1-form-item-label-justify-span12);--ui5-v2-5-0-rc-1-form-item-label-padding: var(--ui5-v2-5-0-rc-1-form-item-label-padding-span12)}}@container (min-width: 1441px){:host([label-span-xl="1"]) .ui5-form-item,:host([label-span-xl="1"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span1)}:host([label-span-xl="2"]) .ui5-form-item,:host([label-span-xl="2"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span2)}:host([label-span-xl="3"]) .ui5-form-item,:host([label-span-xl="3"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span3)}:host([label-span-xl="4"]) .ui5-form-item,:host([label-span-xl="4"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span4)}:host([label-span-xl="5"]) .ui5-form-item,:host([label-span-xl="5"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span5)}:host([label-span-xl="6"]) .ui5-form-item,:host([label-span-xl="6"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span6)}:host([label-span-xl="7"]) .ui5-form-item,:host([label-span-xl="7"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span7)}:host([label-span-xl="8"]) .ui5-form-item,:host([label-span-xl="8"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span8)}:host([label-span-xl="9"]) .ui5-form-item,:host([label-span-xl="9"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span9)}:host([label-span-xl="10"]) .ui5-form-item,:host([label-span-xl="10"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span10)}:host([label-span-xl="11"]) .ui5-form-item,:host([label-span-xl="11"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span11)}:host([label-span-xl="12"]) .ui5-form-item,:host([label-span-xl="12"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span12);--ui5-v2-5-0-rc-1-form-item-label-justify: var(--ui5-v2-5-0-rc-1-form-item-label-justify-span12);--ui5-v2-5-0-rc-1-form-item-label-padding: var(--ui5-v2-5-0-rc-1-form-item-label-padding-span12)}}
-` };
-export default styleData;
-//# sourceMappingURL=FormLabelSpan.css.js.map

package/dist/generated/themes/FormLabelSpan.css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormLabelSpan.css.js","sourceRoot":"","sources":["../../../src/generated/themes/FormLabelSpan.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,4BAA4B,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACzG,6BAA6B,CAAC,oBAAoB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAE7F,MAAM,SAAS,GAAc,EAAC,WAAW,EAAC,oBAAoB,EAAC,QAAQ,EAAC,6BAA6B,EAAC,OAAO,EAAC;CAC7G,EAAC,CAAC;AACH,eAAe,SAAS,CAAC","sourcesContent":["import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";\nimport { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@ui5/webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@ui5/webcomponents\", \"sap_horizon\", async () => defaultTheme);\n\nconst styleData: StyleData = {packageName:\"@ui5/webcomponents\",fileName:\"themes/FormLabelSpan.css.ts\",content:`@container (max-width: 600px){:host([label-span-s=\"1\"]) .ui5-form-item,:host([label-span-s=\"1\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span1)}:host([label-span-s=\"2\"]) .ui5-form-item,:host([label-span-s=\"2\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span2)}:host([label-span-s=\"3\"]) .ui5-form-item,:host([label-span-s=\"3\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span3)}:host([label-span-s=\"4\"]) .ui5-form-item,:host([label-span-s=\"4\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span4)}:host([label-span-s=\"5\"]) .ui5-form-item,:host([label-span-s=\"5\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span5)}:host([label-span-s=\"6\"]) .ui5-form-item,:host([label-span-s=\"6\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span6)}:host([label-span-s=\"7\"]) .ui5-form-item,:host([label-span-s=\"7\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span7)}:host([label-span-s=\"8\"]) .ui5-form-item,:host([label-span-s=\"8\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span8)}:host([label-span-s=\"9\"]) .ui5-form-item,:host([label-span-s=\"9\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span9)}:host([label-span-s=\"10\"]) .ui5-form-item,:host([label-span-s=\"10\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span10)}:host([label-span-s=\"11\"]) .ui5-form-item,:host([label-span-s=\"11\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span11)}:host(:not([label-span-s])) .ui5-form-item,:host(:not([label-span-s])) .ui5-form-group,:host([label-span-s=\"12\"]) .ui5-form-item,:host([label-span-s=\"12\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span12);--ui5-v2-5-0-rc-1-form-item-label-justify: var(--ui5-v2-5-0-rc-1-form-item-label-justify-span12);--ui5-v2-5-0-rc-1-form-item-label-padding: var(--ui5-v2-5-0-rc-1-form-item-label-padding-span12)}}@container (width > 600px) and (width <= 1024px){:host([label-span-m=\"1\"]) .ui5-form-item,:host([label-span-m=\"1\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span1)}:host([label-span-m=\"2\"]) .ui5-form-item,:host([label-span-m=\"2\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span2)}:host([label-span-m=\"3\"]) .ui5-form-item,:host([label-span-m=\"3\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span3)}:host([label-span-m=\"4\"]) .ui5-form-item,:host([label-span-m=\"4\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span4)}:host([label-span-m=\"5\"]) .ui5-form-item,:host([label-span-m=\"5\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span5)}:host([label-span-m=\"6\"]) .ui5-form-item,:host([label-span-m=\"6\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span6)}:host([label-span-m=\"7\"]) .ui5-form-item,:host([label-span-m=\"7\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span7)}:host([label-span-m=\"8\"]) .ui5-form-item,:host([label-span-m=\"8\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span8)}:host([label-span-m=\"9\"]) .ui5-form-item,:host([label-span-m=\"9\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span9)}:host([label-span-m=\"10\"]) .ui5-form-item,:host([label-span-m=\"10\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span10)}:host([label-span-m=\"11\"]) .ui5-form-item,:host([label-span-m=\"11\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span11)}:host([label-span-m=\"12\"]) .ui5-form-item,:host([label-span-m=\"12\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span12);--ui5-v2-5-0-rc-1-form-item-label-justify: var(--ui5-v2-5-0-rc-1-form-item-label-justify-span12);--ui5-v2-5-0-rc-1-form-item-label-padding: var(--ui5-v2-5-0-rc-1-form-item-label-padding-span12)}}@container (width > 1024px) and (width <= 1440px){:host([label-span-l=\"1\"]) .ui5-form-item,:host([label-span-l=\"1\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span1)}:host([label-span-l=\"2\"]) .ui5-form-item,:host([label-span-l=\"2\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span2)}:host([label-span-l=\"3\"]) .ui5-form-item,:host([label-span-l=\"3\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span3)}:host([label-span-l=\"4\"]) .ui5-form-item,:host([label-span-l=\"4\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span4)}:host([label-span-l=\"5\"]) .ui5-form-item,:host([label-span-l=\"5\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span5)}:host([label-span-l=\"6\"]) .ui5-form-item,:host([label-span-l=\"6\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span6)}:host([label-span-l=\"7\"]) .ui5-form-item,:host([label-span-l=\"7\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span7)}:host([label-span-l=\"8\"]) .ui5-form-item,:host([label-span-l=\"8\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span8)}:host([label-span-l=\"9\"]) .ui5-form-item,:host([label-span-l=\"9\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span9)}:host([label-span-l=\"10\"]) .ui5-form-item,:host([label-span-l=\"10\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span10)}:host([label-span-l=\"11\"]) .ui5-form-item,:host([label-span-l=\"11\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span11)}:host([label-span-l=\"12\"]) .ui5-form-item,:host([label-span-l=\"12\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span12);--ui5-v2-5-0-rc-1-form-item-label-justify: var(--ui5-v2-5-0-rc-1-form-item-label-justify-span12);--ui5-v2-5-0-rc-1-form-item-label-padding: var(--ui5-v2-5-0-rc-1-form-item-label-padding-span12)}}@container (min-width: 1441px){:host([label-span-xl=\"1\"]) .ui5-form-item,:host([label-span-xl=\"1\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span1)}:host([label-span-xl=\"2\"]) .ui5-form-item,:host([label-span-xl=\"2\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span2)}:host([label-span-xl=\"3\"]) .ui5-form-item,:host([label-span-xl=\"3\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span3)}:host([label-span-xl=\"4\"]) .ui5-form-item,:host([label-span-xl=\"4\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span4)}:host([label-span-xl=\"5\"]) .ui5-form-item,:host([label-span-xl=\"5\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span5)}:host([label-span-xl=\"6\"]) .ui5-form-item,:host([label-span-xl=\"6\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span6)}:host([label-span-xl=\"7\"]) .ui5-form-item,:host([label-span-xl=\"7\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span7)}:host([label-span-xl=\"8\"]) .ui5-form-item,:host([label-span-xl=\"8\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span8)}:host([label-span-xl=\"9\"]) .ui5-form-item,:host([label-span-xl=\"9\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span9)}:host([label-span-xl=\"10\"]) .ui5-form-item,:host([label-span-xl=\"10\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span10)}:host([label-span-xl=\"11\"]) .ui5-form-item,:host([label-span-xl=\"11\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span11)}:host([label-span-xl=\"12\"]) .ui5-form-item,:host([label-span-xl=\"12\"]) .ui5-form-group{--ui5-v2-5-0-rc-1-form-item-layout: var(--ui5-v2-5-0-rc-1-form-item-layout-span12);--ui5-v2-5-0-rc-1-form-item-label-justify: var(--ui5-v2-5-0-rc-1-form-item-label-justify-span12);--ui5-v2-5-0-rc-1-form-item-label-padding: var(--ui5-v2-5-0-rc-1-form-item-label-padding-span12)}}\n`};\nexport default styleData;\n\t"]}