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

package/dist/types/InputSuggestionsFilter.js

@@ -0,0 +1,29 @@
+/**
+ * Different filtering types of the Input.
+ * @public
+ */
+var InputSuggestionsFilter;
+(function (InputSuggestionsFilter) {
+    /**
+     * Defines filtering by first symbol of each word of item's text.
+     * @public
+     */
+    InputSuggestionsFilter["StartsWithPerTerm"] = "StartsWithPerTerm";
+    /**
+     * Defines filtering by starting symbol of item's text.
+     * @public
+     */
+    InputSuggestionsFilter["StartsWith"] = "StartsWith";
+    /**
+     * Defines contains filtering.
+     * @public
+     */
+    InputSuggestionsFilter["Contains"] = "Contains";
+    /**
+     * Removes any filtering applied while typing
+     * @public
+     */
+    InputSuggestionsFilter["None"] = "None";
+})(InputSuggestionsFilter || (InputSuggestionsFilter = {}));
+export default InputSuggestionsFilter;
+//# sourceMappingURL=InputSuggestionsFilter.js.map

package/dist/types/InputSuggestionsFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputSuggestionsFilter.js","sourceRoot":"","sources":["../../src/types/InputSuggestionsFilter.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACF,IAAK,sBAwBL;AAxBA,WAAK,sBAAsB;IACxB;;;OAGG;IACH,iEAAuC,CAAA;IAEvC;;;OAGG;IACH,mDAAyB,CAAA;IAEzB;;;OAGG;IACH,+CAAqB,CAAA;IAErB;;;OAGG;IACH,uCAAa,CAAA;AACjB,CAAC,EAxBK,sBAAsB,KAAtB,sBAAsB,QAwB3B;AAED,eAAe,sBAAsB,CAAC","sourcesContent":["/**\n * Different filtering types of the Input.\n * @public\n */\n enum InputSuggestionsFilter {\n    /**\n     * Defines filtering by first symbol of each word of item's text.\n     * @public\n     */\n    StartsWithPerTerm = \"StartsWithPerTerm\",\n\n    /**\n     * Defines filtering by starting symbol of item's text.\n     * @public\n     */\n    StartsWith = \"StartsWith\",\n\n    /**\n     * Defines contains filtering.\n     * @public\n     */\n    Contains = \"Contains\",\n\n    /**\n     * Removes any filtering applied while typing\n     * @public\n     */\n    None = \"None\",\n}\n\nexport default InputSuggestionsFilter;\n"]}

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

@@ -1964,6 +1964,16 @@
           "name": "open",
           "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.",
           "values": []
+        },
+        {
+          "name": "filter",
+          "description": "Defines the filter type of the component.",
+          "values": [
+            { "name": "None" },
+            { "name": "StartsWithPerTerm" },
+            { "name": "StartsWith" },
+            { "name": "Contains" }
+          ]
         }
       ],
       "references": []
