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

package/dist/types/ButtonBadgeDesign.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBadgeDesign.js","sourceRoot":"","sources":["../../src/types/ButtonBadgeDesign.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,iBAmBJ;AAnBD,WAAK,iBAAiB;IACrB;;;OAGG;IACH,8CAAyB,CAAA;IACzB;;;;;OAKG;IACH,gDAA2B,CAAA;IAE3B;;;OAGG;IACH,kDAA6B,CAAA;AAC9B,CAAC,EAnBI,iBAAiB,KAAjB,iBAAiB,QAmBrB;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["/**\n * Determines where the badge will be placed and how it will be styled.\n * @since 2.7.0\n * @public\n */\nenum ButtonBadgeDesign {\n\t/**\n\t * The badge is displayed after the text, inside the button.\n\t * @public\n\t */\n\tInlineText = \"InlineText\",\n\t/**\n\t * The badge is displayed at the top-end corner of the button.\n\t *\n\t * **Note:** It's highly recommended to use the OverlayText design mode only in cozy density.\n\t * @public\n\t */\n\tOverlayText = \"OverlayText\",\n\n\t/**\n\t * The badge is displayed as an attention dot.\n\t * @public\n\t */\n\tAttentionDot = \"AttentionDot\",\n}\n\nexport default ButtonBadgeDesign;\n"]}

package/dist/types/TableGrowingMode.d.ts

