feat: add discord-subscript component

Author: favna

packages/core/demo/index.html

@@ -180,30 +180,38 @@ <h3 class="title">With subsequent messages</h3>
 				</discord-messages>
 				<h3 class="title">Markdown Styling</h3>
 				<discord-messages>
-					<discord-message>
+					<discord-message profile="favna">
 						<discord-bold>I am bold text!</discord-bold>
 					</discord-message>
-					<discord-message>
+					<discord-message profile="favna">
 						<discord-italic>I am italic text!</discord-italic>
 					</discord-message>
-					<discord-message>
+					<discord-message profile="favna">
 						<discord-bold>
 							<discord-italic>I am bold italic text!</discord-italic>
 						</discord-bold>
 					</discord-message>
-					<discord-message>
+					<discord-message profile="favna">
 						<discord-underlined>I am underlined text!</discord-underlined>
 					</discord-message>
-					<discord-message>
+					<discord-message profile="favna"
+						>I have subscript:<discord-subscript
+							>Only you can see this •
+							<discord-link href="https://discord.com/vanityurl/dotcom/steakpants/flour/flower/index11.html" target="_blank"
+								>Dismiss message</discord-link
+							></discord-subscript
+						></discord-message
+					>
+					<discord-message profile="favna">
 						<discord-code>I am inline-code text!</discord-code>
 					</discord-message>
-					<discord-message>
+					<discord-message profile="favna">
 						<discord-code multiline>I am multi-line code</discord-code>
 					</discord-message>
-					<discord-message>
+					<discord-message profile="favna">
 						<discord-spoiler>I am spoiler text!</discord-spoiler>
 					</discord-message>
-					<discord-message>
+					<discord-message profile="favna">
 						<discord-quote>I am quoted text!</discord-quote>
 					</discord-message>
 				</discord-messages>

packages/core/package.json

@@ -42,6 +42,7 @@
 		"./discord-reactions.js": "./dist/components/discord-reactions/DiscordReactions.js",
 		"./discord-reply.js": "./dist/components/discord-reply/DiscordReply.js",
 		"./discord-spoiler.js": "./dist/components/discord-spoiler/DiscordSpoiler.js",
+		"./discord-subscript.js": "./dist/components/discord-subscript/DiscordSubscript.js",
 		"./discord-system-message.js": "./dist/components/discord-system-message/DiscordSystemMessage.js",
 		"./discord-tenor-video.js": "./dist/components/discord-tenor-video/DiscordTenorVideo.js",
 		"./discord-thread.js": "./dist/components/discord-thread/DiscordThread.js",
@@ -84,6 +85,7 @@
 		"./dist/components/discord-reactions/DiscordReactions.js",
 		"./dist/components/discord-reply/DiscordReply.js",
 		"./dist/components/discord-spoiler/DiscordSpoiler.js",
+		"./dist/components/discord-subscript/DiscordSubscript.js",
 		"./dist/components/discord-system-message/DiscordSystemMessage.js",
 		"./dist/components/discord-tenor-video/DiscordTenorVideo.js",
 		"./dist/components/discord-thread/DiscordThread.js",

packages/core/src/components/discord-subscript/DiscordSubscript.ts

@@ -0,0 +1,41 @@
+import { consume } from '@lit/context';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import type { LightTheme } from '../../types.js';
+import { messagesLightTheme } from '../discord-messages/DiscordMessages.js';
+
+@customElement('discord-subscript')
+export class DiscordSubscript extends LitElement implements LightTheme {
+	public static override readonly styles = css`
+		small {
+			display: block;
+			color: color-mix(in oklab, hsl(214 calc(1 * 8.1%) 61.2% / 1) 100%, black 0%);
+			font-size: 0.8125rem;
+			line-height: 1.11719rem;
+		}
+
+		:host([light-theme]) > small {
+			color: color-mix(in oklab, hsl(228 calc(1 * 5.2%) 38% / 1) 100%, black 0%);
+		}
+	`;
+
+	@consume({ context: messagesLightTheme })
+	@property({ type: Boolean, reflect: true, attribute: 'light-theme' })
+	public accessor lightTheme = false;
+
+	protected override render() {
+		return html`
+			<small>
+				<span>
+					<slot></slot>
+				</span>
+			</small>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'discord-subscript': DiscordSubscript;
+	}
+}

packages/core/src/index.ts

@@ -33,6 +33,7 @@ export { DiscordReaction } from './components/discord-reaction/DiscordReaction.j
 export { DiscordReactions } from './components/discord-reactions/DiscordReactions.js';
 export { DiscordReply } from './components/discord-reply/DiscordReply.js';
 export { DiscordSpoiler } from './components/discord-spoiler/DiscordSpoiler.js';
+export { DiscordSubscript } from './components/discord-subscript/DiscordSubscript.js';
 export { DiscordSystemMessage } from './components/discord-system-message/DiscordSystemMessage.js';
 export { DiscordTenorVideo } from './components/discord-tenor-video/DiscordTenorVideo.js';
 export { DiscordThread } from './components/discord-thread/DiscordThread.js';

packages/react/src/index.ts

@@ -34,6 +34,7 @@ export const DiscordReaction = createReactComponent('discord-reaction', ReactCom
 export const DiscordReactions = createReactComponent('discord-reactions', ReactComponents.DiscordReactions);
 export const DiscordReply = createReactComponent('discord-reply', ReactComponents.DiscordReply);
 export const DiscordSpoiler = createReactComponent('discord-spoiler', ReactComponents.DiscordSpoiler);
+export const DiscordSubscript = createReactComponent('discord-subscript', ReactComponents.DiscordSubscript);
 export const DiscordSystemMessage = createReactComponent('discord-system-message', ReactComponents.DiscordSystemMessage);
 export const DiscordTenorVideo = createReactComponent('discord-tenor-video', ReactComponents.DiscordTenorVideo);
 export const DiscordThread = createReactComponent('discord-thread', ReactComponents.DiscordThread);