From 919a56c1d542380e12b28714d97deef0d766c12d Mon Sep 17 00:00:00 2001
From: Tyom Semonov <inspiro@gmail.com>
Date: Fri, 20 Feb 2026 10:18:58 +0000
Subject: [PATCH 1/5] fix: resolve emoji shortcodes to Unicode in rich_text
 blocks

Use resolveEmoji() from @botarium/mrkdwn to convert emoji names to
Unicode characters, with fallback to Slack's hex unicode field, then
to :name: text for custom emojis.
---
 .../components/blockkit/blocks/RichTextBlock.svelte    | 10 +++++++++-
 bunfig.toml                                            |  1 -
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/ui/src/components/blockkit/blocks/RichTextBlock.svelte b/apps/ui/src/components/blockkit/blocks/RichTextBlock.svelte
index 04bfe71..6be0de8 100644
--- a/apps/ui/src/components/blockkit/blocks/RichTextBlock.svelte
+++ b/apps/ui/src/components/blockkit/blocks/RichTextBlock.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import DOMPurify from 'dompurify'
+  import { resolveEmoji } from '@botarium/mrkdwn'
   import type {
     RichTextBlockElement,
     RichTextInlineElement,
@@ -68,7 +69,14 @@
         return applyStyles(inner, el.style)
       }
       case 'emoji': {
-        return applyStyles(`:${escapeHtml(el.name)}:`, el.style)
+        const unicode = el.unicode
+          ? String.fromCodePoint(
+              ...el.unicode.split('-').map((s) => parseInt(s, 16)),
+            )
+          : undefined
+        const emoji = resolveEmoji(el.name) ?? unicode
+        const display = emoji ?? `:${escapeHtml(el.name)}:`
+        return applyStyles(display, el.style)
       }
       case 'user': {
         const inner = `<span class="s-mention">@${escapeHtml(el.user_id)}</span>`
diff --git a/bunfig.toml b/bunfig.toml
index e81da27..b64aea4 100644
--- a/bunfig.toml
+++ b/bunfig.toml
@@ -1,2 +1 @@
 [test]
-# Test configuration

From 1f6152145b09bc78a7d8a98a9f53d241ab621bf3 Mon Sep 17 00:00:00 2001
From: Tyom Semonov <inspiro@gmail.com>
Date: Sat, 21 Feb 2026 01:06:33 +0000
Subject: [PATCH 2/5] refactor: align Block Kit HTML output with real Slack
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Match Slack's actual HTML structure, class naming (BEM with c-/p- prefixes),
and rendering behavior for rich text blocks and interactive elements.

Rich text changes:
- Bold/strike tags: <strong>→<b>, <del>→<s>
- Newlines: \n→c-mrkdwn__br spacer spans (matching Slack)
- Emojis: c-emoji class with tooltips, large variant for emoji-only sections
- Pre/quote/list elements use Slack's actual class names and data attributes
- Wrapper structure: p-block_kit_renderer__block_wrapper around each block
- Skip whitespace-only sections between block elements

Extract inline Tailwind → scoped CSS (Slack BEM naming):
- Button: c-button with --outline/--primary/--danger modifiers
- StaticSelect/WorkspaceSelect: c-select_input
- ActionsBlock: p-actions_block with p-actions_block__action wrappers
- ContextActionsBlock: p-context_actions
- BlockKitRenderer: p-block_kit_renderer

Also export renderEmoji from @botarium/mrkdwn with c-emoji class naming.
---
 apps/ui/src/app.css                           |  14 +-
 .../blockkit/BlockKitRenderer.svelte          |  92 ++++----
 .../blockkit/blocks/ActionsBlock.svelte       | 151 +++++++------
 .../blocks/ContextActionsBlock.svelte         |   9 +-
 .../blockkit/blocks/RichTextBlock.svelte      | 208 ++++++++++++++----
 .../blockkit/elements/Button.svelte           |  49 ++++-
 .../blockkit/elements/StaticSelect.svelte     |  33 ++-
 .../blockkit/elements/WorkspaceSelect.svelte  |  42 +++-
 packages/mrkdwn/src/emoji.ts                  |  10 +-
 packages/mrkdwn/src/index.ts                  |   2 +-
 packages/mrkdwn/src/mrkdwn-to-html.test.ts    |   6 +-
 11 files changed, 441 insertions(+), 175 deletions(-)

diff --git a/apps/ui/src/app.css b/apps/ui/src/app.css
index ed068a3..8520868 100644
--- a/apps/ui/src/app.css
+++ b/apps/ui/src/app.css
@@ -392,13 +392,13 @@
   border-radius: 3px;
 }
 
