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

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.2",
   "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.2",
   "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,25 @@
     "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.2",
+    "@ui5/webcomponents-icons": "2.15.0-rc.2",
+    "@ui5/webcomponents-icons-business-suite": "2.15.0-rc.2",
+    "@ui5/webcomponents-icons-tnt": "2.15.0-rc.2",
+    "@ui5/webcomponents-localization": "2.15.0-rc.2",
+    "@ui5/webcomponents-theming": "2.15.0-rc.2"
   },
   "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.10.6",
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.15.0-rc.0",
-    "chromedriver": "^139.0.3",
+    "@ui5/webcomponents-tools": "2.15.0-rc.2",
+    "chokidar-cli": "^3.0.0",
+    "cypress": "^13.0.0",
+    "eslint": "^7.22.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
+    "rimraf": "^6.0.1",
+    "vite": "5.4.8",
     "vitest": "^3.0.2"
   },
-  "gitHead": "033a6d621ee56640dda7dc853bfd29ac88c4ca25"
+  "gitHead": "ed55cd91014aec191705b37b57e8cf5dc8cc95ce"
 }

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/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>