From d2ccc268fd9c1110f5309bb5d13905ef4df217ee Mon Sep 17 00:00:00 2001
From: Jeroen Claassens <support@favware.tech>
Date: Sat, 10 Feb 2024 10:52:13 +0100
Subject: [PATCH] fix: proper header styling

---
 packages/core/demo/index.html                   |  9 +++++++++
 .../components/discord-header/DiscordHeader.ts  | 17 ++++++++++-------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html
index 5286dc852..393ffb49c 100644
--- a/packages/core/demo/index.html
+++ b/packages/core/demo/index.html
@@ -572,6 +572,15 @@ <h3 class="title">Inline fields with a thumbnail</h3>
 						</discord-embed>
 					</discord-message>
 				</discord-messages>
+
+				<h3 class="title">Headers</h3>
+				<discord-messages>
+					<discord-message profile="favna">
+						<discord-header level="1">This is a header 1</discord-header>
+						<discord-header level="2">This is a header 2</discord-header>
+						<discord-header level="3">This is a header 3</discord-header>
+					</discord-message>
+				</discord-messages>
 			</main>
 		</div>
 	</body>
diff --git a/packages/core/src/components/discord-header/DiscordHeader.ts b/packages/core/src/components/discord-header/DiscordHeader.ts
index de0bc4bcc..53719fbeb 100644
--- a/packages/core/src/components/discord-header/DiscordHeader.ts
+++ b/packages/core/src/components/discord-header/DiscordHeader.ts
@@ -4,30 +4,30 @@ import { customElement, property } from 'lit/decorators.js';
 @customElement('discord-header')
 export class DiscordHeader extends LitElement {
 	public static override styles = css`
-		:host {
+		:host > * {
 			margin: 16px 0 8px;
 			font-weight: 700;
 			line-height: 1.375em;
 		}
 
-		:host([level='1']) {
+		:host([level='1']) > h1 {
 			font-size: 1.5rem;
 		}
 
-		:host([level='2']) {
+		:host([level='2']) > h2 {
 			font-size: 1.25rem;
 		}
 
-		:host([level='3']) {
+		:host([level='3']) > h3 {
 			font-size: 1rem;
 		}
 
-		:host([level='1']):first-child(),
-		:host([level='2']):first-child() {
+		:host([level='1']):first-child() > h1,
+		:host([level='2']):first-child() > h2 {
 			margin-top: 8px;
 		}
 
-		:host([level='3']):first-child() {
+		:host([level='3']):first-child() > h3 {
 			margin-top: 4px;
 		}
 	`;
@@ -58,6 +58,9 @@ export class DiscordHeader extends LitElement {
 			case 3: {
 				return html`<h3><slot></slot></h3>`;
 			}
+			default: {
+				return html`<slot></slot>`;
+			}
 		}
 	}
 }