@ui5/webcomponents-fiori 2.23.0-rc.1 → 2.23.0

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-fiori",
-  "version": "2.23.0-rc.1",
+  "version": "2.23.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -580,6 +580,89 @@
             "events": []
           }
         },
+        {
+          "name": "ui5-hero-banner",
+          "description": "### Overview\n\nThe `ui5-hero-banner` is a flexible, full-width banner designed for placement at the top of a page.\nIt provides a personalized greeting and quick access to key information or actions.\n\n### Structure\n\nThe HeroBanner consists of the following building blocks:\n\n- **Banner Canvas** - the visual base with a background color, optional background image and shadow.\n- **Overline** (optional) - contextual text at the top, e.g. the current date or a status message.\n- **Header** (optional) - the main greeting header below the overline, e.g. \"Hello, John\".\n- **Free Slots** (optional) - customizable content areas that can contain KPI cards, search components, text, buttons, etc.\n\nThe banner is not sticky — it scrolls away with the page content when the user scrolls down.\n\n### Usage\n\nPlace the `ui5-hero-banner` at the top of a page to welcome the user and surface relevant\ninformation or shortcuts at a glance.\n\nThe hero banner itself is non-interactive. However, interactive elements such as buttons, cards,\nor search fields can be placed inside the free content slots and will follow their own\ninteractive states.\n\n### Responsive Behavior\n\nThe hero banner adapts to different screen sizes:\n- On smaller screens, split layouts (Equal, FirstWider) collapse to a single stacked column.\n- The heading text wraps to multiple lines as needed.\n- Buttons in the headerAction slot will wrap.\n- On screens ≤1024px, the header text is wrapped to a maximum of 3 lines.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/HeroBanner.js\";`\n---\n\n\n### **Slots:**\n - **actions** - Defines action buttons displayed to the right of the header area.\nTypically used to display actions buttons in the top right corner.\n\nCan contain buttons, links, or other interactive elements that provide\nquick access to relevant actions directly from the hero banner header.\n- **default** - Defines the first (default) free content block of the hero banner.\n\nThis is the default slot — content placed directly inside `<ui5-hero-banner>`\nwithout a slot attribute lands here.\nCan contain KPI cards, search input fields, text, buttons, and more.\n- **endContent** - Defines the second free content block of the hero banner.\n\nUsed alongside `startContent` when `columnsRatio` is set (`Equal`, `FirstWider`).\nCan contain cards, buttons, and other interactive elements.\n\n### **CSS Parts:**\n - **canvas** - Used to style the banner canvas container\n- **content** - Used to style the content area of the banner\n- **endContent** - Used to style the end content block\n- **header** - Used to style the header area (salutation, date, header actions)\n- **startContent** - Used to style the start (default) content block",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "actions-placement",
+              "description": "Defines the placement of the actions slot within the hero banner header.\n\n- **TopEnd** (default) - Actions are displayed to the right of the header text, at the top of the header row.\n- **BottomStart** - Actions are displayed below the header text, left-aligned, regardless of `columnsRatio` or slot usage.",
+              "value": {
+                "type": "\"TopEnd\" | \"BottomStart\"",
+                "default": "\"TopEnd\""
+              }
+            },
+            {
+              "name": "columns-ratio",
+              "description": "Defines the ratio between the two content columns inside the hero banner.\n\nTakes effect only when `endContent` is provided. When no `endContent` is present, the content spans the full width (single column).\n\n- **Equal** - Two equal columns. Both content blocks share the available width equally.\n  On smaller screens, both slots stack vertically.\n- **FirstWider** - Two unequal columns. The start content takes two-thirds of the width, the end content one-third.\n  On smaller screens, both slots stack vertically.",
+              "value": {
+                "type": "\"Equal\" | \"FirstWider\"",
+                "default": "\"FirstWider\""
+              }
+            },
+            {
+              "name": "header-block-placement",
+              "description": "Defines the vertical placement of the header block within the content area.\n\n- **Top** (default) - Header block is placed at the top of the content area.\n- **Bottom** - Header block is pushed to the bottom of column 1. Only takes effect when `columnsRatio`\n  is `Equal` or `FirstWider` and only `endContent` is provided (no default slot content).\n  When `actionsPlacement` is also `BottomStart`, the `endContent` slot spans the full height.",
+              "value": { "type": "\"Top\" | \"Bottom\"", "default": "\"Top\"" }
+            },
+            {
+              "name": "header-text",
+              "description": "Defines the header text displayed in the hero banner.\n\nThis is the main greeting header, typically a personalized message\nsuch as \"Hello, John\".",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "overline-text",
+              "description": "Defines text displayed above the heading as an overline.\nCan be used to show the current date, a status message, or any other relevant contextual information.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "actions",
+              "description": "Defines action buttons displayed to the right of the header area.\nTypically used to display actions buttons in the top right corner.\n\nCan contain buttons, links, or other interactive elements that provide\nquick access to relevant actions directly from the hero banner header."
+            },
+            {
+              "name": "default",
+              "description": "Defines the first (default) free content block of the hero banner.\n\nThis is the default slot — content placed directly inside `<ui5-hero-banner>`\nwithout a slot attribute lands here.\nCan contain KPI cards, search input fields, text, buttons, and more."
+            },
+            {
+              "name": "endContent",
+              "description": "Defines the second free content block of the hero banner.\n\nUsed alongside `startContent` when `columnsRatio` is set (`Equal`, `FirstWider`).\nCan contain cards, buttons, and other interactive elements."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "actions-placement",
+                "description": "Defines the placement of the actions slot within the hero banner header.\n\n- **TopEnd** (default) - Actions are displayed to the right of the header text, at the top of the header row.\n- **BottomStart** - Actions are displayed below the header text, left-aligned, regardless of `columnsRatio` or slot usage.",
+                "value": { "type": "\"TopEnd\" | \"BottomStart\"" }
+              },
+              {
+                "name": "columns-ratio",
+                "description": "Defines the ratio between the two content columns inside the hero banner.\n\nTakes effect only when `endContent` is provided. When no `endContent` is present, the content spans the full width (single column).\n\n- **Equal** - Two equal columns. Both content blocks share the available width equally.\n  On smaller screens, both slots stack vertically.\n- **FirstWider** - Two unequal columns. The start content takes two-thirds of the width, the end content one-third.\n  On smaller screens, both slots stack vertically.",
+                "value": { "type": "\"Equal\" | \"FirstWider\"" }
+              },
+              {
+                "name": "header-block-placement",
+                "description": "Defines the vertical placement of the header block within the content area.\n\n- **Top** (default) - Header block is placed at the top of the content area.\n- **Bottom** - Header block is pushed to the bottom of column 1. Only takes effect when `columnsRatio`\n  is `Equal` or `FirstWider` and only `endContent` is provided (no default slot content).\n  When `actionsPlacement` is also `BottomStart`, the `endContent` slot spans the full height.",
+                "value": { "type": "\"Top\" | \"Bottom\"" }
+              },
+              {
+                "name": "header-text",
+                "description": "Defines the header text displayed in the hero banner.\n\nThis is the main greeting header, typically a personalized message\nsuch as \"Hello, John\".",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "overline-text",
+                "description": "Defines text displayed above the heading as an overline.\nCan be used to show the current date, a status message, or any other relevant contextual information.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "ui5-illustrated-message",
           "description": "### Overview\nAn IllustratedMessage is a recommended combination of a solution-oriented message, an engaging\nillustration, and conversational tone to better communicate an empty or a success state than just show\na message alone.\n\nEach illustration has default internationalised title and subtitle texts. Also they can be managed with\n`titleText` and `subtitleText` properties.\n\nTo display the desired illustration, use the `name` property, where you can find the list of all available illustrations.\n\n**Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/NoData.js\"`\n\n**Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::\n\n`import \"@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js\"`\n\n### Structure\nThe IllustratedMessage consists of the following elements, which are displayed below each other in the following order:\n\n- Illustration\n- Title\n- Subtitle\n- Actions\n\n### Usage\n`ui5-illustrated-message` is meant to be used inside container component, for example a `ui5-card`,\na `ui5-dialog` or a `ui5-page`\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the component actions.\n\n**Note:** Not displayed when the `design` property is set to `Base`.\n- **subtitle** - Defines the subtitle of the component.\n\n**Note:** Using this slot, the default subtitle text of illustration and the value of `subtitleText` property will be overwritten.\n- **title** - Defines the title of the component.\n\n**Note:** Using this slot, the default title text of illustration and the value of `title` property will be overwritten.\n\n### **CSS Parts:**\n - **subtitle** - Used to style the subtitle wrapper of the `ui5-illustrated-message`",
@@ -4376,6 +4459,26 @@
           "name": "part(footer)",
           "description": "Used to style the footer of the component"
         },
