@ui5/webcomponents 2.27.1 → 2.28.0-rc.0

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

@@ -42,7 +42,7 @@
         },
         {
           "name": "fallback-icon",
-          "description": "Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).\n\t- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
+          "description": "Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters or empty initials).\n\t- If the initials do not fit in the shape at the current size (e.g. WWW at size XS).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
           "values": []
         },
         {
@@ -52,7 +52,7 @@
         },
         {
           "name": "initials",
-          "description": "Defines the displayed initials.\n\nUp to three Latin letters can be displayed as initials.",
+          "description": "Defines the displayed initials.\n\nUp to three letters from an alphabetic script can be displayed as initials.\nAll scripts used in SAP-supported languages are accepted, except logographic and\npure syllabic scripts where the concept of initials does not apply: Han (Chinese,\nJapanese kanji), Hiragana, and Katakana. Korean (Hangul) is supported.\nIf the letters do not fit inside the avatar shape at the current size, the fallback\nicon is shown instead.",
           "values": []
         },
         {
@@ -894,7 +894,7 @@
     },
     {
       "name": "ui5-combobox",
-      "description": "### Overview\n\nThe `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n### Structure\nThe `ui5-combobox` consists of the following elements:\n\n-  Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Working with Values\n\nThe ComboBox offers two ways to work with item selection:\n\n**1. Display Text Only (using `value`):**\n```html\n<ui5-combobox value=\"Germany\">\n  <ui5-cb-item text=\"Germany\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\"></ui5-cb-item>\n</ui5-combobox>\n```\nUse this approach when the displayed text is sufficient for your needs.\n\n**2. Unique Identifiers - Recommended (using `selectedValue` and item `value`):**\n```html\n<ui5-combobox value=\"Germany\" selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```\nThis is the recommended approach when you need to work with unique identifiers (IDs, codes) separate from display text.\nThe `selectedValue` property references the `value` property of the selected item.\nIn forms, the item's `value` (e.g., \"DE\") will be submitted instead of the display text.\n\n**Important:** Do not mix the `selectedValue` approach with the deprecated `selected` property on items.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.\n- [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.\n- [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.\n- [Down] - Selects the next matching item in the picker.\n- [Up] - Selects the previous matching item in the picker.\n- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - Moves selection up by page size (10 items by default).\n- [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.\n- [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter, focusout or an item is selected.\n- **close** - Fired when the dropdown is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.\n- **open** - Fired when the dropdown is opened.\n- **selection-change** - Fired when selection is changed by user interaction\n\n### **Slots:**\n - **default** - Defines the component items.\n- **icon** - Defines the icon to be displayed in the input field.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.",
+      "description": "### Overview\n\nThe `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n### Structure\nThe `ui5-combobox` consists of the following elements:\n\n-  Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Working with Values\n\nThe ComboBox offers two ways to work with item selection:\n\n**1. Display Text Only (using `value`):**\n```html\n<ui5-combobox value=\"Germany\">\n  <ui5-cb-item text=\"Germany\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\"></ui5-cb-item>\n</ui5-combobox>\n```\nUse this approach when the displayed text is sufficient for your needs.\n\n**2. Unique Identifiers - Recommended (using `selectedValue` and item `value`):**\n```html\n<ui5-combobox value=\"Germany\" selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```\nThis is the recommended approach when you need to work with unique identifiers (IDs, codes) separate from display text.\nThe `selectedValue` property references the `value` property of the selected item.\nIn forms, the item's `value` (e.g., \"DE\") will be submitted instead of the display text.\n\n**Important:** Do not mix the `selectedValue` approach with the deprecated `selected` property on items.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.\n- [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.\n- [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.\n- [Down] - Selects the next matching item in the picker.\n- [Up] - Selects the previous matching item in the picker.\n- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - Moves selection up by page size (10 items by default).\n- [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.\n- [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter, focusout or an item is selected.\n- **close** - Fired when the dropdown is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.\n- **load-items** - Fired when the application should provide items for the component to render.\nThe event is fired either when text is input or when the user presses arrow down on a combo-box with no items.\n- **open** - Fired when the dropdown is opened.\n- **selection-change** - Fired when selection is changed by user interaction\n\n### **Slots:**\n - **default** - Defines the component items.\n- **icon** - Defines the icon to be displayed in the input field.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.",
       "attributes": [
         {
           "name": "accessible-name",
@@ -2243,7 +2243,12 @@
       "attributes": [
         {
           "name": "accessible-name",
-          "description": "Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.\nWhen set, it is also rendered as a native `title` tooltip.",
+          "description": "Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.\nWhen set, it is also rendered as a native `title` tooltip, unless `hideTooltip` is set.",
+          "values": []
+        },
+        {
+          "name": "hide-tooltip",
+          "description": "Defines whether the native `title` tooltip, derived from `accessibleName`, is displayed.\n\n**Note:** When set, the `accessibleName` is still announced by screen readers, but no\n`title` tooltip is rendered.",
           "values": []
         },
         {
@@ -2283,7 +2288,7 @@
     },
     {
       "name": "ui5-link",
-      "description": "### Overview\nThe `ui5-link` is a hyperlink component that is used to navigate to other\napps and web pages, or to trigger actions.\nIt is a clickable text element, visualized in such a way that it stands out\nfrom the standard text.\nOn hover, it changes its style to an underlined text to provide additional feedback to the user.\n\n### Usage\n\nYou can set the `ui5-link` to be enabled or disabled.\n\nTo create a visual hierarchy in large lists of links, you can set the less important links as\n`Subtle` or the more important ones as `Emphasized`,\nby using the `design` property.\n\nIf the `href` property is set, the link behaves as the HTML\nanchor tag (`<a></a>`) and opens the specified URL in the given target frame (`target` property).\nTo specify where the linked content is opened, you can use the `target` property.\n\n### Responsive behavior\n\nIf there is not enough space, the text of the `ui5-link` becomes truncated.\nIf the `wrappingType` property is set to `\"Normal\"`, the text is displayed\non several lines instead of being truncated.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Link\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is triggered either with a mouse/tap\nor by using the Enter key.\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\n### **CSS Parts:**\n - **endIcon** - Used to style the provided endIcon within the link\n- **icon** - Used to style the provided icon within the link",
+      "description": "### Overview\nThe `ui5-link` is a hyperlink component that is used to navigate to other\napps and web pages, or to trigger actions.\nIt is a clickable text element, visualized in such a way that it stands out\nfrom the standard text.\nOn hover, it changes its style to an underlined text to provide additional feedback to the user.\n\n### Usage\n\nYou can set the `ui5-link` to be enabled or disabled.\n\nTo create a visual hierarchy in large lists of links, you can set the less important links as\n`Subtle` or the more important ones as `Emphasized`,\nby using the `design` property.\n\nIf the `href` property is set, the link behaves as the HTML\nanchor tag (`<a></a>`) and opens the specified URL in the given target frame (`target` property).\nTo specify where the linked content is opened, you can use the `target` property.\n\n### Navigation vs. Action\n\nThe `ui5-link` supports two distinct use cases. Choosing the right one is important for accessibility:\n\n- **Navigation**: set the `href` property (and optionally `target`). The component behaves as a\nstandard anchor tag, and the browser handles navigation, which also enables native\naffordances such as open-in-new-tab, copy link, and hover preview.\n- **Action**: when the link triggers an in-page action (for example, opening a dialog) instead of\nnavigating, leave `href` unset and set `accessibleRole` to `\"Button\"`. This exposes the component\nwith a `button` role, which assistive technologies activate reliably.\n\n**Note:** A link that triggers an action but keeps the default `\"Link\"` role (with no `href`) cannot be\nactivated by some screen readers, such as JAWS in browse mode, because a link without `href` has\nno destination to navigate to. Always set `accessibleRole=\"Button\"` for action-only links.\n\n### Responsive behavior\n\nIf there is not enough space, the text of the `ui5-link` becomes truncated.\nIf the `wrappingType` property is set to `\"Normal\"`, the text is displayed\non several lines instead of being truncated.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Link\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is triggered either with a mouse/tap\nor by using the Enter key.\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\n### **CSS Parts:**\n - **endIcon** - Used to style the provided endIcon within the link\n- **icon** - Used to style the provided icon within the link",
       "attributes": [
         {
           "name": "accessibility-attributes",
@@ -2307,7 +2312,7 @@
         },
         {
           "name": "accessible-role",
-          "description": "Defines the ARIA role of the component.\n\n**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.",
+          "description": "Defines the ARIA role of the component.\n\n**Note:** Set the role to <code>LinkAccessibleRole.Button</code> when the link triggers an action instead of navigating (when the <code>href</code> property is not defined). Otherwise, the component keeps the default <code>\"Link\"</code> role, and some screen readers (for example, JAWS in browse mode) cannot activate it, as a link with no <code>href</code> has no destination to navigate to.",
           "values": [{ "name": "Button" }, { "name": "Link" }]
         },
         {
@@ -3259,8 +3264,8 @@
       "references": []
     },
     {
-      "name": "ui5-number-input",
-      "description": "### Overview\n\nThe `ui5-number-input` component is a numeric input field. It allows users to enter, edit and select numeric values.\n\n### Usage\n\nThe default step is 1 but the app developer can set a different one.\n\nApp developers can set a maximum and minimum value for `ui5-number-input`.\nThe increase/decrease button and the up/down keyboard navigation become disabled when\nthe value reaches the max/min or a new value is entered from the input which is greater/less than the max/min.\n\n#### When to use:\n\n- To enter or adjust numeric values.\n- To adjust values for a specific step.\n\n#### When not to use:\n\n- To enter a static number (for example, postal code, phone number, or ID). In this case,\nuse the regular `ui5-input` instead.\n- To enter dates and times. In this case, use date/time related components instead.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/NumberInput.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if its default action is\nprevented, the component will not update the value state.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
+      "name": "ui5-numeric-input",
+      "description": "### Overview\n\nThe `ui5-numeric-input` component is a numeric input field. It allows users to enter, edit and select numeric values.\n\n### Usage\n\nThe default step is 1 but the app developer can set a different one.\n\nApp developers can set a maximum and minimum value for `ui5-numeric-input`.\nThe increase/decrease button and the up/down keyboard navigation become disabled when\nthe value reaches the max/min or a new value is entered from the input which is greater/less than the max/min.\n\n#### When to use:\n\n- To enter or adjust numeric values.\n- To adjust values for a specific step.\n\n#### When not to use:\n\n- To enter a static number (for example, postal code, phone number, or ID). In this case,\nuse the regular `ui5-input` instead.\n- To enter dates and times. In this case, use date/time related components instead.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/NumericInput.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if its default action is\nprevented, the component will not update the value state.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
       "attributes": [
         {
           "name": "accessible-name",
@@ -5106,6 +5111,15 @@
           "description": "Receives id(or many ids) of the elements that label the textarea.",
           "values": []
         },
+        {
+          "name": "counter-mode",
+          "description": "Determines when the character counter of the component is displayed.\n\nAvailable options are:\n\n- `None` - The counter is never shown and `maxlength` acts as a hard cap.\n- `Always` - The counter is always visible below the component.\n- `Auto` - The counter is shown only when the component is focused, when the character limit\nis exceeded, or when `valueState` is `Critical` or `Negative`. Space is always reserved to\nprevent layout shifts.\n\n**Note:** When set to a value other than `None`, this property takes precedence over the\ndeprecated `showExceededText` property.",
+          "values": [
+            { "name": "Auto" },
+            { "name": "None" },
+            { "name": "Always" }
+          ]
+        },
         {
           "name": "disabled",
           "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.",

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.27.1",
+  "version": "2.28.0-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -39,7 +39,7 @@
             },
             {
               "name": "fallback-icon",
-              "description": "Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).\n\t- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
+              "description": "Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters or empty initials).\n\t- If the initials do not fit in the shape at the current size (e.g. WWW at size XS).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
               "value": { "type": "string", "default": "\"employee\"" }
             },
             {
@@ -49,7 +49,7 @@
             },
             {
               "name": "initials",
-              "description": "Defines the displayed initials.\n\nUp to three Latin letters can be displayed as initials.",
+              "description": "Defines the displayed initials.\n\nUp to three letters from an alphabetic script can be displayed as initials.\nAll scripts used in SAP-supported languages are accepted, except logographic and\npure syllabic scripts where the concept of initials does not apply: Han (Chinese,\nJapanese kanji), Hiragana, and Katakana. Korean (Hangul) is supported.\nIf the letters do not fit inside the avatar shape at the current size, the fallback\nicon is shown instead.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
@@ -124,7 +124,7 @@
               },
               {
                 "name": "fallback-icon",
-                "description": "Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters, unsupported languages or empty initials).\n\t- If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
+                "description": "Defines the name of the fallback icon, which should be displayed in the following cases:\n\n\t- If the initials are not valid (more than 3 letters or empty initials).\n\t- If the initials do not fit in the shape at the current size (e.g. WWW at size XS).\n\t- If the image src is wrong.\n\n**Note:** If not set, a default fallback icon \"employee\" is displayed.\n\n**Note:** You should import the desired icon first, then use its name as \"fallback-icon\".\n\n`import \"@ui5/webcomponents-icons/dist/{icon_name}.js\"`\n\n`<ui5-avatar fallback-icon=\"alert\">`\n\nSee all the available icons in the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).",
                 "value": { "type": "string" }
               },
               {
@@ -134,7 +134,7 @@
               },
               {
                 "name": "initials",
-                "description": "Defines the displayed initials.\n\nUp to three Latin letters can be displayed as initials.",
+                "description": "Defines the displayed initials.\n\nUp to three letters from an alphabetic script can be displayed as initials.\nAll scripts used in SAP-supported languages are accepted, except logographic and\npure syllabic scripts where the concept of initials does not apply: Han (Chinese,\nJapanese kanji), Hiragana, and Katakana. Korean (Hangul) is supported.\nIf the letters do not fit inside the avatar shape at the current size, the fallback\nicon is shown instead.",
                 "value": { "type": "string | undefined" }
               },
               {
@@ -1930,7 +1930,7 @@
         },
         {
           "name": "ui5-combobox",
-          "description": "### Overview\n\nThe `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n### Structure\nThe `ui5-combobox` consists of the following elements:\n\n-  Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Working with Values\n\nThe ComboBox offers two ways to work with item selection:\n\n**1. Display Text Only (using `value`):**\n```html\n<ui5-combobox value=\"Germany\">\n  <ui5-cb-item text=\"Germany\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\"></ui5-cb-item>\n</ui5-combobox>\n```\nUse this approach when the displayed text is sufficient for your needs.\n\n**2. Unique Identifiers - Recommended (using `selectedValue` and item `value`):**\n```html\n<ui5-combobox value=\"Germany\" selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```\nThis is the recommended approach when you need to work with unique identifiers (IDs, codes) separate from display text.\nThe `selectedValue` property references the `value` property of the selected item.\nIn forms, the item's `value` (e.g., \"DE\") will be submitted instead of the display text.\n\n**Important:** Do not mix the `selectedValue` approach with the deprecated `selected` property on items.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.\n- [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.\n- [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.\n- [Down] - Selects the next matching item in the picker.\n- [Up] - Selects the previous matching item in the picker.\n- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - Moves selection up by page size (10 items by default).\n- [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.\n- [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter, focusout or an item is selected.\n- **close** - Fired when the dropdown is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.\n- **open** - Fired when the dropdown is opened.\n- **selection-change** - Fired when selection is changed by user interaction\n\n### **Slots:**\n - **default** - Defines the component items.\n- **icon** - Defines the icon to be displayed in the input field.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.",
+          "description": "### Overview\n\nThe `ui5-combobox` component represents a drop-down menu with a list of the available options and a text input field to narrow down the options.\n\nIt is commonly used to enable users to select an option from a predefined list.\n\n### Structure\nThe `ui5-combobox` consists of the following elements:\n\n-  Input field - displays the selected option or a custom user entry. Users can type to narrow down the list or enter their own value.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Working with Values\n\nThe ComboBox offers two ways to work with item selection:\n\n**1. Display Text Only (using `value`):**\n```html\n<ui5-combobox value=\"Germany\">\n  <ui5-cb-item text=\"Germany\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\"></ui5-cb-item>\n</ui5-combobox>\n```\nUse this approach when the displayed text is sufficient for your needs.\n\n**2. Unique Identifiers - Recommended (using `selectedValue` and item `value`):**\n```html\n<ui5-combobox value=\"Germany\" selected-value=\"DE\">\n  <ui5-cb-item text=\"Germany\" value=\"DE\"></ui5-cb-item>\n  <ui5-cb-item text=\"France\" value=\"FR\"></ui5-cb-item>\n</ui5-combobox>\n```\nThis is the recommended approach when you need to work with unique identifiers (IDs, codes) separate from display text.\nThe `selectedValue` property references the `value` property of the selected item.\nIn forms, the item's `value` (e.g., \"DE\") will be submitted instead of the display text.\n\n**Important:** Do not mix the `selectedValue` approach with the deprecated `selected` property on items.\n\n### Keyboard Handling\n\nThe `ui5-combobox` provides advanced keyboard handling.\n\n- [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.\n- [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.\n- [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.\n- [Down] - Selects the next matching item in the picker.\n- [Up] - Selects the previous matching item in the picker.\n- [Page Down] - Moves selection down by page size (10 items by default).\n- [Page Up] - Moves selection up by page size (10 items by default).\n- [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.\n- [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.\n- [Ctrl]+[Alt]+[F8] or [Command]+[Option]+[F8] - Focuses the first link in the value state message, if available. Pressing [Tab] moves the focus to the next link in the value state message, or closes the value state message if there are no more links.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ComboBox.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter, focusout or an item is selected.\n- **close** - Fired when the dropdown is closed.\n- **input** - Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed.\n- **load-items** - Fired when the application should provide items for the component to render.\nThe event is fired either when text is input or when the user presses arrow down on a combo-box with no items.\n- **open** - Fired when the dropdown is opened.\n- **selection-change** - Fired when selection is changed by user interaction\n\n### **Slots:**\n - **default** - Defines the component items.\n- **icon** - Defines the icon to be displayed in the input field.\n- **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\nThe value state message slot should contain only one root element.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the `ui5-combobox` is in `Information`, `Critical` or `Negative` value state.",
           "doc-url": "",
           "attributes": [
             {
@@ -2042,6 +2042,10 @@
               "name": "input",
               "description": "Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed."
             },
+            {
+              "name": "load-items",
+              "description": "Fired when the application should provide items for the component to render.\nThe event is fired either when text is input or when the user presses arrow down on a combo-box with no items."
+            },
             {
               "name": "open",
               "description": "Fired when the dropdown is opened."
@@ -2146,6 +2150,10 @@
                 "name": "input",
                 "description": "Fired when typing in input or clear icon is pressed.\n\n**Note:** filterValue property is updated, input is changed."
               },
+              {
+                "name": "load-items",
+                "description": "Fired when the application should provide items for the component to render.\nThe event is fired either when text is input or when the user presses arrow down on a combo-box with no items."
+              },
               {
                 "name": "open",
                 "description": "Fired when the dropdown is opened."
@@ -4921,9 +4929,14 @@
           "attributes": [
             {
               "name": "accessible-name",
-              "description": "Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.\nWhen set, it is also rendered as a native `title` tooltip.",
+              "description": "Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.\nWhen set, it is also rendered as a native `title` tooltip, unless `hideTooltip` is set.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "hide-tooltip",
+              "description": "Defines whether the native `title` tooltip, derived from `accessibleName`, is displayed.\n\n**Note:** When set, the `accessibleName` is still announced by screen readers, but no\n`title` tooltip is rendered.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "name",
               "description": "Defines the icon name to be displayed.\n\n**Note:** Make sure you import the desired icon before using it.",
@@ -4940,9 +4953,14 @@
             "properties": [
               {
                 "name": "accessible-name",
-                "description": "Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.\nWhen set, it is also rendered as a native `title` tooltip.",
+                "description": "Defines the accessible name of the icon.\n\n**Note:** This property is used for accessibility purposes and will be announced by screen readers.\nWhen set, it is also rendered as a native `title` tooltip, unless `hideTooltip` is set.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "hide-tooltip",
+                "description": "Defines whether the native `title` tooltip, derived from `accessibleName`, is displayed.\n\n**Note:** When set, the `accessibleName` is still announced by screen readers, but no\n`title` tooltip is rendered.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "name",
                 "description": "Defines the icon name to be displayed.\n\n**Note:** Make sure you import the desired icon before using it.",
@@ -5021,7 +5039,7 @@
         },
         {
           "name": "ui5-link",
-          "description": "### Overview\nThe `ui5-link` is a hyperlink component that is used to navigate to other\napps and web pages, or to trigger actions.\nIt is a clickable text element, visualized in such a way that it stands out\nfrom the standard text.\nOn hover, it changes its style to an underlined text to provide additional feedback to the user.\n\n### Usage\n\nYou can set the `ui5-link` to be enabled or disabled.\n\nTo create a visual hierarchy in large lists of links, you can set the less important links as\n`Subtle` or the more important ones as `Emphasized`,\nby using the `design` property.\n\nIf the `href` property is set, the link behaves as the HTML\nanchor tag (`<a></a>`) and opens the specified URL in the given target frame (`target` property).\nTo specify where the linked content is opened, you can use the `target` property.\n\n### Responsive behavior\n\nIf there is not enough space, the text of the `ui5-link` becomes truncated.\nIf the `wrappingType` property is set to `\"Normal\"`, the text is displayed\non several lines instead of being truncated.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Link\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is triggered either with a mouse/tap\nor by using the Enter key.\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\n### **CSS Parts:**\n - **endIcon** - Used to style the provided endIcon within the link\n- **icon** - Used to style the provided icon within the link",
+          "description": "### Overview\nThe `ui5-link` is a hyperlink component that is used to navigate to other\napps and web pages, or to trigger actions.\nIt is a clickable text element, visualized in such a way that it stands out\nfrom the standard text.\nOn hover, it changes its style to an underlined text to provide additional feedback to the user.\n\n### Usage\n\nYou can set the `ui5-link` to be enabled or disabled.\n\nTo create a visual hierarchy in large lists of links, you can set the less important links as\n`Subtle` or the more important ones as `Emphasized`,\nby using the `design` property.\n\nIf the `href` property is set, the link behaves as the HTML\nanchor tag (`<a></a>`) and opens the specified URL in the given target frame (`target` property).\nTo specify where the linked content is opened, you can use the `target` property.\n\n### Navigation vs. Action\n\nThe `ui5-link` supports two distinct use cases. Choosing the right one is important for accessibility:\n\n- **Navigation**: set the `href` property (and optionally `target`). The component behaves as a\nstandard anchor tag, and the browser handles navigation, which also enables native\naffordances such as open-in-new-tab, copy link, and hover preview.\n- **Action**: when the link triggers an in-page action (for example, opening a dialog) instead of\nnavigating, leave `href` unset and set `accessibleRole` to `\"Button\"`. This exposes the component\nwith a `button` role, which assistive technologies activate reliably.\n\n**Note:** A link that triggers an action but keeps the default `\"Link\"` role (with no `href`) cannot be\nactivated by some screen readers, such as JAWS in browse mode, because a link without `href` has\nno destination to navigate to. Always set `accessibleRole=\"Button\"` for action-only links.\n\n### Responsive behavior\n\nIf there is not enough space, the text of the `ui5-link` becomes truncated.\nIf the `wrappingType` property is set to `\"Normal\"`, the text is displayed\non several lines instead of being truncated.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Link\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is triggered either with a mouse/tap\nor by using the Enter key.\n\n### **Slots:**\n - **default** - Defines the text of the component.\n\n**Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.\n\n### **CSS Parts:**\n - **endIcon** - Used to style the provided endIcon within the link\n- **icon** - Used to style the provided icon within the link",
           "doc-url": "",
           "attributes": [
             {
@@ -5049,7 +5067,7 @@
             },
             {
               "name": "accessible-role",
-              "description": "Defines the ARIA role of the component.\n\n**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.",
+              "description": "Defines the ARIA role of the component.\n\n**Note:** Set the role to <code>LinkAccessibleRole.Button</code> when the link triggers an action instead of navigating (when the <code>href</code> property is not defined). Otherwise, the component keeps the default <code>\"Link\"</code> role, and some screen readers (for example, JAWS in browse mode) cannot activate it, as a link with no <code>href</code> has no destination to navigate to.",
               "value": {
                 "type": "\"Button\" | \"Link\"",
                 "default": "\"Link\""
@@ -5146,7 +5164,7 @@
               },
               {
                 "name": "accessible-role",
-                "description": "Defines the ARIA role of the component.\n\n**Note:** Use the <code>LinkAccessibleRole.Button</code> role in cases when navigation is not expected to occur and the href property is not defined.",
+                "description": "Defines the ARIA role of the component.\n\n**Note:** Set the role to <code>LinkAccessibleRole.Button</code> when the link triggers an action instead of navigating (when the <code>href</code> property is not defined). Otherwise, the component keeps the default <code>\"Link\"</code> role, and some screen readers (for example, JAWS in browse mode) cannot activate it, as a link with no <code>href</code> has no destination to navigate to.",
                 "value": { "type": "\"Button\" | \"Link\"" }
               },
               {
@@ -7360,8 +7378,8 @@
           }
         },
         {
-          "name": "ui5-number-input",
-          "description": "### Overview\n\nThe `ui5-number-input` component is a numeric input field. It allows users to enter, edit and select numeric values.\n\n### Usage\n\nThe default step is 1 but the app developer can set a different one.\n\nApp developers can set a maximum and minimum value for `ui5-number-input`.\nThe increase/decrease button and the up/down keyboard navigation become disabled when\nthe value reaches the max/min or a new value is entered from the input which is greater/less than the max/min.\n\n#### When to use:\n\n- To enter or adjust numeric values.\n- To adjust values for a specific step.\n\n#### When not to use:\n\n- To enter a static number (for example, postal code, phone number, or ID). In this case,\nuse the regular `ui5-input` instead.\n- To enter dates and times. In this case, use date/time related components instead.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/NumberInput.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if its default action is\nprevented, the component will not update the value state.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
+          "name": "ui5-numeric-input",
+          "description": "### Overview\n\nThe `ui5-numeric-input` component is a numeric input field. It allows users to enter, edit and select numeric values.\n\n### Usage\n\nThe default step is 1 but the app developer can set a different one.\n\nApp developers can set a maximum and minimum value for `ui5-numeric-input`.\nThe increase/decrease button and the up/down keyboard navigation become disabled when\nthe value reaches the max/min or a new value is entered from the input which is greater/less than the max/min.\n\n#### When to use:\n\n- To enter or adjust numeric values.\n- To adjust values for a specific step.\n\n#### When not to use:\n\n- To enter a static number (for example, postal code, phone number, or ID). In this case,\nuse the regular `ui5-input` instead.\n- To enter dates and times. In this case, use date/time related components instead.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/NumericInput.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **input** - Fired when the value of the component changes at each keystroke.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if its default action is\nprevented, the component will not update the value state.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.",
           "doc-url": "",
           "attributes": [
             {
@@ -11559,6 +11577,14 @@
               "description": "Receives id(or many ids) of the elements that label the textarea.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "counter-mode",
+              "description": "Determines when the character counter of the component is displayed.\n\nAvailable options are:\n\n- `None` - The counter is never shown and `maxlength` acts as a hard cap.\n- `Always` - The counter is always visible below the component.\n- `Auto` - The counter is shown only when the component is focused, when the character limit\nis exceeded, or when `valueState` is `Critical` or `Negative`. Space is always reserved to\nprevent layout shifts.\n\n**Note:** When set to a value other than `None`, this property takes precedence over the\ndeprecated `showExceededText` property.",
+              "value": {
+                "type": "\"Auto\" | \"None\" | \"Always\"",
+                "default": "\"None\""
+              }
+            },
             {
               "name": "disabled",
               "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.",
@@ -11669,6 +11695,11 @@
                 "description": "Receives id(or many ids) of the elements that label the textarea.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "counter-mode",
+                "description": "Determines when the character counter of the component is displayed.\n\nAvailable options are:\n\n- `None` - The counter is never shown and `maxlength` acts as a hard cap.\n- `Always` - The counter is always visible below the component.\n- `Auto` - The counter is shown only when the component is focused, when the character limit\nis exceeded, or when `valueState` is `Critical` or `Negative`. Space is always reserved to\nprevent layout shifts.\n\n**Note:** When set to a value other than `None`, this property takes precedence over the\ndeprecated `showExceededText` property.",
+                "value": { "type": "\"Auto\" | \"None\" | \"Always\"" }
+              },
               {
                 "name": "disabled",
                 "description": "Indicates whether the user can interact with the component or not.\n\n**Note:** A disabled component is completely noninteractive.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.27.1",
+  "version": "2.28.0-rc.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -56,22 +56,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.27.1",
-    "@ui5/webcomponents-icons": "2.27.1",
-    "@ui5/webcomponents-icons-business-suite": "2.27.1",
-    "@ui5/webcomponents-icons-tnt": "2.27.1",
-    "@ui5/webcomponents-localization": "2.27.1",
-    "@ui5/webcomponents-theming": "2.27.1"
+    "@ui5/webcomponents-base": "2.28.0-rc.0",
+    "@ui5/webcomponents-icons": "2.28.0-rc.0",
+    "@ui5/webcomponents-icons-business-suite": "2.28.0-rc.0",
+    "@ui5/webcomponents-icons-tnt": "2.28.0-rc.0",
+    "@ui5/webcomponents-localization": "2.28.0-rc.0",
+    "@ui5/webcomponents-theming": "2.28.0-rc.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.27.1",
+    "@ui5/webcomponents-tools": "2.28.0-rc.0",
     "cypress": "15.18.1",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.2.7"
   },
-  "gitHead": "ff63f995f9c5c132fd43afe7eec2ee5bad38be71"
+  "gitHead": "650422545256f62e673b1ab8dc47996cdaa6b4d2"
 }