@ui5/webcomponents 2.15.0-rc.0 → 2.15.0-rc.3

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.15.0-rc.0",
+  "version": "2.15.0-rc.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -543,7 +543,7 @@
             },
             {
               "name": "accessibility-attributes",
-              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
               "value": {
                 "type": "ButtonAccessibilityAttributes",
                 "default": "{}"
@@ -640,7 +640,7 @@
               },
               {
                 "name": "accessibility-attributes",
-                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
                 "value": { "type": "ButtonAccessibilityAttributes" }
               },
               {
@@ -7861,7 +7861,7 @@
             },
             {
               "name": "accessibility-attributes",
-              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **roleDescription**: Provides a human-readable description for the role of the button.\n    Accepts any string value.\n  - **title**: Specifies a tooltip or description for screen readers.\n    Accepts any string value.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n    Accepts boolean values: `true` or `false`.",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **roleDescription**: Provides a human-readable description for the role of the button.\n    Accepts any string value.\n  - **title**: Specifies a tooltip or description for screen readers.\n    Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n    Accepts boolean values: `true` or `false`.",
               "value": {
                 "type": "SplitButtonAccessibilityAttributes",
                 "default": "{}"
@@ -7915,7 +7915,7 @@
               },
               {
                 "name": "accessibility-attributes",
-                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **roleDescription**: Provides a human-readable description for the role of the button.\n    Accepts any string value.\n  - **title**: Specifies a tooltip or description for screen readers.\n    Accepts any string value.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n    Accepts boolean values: `true` or `false`.",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **roleDescription**: Provides a human-readable description for the role of the button.\n    Accepts any string value.\n  - **title**: Specifies a tooltip or description for screen readers.\n    Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n  - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n    Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n  - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n    Accepts boolean values: `true` or `false`.",
                 "value": { "type": "SplitButtonAccessibilityAttributes" }
               }
             ],
@@ -10106,7 +10106,7 @@
             },
             {
               "name": "accessibility-attributes",
-              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+              "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
               "value": {
                 "type": "ButtonAccessibilityAttributes",
                 "default": "{}"
@@ -10208,7 +10208,7 @@
               },
               {
                 "name": "accessibility-attributes",
-                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
+                "description": "Defines the additional accessibility attributes that will be applied to the component.\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **ariaLabel**: Defines the accessible ARIA name of the component.\nAccepts any string value.\n\n - **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
                 "value": { "type": "ButtonAccessibilityAttributes" }
               },
               {
@@ -10299,6 +10299,11 @@
               "description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "name",
+              "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "show-clear-all",
               "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.",
@@ -10348,6 +10353,11 @@
                 "description": "Defines whether tokens are displayed on multiple lines.\n\n**Note:** The `multiLine` property is in an experimental state and is a subject to change.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "name",
+                "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.\n**Note:** When the component is used inside a form element,\nthe value is sent as the first element in the form data, even if it's empty.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "show-clear-all",
                 "description": "Defines whether \"Clear All\" button is present. Ensure `multiLine` is enabled, otherwise `showClearAll` will have no effect.\n\n**Note:** The `showClearAll` property is in an experimental state and is a subject to change.",
@@ -10383,7 +10393,7 @@
         },
         {
           "name": "ui5-toolbar",
-          "description": "### Overview\n\nThe `ui5-toolbar` component is used to create a horizontal layout with items.\nThe items can be overflowing in a popover, when the space is not enough to show all of them.\n\n### Keyboard Handling\nThe `ui5-toolbar` provides advanced keyboard handling.\n\n- The control is not interactive, but can contain of interactive elements\n- [Tab] - iterates through elements\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Toolbar.js\";`\n---\n\n\n### **Methods:**\n - **isOverflowOpen(): _boolean_** - Returns if the overflow popup is open.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n \n  **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.",
+          "description": "### Overview\n\nThe `ui5-toolbar` component is used to create a horizontal layout with items.\nThe items can be overflowing in a popover, when the space is not enough to show all of them.\n\n### Keyboard Handling\nThe `ui5-toolbar` provides advanced keyboard handling.\n\n- The control is not interactive, but can contain of interactive elements\n- [Tab] - iterates through elements\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/Toolbar.js\";`\n---\n\n\n### **Methods:**\n - **isOverflowOpen(): _boolean_** - Returns if the overflow popup is open.\n\n### **Slots:**\n - **default** - Defines the items of the component.\n\n**Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here.",
           "doc-url": "",
           "attributes": [
             {
@@ -10413,7 +10423,7 @@
           "slots": [
             {
               "name": "default",
-              "description": "Defines the items of the component.\n \n  **Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here."
+              "description": "Defines the items of the component.\n\n**Note:** Currently only `ui5-toolbar-button`, `ui5-toolbar-select`, `ui5-toolbar-separator` and `ui5-toolbar-spacer` are allowed here."
             }
           ],
           "events": [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.15.0-rc.0",
+  "version": "2.15.0-rc.3",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -8,8 +8,7 @@
   "type": "module",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
-  "private": false,
-  "customElements": "./dist/custom-elements.json",
+  "customElements": "dist/custom-elements.json",
   "keywords": [
     "openui5",
     "sapui5",
@@ -18,20 +17,20 @@
   "scripts": {
     "clean": "wc-dev clean",
     "lint": "wc-dev lint",
-    "lint:scope": "nps scope.lint",
+    "lint:scope": "wc-dev scope.lint",
     "start": "wc-dev start",
     "watch": "wc-dev watch",
-    "generate": "nps generate",
-    "generateAPI": "nps generateAPI",
+    "generate": "wc-dev generate",
+    "generateAPI": "wc-dev generateAPI",
     "build": "wc-dev build",
-    "bundle": "nps build.bundle",
-    "test": "wc-dev test",
-    "test:suite-1": "wc-dev test-suite-1",
-    "test:suite-2": "wc-dev test-suite-2",
-    "test:cypress": "nps test-cy-ci",
-    "test:cypress:suite-1": "nps test-cy-ci-suite-1",
-    "test:cypress:suite-2": "nps test-cy-ci-suite-2",
-    "test:cypress:open": "nps test-cy-open",
+    "bundle": "wc-dev build.bundle",
+    "test": "yarn test:cypress",
+    "test:cypress": "wc-dev test-cy-ci",
+    "test:cypress:suite-1": "wc-dev test-cy-ci-suite-1",
+    "test:cypress:suite-2": "wc-dev test-cy-ci-suite-2",
+    "test:cypress:suite-3": "wc-dev test-cy-ci-suite-3",
+    "test:cypress:suite-4": "wc-dev test-cy-ci-suite-4",
+    "test:cypress:open": "wc-dev test-cy-open",
     "test:cypress:single": "npx cypress run --component --browser chrome --spec",
     "test:vitest": "yarn vitest run",
     "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
@@ -39,7 +38,6 @@
     "prepublishOnly": "tsc -b"
   },
   "exports": {
-    "./.port": "./.port",
     "./src/*": "./src/*",
     "./dist/*": "./dist/*",
     "./package.json": "./package.json",
@@ -54,20 +52,24 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.15.0-rc.0",
-    "@ui5/webcomponents-icons": "2.15.0-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.15.0-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.15.0-rc.0",
-    "@ui5/webcomponents-localization": "2.15.0-rc.0",
-    "@ui5/webcomponents-theming": "2.15.0-rc.0"
+    "@ui5/webcomponents-base": "2.15.0-rc.3",
+    "@ui5/webcomponents-icons": "2.15.0-rc.3",
+    "@ui5/webcomponents-icons-business-suite": "2.15.0-rc.3",
+    "@ui5/webcomponents-icons-tnt": "2.15.0-rc.3",
+    "@ui5/webcomponents-localization": "2.15.0-rc.3",
+    "@ui5/webcomponents-theming": "2.15.0-rc.3"
   },
   "devDependencies": {
-    "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.15.0-rc.0",
-    "chromedriver": "^139.0.3",
+    "@custom-elements-manifest/analyzer": "patch:@custom-elements-manifest/analyzer@npm%3A0.10.6#~/.yarn/patches/@custom-elements-manifest-analyzer-npm-0.10.6-9b5ff0c50b.patch",
+    "@ui5/cypress-internal": "0.1.0",
+    "@ui5/webcomponents-tools": "2.15.0-rc.3",
+    "chokidar-cli": "^3.0.0",
+    "cypress": "^15.3.0",
+    "eslint": "^7.22.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
+    "vite": "5.4.8",
     "vitest": "^3.0.2"
   },
-  "gitHead": "033a6d621ee56640dda7dc853bfd29ac88c4ca25"
+  "gitHead": "be8dc39a71bc2df6b14528e50a243ce48c9015c5"
 }

package/src/ButtonTemplate.tsx

@@ -34,10 +34,11 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 			onTouchStart={this._ontouchstart}
 			onTouchEnd={this._ontouchend}
 			tabindex={this.tabIndexValue}
-			aria-expanded={this.accessibilityAttributes.expanded}
-			aria-controls={this.accessibilityAttributes.controls}
-			aria-haspopup={this._hasPopup}
-			aria-label={this.ariaLabelText}
+			aria-expanded={this._computedAccessibilityAttributes?.expanded}
+			aria-controls={this._computedAccessibilityAttributes?.controls}
+			aria-haspopup={this._computedAccessibilityAttributes?.hasPopup}
+			aria-label={this._computedAccessibilityAttributes?.ariaLabel}
+			aria-keyshortcuts={this._computedAccessibilityAttributes?.ariaKeyShortcuts}
 			aria-description={this.ariaDescriptionText}
 			aria-busy={this.loading ? "true" : undefined}
 			title={this.buttonTitle}

package/src/ComboBoxPopoverTemplate.tsx

@@ -7,7 +7,6 @@ import ResponsivePopover from "./ResponsivePopover.js";
 import BusyIndicator from "./BusyIndicator.js";
 import SuggestionItem from "./SuggestionItem.js";
 import type ComboBox from "./ComboBox.js";
-import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
 
 export default function ComboBoxPopoverTemplate(this: ComboBox) {
 	return (
@@ -38,13 +37,6 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 					<div slot="header" class="ui5-responsive-popover-header">
 						<div class="row">
 							<span>{this._headerTitleText}</span>
-							<Button
-								class="ui5-responsive-popover-close-btn"
-								icon={declineIcon}
-								design="Transparent"
-								onClick={this._closeRespPopover}
-							>
-							</Button>
 						</div>
 
 						<div class="row">
@@ -103,9 +95,16 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 				{this._isPhone &&
 			<div slot="footer" class="ui5-responsive-popover-footer">
 				<Button
-					design="Transparent"
+					design="Emphasized"
 					onClick={this._closeRespPopover}
 				>{this._dialogOkButtonText}</Button>
+				<Button
+					class="ui5-responsive-popover-close-btn"
+					design="Transparent"
+					onClick={this._closeRespPopover}
+				>
+					{this._dialogCancelButtonText}
+				</Button>
 			</div>
 				}
 			</ResponsivePopover>

package/src/MultiComboBoxPopoverTemplate.tsx

@@ -1,4 +1,3 @@
-import decline from "@ui5/webcomponents-icons/dist/decline.js";
 import multiSelectAll from "@ui5/webcomponents-icons/dist/multiselect-all.js";
 import type MultiComboBox from "./MultiComboBox.js";
 import ResponsivePopover from "./ResponsivePopover.js";
@@ -35,13 +34,6 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 				<div slot="header" class="ui5-responsive-popover-header" style={this.styles.popoverHeader}>
 					<div class="row">
 						<span>{this._headerTitleText}</span>
-						<Button
-							class="ui5-responsive-popover-close-btn"
-							icon={decline}
-							design="Transparent"
-							onClick={this.handleCancel}
-						>
-						</Button>
 					</div>
 					<div class="row">
 						<Input
@@ -100,9 +92,16 @@ export default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {
 			{this._isPhone &&
 				<div slot="footer" class="ui5-responsive-popover-footer">
 					<Button
-						design="Transparent"
+						design="Emphasized"
 						onClick={this.handleOK}
 					>{this._dialogOkButton}</Button>
+					<Button
+						class="ui5-responsive-popover-close-btn"
+						design="Transparent"
+						onClick={this.handleCancel}
+					>
+						{this._dialogCancelButton}
+					</Button>
 				</div>
 			}
 		</ResponsivePopover>

package/src/MultiInputTemplate.tsx

@@ -27,6 +27,7 @@ function preContent(this: MultiInput) {
 				onKeyDown={this._onTokenizerKeydown}
 				onTokenDelete={this.tokenDelete}
 				onFocusOut={this._tokenizerFocusOut}
+				onShowMoreItemsPress={this._showMoreItemsPress}
 			>
 				{ this.tokens.map(token => <slot name={token._individualSlot}></slot>)}
 			</Tokenizer>

package/src/SegmentedButtonTemplate.tsx

@@ -10,7 +10,8 @@ export default function SegmentedButtonTemplate(this: SegmentedButton) {
 			onKeyDown={this._onkeydown}
 			onKeyUp={this._onkeyup}
 			onFocusIn={this._onfocusin}
-			aria-multiselectable="true"
+			aria-multiselectable={this.selectionMode === "Multiple" ? "true" : "false"}
+			aria-orientation="horizontal"
 			aria-description={this.ariaDescriptionText}
 			aria-label={this.ariaLabelText}
 			aria-roledescription={this.ariaRoleDescription}

package/src/SelectPopoverTemplate.tsx

@@ -27,6 +27,7 @@ export default function SelectPopoverTemplate(this: Select) {
 					onBeforeOpen={this._beforeOpen}
 					onClose={this._afterClose}
 					onKeyDown={this._onkeydown}
+					accessibleName={this._isPhone ? this._headerTitleText : undefined}
 				>
 					{this._isPhone &&
 						<div slot="header" class="ui5-responsive-popover-header">

package/src/SplitButtonTemplate.tsx

@@ -8,10 +8,11 @@ export default function SplitButtonTemplate(this: SplitButton) {
 			role={this._hideArrowButton ? "button" : "group"}
 			class="ui5-split-button-root"
 			tabindex={this._tabIndex}
-			aria-labelledby={this._hideArrowButton ? undefined : `${this._id}-invisibleTextDefault ${this._id}-invisibleText`}
+			aria-labelledby={`${this._id}-invisibleTextDefault ${this._id}-invisibleText`}
 			aria-haspopup={this._computedAccessibilityAttributes?.root?.hasPopup}
 			aria-roledescription={this._computedAccessibilityAttributes?.root?.roleDescription}
-			aria-label={this._hideArrowButton ? this._computedAccessibilityAttributes?.root?.title : undefined}
+			aria-label={this._computedAccessibilityAttributes?.root?.title}
+			aria-keyshortcuts={this._computedAccessibilityAttributes?.root?.ariaKeyShortcuts}
 			onFocusOut={this._onFocusOut}
 			onKeyDown={this._onKeyDown}
 			onKeyUp={this._onKeyUp}
@@ -56,7 +57,7 @@ export default function SplitButtonTemplate(this: SplitButton) {
 					>
 					</Button>
 					<span id={`${this._id}-invisibleText`} class="ui5-hidden-text">{this.accInfo.keyboardHint} {this.accessibleName}</span>
-					<span id={`${this._id}-invisibleTextDefault`} class="ui5-hidden-text">{this._computedAccessibilityAttributes?.root?.title || this.textButtonAccText}</span>
+					<span id={`${this._id}-invisibleTextDefault`} class="ui5-hidden-text">{this.buttonTextContent}</span>
 				</>
 			)}
 		</div>

package/src/TokenizerPopoverTemplate.tsx

@@ -54,6 +54,7 @@ export default function TokenizerPopoverTemplate(this: Tokenizer) {
 				>{this._okButtonText}</Button>
 				<Button
 					design="Transparent"
+					class="ui5-responsive-popover-close-btn"
 					onClick={this.handleDialogButtonPress}
 				>{this._cancelButtonText}</Button>
 			</div>

package/src/features/InputSuggestionsTemplate.tsx

@@ -1,7 +1,6 @@
 import type { JsxTemplateResult } from "@ui5/webcomponents-base/dist/index.js";
 import Input from "../Input.js";
 import Icon from "../Icon.js";
-import decline from "@ui5/webcomponents-icons/dist/decline.js";
 
 import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
@@ -35,13 +34,6 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 					<div slot="header" class="ui5-responsive-popover-header">
 						<div class="row">
 							<span>{this._headerTitleText}</span>
-							<Button
-								class="ui5-responsive-popover-close-btn"
-								icon={decline}
-								design="Transparent"
-								onClick={this._closePicker}
-							>
-							</Button>
 						</div>
 						<div class="row">
 							<div class="input-root-phone native-input-wrapper">
@@ -86,11 +78,18 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 			{this._isPhone &&
 				<div slot="footer" class="ui5-responsive-popover-footer">
 					<Button
-						design="Transparent"
+						design="Emphasized"
 						onClick={this._closePicker}
 					>
 						{this._suggestionsOkButtonText}
 					</Button>
+					<Button
+						class="ui5-responsive-popover-close-btn"
+						design="Transparent"
+						onClick={this._closePicker}
+					>
+						{this._suggestionsCancelButtonText}
+					</Button>
 				</div>
 			}
 		</ResponsivePopover>

package/src/i18n/messagebundle.properties

@@ -271,6 +271,9 @@ INPUT_CLEAR_ICON_ACC_NAME=Clear
 #XBUT: Input's Dialog OK button on mobile devices
 INPUT_SUGGESTIONS_OK_BUTTON=OK
 
+#XBUT: Input's Dialog Cancel button on mobile devices
+INPUT_SUGGESTIONS_CANCEL_BUTTON=Cancel
+
 #XFLD: Subtle link description label
 LINK_SUBTLE=Subtle
 
@@ -346,15 +349,21 @@ MESSAGE_STRIP_INFORMATION=Message Strip
 #XACT: ARIA announcement for the MessageStrip's "Custom" state
 MESSAGE_STRIP_CUSTOM=Custom Message Strip
 
-#XFLD: MultiComboBox dialog button
+#XFLD: MultiComboBox OK dialog button
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
 
+#XFLD: MultiComboBox Cancel dialog button
+MULTICOMBOBOX_DIALOG_CANCEL_BUTTON=Cancel
+
 #XACT: ARIA announcement for Combo Box and Multi Combo Box available options
 COMBOBOX_AVAILABLE_OPTIONS=Available Options
 
 #XBUT: Combobox Dialog OK button on mobile devices
 COMBOBOX_DIALOG_OK_BUTTON=OK
 
+#XBUT: Combobox Dialog Cancel button on mobile devices
+COMBOBOX_DIALOG_CANCEL_BUTTON=Cancel
+
 #XACT: ARIA announcement for suggestions popup
 INPUT_AVALIABLE_VALUES=Available Values
 

package/src/i18n/messagebundle_ar.properties

@@ -394,9 +394,23 @@ VALUE_STATE_LINKS=اضغط على Ctrl+Alt+F8 للانتقال إلى الارت
 
 VALUE_STATE_LINKS_MAC=اضغط على Cmd+Option+F8 للانتقال إلى الارتباط الأول واستخدم علامة التبويب للانتقال إلى الارتباط التالي
 
-CALENDAR_HEADER_NEXT_BUTTON=التالي
+CALENDAR_HEADER_MONTH_BUTTON=شهر {0}
 
-CALENDAR_HEADER_PREVIOUS_BUTTON=السابق
+CALENDAR_HEADER_YEAR_BUTTON=السنة {0}
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON=نطاق السنة من {0} إلى {1}
+
+CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT=F4
+
+CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT=Shift + F4
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT=Shift + F4
+
+DAY_PICKER_SELECTED_RANGE_START={0} أول تاريخ للنطاق
+
+DAY_PICKER_SELECTED_RANGE_BETWEEN={0} في نطاق محدد
+
+DAY_PICKER_SELECTED_RANGE_END={0} آخر تاريخ للنطاق
 
 DAY_PICKER_WEEK_NUMBER_TEXT=رقم الأسبوع
 

package/src/i18n/messagebundle_bg.properties

@@ -394,9 +394,23 @@ VALUE_STATE_LINKS=Натиснете Ctrl+Alt+F8, за да отидете на
 
 VALUE_STATE_LINKS_MAC=Натиснете Cmd+Option+F8, за да отидете на първата връзка. Използвайте Tab, за да преминете към следващата
 
-CALENDAR_HEADER_NEXT_BUTTON=Напред
+CALENDAR_HEADER_MONTH_BUTTON=Месец {0}
 
-CALENDAR_HEADER_PREVIOUS_BUTTON=Назад
+CALENDAR_HEADER_YEAR_BUTTON=Година {0}
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON=Диапазон от години от {0} до {1}
+
+CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT=F4
+
+CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT=Shift + F4
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT=Shift + F4
+
+DAY_PICKER_SELECTED_RANGE_START={0} първа дата от диапазона
+
+DAY_PICKER_SELECTED_RANGE_BETWEEN={0} в избрания диапазон
+
+DAY_PICKER_SELECTED_RANGE_END={0} последна дата от диапазона
 
 DAY_PICKER_WEEK_NUMBER_TEXT=Номер на седмица
 

package/src/i18n/messagebundle_ca.properties

@@ -394,9 +394,23 @@ VALUE_STATE_LINKS=Per anar al primer enllaç, premeu Control+Alt+F8. Per passar
 
 VALUE_STATE_LINKS_MAC=Per anar al primer enllaç, premeu Cmd+Opció+F8. Per passar a l''enllaç següent, utilitzeu la tecla del tabulador.
 
-CALENDAR_HEADER_NEXT_BUTTON=Següent
+CALENDAR_HEADER_MONTH_BUTTON=Mes {0}
 
-CALENDAR_HEADER_PREVIOUS_BUTTON=Anterior
+CALENDAR_HEADER_YEAR_BUTTON=Any {0}
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON=Interval d''anys {0}-{1}
+
+CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT=F4
+
+CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT=Majús + F4
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT=Majús + F4
+
+DAY_PICKER_SELECTED_RANGE_START={0} Primera data de l''interval
+
+DAY_PICKER_SELECTED_RANGE_BETWEEN={0} en un interval seleccionat
+
+DAY_PICKER_SELECTED_RANGE_END={0} Última data de l''interval
 
 DAY_PICKER_WEEK_NUMBER_TEXT=Número de setmana
 

package/src/i18n/messagebundle_cnr.properties

@@ -394,9 +394,23 @@ VALUE_STATE_LINKS=Da odete na prvu vezu, pritisnite Ctrl+Alt+F8. Da pređete na
 
 VALUE_STATE_LINKS_MAC=Da odete na prvu vezu, pritisnite Cmd+Option+F8. Da pređete na sljedeću vezu, koristite Tab
 
-CALENDAR_HEADER_NEXT_BUTTON=Sljedeće
+CALENDAR_HEADER_MONTH_BUTTON=Mjesec {0}
 
-CALENDAR_HEADER_PREVIOUS_BUTTON=Prethodno
+CALENDAR_HEADER_YEAR_BUTTON=Godina {0}
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON=Raspon godina od {0} do {1}
+
+CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT=F4
+
+CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT=Shift + F4
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT=Shift + F4
+
+DAY_PICKER_SELECTED_RANGE_START={0} prvi dan raspona
+
+DAY_PICKER_SELECTED_RANGE_BETWEEN={0} u odabranom rasponu
+
+DAY_PICKER_SELECTED_RANGE_END={0} posljednji dan raspona
 
 DAY_PICKER_WEEK_NUMBER_TEXT=Broj nedjelje
 

package/src/i18n/messagebundle_cs.properties

@@ -394,9 +394,23 @@ VALUE_STATE_LINKS=Pro přechod k prvnímu odkazu stiskněte Ctrl+Alt+F8. Pro př
 
 VALUE_STATE_LINKS_MAC=Pro přechod k prvnímu odkazu stiskněte Cmd+Option+F8. Pro přechod k dalšímu odkazu použijte Tab
 
-CALENDAR_HEADER_NEXT_BUTTON=Další
+CALENDAR_HEADER_MONTH_BUTTON=Měsíc {0}
 
-CALENDAR_HEADER_PREVIOUS_BUTTON=Předchozí
+CALENDAR_HEADER_YEAR_BUTTON=Rok {0}
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON=Rozsah roků od {0} do {1}
+
+CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT=F4
+
+CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT=Shift + F4
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT=Shift + F4
+
+DAY_PICKER_SELECTED_RANGE_START={0} První datum v rozsahu
+
+DAY_PICKER_SELECTED_RANGE_BETWEEN={0} ve vybraném rozsahu
+
+DAY_PICKER_SELECTED_RANGE_END={0} Poslední datum v rozsahu
 
 DAY_PICKER_WEEK_NUMBER_TEXT=Číslo týdne
 

package/src/i18n/messagebundle_cy.properties

@@ -394,9 +394,23 @@ VALUE_STATE_LINKS=Pwyswch Ctrl+Alt+F8 i fynd i''r ddolen gyntaf a defnyddio TAB
 
 VALUE_STATE_LINKS_MAC=Pwyswch Cmd+Option+F8 i fynd i''r ddolen gyntaf a defnyddio TAB i symud i''r ddolen nesaf
 
-CALENDAR_HEADER_NEXT_BUTTON=Nesaf
+CALENDAR_HEADER_MONTH_BUTTON=Mis {0}
 
-CALENDAR_HEADER_PREVIOUS_BUTTON=Blaenorol
+CALENDAR_HEADER_YEAR_BUTTON=Blwyddyn {0}
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON=Ystod o flynyddoedd rhwng {0} a {1}
+
+CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT=F4
+
+CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT=Shift + F4
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT=Shift + F4
+
+DAY_PICKER_SELECTED_RANGE_START={0} Dyddiad cyntaf yr ystod
+
+DAY_PICKER_SELECTED_RANGE_BETWEEN={0} mewn ystod ddetholedig
+
+DAY_PICKER_SELECTED_RANGE_END={0}Dyddiad olaf yr ystod
 
 DAY_PICKER_WEEK_NUMBER_TEXT=Rhif yr Wythnos
 

package/src/i18n/messagebundle_da.properties

@@ -394,9 +394,23 @@ VALUE_STATE_LINKS=Tryk Ctrl+Alt+F8 for at gå til det første link. Brug tabulat
 
 VALUE_STATE_LINKS_MAC=Tryk Cmd+Option+F8 for at gå til det første link. Brug tabulatortasten til at flytte til det næste link
 
-CALENDAR_HEADER_NEXT_BUTTON=Frem
+CALENDAR_HEADER_MONTH_BUTTON=Måned {0}
 
-CALENDAR_HEADER_PREVIOUS_BUTTON=Tilbage
+CALENDAR_HEADER_YEAR_BUTTON=År {0}
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON=Årsinterval fra {0} til {1}
+
+CALENDAR_HEADER_MONTH_BUTTON_SHORTCUT=F4
+
+CALENDAR_HEADER_YEAR_BUTTON_SHORTCUT=Skift + F4
+
+CALENDAR_HEADER_YEAR_RANGE_BUTTON_SHORTCUT=Skift + F4
+
+DAY_PICKER_SELECTED_RANGE_START={0} Første dato i interval
+
+DAY_PICKER_SELECTED_RANGE_BETWEEN={0} i et valgt interval
+
+DAY_PICKER_SELECTED_RANGE_END={0} Sidste dato i interval
 
 DAY_PICKER_WEEK_NUMBER_TEXT=Ugenummer