+        {
+          "name": "part(canvas)",
+          "description": "Used to style the banner canvas container"
+        },
+        {
+          "name": "part(content)",
+          "description": "Used to style the content area of the banner"
+        },
+        {
+          "name": "part(endContent)",
+          "description": "Used to style the end content block"
+        },
+        {
+          "name": "part(header)",
+          "description": "Used to style the header area (salutation, date, header actions)"
+        },
+        {
+          "name": "part(startContent)",
+          "description": "Used to style the start (default) content block"
+        },
         {
           "name": "part(subtitle)",
           "description": "Used to style the subtitle wrapper of the `ui5-illustrated-message`"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-fiori",
-  "version": "2.23.0-rc.1",
+  "version": "2.23.0",
   "description": "UI5 Web Components: webcomponents.fiori",
   "ui5": {
     "webComponentsPackage": true
@@ -54,20 +54,20 @@
     "directory": "packages/fiori"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.23.0-rc.1",
-    "@ui5/webcomponents-base": "2.23.0-rc.1",
-    "@ui5/webcomponents-icons": "2.23.0-rc.1",
-    "@ui5/webcomponents-theming": "2.23.0-rc.1",
+    "@ui5/webcomponents": "2.23.0",
+    "@ui5/webcomponents-base": "2.23.0",
+    "@ui5/webcomponents-icons": "2.23.0",
+    "@ui5/webcomponents-theming": "2.23.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.1",
+    "@ui5/webcomponents-tools": "2.23.0",
     "cypress": "15.9.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "yarn": "^1.22.22"
   },
-  "gitHead": "ab89a5f83b5dbd4bca2ba6e6b145f54c548c5dd0"
+  "gitHead": "2b920fe2cdaba740dda6caa7bd0bd32302264e35"
 }

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/i18n/messagebundle_mk.properties

