@ui5/webcomponents 2.16.0-rc.3 → 2.16.1-rc.0

package/dist/types/{SelectTwoColumnSeparator.d.ts → SelectTextSeparator.d.ts}

@@ -3,7 +3,7 @@
  * @public
  * @since 2.16.0
  */
-declare enum SelectTwoColumnSeparator {
+declare enum SelectTextSeparator {
     /**
      * Will show bullet(·) as separator on two columns layout when Select is in read-only mode.
      * @public
@@ -20,4 +20,4 @@ declare enum SelectTwoColumnSeparator {
      */
     VerticalLine = "VerticalLine"
 }
-export default SelectTwoColumnSeparator;
+export default SelectTextSeparator;

package/dist/types/{SelectTwoColumnSeparator.js → SelectTextSeparator.js}

@@ -3,23 +3,23 @@
  * @public
  * @since 2.16.0
  */
-var SelectTwoColumnSeparator;
-(function (SelectTwoColumnSeparator) {
+var SelectTextSeparator;
+(function (SelectTextSeparator) {
     /**
      * Will show bullet(·) as separator on two columns layout when Select is in read-only mode.
      * @public
      */
-    SelectTwoColumnSeparator["Bullet"] = "Bullet";
+    SelectTextSeparator["Bullet"] = "Bullet";
     /**
      *	Will show N-dash(–) as separator on two columns layout when Select is in read-only mode.
      * @public
      */
-    SelectTwoColumnSeparator["Dash"] = "Dash";
+    SelectTextSeparator["Dash"] = "Dash";
     /**
      * 	Will show vertical line(|) as separator on two columns layout when Select is in read-only mode.
      * @public
      */
-    SelectTwoColumnSeparator["VerticalLine"] = "VerticalLine";
-})(SelectTwoColumnSeparator || (SelectTwoColumnSeparator = {}));
-export default SelectTwoColumnSeparator;
-//# sourceMappingURL=SelectTwoColumnSeparator.js.map
+    SelectTextSeparator["VerticalLine"] = "VerticalLine";
+})(SelectTextSeparator || (SelectTextSeparator = {}));
+export default SelectTextSeparator;
+//# sourceMappingURL=SelectTextSeparator.js.map

package/dist/types/SelectTextSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTextSeparator.js","sourceRoot":"","sources":["../../src/types/SelectTextSeparator.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,IAAK,mBAkBJ;AAlBD,WAAK,mBAAmB;IACvB;;;OAGG;IACH,wCAAiB,CAAA;IAEjB;;;OAGG;IACH,oCAAa,CAAA;IAEb;;;OAGG;IACH,oDAA6B,CAAA;AAC9B,CAAC,EAlBI,mBAAmB,KAAnB,mBAAmB,QAkBvB;AAED,eAAe,mBAAmB,CAAC","sourcesContent":["/**\n * Defines the separator types for Select component two-column layout.\n * @public\n * @since 2.16.0\n */\nenum SelectTextSeparator {\n\t/**\n\t * Will show bullet(·) as separator on two columns layout when Select is in read-only mode.\n\t * @public\n\t */\n\tBullet = \"Bullet\",\n\n\t/**\n\t *\tWill show N-dash(–) as separator on two columns layout when Select is in read-only mode.\n\t * @public\n\t */\n\tDash = \"Dash\",\n\n\t/**\n\t * \tWill show vertical line(|) as separator on two columns layout when Select is in read-only mode.\n\t * @public\n\t */\n\tVerticalLine = \"VerticalLine\",\n}\n\nexport default SelectTextSeparator;\n"]}

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

@@ -1706,6 +1706,16 @@
           "description": "Defines the accessible ARIA name of the component.",
           "values": []
         },
