kempo-ui 0.4.4 → 0.4.6

package/docs-src/components/voice-selector.page.html

@@ -0,0 +1,125 @@
+<page pageName="Voice Selector" title="Voice Selector - Components - Kempo Docs - A Web Components Solution">
+  <content>
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+      <div class="m pl">
+        <h6>Examples</h6>
+        <a href="#basicUsage">Basic Usage</a><br />
+        <a href="#languageFilter">Language Filter</a><br />
+        <a href="#withTextToSpeech">With TextToSpeech</a><br />
+        <a href="#disabled">Disabled</a><br />
+
+        <h6 class="mt"><a href="#jsRef" class="no-link">JavaScript Reference</a></h6>
+        <a href="#constructor">Constructor</a><br />
+        <a href="#requirements">Requirements</a><br />
+        <a href="#properties">Properties</a><br />
+        <a href="#methods">Methods</a><br />
+        <a href="#events">Events</a><br />
+      </div>
+    </k-accordion-panel>
+    </k-accordion>
+
+    <p>Two cascading <code>&lt;select&gt;</code>s &mdash; the first picks a language, the second lists voices for that language. The chosen voice is persisted via the <a href="../utils/voice.html">voice utility</a>, so every <a href="./text-to-speech.html"><code>&lt;k-text-to-speech&gt;</code></a> on the page (and across reloads) uses it as a default when no <code>voice</code> attribute is set.</p>
+    <p>The language dropdown defaults to the browser's primary language (<code>navigator.language</code>) so a user almost always sees a relevant voice list immediately.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Just drop the element into a settings page or somewhere visible. Voices load asynchronously, so the dropdowns may briefly be empty before the rest populate.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-voice-selector</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-voice-selector</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-voice-selector></k-voice-selector>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="languageFilter"><a href="#languageFilter" class="no-link">Initial Language</a></h3>
+    <p>Set <code>language</code> to override the default browser language. Accepts a primary language code (e.g. <code>"fr"</code>, <code>"es"</code>) or a full BCP&#x2011;47 tag (the primary part is used). The user can still switch via the dropdown afterward.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-voice-selector</span> <span class="hljs-attr">language</span>=<span class="hljs-string">&quot;fr&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-voice-selector</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-voice-selector language="fr"></k-voice-selector>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="withTextToSpeech"><a href="#withTextToSpeech" class="no-link">With TextToSpeech</a></h3>
+    <p>Pick a voice in the dropdown, then click any <code>&lt;k-text-to-speech&gt;</code> on the page that doesn't have its own <code>voice</code> attribute &mdash; it'll use your saved preference. The choice persists across page reloads.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-voice-selector</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-voice-selector</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">k-text-to-speech</span> <span class="hljs-attr">text</span>=<span class="hljs-string">&quot;This will use the voice you picked above&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-text-to-speech</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-voice-selector class="mr"></k-voice-selector>
+          <k-text-to-speech text="This will use the voice you picked above"></k-text-to-speech>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="disabled"><a href="#disabled" class="no-link">Disabled</a></h3>
+    <p>The <code>disabled</code> attribute prevents user interaction. The dropdown also auto-disables when the browser doesn't support the SpeechSynthesis API.</p>
+    <div class="row -mx">
+      <div class="col m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-voice-selector</span> <span class="hljs-attr">disabled</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-voice-selector</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col m-span-12 px">
+        <k-card label="Output">
+          <k-voice-selector disabled></k-voice-selector>
+        </k-card>
+      </div>
+    </div>
+
+    <h2 id="jsRef"><a href="#jsRef" class="no-link">JavaScript Reference</a></h2>
+
+    <h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
+    <h6>Extends <a href="./shadow-component.html">ShadowComponent</a></h6>
+    <h5><code>new VoiceSelector()</code></h5>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="./shadow-component.html">ShadowComponent</a></li>
+      <li>The <a href="../utils/voice.html">voice utility</a></li>
+      <li>A browser with <code>window.speechSynthesis</code></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>language<i>: String</i></code></h5>
+    <p>Optional initial language. If set, overrides the default <code>navigator.language</code> on first render. Accepts a primary language code (<code>"en"</code>, <code>"es"</code>) or a full BCP&#x2011;47 tag (the primary part is used). The user can change the language via the first dropdown afterward. Syncs to <code>language</code> attribute.</p>
+
+    <h5><code>placeholder<i>: String</i></code></h5>
+    <p>Label for the empty-selection option. Default is <code>"Browser default"</code>. Syncs to <code>placeholder</code> attribute.</p>
+
+    <h5><code>disabled<i>: Boolean</i></code></h5>
+    <p>When <code>true</code>, the dropdown cannot be changed. Syncs to <code>disabled</code> attribute.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>refresh()<i>: void</i></code></h5>
+    <p>Force a re-read of <code>speechSynthesis.getVoices()</code>. Rarely needed since the component subscribes to the <code>voiceschanged</code> event, but useful if you populate voices dynamically.</p>
+
+    <h3 id="events"><a href="#events" class="no-link">Events</a></h3>
+    <h5><code>change</code></h5>
+    <p>Fires when the user picks a new voice. <code>detail</code> contains <code>{ voice: String }</code> &mdash; the voice name, or empty string for "browser default". The voice utility is updated automatically; this event is for callers that want to react in addition.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/VoiceSelector.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/TextToSpeech.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Icon.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+  </content>
+</page>

