kempo-ui 0.4.6 → 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/index.page.html

@@ -125,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.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>

package/docs-src/nav.fragment.html

@@ -82,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 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>
@@ -292,6 +295,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.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>

package/llms.txt

@@ -67,6 +67,7 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<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; `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) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-ui",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "type": "module",
   "description": "A Lit based web-component library",
   "main": "index.js",

package/src/components/Markdown.js

@@ -0,0 +1,125 @@
+import { html, unsafeHTML } from '../lit-all.min.js';
+import LightComponent from './LightComponent.js';
+import renderMarkdown from '../utils/renderMarkdown.js';
+import sanitizeHtml, { STRIP_COMPLETELY } from '../utils/sanitizeHtml.js';
+
+/*
+  k-markdown
+
+  Reads markdown from its child text content (or the `value` attribute) and
+  renders the HTML equivalent in-place. Markdown is parsed with the vendored
+  `marked` (CommonMark + GFM) and the resulting HTML is run through
+  `sanitizeHtml` before being inserted, with the same allowed-tags /
+  disallowed-tags / scripts-enabled controls as MarkdownEditor's preview.
+
+  Renders to the light DOM so page-level typography and styles cascade into
+  headings, paragraphs, tables, etc. without extra wiring.
+*/
+
+export default class Markdown extends LightComponent {
+  static properties = {
+    value: { type: String },
+    breaks: { type: Boolean, reflect: true },
+    allowedTags: { type: String, reflect: true, attribute: 'allowed-tags' },
+    disallowedTags: { type: String, reflect: true, attribute: 'disallowed-tags' },
+    scriptsEnabled: { type: Boolean, reflect: true, attribute: 'scripts-enabled' }
+  };
+
+  #captured = false;
+
+  /*
+    Lifecycle Callbacks
+  */
+  constructor() {
+    super();
+    this.value = '';
+    this.breaks = false;
+    this.allowedTags = '';
+    this.disallowedTags = '';
+    this.scriptsEnabled = false;
+  }
+
+  connectedCallback() {
+    // Capture and clear the original markdown children BEFORE Lit appends
+    // its lightRoot div — once super runs, lightRoot lives among the
+    // siblings we'd otherwise scan. After capture, the markdown lives on
+    // the `value` property; the source nodes are dropped so the parsed
+    // HTML doesn't render alongside its raw source.
+    if(!this.#captured){
+      this.#captured = true;
+      const text = this.textContent || '';
+      const dedented = dedent(text);
+      while(this.firstChild) this.removeChild(this.firstChild);
+      if(!this.hasAttribute('value') && !this.value && dedented){
+        this.value = dedented;
+      }
+    }
+    super.connectedCallback();
+  }
+
+  /*
+    Public Methods
+  */
+  get renderedHtml() {
+    const opts = {};
+    const resolved = this.#resolvedAllowedTags;
+    if(resolved) opts.allowedTags = resolved;
+    if(this.scriptsEnabled){
+      const stripCompletely = new Set(STRIP_COMPLETELY);
+      stripCompletely.delete('SCRIPT');
+      opts.stripCompletely = stripCompletely;
+    }
+    return sanitizeHtml(renderMarkdown(this.value || '', { breaks: this.breaks }), opts);
+  }
+
+  /*
+    Utility
+  */
+  get #resolvedAllowedTags() {
+    const allow = (this.allowedTags || '').trim();
+    const deny = (this.disallowedTags || '').trim();
+    if(allow && deny){
+      console.warn('[k-markdown] `allowed-tags` and `disallowed-tags` are mutually exclusive; using `allowed-tags`.');
+    }
+    if(allow){
+      if(allow === '*') return { has: () => true };
+      return new Set(allow.split(',').map(t => t.trim().toUpperCase()).filter(Boolean));
+    }
+    if(deny){
+      const denySet = new Set(deny.split(',').map(t => t.trim().toUpperCase()).filter(Boolean));
+      return { has: (tag) => !denySet.has(tag) };
+    }
+    return null;
+  }
+
+  /*
+    Rendering
+  */
+  renderLightDom() {
+    if(!this.value) return html``;
+    return html`${unsafeHTML(this.renderedHtml)}`;
+  }
+}
+
+/*
+  Strip a common leading indent from every line so users can indent the
+  markdown source to match the surrounding HTML without breaking parsing.
+  Also trims fully-blank leading/trailing lines.
+*/
+const dedent = (text) => {
+  const lines = text.split('\n');
+  while(lines.length && lines[0].trim() === '') lines.shift();
+  while(lines.length && lines[lines.length - 1].trim() === '') lines.pop();
+  if(!lines.length) return '';
+  let minIndent = Infinity;
+  for(const line of lines){
+    if(line.trim().length === 0) continue;
+    const match = line.match(/^(\s*)/);
+    const indent = match ? match[1].length : 0;
+    if(indent < minIndent) minIndent = indent;
+  }
+  if(minIndent === Infinity) minIndent = 0;
+  return lines.map(l => l.slice(minIndent)).join('\n');
+};
+
+customElements.define('k-markdown', Markdown);

package/tests/components/Markdown.browser-test.js

@@ -0,0 +1,292 @@
+import Markdown from '../../src/components/Markdown.js';
+import LightComponent from '../../src/components/LightComponent.js';
+
+const createMarkdown = async (innerHTML = '', attrs = {}) => {
+  const container = document.createElement('div');
+  const el = document.createElement('k-markdown');
+  for(const [key, value] of Object.entries(attrs)){
+    el.setAttribute(key, value);
+  }
+  if(innerHTML) el.innerHTML = innerHTML;
+  container.appendChild(el);
+  document.body.appendChild(container);
+  await el.updateComplete;
+  return { container, el };
+};
+
+const cleanup = (container) => {
+  if(container && container.parentNode){
+    container.parentNode.removeChild(container);
+  }
+};
+
+export default {
+  /*
+    Element Creation
+  */
+  'should create k-markdown element': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown();
+    if(!(el instanceof Markdown)){
+      cleanup(container);
+      return fail('Element should be instance of Markdown');
+    }
+    cleanup(container);
+    pass('k-markdown element created correctly');
+  },
+
+  'should extend LightComponent': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown();
+    if(!(el instanceof LightComponent)){
+      cleanup(container);
+      return fail('Markdown should extend LightComponent');
+    }
+    cleanup(container);
+    pass('Markdown extends LightComponent');
+  },
+
+  /*
+    Default Properties
+  */
+  'should have empty default value': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown();
+    if(el.value !== ''){
+      cleanup(container);
+      return fail(`Expected value to be '', got '${el.value}'`);
+    }
+    cleanup(container);
+    pass('Default value is empty string');
+  },
+
+  'should have breaks default false': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown();
+    if(el.breaks !== false){
+      cleanup(container);
+      return fail(`Expected breaks to be false, got ${el.breaks}`);
+    }
+    cleanup(container);
+    pass('Default breaks is false');
+  },
+
+  /*
+    Children → value capture
+  */
+  'should capture markdown from child text content': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('# Hello');
+    if(el.value !== '# Hello'){
+      cleanup(container);
+      return fail(`Expected value '# Hello', got '${el.value}'`);
+    }
+    cleanup(container);
+    pass('Captures markdown from children');
+  },
+
+  'should dedent indented child markdown': async ({pass, fail}) => {
+    const container = document.createElement('div');
+    container.innerHTML = `<k-markdown>
+      # Title
+
+      Some text
+    </k-markdown>`;
+    document.body.appendChild(container);
+    const el = container.querySelector('k-markdown');
+    await el.updateComplete;
+    const expected = '# Title\n\nSome text';
+    if(el.value !== expected){
+      cleanup(container);
+      return fail(`Expected dedented value '${expected}', got '${el.value}'`);
+    }
+    cleanup(container);
+    pass('Indented child markdown is dedented');
+  },
+
+  'value attribute takes precedence over children': async ({pass, fail}) => {
+    const container = document.createElement('div');
+    container.innerHTML = `<k-markdown value="from attr"># From children</k-markdown>`;
+    document.body.appendChild(container);
+    const el = container.querySelector('k-markdown');
+    await el.updateComplete;
+    if(el.value !== 'from attr'){
+      cleanup(container);
+      return fail(`Expected value 'from attr', got '${el.value}'`);
+    }
+    cleanup(container);
+    pass('value attribute beats children');
+  },
+
+  /*
+    Rendering
+  */
+  'should render markdown to HTML in light DOM': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('# Heading');
+    const heading = el.querySelector('h1');
+    if(!heading){
+      cleanup(container);
+      return fail(`Expected h1 in rendered output, got: ${el.innerHTML}`);
+    }
+    if(heading.textContent !== 'Heading'){
+      cleanup(container);
+      return fail(`Expected h1 text 'Heading', got '${heading.textContent}'`);
+    }
+    cleanup(container);
+    pass('Renders markdown heading as h1 in light DOM');
+  },
+
+  'should render bold and italic': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('This is **bold** and *italic*.');
+    const strong = el.querySelector('strong');
+    const em = el.querySelector('em');
+    if(!strong || strong.textContent !== 'bold'){
+      cleanup(container);
+      return fail(`Expected <strong>bold</strong>, got: ${el.innerHTML}`);
+    }
+    if(!em || em.textContent !== 'italic'){
+      cleanup(container);
+      return fail(`Expected <em>italic</em>, got: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('Bold and italic render correctly');
+  },
+
+  'should render lists': async ({pass, fail}) => {
+    const container = document.createElement('div');
+    container.innerHTML = `<k-markdown>
+      - one
+      - two
+      - three
+    </k-markdown>`;
+    document.body.appendChild(container);
+    const el = container.querySelector('k-markdown');
+    await el.updateComplete;
+    const items = el.querySelectorAll('ul > li');
+    if(items.length !== 3){
+      cleanup(container);
+      return fail(`Expected 3 li elements, got ${items.length}: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('Lists render with three items');
+  },
+
+  'should clear original child markdown source': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('# Hello');
+    if(el.textContent.includes('# Hello')){
+      cleanup(container);
+      return fail(`Original markdown source should be removed, got textContent: '${el.textContent}'`);
+    }
+    cleanup(container);
+    pass('Original child markdown is cleared');
+  },
+
+  /*
+    Re-rendering on value change
+  */
+  'should re-render when value property changes': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('first');
+    el.value = '## Updated';
+    await el.updateComplete;
+    const h2 = el.querySelector('h2');
+    if(!h2 || h2.textContent !== 'Updated'){
+      cleanup(container);
+      return fail(`Expected h2 'Updated' after value change, got: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('Re-renders on value change');
+  },
+
+  /*
+    breaks attribute
+  */
+  'breaks=false joins single newlines (CommonMark)': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown();
+    el.value = 'one\ntwo';
+    await el.updateComplete;
+    const br = el.querySelector('br');
+    if(br){
+      cleanup(container);
+      return fail(`Expected no <br> when breaks=false, got: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('breaks=false joins single newlines');
+  },
+
+  'breaks=true converts single newlines to <br>': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('', { breaks: '' });
+    el.value = 'one\ntwo';
+    await el.updateComplete;
+    const br = el.querySelector('br');
+    if(!br){
+      cleanup(container);
+      return fail(`Expected <br> when breaks=true, got: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('breaks=true converts single newlines to <br>');
+  },
+
+  /*
+    Sanitization
+  */
+  'should strip <script> tags by default': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown();
+    el.value = 'safe <script>alert(1)</script> text';
+    await el.updateComplete;
+    if(el.querySelector('script')){
+      cleanup(container);
+      return fail(`Expected no <script>, got: ${el.innerHTML}`);
+    }
+    if(el.textContent.includes('alert(1)')){
+      cleanup(container);
+      return fail(`Script content should be stripped completely, got textContent: '${el.textContent}'`);
+    }
+    cleanup(container);
+    pass('Script tags stripped by default');
+  },
+
+  'allowed-tags="*" allows everything': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('', { 'allowed-tags': '*' });
+    el.value = '<details><summary>open</summary>hi</details>';
+    await el.updateComplete;
+    if(!el.querySelector('details') || !el.querySelector('summary')){
+      cleanup(container);
+      return fail(`Expected details+summary preserved, got: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('allowed-tags="*" allows custom tags');
+  },
+
+  'disallowed-tags drops listed tags but keeps text': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('', { 'disallowed-tags': 'h1' });
+    el.value = '# Heading\n\nA paragraph.';
+    await el.updateComplete;
+    if(el.querySelector('h1')){
+      cleanup(container);
+      return fail(`Expected no <h1>, got: ${el.innerHTML}`);
+    }
+    if(!el.textContent.includes('Heading')){
+      cleanup(container);
+      return fail(`Expected heading text preserved, got textContent: '${el.textContent}'`);
+    }
+    if(!el.querySelector('p')){
+      cleanup(container);
+      return fail(`Expected paragraph preserved, got: ${el.innerHTML}`);
+    }
+    cleanup(container);
+    pass('disallowed-tags drops listed tags but keeps text');
+  },
+
+  /*
+    renderedHtml getter
+  */
+  'renderedHtml getter returns sanitized HTML string': async ({pass, fail}) => {
+    const { container, el } = await createMarkdown('# Title');
+    const out = el.renderedHtml;
+    if(typeof out !== 'string'){
+      cleanup(container);
+      return fail(`Expected string, got ${typeof out}`);
+    }
+    if(!out.includes('<h1') || !out.includes('Title')){
+      cleanup(container);
+      return fail(`Expected '<h1...>Title' in renderedHtml, got '${out}'`);
+    }
+    cleanup(container);
+    pass('renderedHtml returns expected HTML string');
+  }
+};