@ui5/webcomponents 2.22.1-rc.0 → 2.23.0-rc.1

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.22.1-rc.0",
+  "version": "2.23.0-rc.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -4225,7 +4225,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** (0 - 599px) – 1 column is recommended (default: 1)\n- **M** (600px - 1023px) – up to 2 columns are recommended (default: 1)\n- **L** (1024px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (>= 1440px) – 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 - **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- **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n\n### **CSS Parts:**\n - **column** - Used to style a single column of the form column layout.\n- **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining 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** (0 - 599px) – 1 column is recommended (default: 1)\n- **M** (600px - 1023px) – up to 2 columns are recommended (default: 1)\n- **L** (1024px - 1439px) - up to 3 columns are recommended (default: 2)\n- **XL** (>= 1440px) – 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\nItems are grouped into `ui5-form-group` elements, allowing the following navigation:\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 - **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**Note:** As of version 2.23.0 the support for standalone FormItems (not belonging to a group) is deprecated.\nWe recommend using FormGroups, as they provide better accessibility and layout options.\n- **header** - Defines the component header area.\n\n**Note:** When a `header` is provided, the `headerText` property is ignored.\n\n### **CSS Parts:**\n - **column** - Used to style a single column of the form column layout.\n- **header** - Used to style the wrapper of the header.\n- **layout** - Used to style the element defining the form column layout.",
           "doc-url": "",
           "attributes": [
             {
@@ -4286,7 +4286,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "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."
+              "description": "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**Note:** As of version 2.23.0 the support for standalone FormItems (not belonging to a group) is deprecated.\nWe recommend using FormGroups, as they provide better accessibility and layout options."
             },
             {
               "name": "header",
@@ -4362,9 +4362,14 @@
               "description": "Defines id (or many ids) of the element (or elements) that label the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "col-span",
+              "description": "Defines the number of columns to distribute the form content by breakpoint (S1 M2 L3 XL4 for example).\n\n**Note:** This property is ignored if `columnSpan` is set, as it is expected that the column span is defined.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "column-span",
-              "description": "Defines column span of the component,\ne.g how many columns the group should span to.",
+              "description": "Defines column span of the component,\ne.g how many columns the group should span to.\n\n**Note:** If this property is set, it has higher priority than `colSpan` and `colSpan` will be ignored.",
               "value": { "type": "number | undefined", "default": "undefined" }
             },
             {
@@ -4400,9 +4405,14 @@
                 "description": "Defines id (or many ids) of the element (or elements) that label the component.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "col-span",
+                "description": "Defines the number of columns to distribute the form content by breakpoint (S1 M2 L3 XL4 for example).\n\n**Note:** This property is ignored if `columnSpan` is set, as it is expected that the column span is defined.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "column-span",
-                "description": "Defines column span of the component,\ne.g how many columns the group should span to.",
+                "description": "Defines column span of the component,\ne.g how many columns the group should span to.\n\n**Note:** If this property is set, it has higher priority than `colSpan` and `colSpan` will be ignored.",
                 "value": { "type": "number | undefined" }
               },
               {
@@ -4456,7 +4466,7 @@
         },
         {
           "name": "ui5-icon",
-          "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated by mouse/touch, keyboard (Enter or Space),\nor screen reader virtual cursor activation.\n\n**Note:** The event will not be fired if the `mode` property is set to `Decorative` or `Image`.\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-icon`.",
+          "description": "### Overview\n\nThe `ui5-icon` component represents an SVG icon.\nThere are two main scenarios how the `ui5-icon` component is used:\nas a purely decorative element,\nor as an interactive element that can be focused and clicked.\n\n### Usage\n\n1. **Get familiar with the icons collections.**\n\nBefore displaying an icon, you need to explore the icons collections to find and import the desired icon.\n\nCurrently there are 3 icons collection, available as 3 npm packages:\n\n- [@ui5/webcomponents-icons](https://www.npmjs.com/package/@ui5/webcomponents-icons) represents the \"SAP-icons\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).\n- [@ui5/webcomponents-icons-tnt](https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt) represents the \"tnt\" collection and includes the following\n[icons](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons-TNT).\n- [@ui5/webcomponents-icons-business-suite](https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite) represents the \"business-suite\" collection and includes the following\n[icons](https://ui5.sap.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/BusinessSuiteInAppSymbols).\n\n2. **After exploring the icons collections, add one or more of the packages as dependencies to your project.**\n\n`npm i @ui5/webcomponents-icons`\n`npm i @ui5/webcomponents-icons-tnt`\n`npm i @ui5/webcomponents-icons-business-suite`\n\n3. **Then, import the desired icon**.\n\n`import \"@ui5/\\{package_name\\}/dist/\\{icon_name\\}.js\";`\n\n**For Example**:\n\nFor the standard \"SAP-icons\" icon collection, import an icon from the `@ui5/webcomponents-icons` package:\n\n`import \"@ui5/webcomponents-icons/dist/employee.js\";`\n\nFor the \"tnt\" (SAP Fiori Tools) icon collection, import an icon from the `@ui5/webcomponents-icons-tnt` package:\n\n`import \"@ui5/webcomponents-icons-tnt/dist/antenna.js\";`\n\nFor the \"business-suite\" (SAP Business Suite) icon collection, import an icon from the `@ui5/webcomponents-icons-business-suite` package:\n\n`import \"@ui5/webcomponents-icons-business-suite/dist/ab-testing.js\";`\n\n4. **Display the icon using the `ui5-icon` web component.**\nSet the icon collection (\"SAP-icons\", \"tnt\" or \"business-suite\" - \"SAP-icons\" is the default icon collection and can be skipped)\nand the icon name to the `name` property.\n\n`<ui5-icon name=\"employee\"></ui5-icon>`\n`<ui5-icon name=\"tnt/antenna\"></ui5-icon>`\n`<ui5-icon name=\"business-suite/ab-testing\"></ui5-icon>`\n\n### Keyboard Handling\n\n- [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` property is set to `Interactive`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Icon.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated by mouse/touch, keyboard (Enter or Space),\nor screen reader virtual cursor activation.\n\n**Note:** The event will not be fired if the `mode` property is set to `Decorative` or `Image`.\n\n### **Slots:**\n - **fontIcon** - Defines the font icon to be used as an icon.\nIntended for font-based icon libraries where\nthe application loads the font and provides a slotted element with the unicode character.\nWhen this slot is used, the component renders a `<span>` instead of an `<svg>`.\nAccessibility is fully delegated to the application — set `accessible-name` and `mode` explicitly.\n\n**Example:**\n```html\n<ui5-icon mode=\"Image\" accessible-name=\"Home\">\n  <i class=\"fa fa-home\" slot=\"fontIcon\"></i>\n</ui5-icon>\n```\n\n### **CSS Parts:**\n - **root** - Used to style the outermost wrapper of the `ui5-icon`.",
           "doc-url": "",
           "attributes": [
             {
@@ -4491,6 +4501,12 @@
               "value": { "type": "boolean", "default": "false" }
             }
           ],
+          "slots": [
+            {
+              "name": "fontIcon",
+              "description": "Defines the font icon to be used as an icon.\nIntended for font-based icon libraries where\nthe application loads the font and provides a slotted element with the unicode character.\nWhen this slot is used, the component renders a `<span>` instead of an `<svg>`.\nAccessibility is fully delegated to the application — set `accessible-name` and `mode` explicitly.\n\n**Example:**\n```html\n<ui5-icon mode=\"Image\" accessible-name=\"Home\">\n  <i class=\"fa fa-home\" slot=\"fontIcon\"></i>\n</ui5-icon>\n```"
+            }
+          ],
           "events": [
             {
               "name": "click",
@@ -7325,7 +7341,7 @@
         },
         {
           "name": "ui5-panel",
-          "description": "### Overview\n\nThe `ui5-panel` component is a container which has a header and a\ncontent area and is used\nfor grouping and displaying information. It can be collapsed to save space on the screen.\n\n### Guidelines:\n\n- Nesting two or more panels is not recommended.\n- Do not stack too many panels on one page.\n\n### Structure\nThe panel's header area consists of a title bar with a header text or custom header.\n\nThe header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.\n\nThe custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n\nThe content area can contain an arbitrary set of controls.\n\n**Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n\n### Responsive Behavior\n\n- If the width of the panel is set to 100% (default), the panel and its children are\nresized responsively,\ndepending on its parent container.\n- If the panel has a fixed height, it will take up the space even if the panel is\ncollapsed.\n- When the panel is expandable (the `fixed` property is set to `false`),\nan arrow icon (pointing to the right) appears in front of the header.\n- When the animation is activated, expand/collapse uses a smooth animation to open or\nclose the content area.\n- When the panel expands/collapses, the arrow icon rotates 90 degrees\nclockwise/counter-clockwise.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Panel.js\";`\n---\n\n\n### **Events:**\n - **toggle** - Fired when the component is expanded/collapsed by user interaction.\n\n### **Slots:**\n - **default** - Defines the content of the component. The content is visible only when the component is expanded.\n- **header** - Defines the component header area.\n\n**Note:** When a header is provided, the `headerText` property is ignored.\n\n### **CSS Parts:**\n - **content** - Used to style the wrapper of the content.\n- **header** - Used to style the wrapper of the header.",
+          "description": "### Overview\n\nThe `ui5-panel` component is a container which has a header and a\ncontent area and is used\nfor grouping and displaying information. It can be collapsed to save space on the screen.\n\n### Guidelines:\n\n- Nesting two or more panels is not recommended.\n- Do not stack too many panels on one page.\n\n### Structure\nThe panel's header area consists of a title bar with a header text or custom header.\n\nThe header is clickable and can be used to toggle between the expanded and collapsed state. It includes an icon which rotates depending on the state.\n\nThe custom header can be set through the `header` slot and it may contain arbitraray content, such as: title, buttons or any other HTML elements.\n\nThe content area can contain an arbitrary set of controls.\n\n**Note:** The custom header is not clickable out of the box, but in this case the icon is interactive and allows to show/hide the content area.\n\n### Responsive Behavior\n\n- If the width of the panel is set to 100% (default), the panel and its children are\nresized responsively,\ndepending on its parent container.\n- If the panel has a fixed height, it will take up the space even if the panel is\ncollapsed.\n- When the panel is expandable (the `fixed` property is set to `false`),\nan arrow icon (pointing to the right) appears in front of the header.\n- When the animation is activated, expand/collapse uses a smooth animation to open or\nclose the content area.\n- When the panel expands/collapses, the arrow icon rotates 90 degrees\nclockwise/counter-clockwise.\n\n### Keyboard Handling\n\n#### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Panel.js\";`\n---\n\n\n### **Events:**\n - **toggle** - Fired when the component is expanded/collapsed by user interaction.\n\n### **Slots:**\n - **default** - Defines the content of the component. The content is visible only when the component is expanded.\n- **header** - Defines the component header area.\n\n**Note:** When a header is provided, the `headerText` property is ignored.\n\n### **CSS Parts:**\n - **content** - Used to style the wrapper of the content.\n- **header** - Used to style the header.\n- **header-wrapper** - Used to style the outermost header wrapper, useful for adjusting sticky header position.",
           "doc-url": "",
           "attributes": [
             {
@@ -14035,9 +14051,10 @@
           "name": "part(content)",
           "description": "Used to style the wrapper of the content."
         },
+        { "name": "part(header)", "description": "Used to style the header." },
         {
-          "name": "part(header)",
-          "description": "Used to style the wrapper of the header."
+          "name": "part(header-wrapper)",
+          "description": "Used to style the outermost header wrapper, useful for adjusting sticky header position."
         },
         {
           "name": "part(content)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.22.1-rc.0",
+  "version": "2.23.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,22 +54,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.22.1-rc.0",
-    "@ui5/webcomponents-icons": "2.22.1-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.22.1-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.22.1-rc.0",
-    "@ui5/webcomponents-localization": "2.22.1-rc.0",
-    "@ui5/webcomponents-theming": "2.22.1-rc.0"
+    "@ui5/webcomponents-base": "2.23.0-rc.1",
+    "@ui5/webcomponents-icons": "2.23.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.23.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.23.0-rc.1",
+    "@ui5/webcomponents-localization": "2.23.0-rc.1",
+    "@ui5/webcomponents-theming": "2.23.0-rc.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.22.1-rc.0",
+    "@ui5/webcomponents-tools": "2.23.0-rc.1",
     "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "9e6891583a3a6f14d19812a700c86495a46ee276"
+  "gitHead": "ab89a5f83b5dbd4bca2ba6e6b145f54c548c5dd0"
 }

package/src/FormTemplate.tsx

@@ -8,6 +8,16 @@ export default function FormTemplate(this: Form) {
 			role={this.effectiveAccessibleRole}
 			aria-label={this.effectiveAccessibleName}
 			aria-labelledby={this.effectiveАccessibleNameRef}
+			style={{
+				"--ui5-form-columns-s": this.columnsS,
+				"--ui5-form-columns-m": this.columnsM,
+				"--ui5-form-columns-l": this.columnsL,
+				"--ui5-form-columns-xl": this.columnsXl,
+				"--ui5-form-item-layout-S": this.getFormItemLayout("S"),
+				"--ui5-form-item-layout-M": this.getFormItemLayout("M"),
+				"--ui5-form-item-layout-L": this.getFormItemLayout("L"),
+				"--ui5-form-item-layout-XL": this.getFormItemLayout("XL"),
+			}}
 		>
 			{this.hasHeader &&
 				<div class="ui5-form-header" part="header">
@@ -19,22 +29,22 @@ export default function FormTemplate(this: Form) {
 				</div>
 			}
 
-			{ this.hasGroupItems ? groupedItemsLayout.call(this) : standaloneItemsLayout.call(this) }
+			{this.hasGroupItems ? groupedItemsLayout.call(this) : standaloneItemsLayout.call(this)}
 		</div>
 	);
 }
 
 function groupedItemsLayout(this: Form) {
 	return <div class="ui5-form-layout" part="layout">
-		{ this.groupItemsInfo.map(groupItemInfo => {
+		{this.groupItemsInfo.map(groupItemInfo => {
 			const groupItem = groupItemInfo.groupItem;
 			return <div
-				class={{
-					"ui5-form-column": true,
-					[`ui5-form-column-spanL-${groupItem.colsL}`]: true,
-					[`ui5-form-column-spanXL-${groupItem.colsXl}`]: true,
-					[`ui5-form-column-spanM-${groupItem.colsM}`]: true,
-					[`ui5-form-column-spanS-${groupItem.colsS}`]: true,
+				class="ui5-form-column"
+				style={{
+					"--ui5-form-column-span-s": groupItem.colsS,
+					"--ui5-form-column-span-m": groupItem.colsM,
+					"--ui5-form-column-span-l": groupItem.colsL,
+					"--ui5-form-column-span-xl": groupItem.colsXl,
 				}}
 				part="column"
 			>
@@ -43,12 +53,12 @@ function groupedItemsLayout(this: Form) {
 					aria-labelledby={groupItemInfo.accessibleNameRef}
 					aria-label={groupItemInfo.accessibleName}
 				>
-					{ groupItem.headerText &&
+					{groupItem.headerText &&
 						<div class="ui5-form-group-heading">
 							<Title id={`${groupItem._id}-group-header-text`} level={groupItem.headerLevel} size="H6">{groupItem.headerText}</Title>
 						</div>
 					}
-					{ this.accessibleMode === "Edit" ?
+					{this.accessibleMode === "Edit" ?
 						<div class="ui5-form-group-layout">
 							<slot name={groupItem._individualSlot}></slot>
 						</div>
@@ -64,29 +74,37 @@ function groupedItemsLayout(this: Form) {
 }
 
 function standaloneItemsLayout(this: Form) {
-	return (
-		this.accessibleMode === "Edit" ?
-			<div class="ui5-form-layout" part="layout">
-				{ standaloneItemsLayoutContent.call(this) }
+	const column = <div
+		class="ui5-form-column"
+		style={{
+			"--ui5-form-column-span-s": this.columnsS,
+			"--ui5-form-column-span-m": this.columnsM,
+			"--ui5-form-column-span-l": this.columnsL,
+			"--ui5-form-column-span-xl": this.columnsXl,
+		}}
+		part="column"
+	>
+		{this.accessibleMode === "Edit" ?
+			<div class="ui5-form-group-layout">
+				{standaloneItemsLayoutContent.call(this)}
 			</div>
 			:
-			<dl class="ui5-form-layout" part="layout">
-				{ standaloneItemsLayoutContent.call(this) }
+			<dl class="ui5-form-group-layout">
+				{standaloneItemsLayoutContent.call(this)}
 			</dl>
-	);
+		}
+	</div>;
+
+	return <div class="ui5-form-layout" part="layout">{column}</div>;
 }
 
 function standaloneItemsLayoutContent(this: Form) {
 	return this.itemsInfo.map(itemInfo => {
 		const item = itemInfo.item;
 		return (
-			<div class={{
-				"ui5-form-item": true,
-				[`ui5-form-item-span-${item.columnSpan}`]: item.columnSpan !== undefined,
-			}}
-			>
+			<div class="ui5-form-item">
 				<slot name={item._individualSlot}></slot>
-			</div>
+			</div >
 		);
 	});
 }

package/src/IconTemplate.tsx

@@ -1,6 +1,24 @@
 import type Icon from "./Icon.js";
 
 export default function IconTemplate(this: Icon) {
+	if (this.hasFontIcon) {
+		return (
+			<span
+				class="ui5-icon-root"
+				part="root"
+				tabindex={this._tabIndex}
+				role={this.effectiveAccessibleRole}
+				aria-label={this.effectiveAccessibleName}
+				aria-hidden={this.effectiveAriaHidden}
+				onKeyDown={this._onkeydown}
+				onKeyUp={this._onkeyup}
+				onClick={this._onclick}
+			>
+				<slot name="fontIcon"></slot>
+			</span>
+		);
+	}
+
 	return (
 		<svg
 			class="ui5-icon-root"

package/src/ListItemTemplate.tsx

@@ -53,7 +53,7 @@ export default function ListItemTemplate(this: ListItem, hooks?: Partial<ListIte
 		aria-haspopup={this._accInfo.ariaHaspopup}
 		aria-posinset={this._accInfo.posinset}
 		aria-setsize={this._accInfo.setsize}
-		aria-describedby={`${this._id}-invisibleText-describedby`}
+		aria-describedby={this._accInfo.ariaDescribedBy}
 		aria-labelledby={this._accessibleNameRef}
 		aria-disabled={this._ariaDisabled}
 		aria-selected={this._accInfo.ariaSelected}

package/src/PanelTemplate.tsx

@@ -21,6 +21,7 @@ export default function PanelTemplate(this: Panel) {
 					}}
 					role={this.headingWrapperRole}
 					aria-level={this.headingWrapperAriaLevel}
+					part="header-wrapper"
 				>
 					<div
 						onClick={this._headerClick}
@@ -89,22 +90,15 @@ export default function PanelTemplate(this: Panel) {
 
 			{/* content area */}
 			<div
-				class={{
-					"ui5-panel-content-wrapper": true,
-					"ui5-panel-content-focusable": this._contentFocusable,
-				}}
+				class="ui5-panel-content"
+				id={ `${this._id}-content` }
+				tabindex={ -1 }
 				style={{
 					display: this._contentExpanded ? "block" : "none",
 				}}
+				part="content"
 			>
-				<div
-					class="ui5-panel-content"
-					id={ `${this._id}-content` }
-					tabindex={ this._contentTabIndex }
-					part="content"
-				>
-					<slot></slot>
-				</div>
+				<slot></slot>
 			</div>
 		</div>
 	</>);