package/docs-src/index.page.html

@@ -59,6 +59,12 @@
           <p class="tc-muted">Container component with optional labels and border styling.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/chat.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Chat</h3>
+          <p class="tc-muted">Chat-room widget with rich-text input, send-on-enter option, and per-message state tracking.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}components/code-editor.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Code Editor</h3>
@@ -119,6 +125,12 @@
           <p class="tc-muted">WYSIWYG editor with formatting tools and dual editing modes.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/markdown-editor.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Markdown Editor</h3>
+          <p class="tc-muted">Markdown editor with Write/Preview tabs, slot-based toolbars, and a tiny safe parser (no inline HTML).</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}components/icon.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Icon</h3>
@@ -263,6 +275,12 @@
           <p class="tc-muted">Hierarchical data visualization with collapsible branches and custom leaf types.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}components/voice-selector.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Voice Selector</h3>
+          <p class="tc-muted">Dropdown of available speech-synthesis voices, persisted via the voice utility for site-wide use.</p>
+        </a>
+      </div>
     </div>
 
     <h2>Base Components</h2>
@@ -325,6 +343,12 @@
           <p class="tc-muted">Type converters for Lit component properties and attributes.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}utils/sanitizeHtml.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">sanitizeHtml</h3>
+          <p class="tc-muted">Whitelist HTML sanitizer for user-submitted rich text. Strips unsafe tags, attributes, and URL schemes.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}utils/string.html" class="card mb no-link d-b">
           <h3 class="tc-primary">string</h3>
@@ -349,6 +373,12 @@
           <p class="tc-muted">Functions for manipulating and analyzing JavaScript objects.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="{{pathToRoot}}utils/voice.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">voice</h3>
+          <p class="tc-muted">Persisted speech-synthesis voice preference with pub/sub, mirroring the theme utility.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="{{pathToRoot}}utils/wait.html" class="card mb no-link d-b">
           <h3 class="tc-primary">wait</h3>

package/docs-src/nav.fragment.html

@@ -51,6 +51,9 @@
             >Calendar<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a
               href="{{pathToRoot}}components/card.html">Card<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="chat message conversation messaging components"><a
+              href="{{pathToRoot}}components/chat.html"
+            >Chat<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="code editor codeeditor monaco components"><a
               href="{{pathToRoot}}components/code-editor.html"
             >Code Editor<br><small>Component</small></a></k-filter-item>
@@ -79,6 +82,9 @@
           <k-filter-item filter-keywords="html editor components"><a
               href="{{pathToRoot}}components/html-editor.html">HTML
               Editor<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="markdown editor markdowneditor write preview marked gfm tables components"><a
+              href="{{pathToRoot}}components/markdown-editor.html"
+            >Markdown Editor<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="icon components"><a
               href="{{pathToRoot}}components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a
@@ -182,6 +188,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="{{pathToRoot}}components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="{{pathToRoot}}components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="{{pathToRoot}}components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -209,12 +218,17 @@
           <k-filter-item filter-keywords="propconverters prop converters utils utility"><a
               href="{{pathToRoot}}utils/propConverters.html"
             >propConverters<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="sanitizehtml sanitize html xss security utils utility"><a
+              href="{{pathToRoot}}utils/sanitizeHtml.html"
+            >sanitizeHtml<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="string utils utility"><a
               href="{{pathToRoot}}utils/string.html">string<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="theme utils utility"><a
               href="{{pathToRoot}}utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="{{pathToRoot}}utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="{{pathToRoot}}utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="{{pathToRoot}}utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -267,6 +281,7 @@
         <a href="{{pathToRoot}}components/aside.html">Aside</a>
         <a href="{{pathToRoot}}components/calendar.html">Calendar</a>
         <a href="{{pathToRoot}}components/card.html">Card</a>
+        <a href="{{pathToRoot}}components/chat.html">Chat</a>
         <a href="{{pathToRoot}}components/code-editor.html">Code Editor</a>
         <a href="{{pathToRoot}}components/combobox.html">Combobox</a>
         <a href="{{pathToRoot}}components/color-picker.html">ColorPicker</a>
@@ -277,6 +292,7 @@
         <a href="{{pathToRoot}}components/filter-list.html">Filter List</a>
         <a href="{{pathToRoot}}components/focus-capture.html">FocusCapture</a>
         <a href="{{pathToRoot}}components/html-editor.html">HTML Editor</a>
+        <a href="{{pathToRoot}}components/markdown-editor.html">Markdown Editor</a>
         <a href="{{pathToRoot}}components/icon.html">Icon</a>
         <a href="{{pathToRoot}}components/import.html">Import</a>
         <a href="{{pathToRoot}}components/nav.html">Nav</a>
