@ui5/webcomponents 2.8.0-rc.3 → 2.8.0

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

@@ -3700,6 +3700,11 @@
             { "name": "Translucent" }
           ]
         },
+        {
+          "name": "no-auto-selection",
+          "description": "Defines if automatic tab selection is deactivated.\n\n**Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.\nSetting this property to `true` allows preventing this behavior.",
+          "values": []
+        },
         {
           "name": "all-items",
           "description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.",

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.8.0-rc.3",
+  "version": "2.8.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -7709,6 +7709,11 @@
                 "default": "\"Solid\""
               }
             },
+            {
+              "name": "no-auto-selection",
+              "description": "Defines if automatic tab selection is deactivated.\n\n**Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.\nSetting this property to `true` allows preventing this behavior.",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "all-items",
               "description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.",
@@ -7774,6 +7779,11 @@
                   "type": "\"Transparent\" | \"Solid\" | \"Translucent\""
                 }
               },
+              {
+                "name": "no-auto-selection",
+                "description": "Defines if automatic tab selection is deactivated.\n\n**Note:** By default, if none of the child tabs have the `selected` property set, the first tab will be automatically selected.\nSetting this property to `true` allows preventing this behavior.",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "all-items",
                 "description": "Returns all slotted tabs and their subTabs in a flattened array.\nThe order of tabs is depth-first.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.8.0-rc.3",
+  "version": "2.8.0",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,19 +54,19 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.8.0-rc.3",
-    "@ui5/webcomponents-icons": "2.8.0-rc.3",
-    "@ui5/webcomponents-icons-business-suite": "2.8.0-rc.3",
-    "@ui5/webcomponents-icons-tnt": "2.8.0-rc.3",
-    "@ui5/webcomponents-localization": "2.8.0-rc.3",
-    "@ui5/webcomponents-theming": "2.8.0-rc.3"
+    "@ui5/webcomponents-base": "2.8.0",
+    "@ui5/webcomponents-icons": "2.8.0",
+    "@ui5/webcomponents-icons-business-suite": "2.8.0",
+    "@ui5/webcomponents-icons-tnt": "2.8.0",
+    "@ui5/webcomponents-localization": "2.8.0",
+    "@ui5/webcomponents-theming": "2.8.0"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.8.0-rc.3",
+    "@ui5/webcomponents-tools": "2.8.0",
     "chromedriver": "^132.0.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vitest": "^3.0.2"
   },
-  "gitHead": "0dab2036aa86fa99985767489c50f13ffb813cd6"
+  "gitHead": "03b747d858078dba965e6c39d85f5954497884c1"
 }

package/src/TabContainerTemplate.tsx

@@ -45,6 +45,7 @@ export default function TabContainerTemplate(this: TabContainer, injectedPartial
 				"ui5-tc--textOnly": this.textOnly,
 				"ui5-tc--withAdditionalText": this.withAdditionalText,
 				"ui5-tc--standardTabLayout": this.standardTabLayout,
+				"ui5-tc--noTabSelected": !this._selectedTab,
 			}}
 		>
 			{this.tabsAtTheBottom && partials.contentArea.call(this)}

package/src/TableCellTemplate.tsx

@@ -0,0 +1,15 @@
+import type TableCell from "./TableCell.js";
+
+export default function TableCellTemplate(this: TableCell) {
+	return (
+		<>
+			{ this._popin &&
+				<>
+					<div class="popin-header" ref={this.injectHeaderNodes.bind(this)}></div>
+					<span class="popin-colon">{this._i18nPopinColon}</span>
+				</>
+			}
+			<slot></slot>
+		</>
+	);
+}

package/src/TableGrowingTemplate.tsx

@@ -0,0 +1,23 @@
+import type TableGrowing from "./TableGrowing.js";
+
+export default function TableGrowingTemplate(this: TableGrowing) {
+	return (
+		<div
+			id="growing-button"
+			tabindex={-1}
+			data-ui5-growing-active={this._activeState}
+			onClick={this.loadMore}
+			onKeyDown={this._onKeydown}
+			onKeyUp={this._onKeyup}
+			onFocusOut={this._onFocusout}
+			role="button"
+			aria-labelledby="growing-text growing-subtext"
+			aria-describedby="growing-description">
+			<span id="growing-text">{this._growingButtonText}</span>
+			{ this.growingSubText &&
+				<span id="growing-subtext">{this.growingSubText}</span>
+			}
+			<span id="growing-description" class="ui5-hidden-text" aria-hidden="true">{this._growingButtonDescription}</span>
+		</div>
+	);
+}

