@ui5/webcomponents 2.6.0-rc.0 → 2.6.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.6.0-rc.0",
+  "version": "2.6.0-rc.2",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -50,17 +50,17 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.6.0-rc.0",
-    "@ui5/webcomponents-icons": "2.6.0-rc.0",
-    "@ui5/webcomponents-icons-business-suite": "2.6.0-rc.0",
-    "@ui5/webcomponents-icons-tnt": "2.6.0-rc.0",
-    "@ui5/webcomponents-localization": "2.6.0-rc.0",
-    "@ui5/webcomponents-theming": "2.6.0-rc.0"
+    "@ui5/webcomponents-base": "2.6.0-rc.2",
+    "@ui5/webcomponents-icons": "2.6.0-rc.2",
+    "@ui5/webcomponents-icons-business-suite": "2.6.0-rc.2",
+    "@ui5/webcomponents-icons-tnt": "2.6.0-rc.2",
+    "@ui5/webcomponents-localization": "2.6.0-rc.2",
+    "@ui5/webcomponents-theming": "2.6.0-rc.2"
   },
   "devDependencies": {
-    "@ui5/webcomponents-tools": "2.6.0-rc.0",
+    "@ui5/webcomponents-tools": "2.6.0-rc.2",
     "chromedriver": "^131.0.0",
     "lit": "^2.0.0"
   },
-  "gitHead": "17869d45f20b28009feaac9d6f59054ba530b3ae"
+  "gitHead": "1d0e96fdf4cf4126817c45a9dad1c893d52a63fc"
 }

package/src/ComboBoxItemTemplate.tsx

@@ -9,7 +9,7 @@ function listItemContent(this: ComboBoxItem) {
 	return (
 		<div part="content" id="content" class="ui5-li-content">
 			<div class="ui5-li-text-wrapper">
-				{ this.text && <span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: this.text }}></span> }
+				{ this.text && <span part="title" className="ui5-li-title">{this.text}</span> }
 				{ this.additionalText && <span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span> }
 			</div>
 		</div>

package/src/ComboBoxPopoverTemplate.tsx

@@ -135,6 +135,8 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 
 function valueStateMessage(this: ComboBox) {
 	return (
-		<> { this.shouldDisplayDefaultValueStateMessage ? <>{this.valueStateDefaultText}</> : <slot name="valueStateMessage"></slot> } </>
+		<>
+			{ this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name="valueStateMessage"></slot> }
+		</>
 	);
 }

package/src/DialogTemplate.tsx

@@ -36,17 +36,15 @@ function beforeContent(this: Dialog) {
 						<Title level="H1" id="ui5-popup-header-text" class="ui5-popup-header-text">{this.headerText}</Title>
 					}
 
-					{this.resizable ? <>
-						{this.draggable ?
+					{this.resizable ?
+						this.draggable ?
 							<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextDraggableAndResizable}</span>
 							:
 							<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextResizable}</span>
-						}
-					</> : <>
-						{this.draggable &&
+						:
+						this.draggable &&
 							<span id={`${this._id}-descr`} aria-hidden="true" class="ui5-hidden-text">{this.ariaDescribedByHeaderTextDraggable}</span>
-						}
-					</>}
+					}
 				</div>
 			</header>
 		}

package/src/FileUploaderPopoverTemplate.tsx

@@ -40,12 +40,7 @@ function valueStateMessage(this: FileUploader) {
 	return (
 		<>
 			{
-				this.shouldDisplayDefaultValueStateMessage ?
-					<>
-						{this.valueStateText}
-					</>
-					:
-					<slot name="valueStateMessage"></slot>
+				this.shouldDisplayDefaultValueStateMessage ? this.valueStateText : <slot name="valueStateMessage"></slot>
 			}
 		</>
 	);

package/src/FormTemplate.tsx

@@ -65,8 +65,8 @@ export default function FormTemplate(this: Form) {
 											<slot name={item._individualSlot}></slot>
 										</div>
 									);
-								}
-								)}
+								})
+							}
 						</>
 				}
 			</div>

package/src/InputPopoverTemplate.tsx