@@ -301,6 +317,7 @@
         <a href="{{pathToRoot}}components/toast.html">Toast</a>
         <a href="{{pathToRoot}}components/toggle.html">Toggle</a>
         <a href="{{pathToRoot}}components/tree.html">Tree</a>
+        <a href="{{pathToRoot}}components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -320,9 +337,11 @@
         <a href="{{pathToRoot}}utils/formatTimestamp.html">formatTimestamp</a>
         <a href="{{pathToRoot}}utils/object.html">object</a>
         <a href="{{pathToRoot}}utils/propConverters.html">propConverters</a>
+        <a href="{{pathToRoot}}utils/sanitizeHtml.html">sanitizeHtml</a>
         <a href="{{pathToRoot}}utils/string.html">string</a>
         <a href="{{pathToRoot}}utils/theme.html">theme</a>
         <a href="{{pathToRoot}}utils/type.html">type</a>
+        <a href="{{pathToRoot}}utils/voice.html">voice</a>
         <a href="{{pathToRoot}}utils/wait.html">wait</a>
       </div>
     </menu>

package/docs-src/utils/elevation.page.html

@@ -50,11 +50,11 @@
         <tr><td>0</td><td>0</td><td>Behind the page — sunken or background elements</td></tr>
         <tr><td>1</td><td>10</td><td><em>Buffer zone — reserved for customization</em></td></tr>
         <tr><td>2</td><td>20</td><td>Page default — normal document flow</td></tr>
-        <tr><td>3</td><td>30</td><td>Fixed panels that sit below a navbar (push drawers)</td></tr>
+        <tr><td>3</td><td>30</td><td>Fixed panels that sit below a navbar (push drawers, dropdowns)</td></tr>
         <tr><td>4</td><td>40</td><td><em>Buffer zone — reserved for customization</em></td></tr>
         <tr><td>5</td><td>50</td><td>Fixed navbar (user-defined)</td></tr>
         <tr><td>6</td><td>60</td><td>Overlay drawers — above a fixed navbar</td></tr>
-        <tr><td>7</td><td>70</td><td>Floating menus (dropdowns, popovers)</td></tr>
+        <tr><td>7</td><td>70</td><td><em>Buffer zone — reserved for customization</em></td></tr>
         <tr><td>8</td><td>80</td><td>Full-screen modals and lightboxes</td></tr>
         <tr><td>9</td><td>90</td><td>Notification toasts</td></tr>
         <tr><td>10</td><td>100</td><td><em>Reserved — use only when absolutely necessary</em></td></tr>
@@ -79,7 +79,8 @@
           <td>30</td>
           <td>
             <a href="{{pathToRoot}}components/aside.html">Aside</a> (<code>main="push"</code>),
-            <a href="{{pathToRoot}}components/side-panel.html">Side Panel</a>
+            <a href="{{pathToRoot}}components/side-panel.html">Side Panel</a>,
+            <a href="{{pathToRoot}}components/dropdown.html">Dropdown</a>
           </td>
         </tr>
         <tr>
@@ -89,13 +90,6 @@
             <a href="{{pathToRoot}}components/aside.html">Aside</a> (<code>main="overlay"</code>)
           </td>
         </tr>
-        <tr>
-          <td>7</td>
-          <td>70</td>
-          <td>
-            <a href="{{pathToRoot}}components/dropdown.html">Dropdown</a>
-          </td>
-        </tr>
         <tr>
           <td>8</td>
           <td>80</td>

package/docs-src/utils/sanitizeHtml.page.html