+        {
+          "name": "accessible-name-ref",
+          "description": "Defines id (or many ids) of the element (or elements) that label the component.",
+          "values": []
+        },
+        {
+          "name": "accessible-mode",
+          "description": "Defines the accessibility mode of the component in \"edit\" and \"display\" use-cases.\n\nBased on the mode, the component renders different HTML elements and ARIA attributes,\nwhich are appropriate for the use-case.\n\n**Usage:**\n- Set this property to \"Display\", when the form consists of non-editable (e.g. texts) form items.\n- Set this property to \"Edit\", when the form consists of editable (e.g. input fields) form items.",
+          "values": [{ "name": "Display" }, { "name": "Edit" }]
+        },
         {
           "name": "layout",
           "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns  are recommended)",
@@ -1740,7 +1750,7 @@
         },
         {
           "name": "item-spacing",
-          "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"non-edit\" and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"non-edit\" mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"non-edit\" mode and the input fields in \"edit\" mode.",
+          "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"display\"(\"non-edit\") and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"display\"(\"non-edit\") mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"display\"(\"non-edit\") mode and the input fields in \"edit\" mode.",
           "values": [{ "name": "Normal" }, { "name": "Large" }]
         }
       ],
@@ -1776,6 +1786,11 @@
           "name": "accessible-name",
           "description": "Defines the accessible ARIA name of the component.",
           "values": []
+        },
+        {
+          "name": "accessible-name-ref",
+          "description": "Defines id (or many ids) of the element (or elements) that label the component.",
+          "values": []
         }
       ],
       "references": []
@@ -3487,9 +3502,9 @@
           "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": "items-fit-content",
+          "description": "Determines whether the segmented button items should be sized to fit their content.\n\nIf set to `true`, each item will be sized to fit its content, with any extra space distributed after the last item.\nIf set to `false` (the default), all items will be equally sized to fill the available space.",
+          "values": []
         },
         {
           "name": "selected-items",
@@ -3607,7 +3622,7 @@
           "values": []
         },
         {
-          "name": "two-column-separator",
+          "name": "text-separator",
           "description": "Defines the separator type for the two columns layout when Select is in read-only mode.",
           "values": [
             { "name": "Bullet" },

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.3",
+  "version": "2.16.1-rc.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3490,6 +3490,19 @@
               "description": "Defines the accessible ARIA name of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "accessible-name-ref",
+              "description": "Defines id (or many ids) of the element (or elements) that label the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-mode",
+              "description": "Defines the accessibility mode of the component in \"edit\" and \"display\" use-cases.\n\nBased on the mode, the component renders different HTML elements and ARIA attributes,\nwhich are appropriate for the use-case.\n\n**Usage:**\n- Set this property to \"Display\", when the form consists of non-editable (e.g. texts) form items.\n- Set this property to \"Edit\", when the form consists of editable (e.g. input fields) form items.",
+              "value": {
+                "type": "\"Display\" | \"Edit\"",
+                "default": "\"Display\""
+              }
+            },
             {
               "name": "layout",
               "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns  are recommended)",
@@ -3520,7 +3533,7 @@
             },
             {
               "name": "item-spacing",
-              "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"non-edit\" and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"non-edit\" mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"non-edit\" mode and the input fields in \"edit\" mode.",
+              "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"display\"(\"non-edit\") and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"display\"(\"non-edit\") mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"display\"(\"non-edit\") mode and the input fields in \"edit\" mode.",
               "value": {
                 "type": "\"Normal\" | \"Large\"",
                 "default": "\"Normal\""
@@ -3545,6 +3558,16 @@
                 "description": "Defines the accessible ARIA name of the component.",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "accessible-name-ref",
+                "description": "Defines id (or many ids) of the element (or elements) that label the component.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-mode",
+                "description": "Defines the accessibility mode of the component in \"edit\" and \"display\" use-cases.\n\nBased on the mode, the component renders different HTML elements and ARIA attributes,\nwhich are appropriate for the use-case.\n\n**Usage:**\n- Set this property to \"Display\", when the form consists of non-editable (e.g. texts) form items.\n- Set this property to \"Edit\", when the form consists of editable (e.g. input fields) form items.",
+                "value": { "type": "\"Display\" | \"Edit\"" }
+              },
               {
                 "name": "layout",
                 "description": "Defines the number of columns to distribute the form content by breakpoint.\n\nSupported values:\n- `S` - 1 column by default (1 column is recommended)\n- `M` - 1 column by default (up to 2 columns are recommended)\n- `L` - 2 columns by default (up to 3 columns are recommended)\n- `XL` - 3 columns by default (up to 6 columns  are recommended)",
@@ -3574,7 +3597,7 @@
               },
               {
                 "name": "item-spacing",
-                "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"non-edit\" and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"non-edit\" mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"non-edit\" mode and the input fields in \"edit\" mode.",
+                "description": "Defines the vertical spacing between form items.\n\n**Note:** If the Form is meant to be switched between \"display\"(\"non-edit\") and \"edit\" modes,\nwe recommend using \"Large\" item spacing in \"display\"(\"non-edit\") mode, and \"Normal\" - for \"edit\" mode,\nto avoid \"jumping\" effect, caused by the hight difference between texts in \"display\"(\"non-edit\") mode and the input fields in \"edit\" mode.",
                 "value": { "type": "\"Normal\" | \"Large\"" }
               }
             ],
@@ -3608,6 +3631,11 @@
               "name": "accessible-name",
               "description": "Defines the accessible ARIA name of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "accessible-name-ref",
+              "description": "Defines id (or many ids) of the element (or elements) that label the component.",
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -3640,6 +3668,11 @@
                 "name": "accessible-name",
                 "description": "Defines the accessible ARIA name of the component.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "accessible-name-ref",
+                "description": "Defines id (or many ids) of the element (or elements) that label the component.",
+                "value": { "type": "string | undefined" }
               }
             ],
             "events": []