package/src/TableHeaderCellActionBaseTemplate.tsx

@@ -0,0 +1,13 @@
+import Button from "./Button.js";
+import type TableHeaderCellActionBase from "./TableHeaderCellActionBase.js";
+
+export default function TableHeaderCellActionBaseTemplate(this: TableHeaderCellActionBase) {
+	return (
+		<Button
+			icon={this._icon}
+			tooltip={this._tooltip}
+			onClick={this._onClick}
+			design="Transparent"
+		></Button>
+	);
+}

package/src/TableHeaderCellTemplate.tsx

@@ -0,0 +1,27 @@
+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";
+
+export default function TableHeaderCellTemplate(this: TableHeaderCell) {
+	return (
+		<>
+			<slot name="action"></slot>
+			<slot></slot>
+			{ sortIcon.call(this) }
+		</>
+	);
+}
+
+function sortIcon(this: TableHeaderCell) {
+	switch (this.sortIndicator) {
+	case SortOrder.Ascending:
+		return <Icon name={SortAscending}></Icon>;
+	case SortOrder.Descending:
+		return <Icon name={SortDescending}></Icon>;
+	default:
+		return <></>;
+	}
+}

package/src/TableHeaderRowTemplate.tsx

@@ -0,0 +1,44 @@
+import CheckBox from "./CheckBox.js";
+import TableHeaderCell from "./TableHeaderCell.js";
+import type TableHeaderRow from "./TableHeaderRow.js";
+
+export default function TableHeaderRowTemplate(this: TableHeaderRow) {
+	return (
+		<>
+			{ this._hasRowSelector &&
+				<TableHeaderCell id="selection-cell"
+					aria-selected={this._isSelected}
+					aria-label={this._i18nSelection}
+					data-ui5-table-cell-fixed
+					data-ui5-table-selection-component
+				>
+					{ this._isMultiSelect &&
+						<CheckBox id="selection-component"
+							tabindex={-1}
+							checked={this._isSelected}
+							onChange={this._onSelectionChange}
+							accessibleName={this._i18nRowSelector}
+						></CheckBox>
+					}
+				</TableHeaderCell>
+			}
+
+			{ this._visibleCells.map(cell => (
+				<slot name={cell._individualSlot} key={cell._individualSlot}></slot>
+			))}
+
+			{ this._hasRowActions &&
+				<TableHeaderCell id="actions-cell"
+					aria-label={this._i18nRowActions}
+				></TableHeaderCell>
+			}
+
+			{ this._popinCells.length > 0 &&
+				<TableHeaderCell id="popin-cell"
+					aria-label={this._i18nRowPopin}
+					data-excluded-from-navigation
+				></TableHeaderCell>
+			}
+		</>
+	);
+}

package/src/TableRowActionBaseTemplate.tsx

@@ -0,0 +1,28 @@
+import Button from "./Button.js";
+import Icon from "./Icon.js";
+import type TableRowActionBase from "./TableRowActionBase.js";
+
+export default function TableRowActionBaseTemplate(this: TableRowActionBase) {
+	return (
+		<>
+			{ this.invisible ?
+				<div></div>
+				:
+				this._isInteractive ?
+					<Button
+						icon={this._icon}
+						tooltip={this._text}
+						onClick={this._onActionClick}
+						design="Transparent"
+					></Button>
+					:
+					<Icon
+						name={this._icon}
+						accessibleName={this._text}
+						showTooltip={true}
+						design="NonInteractive"
+					></Icon>
+			}
+		</>
+	);
+}

package/src/TableRowTemplate.tsx