@@ -0,0 +1,73 @@
+<page pageName="sanitizeHtml Utility" title="sanitizeHtml Utility - Kempo UI">
+  <content location="header"></content>
+  <content>
+    <h1>sanitizeHtml Utility</h1>
+
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m">
+          <h6>Usage</h6>
+          <a href="#description">Description</a><br />
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#api">API</a><br />
+          <a href="#defaults">Defaults</a><br />
+          <a href="#customizing">Customizing the Whitelist</a><br />
+          <a href="#serverNote">Server-Side Caveat</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3 id="description"><a href="#description" class="no-link">Description</a></h3>
+    <p>A small whitelist-based HTML sanitizer for user-submitted rich text. Strips <code>&lt;script&gt;</code>, <code>&lt;style&gt;</code>, <code>&lt;iframe&gt;</code>, event-handler attributes, and unsafe URL schemes (<code>javascript:</code>, <code>data:</code>, etc.). Used by <a href="../components/chat.html"><code>&lt;k-chat&gt;</code></a> on every message it accepts, but works as a standalone util for any place you accept HTML from a contenteditable or rich-text editor.</p>
+
+    <div class="callout warning b r p mb">
+      <strong>This is a frontend defense, not a substitute for server sanitization.</strong>
+      Anything you persist or rebroadcast must be sanitized again on the server &mdash; an attacker can submit raw HTTP without ever loading your client code.
+    </div>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> sanitizeHtml <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./utils/sanitizeHtml.js&#x27;</span>;<br><span class="hljs-keyword">const</span> dirty = <span class="hljs-string">&#x27;&lt;p&gt;Hello &lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;&lt;b&gt;world&lt;/b&gt;&lt;/p&gt;&#x27;</span>;<br><span class="hljs-keyword">const</span> clean = <span class="hljs-title function_">sanitizeHtml</span>(dirty);<br><span class="hljs-comment">// → &#x27;&lt;p&gt;Hello &lt;b&gt;world&lt;/b&gt;&lt;/p&gt;&#x27;</span></code></pre>
+
+    <h3 id="api"><a href="#api" class="no-link">API</a></h3>
+
+    <h4><code>sanitizeHtml(html, options?)</code></h4>
+    <h5><code>html<i>: string</i></code></h5>
+    <p>Untrusted HTML to sanitize. <code>null</code>, <code>undefined</code>, and non-strings are coerced to <code>""</code>.</p>
+    <h5><code>options<i>: Object</i></code> (optional)</h5>
+    <ul>
+      <li><code>allowedTags</code> &mdash; <code>Set&lt;string&gt;</code> of UPPERCASE tag names (e.g. <code>"B"</code>, <code>"P"</code>). Overrides the default whitelist.</li>
+      <li><code>allowedAttrs</code> &mdash; <code>Set&lt;string&gt;</code> of attribute names allowed on every tag.</li>
+      <li><code>allowedAttrsPerTag</code> &mdash; <code>{ TAGNAME: Set&lt;string&gt; }</code> map of attributes allowed per specific tag.</li>
+    </ul>
+    <h5>Returns: <code>string</code></h5>
+    <p>The sanitized HTML. Disallowed elements are replaced by their (sanitized) children so user text is preserved; <code>&lt;script&gt;</code>, <code>&lt;style&gt;</code>, and similar are removed entirely (children too).</p>
+
+    <h3 id="defaults"><a href="#defaults" class="no-link">Defaults</a></h3>
+
+    <h5>Allowed tags (default)</h5>
+    <p><code>A</code>, <code>B</code>, <code>STRONG</code>, <code>I</code>, <code>EM</code>, <code>U</code>, <code>S</code>, <code>STRIKE</code>, <code>BR</code>, <code>P</code>, <code>DIV</code>, <code>SPAN</code>, <code>UL</code>, <code>OL</code>, <code>LI</code>, <code>BLOCKQUOTE</code>, <code>CODE</code>, <code>PRE</code>, <code>H1</code>&ndash;<code>H6</code></p>
+
+    <h5>Tags removed completely (children too)</h5>
+    <p><code>SCRIPT</code>, <code>STYLE</code>, <code>IFRAME</code>, <code>OBJECT</code>, <code>EMBED</code>, <code>LINK</code>, <code>META</code>, <code>BASE</code>, <code>FRAME</code>, <code>FRAMESET</code>, <code>NOSCRIPT</code>, <code>SVG</code>, <code>MATH</code></p>
+
+    <h5>Allowed attributes (default)</h5>
+    <ul>
+      <li>Globally: <code>class</code>, plus any <code>data-*</code></li>
+      <li>On <code>&lt;a&gt;</code>: <code>href</code>, <code>title</code>, <code>target</code>, <code>rel</code></li>
+    </ul>
+
+    <h5>URL handling</h5>
+    <p><code>href</code> and <code>src</code> values are checked against a safe-scheme regex; anything that doesn't match <code>http(s):</code>, <code>mailto:</code>, <code>tel:</code>, a relative path, or a fragment is removed. Links with <code>target="_blank"</code> automatically get <code>rel="noopener noreferrer"</code> to prevent reverse-tabnabbing.</p>
+
+    <h3 id="customizing"><a href="#customizing" class="no-link">Customizing the Whitelist</a></h3>
+    <p>Pass an options object to tighten or loosen the defaults:</p>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">const</span> html = <span class="hljs-title function_">sanitizeHtml</span>(userInput, {<br>  <span class="hljs-attr">allowedTags</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>([<span class="hljs-string">&#x27;B&#x27;</span>, <span class="hljs-string">&#x27;I&#x27;</span>, <span class="hljs-string">&#x27;EM&#x27;</span>, <span class="hljs-string">&#x27;STRONG&#x27;</span>, <span class="hljs-string">&#x27;A&#x27;</span>, <span class="hljs-string">&#x27;BR&#x27;</span>, <span class="hljs-string">&#x27;P&#x27;</span>]),<br>  <span class="hljs-attr">allowedAttrsPerTag</span>: {<br>    <span class="hljs-attr">A</span>: <span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>([<span class="hljs-string">&#x27;href&#x27;</span>])<br>  }<br>});</code></pre>
+
+    <h3 id="serverNote"><a href="#serverNote" class="no-link">Server-Side Caveat</a></h3>
+    <p>This util only protects content that flows through your client code. If your app accepts user-submitted HTML and stores or echoes it to other users, the server <strong>must</strong> independently sanitize before storing and again before sending it back. Battle-tested server libraries: <a href="https://github.com/cure53/DOMPurify" target="_blank" rel="noopener noreferrer">DOMPurify</a> (Node), <a href="https://github.com/apostrophecms/sanitize-html" target="_blank" rel="noopener noreferrer">sanitize-html</a> (Node), <a href="https://github.com/mozilla/bleach" target="_blank" rel="noopener noreferrer">Bleach</a> (Python), <a href="https://github.com/rgrove/sanitize" target="_blank" rel="noopener noreferrer">sanitize</a> (Ruby).</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+  </content>
+</page>