-.mrkdwn .s-emoji {
+.mrkdwn .c-emoji {
   font-style: normal;
   position: relative;
   cursor: default;
 }
 
-.mrkdwn .s-emoji-tip {
+.mrkdwn .c-emoji__tooltip {
   visibility: hidden;
   opacity: 0;
   position: absolute;
@@ -422,7 +422,7 @@
   z-index: 10;
 }
 
-.mrkdwn .s-emoji-tip::after {
+.mrkdwn .c-emoji__tooltip::after {
   content: '';
   position: absolute;
   top: 100%;
@@ -432,17 +432,17 @@
   border-top-color: #38393d;
 }
 
-.mrkdwn .s-emoji-big {
-  font-size: 48px;
+.mrkdwn .c-emoji__tooltip-big {
+  font-size: 64px;
   line-height: 1.2;
 }
 
-.mrkdwn .s-emoji-code {
+.mrkdwn .c-emoji__tooltip-code {
   font-size: 12px;
   color: #ababad;
 }
 
-.mrkdwn .s-emoji:hover .s-emoji-tip {
+.mrkdwn .c-emoji:hover .c-emoji__tooltip {
   visibility: visible;
   opacity: 1;
 }
diff --git a/apps/ui/src/components/blockkit/BlockKitRenderer.svelte b/apps/ui/src/components/blockkit/BlockKitRenderer.svelte
index 1b3887b..562edbc 100644
--- a/apps/ui/src/components/blockkit/BlockKitRenderer.svelte
+++ b/apps/ui/src/components/blockkit/BlockKitRenderer.svelte
@@ -68,46 +68,58 @@
   }
 </script>
 
-<div class="flex flex-col">
+<div class="p-block_kit_renderer">
   {#each blocks as block, index (getBlockId(block, index))}
-    {#if block.type === 'section'}
-      <SectionBlock block={block as SlackSectionBlock} {onAction} />
-    {:else if block.type === 'input'}
-      <InputBlock
-        block={block as SlackInputBlock}
-        blockId={getBlockId(block, index)}
-        {values}
-        {fileValues}
-        {onInputChange}
-        {onFileChange}
-        {onCheckboxChange}
-        {onRadioChange}
-      />
-    {:else if block.type === 'actions'}
-      <ActionsBlock block={block as SlackActionsBlock} {onAction} />
-    {:else if block.type === 'divider'}
-      <DividerBlock />
-    {:else if block.type === 'context'}
-      <ContextBlock block={block as SlackContextBlock} />
-    {:else if block.type === 'image'}
-      <ImageBlock block={block as SlackImageBlock} {onImagePreview} />
-    {:else if block.type === 'header'}
-      <HeaderBlock block={block as SlackHeaderBlock} />
-    {:else if block.type === 'rich_text'}
-      <RichTextBlock block={block as SlackRichTextBlock} />
-    {:else if block.type === 'table'}
-      <TableBlock block={block as SlackTableBlock} />
-    {:else if block.type === 'context_actions'}
-      <ContextActionsBlock
-        block={block as SlackContextActionsBlock}
-        {onAction}
-      />
-    {:else}
-      <!-- Unknown block type -->
-      {@const unknownBlock = block as { type: string }}
-      <div class="text-xs text-slack-text-muted italic">
-        Unknown block type: {unknownBlock.type}
-      </div>
-    {/if}
+    <div
+      class="p-block_kit_renderer__block_wrapper"
+      class:p-block_kit_renderer__block_wrapper--first={index === 0}
+    >
+      {#if block.type === 'section'}
+        <SectionBlock block={block as SlackSectionBlock} {onAction} />
+      {:else if block.type === 'input'}
+        <InputBlock
+          block={block as SlackInputBlock}
+          blockId={getBlockId(block, index)}
+          {values}
+          {fileValues}
+          {onInputChange}
+          {onFileChange}
+          {onCheckboxChange}
+          {onRadioChange}
+        />
+      {:else if block.type === 'actions'}
+        <ActionsBlock block={block as SlackActionsBlock} {onAction} />
+      {:else if block.type === 'divider'}
+        <DividerBlock />
+      {:else if block.type === 'context'}
+        <ContextBlock block={block as SlackContextBlock} />
+      {:else if block.type === 'image'}
+        <ImageBlock block={block as SlackImageBlock} {onImagePreview} />
+      {:else if block.type === 'header'}
+        <HeaderBlock block={block as SlackHeaderBlock} />
+      {:else if block.type === 'rich_text'}
+        <RichTextBlock block={block as SlackRichTextBlock} />
+      {:else if block.type === 'table'}
+        <TableBlock block={block as SlackTableBlock} />
+      {:else if block.type === 'context_actions'}
+        <ContextActionsBlock
+          block={block as SlackContextActionsBlock}
+          {onAction}
+        />
+      {:else}
+        <!-- Unknown block type -->
+        {@const unknownBlock = block as { type: string }}
+        <div class="text-xs text-slack-text-muted italic">
+          Unknown block type: {unknownBlock.type}
+        </div>
+      {/if}
+    </div>
   {/each}
 </div>
+
+<style>
+  .p-block_kit_renderer {
+    display: flex;
+    flex-direction: column;
+  }
+</style>
diff --git a/apps/ui/src/components/blockkit/blocks/ActionsBlock.svelte b/apps/ui/src/components/blockkit/blocks/ActionsBlock.svelte
index 4cb7380..57889b2 100644
--- a/apps/ui/src/components/blockkit/blocks/ActionsBlock.svelte
+++ b/apps/ui/src/components/blockkit/blocks/ActionsBlock.svelte
@@ -29,74 +29,87 @@
   let { block, onAction }: Props = $props()
 </script>
 
-<div class="flex flex-wrap gap-2 items-start max-w-[620px]">
-  {#each block.elements as element, i (i)}
-    {#if element.type === 'button'}
-      <Button element={element as SlackButtonElement} onClick={onAction} />
-    {:else if element.type === 'static_select'}
-      {@const sel = element as SlackStaticSelectElement}
-      <StaticSelect
-        element={sel}
-        compact
-        onChange={(value) => onAction?.(sel.action_id, value)}
-      />
-    {:else if element.type === 'users_select' || element.type === 'conversations_select' || element.type === 'channels_select' || element.type === 'external_select' || element.type === 'multi_users_select' || element.type === 'multi_conversations_select' || element.type === 'multi_channels_select' || element.type === 'multi_external_select'}
-      {@const ws = element as SlackWorkspaceSelectElement}
-      <WorkspaceSelect
-        placeholder={ws.placeholder}
-        compact
-        onChange={(value) => onAction?.(ws.action_id, value)}
-      />
-    {:else if element.type === 'overflow'}
-      {@const ovf = element as SlackOverflowElement}
-      <OverflowMenu
-        element={ovf}
-        onSelect={(option) => onAction?.(ovf.action_id, option.value)}
-      />
-    {:else if element.type === 'radio_buttons'}
-      {@const radio = element as SlackRadioButtonsElement}
-      <div class="w-full pt-2">
-        <RadioButtonGroup
-          element={radio}
-          onChange={(option) => onAction?.(radio.action_id, option.value)}
-        />
+<div class="p-actions_block">
+  <div class="p-actions_block_elements">
+    {#each block.elements as element, i (i)}
+      <div class="p-actions_block__action">
+        {#if element.type === 'button'}
+          <Button element={element as SlackButtonElement} onClick={onAction} />
+        {:else if element.type === 'static_select'}
+          {@const sel = element as SlackStaticSelectElement}
+          <StaticSelect
+            element={sel}
+            compact
+            onChange={(value) => onAction?.(sel.action_id, value)}
+          />
+        {:else if element.type === 'users_select' || element.type === 'conversations_select' || element.type === 'channels_select' || element.type === 'external_select' || element.type === 'multi_users_select' || element.type === 'multi_conversations_select' || element.type === 'multi_channels_select' || element.type === 'multi_external_select'}
+          {@const ws = element as SlackWorkspaceSelectElement}
+          <WorkspaceSelect
+            placeholder={ws.placeholder}
+            compact
+            onChange={(value) => onAction?.(ws.action_id, value)}
+          />
+        {:else if element.type === 'overflow'}
+          {@const ovf = element as SlackOverflowElement}
+          <OverflowMenu
+            element={ovf}
+            onSelect={(option) => onAction?.(ovf.action_id, option.value)}
+          />
+        {:else if element.type === 'radio_buttons'}
+          {@const radio = element as SlackRadioButtonsElement}
+          <RadioButtonGroup
+            element={radio}
+            onChange={(option) => onAction?.(radio.action_id, option.value)}
+          />
+        {:else if element.type === 'checkboxes'}
+          {@const cb = element as SlackCheckboxesElement}
+          <Checkboxes
+            element={cb}
+            selectedOptions={undefined}
+            onChange={(options) =>
+              onAction?.(
+                cb.action_id,
+                JSON.stringify(
+                  options.map((o) => ({ text: o.text, value: o.value }))
+                )
+              )}
+          />
+        {:else if element.type === 'datepicker'}
+          {@const dp = element as SlackDatePickerElement}
+          <DatePicker
+            element={dp}
+            compact
+            onChange={(val) => onAction?.(dp.action_id, val)}
+          />
+        {:else if element.type === 'timepicker'}
+          {@const tp = element as SlackTimePickerElement}
+          <TimePicker
+            element={tp}
+            compact
+            onChange={(val) => onAction?.(tp.action_id, val)}
+          />
+        {:else if element.type === 'datetimepicker'}
+          {@const dtp = element as SlackDateTimePickerElement}
+          <DateTimePicker
+            element={dtp}
+            compact
+            onChange={(val) => onAction?.(dtp.action_id, val)}
+          />
+        {/if}
       </div>
-    {:else if element.type === 'checkboxes'}
-      {@const cb = element as SlackCheckboxesElement}
-      <div class="w-full pt-2">
-        <Checkboxes
-          element={cb}
-          selectedOptions={undefined}
-          onChange={(options) =>
-            onAction?.(
-              cb.action_id,
-              JSON.stringify(
-                options.map((o) => ({ text: o.text, value: o.value }))
-              )
-            )}
-        />
-      </div>
-    {:else if element.type === 'datepicker'}
-      {@const dp = element as SlackDatePickerElement}
-      <DatePicker
-        element={dp}
-        compact
-        onChange={(val) => onAction?.(dp.action_id, val)}
-      />
-    {:else if element.type === 'timepicker'}
-      {@const tp = element as SlackTimePickerElement}
-      <TimePicker
-        element={tp}
-        compact
-        onChange={(val) => onAction?.(tp.action_id, val)}
-      />
-    {:else if element.type === 'datetimepicker'}
-      {@const dtp = element as SlackDateTimePickerElement}
-      <DateTimePicker
-        element={dtp}
-        compact
-        onChange={(val) => onAction?.(dtp.action_id, val)}
-      />
-    {/if}
-  {/each}
+    {/each}
+  </div>
 </div>
+
+<style>
+  .p-actions_block_elements {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    max-width: 620px;
+  }
+
+  .p-actions_block__action {
+    margin: 8px 8px 0 0;
+  }
+</style>
diff --git a/apps/ui/src/components/blockkit/blocks/ContextActionsBlock.svelte b/apps/ui/src/components/blockkit/blocks/ContextActionsBlock.svelte
index f3a3938..8d6ecec 100644
--- a/apps/ui/src/components/blockkit/blocks/ContextActionsBlock.svelte
+++ b/apps/ui/src/components/blockkit/blocks/ContextActionsBlock.svelte
@@ -18,7 +18,7 @@
   }
 </script>
 
-<div class="flex items-center gap-1 my-1">
+<div class="p-context_actions">
   {#each block.elements as element, i (i)}
     {#if element.type === 'feedback_buttons'}
       {@const fb = element as SlackFeedbackButtonsElement}
@@ -58,6 +58,13 @@
 </div>
 
 <style>
+  .p-context_actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin: 4px 0;
+  }
+
   .context-action-btn {
     display: inline-flex;
     align-items: center;
diff --git a/apps/ui/src/components/blockkit/blocks/RichTextBlock.svelte b/apps/ui/src/components/blockkit/blocks/RichTextBlock.svelte
index 6be0de8..bc5f310 100644
--- a/apps/ui/src/components/blockkit/blocks/RichTextBlock.svelte
+++ b/apps/ui/src/components/blockkit/blocks/RichTextBlock.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import DOMPurify from 'dompurify'
-  import { resolveEmoji } from '@botarium/mrkdwn'
+  import { resolveEmoji, renderEmoji } from '@botarium/mrkdwn'
   import type {
     RichTextBlockElement,
     RichTextInlineElement,
@@ -28,12 +28,25 @@
       'li',
       'ol',
       'pre',
+      's',
       'span',
       'strong',
       'u',
       'ul',
     ],
-    ALLOWED_ATTR: ['href', 'target', 'class', 'style', 'rel'],
+    ALLOWED_ATTR: [
+      'href',
+      'target',
+      'class',
+      'style',
+      'rel',
+      'type',
+      'data-stringify-type',
+      'data-stringify-emoji',
+      'data-indent',
+      'aria-label',
+      'aria-hidden',
+    ],
   }
 
   function escapeHtml(text: string): string {
@@ -50,14 +63,26 @@
     if (style.code) {
       result = `<code class="s-code">${result}</code>`
     }
-    if (style.bold) result = `<strong>${result}</strong>`
+    if (style.bold) result = `<b>${result}</b>`
     if (style.italic) result = `<em>${result}</em>`
-    if (style.strike) result = `<del>${result}</del>`
+    if (style.strike) result = `<s>${result}</s>`
     if (style.underline) result = `<u>${result}</u>`
     return result
   }
 
-  function renderInlineElement(el: RichTextInlineElement): string {
+  function isEmojiOnly(elements: RichTextInlineElement[]): boolean {
+    return (
+      elements.some((e) => e.type === 'emoji') &&
+      elements.every(
+        (e) => e.type === 'emoji' || (e.type === 'text' && /^\s*$/.test(e.text))
+      )
+    )
+  }
+
+  function renderInlineElement(
+    el: RichTextInlineElement,
+    large?: boolean
+  ): string {
     switch (el.type) {
       case 'text': {
         const escaped = escapeHtml(el.text)
@@ -69,9 +94,11 @@
         return applyStyles(inner, el.style)
       }
       case 'emoji': {
+        const rendered = renderEmoji(el.name, { large })
+        if (rendered) return applyStyles(rendered, el.style)
         const unicode = el.unicode
           ? String.fromCodePoint(
-              ...el.unicode.split('-').map((s) => parseInt(s, 16)),
+              ...el.unicode.split('-').map((s) => parseInt(s, 16))
             )
           : undefined
         const emoji = resolveEmoji(el.name) ?? unicode
@@ -95,40 +122,54 @@
     }
   }
 
-  function renderInlineElements(elements: RichTextInlineElement[]): string {
-    return elements.map(renderInlineElement).join('')
+  function renderInlineElements(
+    elements: RichTextInlineElement[],
+    large?: boolean
+  ): string {
+    return elements.map((el) => renderInlineElement(el, large)).join('')
   }
 
+  const MRKDWN_BR =
+    '<span class="c-mrkdwn__br" aria-label="&nbsp;" data-stringify-type="paragraph-break"></span>'
+
   function newlinesToBreaks(html: string): string {
-    return html.replace(/\n+/g, '<span class="rt-br"></span>')
+    return html.replace(/\n+/g, MRKDWN_BR)
   }
 
   function renderBlockElement(el: RichTextBlockElement): string {
     switch (el.type) {
       case 'rich_text_section': {
-        const content = newlinesToBreaks(renderInlineElements(el.elements))
-        return `<div class="rt-section">${content}</div>`
+        const isWhitespaceOnly = el.elements.every(
+          (e) => e.type === 'text' && /^\s*$/.test(e.text)
+        )
+        if (isWhitespaceOnly) return ''
+        const large = isEmojiOnly(el.elements)
+        const content = newlinesToBreaks(
+          renderInlineElements(el.elements, large)
+        )
+        return `<div class="p-rich_text_section">${content}</div>`
       }
       case 'rich_text_preformatted': {
         const content = renderInlineElements(el.elements)
-        return `<pre class="rt-pre">${content}</pre>`
+        return `<pre class="c-mrkdwn__pre" data-stringify-type="pre"><div class="p-rich_text_block--no-overflow">${content}</div></pre>`
       }
       case 'rich_text_quote': {
         const content = newlinesToBreaks(renderInlineElements(el.elements))
-        return `<blockquote class="rt-quote">${content}</blockquote>`
+        return `<blockquote type="cite" class="c-mrkdwn__quote">${content}</blockquote>`
       }
       case 'rich_text_list': {
         const tag = el.style === 'ordered' ? 'ol' : 'ul'
-        const indentStyle = el.indent
-          ? ` style="padding-left: ${el.indent * 24}px"`
-          : ''
+        const listClass =
+          el.style === 'ordered'
+            ? 'p-rich_text_list p-rich_text_list__ordered'
+            : 'p-rich_text_list p-rich_text_list__bullet'
         const items = el.elements
-          .map(
-            (item) =>
-              `<li>${newlinesToBreaks(renderInlineElements(item.elements))}</li>`
-          )
+          .map((item) => {
+            const indentAttr = el.indent ? ` data-indent="${el.indent}"` : ''
+            return `<li${indentAttr}>${newlinesToBreaks(renderInlineElements(item.elements))}</li>`
+          })
           .join('')
-        return `<${tag} class="rt-list"${indentStyle}>${items}</${tag}>`
+        return `<${tag} class="${listClass}">${items}</${tag}>`
       }
       default:
         return ''
@@ -141,17 +182,17 @@
   }
 </script>
 
-<div class="rich-text text-slack-text">
+<div class="p-rich_text_block text-slack-text" dir="auto">
   {@html renderBlock(block)}
 </div>
 
 <style>
-  .rich-text :global(.rt-br) {
+  .p-rich_text_block :global(.c-mrkdwn__br) {
     display: block;
     height: 8px;
   }
 
-  .rich-text :global(.rt-pre) {
+  .p-rich_text_block :global(.c-mrkdwn__pre) {
     background: rgba(0, 0, 0, 0.3);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 4px;
@@ -162,31 +203,80 @@
     margin: 4px 0;
   }
 
-  .rich-text :global(.rt-quote) {
+  .p-rich_text_block :global(.p-rich_text_block--no-overflow) {
+    overflow-x: auto;
+  }
+
+  .p-rich_text_block :global(.c-mrkdwn__quote) {
     border-left: 4px solid rgba(255, 255, 255, 0.25);
     padding-left: 12px;
     color: var(--text-secondary);
     margin: 4px 0;
   }
 
-  .rich-text :global(.rt-list) {
-    padding-left: 24px;
-    margin: 4px 0;
+  .p-rich_text_block :global(.p-rich_text_list) {
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-inline-start: 0;
+    padding-inline-start: 0;
   }
 
-  .rich-text :global(ul.rt-list) {
-    list-style-type: disc;
+  .p-rich_text_block :global(ul.p-rich_text_list__bullet) {
+    list-style-type: none;
   }
 
-  .rich-text :global(ol.rt-list) {
+  .p-rich_text_block :global(ol.p-rich_text_list__ordered) {
     list-style-type: decimal;
   }
 
-  .rich-text :global(.rt-list li) {
-    margin: 0;
+  .p-rich_text_block :global(.p-rich_text_list li) {
+    margin-inline-start: 28px;
+    margin-bottom: 0;
+  }
+
+  .p-rich_text_block :global(.p-rich_text_list li::before) {
+    text-align: center;
+    width: 22px;
+    margin-inline: -28px 6px;
+    display: inline-block;
+    white-space: nowrap;
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  .p-rich_text_block :global(.p-rich_text_list__bullet li::before) {
+    content: '\25CF';
+    font-size: 9px;
+  }
+
+  .p-rich_text_block
+    :global(.p-rich_text_list__bullet li[data-indent='1']::before) {
+    content: '\25CB';
+    font-size: 9px;
+  }
+
+  .p-rich_text_block
+    :global(.p-rich_text_list__bullet li[data-indent='2']::before) {
+    content: '\25A0';
+    font-size: 7px;
+  }
+
+  .p-rich_text_block :global(.p-rich_text_list li[data-indent='1']) {
+    padding-left: 24px;
   }
 
-  .rich-text :global(.s-code) {
+  .p-rich_text_block :global(.p-rich_text_list li[data-indent='2']) {
+    padding-left: 48px;
+  }
+
+  .p-rich_text_block :global(.p-rich_text_list li[data-indent='3']) {
+    padding-left: 72px;
+  }
+
+  .p-rich_text_block :global(.s-code) {
     background: #8881;
     border: 1px solid #8883;
     border-radius: 3px;
@@ -196,19 +286,63 @@
     color: #e6902c;
   }
 
-  .rich-text :global(.s-link) {
+  .p-rich_text_block :global(.s-link) {
     color: #1d9bd1;
     text-decoration: none;
   }
 
-  .rich-text :global(.s-link:hover) {
+  .p-rich_text_block :global(.s-link:hover) {
     text-decoration: underline;
   }
 
-  .rich-text :global(.s-mention) {
+  .p-rich_text_block :global(.s-mention) {
     background: rgba(232, 171, 76, 0.2);
     color: #e8ab4c;
     padding: 0 2px;
     border-radius: 3px;
   }
+
+  .p-rich_text_block :global(.c-emoji) {
+    position: relative;
+    cursor: default;
+    font-size: 22px;
+    line-height: 22px;
+    vertical-align: text-bottom;
+  }
+
+  .p-rich_text_block :global(.c-emoji__large) {
+    font-size: 32px;
+    line-height: 32px;
+  }
+
+  .p-rich_text_block :global(.c-emoji__tooltip) {
+    display: none;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #1d1c1d;
+    border-radius: 6px;
+    padding: 4px 8px;
+    white-space: nowrap;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    z-index: 10;
+    pointer-events: none;
+  }
+
+  .p-rich_text_block :global(.c-emoji:hover .c-emoji__tooltip) {
+    display: flex;
+  }
+
+  .p-rich_text_block :global(.c-emoji__tooltip-big) {
+    font-size: 64px;
+    line-height: 1.2;
+  }
+
+  .p-rich_text_block :global(.c-emoji__tooltip-code) {
+    font-size: 11px;
+    color: #ababad;
+  }
 </style>
diff --git a/apps/ui/src/components/blockkit/elements/Button.svelte b/apps/ui/src/components/blockkit/elements/Button.svelte
index eb8745f..7bdefd1 100644
--- a/apps/ui/src/components/blockkit/elements/Button.svelte
+++ b/apps/ui/src/components/blockkit/elements/Button.svelte
@@ -36,12 +36,11 @@
 
 <button
   type="button"
-  class="h-8 px-3 rounded text-sm font-medium transition-colors cursor-pointer
-    {element.style === 'primary'
-    ? 'bg-slack-accent text-white hover:bg-slack-accent-hover'
+  class="c-button {element.style === 'primary'
+    ? 'c-button--primary'
     : element.style === 'danger'
-      ? 'bg-red-600 text-white hover:bg-red-700'
-      : 'bg-white/10 text-slack-text hover:bg-white/20'}"
+      ? 'c-button--danger'
+      : 'c-button--outline'}"
   onclick={handleClick}
 >
   {renderText(element.text)}
@@ -54,3 +53,43 @@
     onDeny={handleDeny}
   />
 {/if}
+
+<style>
+  .c-button {
+    height: 32px;
+    padding: 0 12px;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.15s;
+    border: none;
+  }
+
+  .c-button--outline {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--color-slack-text, #d1d2d3);
+  }
+
+  .c-button--outline:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  .c-button--primary {
+    background: var(--color-slack-accent, #007a5a);
+    color: white;
+  }
+
+  .c-button--primary:hover {
+    background: var(--color-slack-accent-hover, #148567);
+  }
+
+  .c-button--danger {
+    background: #dc2626;
+    color: white;
+  }
+
+  .c-button--danger:hover {
+    background: #b91c1c;
+  }
+</style>
diff --git a/apps/ui/src/components/blockkit/elements/StaticSelect.svelte b/apps/ui/src/components/blockkit/elements/StaticSelect.svelte
index ef8d22e..15211d0 100644
--- a/apps/ui/src/components/blockkit/elements/StaticSelect.svelte
+++ b/apps/ui/src/components/blockkit/elements/StaticSelect.svelte
@@ -49,10 +49,8 @@
 </script>
 
 <select
-  class="appearance-none bg-slack-input border border-white/20 rounded-lg text-slack-text focus:border-white/40 focus:outline-none
-    bg-[url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23ababad%22%3E%3Cpath%20d%3D%22M4.5%206l3.5%203.5L11.5%206%22%20stroke%3D%22%23ababad%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E')]
-    bg-size-[16px] bg-position-[right_8px_center] bg-no-repeat w-[190px] h-8 pl-3 pr-8
-    {compact ? 'text-sm' : ''}"
+  class="c-select_input"
+  class:c-select_input--compact={compact}
   value={selectedValue}
   onchange={(e) => handleChange(e.currentTarget.value)}
   bind:this={selectRef}
@@ -72,3 +70,30 @@
     onDeny={handleDeny}
   />
 {/if}
+
+<style>
+  .c-select_input {
+    appearance: none;
+    background-color: var(--color-slack-input, #222529);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    color: var(--color-slack-text, #d1d2d3);
+    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23ababad%22%3E%3Cpath%20d%3D%22M4.5%206l3.5%203.5L11.5%206%22%20stroke%3D%22%23ababad%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E');
+    background-size: 16px;
+    background-position: right 8px center;
+    background-repeat: no-repeat;
+    width: 190px;
+    height: 32px;
+    padding-left: 12px;
+    padding-right: 32px;
+  }
+
+  .c-select_input:focus {
+    border-color: rgba(255, 255, 255, 0.4);
+    outline: none;
+  }
+
+  .c-select_input--compact {
+    font-size: 14px;
+  }
+</style>
diff --git a/apps/ui/src/components/blockkit/elements/WorkspaceSelect.svelte b/apps/ui/src/components/blockkit/elements/WorkspaceSelect.svelte
index 3a9d6be..f70e466 100644
--- a/apps/ui/src/components/blockkit/elements/WorkspaceSelect.svelte
+++ b/apps/ui/src/components/blockkit/elements/WorkspaceSelect.svelte
@@ -9,16 +9,46 @@
     onChange?: (value: string) => void
   }
 
-  let { placeholder, compact = false, onChange }: Props = $props()
+  let { placeholder, compact = false, onChange: _onChange }: Props = $props()
 </script>
 
 <div
-  class="appearance-none bg-slack-input border border-white/20 rounded-lg text-slack-text-muted cursor-default select-none flex items-center
-    bg-[url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23ababad%22%3E%3Cpath%20d%3D%22M4.5%206l3.5%203.5L11.5%206%22%20stroke%3D%22%23ababad%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E')]
-    bg-size-[16px] bg-position-[right_8px_center] bg-no-repeat h-8 w-[190px] pl-3 pr-8
-    {compact && 'text-sm'}"
+  class="c-select_input__wrapper c-select_input--small"
+  class:c-select_input--compact={compact}
 >
   {#if placeholder}
-    <span class="truncate">{renderText(placeholder)}</span>
+    <span class="c-select_input__label">{renderText(placeholder)}</span>
   {/if}
 </div>
+
+<style>
+  .c-select_input__wrapper {
+    appearance: none;
+    background-color: var(--color-slack-input, #222529);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    color: var(--color-slack-text-muted, #ababad);
+    cursor: default;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23ababad%22%3E%3Cpath%20d%3D%22M4.5%206l3.5%203.5L11.5%206%22%20stroke%3D%22%23ababad%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E');
+    background-size: 16px;
+    background-position: right 8px center;
+    background-repeat: no-repeat;
+    height: 32px;
+    width: 190px;
+    padding-left: 12px;
+    padding-right: 32px;
+  }
+
+  .c-select_input--compact {
+    font-size: 14px;
+  }
+
+  .c-select_input__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>
diff --git a/packages/mrkdwn/src/emoji.ts b/packages/mrkdwn/src/emoji.ts
index 8229460..3257480 100644
--- a/packages/mrkdwn/src/emoji.ts
+++ b/packages/mrkdwn/src/emoji.ts
@@ -21,10 +21,16 @@ export function resolveEmoji(name: string): string | undefined {
 
 /**
  * Render an emoji shortcode to an HTML span with tooltip.
+ * Uses Slack's `c-emoji` class naming convention.
+ * Pass `large: true` for emoji-only sections (no surrounding text).
  * Returns null if the emoji name is not recognized.
  */
-export function renderEmoji(name: string): string | null {
+export function renderEmoji(
+  name: string,
+  options?: { large?: boolean }
+): string | null {
   const emoji = resolveEmoji(name)
   if (!emoji) return null
-  return `<span class="s-emoji">${emoji}<span class="s-emoji-tip"><span class="s-emoji-big">${emoji}</span><span class="s-emoji-code">:${name}:</span></span></span>`
+  const cls = options?.large ? 'c-emoji c-emoji__large' : 'c-emoji'
+  return `<span class="${cls}" data-stringify-type="emoji" aria-label=":${name}:">${emoji}<span class="c-emoji__tooltip"><span class="c-emoji__tooltip-big">${emoji}</span><span class="c-emoji__tooltip-code">:${name}:</span></span></span>`
 }
diff --git a/packages/mrkdwn/src/index.ts b/packages/mrkdwn/src/index.ts
index b2b9ba0..da5d2cc 100644
--- a/packages/mrkdwn/src/index.ts
+++ b/packages/mrkdwn/src/index.ts
@@ -1,4 +1,4 @@
 export { mrkdwnToHtml } from './mrkdwn-to-html'
 export { markdownToMrkdwn } from './markdown-to-mrkdwn'
-export { resolveEmoji } from './emoji'
+export { resolveEmoji, renderEmoji } from './emoji'
 export { nameToEmoji } from 'gemoji'
diff --git a/packages/mrkdwn/src/mrkdwn-to-html.test.ts b/packages/mrkdwn/src/mrkdwn-to-html.test.ts
index fdd0994..b77bd8e 100644
--- a/packages/mrkdwn/src/mrkdwn-to-html.test.ts
+++ b/packages/mrkdwn/src/mrkdwn-to-html.test.ts
@@ -148,13 +148,13 @@ describe('mrkdwnToHtml', () => {
 
   it('renders emoji shortcodes', () => {
     expect(mrkdwnToHtml(':thinking_face:')).toBe(
-      '<span class="s-emoji">\u{1F914}<span class="s-emoji-tip"><span class="s-emoji-big">\u{1F914}</span><span class="s-emoji-code">:thinking_face:</span></span></span>'
+      '<span class="c-emoji" data-stringify-type="emoji" aria-label=":thinking_face:">\u{1F914}<span class="c-emoji__tooltip"><span class="c-emoji__tooltip-big">\u{1F914}</span><span class="c-emoji__tooltip-code">:thinking_face:</span></span></span>'
     )
     expect(mrkdwnToHtml(':white_check_mark:')).toBe(
-      '<span class="s-emoji">\u2705<span class="s-emoji-tip"><span class="s-emoji-big">\u2705</span><span class="s-emoji-code">:white_check_mark:</span></span></span>'
+      '<span class="c-emoji" data-stringify-type="emoji" aria-label=":white_check_mark:">\u2705<span class="c-emoji__tooltip"><span class="c-emoji__tooltip-big">\u2705</span><span class="c-emoji__tooltip-code">:white_check_mark:</span></span></span>'
     )
     expect(mrkdwnToHtml(':rocket:')).toBe(
-      '<span class="s-emoji">\u{1F680}<span class="s-emoji-tip"><span class="s-emoji-big">\u{1F680}</span><span class="s-emoji-code">:rocket:</span></span></span>'
+      '<span class="c-emoji" data-stringify-type="emoji" aria-label=":rocket:">\u{1F680}<span class="c-emoji__tooltip"><span class="c-emoji__tooltip-big">\u{1F680}</span><span class="c-emoji__tooltip-code">:rocket:</span></span></span>'
     )
   })
 

From 7ca10481d482b32b962e014daf32f4aceeda3086 Mon Sep 17 00:00:00 2001
From: Tyom Semonov <inspiro@gmail.com>
Date: Sat, 21 Feb 2026 14:38:31 +0000
Subject: [PATCH 3/5] fix: resolve emoji shortcodes in plain_text Block Kit
 fields

Slack resolves :emoji: shortcodes in all text fields including
plain_text. renderText() was returning raw text without resolution,
causing shortcodes like :newspaper: to appear as literal text in
headers, buttons, labels, and other plain_text contexts.
Also bump header block text size from lg to xl.
---
 apps/ui/src/components/blockkit/blocks/HeaderBlock.svelte | 2 +-
 apps/ui/src/components/blockkit/context.ts                | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/ui/src/components/blockkit/blocks/HeaderBlock.svelte b/apps/ui/src/components/blockkit/blocks/HeaderBlock.svelte
index 77f1435..32d2a4a 100644
--- a/apps/ui/src/components/blockkit/blocks/HeaderBlock.svelte
+++ b/apps/ui/src/components/blockkit/blocks/HeaderBlock.svelte
@@ -9,6 +9,6 @@
   let { block }: Props = $props()
 </script>
 
-<h2 class="text-lg font-semibold text-slack-text">
+<h2 class="text-xl font-semibold text-slack-text">
   {renderText(block.text)}
 </h2>
diff --git a/apps/ui/src/components/blockkit/context.ts b/apps/ui/src/components/blockkit/context.ts
index ab58bc9..62e11d4 100644
--- a/apps/ui/src/components/blockkit/context.ts
+++ b/apps/ui/src/components/blockkit/context.ts
@@ -1,4 +1,4 @@
-import { mrkdwnToHtml } from '@botarium/mrkdwn'
+import { mrkdwnToHtml, resolveEmoji } from '@botarium/mrkdwn'
 import DOMPurify from 'dompurify'
 import type {
   SlackViewTextObject,
@@ -35,7 +35,9 @@ const SANITIZE_CONFIG = {
  */
 export function renderText(textObj: SlackViewTextObject | undefined): string {
   if (!textObj) return ''
-  return textObj.text
+  return textObj.text.replace(/:([a-z0-9_+-]+):/g, (_match, name: string) => {
+    return resolveEmoji(name) ?? `:${name}:`
+  })
 }
 
 /**

From d681f03c7efd7127c1ccac85a99fbfbf6851c5b7 Mon Sep 17 00:00:00 2001
From: Tyom Semonov <inspiro@gmail.com>
Date: Sat, 21 Feb 2026 14:59:11 +0000
Subject: [PATCH 4/5] fix: remove unused class modifier and dead onChange prop
 in Block Kit

Remove unstyled `--first` modifier from BlockKitRenderer and unused
`onChange` prop from WorkspaceSelect (display-only stub).
---
 apps/ui/src/components/blockkit/BlockKitRenderer.svelte     | 5 +----
 apps/ui/src/components/blockkit/blocks/ActionsBlock.svelte  | 6 +-----
 apps/ui/src/components/blockkit/blocks/InputBlock.svelte    | 5 +----
 apps/ui/src/components/blockkit/blocks/SectionBlock.svelte  | 6 +-----
 .../src/components/blockkit/elements/WorkspaceSelect.svelte | 3 +--
 5 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/apps/ui/src/components/blockkit/BlockKitRenderer.svelte b/apps/ui/src/components/blockkit/BlockKitRenderer.svelte
index 562edbc..77d6696 100644
--- a/apps/ui/src/components/blockkit/BlockKitRenderer.svelte
+++ b/apps/ui/src/components/blockkit/BlockKitRenderer.svelte
@@ -70,10 +70,7 @@
 
 <div class="p-block_kit_renderer">
   {#each blocks as block, index (getBlockId(block, index))}
-    <div
-      class="p-block_kit_renderer__block_wrapper"
-      class:p-block_kit_renderer__block_wrapper--first={index === 0}
-    >
+    <div class="p-block_kit_renderer__block_wrapper">
       {#if block.type === 'section'}
         <SectionBlock block={block as SlackSectionBlock} {onAction} />
       {:else if block.type === 'input'}
diff --git a/apps/ui/src/components/blockkit/blocks/ActionsBlock.svelte b/apps/ui/src/components/blockkit/blocks/ActionsBlock.svelte
index 57889b2..c13d146 100644
--- a/apps/ui/src/components/blockkit/blocks/ActionsBlock.svelte
+++ b/apps/ui/src/components/blockkit/blocks/ActionsBlock.svelte
@@ -44,11 +44,7 @@
           />
         {:else if element.type === 'users_select' || element.type === 'conversations_select' || element.type === 'channels_select' || element.type === 'external_select' || element.type === 'multi_users_select' || element.type === 'multi_conversations_select' || element.type === 'multi_channels_select' || element.type === 'multi_external_select'}
           {@const ws = element as SlackWorkspaceSelectElement}
-          <WorkspaceSelect
-            placeholder={ws.placeholder}
-            compact
-            onChange={(value) => onAction?.(ws.action_id, value)}
-          />
+          <WorkspaceSelect placeholder={ws.placeholder} compact />
         {:else if element.type === 'overflow'}
           {@const ovf = element as SlackOverflowElement}
           <OverflowMenu
diff --git a/apps/ui/src/components/blockkit/blocks/InputBlock.svelte b/apps/ui/src/components/blockkit/blocks/InputBlock.svelte
index 55b719b..14b9afa 100644
--- a/apps/ui/src/components/blockkit/blocks/InputBlock.svelte
+++ b/apps/ui/src/components/blockkit/blocks/InputBlock.svelte
@@ -173,10 +173,7 @@
     />
   {:else if block.element.type === 'users_select' || block.element.type === 'conversations_select' || block.element.type === 'channels_select' || block.element.type === 'external_select' || block.element.type === 'multi_users_select' || block.element.type === 'multi_conversations_select' || block.element.type === 'multi_channels_select' || block.element.type === 'multi_external_select'}
     {@const ws = block.element as SlackWorkspaceSelectElement}
-    <WorkspaceSelect
-      placeholder={ws.placeholder}
-      onChange={(value) => onInputChange?.(blockId, ws.action_id, value)}
-    />
+    <WorkspaceSelect placeholder={ws.placeholder} />
   {/if}
 
   {#if block.hint}
diff --git a/apps/ui/src/components/blockkit/blocks/SectionBlock.svelte b/apps/ui/src/components/blockkit/blocks/SectionBlock.svelte
index 5c8f2a6..fe85b33 100644
--- a/apps/ui/src/components/blockkit/blocks/SectionBlock.svelte
+++ b/apps/ui/src/components/blockkit/blocks/SectionBlock.svelte
@@ -98,11 +98,7 @@
     {:else if block.accessory.type === 'users_select' || block.accessory.type === 'conversations_select' || block.accessory.type === 'channels_select' || block.accessory.type === 'external_select' || block.accessory.type === 'multi_users_select' || block.accessory.type === 'multi_conversations_select' || block.accessory.type === 'multi_channels_select' || block.accessory.type === 'multi_external_select'}
       {@const ws = block.accessory as SlackWorkspaceSelectElement}
       <div class="shrink-0">
-        <WorkspaceSelect
-          placeholder={ws.placeholder}
-          compact
-          onChange={(value) => onAction?.(ws.action_id, value)}
-        />
+        <WorkspaceSelect placeholder={ws.placeholder} compact />
       </div>
     {:else if block.accessory.type === 'image'}
       <ImageElement
diff --git a/apps/ui/src/components/blockkit/elements/WorkspaceSelect.svelte b/apps/ui/src/components/blockkit/elements/WorkspaceSelect.svelte
index f70e466..907124d 100644
--- a/apps/ui/src/components/blockkit/elements/WorkspaceSelect.svelte
+++ b/apps/ui/src/components/blockkit/elements/WorkspaceSelect.svelte
@@ -6,10 +6,9 @@
     placeholder?: SlackViewTextObject
     /** Smaller styling for actions block vs input block */
     compact?: boolean
-    onChange?: (value: string) => void
   }
 
-  let { placeholder, compact = false, onChange: _onChange }: Props = $props()
+  let { placeholder, compact = false }: Props = $props()
 </script>
 
 <div

From cc8727ff937986d65a47319bebe94ca77975a355 Mon Sep 17 00:00:00 2001
From: Tyom Semonov <inspiro@gmail.com>
Date: Sat, 21 Feb 2026 16:47:08 +0000
Subject: [PATCH 5/5] fix: escape emoji name in HTML output and use camelCase
 for local constant

---
 apps/ui/src/components/blockkit/blocks/RichTextBlock.svelte | 4 ++--
 packages/mrkdwn/src/emoji.ts                                | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/ui/src/components/blockkit/blocks/RichTextBlock.svelte b/apps/ui/src/components/blockkit/blocks/RichTextBlock.svelte
index bc5f310..bb2abee 100644
--- a/apps/ui/src/components/blockkit/blocks/RichTextBlock.svelte
+++ b/apps/ui/src/components/blockkit/blocks/RichTextBlock.svelte
@@ -129,11 +129,11 @@
     return elements.map((el) => renderInlineElement(el, large)).join('')
   }
 
-  const MRKDWN_BR =
+  const mrkdwnBr =
     '<span class="c-mrkdwn__br" aria-label="&nbsp;" data-stringify-type="paragraph-break"></span>'
 
   function newlinesToBreaks(html: string): string {
-    return html.replace(/\n+/g, MRKDWN_BR)
+    return html.replace(/\n+/g, mrkdwnBr)
   }
 
   function renderBlockElement(el: RichTextBlockElement): string {
diff --git a/packages/mrkdwn/src/emoji.ts b/packages/mrkdwn/src/emoji.ts
index 3257480..01c8d05 100644
--- a/packages/mrkdwn/src/emoji.ts
+++ b/packages/mrkdwn/src/emoji.ts
@@ -1,4 +1,5 @@
 import { nameToEmoji } from 'gemoji'
+import { escapeHtml } from './utils.ts'
 
 /** Slack shortcodes that differ from gemoji's naming */
 const SLACK_ALIASES: Record<string, string> = {
@@ -31,6 +32,7 @@ export function renderEmoji(
 ): string | null {
   const emoji = resolveEmoji(name)
   if (!emoji) return null
+  const escapedName = escapeHtml(name)
   const cls = options?.large ? 'c-emoji c-emoji__large' : 'c-emoji'
-  return `<span class="${cls}" data-stringify-type="emoji" aria-label=":${name}:">${emoji}<span class="c-emoji__tooltip"><span class="c-emoji__tooltip-big">${emoji}</span><span class="c-emoji__tooltip-code">:${name}:</span></span></span>`
+  return `<span class="${cls}" data-stringify-type="emoji" aria-label=":${escapedName}:">${emoji}<span class="c-emoji__tooltip"><span class="c-emoji__tooltip-big">${emoji}</span><span class="c-emoji__tooltip-code">:${escapedName}:</span></span></span>`
 }