@@ -1997,7 +2007,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\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- **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 - **icon** - Used to style the provided icon within the link\n- **endIcon** - Used to style the provided endIcon 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### 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\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 - **icon** - Used to style the provided icon within the link\n- **endIcon** - Used to style the provided endIcon within the link",
       "attributes": [
         {
           "name": "disabled",
@@ -2621,7 +2631,7 @@
     },
     {
       "name": "ui5-multi-combobox",
-      "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n-  Tokenizer - a list of tokens with selected options.\n-  Input field - displays the selected option/s as token/s. Users can type to filter the list.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the `UP` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\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#### Tokens\n\n-  Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n-  Delete -  deletes the token and focuses the previous token.\n-  Backspace -  deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.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 or clear icon is pressed.\n- **open** - Fired when the dropdown is opened.\n- **close** - Fired when the dropdown is closed.\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 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### **CSS Parts:**\n - **token-\\{index\\}** - Used to style each token(where `token-0` corresponds to the first item)",
+      "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n-  Tokenizer - a list of tokens with selected options.\n-  Input field - displays the selected option/s as token/s. Users can type to filter the list.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the `UP` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\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#### Tokens\n\n-  Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n-  Delete -  deletes the token and focuses the previous token.\n-  Backspace -  deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.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 or clear icon is pressed.\n- **open** - Fired when the dropdown is opened.\n- **close** - Fired when the dropdown is closed.\n- **selection-change** - Fired when selection is changed by user interaction.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Slots:**\n - **default** - Defines the component 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### **CSS Parts:**\n - **token-\\{index\\}** - Used to style each token(where `token-0` corresponds to the first item)",
       "attributes": [
         {
           "name": "value",
@@ -2863,6 +2873,16 @@
           "name": "open",
           "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.",
           "values": []
+        },
+        {
+          "name": "filter",
+          "description": "Defines the filter type of the component.",
+          "values": [
+            { "name": "None" },
+            { "name": "StartsWithPerTerm" },
+            { "name": "StartsWith" },
+            { "name": "Contains" }
+          ]
         }
       ],
       "references": []
@@ -3025,7 +3045,7 @@
         },
         {
           "name": "modal",
-          "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.",
+          "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.",
           "values": []
         },
         {
@@ -3038,6 +3058,11 @@
           "description": "Determines if there is no enough space, the component can be placed\nover the target.",
           "values": []
         },
+        {
+          "name": "resizable",
+          "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.",
+          "values": []
+        },
         {
           "name": "opener",
           "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
@@ -3417,7 +3442,7 @@
         },
         {
           "name": "modal",
-          "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.",
+          "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.",
           "values": []
         },
         {
@@ -3430,6 +3455,11 @@
           "description": "Determines if there is no enough space, the component can be placed\nover the target.",
           "values": []
         },
+        {
+          "name": "resizable",
+          "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.",
+          "values": []
+        },
         {
           "name": "opener",
           "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",

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.18.0",
+  "version": "2.19.0-rc.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3913,6 +3913,14 @@
               "name": "open",
               "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "filter",
+              "description": "Defines the filter type of the component.",
+              "value": {
+                "type": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [
@@ -4045,6 +4053,13 @@
                 "name": "open",
                 "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "filter",
+                "description": "Defines the filter type of the component.",
+                "value": {
+                  "type": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\""
+                }
               }
             ],
             "events": [
@@ -4139,7 +4154,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- **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 - **icon** - Used to style the provided icon within the link\n- **endIcon** - Used to style the provided endIcon 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### 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 - **icon** - Used to style the provided icon within the link\n- **endIcon** - Used to style the provided endIcon within the link",
           "doc-url": "",
           "attributes": [
             {
@@ -4229,10 +4244,6 @@
             }
           ],
           "slots": [
-            {
-              "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": "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."
@@ -5515,7 +5526,7 @@
         },
         {
           "name": "ui5-multi-combobox",
-          "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n-  Tokenizer - a list of tokens with selected options.\n-  Input field - displays the selected option/s as token/s. Users can type to filter the list.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the `UP` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\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#### Tokens\n\n-  Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n-  Delete -  deletes the token and focuses the previous token.\n-  Backspace -  deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.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 or clear icon is pressed.\n- **open** - Fired when the dropdown is opened.\n- **close** - Fired when the dropdown is closed.\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 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### **CSS Parts:**\n - **token-\\{index\\}** - Used to style each token(where `token-0` corresponds to the first item)",
+          "description": "### Overview\n\nThe `ui5-multi-combobox` component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items.\n\nThe drop-down list is used for selecting and filtering values, it enables users to select one or more options from a predefined list. The control provides an editable input field to filter the list, and a dropdown arrow to expand/collapse the list of available options.\nThe options in the list have checkboxes that permit multi-selection. Entered values are displayed as tokens.\n### Structure\nThe `ui5-multi-combobox` consists of the following elements:\n\n-  Tokenizer - a list of tokens with selected options.\n-  Input field - displays the selected option/s as token/s. Users can type to filter the list.\n-  Drop-down arrow - expands\\collapses the option list.\n-  Option list - the list of available options.\n\n### Keyboard Handling\n\nThe `ui5-multi-combobox` provides advanced keyboard handling.\n\n#### Picker\nIf the `ui5-multi-combobox` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the `UP` and `DOWN` arrow keys\nto navigate through the available options and select one by pressing the `Space` or `Enter` keys.\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#### Tokens\n\n-  Left/Right arrow keys - moves the focus selection form the currently focused token to the previous/next one (if available).\n-  Delete -  deletes the token and focuses the previous token.\n-  Backspace -  deletes the token and focus the next token.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/MultiComboBox.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 or clear icon is pressed.\n- **open** - Fired when the dropdown is opened.\n- **close** - Fired when the dropdown is closed.\n- **selection-change** - Fired when selection is changed by user interaction.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Slots:**\n - **default** - Defines the component 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### **CSS Parts:**\n - **token-\\{index\\}** - Used to style each token(where `token-0` corresponds to the first item)",
           "doc-url": "",
           "attributes": [
             {
@@ -5634,6 +5645,10 @@
             {
               "name": "selection-change",
               "description": "Fired when selection is changed by user interaction."
+            },
+            {
+              "name": "value-state-change",
+              "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state."
             }
           ],
           "js": {
@@ -5738,6 +5753,10 @@
               {
                 "name": "selection-change",
                 "description": "Fired when selection is changed by user interaction."
+              },
+              {
+                "name": "value-state-change",
+                "description": "Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state."
               }
             ]
           }
@@ -5959,6 +5978,14 @@
               "name": "open",
               "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "filter",
+              "description": "Defines the filter type of the component.",
+              "value": {
+                "type": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [
@@ -6108,6 +6135,13 @@
                 "name": "open",
                 "description": "Defines whether the suggestions picker is open.\nThe picker will not open if the `showSuggestions` property is set to `false`, the input is disabled or the input is readonly.\nThe picker will close automatically and `close` event will be fired if the input is not in the viewport.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "filter",
+                "description": "Defines the filter type of the component.",
+                "value": {
+                  "type": "\"None\" | \"StartsWithPerTerm\" | \"StartsWith\" | \"Contains\""
+                }
               }
             ],
             "events": [
@@ -6431,7 +6465,7 @@
             },
             {
               "name": "modal",
-              "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.",
+              "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -6444,6 +6478,11 @@
               "description": "Determines if there is no enough space, the component can be placed\nover the target.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "resizable",
+              "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "opener",
               "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
@@ -6560,7 +6599,7 @@
               },
               {
                 "name": "modal",
-                "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.",
+                "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.",
                 "value": { "type": "boolean" }
               },
               {
@@ -6573,6 +6612,11 @@
                 "description": "Determines if there is no enough space, the component can be placed\nover the target.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "resizable",
+                "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "opener",
                 "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
@@ -7153,7 +7197,7 @@
             },
             {
               "name": "modal",
-              "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.",
+              "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -7166,6 +7210,11 @@
               "description": "Determines if there is no enough space, the component can be placed\nover the target.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "resizable",
+              "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "opener",
               "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
@@ -7282,7 +7331,7 @@
               },
               {
                 "name": "modal",
-                "description": "Defines whether the component should close when\nclicking/tapping outside of the popover.\nIf enabled, it blocks any interaction with the background.",
+                "description": "Defines whether the component should close when\nclicking/tapping outside the popover.\nIf enabled, it blocks any interaction with the background.",
                 "value": { "type": "boolean" }
               },
               {
@@ -7295,6 +7344,11 @@
                 "description": "Determines if there is no enough space, the component can be placed\nover the target.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "resizable",
+                "description": "Determines whether the component is resizable.\n**Note:** This property is effective only on desktop devices.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "opener",
                 "description": "Defines the ID or DOM Reference of the element at which the popover is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.19.0-rc.0",
+  "version": "2.19.0-rc.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -52,22 +52,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.19.0-rc.0",
-    "@ui5/webcomponents-icons": "2.19.0-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.19.0-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.19.0-rc.0",
-    "@ui5/webcomponents-localization": "2.19.0-rc.0",
-    "@ui5/webcomponents-theming": "2.19.0-rc.0"
+    "@ui5/webcomponents-base": "2.19.0-rc.2",
+    "@ui5/webcomponents-icons": "2.19.0-rc.2",
+    "@ui5/webcomponents-icons-business-suite": "2.19.0-rc.2",
+    "@ui5/webcomponents-icons-tnt": "2.19.0-rc.2",
+    "@ui5/webcomponents-localization": "2.19.0-rc.2",
+    "@ui5/webcomponents-theming": "2.19.0-rc.2"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.19.0-rc.0",
+    "@ui5/webcomponents-tools": "2.19.0-rc.2",
     "cypress": "^15.3.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "73753f6b8c6d08421f9e270b07df370f632faed7"
+  "gitHead": "4407982a1dd6a3799413303d1157fc5e9fb96260"
 }

package/src/ColorPickerTemplate.tsx

@@ -112,7 +112,7 @@ export default function ColorPickerTemplate(this: ColorPicker) {
 							id="alpha"
 							disabled={this.inputsDisabled}
 							class="ui5-color-channel-input"
-							value={String(this._alpha)}
+							value={this._alphaTemp ?? String(this._alpha)}
 							accessibleName={this.alphaInputLabel}
 							onChange={this._handleAlphaChange}
 							onInput={this._handleAlphaInput}

package/src/InputTemplate.tsx

@@ -33,8 +33,8 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						inner-input-with-icon={!!this.icon.length}
 						disabled={this.disabled}
 						readonly={this._readonly}
+						value={this.value}
 						required={this.required}
-						value={this._innerValue}
 						placeholder={this._placeholder}
 						maxlength={this.maxlength}
 						role={this.accInfo.role}

package/src/ListBoxItemGroupTemplate.tsx

@@ -16,7 +16,7 @@ export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { ite
 			onDragLeave={this._ondragleave}
 		>
 			{this.hasHeader &&
-				<ListItemGroupHeader focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.Group}>
+				<ListItemGroupHeader focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.Group} wrappingType={this.getGroupHeaderWrapping()} >
 					{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
 				</ListItemGroupHeader>
 			}

package/src/MenuItemTemplate.tsx

@@ -5,7 +5,6 @@ import Button from "./Button.js";
 import List from "./List.js";
 import BusyIndicator from "./BusyIndicator.js";
 import navBackIcon from "@ui5/webcomponents-icons/dist/nav-back.js";
-import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
 import checkIcon from "@ui5/webcomponents-icons/dist/accept.js";
 import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import Icon from "./Icon.js";
@@ -116,18 +115,15 @@ function listItemPostContent(this: MenuItem) {
 								{this.text}
 							</div>
 						</div>
-						<Button
-							icon={declineIcon}
-							design="Transparent"
-							aria-label={this.labelClose}
-							onClick={this._closeAll}
-						/>
 					</div >
 				</>
 			)
 		}
 
-		<div id={`${this._id}-menu-main`}>
+		<div
+			id={`${this._id}-menu-main`}
+			class={this.loading ? "menu-busy-indicator-main" : ""}
+		>
 			{
 				this.items.length ? (
 					<List
@@ -154,5 +150,17 @@ function listItemPostContent(this: MenuItem) {
 				/>
 			}
 		</div >
+		{
+			this.isPhone && (
+				<div slot="footer" class="ui5-menu-dialog-footer">
+					<Button
+						design="Transparent"
+						onClick={this._closeAll}
+					>
+						{this.labelCancel}
+					</Button>
+				</div>
+			)
+		}
 	</ResponsivePopover>;
 }

package/src/MenuTemplate.tsx

@@ -3,7 +3,6 @@ import ResponsivePopover from "./ResponsivePopover.js";
 import List from "./List.js";
 import BusyIndicator from "./BusyIndicator.js";
 import Button from "./Button.js";
-import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
 
 export default function MenuTemplate(this: Menu) {
 	return (
@@ -31,16 +30,11 @@ export default function MenuTemplate(this: Menu) {
 							{this.headerText}
 						</h1>
 					</div>
-					<Button
-						icon={declineIcon}
-						design="Transparent"
-						aria-label={this.labelClose}
-						onClick={this._close}
-					/>
 				</div>
 			}
 			<div
 				id={`${this._id}-menu-main`}
+				class={this.loading ? "ui5-menu-busy-indicator-main" : ""}
 			>
 				{this.items.length ?
 					(<List
@@ -68,6 +62,16 @@ export default function MenuTemplate(this: Menu) {
 					)
 				}
 			</div>
+			{this.isPhone &&
+				<div slot="footer" class="ui5-menu-dialog-footer">
+					<Button
+						design="Transparent"
+						onClick={this._close}
+					>
+						{this.labelCancel}
+					</Button>
+				</div>
+			}
 		</ResponsivePopover >
 	);
 }

package/src/PopoverTemplate.tsx

@@ -1,3 +1,5 @@
+import Icon from "./Icon.js";
+import resizeCorner from "@ui5/webcomponents-icons/dist/resize-corner.js";
 import type Popover from "./Popover.js";
 import PopupTemplate from "./PopupTemplate.js";
 import Title from "./Title.js";
@@ -32,5 +34,13 @@ function afterContent(this: Popover) {
 				<slot name="footer"></slot>
 			</footer>
 		}
+
+		{this._showResizeHandle &&
+			<div class="ui5-popover-resize-handle"
+				 onMouseDown={this._onResizeMouseDown}
+			>
+				<Icon name={resizeCorner} />
+			</div>
+		}
 	</>);
 }

package/src/StepInputTemplate.tsx

@@ -13,6 +13,7 @@ export default function StepInputTemplate(this: StepInput) {
 			onKeyDown={this._onkeydown}
 			onFocusIn={this._onfocusin}
 			onFocusOut={this._onfocusout}
+			onWheel={this._onMouseWheel}
 		>
 			{/* Decrement Icon */}
 			{!this.readonly &&

package/src/TreeItemBaseTemplate.tsx

@@ -2,7 +2,7 @@ import type TreeItemBase from "./TreeItemBase.js";
 import ListItemTemplate from "./ListItemTemplate.js";
 import Icon from "./Icon.js";
 import navigationDownArrow from "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
-import navigatioRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
+import navigationRightArrow from "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
 import type { ListItemHooks } from "./ListItemTemplate.js";
 
 const predefinedHooks: Partial<ListItemHooks> = {
@@ -31,7 +31,7 @@ function listItemPreContent(this: TreeItemBase) {
 				<Icon
 					part="toggle-icon"
 					class="ui5-li-tree-toggle-icon"
-					name={this.expanded ? navigationDownArrow : navigatioRightArrow}
+					name={this.expanded ? navigationDownArrow : navigationRightArrow}
 					showTooltip={true}
 					accessibleName={this.iconAccessibleName}
 					// @ts-expect-error

package/src/i18n/messagebundle.properties

@@ -772,8 +772,8 @@ SPLIT_BUTTON_ARROW_BUTTON_TOOLTIP=Open Menu
 #XACT: ARIA announcement for the Menu Back button aria-label attribute
 MENU_BACK_BUTTON_ARIA_LABEL=Back
 
-#XACT: ARIA announcement for the Menu Close button aria-label attribute
-MENU_CLOSE_BUTTON_ARIA_LABEL=Decline
+#XBUT: Menu Cancel button on mobile devices
+MENU_CANCEL_BUTTON_TEXT=Cancel
 
 #XACT: ARIA information for the Menu popover
 MENU_POPOVER_ACCESSIBLE_NAME=Select an option from the menu

package/src/i18n/messagebundle_ar.properties

@@ -127,6 +127,10 @@ COLORPICKER_TOGGLE_MODE_TOOLTIP=تغيير نمط اللون
 
 COLORPICKER_ALPHA=ألفا
 
+COLORPICKER_PERCENTAGE=%
+
+COLORPICKER_COLOR_MODE_CHANGED=تم تغيير نمط اللون إلى {0}. القيم الحالية: {1}.
+
 DATEPICKER_OPEN_ICON_TITLE=فتح أداة الانتقاء
 
 DATEPICKER_OPEN_ICON_TITLE_OPENED=إغلاق أداة الانتقاء
@@ -466,6 +470,22 @@ CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT=Shift + F4
 
 CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT=Shift + F4
 
+CALENDAR_HEADER_MONTH_NEXT_BUTTON_TITLE=الشهر التالي
+
+CALENDAR_HEADER_YEAR_NEXT_BUTTON_TITLE=السنة التالية
+
+CALENDAR_HEADER_YEAR_RANGE_NEXT_BUTTON_TITLE=نطاق السنة التالية
+
+CALENDAR_HEADER_MONTH_NEXT_BUTTON_SHORTCUT=صفحة إلى أعلى
+
+CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_TITLE=الشهر السابق
+
+CALENDAR_HEADER_YEAR_PREVIOUS_BUTTON_TITLE=السنة السابقة
+
+CALENDAR_HEADER_YEAR_RANGE_PREVIOUS_BUTTON_TITLE=نطاق السنة السابقة
+
+CALENDAR_HEADER_MONTH_PREVIOUS_BUTTON_SHORTCUT=صفحة إلى أسفل
+
 DAY_PICKER_SELECTED_RANGE_START={0} أول تاريخ للنطاق
 
 DAY_PICKER_SELECTED_RANGE_BETWEEN={0} في نطاق محدد
@@ -651,3 +671,7 @@ DYNAMIC_DATE_RANGE_LAST_COMBINED_TEXT=آخر X {0} (متضمن)
 DYNAMIC_DATE_RANGE_NEXT_COMBINED_TEXT=X {0} التالي (متضمن)
 
 DYNAMIC_DATE_RANGE_INCLUDED_TEXT=(متضمن)
+
+ICON_ARIA_TYPE_IMAGE=الصورة
+
+ICON_ARIA_TYPE_INTERACTIVE=الزر