@@ -0,0 +1,76 @@
+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";
+
+export default function TableRowTemplate(this: TableRow) {
+	return (
+		<>
+			{ this._hasRowSelector &&
+				<TableCell
+					id="selection-cell"
+					aria-selected={this._isSelected}
+					data-ui5-table-cell-fixed
+					data-ui5-table-selection-component
+				>
+					{ this._isMultiSelect ?
+						<CheckBox id="selection-component"
+							tabindex={-1}
+							checked={this._isSelected}
+							onChange={this._onSelectionChange}
+							accessibleName={this._i18nRowSelector}
+						></CheckBox>
+						:
+						<RadioButton id="selection-component"
+							tabindex={-1}
+							name={this._tableId}
+							checked={this._isSelected}
+							onChange={this._onSelectionChange}
+							accessibleName={this._i18nRowSelector}
+						></RadioButton>
+					}
+				</TableCell>
+			}
+
+			{ this._visibleCells.map(cell => (
+				<slot name={cell._individualSlot}></slot>
+			))}
+
+			{ this._hasRowActions &&
+				<TableCell id="actions-cell">
+					{ this._flexibleActions.map(action => (
+						<slot name={action._individualSlot}></slot>
+					))}
+
+					{ this._hasOverflowActions &&
+						<Button
+							id="overflow"
+							icon="overflow"
+							design="Transparent"
+							onClick={this._onOverflowButtonClick}
+						></Button>
+					}
+
+					{ this._fixedActions.map(action => (
+						<slot name={action._individualSlot}></slot>
+					))}
+				</TableCell>
+			}
+
+			{ this._renderNavigated &&
+				<TableCell id="navigated-cell" data-excluded-from-navigation={true}>
+					<div id="navigated"></div>
+				</TableCell>
+			}
+
+			{ this._popinCells.length > 0 &&
+				<TableCell id="popin-cell">
+					{ this._popinCells.map(cell => (
+						<slot name={cell._individualSlot}></slot>
+					))}
+				</TableCell>
+			}
+		</>
+	);
+}

package/src/TableTemplate.tsx

@@ -0,0 +1,76 @@
+import type Table from "./Table.js";
+import TableRow from "./TableRow.js";
+import TableCell from "./TableCell.js";
+import DropIndicator from "./DropIndicator.js";
+import BusyIndicator from "./BusyIndicator.js";
+
+export default function TableTemplate(this: Table) {
+	return (
+		<>
+			<div id="before" role="none" tabindex={0} ui5-table-dummy-focus-area></div>
+
+			<div id="table" role="grid"
+				style={this.styles.table}
+				aria-label={this._ariaLabel}
+				aria-rowcount={this._ariaRowCount}
+				aria-multiselectable={this._ariaMultiSelectable}
+			>
+				<slot name="headerRow"></slot>
+				<div id="rows">
+					<div id="spacer" style={this.styles.spacer}>
+						<slot></slot>
+					</div>
+				</div>
+
+				{ this.rows.length === 0 &&
+					<TableRow id="nodata-row">
+						<TableCell id="nodata-cell" data-excluded-from-navigation horizontal-align="Center">
+							{ this.nodata.length > 0 ?
+								<slot name="nodata"></slot>
+								:
+								this._effectiveNoDataText
+							}
+						</TableCell>
+					</TableRow>
+				}
+
+				{ this.rows.length > 0 && this._getGrowing()?.hasGrowingComponent() &&
+					<div id="footer" role="rowgroup">
+						{ growingRow.call(this) }
+					</div>
+				}
+
+				<DropIndicator
+					orientation="Horizontal"
+					ownerReference={this}
+				></DropIndicator>
+
+				<div aria-hidden="true" id="table-end-row">
+					<div id="table-end-cell">
+						<div id="table-end" aria-hidden="true" tabindex={-1}></div>
+					</div>
+				</div>
+
+				{ this.loading &&
+					<BusyIndicator id="loading"
+						delay={this.loadingDelay}
+						active={true}
+						data-sap-focus-ref
+					></BusyIndicator>
+				}
+			</div>
+
+			<div id="after" role="none" tabindex={0} ui5-table-dummy-focus-area></div>
+		</>
+	);
+}
+
+function growingRow(this: Table) {
+	return (
+		<TableRow id="growing-row" ui5-growing-row>
+			<TableCell id="growing-cell">
+				<slot name={this._getGrowing()?._individualSlot}></slot>
+			</TableCell>
+		</TableRow>
+	);
+}

package/src/ToolbarPopoverTemplate.tsx

