@ui5/webcomponents-fiori 2.23.0-rc.2 → 2.24.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.23.0-rc.2",
+  "version": "2.24.0-rc.0",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.23.0-rc.2",
-    "@ui5/webcomponents-base": "2.23.0-rc.2",
-    "@ui5/webcomponents-icons": "2.23.0-rc.2",
-    "@ui5/webcomponents-theming": "2.23.0-rc.2",
+    "@ui5/webcomponents": "2.24.0-rc.0",
+    "@ui5/webcomponents-base": "2.24.0-rc.0",
+    "@ui5/webcomponents-icons": "2.24.0-rc.0",
+    "@ui5/webcomponents-theming": "2.24.0-rc.0",
     "@zxing/library": "^0.21.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.23.0-rc.2",
+    "@ui5/webcomponents-tools": "2.24.0-rc.0",
     "cypress": "15.9.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "yarn": "^1.22.22"
   },
-  "gitHead": "8e2484d13f3aeac61195cd83eff7bba26df1b1bc"
+  "gitHead": "55834d96ca1b888b08c8b8d4387f9662b8e66bb2"
 }

package/src/DynamicPageTemplate.tsx

@@ -3,13 +3,14 @@ import DynamicPageHeaderActions from "./DynamicPageHeaderActions.js";
 
 export default function DynamicPageTemplate(this: DynamicPage) {
 	return (
-		<div class="ui5-dynamic-page-root">
+		<div class="ui5-dynamic-page-root" role={this._rootRole} aria-label={this._rootAriaLabel}>
 			<div class="ui5-dynamic-page-scroll-container"
 				onScroll={this.snapOnScroll}
 			>
-				<header
+				<div
 					class="ui5-dynamic-page-title-header-wrapper"
 					id={`${this._id}-header`}
+					role={this._headerRole || "banner"}
 					aria-label={this.headerAriaLabel}
 					onui5-toggle-title={this.onToggleTitle}
 				>
@@ -20,9 +21,8 @@ export default function DynamicPageTemplate(this: DynamicPage) {
 							name="headerArea"
 						></slot>
 					}
-
 					{this.actionsInTitle && headerActions.call(this)}
-				</header>
+				</div>
 
 				{this.headerInContent &&
 					<slot tabIndex={this.headerTabIndex}
@@ -36,6 +36,8 @@ export default function DynamicPageTemplate(this: DynamicPage) {
 				<div
 					part="content"
 					class="ui5-dynamic-page-content"
+					role={this._contentRole}
+					aria-label={this._contentAriaLabel}
 					onFocusIn={this.onContentFocusIn}
 					onFocusOut={this.onContentFocusOut}
 				>
@@ -48,7 +50,7 @@ export default function DynamicPageTemplate(this: DynamicPage) {
 				</div>
 			</div>
 
-			<div class="ui5-dynamic-page-footer" part="footer">
+			<div class="ui5-dynamic-page-footer" part="footer" role={this._footerRole} aria-label={this._footerAriaLabel}>
 				<slot name="footerArea"></slot>
 			</div>
 		</div>

package/src/HeroBannerTemplate.tsx

@@ -0,0 +1,65 @@
+import type HeroBanner from "./HeroBanner.js";
+
+export default function HeroBannerTemplate(this: HeroBanner) {
+	const actionsBottomStart = this.actionsPlacement === "BottomStart";
+
+	return (
+		<div
+			class="ui5-banner-root"
+			role="banner"
+			part="canvas"
+		>
+			<div class={{
+				"ui5-banner-content": true,
+				"ui5-banner-columns-equal": this.columnsRatio === "Equal" && this._hasEndContent,
+				"ui5-banner-columns-first-wider": this.columnsRatio === "FirstWider" && this._hasEndContent,
+			}} part="content">
+				<div class="ui5-banner-header" part="header">
+					<div class="ui5-banner-header-text">
+						{this.overlineText &&
+							<div class="ui5-banner-overline">
+								{this.overlineText}
+							</div>
+						}
+
+						{this.headerText &&
+							<h2 class="ui5-banner-heading">
+								{this.headerText}
+							</h2>
+						}
+
+						{actionsBottomStart && this._hasActions &&
+							<div class="ui5-banner-actions ui5-banner-actions-bottom-start">
+								<slot name="actions"></slot>
+							</div>
+						}
+					</div>
+
+					{!actionsBottomStart && !this._actionsAsGridItem && this._hasActions &&
+						<div class="ui5-banner-actions">
+							<slot name="actions"></slot>
+						</div>
+					}
+				</div>
+
+				{this._hasStartContent &&
+					<div class="ui5-banner-block ui5-banner-block-start" part="startContent">
+						<slot></slot>
+					</div>
+				}
+
+				{this._hasEndContent &&
+					<div class="ui5-banner-block ui5-banner-block-end" part="endContent">
+						<slot name="endContent"></slot>
+					</div>
+				}
+
+				{this._actionsAsGridItem &&
+					<div class="ui5-banner-actions ui5-banner-actions-grid-item">
+						<slot name="actions"></slot>
+					</div>
+				}
+			</div>
+		</div>
+	);
+}

package/src/ShellBarTemplate.tsx

@@ -153,7 +153,7 @@ export default function ShellBarTemplate(this: ShellBar) {
 						)}
 
 						{/* Custom Items */}
-						{this.sortItems(this.items).map(item => (
+						{this.items.map(item => (
 							<div
 								key={item._id}
 								class={{

package/src/TimelineTemplate.tsx

@@ -13,6 +13,7 @@ export default function TimelineTemplate(this: Timeline) {
 			aria-label={this.ariaLabel}
 			onFocusIn={this._onfocusin}
 			onKeyDown={this._onkeydown}
+			onWheel={this._onwheel}
 		>
 			<BusyIndicator
 				id={`${this._id}-busyIndicator`}
@@ -21,7 +22,20 @@ export default function TimelineTemplate(this: Timeline) {
 				class="ui5-timeline-busy-indicator"
 			>
 				<div class="ui5-timeline-scroll-container">
-
+					{(this._hasHeader || this._hasInfoBar) &&
+						<div class="ui5-timeline-header-area">
+							{this._hasHeader &&
+								<div class="ui5-timeline-header">
+									<slot name="header"></slot>
+								</div>
+							}
+							{this._hasInfoBar &&
+								<div class="ui5-timeline-info-bar">
+									<slot name="infoBar"></slot>
+								</div>
+							}
+						</div>
+					}
 					<div class="ui5-timeline-list"
 						role={listRole}
 						aria-live="polite"

package/src/themes/HeroBanner.css

@@ -0,0 +1,359 @@
+/* HeroBanner Component Styles */
+
+:host(:not([hidden])) {
+	display: block;
+	width: 100%;
+	container-type: inline-size;
+	border-radius: var(--_ui5_banner_border_radius);
+	background-color: var(--_ui5_banner_background);
+	background-image: var(--_ui5_banner_background_image);
+	background-repeat: no-repeat;
+	background-position: top;
+	background-size: cover;
+}
+
+/* Banner Canvas */
+.ui5-banner-root {
+	box-sizing: border-box;
+	min-height: 5.75rem;
+	max-height: 24rem;
+	border-radius: inherit;
+	background-color: inherit;
+	background-image: inherit;
+	background-size: inherit;
+	box-shadow: var(--_ui5_banner_box_shadow);
+	border: var(--_ui5_banner_border);
+	overflow: hidden;
+	position: relative;
+}
+
+/* Content area — flex column by default, header first */
+.ui5-banner-content {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	box-sizing: border-box;
+	padding: 1.5rem;
+	color: var(--_ui5_banner_text_color);
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+}
+
+/* Header row: overline + heading on the left, actions on the right */
+.ui5-banner-header {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+}
+
+.ui5-banner-header-text {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.ui5-banner-actions {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	flex: 0 0 auto;
+	--sapButton_Lite_TextColor: var(--_ui5_banner_text_color);
+	--sapButton_Lite_Hover_TextColor: var(--_ui5_banner_text_color);
+	--sapButton_Lite_Active_TextColor: var(--_ui5_banner_text_color);
+	--sapButton_Lite_Hover_Background: color-mix(in srgb, var(--_ui5_banner_text_color) 15%, transparent);
+	--sapButton_Lite_Active_Background: color-mix(in srgb, var(--_ui5_banner_text_color) 25%, transparent);
+	--sapButton_IconColor: var(--_ui5_banner_text_color);
+}
+
+/* actionsPlacement="BottomStart": actions sit below header-text, left-aligned */
+.ui5-banner-actions-bottom-start {
+	align-self: flex-start;
+	margin-top: 0.5rem;
+}
+
+.ui5-banner-heading {
+	font-family: var(--sapFontHeaderFamily);
+	font-size: var(--sapFontHeader3Size);
+	font-weight: normal;
+	text-align: start;
+	color: var(--_ui5_banner_text_color);
+	line-height: 1.4;
+	margin: 0;
+	padding: 0;
+}
+
+.ui5-banner-overline {
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	text-align: start;
+	color: var(--_ui5_banner_text_color);
+	line-height: 1.4;
+}
+
+/* Free content blocks */
+.ui5-banner-block {
+	box-sizing: border-box;
+	min-width: 0;
+}
+
+/* Only endContent present (no startContent) — expand to full width */
+.ui5-banner-content:not(:has(.ui5-banner-block-start)) .ui5-banner-block-end {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+}
+
+/* ============================================================
+   columnsRatio="Equal" — 2-column grid, header spans full width
+   ============================================================ */
+.ui5-banner-content.ui5-banner-columns-equal {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: auto 1fr;
+}
+
+.ui5-banner-columns-equal .ui5-banner-header {
+	grid-column: 1 / -1;
+	grid-row: 1;
+}
+
+.ui5-banner-columns-equal .ui5-banner-block-start {
+	grid-column: 1;
+	grid-row: 2;
+}
+
+/* Without endContent, start content spans full width */
+.ui5-banner-columns-equal:not(:has(.ui5-banner-block-end)) .ui5-banner-block-start {
+	grid-column: 1 / -1;
+}
+
+.ui5-banner-columns-equal .ui5-banner-block-end {
+	grid-column: 2;
+	grid-row: 2;
+}
+
+/* ============================================================
+   columnsRatio="FirstWider" — 2/3 + 1/3 grid
+   ============================================================ */
+.ui5-banner-content.ui5-banner-columns-first-wider {
+	display: grid;
+	grid-template-columns: 2fr 1fr;
+	grid-template-rows: auto 1fr;
+}
+
+.ui5-banner-columns-first-wider .ui5-banner-header {
+	grid-column: 1 / -1;
+	grid-row: 1;
+}
+
+.ui5-banner-columns-first-wider .ui5-banner-block-start {
+	grid-column: 1;
+	grid-row: 2;
+}
+
+/* Without endContent, start content spans full width */
+.ui5-banner-columns-first-wider:not(:has(.ui5-banner-block-end)) .ui5-banner-block-start {
+	grid-column: 1 / -1;
+}
+
+.ui5-banner-columns-first-wider .ui5-banner-block-end {
+	grid-column: 2;
+	grid-row: 2;
+}
+
+/* ============================================================
+   actionsPlacement="BottomStart" modifiers
+   (must come after base grid rules to override them)
+   ============================================================ */
+
+/* BottomStart + only endContent: make root a flex column so content stretches to fill it */
+:host([actions-placement="BottomStart"]) .ui5-banner-root:has(.ui5-banner-block-end):not(:has(.ui5-banner-block-start)) {
+	display: flex;
+	flex-direction: column;
+}
+
+:host([actions-placement="BottomStart"]) .ui5-banner-root:has(.ui5-banner-block-end):not(:has(.ui5-banner-block-start)) .ui5-banner-content {
+	flex: 1;
+}
+
+/* No columnsRatio + only endContent: switch to 2-col grid so endContent fills full height */
+:host([actions-placement="BottomStart"]) .ui5-banner-content:has(.ui5-banner-block-end):not(:has(.ui5-banner-block-start)):not(.ui5-banner-columns-equal):not(.ui5-banner-columns-first-wider) {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: 1fr;
+	align-items: stretch;
+}
+
+:host([actions-placement="BottomStart"]) .ui5-banner-content:has(.ui5-banner-block-end):not(:has(.ui5-banner-block-start)):not(.ui5-banner-columns-equal):not(.ui5-banner-columns-first-wider) .ui5-banner-header {
+	grid-column: 1;
+	grid-row: 1;
+	align-self: stretch;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: flex-start;
+}
+
+:host([actions-placement="BottomStart"]) .ui5-banner-content:has(.ui5-banner-block-end):not(:has(.ui5-banner-block-start)):not(.ui5-banner-columns-equal):not(.ui5-banner-columns-first-wider) .ui5-banner-block-end {
+	grid-column: 2;
+	grid-row: 1;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	justify-content: center;
+}
+
+/* Split layouts + BottomStart + has startContent:
+   header becomes flex-column so actions flow below heading */
+:host([actions-placement="BottomStart"]) .ui5-banner-columns-equal:has(.ui5-banner-block-start) .ui5-banner-header,
+:host([actions-placement="BottomStart"]) .ui5-banner-columns-first-wider:has(.ui5-banner-block-start) .ui5-banner-header {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: flex-start;
+}
+
+/* Split layouts + BottomStart + no startContent:
+   single-row grid, header col 1 full height, endContent col 2 full height */
+:host([actions-placement="BottomStart"]) .ui5-banner-columns-equal:not(:has(.ui5-banner-block-start)),
+:host([actions-placement="BottomStart"]) .ui5-banner-columns-first-wider:not(:has(.ui5-banner-block-start)) {
+	grid-template-rows: 1fr;
+	align-items: stretch;
+}
+
+:host([actions-placement="BottomStart"]) .ui5-banner-columns-equal:not(:has(.ui5-banner-block-start)) .ui5-banner-header,
+:host([actions-placement="BottomStart"]) .ui5-banner-columns-first-wider:not(:has(.ui5-banner-block-start)) .ui5-banner-header {
+	grid-column: 1;
+	grid-row: 1;
+	align-self: stretch;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: flex-start;
+}
+
+:host([actions-placement="BottomStart"]) .ui5-banner-columns-equal:not(:has(.ui5-banner-block-start)) .ui5-banner-block-end,
+:host([actions-placement="BottomStart"]) .ui5-banner-columns-first-wider:not(:has(.ui5-banner-block-start)) .ui5-banner-block-end {
+	grid-column: 2;
+	grid-row: 1;
+	align-self: stretch;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+/* ============================================================
+   headerBlockPlacement="Bottom" modifiers
+   Only active when columnsRatio is set and only endContent is present.
+   (must come after BottomStart rules to override them when both are set)
+   ============================================================ */
+
+/* Flex layout (no columnsRatio): push header to bottom with margin-top auto */
+:host([header-block-placement="Bottom"]) .ui5-banner-content:not(.ui5-banner-columns-equal):not(.ui5-banner-columns-first-wider) .ui5-banner-header {
+	margin-top: auto;
+}
+
+/* Split grid layouts + only endContent:
+   single-row grid, header at bottom of col 1, endContent fills col 2 */
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-equal:not(:has(.ui5-banner-block-start)),
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-first-wider:not(:has(.ui5-banner-block-start)) {
+	grid-template-rows: 1fr;
+	align-items: stretch;
+	min-height: 12rem;
+}
+
+/* When TopEnd actions are present: 2-row grid so actions sit above endContent in col 2 */
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-equal:not(:has(.ui5-banner-block-start)):has(.ui5-banner-actions-grid-item),
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-first-wider:not(:has(.ui5-banner-block-start)):has(.ui5-banner-actions-grid-item) {
+	grid-template-rows: auto 1fr;
+}
+
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-equal:not(:has(.ui5-banner-block-start)) .ui5-banner-header,
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-first-wider:not(:has(.ui5-banner-block-start)) .ui5-banner-header {
+	grid-column: 1;
+	grid-row: 1;
+	align-self: end;
+}
+
+/* With actions: header still fills col 1, aligned to bottom */
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-equal:not(:has(.ui5-banner-block-start)):has(.ui5-banner-actions-grid-item) .ui5-banner-header,
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-first-wider:not(:has(.ui5-banner-block-start)):has(.ui5-banner-actions-grid-item) .ui5-banner-header {
+	grid-row: 1 / 3;
+	align-self: end;
+}
+
+/* TopEnd actions in col 2 row 1 — above endContent */
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-equal:not(:has(.ui5-banner-block-start)) .ui5-banner-actions-grid-item,
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-first-wider:not(:has(.ui5-banner-block-start)) .ui5-banner-actions-grid-item {
+	grid-column: 2;
+	grid-row: 1;
+	align-self: start;
+	justify-self: end;
+	min-width: 0;
+}
+
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-equal:not(:has(.ui5-banner-block-start)) .ui5-banner-block-end,
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-first-wider:not(:has(.ui5-banner-block-start)) .ui5-banner-block-end {
+	grid-column: 2;
+	grid-row: 1;
+	align-self: stretch;
+	height: 100%;
+}
+
+/* With actions: endContent moves to row 2 so actions occupy row 1 */
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-equal:not(:has(.ui5-banner-block-start)):has(.ui5-banner-actions-grid-item) .ui5-banner-block-end,
+:host([header-block-placement="Bottom"]) .ui5-banner-columns-first-wider:not(:has(.ui5-banner-block-start)):has(.ui5-banner-actions-grid-item) .ui5-banner-block-end {
+	grid-row: 2;
+}
+
+/* L → XS (≤1024px): Heading max 3 lines */
+@container (max-width: 1024px) {
+	.ui5-banner-heading {
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		line-clamp: 3;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
+/* XS (≤599px): collapse split layouts to stacked column */
+@container (max-width: 599px) {
+	.ui5-banner-content.ui5-banner-columns-equal,
+	.ui5-banner-content.ui5-banner-columns-first-wider {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.ui5-banner-block-start {
+		order: 1;
+	}
+
+	.ui5-banner-block-end {
+		order: 2;
+	}
+
+	/* BottomStart no-columnsRatio grid collapses to column */
+	:host([actions-placement="BottomStart"]) .ui5-banner-content:has(.ui5-banner-block-end):not(:has(.ui5-banner-block-start)):not(.ui5-banner-columns-equal):not(.ui5-banner-columns-first-wider) {
+		display: flex;
+		flex-direction: column;
+	}
+
+	:host([actions-placement="BottomStart"]) .ui5-banner-content:has(.ui5-banner-block-end):not(:has(.ui5-banner-block-start)):not(.ui5-banner-columns-equal):not(.ui5-banner-columns-first-wider) .ui5-banner-block-end {
+		justify-content: center;
+	}
+
+	/* Only endContent present: expand to full width and center children */
+	.ui5-banner-content:not(:has(.ui5-banner-block-start)) .ui5-banner-block-end {
+		justify-content: center;
+		width: 100%;
+	}
+}

package/src/themes/Timeline.css

@@ -59,12 +59,25 @@
 	margin-inline-start: var(--_ui5_tl_li_margin_bottom);
 }
 
+/* Scroll container */
 :host([layout="Horizontal"]) .ui5-timeline-scroll-container {
-	overflow: auto;
+	overflow-x: auto;
+	overflow-y: hidden;
 	/* The padding values of the parent container are added to the size of scroll container */
 	width: calc(100% + var(--_ui5_timeline_scroll_container_offset));
 }
 
+:host([layout="Vertical"]) .ui5-timeline-scroll-container {
+	height: 100%;
+	width: 100%;
+	overflow: auto;
+}
+
+.ui5-timeline-scroll-container {
+	display: flex;
+	flex-direction: column;
+}
+
 :host([loading]) .ui5-timeline-growing-button-busy-indicator:not([_is-busy]) {
 	display: none;
 }
@@ -77,12 +90,28 @@
 	box-sizing: border-box;
 }
 
-:host([layout="Vertical"]) .ui5-timeline-scroll-container {
-	height: 100%;
-	width: 100%;
-}
-
 :host([growing="Scroll"]) .ui5-timeline-end-marker {
 	/* Ensure the list-end-marker has a block property to always be stretched and "visible" on the screen */
 	display: inline-block;
-}
+}
+
+/* Header area — wraps header + info-bar slots above the items */
+.ui5-timeline-header-area {
+	flex-shrink: 0;
+	width: 100%;
+	background: var(--sapBackgroundColor);
+	margin-block-end: 1rem;
+}
+
+.ui5-timeline-header,
+.ui5-timeline-info-bar {
+	flex-shrink: 0;
+}
+
+/* Sticky header — pins to the top in vertical layout and to the inline-start in horizontal layout */
+:host([sticky-header]) .ui5-timeline-header-area {
+	position: sticky;
+	top: 0;
+	inset-inline-start: 0;
+	z-index: 2;
+}

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

@@ -0,0 +1,8 @@
+:host {
+	--_ui5_banner_background: var(--sapShell_HeroBanner_Background);
+	--_ui5_banner_text_color: var(--sapShell_HeroBanner_TextColor);
+	--_ui5_banner_border_radius: var(--sapTile_BorderCornerRadius);
+	--_ui5_banner_border: 0.0625rem solid var(--sapTile_BorderColor);
+	--_ui5_banner_box_shadow: var(--sapContent_Shadow0);
+	--_ui5_banner_background_image: var(--sapShell_HeroBanner_BackgroundImage);
+}

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

@@ -1,3 +1,4 @@
+@import "../base/HeroBanner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";

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

@@ -1,3 +1,4 @@
+@import "../base/HeroBanner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";

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

@@ -1,3 +1,4 @@
+@import "../base/HeroBanner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";

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

@@ -1,3 +1,4 @@
+@import "../base/HeroBanner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";

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

@@ -0,0 +1,4 @@
+:host {
+	--_ui5_banner_background: var(--sapShell_Banner_Background, var(--sapHighlightColor));
+	--_ui5_banner_text_color: var(--sapShell_Banner_TextColor, var(--sapContent_ContrastTextColor));
+}

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

@@ -1,3 +1,5 @@
+@import "../base/HeroBanner-parameters.css";
+@import "./HeroBanner-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";

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

@@ -1,3 +1,4 @@
+@import "../base/HeroBanner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";

package/src/themes/sap_horizon_dark_exp/parameters-bundle.css

@@ -1,3 +1,4 @@
+@import "../base/HeroBanner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";

package/src/themes/sap_horizon_exp/parameters-bundle.css

@@ -1,3 +1,5 @@
+@import "../base/HeroBanner-parameters.css";
+@import "../sap_horizon/HeroBanner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";

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

@@ -1,3 +1,4 @@
+@import "../base/HeroBanner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";