@ui5/webcomponents 2.1.1 → 2.2.0-rc.1

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

@@ -1488,7 +1488,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.",
+      "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",
       "attributes": [
         {
           "name": "disabled",
@@ -3737,12 +3737,17 @@
     },
     {
       "name": "ui5-text",
-      "description": "<h3>Overview</h3>\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n<h3>Usage</h3>\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n<h3>Responsive behavior</h3>\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the <code>max-lines</code> property,\nby defining the number of lines the text should wrap before start truncating.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Text\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the text of the component.",
+      "description": "<h3>Overview</h3>\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n<h3>Usage</h3>\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n<h3>Responsive behavior</h3>\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the <code>max-lines</code> property,\nby defining the number of lines the text should wrap before start truncating.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Text\";</code>\n\n\n---\n\n\n\n\n### **Slots:**\n - **default** - Defines the text of the component.\n- **default** - Defines the text of the component.",
       "attributes": [
         {
           "name": "max-lines",
           "description": "Defines the number of lines the text should wrap before it truncates.",
           "values": []
+        },
+        {
+          "name": "empty-indicator-mode",
+          "description": "Specifies if an empty indicator should be displayed when there is no text.",
+          "values": [{ "name": "On" }, { "name": "Off" }]
         }
       ],
       "references": []

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.1.1",
+  "version": "2.2.0-rc.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3036,7 +3036,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.",
+          "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",
           "doc-url": "",
           "attributes": [
             {
@@ -7831,16 +7831,25 @@
         },
         {
           "name": "ui5-text",
-          "description": "<h3>Overview</h3>\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n<h3>Usage</h3>\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n<h3>Responsive behavior</h3>\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the <code>max-lines</code> property,\nby defining the number of lines the text should wrap before start truncating.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Text\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the text of the component.",
+          "description": "<h3>Overview</h3>\n\nThe `ui5-text` component displays text that can be used in any content area of an application.\n\n<h3>Usage</h3>\n\n- Use the `ui5-text` if you want to display text inside a form, table, or any other content area.\n- Do not use the `ui5-text` if you need to reference input type of components (use ui5-label).\n\n<h3>Responsive behavior</h3>\n\nThe `ui5-text` component is fully adaptive to all screen sizes.\nBy default, the text will wrap when the space is not enough.\nIn addition, the component supports truncation via the <code>max-lines</code> property,\nby defining the number of lines the text should wrap before start truncating.\n\n<h3>ES6 Module Import</h3>\n\n<code>import \"@ui5/webcomponents/dist/Text\";</code>\n---\n\n\n### **Slots:**\n - **default** - Defines the text of the component.\n- **default** - Defines the text of the component.",
           "doc-url": "",
           "attributes": [
             {
               "name": "max-lines",
               "description": "Defines the number of lines the text should wrap before it truncates.",
               "value": { "type": "number", "default": "Infinity" }
+            },
+            {
+              "name": "empty-indicator-mode",
+              "description": "Specifies if an empty indicator should be displayed when there is no text.",
+              "value": { "type": "\"On\" | \"Off\"", "default": "\"Off\"" }
             }
           ],
           "slots": [
+            {
+              "name": "default",
+              "description": "Defines the text of the component."
+            },
             {
               "name": "default",
               "description": "Defines the text of the component."
@@ -7853,6 +7862,11 @@
                 "name": "max-lines",
                 "description": "Defines the number of lines the text should wrap before it truncates.",
                 "value": { "type": "number" }
+              },
+              {
+                "name": "empty-indicator-mode",
+                "description": "Specifies if an empty indicator should be displayed when there is no text.",
+                "value": { "type": "\"On\" | \"Off\"" }
               }
             ],
             "events": []
@@ -9722,6 +9736,18 @@
           "name": "part(root)",
           "description": "Used to style the outermost wrapper of the `ui5-icon`."
         },
+        {
+          "name": "part(root)",
+          "description": "Used to style the root DOM element of the Input component"
+        },
+        {
+          "name": "part(input)",
+          "description": "Used to style the native input element"
+        },
+        {
+          "name": "part(clear-icon)",
+          "description": "Used to style the clear icon, which can be pressed to clear user input text"
+        },
         {
           "name": "part(icon)",
           "description": "Used to style the provided icon within the link"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.1.1",
+  "version": "2.2.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -50,16 +50,16 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.1.1",
-    "@ui5/webcomponents-icons": "2.1.1",
-    "@ui5/webcomponents-icons-business-suite": "2.1.1",
-    "@ui5/webcomponents-icons-tnt": "2.1.1",
-    "@ui5/webcomponents-localization": "2.1.1",
-    "@ui5/webcomponents-theming": "2.1.1"
+    "@ui5/webcomponents-base": "2.2.0-rc.1",
+    "@ui5/webcomponents-icons": "2.2.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.2.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.2.0-rc.1",
+    "@ui5/webcomponents-localization": "2.2.0-rc.1",
+    "@ui5/webcomponents-theming": "2.2.0-rc.1"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.1.1",
+    "@ui5/webcomponents-tools": "2.2.0-rc.1",
     "chromedriver": "^126.0.0"
   },
-  "gitHead": "fc11d8831e60a1ae88e89affeeef2c9dd1937be0"
+  "gitHead": "a9c2d71dd33a061700108410c9e9ad4dcc1046a8"
 }

package/src/Breadcrumbs.hbs

@@ -29,12 +29,27 @@
 				wrapping-type="None">
 				{{this.innerText}}
 			</ui5-link>
-
-			{{#unless this._isCurrentPageItem}}
+			{{#if this._needsSeparator}}
 				<span class="ui5-breadcrumbs-separator" aria-hidden="true"></span>
-			{{/unless}}
+			{{/if}}
 		</li>
 		{{/each}}
+		{{#unless _endsWithCurrentLinkItem }}
+			{{#if _endsWithCurrentLocation}}
+				<li class="ui5-breadcrumbs-current-location" @click="{{../_onLabelPress}}">
+
+					<span aria-current="page"
+						aria-label="{{_currentLocationAccName}}"
+						role="link"
+						id="{{this._id}}-labelWrapper">
+
+						<ui5-label>
+							{{_currentLocationText}}
+						</ui5-label>
+					</span>
+				</li>
+			{{/if}}
+		{{/unless}}
 	</ol>
 </nav>
 

package/src/ComboBox.hbs

@@ -24,6 +24,7 @@
 		aria-describedby="value-state-description"
 		aria-label="{{ariaLabelText}}"
 		aria-required="{{required}}"
+		aria-controls="{{responsivePopoverId}}"
 		autocomplete="off"
 		data-sap-focus-ref
 	/>

package/src/ComboBoxPopover.hbs

@@ -13,6 +13,7 @@
 	@keydown={{_handlePopoverKeydown}}
 	@focusout={{_handlePopoverFocusout}}
 	accessible-name="{{_popupLabel}}"
+	id="{{responsivePopoverId}}"
 	.open={{open}}
 	.opener={{this}}
 >

package/src/Dialog.hbs

@@ -46,11 +46,11 @@
 		</footer>
 	{{/if}}
 	{{#if _showResizeHandle }}
-		<ui5-icon
-			name="resize-corner"
+		<div 
 			class="ui5-popup-resize-handle"
 			@mousedown="{{_onResizeMouseDown}}">
-		</ui5-icon>
+			<ui5-icon name="resize-corner"></ui5-icon>
+		</div>
 	{{/if}}
 {{/inline}}
 

package/src/Input.hbs

@@ -1,5 +1,6 @@
 <div
 	class="ui5-input-root ui5-input-focusable-element"
+	part="root"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 >
@@ -8,6 +9,7 @@
 
 		<input
 			id="inner"
+			part="input"
 			class="ui5-input-inner"
 			style="{{styles.innerInput}}"
 			type="{{inputType}}"
@@ -44,7 +46,7 @@
 
 		{{#if _effectiveShowClearIcon}}
 			<div @click={{_clear}} @mousedown={{_iconMouseDown}} class="ui5-input-clear-icon-wrapper inputIcon" tabindex="-1">
-				<ui5-icon tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
+				<ui5-icon part="clear-icon" tabindex="-1" class="ui5-input-clear-icon" name="decline" accessible-name="{{clearIconAccessibleName}}"></ui5-icon>
 			</div>
 		{{/if}}
 

package/src/List.hbs

@@ -48,7 +48,7 @@
 			<slot></slot>
 
 			{{#if showNoDataText}}
-				<li id="{{_id}}-nodata" class="ui5-list-nodata">
+				<li tabindex="0" id="{{_id}}-nodata" class="ui5-list-nodata">
 					<div id="{{_id}}-nodata-text" class="ui5-list-nodata-text">
 						{{noDataText}}
 					</div>

package/src/Menu.hbs

@@ -9,6 +9,7 @@
 	prevent-initial-focus
 	hide-arrow
 	allow-target-overlap
+	accessible-name={{acessibleNameText}}
 	@ui5-before-open={{_beforePopoverOpen}}
 	@ui5-open={{_afterPopoverOpen}}
 	@ui5-before-close={{_beforePopoverClose}}

package/src/MenuItem.hbs

@@ -52,6 +52,7 @@
 		sub-menu
 		placement={{placement}}
 		vertical-align="Top"
+		accessible-name={{acessibleNameText}}
 		@ui5-before-open={{_beforePopoverOpen}}
 		@ui5-open={{_afterPopoverOpen}}
 		@ui5-before-close={{_beforePopoverClose}}

package/src/MultiComboBox.hbs

@@ -76,6 +76,7 @@
 		aria-describedby="{{ariaDescribedByText}}"
 		aria-required="{{required}}"
 		aria-label="{{ariaLabelText}}"
+		aria-controls="{{responsivePopoverId}}"
 		autocomplete="off"
 		data-sap-focus-ref
 	/>

package/src/MultiComboBoxPopover.hbs

@@ -2,6 +2,7 @@
 	placement="Bottom"
 	horizontal-align="Start"
 	class="{{classes.popover}}"
+	id="{{responsivePopoverId}}"
 	hide-arrow
 	prevent-initial-focus
 	style="{{styles.suggestionsPopover}}"

package/src/MultiInput.hbs

@@ -27,6 +27,7 @@
 			@mouseup={{valueHelpMouseUp}}
 			class="inputIcon"
 			name="value-help"
+			accessible-name="{{valueHelpLabel}}"
 		></ui5-icon>
 	{{/if}}
 {{/inline}}

package/src/RangeSlider.hbs

@@ -43,7 +43,7 @@
 		aria-labelledby="{{_ariaLabelledByStartHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
@@ -66,7 +66,7 @@
 		aria-labelledby="{{_ariaLabelledByEndHandleRefs}}"
 		aria-disabled="{{_ariaDisabled}}"
 	>
-		<ui5-icon name="direction-arrows" slider-icon></ui5-icon>
+		<ui5-icon name="direction-arrows" mode="Decorative" slider-icon></ui5-icon>
 
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">

package/src/SelectPopover.hbs

@@ -73,8 +73,6 @@
 	{{#if shouldDisplayDefaultValueStateMessage}}
 		{{valueStateText}}
 	{{else}}
-		{{#each valueStateMessageText}}
-			{{this}}
-		{{/each}}
+		<slot name="valueStateMessage"></slot>
 	{{/if}}
 {{/inline}}

package/src/Slider.hbs

@@ -32,7 +32,7 @@
 		data-sap-focus-ref
 		part="handle"
 	>
-			<ui5-icon name="direction-arrows" part="icon-slider" slider-icon></ui5-icon>
+			<ui5-icon mode="Decorative" "direction-arrows" part="icon-slider" slider-icon></ui5-icon>
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
 				<span class="ui5-slider-tooltip-value">{{tooltipValue}}</span>

package/src/SplitButton.hbs

@@ -32,6 +32,8 @@
 		design="{{design}}"
 		icon="slim-arrow-down"
 		tabindex="-1"
+		tooltip="{{accInfo.arrowButton.title}}"
+		.accessibilityAttributes={{accInfo.arrowButton.accessibilityAttributes}}
 		?disabled="{{disabled}}"
 		?active="{{effectiveActiveArrowButton}}"
 		@click="{{_handleArrowButtonAction}}"
@@ -41,7 +43,7 @@
 		@ui5-_active-state-change={{_onArrowButtonActiveStateChange}}
 	>
 	</ui5-button>
-	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accessibilityInfo.description}} {{accessibilityInfo.keyboardHint}} {{accessibleName}}</span>
+	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInfo.root.description}} {{accInfo.root.keyboardHint}} {{accessibleName}}</span>
 	<span id="{{_id}}-invisibleTextDefault" class="ui5-hidden-text">{{textButtonAccText}}</span>
 
 </div>

package/src/Text.hbs

@@ -0,0 +1,8 @@
+<span>
+{{#if _renderEmptyIndicator}}
+	<span class="empty-indicator" aria-hidden="true">{{_emptyIndicatorSymbol}}</span>
+	<span class="empty-indicator-aria-label">{{_emptyIndicatorAriaLabel}}</span>
+{{else}}
+	<slot></slot>
+{{/if}}
+</span>

package/src/i18n/messagebundle.properties

@@ -165,6 +165,11 @@ DATERANGEPICKER_POPOVER_ACCESSIBLE_NAME=Choose Date Range
 
 DELETE=Delete
 
+#XFLD: En dash (–) character to indicate that there is an empty space. In some languages there might be a different symbol used.
+EMPTY_INDICATOR_SYMBOL=\u2013
+#XFLD: ARIA announcement for the empty value.
+EMPTY_INDICATOR_ACCESSIBLE_TEXT=Empty value
+
 FILEUPLOAD_BROWSE=Browse...
 
 #XACT: File uploader title
@@ -274,6 +279,9 @@ MULTIINPUT_ROLEDESCRIPTION_TEXT=Multi Value Input
 #XFLD: Token number indicator which is used to show more tokens
 MULTIINPUT_SHOW_MORE_TOKENS={0} more
 
+#XACT: ARIA announcement for value help
+MULTIINPUT_VALUE_HELP_LABEL=Show Value Help
+
 #XTOL: Tooltip for panel expand title
 PANEL_ICON=Expand/Collapse
 
@@ -502,12 +510,18 @@ SPLIT_BUTTON_DESCRIPTION=Split Button
 #XACT: Aria hint for the keyboard handling support of the Split Button
 SPLIT_BUTTON_KEYBOARD_HINT=Press Space or Enter to trigger default action and Alt + Arrow Down or F4 to trigger arrow action
 
+#XBUT: Tooltip text for 'Arrow' button
+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
 
+#XACT: ARIA information for the Menu popover
+MENU_POPOVER_ACCESSIBLE_NAME=Select an option from the menu
+
 #XTXT: Text for the Navigation Menu Popover hidden text
 NAVIGATION_MENU_POPOVER_HIDDEN_TEXT=Navigation
 

package/src/themes/Breadcrumbs.css

@@ -22,6 +22,19 @@
     display: inline;
 }
 
+.ui5-breadcrumbs-current-location {
+    min-width: 1%;
+    flex: 1 1 auto;
+    /* Fix extra height in ul -> li element */
+    font-size: 0;
+    align-self: center;
+}
+
+.ui5-breadcrumbs-current-location > span:focus {
+    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+    border-radius: var(--_ui5_breadcrumbs_current_location_focus_border_radius);
+}
+
 .ui5-breadcrumbs-dropdown-arrow-link-wrapper[hidden] {
     display: none
 }

package/src/themes/DayPicker.css

@@ -107,7 +107,7 @@
 	height: 100%;
 }
 
-.ui5-dp-item.ui5-dp-item--weeekend {
+.ui5-dp-item.ui5-dp-item--weekend {
 	background: var(--sapLegend_NonWorkingBackground);
 }
 
@@ -117,7 +117,7 @@
 }
 
 
-.ui5-dp-item.ui5-dp-item--weeekend:hover {
+.ui5-dp-item.ui5-dp-item--weekend:hover {
 	background: var(--sapList_Hover_Background);
 	filter: var(--_ui5_daypicker_item_weeekend_filter);
 }
@@ -129,7 +129,7 @@
 }
 
 .ui5-dp-item.ui5-dp-item--othermonth:hover,
-.ui5-dp-item.ui5-dp-item--weeekend.ui5-dp-item--othermonth:hover {
+.ui5-dp-item.ui5-dp-item--weekend.ui5-dp-item--othermonth:hover {
 	color: var(--_ui5_daypicker_item_othermonth_hover_color);
 	background: var(--sapList_Hover_Background);
 }
@@ -328,6 +328,11 @@
 	border-block-start: var(--_ui5_daypicker_special_day_border_top);
 }
 
+.ui5-dp-specialday.NonWorking,
+.ui5-dp-specialday.Working {
+	border-block-start: none;
+}
+
 .ui5-dp-item--selected .ui5-dp-specialday {
 	width: var(--_ui5_daypicker_selected_item_special_day_width);
 }

package/src/themes/Dialog.css

@@ -126,10 +126,16 @@
 
 .ui5-popup-resize-handle {
 	position: absolute;
-	bottom: var(--_ui5_dialog_resize_handle_bottom);
-	inset-inline-end: var(--_ui5_dialog_resize_handle_right);
+	bottom: -0.5rem;
+	inset-inline-end: -0.5rem;
 	cursor: var(--_ui5_dialog_resize_cursor);
-	color: var(--_ui5_dialog_resize_handle_color);
+	width: 1.5rem;
+	height: 1.5rem;
+	border-radius: 50%;
+}
+
+.ui5-popup-resize-handle [ui5-icon] {
+	color: var(--sapButton_Lite_TextColor);
 }
 
 ::slotted([slot="footer"]) {

package/src/themes/List.css

@@ -86,11 +86,21 @@
 	background-color: var(--sapList_Background);
 	border-bottom: 1px solid var(--sapList_BorderColor);
 	padding: 0 1rem !important;
+	outline: none;
 	height: var(--_ui5_list_no_data_height);
 	font-size: var(--_ui5_list_no_data_font_size);
 	font-family: "72override", var(--sapFontFamily);
 }
 
+.ui5-list-nodata:focus::after {
+	content: "";
+	border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	position: absolute;
+	inset: 0.125rem;
+	pointer-events: none;
+	top: calc(50% + 0.125rem);
+}
+
 .ui5-list-nodata-text {
 	overflow: hidden;
 	text-overflow: ellipsis;

package/src/themes/SplitButton.css

@@ -209,7 +209,6 @@
 .ui5-split-arrow-button {
 	border-start-start-radius: var(--_ui5_split_button_hover_border_radius);
 	border-end-start-radius: var(--_ui5_split_button_hover_border_radius);
-	width: 2.25rem;
 	border-color: var(--_ui5_split_text_button_border_color);
 	background-color: var(--_ui5_split_text_button_background_color);
 	position: relative;

package/src/themes/Text.css

@@ -13,8 +13,17 @@
 :host([max-lines]) {
 	display: -webkit-box;
 	-webkit-line-clamp: var(--_ui5_text_max_lines);
-	line-clamp: var(--_ui5_text_max_lines); 
+	line-clamp: var(--_ui5_text_max_lines);
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 	white-space: normal;
 }
+
+.empty-indicator-aria-label {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	user-select: none;
+	left: 0;
+	top: 0;
+	font-size: 0;
+}

package/src/themes/TimePicker.css

@@ -12,7 +12,7 @@
 
 :host {
 	min-width: calc(var(--_ui5_input_min_width) + var(--_ui5_input_icon_width));
-	height: var(--sapElement_Height);
+	height: var(--_ui5_input_height);
 	color: var(--sapField_TextColor);
 	background-color: var(--sapField_Background);
 	border-radius: var(--_ui5-time_picker_border_radius);

package/src/themes/base/Dialog-parameters.css

@@ -1,7 +1,4 @@
 :root {
-	--_ui5_dialog_resize_handle_color: var(--sapButton_Lite_TextColor);
-	--_ui5_dialog_resize_handle_right: -0.25rem;
-	--_ui5_dialog_resize_handle_bottom: -0.0625rem;
 	--_ui5_dialog_header_focus_bottom_offset: 3px;
 	--_ui5_dialog_header_focus_top_offset: 2px;
 	--_ui5_dialog_header_focus_left_offset: 2px;

package/src/themes/sap_horizon/Dialog-parameters.css

@@ -5,7 +5,5 @@
 	--_ui5_dialog_header_focus_top_offset: 1px;
 	--_ui5_dialog_header_focus_left_offset: 1px;
 	--_ui5_dialog_header_focus_right_offset: 1px;
-	--_ui5_dialog_resize_handle_right: 0;
-	--_ui5_dialog_resize_handle_bottom: 3px;
 	--_ui5_dialog_header_border_radius: var(--sapElement_BorderCornerRadius);
 }

package/src/themes/sap_horizon_dark/Dialog-parameters.css

@@ -5,7 +5,5 @@
 	--_ui5_dialog_header_focus_top_offset: 1px;
 	--_ui5_dialog_header_focus_left_offset: 1px;
 	--_ui5_dialog_header_focus_right_offset: 1px;
-	--_ui5_dialog_resize_handle_right: 0;
-	--_ui5_dialog_resize_handle_bottom: 3px;
 	--_ui5_dialog_header_border_radius: var(--sapElement_BorderCornerRadius);
 }

package/src/themes/sap_horizon_dark_exp/Dialog-parameters.css

@@ -5,7 +5,5 @@
 	--_ui5_dialog_header_focus_top_offset: 1px;
 	--_ui5_dialog_header_focus_left_offset: 1px;
 	--_ui5_dialog_header_focus_right_offset: 1px;
-	--_ui5_dialog_resize_handle_right: 0;
-	--_ui5_dialog_resize_handle_bottom: 3px;
 	--_ui5_dialog_header_border_radius: var(--sapElement_BorderCornerRadius);
 }

package/src/themes/sap_horizon_exp/Dialog-parameters.css

@@ -5,7 +5,5 @@
 	--_ui5_dialog_header_focus_top_offset: 1px;
 	--_ui5_dialog_header_focus_left_offset: 1px;
 	--_ui5_dialog_header_focus_right_offset: 1px;
-	--_ui5_dialog_resize_handle_right: 0;
-	--_ui5_dialog_resize_handle_bottom: 3px;
 	--_ui5_dialog_header_border_radius: var(--sapElement_BorderCornerRadius);
 }

package/src/themes/sap_horizon_hcb/Dialog-parameters.css

@@ -1,7 +1,5 @@
 @import "../base/Dialog-parameters.css";
 
 :root {
-	--_ui5_dialog_resize_handle_right: 0;
-	--_ui5_dialog_resize_handle_bottom: 3px;
 	--_ui5_dialog_header_state_line_height: 0.125rem;
 }

package/src/themes/sap_horizon_hcb_exp/parameters-bundle.css

@@ -14,7 +14,6 @@
 @import "./ColorPicker-parameters.css";
 @import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
-@import "./Dialog-parameters.css";
 @import "./FileUploader-parameters.css";
 @import "../base/Table-parameters.css";
 @import "../base/ListItemGroupHeader-parameters.css";