@@ -9,6 +9,7 @@ export default function ToolbarPopoverTemplate(this: Toolbar) {
 			horizontalAlign="End"
 			onClose={this.onOverflowPopoverClosed}
 			onOpen={this.onOverflowPopoverOpened}
+			accessibleName={this.accInfo.popover.accessibleName}
 			hideArrow={true}
 		>
 			<div class={{

package/src/i18n/messagebundle.properties

@@ -599,6 +599,9 @@ LABEL_COLON=:
 #XACT: ARIA announcement for the input field of the TimePicker
 TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Additional Options
 
+#XACT: ARIA announcement for Toolbar's popup
+TOOLBAR_POPOVER_AVAILABLE_VALUES=Available Values
+
 #XMSG: Text used for reporting that a radio button group requires one of the radio buttons to be checked
 FORM_CHECKABLE_REQUIRED=Please tick this box if you want to proceed.
 

package/src/i18n/messagebundle_en_US_saprigi.properties

@@ -172,6 +172,10 @@ LIST_ITEM_NOT_SELECTED=‍‍‌‍‌‍​‍‌‍​‌‍‍‍‌
 
 LIST_ITEM_GROUP_HEADER=‌‌​​‍‌‍‍‍​‌​​‍‍​​‍​​‌‌​​‌‍‍‍​‌‍​‍‌‌‍‌‌‌​Group Header
 
+LIST_ROLE_LIST_GROUP_DESCRIPTION=‌‍‌‌‍​‌‌‌‍‌‌‌​‍​​‌​‌​​‌​‌‍‌‍​‍‌​‌‌‌​‌​‌‌contains ​​​{0}‌‌‌ sub groups with ​​​{1}‌‌‌ items
+
+LIST_ROLE_LISTBOX_GROUP_DESCRIPTION=‍​​‍‌‌‍‌‍​‍‍‌‌‍‍‌‌‍​​‌‍‌​​‍‍‍​‍‌​‌‌‌‍​‍contains ​​​{0}‌‌‌ sub groups
+
 ARIA_LABEL_LIST_ITEM_CHECKBOX=‌​​‍​​‌‍‌​​​​‍‌‌‍‍‌‌​‌‌‌‍​‌​​‍‌‌‍‍‌​‌​‌‍​Multiple Selection Mode
 
 ARIA_LABEL_LIST_ITEM_RADIO_BUTTON=‍‍‍‍​‍​‌‍​​‍​​‌‍​​‌‌‌​‌‍‍​‌​‍‌‌‍‍‌‌​​‍Item Selection.

package/src/themes/TabContainer.css

@@ -177,3 +177,7 @@
 :host([media-range="XL"]) .ui5-tc__content {
 	padding: 1rem 3rem;
 }
+
+.ui5-tc-root.ui5-tc--noTabSelected .ui5-tc__content {
+	padding: 0;
+}

package/src/themes/TableCell.css

@@ -7,4 +7,8 @@
 
 .popin-colon {
     padding-inline-end: 0.5rem;
-}
+}
+
+.popin-header {
+    display: contents;
+}

package/src/themes/TableCellBase.css

@@ -21,7 +21,7 @@
     background-color: inherit;
 }
 
-:host([fixed]) {
+:host([data-ui5-table-cell-fixed]) {
     position: sticky;
     z-index: 1;
 }

package/src/themes/TableGrowing.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host {
 	/** Growing Control spans the whole row **/
 	flex-grow: 1;
@@ -24,7 +26,8 @@
     }
 }
 
-#growing-button:active,#growing-button[active] {
+#growing-button:active,
+#growing-button[data-ui5-growing-active="true"] {
     background: var(--sapList_Active_Background);
 }
 

package/src/themes/Token.css

@@ -26,10 +26,18 @@
 	color: var(--sapButton_Selected_TextColor);
 }
 