@@ -126,7 +126,7 @@ function valueStateMessage(this: Input) {
 	return (
 		<>
 			{
-				this.shouldDisplayDefaultValueStateMessage ? <>{this.valueStateText}</> : <slot name="valueStateMessage"></slot>
+				this.shouldDisplayDefaultValueStateMessage ? this.valueStateText : <slot name="valueStateMessage"></slot>
 			}
 		</>
 	);

package/src/MultiComboBoxItemTemplate.tsx

@@ -17,7 +17,7 @@ function listItemContent(this: MultiComboBoxItem) {
 			/>
 			<div part="content" id="content" class="ui5-li-content">
 				<div class="ui5-li-text-wrapper">
-					{ this.text && <span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: this.text }}></span> }
+					{ this.text && <span part="title" className="ui5-li-title">{this.text}</span> }
 					{ this.additionalText && <span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span> }
 				</div>
 			</div>

package/src/NavigationMenuItemTemplate.tsx

@@ -15,22 +15,24 @@ const predefinedHooks: Partial<MenuItemHooks> = {
 	listItemContent,
 	iconBegin,
 	iconEnd,
-	listItemPostContent: () => {},
+	listItemPostContent: () => { },
 };
 
 export default function NavigationMenuItemTemplate(this: NavigationMenuItem, hooks?: Partial<MenuItemHooks>) {
 	const currentHooks = { ...predefinedHooks, ...hooks, };
 
 	return <>
-		this._href ? (
-		<a role="treeitem"
-			class="ui5-navmenu-item-link"
-			href={this.href}
-			target={this.target}
-		>
-			{MenuItemTemplate.call(this, currentHooks)}
-		</a>
-		) : MenuItemTemplate.call(this, currentHooks);
+		{
+			this._href ? (
+				<a role="treeitem"
+					class="ui5-navmenu-item-link"
+					href={this.href}
+					target={this.target}
+				>
+					{MenuItemTemplate.call(this, currentHooks)}
+				</a>
+			) : MenuItemTemplate.call(this, currentHooks)
+		}
 
 		{listItemPostContent.call(this)}
 	</>;

package/src/NavigationMenuTemplate.tsx

@@ -53,16 +53,13 @@ export default function NavigationMenuTemplate(this: NavigationMenu) {
 						<slot></slot>
 					</List>
 					:
-					<>
-						{this.loading &&
+					this.loading &&
 						<BusyIndicator
 							id={`${this._id}-menu-busy-indicator`}
-							active
+							active={true}
 							delay={this.loadingDelay}
 							class="ui5-menu-busy-indicator"
-						/>
-						}
-					</>
+						></BusyIndicator>
 				}
 			</div>
 		</ResponsivePopover>

package/src/TextTemplate.tsx

@@ -3,7 +3,6 @@ import type Text from "./Text.js";
 export default function TextTemplate(this: Text) {
 	return <>
 		<span>
-			<span> { this.emptyIndicatorMode } </span>
 			{ this._renderEmptyIndicator ?
 				<>
 					<span className="empty-indicator" aria-hidden="true">{ this._emptyIndicatorSymbol }</span>

package/src/TimePickerClockTemplate.tsx

@@ -14,7 +14,7 @@ export default function TimePickerClockTemplate(this: TimePickerClock) {
 			}}
 		>
 
-			<div data-ui5-label={this.label} class="ui5-tp-clock-dial"></div>
+			<div data-label={this.label} class="ui5-tp-clock-dial"></div>
 
 			<div>
 				{this._items.map((item, i) => (

package/src/themes/TableRow.css

@@ -1,73 +1,73 @@
-:host {
-	background: var(--sapList_Background);
-}
-
-:host([position]) {
-	height: var(--row-height);
-	overflow: clip;
-}
-
-:host([aria-selected=true]) {
-	background-color: var(--sapList_SelectionBackgroundColor);
-	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor);
-}
-
-:host([_interactive]) {
-	cursor: pointer;
-}
-
-@media (hover: hover) {
-	:host([_interactive]:hover) {
-		background: var(--sapList_Hover_Background);
-	}
-	:host([_interactive][aria-selected=true]:hover) {
-		background: var(--sapList_Hover_SelectionBackground);
-	}
-}
-
-:host([_interactive]:active),
-:host([_interactive][_active]),
-:host([_interactive][aria-selected=true]:active),
-:host([_interactive][aria-selected=true][_active]) {
-	background: var(--sapList_Active_Background);
-}
-
-#popin-cell {
-	align-content: initial;
-	flex-direction: column;
-	grid-column: 1 / -1;
-}
-
-#navigated-cell {
-	position: relative;
-	overflow: visible;
-	grid-row: span 2;
-	min-width: 0;
-	padding: 0;
-	position: sticky;
-	right: 0;
-}
-
-:dir(rtl)#navigated-cell {
-	left: 0;
-}
-
-:host([navigated]) #navigated {
-	position: absolute;
-	inset: 0;
-    background-color: var(--sapList_SelectionBorderColor);
-}
-
-:host([tabindex]:focus) #navigated {
-	transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
-	bottom: 2px;
-	top: 3px;
-}
-
-:host([tabindex]:focus) #navigated:dir(rtl) {
-	transform: translateX(var(--_ui5_table_navigated_cell_width));
-}
-
-:host([navigated]) #popin-cell {
-	grid-column: 1 / -2;
-}
+:host {
+	background: var(--sapList_Background);
+}
+
+:host([position]) {
+	height: var(--row-height);
+	overflow: clip;
+}
+
+:host([aria-selected=true]) {
+	background-color: var(--sapList_SelectionBackgroundColor);
+	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_SelectionBorderColor);
+}
+
+:host([_interactive]) {
+	cursor: pointer;
+}
+
+@media (hover: hover) {
+	:host([_interactive]:hover) {
+		background: var(--sapList_Hover_Background);
+	}
+	:host([_interactive][aria-selected=true]:hover) {
+		background: var(--sapList_Hover_SelectionBackground);
+	}
+}
+
+:host([_interactive]:active),
+:host([_interactive][_active]),
+:host([_interactive][aria-selected=true]:active),
+:host([_interactive][aria-selected=true][_active]) {
+	background: var(--sapList_Active_Background);
+}
+
+#popin-cell {
+	align-content: initial;
+	flex-direction: column;
+	grid-column: 1 / -1;
+}
+
+#navigated-cell {
+	position: relative;
+	overflow: visible;
+	grid-row: span 2;
+	min-width: 0;
+	padding: 0;
+	position: sticky;
+	right: 0;
+}
+
+:dir(rtl)#navigated-cell {
+	left: 0;
+}
+
+:host([navigated]) #navigated {
+	position: absolute;
+	inset: 0;
+    background-color: var(--sapList_SelectionBorderColor);
+}
+
+:host([tabindex]:focus) #navigated {
+	transform: translateX(calc(var(--_ui5_table_navigated_cell_width) * -1));
+	bottom: 2px;
+	top: 3px;
+}
+
+:host([tabindex]:focus) #navigated:dir(rtl) {
+	transform: translateX(var(--_ui5_table_navigated_cell_width));
+}
+
+:host([navigated]) #popin-cell {
+	grid-column: 1 / -2;
+}

