@ui5/webcomponents 2.22.0-rc.4 → 2.22.0-rc.5

package/package-scripts.cjs

@@ -5,6 +5,7 @@ const options = {
 	portStep: 2,
 	noWatchTS: true,
 	dev: true,
+	standalone: false,
 	cssVariablesTarget: "host",
 	internal: {
 		cypress_code_coverage: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.22.0-rc.4",
+  "version": "2.22.0-rc.5",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -54,22 +54,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.22.0-rc.4",
-    "@ui5/webcomponents-icons": "2.22.0-rc.4",
-    "@ui5/webcomponents-icons-business-suite": "2.22.0-rc.4",
-    "@ui5/webcomponents-icons-tnt": "2.22.0-rc.4",
-    "@ui5/webcomponents-localization": "2.22.0-rc.4",
-    "@ui5/webcomponents-theming": "2.22.0-rc.4"
+    "@ui5/webcomponents-base": "2.22.0-rc.5",
+    "@ui5/webcomponents-icons": "2.22.0-rc.5",
+    "@ui5/webcomponents-icons-business-suite": "2.22.0-rc.5",
+    "@ui5/webcomponents-icons-tnt": "2.22.0-rc.5",
+    "@ui5/webcomponents-localization": "2.22.0-rc.5",
+    "@ui5/webcomponents-theming": "2.22.0-rc.5"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.22.0-rc.4",
+    "@ui5/webcomponents-tools": "2.22.0-rc.5",
     "cypress": "15.9.0",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.0.2"
   },
-  "gitHead": "c6f2ddc2f8bb1c55b9571d0e8f307755d578669d"
+  "gitHead": "f42d27cb7d91aad64df6bf51b3b4cc02d5972b2f"
 }

package/src/ListItemBaseTemplate.tsx

@@ -1,7 +1,7 @@
 import type ListItemBase from "./ListItemBase.js";
-import type { AriaRole } from "@ui5/webcomponents-base/";
+import type { AriaRole, JsxTemplate } from "@ui5/webcomponents-base/";
 
-export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listItemContent: () => void }, injectedProps?: {
+export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listItemContent: JsxTemplate }, injectedProps?: {
 	role?: AriaRole,
 	title?: string,
 }) {
@@ -21,7 +21,7 @@ export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listI
 			onKeyDown={this._onkeydown}
 			onClick={this._onclick}
 		>
-			{ listItemContent.call(this) }
+			{ listItemContent.call(this) as JSX.Element }
 		</li>
 	);
 }

package/src/MenuItemTemplate.tsx

@@ -1,3 +1,4 @@
+import type { JsxTemplate } from "@ui5/webcomponents-base/dist/index.js";
 import type MenuItem from "./MenuItem.js";
 import PopoverPlacement from "./types/PopoverPlacement.js";
 import ResponsivePopover from "./ResponsivePopover.js";
@@ -11,14 +12,29 @@ import Icon from "./Icon.js";
 import ListItemTemplate from "./ListItemTemplate.js";
 import type { ListItemHooks } from "./ListItemTemplate.js";
 