package/docs-src/utils/voice.page.html

@@ -0,0 +1,66 @@
+<page pageName="Voice Utility" title="Voice Utility - Kempo UI">
+  <content location="header"></content>
+  <content>
+    <h1>Voice Utility</h1>
+
+    <k-accordion persistent-id="toc" class="b r mb">
+      <k-accordion-header for-panel="toc-panel">Table of Contents</k-accordion-header>
+      <k-accordion-panel name="toc-panel">
+        <div class="m">
+          <h6>Usage</h6>
+          <a href="#basicUsage">Basic Usage</a><br />
+          <a href="#api">API Methods</a><br />
+          <a href="#examples">Examples</a><br />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <h3>Description</h3>
+    <p>The <code>voice</code> utility manages the user's preferred speech-synthesis voice across the site. It mirrors the <a href="./theme.html">theme</a> utility &mdash; persisting to <code>localStorage</code>, syncing across tabs via the <code>storage</code> event, and exposing a pub/sub API. Pair it with <a href="../components/voice-selector.html"><code>&lt;k-voice-selector&gt;</code></a> for a settings UI; <a href="../components/text-to-speech.html"><code>&lt;k-text-to-speech&gt;</code></a> automatically uses the saved preference when no <code>voice</code> attribute is set.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> voice <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./utils/voice.js&#x27;</span>;<br><span class="hljs-comment">// Get current preferred voice (empty string = use browser default)</span><br><span class="hljs-keyword">const</span> current = voice.<span class="hljs-title function_">get</span>();<br><span class="hljs-comment">// Set a preferred voice</span><br>voice.<span class="hljs-title function_">set</span>(<span class="hljs-string">&#x27;Google US English&#x27;</span>);<br><span class="hljs-comment">// Subscribe to changes</span><br><span class="hljs-keyword">const</span> unsubscribe = voice.<span class="hljs-title function_">subscribe</span>(<span class="hljs-function">(<span class="hljs-params">name</span>) =&gt;</span> {<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;Voice preference changed to:&#x27;</span>, name);<br>});<br><span class="hljs-comment">// Enumerate available voices (may need to wait — the list loads async)</span><br><span class="hljs-keyword">const</span> voices = <span class="hljs-keyword">await</span> voice.<span class="hljs-title function_">waitForVoices</span>();</code></pre>
+
+    <h3 id="api"><a href="#api" class="no-link">API Methods</a></h3>
+
+    <h4><code>voice.get()</code></h4>
+    <p>Returns the user's saved voice name. An empty string means "no preference &mdash; use the browser default for the language".</p>
+    <h5>Returns: <code>string</code></h5>
+
+    <h4><code>voice.set(name)</code></h4>
+    <p>Sets the saved voice and persists it to <code>localStorage</code>. Pass an empty string (or a falsy value) to clear the preference.</p>
+    <h5><code>name<i>: string</i></code></h5>
+    <p>The voice <code>name</code> as reported by <code>speechSynthesis.getVoices()</code>, or a comma-separated fallback chain (<code>"Samantha, Google US English"</code>).</p>
+
+    <h4><code>voice.subscribe(callback)</code></h4>
+    <p>Subscribes to preference changes. Fires once immediately with the current value, then on every change (including changes from other tabs).</p>
+    <h5>Returns: <code>Function</code></h5>
+    <p>An unsubscribe function.</p>
+
+    <h4><code>voice.getAvailable()</code></h4>
+    <p>Synchronous shortcut for <code>window.speechSynthesis.getVoices()</code>. May return <code>[]</code> if the browser hasn't populated the list yet.</p>
+    <h5>Returns: <code>SpeechSynthesisVoice[]</code></h5>
+
+    <h4><code>voice.waitForVoices(timeoutMs?)</code></h4>
+    <p>Returns a promise that resolves with the list of available voices, waiting for the browser's <code>voiceschanged</code> event if the list is initially empty.</p>
+    <h5><code>timeoutMs<i>: number</i></code> &mdash; default <code>2000</code></h5>
+    <p>How long to wait before giving up and resolving with whatever the browser has.</p>
+    <h5>Returns: <code>Promise&lt;SpeechSynthesisVoice[]&gt;</code></h5>
+
+    <h4><code>voice.subscribeAvailable(callback)</code></h4>
+    <p>Subscribes to changes in the available voice list (fires on the <code>voiceschanged</code> event). Useful when populating a settings UI.</p>
+    <h5>Returns: <code>Function</code></h5>
+    <p>An unsubscribe function.</p>
+
+    <h3 id="examples"><a href="#examples" class="no-link">Examples</a></h3>
+
+    <h4>Building a Voice Picker by Hand</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> voice <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./utils/voice.js&#x27;</span>;<br><br><span class="hljs-keyword">const</span> $select = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;voice-picker&#x27;</span>);<br><br>voice.<span class="hljs-title function_">subscribeAvailable</span>(<span class="hljs-function">(<span class="hljs-params">voices</span>) =&gt;</span> {<br>  $select.<span class="hljs-property">innerHTML</span> = <span class="hljs-string">&#x27;&lt;option value=&quot;&quot;&gt;Browser default&lt;/option&gt;&#x27;</span>;<br>  <span class="hljs-keyword">for</span>(<span class="hljs-keyword">const</span> v <span class="hljs-keyword">of</span> voices){<br>    <span class="hljs-keyword">const</span> opt = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">&#x27;option&#x27;</span>);<br>    opt.<span class="hljs-property">value</span> = v.<span class="hljs-property">name</span>;<br>    opt.<span class="hljs-property">textContent</span> = <span class="hljs-string">`<span class="hljs-subst">${v.name}</span> (<span class="hljs-subst">${v.lang}</span>)`</span>;<br>    $select.<span class="hljs-title function_">appendChild</span>(opt);<br>  }<br>  $select.<span class="hljs-property">value</span> = voice.<span class="hljs-title function_">get</span>();<br>});<br><br>$select.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;change&#x27;</span>, <span class="hljs-function">() =&gt;</span> voice.<span class="hljs-title function_">set</span>($select.<span class="hljs-property">value</span>));</code></pre>
+
+    <h4>Reading the Preference Without a Component</h4>
+    <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> voice <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./utils/voice.js&#x27;</span>;<br><br><span class="hljs-keyword">const</span> preferred = voice.<span class="hljs-title function_">get</span>();<br><span class="hljs-keyword">if</span>(preferred){<br>  <span class="hljs-built_in">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">`User picked: <span class="hljs-subst">${preferred}</span>`</span>);<br>} <span class="hljs-keyword">else</span> {<br>  <span class="hljs-built_in">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;No preference set — using browser default&#x27;</span>);<br>}</code></pre>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+  </content>
+</page>

