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

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

@@ -1322,7 +1322,7 @@
     },
     {
       "name": "ui5-dialog",
-      "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the\n`ui5-dialog` on full screen.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n- **footer** - Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
+      "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n- **footer** - Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
       "attributes": [
         {
           "name": "header-text",
@@ -1331,7 +1331,7 @@
         },
         {
           "name": "stretch",
-          "description": "Determines whether the component should be stretched to fullscreen.\n\n**Note:** The component will be stretched to approximately\n90% of the viewport.",
+          "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.",
           "values": []
         },
         {
@@ -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### 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.0",
+  "version": "2.5.0-rc.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -2661,7 +2661,7 @@
         },
         {
           "name": "ui5-dialog",
-          "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the\n`ui5-dialog` on full screen.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n- **footer** - Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
+          "description": "### Overview\nThe `ui5-dialog` component is used to temporarily display some information in a\nsize-limited window in front of the regular app screen.\nIt is used to prompt the user for an action or a confirmation.\nThe `ui5-dialog` interrupts the current app processing as it is the only focused UI element and\nthe main screen is dimmed/blocked.\nThe dialog combines concepts known from other technologies where the windows have\nnames such as dialog box, dialog window, pop-up, pop-up window, alert box, or message box.\n\nThe `ui5-dialog` is modal, which means that a user action is required before it is possible to return to the parent window.\nTo open multiple dialogs, each dialog element should be separate in the markup. This will ensure the correct modal behavior. Avoid nesting dialogs within each other.\nThe content of the `ui5-dialog` is fully customizable.\n\n### Structure\nA `ui5-dialog` consists of a header, content, and a footer for action buttons.\nThe `ui5-dialog` is usually displayed at the center of the screen.\nIts position can be changed by the user. To enable this, you need to set the property `draggable` accordingly.\n\n\n### Responsive Behavior\nThe `stretch` property can be used to stretch the `ui5-dialog` to full screen. For better usability, it's recommended to stretch the dialog to full screen on phone devices.\n\n**Note:** When a `ui5-bar` is used in the header or in the footer, you should remove the default dialog's paddings.\n\nFor more information see the sample \"Bar in Header/Footer\".\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] arrow keys - Move the dialog up/down.\n- [Left] or [Right] arrow keys - Move the dialog left/right.\n\n#### Resizing\nWhen the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog\nwith the following keyboard shortcuts:\n\n- [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.\n- [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Dialog\";`\n---\n\n\n### **Events:**\n - **before-open** - Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening.\n- **open** - Fired after the component is opened.\n- **before-close** - Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing.\n- **close** - Fired after the component is closed.\n\n### **Methods:**\n - **applyFocus(): _Promise<void>_** - Focuses the element denoted by `initialFocus`, if provided,\nor the first focusable element otherwise.\n\n### **Slots:**\n - **header** - Defines the header HTML Element.\n\n**Note:** When a `ui5-bar` is used in the header, you should remove the default dialog's paddings.\n\n**Note:** If `header` slot is provided, the labelling of the dialog is a responsibility of the application developer.\n`accessibleName` should be used.\n- **footer** - Defines the footer HTML Element.\n\n**Note:** When a `ui5-bar` is used in the footer, you should remove the default dialog's paddings.\n\n### **CSS Parts:**\n - **header** - Used to style the header of the component\n- **content** - Used to style the content of the component\n- **footer** - Used to style the footer of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -2671,7 +2671,7 @@
             },
             {
               "name": "stretch",
-              "description": "Determines whether the component should be stretched to fullscreen.\n\n**Note:** The component will be stretched to approximately\n90% of the viewport.",
+              "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -2768,7 +2768,7 @@
               },
               {
                 "name": "stretch",
-                "description": "Determines whether the component should be stretched to fullscreen.\n\n**Note:** The component will be stretched to approximately\n90% of the viewport.",
+                "description": "Determines if the dialog will be stretched to full screen on mobile. On desktop,\nthe dialog will be stretched to approximately 90% of the viewport.\n\n**Note:** For better usability of the component it is recommended to set this property to \"true\" when the dialog is opened on phone.",
                 "value": { "type": "boolean" }
               },
               {
@@ -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### 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.0",
+  "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.0",
-    "@ui5/webcomponents-icons": "2.5.0-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.5.0-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.5.0-rc.0",
-    "@ui5/webcomponents-localization": "2.5.0-rc.0",
-    "@ui5/webcomponents-theming": "2.5.0-rc.0"
+    "@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.0",
-    "chromedriver": "^129.0.0",
+    "@ui5/webcomponents-tools": "2.5.0-rc.2",
+    "chromedriver": "^131.0.0",
     "lit": "^2.0.0"
   },
-  "gitHead": "cff55e270785bc2e83d4956c12a00e4ac0ed1665"
+  "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.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=All items
 
 TOKENIZER_SHOW_ALL_ITEMS={0} Items
 
+TOKENIZER_CLEAR_ALL=Clear All
+
 TREE_ITEM_ARIA_LABEL=Tree Item
 
 TREE_ITEM_EXPAND_NODE=Expand Node

package/src/i18n/messagebundle_en_US_sappsd.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=[[[Āĺĺ įţēɱş∙∙∙∙∙]]]
 
 TOKENIZER_SHOW_ALL_ITEMS=[[[{0} Ĭţēɱş]]]
 
+TOKENIZER_CLEAR_ALL=[[[Ĉĺēąŗ Āĺĺ∙∙∙∙∙]]]
+
 TREE_ITEM_ARIA_LABEL=[[[Ţŗēē Ĭţēɱ∙∙∙∙∙]]]
 
 TREE_ITEM_EXPAND_NODE=[[[Ĕχρąŋƌ Ńŏƌē∙∙∙∙∙∙∙∙]]]

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -296,6 +296,8 @@ TOKENIZER_POPOVER_REMOVE=‌‍​‍​‍‌​​‌‍‌​​‍
 
 TOKENIZER_SHOW_ALL_ITEMS=‍​‍‌‌‌​​‍‌‍‍‌​‍​‌‌‌‍‌‌‌‌‍‌‌​‍‍‌​​‍​‌‍‍​‌​​​{0}‌‌‌ Items
 
+TOKENIZER_CLEAR_ALL=‌‌​‍‍​‍‍​‍‍​​​‌​‍​‌​‍‍​‌​‌‌‍​‍​​​‍​​‌‌​​‍Clear All
+
 TREE_ITEM_ARIA_LABEL=‌‌‌​​‌​​​‍‍‌‌​‍‍‍​‍‌​‍​​‍‌‌‍‌‌‌‌‌​‍‌‌‍​‍​Tree Item
 
 TREE_ITEM_EXPAND_NODE=‍‍‍‍​​‍​‌‍‍​‌‍‍​‍‌‍​​​‌​‍‍‌‌​​‌‌‍‌​‍‌‌​‍Expand Node

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/Dialog.css

@@ -21,6 +21,7 @@
 	max-height: 100%;
 	max-width: 100%;
 	border-radius: 0;
+	min-width: 0; /*this is for preventing the dialog to hold its width on small screens*/
 }
 
 :host([draggable]) .ui5-popup-header-root,

package/src/themes/Form.css

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

package/src/themes/FormItem.css

@@ -9,7 +9,7 @@
 :host([column-span="3"]) {
 	grid-column: span 3;
 }
-	
+
 :host([column-span="4"]) {
 	grid-column: span 4;
 }
@@ -62,4 +62,34 @@
 }
 ::slotted([ui5-select]) {
 	width: 100%;
+}
+
+
+@container (max-width: 600px) {
+	:host {
+		order: var(--ui5-form-item-order-S, unset);
+	}
+}
+
+/* M  - 1 column by default, up to 2 columns */
+@container (width > 600px) and (width <= 1024px) {
+	:host {
+		order: var(--ui5-form-item-order-M, unset);
+	}
+
+}
+
+/* L - 2 columns by default, up to 3 columns */
+@container (width > 1024px) and (width <= 1440px) {
+	:host {
+		order: var(--ui5-form-item-order-L, unset);
+	}
+}
+
+/* XL - 3 columns by default, up to 6 */
+@container (min-width: 1441px) {
+	:host {
+		order: var(--ui5-form-item-order-Xl, unset);
+	}
+
 }

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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span12);--ui5-v2-5-0-rc-0-form-item-label-justify: var(--ui5-v2-5-0-rc-0-form-item-label-justify-span12);--ui5-v2-5-0-rc-0-form-item-label-padding: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span12);--ui5-v2-5-0-rc-0-form-item-label-justify: var(--ui5-v2-5-0-rc-0-form-item-label-justify-span12);--ui5-v2-5-0-rc-0-form-item-label-padding: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span12);--ui5-v2-5-0-rc-0-form-item-label-justify: var(--ui5-v2-5-0-rc-0-form-item-label-justify-span12);--ui5-v2-5-0-rc-0-form-item-label-padding: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span12);--ui5-v2-5-0-rc-0-form-item-label-justify: var(--ui5-v2-5-0-rc-0-form-item-label-justify-span12);--ui5-v2-5-0-rc-0-form-item-label-padding: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span12);--ui5-v2-5-0-rc-0-form-item-label-justify: var(--ui5-v2-5-0-rc-0-form-item-label-justify-span12);--ui5-v2-5-0-rc-0-form-item-label-padding: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span12);--ui5-v2-5-0-rc-0-form-item-label-justify: var(--ui5-v2-5-0-rc-0-form-item-label-justify-span12);--ui5-v2-5-0-rc-0-form-item-label-padding: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span12);--ui5-v2-5-0-rc-0-form-item-label-justify: var(--ui5-v2-5-0-rc-0-form-item-label-justify-span12);--ui5-v2-5-0-rc-0-form-item-label-padding: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-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-0-form-item-layout: var(--ui5-v2-5-0-rc-0-form-item-layout-span12);--ui5-v2-5-0-rc-0-form-item-label-justify: var(--ui5-v2-5-0-rc-0-form-item-label-justify-span12);--ui5-v2-5-0-rc-0-form-item-label-padding: var(--ui5-v2-5-0-rc-0-form-item-label-padding-span12)}}
-` };
-export default styleData;
-//# sourceMappingURL=FormLabelSpan.css.js.map