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

package/dist/types/HeroBannerHeaderBlockPlacement.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Available HeroBanner header text block placement options.
+ *
+ * Defines the vertical placement of the header text block within the banner header area.
+ * @public
+ * @since 2.23.0
+ */
+declare enum HeroBannerHeaderBlockPlacement {
+    /**
+     * Places the header text block at the top of the header area.
+     * @public
+     */
+    Top = "Top",
+    /**
+     * Places the header text block at the bottom of the header area.
+     * @public
+     */
+    Bottom = "Bottom"
+}
+export default HeroBannerHeaderBlockPlacement;

package/dist/types/HeroBannerHeaderBlockPlacement.js

@@ -0,0 +1,22 @@
+/**
+ * Available HeroBanner header text block placement options.
+ *
+ * Defines the vertical placement of the header text block within the banner header area.
+ * @public
+ * @since 2.23.0
+ */
+var HeroBannerHeaderBlockPlacement;
+(function (HeroBannerHeaderBlockPlacement) {
+    /**
+     * Places the header text block at the top of the header area.
+     * @public
+     */
+    HeroBannerHeaderBlockPlacement["Top"] = "Top";
+    /**
+     * Places the header text block at the bottom of the header area.
+     * @public
+     */
+    HeroBannerHeaderBlockPlacement["Bottom"] = "Bottom";
+})(HeroBannerHeaderBlockPlacement || (HeroBannerHeaderBlockPlacement = {}));
+export default HeroBannerHeaderBlockPlacement;
+//# sourceMappingURL=HeroBannerHeaderBlockPlacement.js.map

package/dist/types/HeroBannerHeaderBlockPlacement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroBannerHeaderBlockPlacement.js","sourceRoot":"","sources":["../../src/types/HeroBannerHeaderBlockPlacement.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,IAAK,8BAYJ;AAZD,WAAK,8BAA8B;IAClC;;;OAGG;IACH,6CAAW,CAAA;IAEX;;;OAGG;IACH,mDAAiB,CAAA;AAClB,CAAC,EAZI,8BAA8B,KAA9B,8BAA8B,QAYlC;AAED,eAAe,8BAA8B,CAAC","sourcesContent":["/**\n * Available HeroBanner header text block placement options.\n *\n * Defines the vertical placement of the header text block within the banner header area.\n * @public\n * @since 2.23.0\n */\nenum HeroBannerHeaderBlockPlacement {\n\t/**\n\t * Places the header text block at the top of the header area.\n\t * @public\n\t */\n\tTop = \"Top\",\n\n\t/**\n\t * Places the header text block at the bottom of the header area.\n\t * @public\n\t */\n\tBottom = \"Bottom\"\n}\n\nexport default HeroBannerHeaderBlockPlacement;\n"]}

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

@@ -226,6 +226,38 @@
       ],
       "references": []
     },
+    {
+      "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\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",
+      "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.",
+          "values": [{ "name": "TopEnd" }, { "name": "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.",
+          "values": [{ "name": "Equal" }, { "name": "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.",
+          "values": [{ "name": "Top" }, { "name": "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\".",
+          "values": []
+        },
+        {
+          "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.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "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\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`",

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.2",
+  "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.2",
+  "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.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.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.2",
+    "@ui5/webcomponents-tools": "2.23.0",
     "cypress": "15.9.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "yarn": "^1.22.22"
   },
-  "gitHead": "8e2484d13f3aeac61195cd83eff7bba26df1b1bc"
+  "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={{