refactor(ui5-illustrated-message): remove titleLevel property (#8700)

Removes the `titleLevel` property  of  the `ui5-illustrated-message`, since users can set the required title level on the title slot.
Also, now the the slotted element has proper styles and responsiveness.

BREAKING CHANGE: The `titleLevel` property of the `ui5-illustrated-message`is removed.
If you have previously used the `titleLevel` property:
```html
<ui5-illustrated-message title-level="H6>
```
it will no longer work for the component.

Instead, you could set the title of the `ui5-illustrated-message` on the `title` slot, as it follows

```html
<ui5-illustrated-message>
      <ui5-title slot="title" level="H3">This is a slotted title</ui5-title>
</ui5-illustrated-message>
```
Related to #8461, #7887

packages/fiori/src/IllustratedMessage.hbs

@@ -5,11 +5,13 @@
 		</div>
 		<div class="ui5-illustrated-message-text-and-actions-container">
 			{{#if hasTitle}}
+				<div part="title" class="ui5-illustrated-message-title">
 					{{#if hasFormattedTitle}}
 						<slot name="title"></slot>
 					{{else}}
-						<ui5-title level="{{titleLevel}}" class="ui5-illustrated-message-title" wrapping-type="Normal">{{effectiveTitleText}}</ui5-title>
+						<ui5-title wrapping-type="Normal">{{effectiveTitleText}}</ui5-title>
 					{{/if}}
+				</div>
 			{{/if}}
 
 			{{#if hasSubtitle}}

packages/fiori/src/IllustratedMessage.ts

@@ -9,7 +9,6 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Ari
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import Title from "@ui5/webcomponents/dist/Title.js";
-import TitleLevel from "@ui5/webcomponents/dist/types/TitleLevel.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import type { IButton } from "@ui5/webcomponents/dist/Button.js";
 import IllustrationMessageSize from "./types/IllustrationMessageSize.js";
@@ -158,19 +157,6 @@ class IllustratedMessage extends UI5Element {
 	@property({ defaultValue: "" })
 	accessibleNameRef!: string;
 
-	/**
-	* Defines the semantic level of the title.
-	*
-	* **Note:** Used for accessibility purposes only.
-	*
-	* **Note:** Doesn't take effect when `title` slot is being used.
-	* @default "H2"
-	* @public
-	* @since 1.20.0
-	*/
-	@property({ type: TitleLevel, defaultValue: TitleLevel.H2 })
-	titleLevel!: `${TitleLevel}`;
-
 	/**
 	* Illustration breakpoint variant for the <code>Dot</code> design.
 	*

packages/fiori/src/themes/IllustratedMessage.css

@@ -47,7 +47,8 @@
     top: 0;
 }
 
-.ui5-illustrated-message-title {
+.ui5-illustrated-message-title [ui5-title],
+.ui5-illustrated-message-title ::slotted([slot="title"]) {
     text-align: center;
     margin-bottom: 1rem;
     line-height: 1.3;
@@ -72,7 +73,8 @@
     margin: 1rem 0;
 }
 
-:host([media="dialog"]) .ui5-illustrated-message-title {
+:host([media="dialog"]) .ui5-illustrated-message-title [ui5-title],
+:host([media="dialog"]) ::slotted([slot="title"]) {
     margin-bottom: 0.5rem;
     font-size: var(--sapFontHeader4Size);
     max-width: 40.5625rem;
@@ -98,7 +100,8 @@
     margin-top: 0;
 }
 
-:host([media="spot"]) .ui5-illustrated-message-title {
+:host([media="spot"]) .ui5-illustrated-message-title [ui5-title],
+:host([media="spot"]) ::slotted([slot="title"]) {
     margin-bottom: 0.5rem;
     font-size: var(--sapFontHeader5Size);
     line-height: 1.25rem;
@@ -131,7 +134,8 @@
 	align-self: baseline;
 }
 
-:host([media="dot"]) .ui5-illustrated-message-title {
+:host([media="dot"]) .ui5-illustrated-message-title [ui5-title],
+:host([media="dot"]) ::slotted([slot="title"])  {
 	margin-bottom: 0.25rem;
 	font-size: var(--sapFontHeader5Size);
 	line-height: 1.25rem;
@@ -152,7 +156,8 @@
     display: none;
 }
 
-:host([media="base"]) .ui5-illustrated-message-title {
+:host([media="base"]) .ui5-illustrated-message-title [ui5-title],
+:host([media="base"]) ::slotted([slot="title"]) {
     margin-bottom: 0.25rem;
     font-size: var(--sapFontHeader5Size);
     line-height: 1.25rem;

packages/fiori/test/pages/IllustratedMessage.html

@@ -144,7 +144,7 @@
 		</ui5-bar>
 	</ui5-dialog>
 
-	<ui5-illustrated-message id="illustratedMsg2" name="UnableToUpload" title="Something went wrong..." accessible-name-ref="lbl" title-level="H6">
+	<ui5-illustrated-message id="illustratedMsg2" name="UnableToUpload" title="Something went wrong..." accessible-name-ref="lbl">
 		<div slot="subtitle">Please try again or contact us at <ui5-link>example@example.com</ui5-link> <br><label id="lbl">Text from aria-labelledby</label></div>
 		<ui5-button icon="refresh">Try again</ui5-button>
 	</ui5-illustrated-message>

packages/fiori/test/specs/IllustratedMessage.spec.js

@@ -80,31 +80,6 @@ describe("Accessibility", () => {
 
 	});
 
-	it("title-level", async () => {
-		// Arrange
-		const illustratedMsg = await browser.$("#illustratedMsg2"),
-			  illustratedMsgTitle = await browser.$("#illustratedMsg2").shadow$(".ui5-illustrated-message-root ui5-title"),
-			  EXPECTED_TITLE_lEVEL = "H6",
-			  NEW_TITLE_LEVEL = "H3",
-			  DEFAULT_TITLE_LEVEL = "H2";
-
-		// Assert
-		assert.strictEqual(await illustratedMsgTitle.getAttribute("level"), EXPECTED_TITLE_lEVEL, "level is set");
-
-		// Act
-		await illustratedMsg.setAttribute("title-level", NEW_TITLE_LEVEL);
-
-		// Assert
-		assert.strictEqual(await illustratedMsgTitle.getAttribute("level"), NEW_TITLE_LEVEL, "level is set");
-
-		// Act
-		await illustratedMsg.removeAttribute("title-level");
-
-		// Assert
-		assert.strictEqual(await illustratedMsgTitle.getAttribute("level"), DEFAULT_TITLE_LEVEL, "level has the default value");
-
-	});
-
 });
 
 describe("Vertical responsiveness", () => {

packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts

@@ -23,7 +23,6 @@ const Template: UI5StoryArgs<IllustratedMessage, StoryArgsSlots> = (
     subtitle-text="${ifDefined(args.subtitleText)}"
     title-text="${ifDefined(args.titleText)}"
     accessible-name-ref="${ifDefined(args.accessibleNameRef)}"
-    title-level="${ifDefined(args.titleLevel)}"
 >
     ${unsafeHTML(args.title)}
 	${unsafeHTML(args.subtitle)}
@@ -80,7 +79,3 @@ CustomTitle.args = {
     default: `
 	<ui5-button icon="refresh">Try again</ui5-button>`,
 };
-
-CustomTitle.parameters = {
-	controls: { exclude: ['titleLevel'] },
-};