@ui5/webcomponents 2.13.0-rc.2 → 2.13.0

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.13.0-rc.2",
+  "version": "2.13.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -569,6 +569,16 @@
                 "type": "\"Button\" | \"Link\"",
                 "default": "\"Button\""
               }
+            },
+            {
+              "name": "loading",
+              "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "loading-delay",
+              "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.",
+              "value": { "type": "number", "default": "1000" }
             }
           ],
           "slots": [
@@ -647,6 +657,16 @@
                 "name": "accessible-role",
                 "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.",
                 "value": { "type": "\"Button\" | \"Link\"" }
+              },
+              {
+                "name": "loading",
+                "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "loading-delay",
+                "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.",
+                "value": { "type": "number" }
               }
             ],
             "events": [
@@ -1542,7 +1562,7 @@
               "name": "opener",
               "description": "Defines the ID or DOM Reference of the element that the popover is shown at.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
               "value": {
-                "type": "string | HTMLElement | undefined",
+                "type": "string | HTMLElement | null | undefined",
                 "default": "undefined"
               }
             }
@@ -1593,7 +1613,7 @@
               {
                 "name": "opener",
                 "description": "Defines the ID or DOM Reference of the element that the popover is shown at.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
-                "value": { "type": "string | HTMLElement | undefined" }
+                "value": { "type": "string | HTMLElement | null | undefined" }
               }
             ],
             "events": [
@@ -1930,6 +1950,14 @@
               "name": "header-accessible-name",
               "description": "Defines the accessible name of the header.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "wrapping-type",
+              "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).",
+              "value": {
+                "type": "\"None\" | \"Normal\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [
@@ -1963,6 +1991,11 @@
                 "name": "header-accessible-name",
                 "description": "Defines the accessible name of the header.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "wrapping-type",
+                "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).",
+                "value": { "type": "\"None\" | \"Normal\"" }
               }
             ],
             "events": [
@@ -4479,6 +4512,14 @@
               "name": "header-accessible-name",
               "description": "Defines the accessible name of the header.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "wrapping-type",
+              "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).",
+              "value": {
+                "type": "\"None\" | \"Normal\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [
@@ -4512,6 +4553,11 @@
                 "name": "header-accessible-name",
                 "description": "Defines the accessible name of the header.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "wrapping-type",
+                "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).",
+                "value": { "type": "\"None\" | \"Normal\"" }
               }
             ],
             "events": [
@@ -4771,7 +4817,7 @@
               "name": "opener",
               "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
               "value": {
-                "type": "string | HTMLElement | undefined",
+                "type": "string | HTMLElement | null | undefined",
                 "default": "undefined"
               }
             }
@@ -4836,7 +4882,7 @@
               {
                 "name": "opener",
                 "description": "Defines the ID or DOM Reference of the element at which the menu is shown.\nWhen using this attribute in a declarative way, you must only use the `id` (as a string) of the element at which you want to show the popover.\nYou can only set the `opener` attribute to a DOM Reference when using JavaScript.",
-                "value": { "type": "string | HTMLElement | undefined" }
+                "value": { "type": "string | HTMLElement | null | undefined" }
               }
             ],
             "events": [
@@ -5497,6 +5543,14 @@
               "name": "header-accessible-name",
               "description": "Defines the accessible name of the header.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "wrapping-type",
+              "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).",
+              "value": {
+                "type": "\"None\" | \"Normal\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [
@@ -5530,6 +5584,11 @@
                 "name": "header-accessible-name",
                 "description": "Defines the accessible name of the header.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "wrapping-type",
+                "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).",
+                "value": { "type": "\"None\" | \"Normal\"" }
               }
             ],
             "events": [
@@ -7569,6 +7628,14 @@
               "name": "accessible-name",
               "description": "Defines the accessible ARIA name of the component.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "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`.",
+              "value": {
+                "type": "SplitButtonAccessibilityAttributes",
+                "default": "{}"
+              }
             }
           ],
           "slots": [
@@ -7615,6 +7682,11 @@
                 "name": "accessible-name",
                 "description": "Defines the accessible ARIA name of the component.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "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`.",
+                "value": { "type": "SplitButtonAccessibilityAttributes" }
               }
             ],
             "events": [
@@ -7885,6 +7957,14 @@
               "name": "header-accessible-name",
               "description": "Defines the accessible name of the header.",
               "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "wrapping-type",
+              "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).",
+              "value": {
+                "type": "\"None\" | \"Normal\"",
+                "default": "\"None\""
+              }
             }
           ],
           "slots": [
@@ -7918,6 +7998,11 @@
                 "name": "header-accessible-name",
                 "description": "Defines the accessible name of the header.",
                 "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "wrapping-type",
+                "description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).",
+                "value": { "type": "\"None\" | \"Normal\"" }
               }
             ],
             "events": [
@@ -8713,7 +8798,7 @@
             },
             {
               "name": "position",
-              "description": "Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
+              "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
               "value": { "type": "number | undefined", "default": "undefined" }
             },
             {
@@ -8752,7 +8837,7 @@
               },
               {
                 "name": "position",
-                "description": "Defines the position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
+                "description": "Defines the 0-based position of the row related to the total number of rows within the table when the `ui5-table-virtualizer` feature is used.",
                 "value": { "type": "number | undefined" }
               },
               {
@@ -9797,6 +9882,16 @@
                 "type": "\"Button\" | \"Link\"",
                 "default": "\"Button\""
               }
