@ui5/webcomponents 2.16.0-rc.0 → 2.16.0-rc.1

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

@@ -614,7 +614,7 @@
     },
     {
       "name": "ui5-carousel",
-      "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **navigate** - Fired whenever the page changes due to user interaction,\nwhen the user clicks on the navigation arrows or while resizing,\nbased on the `items-per-page` property.\n\n### **Methods:**\n - **navigateTo(itemIndex: _number_): _void_** - Changes the currently displayed page.\n\n### **Slots:**\n - **default** - Defines the content of the component.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component",
+      "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`\n\n\n---\n\n\n\n\n### **Events:**\n - **navigate** - Fired whenever the page changes due to user interaction,\nwhen the user clicks on the navigation arrows or while resizing,\nbased on the `items-per-page` property.\n\n### **Methods:**\n - **navigateTo(itemIndex: _number_)** - Changes the currently displayed page.\n\n### **Slots:**\n - **default** - Defines the content of the component.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component",
       "attributes": [
         {
           "name": "accessible-name",
@@ -641,6 +641,11 @@
           "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.",
           "values": []
         },
+        {
+          "name": "_current-slide-index",
+          "description": "Defines the current first visible item in the viewport.\nDefault value is 0, which means the first item in the viewport.",
+          "values": []
+        },
         {
           "name": "hide-page-indicator",
           "description": "Defines the visibility of the page indicator.\nIf set to true the page indicator will be hidden.",
@@ -678,11 +683,6 @@
           "name": "arrows-placement",
           "description": "Defines the position of arrows.\n\nAvailable options are:\n\n- `Content` - the arrows are placed on the sides of the current page.\n- `Navigation` - the arrows are placed on the sides of the page indicator.",
           "values": [{ "name": "Content" }, { "name": "Navigation" }]
-        },
-        {
-          "name": "visible-items-indices",
-          "description": "The indices of the currently visible items of the component.",
-          "values": [{ "name": "any" }]
         }
       ],
       "references": []
@@ -2119,7 +2119,7 @@
         },
         {
           "name": "accessibility-attributes",
-          "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.",
+          "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`, `growingButton.description`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n- **description**: Defines the accessible ARIA description of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.",
           "values": [{ "name": "ListAccessibilityAttributes" }]
         },
         {
@@ -3471,6 +3471,11 @@
           "description": "Defines the component selection mode.",
           "values": [{ "name": "Single" }, { "name": "Multiple" }]
         },
+        {
+          "name": "content-mode",
+          "description": "Defines the content mode of the segmented button items.\n\n- \"EqualSized\": All items are sized equally to fill the available space.\n- \"ContentFit\": Each item is sized to fit its content, with any extra space placed after the last item.",
+          "values": [{ "name": "ContentFit" }, { "name": "EqualSized" }]
+        },
         {
           "name": "selected-items",
           "description": "Returns an array of the currently selected items.",
@@ -4607,6 +4612,16 @@
           "name": "accessible-name-ref",
           "description": "Receives id(or many ids) of the elements that label the textarea.",
           "values": []
+        },
+        {
+          "name": "accessible-description",
+          "description": "Defines the accessible description of the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-description-ref",
+          "description": "Receives id(or many ids) of the elements that describe the textarea.",
+          "values": []
         }
       ],
       "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.16.0-rc.0",