@@ -12,7 +12,7 @@ DYNAMIC_PAGE_ARIA_LABEL_EXPAND_HEADER=Прошири го заглавието
 
 DYNAMIC_PAGE_ARIA_LABEL_SNAP_HEADER=Скриј го заглавието
 
-DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER=Фиксирај го заглавието
+DYNAMIC_PAGE_ARIA_LABEL_PIN_HEADER=Закачи го заглавието
 
 DYNAMIC_PAGE_ARIA_LABEL_UNPIN_HEADER=Поништи го фиксирањето на заглавието
 

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/SearchField.css

@@ -87,6 +87,8 @@
 	--_ui5_select_label_color: var(--sapShell_TextColor);
 	/* Remove Select's default focus outline without affecting dropdown items */
 	--_ui5_input_focus_outline_color: transparent;
+	/* Suppress Select's bottom border gradient inside ShellBar search */
+	--_ui5_select_bottom_border_gradient: none;
 }
 
 [ui5-select]:hover:not(:active):not(:focus-within) {
@@ -261,8 +263,6 @@
 }
 .ui5-shell-search-field-icon::part(root) {
 	padding: var(--_ui5_search_icon_padding);
-	width: 1rem;
-	height: 1rem;
 	outline-offset: -0.125rem;
 }
 

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));
+}