+            },
+            {
+              "name": "loading",
+              "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "loading-delay",
+              "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.",
+              "value": { "type": "number", "default": "1000" }
             }
           ],
           "slots": [
@@ -9880,6 +9975,16 @@
                 "name": "accessible-role",
                 "description": "Describes the accessibility role of the button.\n\n**Note:** Use <code>ButtonAccessibleRole.Link</code> role only with a press handler, which performs a navigation. In all other scenarios the default button semantics are recommended.",
                 "value": { "type": "\"Button\" | \"Link\"" }
+              },
+              {
+                "name": "loading",
+                "description": "Defines whether the button shows a loading indicator.\n\n**Note:** If set to `true`, a busy indicator component will be displayed on the related button.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "loading-delay",
+                "description": "Specifies the delay in milliseconds before the loading indicator appears within the associated button.",
+                "value": { "type": "number" }
               }
             ],
             "events": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.13.0-rc.2",
+  "version": "2.13.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.13.0-rc.2",
-    "@ui5/webcomponents-icons": "2.13.0-rc.2",
-    "@ui5/webcomponents-icons-business-suite": "2.13.0-rc.2",
-    "@ui5/webcomponents-icons-tnt": "2.13.0-rc.2",
-    "@ui5/webcomponents-localization": "2.13.0-rc.2",
-    "@ui5/webcomponents-theming": "2.13.0-rc.2"
+    "@ui5/webcomponents-base": "2.13.0",
+    "@ui5/webcomponents-icons": "2.13.0",
+    "@ui5/webcomponents-icons-business-suite": "2.13.0",
+    "@ui5/webcomponents-icons-tnt": "2.13.0",
+    "@ui5/webcomponents-localization": "2.13.0",
+    "@ui5/webcomponents-theming": "2.13.0"
   },
   "devDependencies": {
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.13.0-rc.2",
+    "@ui5/webcomponents-tools": "2.13.0",
     "chromedriver": "^137.0.4",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "cfdce920e672d42c5433956291c3531ef8c07be3"
+  "gitHead": "005828de6708dade06748df6216ff9072f10aea5"
 }

package/src/ButtonTemplate.tsx

@@ -1,5 +1,7 @@
 import type Button from "./Button.js";
 import Icon from "./Icon.js";
+import BusyIndicator from "./BusyIndicator.js";
+import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
 
 export default function ButtonTemplate(this: Button, injectedProps?: {
 		ariaPressed?: boolean,
@@ -15,7 +17,7 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 				"ui5-button-root": true,
 				"ui5-button-badge-placement-end": this.badge[0]?.design === "InlineText",
 				"ui5-button-badge-placement-end-top": this.badge[0]?.design === "OverlayText",
-				"ui5-button-badge-dot": this.badge[0]?.design === "AttentionDot",
+				"ui5-button-badge-dot": this.badge[0]?.design === "AttentionDot"
 			}}
 			disabled={this.disabled}
 			data-sap-focus-ref
@@ -37,6 +39,7 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 			aria-haspopup={this._hasPopup}
 			aria-label={this.ariaLabelText}
 			aria-description={this.ariaDescriptionText}
+			aria-busy={this.loading ? "true" : undefined}
 			title={this.buttonTitle}
 			part="button"
 			role={this.effectiveAccRole}
@@ -69,5 +72,15 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 				<slot name="badge"/>
 			}
 		</button>