+  "version": "2.16.0-rc.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1161,7 +1161,7 @@
         },
         {
           "name": "ui5-carousel",
-          "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`\n---\n\n\n### **Events:**\n - **navigate** - Fired whenever the page changes due to user interaction,\nwhen the user clicks on the navigation arrows or while resizing,\nbased on the `items-per-page` property.\n\n### **Methods:**\n - **navigateTo(itemIndex: _number_): _void_** - Changes the currently displayed page.\n\n### **Slots:**\n - **default** - Defines the content of the component.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component",
+          "description": "### Overview\nThe Carousel allows the user to browse through a set of items.\nThe component is mostly used for showing a gallery of images, but can hold any other HTML element.\n\nThere are several ways to perform navigation:\n\n- on desktop - the user can navigate using the navigation arrows or with keyboard shortcuts.\n- on touch devices - the user can navigate using the navigation arrows (always visible) or can use swipe gestures.\n\n### Usage\n\n#### When to use:\n\n- The items you want to display are very different from each other.\n- You want to display the items one after the other.\n\n#### When not to use:\n\n- The items you want to display need to be visible at the same time.\n- The items you want to display are uniform and very similar.\n\n### Keyboard Handling\n\n#### Basic Navigation\nWhen the `ui5-carousel` is focused the user can navigate between the items\nwith the following keyboard shortcuts:\n\n- [Up] or [Down] - Navigates to previous and next item\n- [Left] or [Right] - Navigates to previous and next item\n\n### Fast Navigation\nThis component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].\nIn order to use this functionality, you need to import the following module:\n\n`import \"@ui5/webcomponents-base/dist/features/F6Navigation.js\"`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/Carousel.js\";`\n---\n\n\n### **Events:**\n - **navigate** - Fired whenever the page changes due to user interaction,\nwhen the user clicks on the navigation arrows or while resizing,\nbased on the `items-per-page` property.\n\n### **Methods:**\n - **navigateTo(itemIndex: _number_)** - Changes the currently displayed page.\n\n### **Slots:**\n - **default** - Defines the content of the component.\n\n### **CSS Parts:**\n - **content** - Used to style the content of the component",
           "doc-url": "",
           "attributes": [
             {
@@ -1189,6 +1189,11 @@
               "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "_current-slide-index",
+              "description": "Defines the current first visible item in the viewport.\nDefault value is 0, which means the first item in the viewport.",
+              "value": { "type": "number", "default": "0" }
+            },
             {
               "name": "hide-page-indicator",
               "description": "Defines the visibility of the page indicator.\nIf set to true the page indicator will be hidden.",
@@ -1233,11 +1238,6 @@
                 "type": "\"Content\" | \"Navigation\"",
                 "default": "\"Content\""
               }
-            },
-            {
-              "name": "visible-items-indices",
-              "description": "The indices of the currently visible items of the component.",
-              "value": { "type": "any", "default": "[]" }
             }
           ],
           "slots": [
@@ -1279,6 +1279,11 @@
                 "description": "Defines the visibility of the navigation arrows.\nIf set to true the navigation arrows will be hidden.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "_current-slide-index",
+                "description": "Defines the current first visible item in the viewport.\nDefault value is 0, which means the first item in the viewport.",
+                "value": { "type": "number" }
+              },
               {
                 "name": "hide-page-indicator",
                 "description": "Defines the visibility of the page indicator.\nIf set to true the page indicator will be hidden.",
@@ -1312,11 +1317,6 @@
                 "name": "arrows-placement",
                 "description": "Defines the position of arrows.\n\nAvailable options are:\n\n- `Content` - the arrows are placed on the sides of the current page.\n- `Navigation` - the arrows are placed on the sides of the page indicator.",
                 "value": { "type": "\"Content\" | \"Navigation\"" }
-              },
-              {
-                "name": "visible-items-indices",
-                "description": "The indices of the currently visible items of the component.",
-                "value": { "type": "any" }
               }
             ],
             "events": [
@@ -4325,7 +4325,7 @@
             },
             {
               "name": "accessibility-attributes",
-              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.",
+              "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`, `growingButton.description`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n- **description**: Defines the accessible ARIA description of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.",
               "value": {
                 "type": "ListAccessibilityAttributes",
                 "default": "{}"
@@ -4465,7 +4465,7 @@
               },
               {
                 "name": "accessibility-attributes",
-                "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.",
+                "description": "Defines additional accessibility attributes on different areas of the component.\n\nThe accessibilityAttributes object has the following field:\n\n - **growingButton**: `growingButton.name`, `growingButton.description`.\n\n The accessibility attributes support the following values:\n\n- **name**: Defines the accessible ARIA name of the growing button.\nAccepts any string.\n\n- **description**: Defines the accessible ARIA description of the growing button.\nAccepts any string.\n\n **Note:** The `accessibilityAttributes` property is in an experimental state and is a subject to change.",
                 "value": { "type": "ListAccessibilityAttributes" }
               },
               {
@@ -7303,6 +7303,14 @@
                 "default": "\"Single\""
               }
             },