-:host([selected]) .ui5-token--wrapper {
+:host([selected]) .ui5-token--wrapper::before {
+	content: "";
+	position: absolute;
 	border-bottom: var(--_ui5_token_selected_internal_border_bottom);
 	border-bottom-left-radius: var(--_ui5_token_selected_internal_border_bottom_radius);
 	border-bottom-right-radius: var(--_ui5_token_selected_internal_border_bottom_radius);
+	left: 0;
+	right: 0;
+	bottom: 0;
+	top: 0;
+	background: transparent;
+	pointer-events: none;
 }
 
 :host([selected]:hover) {
@@ -50,12 +58,6 @@
 	outline: var(--_ui5_token_selected_focus_outline);
 }
 
-:host([selected]) .ui5-token--text,
-:host([selected]) .ui5-token--icon {
-	top: var(--_ui5_token_text_icon_top);
-	position: relative;
-}
-
 :host([focused][selected]:not(:hover)) {
 	background: var(--sapButton_Selected_Background);
 	color: var(--sapButton_Selected_TextColor);
@@ -68,6 +70,7 @@
 	height: 100%;
 	width: 100%;
 	cursor: pointer;
+	position: relative;
 	padding-inline-start: var(--_ui5_token_left_padding);
 	box-sizing: border-box;
 	font-size: var(--sapFontSize);
@@ -100,9 +103,6 @@
 	right: var(--_ui5_token_focus_offset);
 }
 
-:host([focused][selected]) .ui5-token--wrapper:focus::after {
-	bottom: var(--_ui5_token_selected_focused_offset_bottom)
-}
 
 .ui5-token--text {
 	white-space: nowrap;

package/src/themes/sap_horizon/Switch-parameters.css

@@ -1,10 +1,10 @@
 @import "../base/Switch-parameters.css";
 :root {
 	/* Switch */
-	--_ui5_switch_width: 3.5rem;
+	--_ui5_switch_width: 2.5rem;
 	--_ui5_switch_min_width: none;
 
-	--_ui5_switch_with_label_width: 3.875rem;
+	--_ui5_switch_with_label_width: 2.875rem;
 
 	--_ui5_switch_focus_outline: none;
 	--_ui5_switch_root_after_outline: 0.125rem solid var(--sapContent_FocusColor);
@@ -14,8 +14,8 @@
 
 	--_ui5_switch_root_outline_top: 0.5rem;
 	--_ui5_switch_root_outline_bottom: 0.5rem;
-	--_ui5_switch_root_outline_left: 0.375rem;
-	--_ui5_switch_root_outline_right: 0.375rem;
+	--_ui5_switch_root_outline_left: -0.125rem;
+	--_ui5_switch_root_outline_right: -0.125rem;
 
 
 	--_ui5_switch_disabled_opacity: var(--sapContent_DisabledOpacity);
@@ -130,16 +130,16 @@
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
-	--_ui5_switch_width: 3rem;
+	--_ui5_switch_width: 2.75rem;
 	--_ui5_switch_min_width: none;
-	--_ui5_switch_with_label_width: 3.75rem;
+	--_ui5_switch_with_label_width: 2.75rem;
 	--_ui5_switch_root_outline_top: 0.25rem;
 	--_ui5_switch_root_outline_bottom: 0.25rem;
 	--_ui5_switch_transform: translateX(100%) translateX(-1.375rem);
 	--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);
 	--_ui5_switch_rtl_transform: translateX(1.375rem) translateX(-100%);
 	--_ui5_switch_rtl_transform_with_label: translateX(1.875rem) translateX(-100%);
-	--_ui5_switch_track_width: 2rem;
+	--_ui5_switch_track_width: 2.75rem;
 	--_ui5_switch_track_height: 1.25rem;
 	--_ui5_switch_track_with_label_width: 2.75rem;
 	--_ui5_switch_track_with_label_height: 1.25rem;

package/src/themes/sap_horizon_dark/Switch-parameters.css

@@ -1,10 +1,10 @@
 @import "../base/Switch-parameters.css";
 :root {
 	/* Switch */
-	--_ui5_switch_width: 3.5rem;
+	--_ui5_switch_width: 2.5rem;
 	--_ui5_switch_min_width: none;
 
-	--_ui5_switch_with_label_width: 3.875rem;
+	--_ui5_switch_with_label_width: 2.875rem;
 
 	--_ui5_switch_focus_outline: none;
 	--_ui5_switch_root_after_outline: 0.125rem solid var(--sapContent_FocusColor);
@@ -14,8 +14,8 @@
 
 	--_ui5_switch_root_outline_top: 0.5rem;
 	--_ui5_switch_root_outline_bottom: 0.5rem;
-	--_ui5_switch_root_outline_left: 0.375rem;
-	--_ui5_switch_root_outline_right: 0.375rem;
+	--_ui5_switch_root_outline_left: -0.125rem;
+	--_ui5_switch_root_outline_right: -0.125rem;
 
 	--_ui5_switch_disabled_opacity: var(--sapContent_DisabledOpacity);
 
@@ -128,16 +128,16 @@
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
-	--_ui5_switch_width: 3rem;
+	--_ui5_switch_width: 2.75rem;
 	--_ui5_switch_min_width: none;
-	--_ui5_switch_with_label_width: 3.75rem;
+	--_ui5_switch_with_label_width: 2.75rem;
 	--_ui5_switch_root_outline_top: 0.25rem;
 	--_ui5_switch_root_outline_bottom: 0.25rem;
 	--_ui5_switch_transform: translateX(100%) translateX(-1.375rem);
 	--_ui5_switch_transform_with_label: translateX(100%) translateX(-1.875rem);
 	--_ui5_switch_rtl_transform: translateX(1.375rem) translateX(-100%);
 	--_ui5_switch_rtl_transform_with_label: translateX(1.875rem) translateX(-100%);
-	--_ui5_switch_track_width: 2rem;
+	--_ui5_switch_track_width: 2.75rem;
 	--_ui5_switch_track_height: 1.25rem;
 	--_ui5_switch_track_with_label_width: 2.75rem;
 	--_ui5_switch_track_with_label_height: 1.25rem;