+		{this.loading &&
+			<BusyIndicator
+				id={`${this._id}-button-busy-indicator`}
+				class="ui5-button-busy-indicator"
+				size={this.iconOnly ? BusyIndicatorSize.S : BusyIndicatorSize.M}
+				active={true}
+				delay={this.loadingDelay}
+				inert={this.loading}
+			/>
+		}
 	</>);
 }

package/src/ComboBoxPopoverTemplate.tsx

@@ -122,7 +122,7 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 			onClose={this._handleValueStatePopoverAfterClose}
 			onFocusOut={this._handleValueStatePopoverFocusout}
 		>
-			<div slot="header" class={this.classes.popoverValueState} style={this.styles.popoverHeader}>
+			<div slot="header" class={this.classes.popoverValueState}>
 				<Icon class="ui5-input-value-state-message-icon" name={this._valueStateMessageIcon}/>
 				{ valueStateMessage.call(this) }
 			</div>

package/src/IconTemplate.tsx

@@ -1,5 +1,10 @@
 import type Icon from "./Icon.js";
 
+type LegacySVGTemplate = {
+	strings: string[],
+	values?: Array<string | LegacySVGTemplate>
+}
+
 export default function IconTemplate(this: Icon) {
 	return (
 		<svg
@@ -22,9 +27,7 @@ export default function IconTemplate(this: Icon) {
 			}
 
 			<g role="presentation">
-				{this.customSvg &&
-                    <g dangerouslySetInnerHTML={{ __html: (this.customSvg as { strings?: string[] }).strings?.join("") ?? "" }}></g>
-				}
+				{this.customSvg && svgTemplate.call(this, this.customSvg)}
 
 				{this.pathData.map(path => (
 					<path d={path}></path>
@@ -33,3 +36,29 @@ export default function IconTemplate(this: Icon) {
 		</svg>
 	);
 }
+
+function svgTemplate(this: Icon, template: object | LegacySVGTemplate) {
+	if ((template as LegacySVGTemplate).strings) {
+		return <g dangerouslySetInnerHTML={{ __html: renderLegacySVGTemplate(this.customSvg as LegacySVGTemplate) ?? "" }}></g>;
+	}
+	return template;
+}
+
+// Renders legacy (lit) SVG template
+function renderLegacySVGTemplate(customTemplate: LegacySVGTemplate): string {
+	const { strings, values } = customTemplate;
+
+	return strings.map((str: string, i: number) => {
+		const value = values && values[i];
+
+		if (typeof value === "string") {
+			return str + value;
+		}
+
+		if (typeof value === "object" && value?.strings) {
+			return str + renderLegacySVGTemplate(value);
+		}
+
+		return str;
+	}).join("");
+}

package/src/InputPopoverTemplate.tsx

@@ -29,7 +29,7 @@ export default function InputPopoverTemplate(this: Input, hooks?: { suggestionsL
 					open={this.valueStateOpen}
 					onClose={this._handleValueStatePopoverAfterClose}
 				>
-					<div slot="header" class={this.classes.popoverValueState} style={this.styles.popoverHeader}>
+					<div slot="header" class={this.classes.popoverValueState}>
 						<Icon class="ui5-input-value-state-message-icon" name={valueStateMessageInputIcon.call(this)} />
 						{ this.valueStateOpen && valueStateMessage.call(this) }
 					</div>

package/src/ListItemGroupHeaderTemplate.tsx

@@ -1,4 +1,5 @@
 import type ListItemGroupHeader from "./ListItemGroupHeader.js";
+import WrappingType from "./types/WrappingType.js";
 
 export default function ListItemGroupHeaderTemplate(this: ListItemGroupHeader) {
 	return (
@@ -16,10 +17,27 @@ export default function ListItemGroupHeaderTemplate(this: ListItemGroupHeader) {
 			onKeyDown={this._onkeydown}
 		>
 			<div id={`${this._id}-content`} class="ui5-li-content">
-				<span class="ui5-ghli-title"><slot></slot></span>
+				{renderTitle.call(this)}
 			</div>
 
 			{this.hasSubItems && <slot name="subItems"></slot>}
 		</div>
 	);
 }
+
+function renderTitle(this: ListItemGroupHeader) {
+	if (this.wrappingType === WrappingType.Normal) {
+		return this.expandableTextTemplate?.call(this, {
+			className: "ui5-ghli-title",
+			text: this._textContent,
+			maxCharacters: this._maxCharacters,
+			part: "title",
+		});
+	}
+
+	return (
+		<span part="title" class="ui5-ghli-title">
+			<slot></slot>
+		</span>
+	);
+}

package/src/ListItemGroupTemplate.tsx

@@ -7,7 +7,7 @@ export default function ListItemGroupTemplate(this: ListItemGroup) {
 	return (
 		<>
 			{this.hasHeader &&
-				<ListItemGroupHeader focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.ListItem}>
+				<ListItemGroupHeader wrappingType={this.wrappingType} focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.ListItem}>
 					{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
 					<div
 						role="list"

package/src/ListTemplate.tsx

@@ -13,7 +13,7 @@ export default function ListTemplate(this: List) {
 			onDrop={this._ondrop}
 			onDragLeave={this._ondragleave}
 			// events bubbling from slotted items
-			onui5-close={this.onItemClose}
+			onui5-_close={this.onItemClose}
 			onui5-toggle={this.onItemToggle}
 			onui5-request-tabindex-change={this.onItemTabIndexChange}
 			onui5-_focused={this.onItemFocused}

package/src/SplitButtonTemplate.tsx

@@ -8,7 +8,10 @@ export default function SplitButtonTemplate(this: SplitButton) {
 			role={this._hideArrowButton ? "button" : "group"}
 			class="ui5-split-button-root"
 			tabindex={this._tabIndex}
-			aria-labelledby={`${this._id}-invisibleTextDefault ${this._id}-invisibleText`}
+			aria-labelledby={this._hideArrowButton ? undefined : `${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}
 			onFocusOut={this._onFocusOut}
 			onKeyDown={this._onKeyDown}
 			onKeyUp={this._onKeyUp}
@@ -28,31 +31,34 @@ export default function SplitButtonTemplate(this: SplitButton) {
 				onMouseUp={this._textButtonRelease}
 				onFocusIn={this._onInnerButtonFocusIn}
 				onFocusOut={this._onFocusOut}
+				tooltip={this._computedAccessibilityAttributes?.root?.title}
 			>
 				{this.isTextButton && <slot></slot> }
 			</Button>
 
-			{!this._hideArrowButton &&
-				<Button
-					class="ui5-split-arrow-button"
-					design={this.design}
-					icon={slimArrowDown}
-					tabindex={-1}
-					tooltip={this.accInfo.arrowButton.title}
-					accessibilityAttributes={this.accInfo.arrowButton.accessibilityAttributes}
-					disabled={this.disabled}
-					active={this.effectiveActiveArrowButton}
-					part="arrowButton"
-					onClick={this._handleArrowButtonAction}
-					onMouseDown={this._arrowButtonPress}
-					onMouseUp={this._arrowButtonRelease}
-					onFocusIn={this._onInnerButtonFocusIn}
-					onActiveStateChange={this._onArrowButtonActiveStateChange}
-				>
-				</Button>
-			}
-			<span id={`${this._id}-invisibleText`} class="ui5-hidden-text">{this.accInfo.root.description} {this.accInfo.root.keyboardHint} {this.accessibleName}</span>
-			<span id={`${this._id}-invisibleTextDefault`} class="ui5-hidden-text">{this.textButtonAccText}</span>
+			{!this._hideArrowButton && (
+				<>
+					<Button
+						class="ui5-split-arrow-button"
+						design={this.design}
+						icon={slimArrowDown}
+						tabindex={-1}
+						tooltip={this._computedAccessibilityAttributes?.arrowButton?.title}
+						accessibilityAttributes={{ hasPopup: this._computedAccessibilityAttributes?.arrowButton?.hasPopup, expanded: this._computedAccessibilityAttributes?.arrowButton?.expanded }}
+						disabled={this.disabled}
+						active={this.effectiveActiveArrowButton}
+						part="arrowButton"
+						onClick={this._handleArrowButtonAction}
+						onMouseDown={this._arrowButtonPress}
+						onMouseUp={this._arrowButtonRelease}
+						onFocusIn={this._onInnerButtonFocusIn}
+						onActiveStateChange={this._onArrowButtonActiveStateChange}
+					>
+					</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>
+				</>
+			)}
 		</div>
 	);
 }

package/src/TableHeaderRowTemplate.tsx

@@ -6,13 +6,15 @@ import ClearAll from "@ui5/webcomponents-icons/dist/clear-all.js";
 import IconDesign from "./types/IconDesign.js";
 import type TableHeaderRow from "./TableHeaderRow.js";
 
-export default function TableHeaderRowTemplate(this: TableHeaderRow) {
+export default function TableHeaderRowTemplate(this: TableHeaderRow, ariaColIndex: number = 1) {
 	return (
 		<>
 			{ this._hasSelector &&
 				<TableHeaderCell id="selection-cell"
 					aria-selected={this._isSelected}
 					aria-label={this._i18nSelection}
+					aria-description={this._selectionCellAriaDescription}
+					aria-colindex={ariaColIndex++}
 					data-ui5-table-cell-fixed
 					data-ui5-table-selection-component
 				>
@@ -40,12 +42,14 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow) {
 				</TableHeaderCell>
 			}
 
-			{ this._visibleCells.map(cell => (
-				<slot name={cell._individualSlot} key={cell._individualSlot}></slot>
-			))}
+			{ this._visibleCells.map(cell => {
+				cell.ariaColIndex = `${ariaColIndex++}`;
+				return <slot name={cell._individualSlot} key={cell._individualSlot}></slot>;
+			})}
 
 			{ this._rowActionCount > 0 &&
 				<TableHeaderCell id="actions-cell"
+					aria-colindex={ariaColIndex++}
 					aria-label={this._i18nRowActions}
 				></TableHeaderCell>
 			}

package/src/TableRowTemplate.tsx

@@ -60,7 +60,7 @@ export default function TableRowTemplate(this: TableRow) {
 			}
 
 			{ this._renderNavigated &&
-				<TableCell id="navigated-cell" data-excluded-from-navigation={true}>
+				<TableCell id="navigated-cell" data-excluded-from-navigation aria-hidden={true}>
 					<div id="navigated"></div>
 				</TableCell>
 			}

package/src/TableTemplate.tsx

@@ -12,7 +12,9 @@ export default function TableTemplate(this: Table) {
 			<div id="table" role="grid"
 				style={this.styles.table}
 				aria-label={this._ariaLabel}
+				aria-description={this._ariaDescription}
 				aria-rowcount={this._ariaRowCount}
+				aria-colcount={this._ariaColCount}
 				aria-multiselectable={this._ariaMultiSelectable}
 			>
 				<slot name="headerRow"></slot>
@@ -68,7 +70,7 @@ export default function TableTemplate(this: Table) {
 
 function growingRow(this: Table) {
 	return (
-		<TableRow id="growing-row" ui5-growing-row>
+		<TableRow id="growing-row" ui5-growing-row aria-hidden={true}>
 			<TableCell id="growing-cell">
 				<slot name={this._getGrowing()?._individualSlot}></slot>
 			</TableCell>

package/src/bundle-assets/IconPensilJSXTemplate.tsx

@@ -0,0 +1,10 @@
+export default function IconPensilJSXTemplate() {
+	return (
+		<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+			<g clip-path="url(#clip0_2221_23716)"><path d="M11.3333 1.99998C11.503 1.79933 11.7131 1.63601 11.9499 1.52043C12.1868 1.40485 12.4453 1.33953 12.709 1.32865C12.9727 1.31777 13.2358 1.36156 13.4815 1.45723C13.7272 1.55291 13.9502 1.69836 14.1361 1.88432C14.3221 2.07029 14.467 2.29268 14.5616 2.53734C14.6562 2.78199 14.6985 3.04353 14.6857 3.3053C14.6728 3.56706 14.6052 3.8233 14.4872 4.05769C14.3691 4.29207 14.2032 4.49947 13.9999 4.66664L4.99992 13.6666L1.33325 14.6666L2.33325 11L11.3333 1.99998Z" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 3.33331L12.6667 5.99998" stroke-linecap="round" stroke-linejoin="round"/></g>
+			<defs>
+				<clipPath id="clip0_2221_23716"><rect width="16" height="16"/></clipPath>
+			</defs>
+		</svg>
+	);
+}

package/src/features/ListItemStandardExpandableTextTemplate.tsx

@@ -1,5 +1,5 @@
 import ExpandableText from "../ExpandableText.js";
-import type ListItemStandard from "../ListItemStandard.js";
+import type ListItemBase from "../ListItemBase.js";
 import type { ExpandableTextTemplateParams } from "../types/ExpandableTextTemplateParams.js";
 
 /**
@@ -10,7 +10,7 @@ import type { ExpandableTextTemplateParams } from "../types/ExpandableTextTempla
  * @returns {JSX.Element} The rendered ExpandableText component
  */
 export default function ListItemStandardExpandableTextTemplate(
-	this: ListItemStandard,
+	this: ListItemBase,
 	injectedProps: ExpandableTextTemplateParams
 ): JSX.Element {
 	const {