From 1f1fd11ea69315b29610eda14f725b9bc501df2b Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Thu, 27 Jun 2024 16:55:14 +0300
Subject: [PATCH 1/7] feature(ui5-title): add new titleStyle property

---
 packages/main/src/Title.hbs         |  2 +-
 packages/main/src/Title.ts          | 11 +++++++++++
 packages/main/src/themes/Title.css  | 12 ++++++------
 packages/main/test/pages/Title.html |  8 ++++++++
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/main/src/Title.hbs b/packages/main/src/Title.hbs
index 010fff50839f..a0b44cdffe46 100644
--- a/packages/main/src/Title.hbs
+++ b/packages/main/src/Title.hbs
@@ -4,7 +4,7 @@
 				{{> titleInner}}
 		</h1>
 {{/if}}
-		
+
 {{#if h2}}
 		<h2
 			class="ui5-title-root">
diff --git a/packages/main/src/Title.ts b/packages/main/src/Title.ts
index ab86611aea7e..8d3104e098df 100644
--- a/packages/main/src/Title.ts
+++ b/packages/main/src/Title.ts
@@ -50,12 +50,23 @@ class Title extends UI5Element {
 	/**
 	 * Defines the component level.
 	 * Available options are: `"H6"` to `"H1"`.
+	 * This property does not influence the style of the control.
+	 * Use the property `titleStyle` for this purpose instead.
 	 * @default "H2"
 	 * @public
 	 */
 	@property()
 	level: `${TitleLevel}` = "H2";
 
+	/**
+	 * Defines the style of the title.
+	 * Available options are: `"H6"` to `"H1"`.
+	 * @default "H5"
+	 * @public
+	 */
+	@property()
+	titleStyle: `${TitleLevel}` = "H5";
+
 	get h1() {
 		return this.level === TitleLevel.H1;
 	}
diff --git a/packages/main/src/themes/Title.css b/packages/main/src/themes/Title.css
index 135814a8f933..3a10c5937a8b 100644
--- a/packages/main/src/themes/Title.css
+++ b/packages/main/src/themes/Title.css
@@ -49,31 +49,31 @@
 }
 
 /* Level H1 */
-:host([level="H1"]) {
+:host([title-style="H1"]) {
 	font-size: var(--sapFontHeader1Size);
 }
 
 /* Level H2 */
-:host([level="H2"]) {
+:host([title-style="H2"]) {
 	font-size: var(--sapFontHeader2Size);
 }
 
 /* Level H3 */
-:host([level="H3"]) {
+:host([title-style="H3"]) {
 	font-size: var(--sapFontHeader3Size);
 }
 
 /* Level H4 */
-:host([level="H4"]) {
+:host([title-style="H4"]) {
 	font-size: var(--sapFontHeader4Size);
 }
 
 /* Level H5 */
-:host([level="H5"]) {
+:host([title-style="H5"]) {
 	font-size: var(--sapFontHeader5Size);
 }
 
 /* Level H6 */
-:host([level="H6"]) {
+:host([title-style="H6"]) {
 	font-size: var(--sapFontHeader6Size);
 }
diff --git a/packages/main/test/pages/Title.html b/packages/main/test/pages/Title.html
index 91ea08748f74..8cb863ff0bfd 100644
--- a/packages/main/test/pages/Title.html
+++ b/packages/main/test/pages/Title.html
@@ -25,6 +25,14 @@
 		<ui5-title id="titleH5" level="H5">Title Level 5</ui5-title>
 		<ui5-title id="titleH6" level="H6">Title Level 6</ui5-title>
 		<ui5-title level="H2">A Very Long Long Long Long Title Text with Level Two</ui5-title>
+		<br>
+		<ui5-title title-style="H1">Title Style 1</ui5-title>
+		<ui5-title title-style="H2">Title Style 2</ui5-title>
+		<ui5-title title-style="H3">Title Style 3</ui5-title>
+		<ui5-title title-style="H4">Title Style 4</ui5-title>
+		<ui5-title>Title Style Auto (5)</ui5-title>
+		<ui5-title title-style="H5">Title Style 5</ui5-title>
+		<ui5-title title-style="H6">Title Style 6</ui5-title>
 	</section>
 
 	<section class="wrapping">

From a47a0e2c3d6b0a6fd5b63428cde6beed7d4dc4fd Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Fri, 28 Jun 2024 14:16:53 +0300
Subject: [PATCH 2/7] chore: fix test

---
 packages/main/test/pages/Title.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/main/test/pages/Title.html b/packages/main/test/pages/Title.html
index 8cb863ff0bfd..9f1ee55987bc 100644
--- a/packages/main/test/pages/Title.html
+++ b/packages/main/test/pages/Title.html
@@ -37,8 +37,8 @@
 
 	<section class="wrapping">
 		<h2>Wrapping</h2>
-		<ui5-title level="H6" id="wrapping-title">Wrapping Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
-		<ui5-title level="H6" id="truncated-title" wrapping-type="None">Truncated Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
+		<ui5-title title-style="H6" level="H6" id="wrapping-title">Wrapping Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
+		<ui5-title title-style="H6" level="H6" id="truncated-title" wrapping-type="None">Truncated Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
 	</section>
 
 	<section>

From cbe3ee32db28602c8932a988eb93aa74e982a915 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Fri, 28 Jun 2024 15:56:18 +0300
Subject: [PATCH 3/7] chore: change default font size

---
 packages/main/src/themes/Title.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/main/src/themes/Title.css b/packages/main/src/themes/Title.css
index 3a10c5937a8b..10430385ef62 100644
--- a/packages/main/src/themes/Title.css
+++ b/packages/main/src/themes/Title.css
@@ -6,7 +6,7 @@
 :host {
 	max-width: 100%;
 	color: var(--sapGroup_TitleTextColor);
-	font-size: var(--sapFontHeader2Size);
+	font-size: var(--sapFontHeader5Size);
 	font-family: "72override", var(--sapFontHeaderFamily);
 	text-shadow: var(--sapContent_TextShadow);
 }

From 68905560579b23240641d952f53b815ec27ad4f6 Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Tue, 2 Jul 2024 11:52:27 +0300
Subject: [PATCH 4/7] chore: change property name

---
 packages/main/src/Title.ts          |  4 ++--
 packages/main/src/themes/Title.css  | 12 ++++++------
 packages/main/test/pages/Title.html | 16 ++++++++--------
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/main/src/Title.ts b/packages/main/src/Title.ts
index 8d3104e098df..4174c44529e3 100644
--- a/packages/main/src/Title.ts
+++ b/packages/main/src/Title.ts
@@ -51,7 +51,7 @@ class Title extends UI5Element {
 	 * Defines the component level.
 	 * Available options are: `"H6"` to `"H1"`.
 	 * This property does not influence the style of the control.
-	 * Use the property `titleStyle` for this purpose instead.
+	 * Use the property `size` for this purpose instead.
 	 * @default "H2"
 	 * @public
 	 */
@@ -65,7 +65,7 @@ class Title extends UI5Element {
 	 * @public
 	 */
 	@property()
-	titleStyle: `${TitleLevel}` = "H5";
+	size: `${TitleLevel}` = "H5";
 
 	get h1() {
 		return this.level === TitleLevel.H1;
diff --git a/packages/main/src/themes/Title.css b/packages/main/src/themes/Title.css
index 10430385ef62..d0bc0050162f 100644
--- a/packages/main/src/themes/Title.css
+++ b/packages/main/src/themes/Title.css
@@ -49,31 +49,31 @@
 }
 
 /* Level H1 */
-:host([title-style="H1"]) {
+:host([size="H1"]) {
 	font-size: var(--sapFontHeader1Size);
 }
 
 /* Level H2 */
-:host([title-style="H2"]) {
+:host([size="H2"]) {
 	font-size: var(--sapFontHeader2Size);
 }
 
 /* Level H3 */
-:host([title-style="H3"]) {
+:host([size="H3"]) {
 	font-size: var(--sapFontHeader3Size);
 }
 
 /* Level H4 */
-:host([title-style="H4"]) {
+:host([size="H4"]) {
 	font-size: var(--sapFontHeader4Size);
 }
 
 /* Level H5 */
-:host([title-style="H5"]) {
+:host([size="H5"]) {
 	font-size: var(--sapFontHeader5Size);
 }
 
 /* Level H6 */
-:host([title-style="H6"]) {
+:host([size="H6"]) {
 	font-size: var(--sapFontHeader6Size);
 }
diff --git a/packages/main/test/pages/Title.html b/packages/main/test/pages/Title.html
index 9f1ee55987bc..146b3acc5f17 100644
--- a/packages/main/test/pages/Title.html
+++ b/packages/main/test/pages/Title.html
@@ -26,19 +26,19 @@
 		<ui5-title id="titleH6" level="H6">Title Level 6</ui5-title>
 		<ui5-title level="H2">A Very Long Long Long Long Title Text with Level Two</ui5-title>
 		<br>
-		<ui5-title title-style="H1">Title Style 1</ui5-title>
-		<ui5-title title-style="H2">Title Style 2</ui5-title>
-		<ui5-title title-style="H3">Title Style 3</ui5-title>
-		<ui5-title title-style="H4">Title Style 4</ui5-title>
+		<ui5-title size="H1">Title Style 1</ui5-title>
+		<ui5-title size="H2">Title Style 2</ui5-title>
+		<ui5-title size="H3">Title Style 3</ui5-title>
+		<ui5-title size="H4">Title Style 4</ui5-title>
 		<ui5-title>Title Style Auto (5)</ui5-title>
-		<ui5-title title-style="H5">Title Style 5</ui5-title>
-		<ui5-title title-style="H6">Title Style 6</ui5-title>
+		<ui5-title size="H5">Title Style 5</ui5-title>
+		<ui5-title size="H6">Title Style 6</ui5-title>
 	</section>
 
 	<section class="wrapping">
 		<h2>Wrapping</h2>
-		<ui5-title title-style="H6" level="H6" id="wrapping-title">Wrapping Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
-		<ui5-title title-style="H6" level="H6" id="truncated-title" wrapping-type="None">Truncated Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
+		<ui5-title size="H6" level="H6" id="wrapping-title">Wrapping Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
+		<ui5-title size="H6" level="H6" id="truncated-title" wrapping-type="None">Truncated Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
 	</section>
 
 	<section>

From 492b538afcc8e75a577f749a6e9cf74b4d97f1fa Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Thu, 4 Jul 2024 14:50:30 +0300
Subject: [PATCH 5/7] chore: address code review comments

---
 packages/main/src/Title.ts                         |  4 ++--
 packages/main/src/themes/Title.css                 |  6 ------
 packages/main/test/pages/Title.html                | 14 +++++++-------
 .../docs/_samples/main/Title/Basic/sample.html     | 12 ++++++------
 4 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/packages/main/src/Title.ts b/packages/main/src/Title.ts
index 4174c44529e3..fbc547ccc5ff 100644
--- a/packages/main/src/Title.ts
+++ b/packages/main/src/Title.ts
@@ -50,7 +50,7 @@ class Title extends UI5Element {
 	/**
 	 * Defines the component level.
 	 * Available options are: `"H6"` to `"H1"`.
-	 * This property does not influence the style of the control.
+	 * This property does not influence the style of the component.
 	 * Use the property `size` for this purpose instead.
 	 * @default "H2"
 	 * @public
@@ -59,7 +59,7 @@ class Title extends UI5Element {
 	level: `${TitleLevel}` = "H2";
 
 	/**
-	 * Defines the style of the title.
+	 * Defines the visual appearance of the title.
 	 * Available options are: `"H6"` to `"H1"`.
 	 * @default "H5"
 	 * @public
diff --git a/packages/main/src/themes/Title.css b/packages/main/src/themes/Title.css
index d0bc0050162f..77cd827b75fe 100644
--- a/packages/main/src/themes/Title.css
+++ b/packages/main/src/themes/Title.css
@@ -48,32 +48,26 @@
 	text-shadow: inherit;
 }
 
-/* Level H1 */
 :host([size="H1"]) {
 	font-size: var(--sapFontHeader1Size);
 }
 
-/* Level H2 */
 :host([size="H2"]) {
 	font-size: var(--sapFontHeader2Size);
 }
 
-/* Level H3 */
 :host([size="H3"]) {
 	font-size: var(--sapFontHeader3Size);
 }
 
-/* Level H4 */
 :host([size="H4"]) {
 	font-size: var(--sapFontHeader4Size);
 }
 
-/* Level H5 */
 :host([size="H5"]) {
 	font-size: var(--sapFontHeader5Size);
 }
 
-/* Level H6 */
 :host([size="H6"]) {
 	font-size: var(--sapFontHeader6Size);
 }
diff --git a/packages/main/test/pages/Title.html b/packages/main/test/pages/Title.html
index 146b3acc5f17..69edf86480a0 100644
--- a/packages/main/test/pages/Title.html
+++ b/packages/main/test/pages/Title.html
@@ -17,13 +17,13 @@
 
 <body class="title1auto">
 	<section>
-		<ui5-title id="titleH1" level="H1">Title Level 1</ui5-title>
-		<ui5-title>Title Level Auto (2)</ui5-title>
-		<ui5-title id="titleH2" level="H2">Title Level 2</ui5-title>
-		<ui5-title id="titleH3" level="H3">Title Level 3</ui5-title>
-		<ui5-title id="titleH4" level="H4">Title Level 4</ui5-title>
-		<ui5-title id="titleH5" level="H5">Title Level 5</ui5-title>
-		<ui5-title id="titleH6" level="H6">Title Level 6</ui5-title>
+		<ui5-title id="titleH1" level="H1">Title Size 1</ui5-title>
+		<ui5-title>Title Size Auto (2)</ui5-title>
+		<ui5-title id="titleH2" level="H2">Title Size 2</ui5-title>
+		<ui5-title id="titleH3" level="H3">Title Size 3</ui5-title>
+		<ui5-title id="titleH4" level="H4">Title Size 4</ui5-title>
+		<ui5-title id="titleH5" level="H5">Title Size 5</ui5-title>
+		<ui5-title id="titleH6" level="H6">Title Size 6</ui5-title>
 		<ui5-title level="H2">A Very Long Long Long Long Title Text with Level Two</ui5-title>
 		<br>
 		<ui5-title size="H1">Title Style 1</ui5-title>
diff --git a/packages/website/docs/_samples/main/Title/Basic/sample.html b/packages/website/docs/_samples/main/Title/Basic/sample.html
index c9d8e6dec0b2..19b1a85b5b90 100644
--- a/packages/website/docs/_samples/main/Title/Basic/sample.html
+++ b/packages/website/docs/_samples/main/Title/Basic/sample.html
@@ -9,12 +9,12 @@
 <body style="background-color: var(--sapBackgroundColor)">
 <!-- playground-fold-end -->
 
-<ui5-title level="H1">Title</ui5-title>
-<ui5-title level="H2">Title</ui5-title>
-<ui5-title level="H3">Title</ui5-title>
-<ui5-title level="H4">Title</ui5-title>
-<ui5-title level="H5">Title</ui5-title>
-<ui5-title level="H6">Title</ui5-title>
+<ui5-title level="H1" size="H1">Title</ui5-title>
+<ui5-title level="H2" size="H2">Title</ui5-title>
+<ui5-title level="H3" size="H3">Title</ui5-title>
+<ui5-title level="H4" size="H4">Title</ui5-title>
+<ui5-title level="H5" size="H5">Title</ui5-title>
+<ui5-title level="H6" size="H6">Title</ui5-title>
 <!-- playground-fold -->
     <script type="module" src="main.js"></script>
 </body>

From 9e79cee4a6556325ffb08001b47e9484f95b35cf Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Thu, 4 Jul 2024 15:39:16 +0300
Subject: [PATCH 6/7] chore: adapt components which uses ui5-title

---
 packages/main/src/ColorPalettePopover.hbs              |  2 +-
 packages/main/src/ResponsivePopover.hbs                |  2 +-
 packages/main/src/TokenizerPopover.hbs                 |  2 +-
 packages/main/src/themes/PopupsCommon.css              |  2 --
 .../main/src/themes/base/PopupsCommon-parameters.css   |  1 -
 .../src/themes/sap_horizon/PopupsCommon-parameters.css |  1 -
 .../sap_horizon_dark/PopupsCommon-parameters.css       |  1 -
 .../sap_horizon_dark_exp/PopupsCommon-parameters.css   |  1 -
 .../themes/sap_horizon_exp/PopupsCommon-parameters.css |  1 -
 .../themes/sap_horizon_hcb/PopupsCommon-parameters.css |  1 -
 .../sap_horizon_hcb_exp/PopupsCommon-parameters.css    |  1 -
 .../themes/sap_horizon_hcw/PopupsCommon-parameters.css |  1 -
 .../sap_horizon_hcw_exp/PopupsCommon-parameters.css    |  1 -
 packages/main/test/pages/Kitchen.html                  | 10 +++++-----
 packages/main/test/pages/Kitchen.openui5.html          | 10 +++++-----
 15 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/packages/main/src/ColorPalettePopover.hbs b/packages/main/src/ColorPalettePopover.hbs
index eec0ed87b2d4..c17b8b00dca5 100644
--- a/packages/main/src/ColorPalettePopover.hbs
+++ b/packages/main/src/ColorPalettePopover.hbs
@@ -9,7 +9,7 @@
 >
 	<div slot="header" class="ui5-cp-header">
 		<ui5-title
-			level="H5"
+			level="H1"
 			wrapping-type="None"
 		>{{_colorPaletteTitle}}</ui5-title>
 	</div>
diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs
index 42ef453a1a59..efb95f8cb93f 100644
--- a/packages/main/src/ResponsivePopover.hbs
+++ b/packages/main/src/ResponsivePopover.hbs
@@ -22,7 +22,7 @@
 				<div class="{{classes.header}}" slot="header">
 					{{#if headerText }}
 						<ui5-title
-							level="H2"
+							level="H1"
 							wrapping-type="None"
 							class="ui5-popup-header-text ui5-responsive-popover-header-text"
 						>
diff --git a/packages/main/src/TokenizerPopover.hbs b/packages/main/src/TokenizerPopover.hbs
index 6601fe5934a9..5aa07b0e1dd3 100644
--- a/packages/main/src/TokenizerPopover.hbs
+++ b/packages/main/src/TokenizerPopover.hbs
@@ -16,7 +16,7 @@
 		<div slot="header" class="ui5-responsive-popover-header">
 			<div class="row">
 				<ui5-title
-					level="H5"
+					level="H1"
 					wrapping-type="None"
 					class="ui5-responsive-popover-header-text"
 				>
diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css
index b6b25949abb4..8dd9c60b6d84 100644
--- a/packages/main/src/themes/PopupsCommon.css
+++ b/packages/main/src/themes/PopupsCommon.css
@@ -43,8 +43,6 @@
 .ui5-popup-footer-root,
 :host([header-text]) .ui5-popup-header-text {
     margin: 0;
-    font-size: 1rem;
-    font-family: "72override", var(--_ui5_popup_header_font_family);
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/packages/main/src/themes/base/PopupsCommon-parameters.css b/packages/main/src/themes/base/PopupsCommon-parameters.css
index 76018c46078c..76381a2b5ad8 100644
--- a/packages/main/src/themes/base/PopupsCommon-parameters.css
+++ b/packages/main/src/themes/base/PopupsCommon-parameters.css
@@ -7,7 +7,6 @@
 	--_ui5_popup_header_footer_padding_xl: 3rem;
 	--_ui5_popup_viewport_margin: 10px;
 	--_ui5_popup_header_font_weight: 400;
-	--_ui5_popup_header_font_family: var(--sapFontFamily);
 	--_ui5_popup_header_prop_header_text_alignment: flex-start;
 	--_ui5_popup_border_radius: var(--sapElement_BorderCornerRadius);
 	--_ui5_popup_header_background: var(--sapPageHeader_Background);
diff --git a/packages/main/src/themes/sap_horizon/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon/PopupsCommon-parameters.css
index 538539ccc4ca..cfe5d0eccc32 100644
--- a/packages/main/src/themes/sap_horizon/PopupsCommon-parameters.css
+++ b/packages/main/src/themes/sap_horizon/PopupsCommon-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_dark/PopupsCommon-parameters.css
index 538539ccc4ca..cfe5d0eccc32 100644
--- a/packages/main/src/themes/sap_horizon_dark/PopupsCommon-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark/PopupsCommon-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_dark_exp/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/PopupsCommon-parameters.css
index 538539ccc4ca..cfe5d0eccc32 100644
--- a/packages/main/src/themes/sap_horizon_dark_exp/PopupsCommon-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark_exp/PopupsCommon-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_exp/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_exp/PopupsCommon-parameters.css
index 538539ccc4ca..cfe5d0eccc32 100644
--- a/packages/main/src/themes/sap_horizon_exp/PopupsCommon-parameters.css
+++ b/packages/main/src/themes/sap_horizon_exp/PopupsCommon-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css
index be3754497b89..e5ad3ed1f387 100644
--- a/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css
@@ -1,7 +1,6 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 	--_ui5_popup_header_shadow: none;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/PopupsCommon-parameters.css
index 538539ccc4ca..cfe5d0eccc32 100644
--- a/packages/main/src/themes/sap_horizon_hcb_exp/PopupsCommon-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcb_exp/PopupsCommon-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css
index be3754497b89..e5ad3ed1f387 100644
--- a/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css
@@ -1,7 +1,6 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 	--_ui5_popup_header_shadow: none;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/PopupsCommon-parameters.css
index 538539ccc4ca..cfe5d0eccc32 100644
--- a/packages/main/src/themes/sap_horizon_hcw_exp/PopupsCommon-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcw_exp/PopupsCommon-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/PopupsCommon-parameters.css";
 
 :root {
-	--_ui5_popup_header_font_family: var(--sapFontHeaderFamily);
 	--_ui5_popup_border_radius: 0.5rem;
 }
diff --git a/packages/main/test/pages/Kitchen.html b/packages/main/test/pages/Kitchen.html
index c0dda168b68b..f10882e8498d 100644
--- a/packages/main/test/pages/Kitchen.html
+++ b/packages/main/test/pages/Kitchen.html
@@ -76,11 +76,11 @@
 
 	<div id="main-content" class="main">
 		<section class="row heading-row-centered">
-			<ui5-title level="H1">UI5 webcomponents</ui5-title>
+			<ui5-title size="H1" level="H1">UI5 webcomponents</ui5-title>
 		</section>
 
 		<section class="row heading-row-centered no-vertical-padding">
-			<ui5-title level="H3">For better experience, for Fiori3 experience</ui5-title>
+			<ui5-title size="H3" level="H3">For better experience, for Fiori3 experience</ui5-title>
 		</section>
 
 		<section class="row heading-row-centered">
@@ -208,7 +208,7 @@
 			<ui5-button id="openPopoverButton">Open Popover</ui5-button>
 			<ui5-popover header-text="Popover" id="hello-popover">
 				<div class="kitchen2auto">
-					<ui5-title level="H2">Hello World!</ui5-title>
+					<ui5-title size="H2" level="H2">Hello World!</ui5-title>
 				</div>
 				<ui5-textarea
 					placeholder="Type some text"
@@ -224,7 +224,7 @@
 			<ui5-button id="openDialogButton">Open Dialog</ui5-button>
 			<ui5-dialog id="hello-dialog" header-text="Dialog">
 				<div class="kitchen2auto">
-					<ui5-title level="H2">Hello World!</ui5-title>
+					<ui5-title size="H2" level="H2">Hello World!</ui5-title>
 				</div>
 				<ui5-textarea
 					placeholder="Type some text"
@@ -239,7 +239,7 @@
 			<ui5-button id="openDialogStretched">Open Dialog Stretched</ui5-button>
 			<ui5-dialog id="hello-dialog2" header-text="Dialog" stretch>
 				<div class="kitchen2auto">
-					<ui5-title level="H2">Hello World!</ui5-title>
+					<ui5-title size="H2" level="H2">Hello World!</ui5-title>
 				</div>
 				<ui5-textarea
 					placeholder="Type some text"
diff --git a/packages/main/test/pages/Kitchen.openui5.html b/packages/main/test/pages/Kitchen.openui5.html
index a3977fba3836..0f0ab6697dc5 100644
--- a/packages/main/test/pages/Kitchen.openui5.html
+++ b/packages/main/test/pages/Kitchen.openui5.html
@@ -71,11 +71,11 @@
 
 	<div id="main-content" class="main">
 		<section class="row heading-row-centered">
-			<ui5-title level="H1">UI5 webcomponents</ui5-title>
+			<ui5-title size="H1" level="H1">UI5 webcomponents</ui5-title>
 		</section>
 
 		<section class="row heading-row-centered no-vertical-padding">
-			<ui5-title level="H3">For better experience, for Fiori3 experience</ui5-title>
+			<ui5-title size="H3" level="H3">For better experience, for Fiori3 experience</ui5-title>
 		</section>
 
 		<section class="row heading-row-centered">
@@ -190,7 +190,7 @@
 			<ui5-button id="openPopoverButton">Open Popover</ui5-button>
 			<ui5-popover header-text="Popover" id="hello-popover">
 				<div class="kitchen_openui54auto">
-					<ui5-title level="H2">Hello World!</ui5-title>
+					<ui5-title size="H2" level="H2">Hello World!</ui5-title>
 				</div>
 				<ui5-textarea
 					placeholder="Type some text"
@@ -206,7 +206,7 @@
 			<ui5-button id="openDialogButton">Open Dialog</ui5-button>
 			<ui5-dialog id="hello-dialog" header-text="Dialog">
 				<div class="kitchen_openui54auto">
-					<ui5-title level="H2">Hello World!</ui5-title>
+					<ui5-title size="H2" level="H2">Hello World!</ui5-title>
 				</div>
 				<ui5-textarea
 					placeholder="Type some text"
@@ -221,7 +221,7 @@
 			<ui5-button id="openDialogStretched">Open Dialog Stretched</ui5-button>
 			<ui5-dialog id="hello-dialog2" header-text="Dialog" stretch>
 				<div class="kitchen_openui54auto">
-					<ui5-title level="H2">Hello World!</ui5-title>
+					<ui5-title size="H2" level="H2">Hello World!</ui5-title>
 				</div>
 				<ui5-textarea
 					placeholder="Type some text"

From 19b8115107d559473f3197b75d121088618890fe Mon Sep 17 00:00:00 2001
From: Teodor Taushanov <teodor.taushanov@sap.com>
Date: Fri, 5 Jul 2024 14:50:01 +0300
Subject: [PATCH 7/7] chore: adapt dialog and popover templates to use
 ui5-title

---
 packages/main/src/Dialog.hbs         | 2 +-
 packages/main/src/Popover.hbs        | 2 +-
 packages/main/test/pages/Dialog.html | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/Dialog.hbs b/packages/main/src/Dialog.hbs
index 8836ce6b397d..3f2b73a668e9 100644
--- a/packages/main/src/Dialog.hbs
+++ b/packages/main/src/Dialog.hbs
@@ -20,7 +20,7 @@
 				{{#if header.length }}
 					<slot name="header"></slot>
 				{{else}}
-					<h1 id="ui5-popup-header-text" class="ui5-popup-header-text">{{headerText}}</h1>
+					<ui5-title level="H1" id="ui5-popup-header-text" class="ui5-popup-header-text">{{headerText}}</ui5-title>
 				{{/if}}
 
 				{{#if resizable}}
diff --git a/packages/main/src/Popover.hbs b/packages/main/src/Popover.hbs
index 88960f26280a..c930e265a93f 100644
--- a/packages/main/src/Popover.hbs
+++ b/packages/main/src/Popover.hbs
@@ -8,7 +8,7 @@
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}
-				<h1 class="ui5-popup-header-text">{{headerText}}</h1>
+				<ui5-title level="H1" class="ui5-popup-header-text">{{headerText}}</ui5-title>
 			{{/if}}
 		</header>
 	{{/if}}
diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
index 7653b3cf9c11..20e59f109574 100644
--- a/packages/main/test/pages/Dialog.html
+++ b/packages/main/test/pages/Dialog.html
@@ -150,7 +150,7 @@
 	<ui5-dialog id="dialog" accessible-name="Resizable" stretch>
 		<div slot="header">
 			<ui5-button id="header-button">focus stop</ui5-button>
-			<ui5-title id="tt" level="H1">Resizable</ui5-title>
+			<ui5-title level="H1" id="tt" level="H1">Resizable</ui5-title>
 
 		</div>