fix: bold and italic in list items proper indenting (#445)

fixes #444

Author: favna

packages/core/demo/index.html

@@ -851,6 +851,17 @@ <h3 class="title">Unordered list items</h3>
 																		<discord-list-item>deeper</discord-list-item>
 																		<discord-unordered-list>
 																			<discord-list-item>ain't that cool</discord-list-item>
+																			<discord-list-item>
+																				<discord-bold>we can also be bold</discord-bold>
+																			</discord-list-item>
+																			<discord-list-item>
+																				<discord-italic>or italic</discord-italic>
+																			</discord-list-item>
+																			<discord-list-item>
+																				<discord-bold>
+																					<discord-italic>or both</discord-italic>
+																				</discord-bold>
+																			</discord-list-item>
 																		</discord-unordered-list>
 																	</discord-unordered-list>
 																</discord-unordered-list>

packages/core/src/components/discord-bold/DiscordBold.ts

@@ -1,8 +1,17 @@
-import { LitElement, html } from 'lit';
+import { LitElement, css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 @customElement('discord-bold')
 export class DiscordBold extends LitElement {
+	/**
+	 * @internal
+	 */
+	public static override readonly styles = css`
+		:host > strong {
+			font-weight: 700;
+		}
+	`;
+
 	protected override render() {
 		return html`
 			<strong>

packages/core/src/components/discord-italic/DiscordItalic.ts

@@ -1,8 +1,17 @@
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 @customElement('discord-italic')
 export class DiscordItalic extends LitElement {
+	/**
+	 * @internal
+	 */
+	public static override readonly styles = css`
+		:host > em {
+			font-style: italic;
+		}
+	`;
+
 	protected override render() {
 		return html`
 			<em>

packages/core/src/components/discord-list-item/DiscordListItem.ts

@@ -9,7 +9,6 @@ export class DiscordListItem extends LitElement {
 	 */
 	public static override readonly styles = css`
 		:host > li {
-			white-space: break-spaces;
 			margin-bottom: 4px;
 		}
 	`;
@@ -27,12 +26,7 @@ export class DiscordListItem extends LitElement {
 
 	protected override render() {
 		this.checkParentElement();
-
-		return html`<!-- display: inline -->
-			<li
-				><span
-					><span><slot></slot></span></span
-			></li>`;
+		return html`<li><slot></slot></li>`;
 	}
 }
 

packages/documentation/src/lit/components/DiscordComponentsWrapper.ts

@@ -836,6 +836,17 @@ export class DiscordComponentsWrapper extends LitElement {
 																		<discord-list-item>deeper</discord-list-item>
 																		<discord-unordered-list>
 																			<discord-list-item>ain't that cool</discord-list-item>
+																			<discord-list-item>
+																				<discord-bold>we can also be bold</discord-bold>
+																			</discord-list-item>
+																			<discord-list-item>
+																				<discord-italic>or italic</discord-italic>
+																			</discord-list-item>
+																			<discord-list-item>
+																				<discord-bold>
+																					<discord-italic>or both</discord-italic>
+																				</discord-bold>
+																			</discord-list-item>
 																		</discord-unordered-list>
 																	</discord-unordered-list>
 																</discord-unordered-list>