+            {
+              "name": "content-mode",
+              "description": "Defines the content mode of the segmented button items.\n\n- \"EqualSized\": All items are sized equally to fill the available space.\n- \"ContentFit\": Each item is sized to fit its content, with any extra space placed after the last item.",
+              "value": {
+                "type": "\"ContentFit\" | \"EqualSized\"",
+                "default": "\"EqualSized\""
+              }
+            },
             {
               "name": "selected-items",
               "description": "Returns an array of the currently selected items.",
@@ -7348,6 +7356,11 @@
                 "description": "Defines the component selection mode.",
                 "value": { "type": "\"Single\" | \"Multiple\"" }
               },
+              {
+                "name": "content-mode",
+                "description": "Defines the content mode of the segmented button items.\n\n- \"EqualSized\": All items are sized equally to fill the available space.\n- \"ContentFit\": Each item is sized to fit its content, with any extra space placed after the last item.",
+                "value": { "type": "\"ContentFit\" | \"EqualSized\"" }
+              },
               {
                 "name": "selected-items",
                 "description": "Returns an array of the currently selected items.",
@@ -9619,6 +9632,16 @@
               "name": "accessible-name-ref",
               "description": "Receives id(or many ids) of the elements that label the textarea.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-description",
+              "description": "Defines the accessible description of the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-description-ref",
+              "description": "Receives id(or many ids) of the elements that describe the textarea.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -9718,6 +9741,16 @@
                 "name": "accessible-name-ref",
                 "description": "Receives id(or many ids) of the elements that label the textarea.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-description",
+                "description": "Defines the accessible description of the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-description-ref",
+                "description": "Receives id(or many ids) of the elements that describe the textarea.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": [

package/package-scripts.cjs

@@ -7,7 +7,6 @@ const options = {
 	dev: true,
 	internal: {
 		cypress_code_coverage: false,
-		cypress_acc_tests: false,
 	},
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.16.0-rc.0",
+  "version": "2.16.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -52,17 +52,17 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.16.0-rc.0",
-    "@ui5/webcomponents-icons": "2.16.0-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.16.0-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.16.0-rc.0",
-    "@ui5/webcomponents-localization": "2.16.0-rc.0",
-    "@ui5/webcomponents-theming": "2.16.0-rc.0"
+    "@ui5/webcomponents-base": "2.16.0-rc.1",
+    "@ui5/webcomponents-icons": "2.16.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.16.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.16.0-rc.1",
+    "@ui5/webcomponents-localization": "2.16.0-rc.1",
+    "@ui5/webcomponents-theming": "2.16.0-rc.1"
   },
   "devDependencies": {
-    "@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",
+    "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.16.0-rc.0",
+    "@ui5/webcomponents-tools": "2.16.0-rc.1",
     "chokidar-cli": "^3.0.0",
     "cypress": "^15.3.0",
     "eslint": "^7.22.0",
@@ -71,5 +71,5 @@
     "vite": "5.4.8",
     "vitest": "^3.0.2"
   },
-  "gitHead": "07b91ccebabfc50f7ae3112c66255423c2dde07d"
+  "gitHead": "265099a61a699bab43272f38673a637a9caf7ca5"
 }

package/src/CarouselTemplate.tsx

@@ -1,5 +1,5 @@
 import type Carousel from "./Carousel.js";
-import Button from "./Button.js";
+import Icon from "./Icon.js";
 import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 
@@ -10,31 +10,33 @@ export default function CarouselTemplate(this: Carousel) {
 				"ui5-carousel-root": true,
 				[`ui5-carousel-background-${this._backgroundDesign}`]: true,
 			}}