package/src/themes/TimePickerClock.css

@@ -21,7 +21,7 @@
 }
 
 .ui5-tp-clock-dial::before {
-	content: attr(data-ui5-label);
+	content: attr(data-label);
 	display: flex;
 	align-items: center;
 	justify-content: center;

package/src/themes/Toolbar.css

@@ -20,19 +20,15 @@
 	display: inherit;
 	align-items: inherit;
 	justify-content: inherit;
+	gap: var(--_ui5-toolbar-items-gap);
 }
 
 .ui5-tb-items-full-width {
-    width: 100%;
+	width: 100%;
 }
 
 .ui5-tb-item {
-    flex-shrink: 0;
-}
-
-.ui5-tb-item:not(:last-child) {
-	margin-inline-end: var(--_ui5-toolbar-item-margin-right);
-	margin-inline-start: var(--_ui5-toolbar-item-margin-left);
+	flex-shrink: 0;
 }
 
 .ui5-tb-separator {

package/src/themes/base/Toolbar-parameters.css

@@ -1,7 +1,5 @@
 :root {
     --_ui5-toolbar-padding-left: 0.5rem;
 	--_ui5-toolbar-padding-right: 0.5rem;
-
-	--_ui5-toolbar-item-margin-left: 0;
-	--_ui5-toolbar-item-margin-right: 0.25rem;
+	--_ui5-toolbar-items-gap: 0.25rem;
 }

package/tsconfig.json

@@ -12,8 +12,6 @@
 		"tsBuildInfoFile": "dist/.tsbuildinfo",
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext",
-		"jsx": "react-jsx",
-		"jsxImportSource": "@ui5/webcomponents-base",
 		"verbatimModuleSyntax": true,
 		"paths": {
 			"@ui5/webcomponents-base/dist/*": [