feat(emoji): add support for jumbo size emojis

packages/core/demo/index.html

@@ -225,6 +225,10 @@ <h3 class="title">Custom Discord Emojis</h3>
 							</discord-embed-fields>
 						</discord-embed>
 					</discord-message>
+					<discord-message profile="favna"> They can also be jumbo sized to represent if the message only has emojis: </discord-message>
+					<discord-message profile="favna">
+						<discord-custom-emoji jumbo name="skyra" url="https://github.com/NM-EEA-Y.png"></discord-custom-emoji>
+					</discord-message>
 				</discord-messages>
 				<h3 class="title">Server Invites</h3>
 				<discord-messages>

packages/core/src/components/discord-custom-emoji/DiscordCustomEmoji.ts

@@ -1,5 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import type { Emoji } from '../../types.js';
 import { getGlobalEmojiUrl } from '../../util.js';
@@ -22,6 +23,12 @@ export class DiscordCustomEmoji extends LitElement {
 			vertical-align: bottom;
 		}
 
+		.discord-custom-emoji .discord-custom-jumbo-emoji-image {
+			width: 3rem;
+			height: 3rem;
+			min-height: 3rem;
+		}
+
 		.discord-embed-custom-emoji {
 			display: inline-block;
 		}
@@ -65,6 +72,14 @@ export class DiscordCustomEmoji extends LitElement {
 	@property({ type: Boolean, attribute: 'embed-emoji' })
 	public accessor embedEmoji: boolean;
 
+	/**
+	 * Determines whether or not the emoji is of "jumbo size",
+	 * This means it is larger and is what Discord uses when the message exclusively has emojis,
+	 * up to a maximum of 30 emojis.
+	 */
+	@property({ type: Boolean, attribute: 'jumbo' })
+	public accessor jumbo: boolean;
+
 	public override willUpdate() {
 		if (!this.url && Boolean(this.name)) {
 			const emojiFromGlobal = getGlobalEmojiUrl(this.name) ?? this.customEmojisMap[this.name];
@@ -78,11 +93,24 @@ export class DiscordCustomEmoji extends LitElement {
 
 	protected override render() {
 		const name = `:${this.name}:`;
-		const emojiClassName = this.embedEmoji ? 'discord-embed-custom-emoji' : 'discord-custom-emoji';
-		const emojiImageClassName = this.embedEmoji ? 'discord-embed-custom-emoji-image' : 'discord-custom-emoji-image';
 
-		return html`<span class="${emojiClassName}"
-			><img aria-label=${name} src=${ifDefined(this.url)} alt=${name} draggable="false" class="${emojiImageClassName}"
+		console.log(name, this.jumbo);
+
+		return html`<span
+			class=${classMap({
+				'discord-embed-custom-emoji': this.embedEmoji,
+				'discord-custom-emoji': !this.embedEmoji
+			})}
+			><img
+				aria-label=${name}
+				src=${ifDefined(this.url)}
+				alt=${name}
+				draggable="false"
+				class=${classMap({
+					'discord-embed-custom-emoji-image': this.embedEmoji,
+					'discord-custom-emoji-image': !this.embedEmoji,
+					'discord-custom-jumbo-emoji-image': this.jumbo
+				})}
 		/></span> `;
 	}
 }