-			tabindex={0}
-			role="list"
+			role="region"
 			aria-label={this.ariaLabelTxt}
 			aria-roledescription={this._roleDescription}
-			aria-activedescendant={this.ariaActiveDescendant}
 			onFocusIn={this._onfocusin}
 			onKeyDown={this._onkeydown}
 			onMouseOut={this._onmouseout}
 			onMouseOver={this._onmouseover}
+			onTouchStart={this._ontouchstart}
+			onMouseDown={this._onmousedown}
 		>
 			<div class={this.classes.viewport} part="content">
-				<div class={this.classes.content} style={{ transform: `translateX(${this._isRTL ? "" : "-"}${this._selectedIndex * (this._itemWidth || 0)}px` }}>
+				<div role="list" class={this.classes.content} style={{ transform: `translate3d(${this._isRTL ? "" : "-"}${this._currentSlideIndex * (this._itemWidth || 0)}px, 0, 0` }}>
 					{this.items.map(itemInfo =>
 						<div
+							data-sap-focus-ref
 							id={itemInfo.id}
 							class={{
 								"ui5-carousel-item": true,
-								"ui5-carousel-item--hidden": !itemInfo.selected,
+								"ui5-carousel-item--hidden": !itemInfo.visible,
 							}}
 							style={{ width: `${this._itemWidth || 0}px` }}
 							part="item"
 							role="listitem"
 							aria-posinset={itemInfo.posinset}
 							aria-setsize={itemInfo.setsize}
-							aria-selected = {itemInfo.selected}
+							aria-hidden={!itemInfo.visible}
+							tabindex= {itemInfo.tabIndex}
 						>
 							<slot name={itemInfo.item._individualSlot} tabindex={itemInfo.tabIndex}></slot>
 						</div>
@@ -51,11 +53,9 @@ export default function CarouselTemplate(this: Carousel) {
 			{this.renderNavigation &&
 				<div class={this.classes.navigation}>
 					{this.showArrows.navigation && arrowBack.call(this)}
-
 					<div class="ui5-carousel-navigation">
 						{ !this.hidePageIndicator && navIndicator.call(this) }
 					</div>
-
 					{this.showArrows.navigation && arrowForward.call(this)}
 				</div>
 			}
@@ -64,29 +64,29 @@ export default function CarouselTemplate(this: Carousel) {
 }
 
 function arrowBack(this: Carousel) {
-	return <Button
-		icon={slimArrowLeft}
+	return <Icon name={slimArrowLeft}
 		tabindex={-1}
-		tooltip={this.previousPageText}
+		data-ui5-arrow-back
+		title={this.previousPageText	}
+		mode="Decorative"
 		class={{
 			"ui5-carousel-navigation-button": true,
 			"ui5-carousel-navigation-button--hidden": !this.hasPrev
 		}}
-		data-ui5-arrow-back
 		onClick={this._navButtonClick}
 	/>;
 }
 
 function arrowForward(this: Carousel) {
-	return <Button
-		icon={slimArrowRight}
+	return <Icon name={slimArrowRight}
 		tabindex={-1}
-		tooltip={this.nextPageText}
+		data-ui5-arrow-forward
+		title={this.nextPageText}
+		mode="Decorative"
 		class={{
 			"ui5-carousel-navigation-button": true,
 			"ui5-carousel-navigation-button--hidden": !this.hasNext
 		}}
-		data-ui5-arrow-forward
 		onClick={this._navButtonClick}
 	/>;
 }
@@ -94,8 +94,9 @@ function arrowForward(this: Carousel) {
 function navIndicator(this: Carousel) {
 	return this.isPageTypeDots ? this.dots.map(dot =>
 		<div
-			role="img"
 			aria-label={dot.ariaLabel}
+			role="presentation"
+			aria-hidden="true"
 			class={{
 				"ui5-carousel-navigation-dot": true,
 				"ui5-carousel-navigation-dot--active": dot.active
@@ -105,5 +106,5 @@ function navIndicator(this: Carousel) {
 		<div
 			dir="auto"
 			class="ui5-carousel-navigation-text"
-		>{this.selectedIndexToShow}&nbsp;{this.ofText}&nbsp;{this.pagesCount}</div>;
+		>{this._currentSlideIndex + 1}&nbsp;{this.ofText}&nbsp;{this.pagesCount}</div>;
 }

package/src/ListTemplate.tsx

@@ -97,6 +97,7 @@ function moreRow(this: List) {
 				}}
 				aria-label={this.growingButtonAriaLabel}
 				aria-labelledby={this.growingButtonAriaLabelledBy}
+				aria-describedby={this.growingButtonAriaDescribedBy}
 				onClick={this._onLoadMoreClick}
 				onKeyDown={this._onLoadMoreKeydown}
 				onKeyUp={this._onLoadMoreKeyup}
@@ -111,8 +112,15 @@ function moreRow(this: List) {
 						active>
 					</BusyIndicator>
 				}
-				<span id={`${this._id}-growingButton-text`} class="ui5-growing-button-text" growing-button-text>{this._growingButtonText}</span>
+				<span id={`${this._id}-growingButton-text`} class="ui5-growing-button-text" growing-button-text>
+					{this._growingButtonText}
+				</span>
 			</div>
+			{this.accessibilityAttributes.growingButton?.description &&
+				<span id={`${this._id}-growingButton-description`} class="ui5-hidden-text">
+					{this.accessibilityAttributes.growingButton.description}
+				</span>
+			}
 		</div>
 	);
 }

package/src/MenuItemTemplate.tsx

@@ -93,7 +93,7 @@ function listItemPostContent(this: MenuItem) {
 		allowTargetOverlap={true}
 		placement={this.placement}
 		verticalAlign="Top"
-		accessibleName={this.acessibleNameText}
+		accessibleName={this.accessibleNameText}
 		onBeforeOpen={this._beforePopoverOpen}
 		onOpen={this._afterPopoverOpen}
 		onBeforeClose={this._beforePopoverClose}

package/src/MenuTemplate.tsx

@@ -18,7 +18,7 @@ export default function MenuTemplate(this: Menu) {
 			preventInitialFocus={true}
 			hideArrow={true}
 			allowTargetOverlap={true}
-			accessibleName={this.acessibleNameText}
+			accessibleName={this.accessibleNameText}
 			onBeforeOpen={this._beforePopoverOpen}
 			onOpen={this._afterPopoverOpen}
 			onBeforeClose={this._beforePopoverClose}

package/src/SegmentedButtonItemTemplate.tsx

@@ -17,7 +17,7 @@ export default function SegmentedButtonItemTemplate(this: SegmentedButtonItem) {
 			tabindex={this.tabIndexValue ? parseInt(this.tabIndexValue) : undefined }
 			aria-label={this.ariaLabelText}
 			aria-description={this.ariaDescriptionText}
-			title={this.tooltip}
+			title={this.tooltip || this.slotTextContent}
 		>
 			{this.icon &&
 				<Icon

package/src/SegmentedButtonTemplate.tsx

@@ -1,10 +1,15 @@
 import type SegmentedButton from "./SegmentedButton.js";
+import SegmentedButtonContentMode from "./types/SegmentedButtonContentMode.js";
 
 export default function SegmentedButtonTemplate(this: SegmentedButton) {
 	return (
 		<ul
 			role="listbox"
-			class="ui5-segmented-button-root"
+			class={{
+				"ui5-segmented-button-root": true,
+				"ui5-segmented-button-root-equal-sized-items": this.contentMode === SegmentedButtonContentMode.EqualSized,
+				"ui5-segmented-button-root-content-fit-items": this.contentMode === SegmentedButtonContentMode.ContentFit,
+			}}
 			onClick={this._onclick}
 			onMouseDown={this._onmousedown}
 			onKeyDown={this._onkeydown}

package/src/TextAreaTemplate.tsx

@@ -51,6 +51,10 @@ export default function TextAreaTemplate(this: TextArea) {
 				<span class="ui5-textarea-exceeded-text">{this._exceededTextProps.exceededText}</span>
 				}
 
+				{this.ariaDescriptionText &&
+				<span id="accessibleDescription" class="ui5-hidden-text">{this.ariaDescriptionText}</span>
+				}
+
 				{this.hasValueState &&
 				<span id={`${this._id}-valueStateDesc`} class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
 				}

package/src/features/InputSuggestionsTemplate.tsx

@@ -44,7 +44,6 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 									showClearIcon={this.showClearIcon}
 									placeholder={this.placeholder}
 									onInput={this._handleInput}
-									onChange={this._handleChange}
 								/>
 							</div>
 						</div>
@@ -79,14 +78,14 @@ export default function InputSuggestionsTemplate(this: Input, hooks?: { suggesti
 				<div slot="footer" class="ui5-responsive-popover-footer">
 					<Button
 						design="Emphasized"
-						onClick={this._closePicker}
+						onClick={this._confirmMobileValue}
 					>
 						{this._suggestionsOkButtonText}
 					</Button>
 					<Button
 						class="ui5-responsive-popover-close-btn"
 						design="Transparent"
-						onClick={this._closePicker}
+						onClick={this._cancelMobileValue}
 					>
 						{this._suggestionsCancelButtonText}
 					</Button>

package/src/i18n/messagebundle.properties

@@ -73,8 +73,8 @@ BUTTON_ARIA_TYPE_ACCEPT=Positive Action
 #XACT: ARIA announcement for the reject button
 BUTTON_ARIA_TYPE_REJECT=Negative Action
 
-#XACT: ARIA announcement for the emphasized button
-BUTTON_ARIA_TYPE_EMPHASIZED=Emphasized
+#XACT: ARIA announcement for the default action (emphasized) button
+BUTTON_ARIA_TYPE_EMPHASIZED=Default Action
 
 #XACT: ARIA announcement for the warning button
 BUTTON_ARIA_TYPE_ATTENTION=Warning
@@ -104,7 +104,7 @@ CAL_LEGEND_ROLE_DESCRIPTION=Calendar Legend
 CAROUSEL_OF_TEXT=of
 
 #Carousel dots text
-CAROUSEL_DOT_TEXT=Item {0} of {1} displayed
+CAROUSEL_DOT_TEXT=Page {0} of {1}
 
 # Carousel Previous Page text
 CAROUSEL_PREVIOUS_ARROW_TEXT=Previous Page

package/src/i18n/messagebundle_ar.properties

@@ -180,6 +180,8 @@ INPUT_CLEAR_ICON_ACC_NAME=مسح
 
 INPUT_SUGGESTIONS_OK_BUTTON=موافق
 
+INPUT_SUGGESTIONS_CANCEL_BUTTON=إلغاء
+
 LINK_SUBTLE=غامض
 
 LINK_EMPHASIZED=مؤكد
@@ -232,10 +234,14 @@ MESSAGE_STRIP_CUSTOM=شريط الرسالة المخصصة
 
 MULTICOMBOBOX_DIALOG_OK_BUTTON=موافق
 
+MULTICOMBOBOX_DIALOG_CANCEL_BUTTON=إلغاء
+
 COMBOBOX_AVAILABLE_OPTIONS=الخيارات المتوفرة
 
 COMBOBOX_DIALOG_OK_BUTTON=موافق
 
+COMBOBOX_DIALOG_CANCEL_BUTTON=إلغاء
+
 INPUT_AVALIABLE_VALUES=القيم المتوفرة
 
 VALUE_STATE_ERROR_ALREADY_SELECTED=هذه القيمة محددة بالفعل.

package/src/i18n/messagebundle_bg.properties

@@ -180,6 +180,8 @@ INPUT_CLEAR_ICON_ACC_NAME=Изчистване
 
 INPUT_SUGGESTIONS_OK_BUTTON=ОК
 
+INPUT_SUGGESTIONS_CANCEL_BUTTON=Отказ
+
 LINK_SUBTLE=Блед
 
 LINK_EMPHASIZED=Подчертано
@@ -232,10 +234,14 @@ MESSAGE_STRIP_CUSTOM=Лента с потребителско съобщение
 
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
 
+MULTICOMBOBOX_DIALOG_CANCEL_BUTTON=Отказ
+
 COMBOBOX_AVAILABLE_OPTIONS=Налични опции
 
 COMBOBOX_DIALOG_OK_BUTTON=ОК
 
+COMBOBOX_DIALOG_CANCEL_BUTTON=Отказ
+
 INPUT_AVALIABLE_VALUES=Налични стойности
 
 VALUE_STATE_ERROR_ALREADY_SELECTED=Тази стойност вече е избрана.

package/src/i18n/messagebundle_ca.properties

@@ -180,6 +180,8 @@ INPUT_CLEAR_ICON_ACC_NAME=Esborrar
 
 INPUT_SUGGESTIONS_OK_BUTTON=D''acord
 
+INPUT_SUGGESTIONS_CANCEL_BUTTON=Cancel·lar
+
 LINK_SUBTLE=Discret
 
 LINK_EMPHASIZED=Destacat
@@ -232,10 +234,14 @@ MESSAGE_STRIP_CUSTOM=Línia de missatges personalitzats
 
 MULTICOMBOBOX_DIALOG_OK_BUTTON=D''acord
 
+MULTICOMBOBOX_DIALOG_CANCEL_BUTTON=Cancel·lar
+
 COMBOBOX_AVAILABLE_OPTIONS=Opcions disponibles
 
 COMBOBOX_DIALOG_OK_BUTTON=D''acord
 
+COMBOBOX_DIALOG_CANCEL_BUTTON=Cancel·lar
+
 INPUT_AVALIABLE_VALUES=Valors disponibles
 
 VALUE_STATE_ERROR_ALREADY_SELECTED=Aquest valor ja està seleccionat.

package/src/i18n/messagebundle_cnr.properties

@@ -180,6 +180,8 @@ INPUT_CLEAR_ICON_ACC_NAME=Poništi
 
 INPUT_SUGGESTIONS_OK_BUTTON=OK
 
+INPUT_SUGGESTIONS_CANCEL_BUTTON=Odustani
+
 LINK_SUBTLE=Suptilno
 
 LINK_EMPHASIZED=Naglašeno
@@ -232,10 +234,14 @@ MESSAGE_STRIP_CUSTOM=Traka za prilagođene poruke
 
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
 
+MULTICOMBOBOX_DIALOG_CANCEL_BUTTON=Odustani
+
 COMBOBOX_AVAILABLE_OPTIONS=Dostupne opcije
 
 COMBOBOX_DIALOG_OK_BUTTON=OK
 
+COMBOBOX_DIALOG_CANCEL_BUTTON=Odustani
+
 INPUT_AVALIABLE_VALUES=Dostupne vrijednosti
 
 VALUE_STATE_ERROR_ALREADY_SELECTED=Ova vrijednost je već odabrana.

package/src/i18n/messagebundle_cs.properties

@@ -180,6 +180,8 @@ INPUT_CLEAR_ICON_ACC_NAME=Vyčistit
 
 INPUT_SUGGESTIONS_OK_BUTTON=OK
 
+INPUT_SUGGESTIONS_CANCEL_BUTTON=Zrušit
+
 LINK_SUBTLE=Jemné
 
 LINK_EMPHASIZED=Zvýrazněné
@@ -232,10 +234,14 @@ MESSAGE_STRIP_CUSTOM=Pruh vlastních zpráv
 
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
 
+MULTICOMBOBOX_DIALOG_CANCEL_BUTTON=Zrušit
+
 COMBOBOX_AVAILABLE_OPTIONS=Dostupné volby
 
 COMBOBOX_DIALOG_OK_BUTTON=OK
 
+COMBOBOX_DIALOG_CANCEL_BUTTON=Zrušit
+
 INPUT_AVALIABLE_VALUES=Dostupné hodnoty
 
 VALUE_STATE_ERROR_ALREADY_SELECTED=Tato hodnota je již vybrána.