-const predefinedHooks: Partial<ListItemHooks> = {
-	listItemContent,
+export type MenuItemHooks = ListItemHooks & {
+	menuItemTextContent: JsxTemplate;
+}
+
+const predefinedHooks: Partial<MenuItemHooks> = {
 	iconBegin,
+	menuItemTextContent,
 };
 
-export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<ListItemHooks>) {
+export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<MenuItemHooks>) {
 	const currentHooks = { ...predefinedHooks, ...hooks };
 
+	if (!hooks?.listItemContent) {
+		currentHooks.listItemContent = function listItemContent(this: MenuItem) {
+			return (<>
+				{currentHooks.menuItemTextContent!.call(this)}
+
+				{rightContent.call(this)}
+				{checkmarkContent.call(this)}
+			</>);
+		};
+	}
+
 	return <>
 		{ListItemTemplate.call(this, currentHooks)}
 
@@ -26,13 +42,8 @@ export default function MenuItemTemplate(this: MenuItem, hooks?: Partial<ListIte
 	</>;
 }
 
-function listItemContent(this: MenuItem) {
-	return (<>
-		{this.text && <div class="ui5-menu-item-text">{this.text}</div>}
-
-		{rightContent.call(this)}
-		{checkmarkContent.call(this)}
-	</>);
+function menuItemTextContent(this: MenuItem) {
+	return <>{this.text && <div class="ui5-menu-item-text">{this.text}</div>}</>;
 }
 
 function checkmarkContent(this: MenuItem) {

package/src/PanelTemplate.tsx

@@ -89,15 +89,22 @@ export default function PanelTemplate(this: Panel) {
 
 			{/* content area */}
 			<div
-				class="ui5-panel-content"
-				id={ `${this._id}-content` }
-				tabindex={ -1 }
+				class={{
+					"ui5-panel-content-wrapper": true,
+					"ui5-panel-content-focusable": this._contentFocusable,
+				}}
 				style={{
 					display: this._contentExpanded ? "block" : "none",
 				}}
-				part="content"
 			>
-				<slot></slot>
+				<div
+					class="ui5-panel-content"
+					id={ `${this._id}-content` }
+					tabindex={ this._contentTabIndex }
+					part="content"
+				>
+					<slot></slot>
+				</div>
 			</div>
 		</div>
 	</>);

package/src/dynamic-date-range-options/DateTimeRangeTemplate.tsx

@@ -10,8 +10,14 @@ export default function DateTimeRangeTemplate(this: DynamicDateRange) {
 	const currentOperator = this.currentValue?.operator || "DATETIMERANGE";
 
 	const getDateFromValue = (index = 0) => {
-		if (this.value?.operator === currentOperator && this.value.values && this.value.values.length === 2) {
-			return this.getOption(this.value.operator)?.format(this.value)?.split("-")[index].trim();
+		const source = this.currentValue?.operator === currentOperator && this.currentValue.values?.length === 2
+			? this.currentValue
+			: this.value?.operator === currentOperator && this.value.values?.length === 2
+				? this.value
+				: undefined;
+
+		if (source) {
+			return this.getOption(source.operator)?.format(source)?.split("-")[index].trim();
 		}
 		return undefined;
 	};

package/src/dynamic-date-range-options/FromDateTimeTemplate.tsx

@@ -8,7 +8,7 @@ import type FromDateTimeOption from "./FromDateTime.js";
 
 export default function FromDateTime(this: DynamicDateRange) {
 	const currentOption = this._currentOption as FromDateTimeOption;
-	const currentValue = this.value?.values ? this.value.values[0] as Date : undefined;
+	const currentValue = (this.currentValue?.values ?? this.value?.values)?.[0] as Date | undefined;
 	return (
 		<div class="ui5-dynamic-date-range-option-datetime-container">
 			<div class="ui5-dt-picker-header">

package/src/themes/Dialog.css

@@ -1,8 +1,8 @@
 @import "./InvisibleTextStyles.css";
 
 :host {
-	min-width: 20rem;
-	min-height: 6rem;
+	min-width: min(20rem, 90vw);
+	min-height: min(6rem, 90vh);
 	max-height: 94%;
 	max-width: 90%;
 	flex-direction: column;

package/src/themes/ListItemBase.css

@@ -34,16 +34,16 @@
 }
 
 /* hovered */
-:host([actionable]:not([active]):not([selected]):not([ui5-li-group-header]):hover) {
+:host([actionable]:not([active]):not(:active):not([selected]):not([ui5-li-group-header]):hover) {
     background-color: var(--sapList_Hover_Background);
 }
 
-:host([actionable]:not([active]):not([selected]):not([ui5-li-group-header]):hover) .ui5-li-additional-text {
+:host([actionable]:not([active]):not(:active):not([selected]):not([ui5-li-group-header]):hover) .ui5-li-additional-text {
 	text-shadow: var(--sapContent_TextShadow);
 }
 
 /* selected and hovered */
-:host([actionable][selected]:not([active], [data-moving]):hover) {
+:host([actionable][selected]:not([active]):not(:active):not([data-moving]):hover) {
 	background-color: var(--sapList_Hover_SelectionBackground);
 }
 
@@ -51,6 +51,7 @@
 :host([active][actionable]:not([data-moving])),
 :host([active][actionable][selected]:not([data-moving])) {
 	background-color: var(--sapList_Active_Background);
+	border-bottom-color: var(--sapList_Active_Background);
 }
 
 /* focused */

package/src/themes/OptionBase.css

@@ -1,4 +1,10 @@
 :host {
 	height: var(--_ui5_list_item_dropdown_base_height);
 	--_ui5_list_item_title_size: var(--sapFontSize);
+}
+
+:host(:active[actionable]:not([data-moving])),
+:host(:active[actionable][selected]:not([data-moving])) {
+	background-color: var(--sapList_Active_Background);
+	border-bottom-color: var(--sapList_Active_Background);
 }

package/src/themes/Panel.css

@@ -91,13 +91,30 @@
 	white-space: nowrap;
 }
 
-.ui5-panel-content {
+.ui5-panel-content-wrapper {
+	overflow: hidden;
 	padding: var(--_ui5_panel_content_padding);
 	background-color: var(--sapGroup_ContentBackground);
-	outline: none;
 	border-bottom-left-radius: var(--_ui5_panel_border_radius);
 	border-bottom-right-radius: var(--_ui5_panel_border_radius);
+	flex: 1;
+	min-height: 0;
+	box-sizing: border-box;
+}
+
+.ui5-panel-content-wrapper.ui5-panel-content-focusable:focus-within {
+	outline: var(--_ui5_panel_focus_border);
+	outline-offset: var(--_ui5_panel_content_focus_offset);
+}
+
+.ui5-panel-content {
+	height: 100%;
 	overflow: auto;
+	outline: none;
+}
+
+.ui5-panel-content:focus {
+	outline: none;
 }
 
 .ui5-panel-header-button-root {

package/src/themes/SliderTooltip.css

@@ -12,7 +12,7 @@
 	padding: 0 0.5rem;
 	font-family: var(--sapFontFamily);
 	font-size: var(--sapFontSmallSize);
-	color: var(--_ui5_slider_tooltip_color);
+	color: var(--sapTextColor);
 	display: flex;
 	justify-content: center;
 	align-items: center;

package/src/themes/Toolbar.css

@@ -5,9 +5,9 @@
 	align-items: center;
 	justify-content: flex-end;
 	box-sizing: border-box;
-	border-bottom: 0.0625rem solid var(--sapGroup_ContentBorderColor);
+	border-bottom: var(--sapGroup_TitleBorderWidth) solid var(--sapGroup_TitleBorderColor);
 	padding: 0 var(--_ui5-toolbar-padding-left) 0 var(--_ui5-toolbar-padding-right);
-	background-color: var(--sapList_HeaderBackground);
+	background-color: var(--sapToolbar_Background);
 }
 
 :host([align-content="Start"]) {

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

@@ -13,6 +13,7 @@
 	--_ui5_panel_focus_offset: 1px;
 	--_ui5_panel_focus_bottom_offset: var(--_ui5_panel_focus_offset);
 	--_ui5_panel_content_padding: 0.625rem 1rem 1.375rem 1rem;
+	--_ui5_panel_content_focus_offset: -0.1875rem;
 	--_ui5_panel_header_background_color: var(--sapBackgroundColor);
 }
 

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

@@ -149,7 +149,7 @@
 
 	/* Toolbar */
 	--_ui5-toolbar-separator-height: 2rem;
-	--_ui5-toolbar-height: 2.75rem;
+	--_ui5-toolbar-height: var(--sapElement_LineHeight);
 	--_ui5_toolbar_overflow_padding: 0.25rem 0.5rem;
 
 	/* DynamicPageTitle */
@@ -370,7 +370,7 @@
 
 		/* Toolbar */
 		--_ui5-toolbar-separator-height: 1.5rem;
-		--_ui5-toolbar-height: 2rem;
+		--_ui5-toolbar-height: var(--sapElement_Compact_LineHeight);
 		--_ui5_toolbar_overflow_padding: 0.1875rem 0.375rem;
 
 		/* DynamicPageTitle */

package/src/themes/sap_fiori_3_hcb/Link-parameters.css

@@ -2,7 +2,7 @@
 
 :host {
 	--_ui5_link_text_decoration: underline;
-	--_ui5_link_hover_text_decoration: none;
+	--_ui5_link_hover_text_decoration: underline;
 	--_ui5_link_active_text_decoration: none;
 	--_ui5_link_focus_text_decoration: none;
 	--_ui5_link_focused_hover_text_decoration: none;

package/src/themes/sap_fiori_3_hcw/Link-parameters.css

@@ -2,7 +2,7 @@
 
 :host {
 	--_ui5_link_text_decoration: underline;
-	--_ui5_link_hover_text_decoration: none;
+	--_ui5_link_hover_text_decoration: underline;
 	--_ui5_link_active_text_decoration: none;
 	--_ui5_link_focus_text_decoration: none;
 	--_ui5_link_focused_hover_text_decoration: none;

package/src/themes/sap_horizon_hcb/Link-parameters.css

@@ -2,7 +2,7 @@
 
 :host {
 	--_ui5_link_text_decoration: var(--sapLink_TextDecoration);
-	--_ui5_link_hover_text_decoration: var(--sapLink_Hover_TextDecoration);
+	--_ui5_link_hover_text_decoration: underline;
 	--_ui5_link_focused_hover_text_decoration: none;
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
 	--_ui5_link_subtle_text_decoration: underline;

package/src/themes/sap_horizon_hcw/Link-parameters.css

@@ -2,7 +2,7 @@
 
 :host {
 	--_ui5_link_text_decoration: var(--sapLink_TextDecoration);
-	--_ui5_link_hover_text_decoration: var(--sapLink_Hover_TextDecoration);
+	--_ui5_link_hover_text_decoration: underline;
 	--_ui5_link_focused_hover_text_decoration: none;
 	--_ui5_link_active_text_decoration: var(--sapLink_Active_TextDecoration);
 	--_ui5_link_subtle_text_decoration: underline;

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

@@ -1,3 +0,0 @@
-:host {
-	--_ui5_slider_tooltip_color: var(--sapTextColor);
-}

package/src/themes/sap_fiori_3/SliderTooltip-parameters.css

@@ -1,5 +0,0 @@
-@import "../base/SliderTooltip-parameters.css";
-
-:host {
-	--_ui5_slider_tooltip_color: var(--sapContent_LabelColor);
-}

package/src/themes/sap_fiori_3_dark/SliderTooltip-parameters.css

@@ -1,5 +0,0 @@
-@import "../base/SliderTooltip-parameters.css";
-
-:host {
-	--_ui5_slider_tooltip_color: var(--sapContent_LabelColor);
-}

package/src/themes/sap_fiori_3_hcb/SliderTooltip-parameters.css

@@ -1,5 +0,0 @@
-@import "../base/SliderTooltip-parameters.css";
-
-:host {
-	--_ui5_slider_tooltip_color: var(--sapContent_LabelColor);
-}

package/src/themes/sap_fiori_3_hcw/SliderTooltip-parameters.css

@@ -1,5 +0,0 @@
-@import "../base/SliderTooltip-parameters.css";
-
-:host {
-	--_ui5_slider_tooltip_color: var(--sapContent_LabelColor);
-}

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

@@ -1 +0,0 @@
-@import "../base/SliderTooltip-parameters.css";

package/src/themes/sap_horizon_hcb/SliderTooltip-parameters.css

@@ -1 +0,0 @@
-@import "../base/SliderTooltip-parameters.css";

package/src/themes/sap_horizon_hcw/SliderTooltip-parameters.css

@@ -1 +0,0 @@
-@import "../base/SliderTooltip-parameters.css";