@@ -7329,12 +7362,9 @@
               }
             },
             {
-              "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": "items-fit-content",
+              "description": "Determines whether the segmented button items should be sized to fit their content.\n\nIf set to `true`, each item will be sized to fit its content, with any extra space distributed after the last item.\nIf set to `false` (the default), all items will be equally sized to fill the available space.",
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "selected-items",
@@ -7382,9 +7412,9 @@
                 "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": "items-fit-content",
+                "description": "Determines whether the segmented button items should be sized to fit their content.\n\nIf set to `true`, each item will be sized to fit its content, with any extra space distributed after the last item.\nIf set to `false` (the default), all items will be equally sized to fill the available space.",
+                "value": { "type": "boolean" }
               },
               {
                 "name": "selected-items",
@@ -7558,7 +7588,7 @@
               "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
-              "name": "two-column-separator",
+              "name": "text-separator",
               "description": "Defines the separator type for the two columns layout when Select is in read-only mode.",
               "value": {
                 "type": "\"Bullet\" | \"Dash\" | \"VerticalLine\"",
@@ -7663,7 +7693,7 @@
                 "value": { "type": "string | undefined" }
               },
               {
-                "name": "two-column-separator",
+                "name": "text-separator",
                 "description": "Defines the separator type for the two columns layout when Select is in read-only mode.",
                 "value": { "type": "\"Bullet\" | \"Dash\" | \"VerticalLine\"" }
               },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.16.0-rc.3",
+  "version": "2.16.1-rc.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -52,17 +52,17 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.16.0-rc.3",
-    "@ui5/webcomponents-icons": "2.16.0-rc.3",
-    "@ui5/webcomponents-icons-business-suite": "2.16.0-rc.3",
-    "@ui5/webcomponents-icons-tnt": "2.16.0-rc.3",
-    "@ui5/webcomponents-localization": "2.16.0-rc.3",
-    "@ui5/webcomponents-theming": "2.16.0-rc.3"
+    "@ui5/webcomponents-base": "2.16.1-rc.0",
+    "@ui5/webcomponents-icons": "2.16.1-rc.0",
+    "@ui5/webcomponents-icons-business-suite": "2.16.1-rc.0",
+    "@ui5/webcomponents-icons-tnt": "2.16.1-rc.0",
+    "@ui5/webcomponents-localization": "2.16.1-rc.0",
+    "@ui5/webcomponents-theming": "2.16.1-rc.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.16.0-rc.3",
+    "@ui5/webcomponents-tools": "2.16.1-rc.0",
     "chokidar-cli": "^3.0.0",
     "cypress": "^15.3.0",
     "eslint": "^7.22.0",
@@ -71,5 +71,5 @@
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "73762a2be34acc196e0f251c0b54f3559d02c1aa"
+  "gitHead": "8260c29052a86e87d48856189bfe781f53816488"
 }

