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

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

@@ -1707,6 +1707,16 @@
           "description": "Receives id(or many ids) of the elements that label the input.",
           "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 input.",
+          "values": []
+        },
         {
           "name": "show-clear-icon",
           "description": "Defines whether the clear icon of the input will be shown.",
@@ -2530,6 +2540,16 @@
           "description": "Receives id(or many ids) of the elements that label the input.",
           "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 input.",
+          "values": []
+        },
         {
           "name": "show-clear-icon",
           "description": "Defines whether the clear icon of the input will be shown.",
@@ -3201,6 +3221,11 @@
           "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.",
           "values": []
         },
+        {
+          "name": "icon",
+          "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\n**Note:** When using this property with a valid icon, Select will be rendered as icon only button and the label and the default arrow down won't be visible.",
+          "values": []
+        },
         {
           "name": "name",
           "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -3750,7 +3775,7 @@
         },
         {
           "name": "overflow-mode",
-          "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.",
+          "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.",
           "values": [{ "name": "Scroll" }, { "name": "Popin" }]
         },
         {

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.9.0-rc.0",
+  "version": "2.9.0-rc.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3415,6 +3415,16 @@
               "description": "Receives id(or many ids) of the elements that label the input.",
               "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 input.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "show-clear-icon",
               "description": "Defines whether the clear icon of the input will be shown.",
@@ -3537,6 +3547,16 @@
                 "description": "Receives id(or many ids) of the elements that label the input.",
                 "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 input.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "show-clear-icon",
                 "description": "Defines whether the clear icon of the input will be shown.",
@@ -5279,6 +5299,16 @@
               "description": "Receives id(or many ids) of the elements that label the input.",
               "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 input.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "show-clear-icon",
               "description": "Defines whether the clear icon of the input will be shown.",
@@ -5403,6 +5433,16 @@
                 "description": "Receives id(or many ids) of the elements that label the input.",
                 "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 input.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "show-clear-icon",
                 "description": "Defines whether the clear icon of the input will be shown.",
@@ -6763,6 +6803,11 @@
               "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "icon",
+              "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\n**Note:** When using this property with a valid icon, Select will be rendered as icon only button and the label and the default arrow down won't be visible.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "name",
               "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -6851,6 +6896,11 @@
                 "description": "Defines whether the component is in disabled state.\n\n**Note:** A disabled component is noninteractive.",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "icon",
+                "description": "Defines the icon, displayed as graphical element within the component.\nThe SAP-icons font provides numerous options.\n\nExample:\nSee all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).\n\n**Note:** When using this property with a valid icon, Select will be rendered as icon only button and the label and the default arrow down won't be visible.",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "name",
                 "description": "Determines the name by which the component will be identified upon submission in an HTML form.\n\n**Note:** This property is only applicable within the context of an HTML Form element.",
@@ -7881,7 +7931,7 @@
             },
             {
               "name": "overflow-mode",
-              "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.",
+              "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.",
               "value": {
                 "type": "\"Scroll\" | \"Popin\"",
                 "default": "\"Scroll\""
@@ -7958,7 +8008,7 @@
               },
               {
                 "name": "overflow-mode",
-                "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.",
+                "description": "Defines the mode of the <code>ui5-table</code> overflow behavior.\n\nAvailable options are:\n\n<code>Scroll</code> - Columns are shown as regular columns and horizontal scrolling is enabled.\n<code>Popin</code> - Columns are shown as pop-ins instead of regular columns.",
                 "value": { "type": "\"Scroll\" | \"Popin\"" }
               },
               {
@@ -8251,7 +8301,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.",
-              "value": { "type": "number", "default": "-1" }
+              "value": { "type": "number | undefined", "default": "undefined" }
             },
             {
               "name": "interactive",
@@ -8290,7 +8340,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.",
-                "value": { "type": "number" }
+                "value": { "type": "number | undefined" }
               },
               {
                 "name": "interactive",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.9.0-rc.0",
+  "version": "2.9.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.9.0-rc.0",
-    "@ui5/webcomponents-icons": "2.9.0-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.9.0-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.9.0-rc.0",
-    "@ui5/webcomponents-localization": "2.9.0-rc.0",
-    "@ui5/webcomponents-theming": "2.9.0-rc.0"
+    "@ui5/webcomponents-base": "2.9.0-rc.1",
+    "@ui5/webcomponents-icons": "2.9.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.9.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.9.0-rc.1",
+    "@ui5/webcomponents-localization": "2.9.0-rc.1",
+    "@ui5/webcomponents-theming": "2.9.0-rc.1"
   },
   "devDependencies": {
     "@ui5/cypress-internal": "0.0.0",
-    "@ui5/webcomponents-tools": "2.9.0-rc.0",
+    "@ui5/webcomponents-tools": "2.9.0-rc.1",
     "chromedriver": "^133.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "7b5afeeb1f94c3ad54b2e79ac79d0d9e36f0cb7d"
+  "gitHead": "028a680226a4eab512df2749f1cc94ce4bc5b535"
 }

package/src/InputTemplate.tsx

@@ -102,6 +102,10 @@ export default function InputTemplate(this: Input, hooks?: { preContent: Templat
 						<span id="descr" class="ui5-hidden-text">{this.accInfo.ariaDescription}</span>
 					}
 
+					{this.accInfo.accessibleDescription &&
+						<span id="accessibleDescription" class="ui5-hidden-text">{this.accInfo.accessibleDescription}</span>
+					}
+
 					{this.hasValueState &&
 						<span id="valueStateDesc" class="ui5-hidden-text">{this.ariaValueStateHiddenText}</span>
 					}

package/src/ListItemTemplate.tsx

@@ -99,8 +99,7 @@ export default function ListItemTemplate(this: ListItem, hooks?: Partial<ListIte
 		<span
 			id={`${this._id}-invisibleText`}
 			class="ui5-hidden-text">
-			{this._accInfo.listItemAriaLabel}
-			{this.accessibleName}
+			{this.ariaLabelledByText}
 		</span>
 		<span
 			id={`${this._id}-invisibleText-describedby`}

package/src/MenuItemTemplate.tsx

@@ -1,4 +1,3 @@
-import type { JsxTemplate } from "@ui5/webcomponents-base";
 import type MenuItem from "./MenuItem.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import Button from "./Button.js";
@@ -11,16 +10,12 @@ import Icon from "./Icon.js";
 import ListItemTemplate from "./ListItemTemplate.js";
 import type { ListItemHooks } from "./ListItemTemplate.js";
 
-export type MenuItemHooks = ListItemHooks & {
-	listItemPostContent: JsxTemplate,
-}
-
-const predefinedHooks: Partial<MenuItemHooks> = {
+const predefinedHooks: Partial<ListItemHooks> = {
 	listItemContent,
 	iconBegin,
 };
 
-export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<MenuItemHooks>) {
+export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<ListItemHooks>) {
 	const currentHooks = { ...predefinedHooks, ...hooks };
 
 	return <>
@@ -78,7 +73,7 @@ function iconBegin(this: MenuItem) {
 function listItemPostContent(this: MenuItem) {
 	return this.hasSubmenu && <ResponsivePopover
 		id={`${this._id}-menu-rp`}
-		class="ui5-menu-rp .ui5-menu-rp-sub-menu"
+		class="ui5-menu-rp ui5-menu-rp-sub-menu"
 		preventInitialFocus={true}
 		preventFocusRestore={true}
 		hideArrow={true}

package/src/SelectTemplate.tsx

@@ -15,7 +15,7 @@ export default function SelectTemplate(this: Select) {
 				onClick={this._onclick}
 				title={this.tooltip}
 			>
-				{this.selectedOptionIcon &&
+				{!this.icon && this.selectedOptionIcon &&
 					<Icon
 						mode="Decorative"
 						class="ui5-select-option-icon"
@@ -47,7 +47,16 @@ export default function SelectTemplate(this: Select) {
 					}
 				</div>
 
-				{!this.readonly &&
+				{this.icon &&
+					<Icon
+						name={this.icon}
+						class={{
+							"inputIcon": true,
+							"inputIcon--pressed": this._iconPressed,
+						}} />
+				}
+
+				{!this.icon && !this.readonly &&
 					<Icon
 						part="icon"
 						name={slimArrowDown}
@@ -63,7 +72,6 @@ export default function SelectTemplate(this: Select) {
 					</span>
 				}
 			</div>
-
 			{SelectPopoverTemplate.call(this)}
 		</>
 	);

package/src/TableHeaderCellActionBaseTemplate.tsx

@@ -1,4 +1,5 @@
 import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
 import type TableHeaderCellActionBase from "./TableHeaderCellActionBase.js";
 
 export default function TableHeaderCellActionBaseTemplate(this: TableHeaderCellActionBase) {
@@ -7,7 +8,7 @@ export default function TableHeaderCellActionBaseTemplate(this: TableHeaderCellA
 			icon={this._icon}
 			tooltip={this._tooltip}
 			onClick={this._onClick}
-			design="Transparent"
+			design={ButtonDesign.Transparent}
 		></Button>
 	);
 }

package/src/TableHeaderCellTemplate.tsx

@@ -1,9 +1,8 @@
 import Icon from "./Icon.js";
 import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js";
-import type TableHeaderCell from "./TableHeaderCell.js";
-
 import SortAscending from "@ui5/webcomponents-icons/dist/sort-ascending.js";
 import SortDescending from "@ui5/webcomponents-icons/dist/sort-descending.js";
+import type TableHeaderCell from "./TableHeaderCell.js";
 
 export default function TableHeaderCellTemplate(this: TableHeaderCell) {
 	return (

package/src/TableHeaderRowTemplate.tsx

@@ -27,7 +27,7 @@ export default function TableHeaderRowTemplate(this: TableHeaderRow) {
 				<slot name={cell._individualSlot} key={cell._individualSlot}></slot>
 			))}
 
-			{ this._hasRowActions &&
+			{ this._rowActionCount > 0 &&
 				<TableHeaderCell id="actions-cell"
 					aria-label={this._i18nRowActions}
 				></TableHeaderCell>

package/src/TableRowActionBaseTemplate.tsx

@@ -1,5 +1,7 @@
 import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
 import Icon from "./Icon.js";
+import IconDesign from "./types/IconDesign.js";
 import type TableRowActionBase from "./TableRowActionBase.js";
 
 export default function TableRowActionBaseTemplate(this: TableRowActionBase) {
@@ -13,14 +15,14 @@ export default function TableRowActionBaseTemplate(this: TableRowActionBase) {
 						icon={this._icon}
 						tooltip={this._text}
 						onClick={this._onActionClick}
-						design="Transparent"
+						design={ButtonDesign.Transparent}
 					></Button>
 					:
 					<Icon
 						name={this._icon}
 						accessibleName={this._text}
 						showTooltip={true}
-						design="NonInteractive"
+						design={IconDesign.NonInteractive}
 					></Icon>
 			}
 		</>

package/src/TableRowTemplate.tsx

@@ -1,8 +1,9 @@
-import type TableRow from "./TableRow.js";
 import TableCell from "./TableCell.js";
 import CheckBox from "./CheckBox.js";
 import RadioButton from "./RadioButton.js";
 import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
+import type TableRow from "./TableRow.js";
 
 export default function TableRowTemplate(this: TableRow) {
 	return (
@@ -37,7 +38,7 @@ export default function TableRowTemplate(this: TableRow) {
 				<slot name={cell._individualSlot}></slot>
 			))}
 
-			{ this._hasRowActions &&
+			{ this._rowActionCount > 0 &&
 				<TableCell id="actions-cell">
 					{ this._flexibleActions.map(action => (
 						<slot name={action._individualSlot}></slot>
@@ -47,7 +48,7 @@ export default function TableRowTemplate(this: TableRow) {
 						<Button
 							id="overflow"
 							icon="overflow"
-							design="Transparent"
+							design={ButtonDesign.Transparent}
 							onClick={this._onOverflowButtonClick}
 						></Button>
 					}

package/src/TokenTemplate.tsx

@@ -28,6 +28,7 @@ export default function TokenTemplate(this: Token) {
 							accessibleName={this.tokenDeletableText}
 							showTooltip={true}
 							onClick={this._delete}
+							onMouseDown={this._onmousedown}
 						/>
 					}
 				</div>

package/src/i18n/messagebundle.properties

@@ -103,7 +103,7 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=Previous Page
 # Carousel Next Page text
 CAROUSEL_NEXT_ARROW_TEXT=Next Page
 
-#XACT: ARIA announcement for the ettribute 'aria-roledescription' of the Carousel component
+#XACT: ARIA announcement for the attribute 'aria-roledescription' of the Carousel component
 CAROUSEL_ARIA_ROLE_DESCRIPTION=Carousel
 
 #XFLD: Label of the container holding the colors
@@ -249,6 +249,9 @@ LINK_SUBTLE=Subtle
 #XFLD: Emphasized link description label
 LINK_EMPHASIZED=Emphasized
 
+#XACT: ARIA announcement for the active clickable list items
+LIST_ITEM_ACTIVE=Is Active
+
 #XACT: ARIA announcement for the position of the list items in an entire list
 LIST_ITEM_POSITION=List item {0} of {1}
 

package/src/i18n/messagebundle_en_US_sappsd.properties

@@ -67,6 +67,8 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=[[[Ƥŗēʋįŏűş Ƥąğē∙∙∙∙∙∙]]]
 
 CAROUSEL_NEXT_ARROW_TEXT=[[[Ńēχţ Ƥąğē∙∙∙∙∙]]]
 
+CAROUSEL_ARIA_ROLE_DESCRIPTION=[[[Ĉąŗŏűşēĺ∙∙∙∙∙∙]]]
+
 COLORPALETTE_CONTAINER_LABEL=[[[Ĉŏĺŏŗ Ƥąĺēţţē - Ƥŗēƌēƒįŋēƌ Ĉŏĺŏŗş∙∙∙∙∙∙∙∙∙∙∙]]]
 
 COLORPALETTE_POPOVER_TITLE=[[[Ĉŏĺŏŗ Ƥąĺēţţē∙∙∙∙∙∙]]]

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -67,6 +67,8 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=‌​‌‌‍‍‍‍‌​​‍‌‍
 
 CAROUSEL_NEXT_ARROW_TEXT=‌​‌‌​​​​‌​‍​‌‍​‌‌​‍‍​‍‌‌‍​​​‍‌​‍​‍​Next Page
 
+CAROUSEL_ARIA_ROLE_DESCRIPTION=‌‌‌​‌‍‌​‌‌​‌‌‍‍‌​​‌‍​​​​‍‍​‌​‍‌​‌‌​‍​‌‌‍​Carousel
+
 COLORPALETTE_CONTAINER_LABEL=‌‍‍​‍‍‍​‍‍‍​‍‌​‍‍‍‍​​‍‍‍‍‍‌‍‌‌​​​​​​‌​​Color Palette - Predefined Colors
 
 COLORPALETTE_POPOVER_TITLE=‌​‌‍‍‌‍‍‍‍‍‍‍​‍​​‌​​‌‌‍‌‍​‍‍​​‍​‍​‍‌​​​‌Color Palette

package/src/i18n/messagebundle_en_US_saptrc.properties

@@ -67,6 +67,8 @@ CAROUSEL_PREVIOUS_ARROW_TEXT=PMTgRUlfOwwqa5GcSfHsjg_Previous Page
 
 CAROUSEL_NEXT_ARROW_TEXT=t7CiUiqz8wYObm5JVLOfNw_Next Page
 
+CAROUSEL_ARIA_ROLE_DESCRIPTION=uG6+CnYbzYSISthMDJ2E3w_Carousel
+
 COLORPALETTE_CONTAINER_LABEL=GmQz8pchpXdwlvHObU1zXw_Color Palette - Predefined Colors
 
 COLORPALETTE_POPOVER_TITLE=CghzEZO/bbDAVvL5nVSzjQ_Color Palette

package/src/themes/Select.css

@@ -2,6 +2,20 @@
 @import "./InputIcon.css";
 @import "./Input.css";
 
+:host([icon]) {
+	min-width: var(--_ui5_button_base_min_width);
+	width: var(--_ui5_button_base_min_width);
+}
+
+:host([icon]) .ui5-select-root {
+	min-width: var(--_ui5_button_base_min_width);
+}
+
+:host([icon]) .ui5-select-label-root {
+	min-width: 0;
+	padding-inline-start: 0;
+}
+
 .ui5-select-root {
 	min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)));
 	width: 100%;