@@ -11,6 +11,8 @@ declare enum TableGrowingMode {
     Button = "Button",
     /**
      * Scroll to load more data.
+     *
+     * **Note:** If the table is not scrollable, a growing button will be rendered instead to ensure growing functionality.
      * @public
      */
     Scroll = "Scroll"

package/dist/types/TableGrowingMode.js

@@ -12,6 +12,8 @@ var TableGrowingMode;
     TableGrowingMode["Button"] = "Button";
     /**
      * Scroll to load more data.
+     *
+     * **Note:** If the table is not scrollable, a growing button will be rendered instead to ensure growing functionality.
      * @public
      */
     TableGrowingMode["Scroll"] = "Scroll";

package/dist/types/TableGrowingMode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableGrowingMode.js","sourceRoot":"","sources":["../../src/types/TableGrowingMode.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,gBAYJ;AAZD,WAAK,gBAAgB;IACpB;;;OAGG;IACH,qCAAiB,CAAA;IAEjB;;;OAGG;IACH,qCAAiB,CAAA;AAClB,CAAC,EAZI,gBAAgB,KAAhB,gBAAgB,QAYpB;AAED,eAAe,gBAAgB,CAAC","sourcesContent":["/**\n * Growing mode of the <ui5-table> component.\n *\n * @public\n */\nenum TableGrowingMode {\n\t/**\n\t * Renders a growing button, which can be pressed to load more data.\n\t * @public\n\t */\n\tButton = \"Button\",\n\n\t/**\n\t * Scroll to load more data.\n\t * @public\n\t */\n\tScroll = \"Scroll\",\n}\n\nexport default TableGrowingMode;\n"]}
+{"version":3,"file":"TableGrowingMode.js","sourceRoot":"","sources":["../../src/types/TableGrowingMode.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,gBAcJ;AAdD,WAAK,gBAAgB;IACpB;;;OAGG;IACH,qCAAiB,CAAA;IAEjB;;;;;OAKG;IACH,qCAAiB,CAAA;AAClB,CAAC,EAdI,gBAAgB,KAAhB,gBAAgB,QAcpB;AAED,eAAe,gBAAgB,CAAC","sourcesContent":["/**\n * Growing mode of the <ui5-table> component.\n *\n * @public\n */\nenum TableGrowingMode {\n\t/**\n\t * Renders a growing button, which can be pressed to load more data.\n\t * @public\n\t */\n\tButton = \"Button\",\n\n\t/**\n\t * Scroll to load more data.\n\t *\n\t * **Note:** If the table is not scrollable, a growing button will be rendered instead to ensure growing functionality.\n\t * @public\n\t */\n\tScroll = \"Scroll\",\n}\n\nexport default TableGrowingMode;\n"]}

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

@@ -200,7 +200,7 @@
     },
     {
       "name": "ui5-button",
-      "description": "### Overview\n\nThe `ui5-button` component represents a simple push button.\nIt enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing\ncertain keyboard keys, such as Enter.\n\n### Usage\n\nFor the `ui5-button` UI, you can define text, icon, or both. You can also specify\nwhether the text or the icon is displayed first.\n\nYou can choose from a set of predefined types that offer different\nstyling to correspond to the triggered action.\n\nYou can set the `ui5-button` as enabled or disabled. An enabled\n`ui5-button` can be pressed by clicking or tapping it. The button changes\nits style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Button.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.\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 - **button** - Used to style the native button element",
+      "description": "### Overview\n\nThe `ui5-button` component represents a simple push button.\nIt enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing\ncertain keyboard keys, such as Enter.\n\n### Usage\n\nFor the `ui5-button` UI, you can define text, icon, or both. You can also specify\nwhether the text or the icon is displayed first.\n\nYou can choose from a set of predefined types that offer different\nstyling to correspond to the triggered action.\n\nYou can set the `ui5-button` as enabled or disabled. An enabled\n`ui5-button` can be pressed by clicking or tapping it. The button changes\nits style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Button.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.\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- **badge** - Adds a badge to the button.\n\n### **CSS Parts:**\n - **button** - Used to style the native button element\n- **icon** - Used to style the icon in the native button element\n- **endIcon** - Used to style the end icon in the native button element",
       "attributes": [
         {
           "name": "design",
@@ -276,6 +276,27 @@
       ],
       "references": []
     },
+    {
+      "name": "ui5-button-badge",
+      "description": "The `ui5-button-badge` component defines a badge that appears in the `ui5-button`.\n\n * ### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ButtonBadge.js\";`\n\n\n---\n\n\n",
+      "attributes": [
+        {
+          "name": "design",
+          "description": "Determines where the badge should be placed and how it should be styled.",
+          "values": [
+            { "name": "InlineText" },
+            { "name": "OverlayText" },
+            { "name": "AttentionDot" }
+          ]
+        },
+        {
+          "name": "text",
+          "description": "Defines the text of the component.\n\n**Note:** Text is not needed when the `design` property is set to `AttentionDot`.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "ui5-calendar",
       "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\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### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n\n### **CSS Parts:**\n - **day-cell** - Used to style the day cells.\n- **day-cell-selected** - Used to style the day cells when selected.\n- **day-cell-selected-between** - Used to style the day cells in between of selected dates in range.\n- **month-cell** - Used to style the month cells.\n- **month-cell-selected** - Used to style the month cells when selected.\n- **month-cell-selected-between** - Used to style the day cells in between of selected months in range.\n- **year-cell** - Used to style the year cells.\n- **year-cell-selected** - Used to style the year cells when selected.\n- **year-cell-selected-between** - Used to style the day cells in between of selected years in range.",
@@ -726,7 +747,7 @@
         },
         {
           "name": "show-more-colors",
-          "description": "Defines whether the user can choose a custom color from a component.\n\n**Note:** In order to use this property you need to import the following module: `\"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js\"`",
+          "description": "Defines whether the user can choose a custom color from a component.",
           "values": []
         },
         {
@@ -1600,7 +1621,7 @@
     },
     {
       "name": "ui5-input",
-      "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`,\nthat are displayed in a popover right under the input.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n**Note:** If you are using the `ui5-input` as a single npm module,\ndon't forget to import the `InputSuggestions` module from\n\"@ui5/webcomponents/dist/features/InputSuggestions.js\"\nto enable the suggestions functionality.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`\n\n`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";` (optional - for input suggestions support)\n\n\n---\n\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,\nand when a suggestion item has been selected.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n- **open** - Fired when the suggestions picker is open.\n- **close** - Fired when the suggestions picker is closed.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Importing the Input Suggestions Support feature:\n\n`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";`\n\nautomatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience.\n- **icon** - Defines the icon to be displayed in the component.\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 component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n\n### **CSS Parts:**\n - **root** - Used to style the root DOM element of the Input component\n- **input** - Used to style the native input element\n- **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text",
+      "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`,\nthat are displayed in a popover right under the input.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`\n\n\n---\n\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,\nand when a suggestion item has been selected.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n- **open** - Fired when the suggestions picker is open.\n- **close** - Fired when the suggestions picker is closed.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n- **icon** - Defines the icon to be displayed in the component.\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 component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n\n### **CSS Parts:**\n - **root** - Used to style the root DOM element of the Input component\n- **input** - Used to style the native input element\n- **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text",
       "attributes": [
         {
           "name": "disabled",
@@ -1663,7 +1684,7 @@
         },
         {
           "name": "show-suggestions",
-          "description": "Defines whether the component should show suggestions, if such are present.\n\n**Note:** You need to import the `InputSuggestions` module\nfrom `\"@ui5/webcomponents/dist/features/InputSuggestions.js\"` to enable this functionality.",
+          "description": "Defines whether the component should show suggestions, if such are present.",
           "values": []
         },
         {
@@ -2121,7 +2142,7 @@
     },
     {
       "name": "ui5-menu",
-      "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Structure\n\nThe `ui5-menu` can hold two types of entities:\n\n- `ui5-menu-item` components\n- `ui5-menu-separator` - used to separate menu items with a line\n\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nNote: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fired when an item is being clicked.\n\n**Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.\n- **before-open** - Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.\n- **open** - Fired after the menu is opened.\n- **before-close** - Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.\n- **close** - Fired after the menu is closed.\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.",
+      "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Structure\n\nThe `ui5-menu` can hold two types of entities:\n\n- `ui5-menu-item` components\n- `ui5-menu-separator` - used to separate menu items with a line\n\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nwhen there is `endContent` :\n- `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself\n- `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items\n\nNote: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **item-click** - Fired when an item is being clicked.\n\n**Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.\n- **before-open** - Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.\n- **open** - Fired after the menu is opened.\n- **before-close** - Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.\n- **close** - Fired after the menu is closed.\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.",
       "attributes": [
         {
           "name": "header-text",
@@ -2476,7 +2497,7 @@
         },
         {
           "name": "show-suggestions",
-          "description": "Defines whether the component should show suggestions, if such are present.\n\n**Note:** You need to import the `InputSuggestions` module\nfrom `\"@ui5/webcomponents/dist/features/InputSuggestions.js\"` to enable this functionality.",
+          "description": "Defines whether the component should show suggestions, if such are present.",
           "values": []
         },
         {
@@ -3371,7 +3392,7 @@
     },
     {
       "name": "ui5-split-button",
-      "description": "### Overview\n\n`ui5-split-button` enables users to trigger actions. It is constructed of two separate actions -\ndefault action and arrow action that can be activated by clicking or tapping, or by\npressing certain keyboard keys - `Space` or `Enter` for default action,\nand `Arrow Down` or `Arrow Up` for arrow action.\n\n### Usage\n\n`ui5-split-button` consists two separate buttons:\n\n- for the first one (default action) you can define some `text` or an `icon`, or both.\n- the second one (arrow action) contains only `slim-arrow-down` icon.\n\nYou can choose a `design` from a set of predefined types (the same as for ui5-button) that offer\ndifferent styling to correspond to the triggered action. Both text and arrow actions have the same design.\n\nYou can set the `ui5-split-button` as enabled or disabled. Both parts of an enabled\n`ui5-split-button` can be pressed by clicking or tapping it, or by certain keys, which changes\nthe style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-split-button` appears inactive and any of the two buttons\ncannot be pressed.\n\n### Keyboard Handling\n\n- `Space` or `Enter` - triggers the default action\n- `Shift` or `Escape` - if `Space` is pressed, releases the default action button without triggering the click event.\n- `Arrow Down`, `Arrow Up`, `Alt`+`Arrow Down`, `Alt`+`Arrow Up`, or `F4` - triggers the arrow action\nThere are separate events that are fired on activating of `ui5-split-button` parts:\n\n- `click` for the first button (default action)\n- `arrow-click` for the second button (arrow action)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SplitButton.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the user clicks on the default action.\n- **arrow-click** - Fired when the user clicks on the arrow action.\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.",
+      "description": "### Overview\n\n`ui5-split-button` enables users to trigger actions. It is constructed of two separate actions -\ndefault action and arrow action that can be activated by clicking or tapping, or by\npressing certain keyboard keys - `Space` or `Enter` for default action,\nand `Arrow Down` or `Arrow Up` for arrow action.\n\n### Usage\n\n`ui5-split-button` consists two separate buttons:\n\n- for the first one (default action) you can define some `text` or an `icon`, or both.\n- the second one (arrow action) contains only `slim-arrow-down` icon.\n\nYou can choose a `design` from a set of predefined types (the same as for ui5-button) that offer\ndifferent styling to correspond to the triggered action. Both text and arrow actions have the same design.\n\nYou can set the `ui5-split-button` as enabled or disabled. Both parts of an enabled\n`ui5-split-button` can be pressed by clicking or tapping it, or by certain keys, which changes\nthe style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-split-button` appears inactive and any of the two buttons\ncannot be pressed.\n\n### Keyboard Handling\n\n- `Space` or `Enter` - triggers the default action\n- `Shift` or `Escape` - if `Space` is pressed, releases the default action button without triggering the click event.\n- `Arrow Down`, `Arrow Up`, `Alt`+`Arrow Down`, `Alt`+`Arrow Up`, or `F4` - triggers the arrow action\nThere are separate events that are fired on activating of `ui5-split-button` parts:\n\n- `click` for the first button (default action)\n- `arrow-click` for the second button (arrow action)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SplitButton.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the user clicks on the default action.\n- **arrow-click** - Fired when the user clicks on the arrow action.\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 - **button** - Used to style the native button element\n- **icon** - Used to style the icon in the native button element\n- **endIcon** - Used to style the end icon in the native button element",
       "attributes": [
         {
           "name": "icon",
@@ -3763,11 +3784,11 @@
     },
     {
       "name": "ui5-table-growing",
-      "description": "### Overview\n\nThe `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities\nto the table.\n\nThe component offers two options:\n* Button - a More button is displayed, clicking it will load more data.\n* Scroll - additional data is loaded automatically when the user scrolls to the end of the table.\n\n### Usage\n\nThe `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-growing type=\"Button\" growing-text=\"More\" slot=\"features\"></ui5-table-growing>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableGrowing.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **load-more** - Fired when the growing button is pressed or the user scrolls to the end of the table.",
+      "description": "### Overview\n\nThe `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities\nto the table.\n\nThe component offers two options:\n* Button - a More button is displayed, clicking it will load more data.\n* Scroll - additional data is loaded automatically when the user scrolls to the end of the table.\n\n### Usage\n\nThe `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-growing type=\"Button\" growing-text=\"More\" slot=\"features\"></ui5-table-growing>\n</ui5-table>\n```\n\n**Notes**:\n* When the `ui5-table-growing` component is used with the `Scroll` type and the table is currently not scrollable,\nthe component will render a growing button instead to ensure growing capabilities until the table becomes scrollable.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableGrowing.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **load-more** - Fired when the growing button is pressed or the user scrolls to the end of the table.",
       "attributes": [
         {
           "name": "type",
-          "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable, this option is the same as the Button.",
+          "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable,\na growing button will be rendered instead to ensure growing functionality.",
           "values": [{ "name": "Button" }, { "name": "Scroll" }]
         },
         {
@@ -3977,7 +3998,7 @@
     },
     {
       "name": "ui5-tag",
-      "description": "### Overview\n\nThe `ui5-tag` is a component which serves\nthe purpose to attract the user attention to some piece\nof information (state, quantity, condition, etc.).\nIt can contain icon and text information, and its design can be chosen from specific design types.\n\n### Usage Guidelines\n\n- If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n- Colors can be semantic or not semantic.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Tag.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`\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- **icon** - Defines the icon to be displayed in the component.",
+      "description": "### Overview\n\nThe `ui5-tag` is a component which serves\nthe purpose to attract the user attention to some piece\nof information (state, quantity, condition, etc.).\nIt can contain icon and text information, and its design can be chosen from specific design types.\n\n### Usage Guidelines\n\n- If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n- Colors can be semantic or not semantic.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Tag.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **click** - Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`\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- **icon** - Defines the icon to be displayed in the component.\n\n### **CSS Parts:**\n - **root** - Used to style the root element.",
       "attributes": [
         {
           "name": "design",

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.7.0-rc.1",
+  "version": "2.7.0-rc.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -452,7 +452,7 @@
         },
         {
           "name": "ui5-button",
-          "description": "### Overview\n\nThe `ui5-button` component represents a simple push button.\nIt enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing\ncertain keyboard keys, such as Enter.\n\n### Usage\n\nFor the `ui5-button` UI, you can define text, icon, or both. You can also specify\nwhether the text or the icon is displayed first.\n\nYou can choose from a set of predefined types that offer different\nstyling to correspond to the triggered action.\n\nYou can set the `ui5-button` as enabled or disabled. An enabled\n`ui5-button` can be pressed by clicking or tapping it. The button changes\nits style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Button.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.\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 - **button** - Used to style the native button element",
+          "description": "### Overview\n\nThe `ui5-button` component represents a simple push button.\nIt enables users to trigger actions by clicking or tapping the `ui5-button`, or by pressing\ncertain keyboard keys, such as Enter.\n\n### Usage\n\nFor the `ui5-button` UI, you can define text, icon, or both. You can also specify\nwhether the text or the icon is displayed first.\n\nYou can choose from a set of predefined types that offer different\nstyling to correspond to the triggered action.\n\nYou can set the `ui5-button` as enabled or disabled. An enabled\n`ui5-button` can be pressed by clicking or tapping it. The button changes\nits style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-button` appears inactive and cannot be pressed.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Button.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the component is activated either with a\nmouse/tap or by using the Enter or Space key.\n\n**Note:** The event will not be fired if the `disabled`\nproperty is set to `true`.\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- **badge** - Adds a badge to the button.\n\n### **CSS Parts:**\n - **button** - Used to style the native button element\n- **icon** - Used to style the icon in the native button element\n- **endIcon** - Used to style the end icon in the native button element",
           "doc-url": "",
           "attributes": [
             {
@@ -532,7 +532,8 @@
             {
               "name": "default",
               "description": "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."
-            }
+            },
+            { "name": "badge", "description": "Adds a badge to the button." }
           ],
           "events": [
             {
@@ -613,6 +614,44 @@
             ]
           }
         },
+        {
+          "name": "ui5-button-badge",
+          "description": "The `ui5-button-badge` component defines a badge that appears in the `ui5-button`.\n\n * ### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/ButtonBadge.js\";`\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "design",
+              "description": "Determines where the badge should be placed and how it should be styled.",
+              "value": {
+                "type": "\"InlineText\" | \"OverlayText\" | \"AttentionDot\"",
+                "default": "\"AttentionDot\""
+              }
+            },
+            {
+              "name": "text",
+              "description": "Defines the text of the component.\n\n**Note:** Text is not needed when the `design` property is set to `AttentionDot`.",
+              "value": { "type": "string", "default": "\"\"" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "design",
+                "description": "Determines where the badge should be placed and how it should be styled.",
+                "value": {
+                  "type": "\"InlineText\" | \"OverlayText\" | \"AttentionDot\""
+                }
+              },
+              {
+                "name": "text",
+                "description": "Defines the text of the component.\n\n**Note:** Text is not needed when the `design` property is set to `AttentionDot`.",
+                "value": { "type": "string" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "ui5-calendar",
           "description": "### Overview\n\nThe `ui5-calendar` component allows users to select one or more dates.\n\nCurrently selected dates are represented with instances of `ui5-date` as\nchildren of the `ui5-calendar`. The value property of each `ui5-date` must be a\ndate string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.\nWhenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances\nof `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the\n`selection-change` event. This is useful if you want to control the selected dates externally.\n\n### Usage\n\nThe user can navigate to a particular date by:\n\n- Pressing over a month inside the months view\n- Pressing over an year inside the years view\n\nThe user can confirm a date selection by pressing over a date inside the days view.\n\n### Keyboard Handling\nThe `ui5-calendar` provides advanced keyboard handling.\nWhen a picker is showed and focused the user can use the following keyboard\nshortcuts in order to perform a navigation:\n\n- Day picker:\n\n- [F4] - Shows month picker\n- [Shift] + [F4] - Shows year picker\n- [Page Up] - Navigate to the previous month\n- [Page Down] - Navigate to the next month\n- [Shift] + [Page Up] - Navigate to the previous year\n- [Shift] + [Page Down] - Navigate to the next year\n- [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards\n- [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards\n- [Home] - Navigate to the first day of the week\n- [End] - Navigate to the last day of the week\n- [Ctrl] + [Home] - Navigate to the first day of the month\n- [Ctrl] + [End] - Navigate to the last day of the month\n\n- Month picker:\n\n- [Page Up] - Navigate to the previous year\n- [Page Down] - Navigate to the next year\n- [Home] - Navigate to the first month of the current row\n- [End] - Navigate to the last month of the current row\n- [Ctrl] + [Home] - Navigate to the first month of the current year\n- [Ctrl] + [End] - Navigate to the last month of the year\n\n- Year picker:\n\n- [Page Up] - Navigate to the previous year range\n- [Page Down] - Navigate the next year range\n- [Home] - Navigate to the first year of the current row\n- [End] - Navigate to the last year of the current row\n- [Ctrl] + [Home] - Navigate to the first year of the current year range\n- [Ctrl] + [End] - Navigate to the last year of the current year range\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### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n</script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Calendar.js\";`\n---\n\n\n### **Events:**\n - **selection-change** - Fired when the selected dates change.\n\n**Note:** If you call `preventDefault()` for this event, the component will not\ncreate instances of `ui5-date` for the newly selected dates. In that case you should do this manually.\n\n### **Slots:**\n - **calendarLegend** - Defines the calendar legend of the component.\n- **default** - Defines the selected date or dates (depending on the `selectionMode` property)\nfor this calendar as instances of `ui5-date` or `ui5-date-range`.\nUse `ui5-date` for single or multiple selection, and `ui5-date-range` for range selection.\n- **specialDates** - Defines the special dates, visually emphasized in the calendar.\n\n### **CSS Parts:**\n - **day-cell** - Used to style the day cells.\n- **day-cell-selected** - Used to style the day cells when selected.\n- **day-cell-selected-between** - Used to style the day cells in between of selected dates in range.\n- **month-cell** - Used to style the month cells.\n- **month-cell-selected** - Used to style the month cells when selected.\n- **month-cell-selected-between** - Used to style the day cells in between of selected months in range.\n- **year-cell** - Used to style the year cells.\n- **year-cell-selected** - Used to style the year cells when selected.\n- **year-cell-selected-between** - Used to style the day cells in between of selected years in range.",
@@ -1428,7 +1467,7 @@
             },
             {
               "name": "show-more-colors",
-              "description": "Defines whether the user can choose a custom color from a component.\n\n**Note:** In order to use this property you need to import the following module: `\"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js\"`",
+              "description": "Defines whether the user can choose a custom color from a component.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -1480,7 +1519,7 @@
               },
               {
                 "name": "show-more-colors",
-                "description": "Defines whether the user can choose a custom color from a component.\n\n**Note:** In order to use this property you need to import the following module: `\"@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js\"`",
+                "description": "Defines whether the user can choose a custom color from a component.",
                 "value": { "type": "boolean" }
               },
               {
@@ -3276,7 +3315,7 @@
         },
         {
           "name": "ui5-input",
-          "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`,\nthat are displayed in a popover right under the input.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n**Note:** If you are using the `ui5-input` as a single npm module,\ndon't forget to import the `InputSuggestions` module from\n\"@ui5/webcomponents/dist/features/InputSuggestions.js\"\nto enable the suggestions functionality.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.js\";`\n\n`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";` (optional - for input suggestions support)\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,\nand when a suggestion item has been selected.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n- **open** - Fired when the suggestions picker is open.\n- **close** - Fired when the suggestions picker is closed.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Importing the Input Suggestions Support feature:\n\n`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";`\n\nautomatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience.\n- **icon** - Defines the icon to be displayed in the component.\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 component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n\n### **CSS Parts:**\n - **root** - Used to style the root DOM element of the Input component\n- **input** - Used to style the native input element\n- **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text",
+          "description": "### Overview\n\nThe `ui5-input` component allows the user to enter and edit text or numeric values in one line.\n\nAdditionally, you can provide `suggestionItems`,\nthat are displayed in a popover right under the input.\n\nThe text field can be editable or read-only (`readonly` property),\nand it can be enabled or disabled (`disabled` property).\nTo visualize semantic states, such as \"Negative\" or \"Critical\", the `valueState` property is provided.\nWhen the user makes changes to the text, the change event is fired,\nwhich enables you to react on any text change.\n\n### Keyboard Handling\nThe `ui5-input` provides the following keyboard shortcuts:\n\n- [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.\n- [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.\n- [Down] - Focuses the next matching item in the suggestion list. Selection-change event is fired.\n- [Up] - Focuses the previous matching item in the suggestion list. Selection-change event is fired.\n- [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.\n- [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.\n- [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.\n- [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Input.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,\nand when a suggestion item has been selected.\n- **select** - Fired when some text has been selected.\n- **selection-change** - Fired when the user navigates to a suggestion item via the ARROW keys,\nas a preview, before the final selection.\n- **open** - Fired when the suggestions picker is open.\n- **close** - Fired when the suggestions picker is closed.\n\n### **Slots:**\n - **default** - Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n- **icon** - Defines the icon to be displayed in the component.\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 component is in `Information`, `Critical` or `Negative` value state.\n\n**Note:** If the component has `suggestionItems`,\nthe `valueStateMessage` would be displayed as part of the same popover, if used on desktop, or dialog - on phone.\n\n### **CSS Parts:**\n - **root** - Used to style the root DOM element of the Input component\n- **input** - Used to style the native input element\n- **clear-icon** - Used to style the clear icon, which can be pressed to clear user input text",
           "doc-url": "",
           "attributes": [
             {
@@ -3332,7 +3371,7 @@
             },
             {
               "name": "show-suggestions",
-              "description": "Defines whether the component should show suggestions, if such are present.\n\n**Note:** You need to import the `InputSuggestions` module\nfrom `\"@ui5/webcomponents/dist/features/InputSuggestions.js\"` to enable this functionality.",
+              "description": "Defines whether the component should show suggestions, if such are present.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -3364,7 +3403,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items.\n\n**Note:** Importing the Input Suggestions Support feature:\n\n`import \"@ui5/webcomponents/dist/features/InputSuggestions.js\";`\n\nautomatically imports the `<ui5-suggestion-item>` and `<ui5-suggestion-item-group>` for your convenience."
+              "description": "Defines the suggestion items.\n\n**Note:** The suggestions would be displayed only if the `showSuggestions`\nproperty is set to `true`.\n\n**Note:** The `<ui5-suggestion-item>`, `<ui5-suggestion-item-group>` and `ui5-suggestion-item-custom` are recommended to be used as suggestion items."
             },
             {
               "name": "icon",
@@ -3454,7 +3493,7 @@
               },
               {
                 "name": "show-suggestions",
-                "description": "Defines whether the component should show suggestions, if such are present.\n\n**Note:** You need to import the `InputSuggestions` module\nfrom `\"@ui5/webcomponents/dist/features/InputSuggestions.js\"` to enable this functionality.",
+                "description": "Defines whether the component should show suggestions, if such are present.",
                 "value": { "type": "boolean" }
               },
               {
@@ -4375,7 +4414,7 @@
         },
         {
           "name": "ui5-menu",
-          "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Structure\n\nThe `ui5-menu` can hold two types of entities:\n\n- `ui5-menu-item` components\n- `ui5-menu-separator` - used to separate menu items with a line\n\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nNote: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is being clicked.\n\n**Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.\n- **before-open** - Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.\n- **open** - Fired after the menu is opened.\n- **before-close** - Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.\n- **close** - Fired after the menu is closed.\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.",
+          "description": "### Overview\n\n`ui5-menu` component represents a hierarchical menu structure.\n\n### Structure\n\nThe `ui5-menu` can hold two types of entities:\n\n- `ui5-menu-item` components\n- `ui5-menu-separator` - used to separate menu items with a line\n\nAn arbitrary hierarchy structure can be represented by recursively nesting menu items.\n\n### Keyboard Handling\n\nThe `ui5-menu` provides advanced keyboard handling.\nThe user can use the following keyboard shortcuts in order to navigate trough the tree:\n\n- `Arrow Up` / `Arrow Down` - Navigates up and down the menu items that are currently visible.\n- `Arrow Right`, `Space` or `Enter` - Opens a sub-menu if there are menu items nested\nin the currently clicked menu item.\n- `Arrow Left` or `Escape` - Closes the currently opened sub-menu.\n\nwhen there is `endContent` :\n- `Arrow Left` or `ArrowRight` - Navigate between the menu item actions and the menu item itself\n- `Arrow Up` / `Arrow Down` - Navigates up and down the currently visible menu items\n\nNote: if the text ditrection is set to Right-to-left (RTL), `Arrow Right` and `Arrow Left` functionality is swapped.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Menu.js\";`\n---\n\n\n### **Events:**\n - **item-click** - Fired when an item is being clicked.\n\n**Note:** Since 1.17.0 the event is preventable, allowing the menu to remain open after an item is pressed.\n- **before-open** - Fired before the menu is opened. This event can be cancelled, which will prevent the menu from opening.\n\n**Note:** Since 1.14.0 the event is also fired before a sub-menu opens.\n- **open** - Fired after the menu is opened.\n- **before-close** - Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing.\n- **close** - Fired after the menu is closed.\n\n### **Slots:**\n - **default** - Defines the items of this component.\n\n**Note:** Use `ui5-menu-item` and `ui5-menu-separator` for their intended design.",
           "doc-url": "",
           "attributes": [
             {
@@ -5173,7 +5212,7 @@
             },
             {
               "name": "show-suggestions",
-              "description": "Defines whether the component should show suggestions, if such are present.\n\n**Note:** You need to import the `InputSuggestions` module\nfrom `\"@ui5/webcomponents/dist/features/InputSuggestions.js\"` to enable this functionality.",
+              "description": "Defines whether the component should show suggestions, if such are present.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -5297,7 +5336,7 @@
               },
               {
                 "name": "show-suggestions",
-                "description": "Defines whether the component should show suggestions, if such are present.\n\n**Note:** You need to import the `InputSuggestions` module\nfrom `\"@ui5/webcomponents/dist/features/InputSuggestions.js\"` to enable this functionality.",
+                "description": "Defines whether the component should show suggestions, if such are present.",
                 "value": { "type": "boolean" }
               },
               {
@@ -7002,7 +7041,7 @@
         },
         {
           "name": "ui5-split-button",
-          "description": "### Overview\n\n`ui5-split-button` enables users to trigger actions. It is constructed of two separate actions -\ndefault action and arrow action that can be activated by clicking or tapping, or by\npressing certain keyboard keys - `Space` or `Enter` for default action,\nand `Arrow Down` or `Arrow Up` for arrow action.\n\n### Usage\n\n`ui5-split-button` consists two separate buttons:\n\n- for the first one (default action) you can define some `text` or an `icon`, or both.\n- the second one (arrow action) contains only `slim-arrow-down` icon.\n\nYou can choose a `design` from a set of predefined types (the same as for ui5-button) that offer\ndifferent styling to correspond to the triggered action. Both text and arrow actions have the same design.\n\nYou can set the `ui5-split-button` as enabled or disabled. Both parts of an enabled\n`ui5-split-button` can be pressed by clicking or tapping it, or by certain keys, which changes\nthe style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-split-button` appears inactive and any of the two buttons\ncannot be pressed.\n\n### Keyboard Handling\n\n- `Space` or `Enter` - triggers the default action\n- `Shift` or `Escape` - if `Space` is pressed, releases the default action button without triggering the click event.\n- `Arrow Down`, `Arrow Up`, `Alt`+`Arrow Down`, `Alt`+`Arrow Up`, or `F4` - triggers the arrow action\nThere are separate events that are fired on activating of `ui5-split-button` parts:\n\n- `click` for the first button (default action)\n- `arrow-click` for the second button (arrow action)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SplitButton.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the user clicks on the default action.\n- **arrow-click** - Fired when the user clicks on the arrow action.\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.",
+          "description": "### Overview\n\n`ui5-split-button` enables users to trigger actions. It is constructed of two separate actions -\ndefault action and arrow action that can be activated by clicking or tapping, or by\npressing certain keyboard keys - `Space` or `Enter` for default action,\nand `Arrow Down` or `Arrow Up` for arrow action.\n\n### Usage\n\n`ui5-split-button` consists two separate buttons:\n\n- for the first one (default action) you can define some `text` or an `icon`, or both.\n- the second one (arrow action) contains only `slim-arrow-down` icon.\n\nYou can choose a `design` from a set of predefined types (the same as for ui5-button) that offer\ndifferent styling to correspond to the triggered action. Both text and arrow actions have the same design.\n\nYou can set the `ui5-split-button` as enabled or disabled. Both parts of an enabled\n`ui5-split-button` can be pressed by clicking or tapping it, or by certain keys, which changes\nthe style to provide visual feedback to the user that it is pressed or hovered over with\nthe mouse cursor. A disabled `ui5-split-button` appears inactive and any of the two buttons\ncannot be pressed.\n\n### Keyboard Handling\n\n- `Space` or `Enter` - triggers the default action\n- `Shift` or `Escape` - if `Space` is pressed, releases the default action button without triggering the click event.\n- `Arrow Down`, `Arrow Up`, `Alt`+`Arrow Down`, `Alt`+`Arrow Up`, or `F4` - triggers the arrow action\nThere are separate events that are fired on activating of `ui5-split-button` parts:\n\n- `click` for the first button (default action)\n- `arrow-click` for the second button (arrow action)\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/SplitButton.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the user clicks on the default action.\n- **arrow-click** - Fired when the user clicks on the arrow action.\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 - **button** - Used to style the native button element\n- **icon** - Used to style the icon in the native button element\n- **endIcon** - Used to style the end icon in the native button element",
           "doc-url": "",
           "attributes": [
             {
@@ -7919,12 +7958,12 @@
         },
         {
           "name": "ui5-table-growing",
-          "description": "### Overview\n\nThe `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities\nto the table.\n\nThe component offers two options:\n* Button - a More button is displayed, clicking it will load more data.\n* Scroll - additional data is loaded automatically when the user scrolls to the end of the table.\n\n### Usage\n\nThe `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-growing type=\"Button\" growing-text=\"More\" slot=\"features\"></ui5-table-growing>\n</ui5-table>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableGrowing.js\";`\n---\n\n\n### **Events:**\n - **load-more** - Fired when the growing button is pressed or the user scrolls to the end of the table.",
+          "description": "### Overview\n\nThe `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities\nto the table.\n\nThe component offers two options:\n* Button - a More button is displayed, clicking it will load more data.\n* Scroll - additional data is loaded automatically when the user scrolls to the end of the table.\n\n### Usage\n\nThe `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.\nIt has to be slotted inside the `ui5-table` in the `features` slot.\nThe component is not intended to be used as a standalone component.\n\n```html\n<ui5-table>\n\t<ui5-table-growing type=\"Button\" growing-text=\"More\" slot=\"features\"></ui5-table-growing>\n</ui5-table>\n```\n\n**Notes**:\n* When the `ui5-table-growing` component is used with the `Scroll` type and the table is currently not scrollable,\nthe component will render a growing button instead to ensure growing capabilities until the table becomes scrollable.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/TableGrowing.js\";`\n---\n\n\n### **Events:**\n - **load-more** - Fired when the growing button is pressed or the user scrolls to the end of the table.",
           "doc-url": "",
           "attributes": [
             {
               "name": "type",
-              "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable, this option is the same as the Button.",
+              "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable,\na growing button will be rendered instead to ensure growing functionality.",
               "value": {
                 "type": "\"Button\" | \"Scroll\"",
                 "default": "\"Button\""
@@ -7951,7 +7990,7 @@
             "properties": [
               {
                 "name": "type",
-                "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable, this option is the same as the Button.",
+                "description": "Defines the mode of the <code>ui5-table</code> growing.\n\nAvailable options are:\n\nButton - Shows a More button at the bottom of the table, pressing it will load more rows.\n\nScroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable,\na growing button will be rendered instead to ensure growing functionality.",
                 "value": { "type": "\"Button\" | \"Scroll\"" }
               },
               {
@@ -8340,7 +8379,7 @@
         },
         {
           "name": "ui5-tag",
-          "description": "### Overview\n\nThe `ui5-tag` is a component which serves\nthe purpose to attract the user attention to some piece\nof information (state, quantity, condition, etc.).\nIt can contain icon and text information, and its design can be chosen from specific design types.\n\n### Usage Guidelines\n\n- If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n- Colors can be semantic or not semantic.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Tag.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`\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- **icon** - Defines the icon to be displayed in the component.",
+          "description": "### Overview\n\nThe `ui5-tag` is a component which serves\nthe purpose to attract the user attention to some piece\nof information (state, quantity, condition, etc.).\nIt can contain icon and text information, and its design can be chosen from specific design types.\n\n### Usage Guidelines\n\n- If the text is longer than the width of the component, it can wrap, or it can show ellipsis, depending on the `wrappingType` property.\n- Colors can be semantic or not semantic.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Tag.js\";`\n---\n\n\n### **Events:**\n - **click** - Fired when the user clicks on an interactive tag.\n\n**Note:** The event will be fired if the `interactive` property is `true`\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- **icon** - Defines the icon to be displayed in the component.\n\n### **CSS Parts:**\n - **root** - Used to style the root element.",
           "doc-url": "",
           "attributes": [
             {
@@ -10296,6 +10335,14 @@
           "name": "part(button)",
           "description": "Used to style the native button element"
         },
+        {
+          "name": "part(icon)",
+          "description": "Used to style the icon in the native button element"
+        },
+        {
+          "name": "part(endIcon)",
+          "description": "Used to style the end icon in the native button element"
+        },
         {
           "name": "part(day-cell)",
           "description": "Used to style the day cells."
@@ -10588,6 +10635,18 @@
           "name": "part(handle)",
           "description": "Used to style the handle of the `ui5-slider`."
         },
+        {
+          "name": "part(button)",
+          "description": "Used to style the native button element"
+        },
+        {
+          "name": "part(icon)",
+          "description": "Used to style the icon in the native button element"
+        },
+        {
+          "name": "part(endIcon)",
+          "description": "Used to style the end icon in the native button element"
+        },
         {
           "name": "part(slider)",
           "description": "Used to style the track, where the handle is being slid"
@@ -10612,6 +10671,10 @@
           "name": "part(tabstrip)",
           "description": "Used to style the tabstrip of the component"
         },
+        {
+          "name": "part(root)",
+          "description": "Used to style the root element."
+        },
         {
           "name": "part(textarea)",
           "description": "Used to style the native textarea"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.7.0-rc.1",
+  "version": "2.7.0-rc.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -51,19 +51,19 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.7.0-rc.1",
-    "@ui5/webcomponents-icons": "2.7.0-rc.1",
-    "@ui5/webcomponents-icons-business-suite": "2.7.0-rc.1",
-    "@ui5/webcomponents-icons-tnt": "2.7.0-rc.1",
-    "@ui5/webcomponents-localization": "2.7.0-rc.1",
-    "@ui5/webcomponents-theming": "2.7.0-rc.1"
+    "@ui5/webcomponents-base": "2.7.0-rc.2",
+    "@ui5/webcomponents-icons": "2.7.0-rc.2",
+    "@ui5/webcomponents-icons-business-suite": "2.7.0-rc.2",
+    "@ui5/webcomponents-icons-tnt": "2.7.0-rc.2",
+    "@ui5/webcomponents-localization": "2.7.0-rc.2",
+    "@ui5/webcomponents-theming": "2.7.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.7.0-rc.1",
+    "@ui5/webcomponents-tools": "2.7.0-rc.2",
     "chromedriver": "^131.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "2f90ed3982de20cc411a1cda852ee98709b15e33"
+  "gitHead": "26546e81e1e1e3c9186a9540b979ec7032a8cf95"
 }

package/src/ButtonBadgeTemplate.tsx

@@ -0,0 +1,6 @@
+import type ButtonBadge from "./ButtonBadge.js";
+import Tag from "./Tag.js";
+
+export default function ButtonTemplate(this: ButtonBadge) {
+	return <Tag design="Critical" hide-state-icon>{this.text}</Tag>;
+}

package/src/ButtonTemplate.tsx

@@ -11,7 +11,12 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 	return (<>
 		<button
 			type="button"
-			class="ui5-button-root"
+			class={{
+				"ui5-button-root": true,
+				"ui5-button-badge-placement-end": this.badge[0]?.design === "InlineText",
+				"ui5-button-badge-placement-end-top": this.badge[0]?.design === "OverlayText",
+				"ui5-button-badge-dot": this.badge[0]?.design === "AttentionDot",
+			}}
 			disabled={this.disabled}
 			data-sap-focus-ref
 			aria-pressed={injectedProps?.ariaPressed}
@@ -65,6 +70,10 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 			{this.hasButtonType &&
 				<span id="ui5-button-hiddenText-type" aria-hidden="true" class="ui5-hidden-text">{this.buttonTypeText}</span>
 			}
+
+			{this.shouldRenderBadge &&
+				<slot name="badge"/>
+			}
 		</button>
 	</>);
 }

package/src/SelectPopoverTemplate.tsx

@@ -43,7 +43,7 @@ export default function SelectPopoverTemplate(this: Select) {
 									"ui5-select-value-state-dialog-header": true,
 									...this.classes.popoverValueState
 								}}>
-									{valueStateMessage.call(this)}
+									{this._isPickerOpen && valueStateMessage.call(this)}
 								</div>
 							}
 						</div>
@@ -56,7 +56,7 @@ export default function SelectPopoverTemplate(this: Select) {
 							<Icon
 								class="ui5-input-value-state-message-icon"
 								name={this._valueStateMessageInputIcon} />
-							{valueStateMessage.call(this)}
+							{this._isPickerOpen && valueStateMessage.call(this)}
 						</div>
 					}
 

package/src/TagTemplate.tsx

@@ -12,11 +12,12 @@ export default function TagTemplate(this: Tag) {
 						aria-roledescription={this._roleDescription}
 						aria-description={this._valueState}
 						onClick={this._onclick}
+						part="root"
 					>
 						{ content.call(this) }
 					</button>
 					:
-					<div class="ui5-tag-root" title={this._title}>
+					<div class="ui5-tag-root" title={this._title} part="root">
 						{ content.call(this) }
 					</div>
 			}