package/src/CarouselTemplate.tsx

@@ -21,7 +21,7 @@ export default function CarouselTemplate(this: Carousel) {
 			onMouseDown={this._onmousedown}
 		>
 			<div class={this.classes.viewport} part="content">
-				<div role="list" class={this.classes.content} style={{ transform: `translate3d(${this._isRTL ? "" : "-"}${this._currentSlideIndex * (this._itemWidth || 0)}px, 0, 0` }}>
+				<div role="list" aria-label={this._ariaListLabel} 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

package/src/ColorPaletteItemTemplate.tsx

@@ -4,9 +4,6 @@ export default function ColorPaletteItemTemplate(this: ColorPaletteItem) {
 	return (
 		<div
 			class="ui5-cp-item"
-			style={{
-				"background-color": this.value,
-			}}
 			tabindex={parseInt(this.forcedTabIndex)}
 			role="button"
 			aria-label={`${this.colorLabel} - ${this.index}: ${this.value}`}

package/src/FormItemTemplate.tsx

@@ -1,21 +1,42 @@
+import type { SlottedChild } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type FormItem from "./FormItem.js";
-import type SlottedChild from "@ui5/webcomponents-base/dist/UI5Element.js";
 
 export default function FormItemTemplate(this: FormItem) {
 	return (
 		<div class="ui5-form-item-root">
 			<div class="ui5-form-item-layout" part="layout">
-				<div class="ui5-form-item-label" part="label">
-					<slot name="labelContent"></slot>
-				</div>
-				<div class="ui5-form-item-content" part="content">
-					{this.content.map(item =>
-						<div class="ui5-form-item-content-child">
-							<slot name={(item as SlottedChild)._individualSlot}></slot>
-						</div>
-					)}
-				</div>
+				{ this.accessibleMode === "Edit" ? content.call(this) : contentAsDefinitionList.call(this) }
 			</div>
 		</div>
 	);
 }
+
+function content(this: FormItem) {
+	return <>
+		<div class="ui5-form-item-label" part="label">
+			<slot name="labelContent"></slot>
+		</div>
+		<div class="ui5-form-item-content" part="content">
+			{this.content.map(item =>
+				<div class="ui5-form-item-content-child">
+					<slot name={(item as SlottedChild)._individualSlot}></slot>
+				</div>
+			)}
+		</div>
+	</>;
+}
+
+function contentAsDefinitionList(this: FormItem) {
+	return <>
+		<dt class="ui5-form-item-label" part="label">
+			<slot name="labelContent"></slot>
+		</dt>
+		<dd class="ui5-form-item-content" part="content">
+			{this.content.map(item =>
+				<div class="ui5-form-item-content-child">
+					<slot name={(item as SlottedChild)._individualSlot}></slot>
+				</div>
+			)}
+		</dd>
+	</>;
+}

package/src/FormTemplate.tsx

@@ -19,58 +19,74 @@ export default function FormTemplate(this: Form) {
 				</div>
 			}
 
-			<div class="ui5-form-layout" part="layout">
-				{
-					this.hasGroupItems ?
-						<>
-							{
-								this.groupItemsInfo.map(groupItemInfo => {
-									const groupItem = groupItemInfo.groupItem;
-									return (
-										<div class={{
-											"ui5-form-column": true,
-											[`ui5-form-column-spanL-${groupItem.colsL}`]: true,
-											[`ui5-form-column-spanXL-${groupItem.colsXl}`]: true,
-											[`ui5-form-column-spanM-${groupItem.colsM}`]: true,
-											[`ui5-form-column-spanS-${groupItem.colsS}`]: true,
-										}}
-										part="column"
-										>
-											<div class="ui5-form-group" role="form" aria-labelledby={groupItemInfo.accessibleNameRef} aria-label={groupItemInfo.accessibleName}>
-												{groupItem.headerText &&
-												<div class="ui5-form-group-heading">
-													<Title id={`${groupItem._id}-group-header-text`} level={groupItem.headerLevel} size="H6">{groupItem.headerText}</Title>
-												</div>
-												}
+			{ this.hasGroupItems ? groupedItemsLayout.call(this) : standaloneItemsLayout.call(this) }
+		</div>
+	);
+}
 
-												<div class="ui5-form-group-layout">
-													<slot name={groupItem._individualSlot}></slot>
-												</div>
-											</div>
-										</div>
-									);
-								}
-								)}
-						</>
+function groupedItemsLayout(this: Form) {
+	return <div class="ui5-form-layout" part="layout">
+		{ this.groupItemsInfo.map(groupItemInfo => {
+			const groupItem = groupItemInfo.groupItem;
+			return <div
+				class={{
+					"ui5-form-column": true,
+					[`ui5-form-column-spanL-${groupItem.colsL}`]: true,
+					[`ui5-form-column-spanXL-${groupItem.colsXl}`]: true,
+					[`ui5-form-column-spanM-${groupItem.colsM}`]: true,
+					[`ui5-form-column-spanS-${groupItem.colsS}`]: true,
+				}}
+				part="column"
+			>
+				<div class="ui5-form-group"
+					role={groupItemInfo.role}
+					aria-labelledby={groupItemInfo.accessibleNameRef}
+					aria-label={groupItemInfo.accessibleName}
+				>
+					{ groupItem.headerText &&
+						<div class="ui5-form-group-heading">
+							<Title id={`${groupItem._id}-group-header-text`} level={groupItem.headerLevel} size="H6">{groupItem.headerText}</Title>
+						</div>
+					}
+					{ this.accessibleMode === "Edit" ?
+						<div class="ui5-form-group-layout">
+							<slot name={groupItem._individualSlot}></slot>
+						</div>
 						:
-						<>
-							{
-								this.itemsInfo.map(itemInfo => {
-									const item = itemInfo.item;
-									return (
-										<div class={{
-											"ui5-form-item": true,
-											[`ui5-form-item-span-${item.columnSpan}`]: item.columnSpan !== undefined,
-										}}
-										>
-											<slot name={item._individualSlot}></slot>
-										</div>
-									);
-								})
-							}
-						</>
-				}
+						<dl class="ui5-form-group-layout" aria-labelledby={groupItemInfo.accessibleNameRefInner} aria-label={groupItemInfo.accessibleNameInner}>
+							<slot name={groupItem._individualSlot}></slot>
+						</dl>
+					}
+				</div>
+			</div>;
+		})}
+	</div>;
+}
+
+function standaloneItemsLayout(this: Form) {
+	return (
+		this.accessibleMode === "Edit" ?
+			<div class="ui5-form-layout" part="layout">
+				{ standaloneItemsLayoutContent.call(this) }
 			</div>
-		</div>
+			:
+			<dl class="ui5-form-layout" part="layout">
+				{ standaloneItemsLayoutContent.call(this) }
+			</dl>
 	);
 }
+
+function standaloneItemsLayoutContent(this: Form) {
+	return this.itemsInfo.map(itemInfo => {
+		const item = itemInfo.item;
+		return (
+			<div class={{
+				"ui5-form-item": true,
+				[`ui5-form-item-span-${item.columnSpan}`]: item.columnSpan !== undefined,
+			}}
+			>
+				<slot name={item._individualSlot}></slot>
+			</div>
+		);
+	});
+}

package/src/SegmentedButtonTemplate.tsx

@@ -1,5 +1,4 @@
 import type SegmentedButton from "./SegmentedButton.js";
-import SegmentedButtonContentMode from "./types/SegmentedButtonContentMode.js";
 
 export default function SegmentedButtonTemplate(this: SegmentedButton) {
 	return (
@@ -7,8 +6,8 @@ export default function SegmentedButtonTemplate(this: SegmentedButton) {
 			role="listbox"
 			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,
+				"ui5-segmented-button-root-equal-sized-items": !this.itemsFitContent,
+				"ui5-segmented-button-root-content-fit-items": this.itemsFitContent,
 			}}
 			onClick={this._onclick}
 			onMouseDown={this._onmousedown}

package/src/i18n/messagebundle.properties

@@ -115,6 +115,9 @@ CAROUSEL_NEXT_ARROW_TEXT=Next Page
 #XACT: ARIA announcement for the attribute 'aria-roledescription' of the Carousel component
 CAROUSEL_ARIA_ROLE_DESCRIPTION=Carousel
 
+#XACT: ARIA announcement for the aria-label attribute of an element within a Carousel component with a list role
+CAROUSEL_ARIA_LIST_LABEL=Item Container
+
 #XFLD: Label of the container holding the colors
 COLORPALETTE_CONTAINER_LABEL=Color palette - Predefined colors
 

package/src/i18n/messagebundle_ar.properties

@@ -471,6 +471,8 @@ TOOLBAR_POPOVER_AVAILABLE_VALUES=القيم المتوفرة
 
 FORM_ACCESSIBLE_NAME=النموذج
 
+FORM_GROUP_ACCESSIBLE_NAME=المجموعة {0}
+
 FORM_CHECKABLE_REQUIRED=يرجى وضع علامة على هذا المربع إذا كنت تريد المتابعة.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=يرجى ملء هذا الحقل أو تحديد بند في القائمة.
@@ -483,11 +485,12 @@ FORM_TEXTFIELD_REQUIRED=يرجى ملء هذا الحقل.
 
 TABLE_SELECTION=التحديد
 TABLE_ROW_SELECTOR=مُحدِّد أولي
+TABLE_ROW_NAVIGATED=انتقل إلى
 TABLE_NO_DATA=لا توجد بيانات
 TABLE_SINGLE_SELECTABLE=جدول التحديد الفردي
 TABLE_MULTI_SELECTABLE=جدول التحديد المتعدد
-TABLE_CELL_SINGLE_CONTROL=يحتوي على عنصر تحكم
-TABLE_CELL_MULTIPLE_CONTROLS=يحتوي على عناصر تحكم
+TABLE_CELL_SINGLE_CONTROL=يتضمن عنصر
+TABLE_CELL_MULTIPLE_CONTROLS=يتضمن عناصر
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=خانات الاختيار تحديد الكل
 TABLE_COLUMNHEADER_SELECTALL_CHECKED=محدد
 TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=غير محدد
@@ -523,6 +526,14 @@ DYNAMIC_DATE_RANGE_DATE_TEXT=التاريخ
 
 DYNAMIC_DATE_RANGE_DATERANGE_TEXT=من/إلى
 
+DYNAMIC_DATE_RANGE_FROM_INPUT_TEXT=من
+
+DYNAMIC_DATE_RANGE_TO_INPUT_TEXT=إلى
+
+DYNAMIC_DATE_RANGE_FROM_TEXT=من (التاريخ/الوقت)
+
+DYNAMIC_DATE_RANGE_TO_TEXT=إلى (التاريخ/الوقت)
+
 DYNAMIC_DATE_RANGE_SELECTED_TEXT=مُحدد
 
 DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT=اختيار التواريخ

package/src/i18n/messagebundle_bg.properties

@@ -471,6 +471,8 @@ TOOLBAR_POPOVER_AVAILABLE_VALUES=Налични стойности
 
 FORM_ACCESSIBLE_NAME=Формуляр
 
+FORM_GROUP_ACCESSIBLE_NAME=Група {0}
+
 FORM_CHECKABLE_REQUIRED=Моля, поставете отметка в това поле, ако искате да продължите.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=Моля, попълнете това поле или изберете позиция от списъка.
@@ -483,11 +485,12 @@ FORM_TEXTFIELD_REQUIRED=Моля, попълнете това поле.
 
 TABLE_SELECTION=Избор
 TABLE_ROW_SELECTOR=Селектор на редове
+TABLE_ROW_NAVIGATED=С навигация
 TABLE_NO_DATA=Няма данни
 TABLE_SINGLE_SELECTABLE=Таблица за единичен избор
 TABLE_MULTI_SELECTABLE=Таблица за множествен избор
-TABLE_CELL_SINGLE_CONTROL=Съдържа контрола
-TABLE_CELL_MULTIPLE_CONTROLS=Съдържа контроли
+TABLE_CELL_SINGLE_CONTROL=Включва елемент
+TABLE_CELL_MULTIPLE_CONTROLS=Включва елементи
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Поле за отметка „Избор на всички“
 TABLE_COLUMNHEADER_SELECTALL_CHECKED=С отметка
 TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=Без отметка
@@ -523,6 +526,14 @@ DYNAMIC_DATE_RANGE_DATE_TEXT=Дата
 
 DYNAMIC_DATE_RANGE_DATERANGE_TEXT=От/до
 
+DYNAMIC_DATE_RANGE_FROM_INPUT_TEXT=От
+
+DYNAMIC_DATE_RANGE_TO_INPUT_TEXT=До
+
+DYNAMIC_DATE_RANGE_FROM_TEXT=От (дата, час)
+
+DYNAMIC_DATE_RANGE_TO_TEXT=До (дата, час)
+
 DYNAMIC_DATE_RANGE_SELECTED_TEXT=Избрано
 
 DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT=Избор на дати

package/src/i18n/messagebundle_ca.properties

@@ -471,6 +471,8 @@ TOOLBAR_POPOVER_AVAILABLE_VALUES=Valors disponibles
 
 FORM_ACCESSIBLE_NAME=Formulari
 
+FORM_GROUP_ACCESSIBLE_NAME=Grup {0}
+
 FORM_CHECKABLE_REQUIRED=Marqueu aquest quadre si voleu continuar.
 
 FORM_MIXED_TEXTFIELD_REQUIRED=Empleneu aquest camp o seleccioneu un article de la llista.
@@ -483,11 +485,12 @@ FORM_TEXTFIELD_REQUIRED=Empleneu aquest camp.
 
 TABLE_SELECTION=Selecció
 TABLE_ROW_SELECTOR=Selector de fila
+TABLE_ROW_NAVIGATED=Navegat
 TABLE_NO_DATA=No hi ha dades
 TABLE_SINGLE_SELECTABLE=Taula de selecció simple
 TABLE_MULTI_SELECTABLE=Taula de selecció múltiple
-TABLE_CELL_SINGLE_CONTROL=Conté un control
-TABLE_CELL_MULTIPLE_CONTROLS=Conté controls
+TABLE_CELL_SINGLE_CONTROL=Inclou un element
+TABLE_CELL_MULTIPLE_CONTROLS=Inclou elements
 TABLE_COLUMNHEADER_SELECTALL_DESCRIPTION=Casella de selecció "Seleccionar-ho tot"
 TABLE_COLUMNHEADER_SELECTALL_CHECKED=Activat
 TABLE_COLUMNHEADER_SELECTALL_NOT_CHECKED=No verificat
@@ -523,6 +526,14 @@ DYNAMIC_DATE_RANGE_DATE_TEXT=Data
 
 DYNAMIC_DATE_RANGE_DATERANGE_TEXT=De / A
 
+DYNAMIC_DATE_RANGE_FROM_INPUT_TEXT=De
+
+DYNAMIC_DATE_RANGE_TO_INPUT_TEXT=A
+
+DYNAMIC_DATE_RANGE_FROM_TEXT=De (data/hora)
+
+DYNAMIC_DATE_RANGE_TO_TEXT=A (data/hora)
+
 DYNAMIC_DATE_RANGE_SELECTED_TEXT=Selecció
 
 DYNAMIC_DATE_RANGE_EMPTY_SELECTED_TEXT=Seleccionar dates