kempo-ui 0.4.5 → 0.4.7

package/docs-src/components/markdown.page.html

@@ -0,0 +1,161 @@
+<page pageName="Markdown" title="Markdown - 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="#valueAttr">Value Attribute</a><br />
+          <a href="#breaks">Line Breaks</a><br />
+          <a href="#tagFiltering">Tag Filtering</a><br />
+          <a href="#dynamic">Updating At Runtime</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 />
+        </div>
+      </k-accordion-panel>
+    </k-accordion>
+
+    <p>The <code>k-markdown</code> component takes its child text content (or a <code>value</code> attribute), parses it as markdown using <a href="https://marked.js.org" target="_blank">marked</a> (full CommonMark + GFM &mdash; tables, task lists, fenced code, autolinks, inline HTML), runs the result through <a href="{{pathToRoot}}utils/sanitizeHtml.html"><code>sanitizeHtml</code></a>, and renders the HTML in place. It renders to the light DOM so page-level typography styles cascade naturally into headings, paragraphs, tables, and so on.</p>
+    <p>Common leading whitespace is automatically stripped from the source so you can indent the markdown to match the surrounding HTML without breaking parsing.</p>
+
+    <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
+    <p>Drop markdown text inside the tag and it will be replaced with the rendered HTML when the element connects.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-markdown</span>&gt;</span><br>  # Hello World<br><br>  This is **bold** and *italic* text.<br><br>  - list item 1<br>  - list item 2<br><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-markdown>
+            # Hello World
+
+            This is **bold** and *italic* text.
+
+            - list item 1
+            - list item 2
+          </k-markdown>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="valueAttr"><a href="#valueAttr" class="no-link">Value Attribute</a></h3>
+    <p>Skip the children and pass markdown directly via the <code>value</code> attribute when you only need a single line. The attribute also takes precedence over child content if both are provided.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-markdown</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;Visit [Kempo UI](https://github.com/dustinpoissant/kempo-ui) for more.&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-markdown value="Visit [Kempo UI](https://github.com/dustinpoissant/kempo-ui) for more."></k-markdown>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="breaks"><a href="#breaks" class="no-link">Line Breaks</a></h3>
+    <p>By default, single newlines are joined into a paragraph (CommonMark behavior). Add the <code>breaks</code> attribute to convert single newlines to <code>&lt;br&gt;</code> &mdash; the Slack/iMessage convention &mdash; useful for chat-style content.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-markdown</span> <span class="hljs-attr">breaks</span>&gt;</span><br>  Line one<br>  Line two<br>  Line three<br><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-markdown breaks>
+            Line one
+            Line two
+            Line three
+          </k-markdown>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="tagFiltering"><a href="#tagFiltering" class="no-link">Tag Filtering</a></h3>
+    <p>The rendered HTML is sanitized with the same <code>allowed-tags</code> / <code>disallowed-tags</code> controls used by <a href="{{pathToRoot}}components/markdown-editor.html"><code>k-markdown-editor</code></a>. Pass a comma-separated allowlist (or <code>*</code> for everything), or a comma-separated denylist &mdash; the two are mutually exclusive. <code>&lt;script&gt;</code>, <code>&lt;iframe&gt;</code>, <code>&lt;style&gt;</code>, and similar tags are always stripped unless you opt in with <code>scripts-enabled</code> (which only restores <code>&lt;script&gt;</code>).</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-markdown</span> <span class="hljs-attr">allowed-tags</span>=<span class="hljs-string">&quot;p,strong,em,a&quot;</span>&gt;</span><br>  Only **bold**, *italic*, [links](https://example.com), and paragraphs are kept.<br><br>  # This heading will be unwrapped<br><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-markdown allowed-tags="p,strong,em,a">
+            Only **bold**, *italic*, [links](https://example.com), and paragraphs are kept.
+
+            # This heading will be unwrapped
+          </k-markdown>
+        </k-card>
+      </div>
+    </div>
+
+    <h3 id="dynamic"><a href="#dynamic" class="no-link">Updating At Runtime</a></h3>
+    <p>Set the <code>value</code> property in JavaScript to re-render with new markdown.</p>
+    <div class="row -mx mb">
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="HTML">
+          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-markdown</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;dynamicMd&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;Click the button.&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;dynamicMdBtn&quot;</span>&gt;</span>Update<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;module&quot;</span>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">const</span> md = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;dynamicMd&#x27;</span>);<br>  <span class="hljs-keyword">const</span> btn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;dynamicMdBtn&#x27;</span>);<br>  <span class="hljs-keyword">let</span> toggled = <span class="hljs-literal">false</span>;<br>  btn.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;click&#x27;</span>, <span class="hljs-function">() =&gt;</span> {<br>    toggled = !toggled;<br>    md.<span class="hljs-property">value</span> = toggled<br>      ? <span class="hljs-string">&#x27;## Updated!\n\nThis was set via JavaScript with **markdown** and a [link](https://example.com).&#x27;</span><br>      : <span class="hljs-string">&#x27;Click the button.&#x27;</span>;<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+        </k-card>
+      </div>
+      <div class="col d-span-6 m-span-12 px">
+        <k-card label="Output">
+          <k-markdown id="dynamicMd" value="Click the button."></k-markdown>
+          <button id="dynamicMdBtn" class="btn primary mt">Update</button>
+        </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 LightComponent</h6>
+
+    <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
+    <ul>
+      <li><a href="{{pathToRoot}}components/light-component.html">LightComponent</a></li>
+      <li><code>marked</code> (vendored at <code>src/utils/marked.esm.js</code>) via <a href="{{pathToRoot}}utils/renderMarkdown.js"><code>renderMarkdown</code></a></li>
+      <li><a href="{{pathToRoot}}utils/sanitizeHtml.html"><code>sanitizeHtml</code></a></li>
+    </ul>
+
+    <h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
+    <h5><code>value<i>: string</i></code></h5>
+    <p>The markdown source. If empty when the element connects, the component falls back to the dedented child text content. Setting this property at runtime re-renders the output.</p>
+    <h5><code>breaks<i>: boolean</i></code></h5>
+    <p>When <code>true</code>, single newlines convert to <code>&lt;br&gt;</code> instead of being joined into a paragraph. Defaults to <code>false</code>. Reflects to the <code>breaks</code> attribute.</p>
+    <h5><code>allowedTags<i>: string</i></code></h5>
+    <p>Comma-separated allowlist for the rendered HTML. Pass <code>*</code> to allow every tag. Mutually exclusive with <code>disallowedTags</code> &mdash; if both are set, <code>allowedTags</code> wins and a console warning is logged. Reflects to the <code>allowed-tags</code> attribute.</p>
+    <h5><code>disallowedTags<i>: string</i></code></h5>
+    <p>Comma-separated denylist &mdash; everything is allowed except the listed tags. Reflects to the <code>disallowed-tags</code> attribute.</p>
+    <h5><code>scriptsEnabled<i>: boolean</i></code></h5>
+    <p>When present, <code>&lt;script&gt;</code> tags survive sanitization (provided they also pass the allow/deny tag check). Defaults to off so script content can never reach the DOM. Reflects to the <code>scripts-enabled</code> attribute.</p>
+
+    <h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
+    <h5><code>renderedHtml<i>: string</i></code> (getter)</h5>
+    <p>Returns the sanitized HTML string that was rendered &mdash; useful for copying the output or feeding it into another component.</p>
+  </content>
+  <content location="scripts">
+    <script type="module" src="{{pathToRoot}}src/components/Markdown.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
+    <script type="module">
+      const md = document.getElementById('dynamicMd');
+      const btn = document.getElementById('dynamicMdBtn');
+      let toggled = false;
+      btn.addEventListener('click', () => {
+        toggled = !toggled;
+        md.value = toggled
+          ? '## Updated!\n\nThis was set via JavaScript with **markdown** and a [link](https://example.com).'
+          : 'Click the button.';
+      });
+    </script>
+  </content>
+</page>

package/docs-src/components/resize.page.html

@@ -121,6 +121,9 @@
     <h5><code>dimension<i>: string</i></code></h5>
     <p>Restricts resizing to a specific dimension. Possible values are <code>"width"</code> (horizontal only) or <code>"height"</code> (vertical only). If not specified, both dimensions can be resized. Syncs with the <code>dimension</code> attribute.</p>
 
+    <h5><code>disabled<i>: Boolean</i></code></h5>
+    <p>When <code>true</code>, the resize handles can't capture pointer events &mdash; a drag can't start, and any in-progress drag handlers no-op. Handles fade to <code>opacity: 0.4</code> as a visual cue. Syncs with the <code>disabled</code> attribute.</p>
+
     <h3 id="slots"><a href="#slots" class="no-link">Slots</a></h3>
     <h5><code>default</code></h5>
     <p>The main content area that will be resizable. Content automatically gets scroll behavior when it overflows the container.</p>

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,18 @@
           <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.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Markdown</h3>
+          <p class="tc-muted">Renders the markdown text inside the element as sanitized HTML in place.</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>
@@ -331,6 +349,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>

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,12 @@
           <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 render parser marked gfm components"><a
+              href="{{pathToRoot}}components/markdown.html"
+            >Markdown<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
@@ -212,6 +221,9 @@
           <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
@@ -272,6 +284,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>
@@ -282,6 +295,8 @@
         <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.html">Markdown</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>
@@ -326,6 +341,7 @@
         <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>

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/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,9 @@ 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>` | `Markdown.js` | Renders child markdown text as sanitized HTML in place; `value` attribute (overrides children); `breaks` (single newline → `<br>`); `allowed-tags`/`disallowed-tags`/`scripts-enabled` for sanitization; light DOM render; `renderedHtml` getter | [markdown.html](https://dustinpoissant.github.io/kempo-ui/components/markdown.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 | — |
@@ -248,6 +251,7 @@ Located in `src/utils/`. Import individually.
 | `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.5",
+  "version": "0.4.7",
   "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"
   }
 }