package/icons/done_all.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M268-240 42-466l57-56 170 170 56 56-57 56Zm226 0L268-466l56-57 170 170 368-368 56 57-424 424Zm0-226-57-56 198-198 57 56-198 198Z"/></svg>

package/icons/format_quote.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m228-240 92-160q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 42.5T458-480L320-240h-92Zm360 0 92-160q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 23-5.5 42.5T818-480L680-240h-92ZM362.5-517.5Q380-535 380-560t-17.5-42.5Q345-620 320-620t-42.5 17.5Q260-585 260-560t17.5 42.5Q295-500 320-500t42.5-17.5Zm360 0Q740-535 740-560t-17.5-42.5Q705-620 680-620t-42.5 17.5Q620-585 620-560t17.5 42.5Q655-500 680-500t42.5-17.5ZM680-560Zm-360 0Z"/></svg>

package/icons/format_strikethrough.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M80-400v-80h800v80H80Zm340-160v-120H200v-120h560v120H540v120H420Zm0 400v-160h120v160H420Z"/></svg>

package/icons/send.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"/></svg>

package/icons/text_fields.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M280-160v-520H80v-120h520v120H400v520H280Zm360 0v-320H520v-120h360v120H760v320H640Z"/></svg>

package/llms.txt

@@ -56,7 +56,8 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-aside>` `<k-aside-item>` `<k-aside-label>` `<k-aside-menu>` `<k-aside-spacer>` `<k-aside-toggle>` | `Aside.js` | Sidebar/drawer; `main="push"` or `main="overlay"`, `side="left|right"` | [aside.html](https://dustinpoissant.github.io/kempo-ui/components/aside.html) |
 | `<k-calendar>` | `Calendar.js` | Inline month-grid date picker widget; `mode="single"` (default) or `mode="range"`; `value` is ISO `YYYY-MM-DD` (single) or comma-separated pair (range); `min`/`max` bounds; form-associated; fires `change` | [calendar.html](https://dustinpoissant.github.io/kempo-ui/components/calendar.html) |
 | `<k-card>` | `Card.js` | Bordered container; optional `label` attribute | [card.html](https://dustinpoissant.github.io/kempo-ui/components/card.html) |
-| `<k-code-editor>` | `CodeEditor.js` | Monaco-powered code editor; `value`, `language`, `controls` attributes; form-associated; theme-aware | [code-editor.html](https://dustinpoissant.github.io/kempo-ui/components/code-editor.html) |
+| `<k-chat>` | `Chat.js` | Chat-room widget; markdown input via embedded `<k-markdown-editor>` (rendered through `marked` with `breaks:true` so single newlines become `<br>`, then run through `sanitizeHtml` so any inline HTML is filtered against the allow-list); default Enter sends / Shift+Enter newline (Slack-style), add `enter-newline` to invert; `show-status` (or `show-status="text"` / `show-status="icons"`) renders iMessage-style `sending`/`delivered`/`read`/`failed` only on the most recent outgoing message (sending/failed always show); methods `addMessage(msg)`, `updateMessage(id, updates)`, `removeMessage(id)`, `clear()`, `send()`; fires `send` with `{id, html, markdown}` | [chat.html](https://dustinpoissant.github.io/kempo-ui/components/chat.html) |
+| `<k-code-editor>` | `CodeEditor.js` | Monaco-powered code editor; `value`, `language`, `controls`, `disabled`/`readonly`/`required` attributes; form-associated (full validity + reset/restore/disabled callbacks); theme-aware | [code-editor.html](https://dustinpoissant.github.io/kempo-ui/components/code-editor.html) |
 | `<k-color-picker>` | `ColorPicker.js` | Full color picker (hex, rgb, hsl, hsv, alpha); `value` property | [color-picker.html](https://dustinpoissant.github.io/kempo-ui/components/color-picker.html) |
 | `<k-combobox>` | `Combobox.js` | Searchable dropdown with debounced `search` event, dynamic `setOptions()`, `searching` indicator, keyboard nav; options are strings or `{label, value}` objects | [combobox.html](https://dustinpoissant.github.io/kempo-ui/components/combobox.html) |
 | `<k-content-slider>` | `ContentSlider.js` | Swipeable carousel | [content-slider.html](https://dustinpoissant.github.io/kempo-ui/components/content-slider.html) |
@@ -65,7 +66,8 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-dropdown>` | `Dropdown.js` | Action menu with keyboard navigation | [dropdown.html](https://dustinpoissant.github.io/kempo-ui/components/dropdown.html) |
 | `<k-filter-list>` `<k-filter-item>` | `FilterList.js` `FilterItem.js` | Filter/search list; items have `filter` attribute with keywords | [filter-list.html](https://dustinpoissant.github.io/kempo-ui/components/filter-list.html) |
 | `<k-focus-capture>` | `FocusCapture.js` | Traps keyboard focus within children | [focus-capture.html](https://dustinpoissant.github.io/kempo-ui/components/focus-capture.html) |
-| `<k-html-editor>` | `HtmlEditor.js` | WYSIWYG rich text editor; `value` property; `controls` attribute (`full`/`normal`/`minimal`/`none`) for built-in toolbars | [html-editor.html](https://dustinpoissant.github.io/kempo-ui/components/html-editor.html) |
+| `<k-html-editor>` | `HtmlEditor.js` | WYSIWYG rich text editor; `value` property; `controls` attribute (`full`/`normal`/`minimal`/`none`) for built-in toolbars; `disabled`/`readonly`/`required` (Lexical's `setEditable()` + Monaco's `readOnly`); form-associated | [html-editor.html](https://dustinpoissant.github.io/kempo-ui/components/html-editor.html) |
+| `<k-markdown-editor>` | `MarkdownEditor.js` | Markdown editor with Write/Preview tabs; raw markdown is the form value; rendered with vendored `marked` (full CommonMark + GFM — tables, task lists, fenced code, autolinks, inline HTML) via `renderMarkdown.js`; then sanitized via `sanitizeHtml` using either `allowed-tags` (comma-separated allowlist; pass `*` for everything) OR `disallowed-tags` (denylist) — mutually exclusive, allowlist wins if both set; defaults cover standard markdown output incl. img/hr/table family; `<script>` is always stripped unless `scripts-enabled` attribute is set; iframe/style/etc. are always stripped; `value`, `name`, `placeholder`, `disabled`/`readonly`/`required`, `mode` (`write`/`preview`), `allowed-tags`, `controls` (`'minimal'`/`'normal'`/`'full'`/`'none'` — pre-built toolbar; auto-imports the relevant control modules; user-slotted children override the preset); methods `focus()`, `blur()`, `clear()`, `setMode()`, `togglePreview()`, plus selection helpers `getSelection()`, `replaceSelection()`, `wrapSelection()`, `insertAtCursor()`, `insertLinePrefix()`; `controls-top`/`controls-bottom` slots for toolbar buttons; built-in controls under `markdownEditorControls/` (`k-md-bold`, `k-md-italic`, `k-md-strikethrough` (`~~...~~`), `k-md-heading` w/ `level`, `k-md-code`, `k-md-link`, `k-md-image` w/ `popup` (opens a Dropdown by default — `popup="dialog"` to switch to modal Dialog — for URL + alt text), `k-md-table` (small Dropdown with cols × rows inputs + Create button, inserts a GFM markdown table), `k-md-menu` w/ `label` (toolbar button that opens a Dropdown of slotted child controls; `trigger` slot fully customizes the button content — defaults to a `menu` icon), `k-md-format-block` w/ `tag` (heading picker designed to live inside `k-md-menu` — `h1`-`h6`), `k-md-speech-to-text` w/ `language`/`continuous` (wraps `<k-speech-to-text>`; final transcript is inserted at the cursor when the user stops speaking), `k-md-bullet-list`, `k-md-numbered-list`, `k-md-quote`); extend `MarkdownEditorControl` for custom buttons (incl. ones that insert raw HTML — adjust `allowed-tags` accordingly); fires `input`, `change`, `mode-change` | [markdown-editor.html](https://dustinpoissant.github.io/kempo-ui/components/markdown-editor.html) |
 | `<k-icon>` | `Icon.js` | SVG icon; `name` (looked up in `pathsToIcons`) or `src` (direct URL); `rotation`, `direction`, `animation` attributes | [icon.html](https://dustinpoissant.github.io/kempo-ui/components/icon.html) |
 | `<k-import>` | `Import.js` | Includes external HTML fragments; `src` attribute | [import.html](https://dustinpoissant.github.io/kempo-ui/components/import.html) |
 | `<k-main>` | `Main.js` | Layout main; automatically adjusts margins when a `k-aside[main="push"]` opens | — |
@@ -90,6 +92,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-toast>` `<k-toast-container>` | `Toast.js` | Toast notifications; use `<k-toast-container>` once in page, call `.addToast(options)` | [toast.html](https://dustinpoissant.github.io/kempo-ui/components/toast.html) |
 | `<k-toggle>` | `Toggle.js` | On/off toggle; `value` (Boolean, reflects); methods: `on()`, `off()`, `toggle()`; fires `change`, `on`, `off` | [toggle.html](https://dustinpoissant.github.io/kempo-ui/components/toggle.html) |
 | `<k-tree>` `<k-tree-node>` | `Tree.js` | Expandable tree; nodes have `label`, `icon`, `href`, `expanded` | [tree.html](https://dustinpoissant.github.io/kempo-ui/components/tree.html) |
+| `<k-voice-selector>` | `VoiceSelector.js` | `<select>` populated with `speechSynthesis.getVoices()`; persists choice via the `voice` utility so any `<k-text-to-speech>` without an explicit `voice` attr uses the saved preference; `language` (BCP-47 prefix) attr filters the list; fires `change` | [voice-selector.html](https://dustinpoissant.github.io/kempo-ui/components/voice-selector.html) |
 
 ---
 
@@ -245,7 +248,9 @@ Located in `src/utils/`. Import individually.
 | `debounce.js` | `default` | `debounce(fn, ms)` — delay fn until calls stop | [debounce.html](https://dustinpoissant.github.io/kempo-ui/utils/debounce.html) |
 | `wait.js` | `wait`, `waitFrames` | `wait(ms)` → Promise; `waitFrames(n)` → Promise after n animation frames | [wait.html](https://dustinpoissant.github.io/kempo-ui/utils/wait.html) |
 | `theme.js` | `setTheme`, `getTheme`, `subscribeToTheme`, `initTheme`, `getCalculatedTheme` | Manage light/dark/auto theme; persists to localStorage | [theme.html](https://dustinpoissant.github.io/kempo-ui/utils/theme.html) |
+| `voice.js` | `getVoice`, `setVoice`, `subscribeToVoice`, `getAvailableVoices`, `waitForVoices`, `subscribeToAvailableVoices` | Persisted speech-synthesis voice preference (mirrors `theme`); used by `<k-voice-selector>` and consumed by `<k-text-to-speech>` when no explicit `voice` attr is set | [voice.html](https://dustinpoissant.github.io/kempo-ui/utils/voice.html) |
 | `propConverters.js` | `boolExists`, `boolTrueFalse` | Lit property converters for boolean attributes | [propConverters.html](https://dustinpoissant.github.io/kempo-ui/utils/propConverters.html) |
+| `sanitizeHtml.js` | `default`, `sanitizeHtml`, `DEFAULT_TAGS`, `DEFAULT_ATTRS_GLOBAL`, `DEFAULT_ATTRS_PER_TAG` | Whitelist HTML sanitizer; strips `<script>`, `<style>`, `<iframe>`, event-handler attrs, unsafe URL schemes; defaults sized for rich-text input. **Frontend defense only — server must also sanitize.** | [sanitizeHtml.html](https://dustinpoissant.github.io/kempo-ui/utils/sanitizeHtml.html) |
 | `context.js` | `default` | `createContext(key, initialValue)` → `{ get, set, subscribe }` pub/sub state | [context.html](https://dustinpoissant.github.io/kempo-ui/utils/context.html) |
 | `cookie.js` | `saveCookie`, `getCookie`, `deleteCookie` | Get/set/delete browser cookies | [cookie.html](https://dustinpoissant.github.io/kempo-ui/utils/cookie.html) |
 | `drag.js` | `default` | `drag(options)` — attach mouse/touch drag listeners to an element; options: `element`, `callback`, `startCallback`, `moveCallback`, `endCallback`, `preventScroll` | [drag.html](https://dustinpoissant.github.io/kempo-ui/utils/drag.html) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",
@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@inquirer/prompts": "^8.3.0",
-    "kempo-css": "^2.2.1"
+    "kempo-css": "^2.2.1",
+    "marked": "^18.0.2"
   }
 }