kempo-ui 0.4.19 → 0.4.21

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

@@ -29,7 +29,7 @@
     </k-accordion>
 
     <p>A markdown editor with GitHub-style <strong>Write</strong> and <strong>Preview</strong> tabs. The user types markdown in the textarea and can flip to a live preview at any time. Markdown is parsed by <a href="https://marked.js.org" target="_blank">marked</a> &mdash; a full CommonMark + GFM parser &mdash; so tables, task lists, fenced code blocks, autolinks, and inline HTML all work out of the box. The rendered output runs through <a href="../utils/sanitizeHtml.html"><code>sanitizeHtml</code></a> using <code>allowed-tags</code> (an allowlist) <em>or</em> <code>disallowed-tags</code> (a denylist) &mdash; the two are mutually exclusive. <code>&lt;script&gt;</code> tags are <strong>always</strong> stripped unless you opt in via the <code>scripts-enabled</code> attribute, and <code>&lt;iframe&gt;</code> / <code>&lt;style&gt;</code> / similar dangerous tags are always stripped regardless of any setting.</p>
-    <p>Toolbar buttons are slotted via <code>controls-top</code> and <code>controls-bottom</code> &mdash; mix and match the built-in controls listed below or write your own by extending <a href="#customControls"><code>MarkdownEditorControl</code></a>.</p>
+    <p>Toolbar buttons are slotted via <code>controls-top</code> and <code>controls-bottom</code> &mdash; mix and match the built-in controls listed below or write your own by extending <a href="#customControls"><code>ButtonControl</code></a>.</p>
 
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <p>Drop in the tag with a <code>placeholder</code> and you get a markdown textarea with a Write/Preview toggle. No toolbars, no controls &mdash; just the bare editor.</p>
@@ -51,31 +51,31 @@
     <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-markdown-editor</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Write a comment...&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;controls-top&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;d-f&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-md-menu</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Heading&quot;</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;trigger&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;text_fields&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">k-md-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;h1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-format-block</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">k-md-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;h2&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-format-block</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">k-md-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;h3&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-format-block</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">k-md-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;h4&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-format-block</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">k-md-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;h5&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-format-block</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">k-md-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;h6&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-format-block</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">k-md-menu</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-md-bold</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-bold</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-md-italic</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-italic</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-md-quote</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-quote</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-md-code</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-code</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-md-link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-link</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-md-image</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-image</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-md-table</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-table</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-md-bullet-list</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-bullet-list</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-md-numbered-list</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-numbered-list</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown-editor</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-markdown-editor</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Write a comment...&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;controls-top&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;d-f&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-menu</span> <span class="hljs-attr">label</span>=<span class="hljs-string">&quot;Heading&quot;</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">k-icon</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;trigger&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;text_fields&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-icon</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">kc-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;h1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-format-block</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">kc-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;h2&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-format-block</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">kc-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;h3&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-format-block</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">kc-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;h4&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-format-block</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">kc-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;h5&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-format-block</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">kc-format-block</span> <span class="hljs-attr">tag</span>=<span class="hljs-string">&quot;h6&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-format-block</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">kc-menu</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-bold</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-bold</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-italic</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-italic</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-quote</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-quote</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-inline-code</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-inline-code</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-md-link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-md-link</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-md-image</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-md-image</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-md-table</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-md-table</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-bullet-list</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-bullet-list</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-number-list</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-number-list</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown-editor</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
         <k-card label="Output">
           <k-markdown-editor placeholder="Write a comment...">
             <div slot="controls-top" class="d-f">
-              <k-md-menu label="Heading">
+              <kc-menu label="Heading">
                 <k-icon slot="trigger" name="text_fields"></k-icon>
-                <k-md-format-block tag="h1"></k-md-format-block>
-                <k-md-format-block tag="h2"></k-md-format-block>
-                <k-md-format-block tag="h3"></k-md-format-block>
-                <k-md-format-block tag="h4"></k-md-format-block>
-                <k-md-format-block tag="h5"></k-md-format-block>
-                <k-md-format-block tag="h6"></k-md-format-block>
-              </k-md-menu>
-              <k-md-bold></k-md-bold>
-              <k-md-italic></k-md-italic>
-              <k-md-quote></k-md-quote>
-              <k-md-code></k-md-code>
-              <k-md-link></k-md-link>
-              <k-md-image></k-md-image>
-              <k-md-table></k-md-table>
-              <k-md-bullet-list></k-md-bullet-list>
-              <k-md-numbered-list></k-md-numbered-list>
+                <kc-format-block tag="h1"></kc-format-block>
+                <kc-format-block tag="h2"></kc-format-block>
+                <kc-format-block tag="h3"></kc-format-block>
+                <kc-format-block tag="h4"></kc-format-block>
+                <kc-format-block tag="h5"></kc-format-block>
+                <kc-format-block tag="h6"></kc-format-block>
+              </kc-menu>
+              <kc-bold></kc-bold>
+              <kc-italic></kc-italic>
+              <kc-quote></kc-quote>
+              <kc-inline-code></kc-inline-code>
+              <kc-md-link></kc-md-link>
+              <kc-md-image></kc-md-image>
+              <kc-md-table></kc-md-table>
+              <kc-bullet-list></kc-bullet-list>
+              <kc-number-list></kc-number-list>
             </div>
           </k-markdown-editor>
         </k-card>
@@ -137,16 +137,16 @@
     <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-markdown-editor</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Write a comment...&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;controls-top&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;d-f&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-md-bold</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-bold</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-md-italic</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-italic</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">k-md-link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-link</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;controls-bottom&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;d-f&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;align-items:center; width:100%;&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tc-muted&quot;</span>&gt;</span>Markdown supported<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;margin-left:auto&quot;</span>&gt;</span>Comment<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown-editor</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-markdown-editor</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Write a comment...&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;controls-top&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;d-f&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-bold</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-bold</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-italic</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-italic</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">kc-md-link</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-md-link</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;controls-bottom&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;d-f&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;align-items:center; width:100%;&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">small</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;tc-muted&quot;</span>&gt;</span>Markdown supported<span class="hljs-tag">&lt;/<span class="hljs-name">small</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;margin-left:auto&quot;</span>&gt;</span>Comment<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown-editor</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
         <k-card label="Output">
           <k-markdown-editor placeholder="Write a comment...">
             <div slot="controls-top" class="d-f">
-              <k-md-bold></k-md-bold>
-              <k-md-italic></k-md-italic>
-              <k-md-link></k-md-link>
+              <kc-bold></kc-bold>
+              <kc-italic></kc-italic>
+              <kc-md-link></kc-md-link>
             </div>
             <div slot="controls-bottom" class="d-f" style="align-items:center; width:100%;">
               <small class="tc-muted">Markdown supported</small>
@@ -177,7 +177,7 @@
     <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">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;mdForm&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Comment:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-markdown-editor</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;comment&quot;</span> <span class="hljs-attr">required</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Markdown supported&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;controls-top&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;d-f&quot;</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">k-md-bold</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-bold</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">k-md-italic</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-md-italic</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown-editor</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></code></pre>
+          <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;mdForm&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">label</span>&gt;</span>Comment:<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-markdown-editor</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;comment&quot;</span> <span class="hljs-attr">required</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;Markdown supported&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;controls-top&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;d-f&quot;</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">kc-bold</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-bold</span>&gt;</span><br>      <span class="hljs-tag">&lt;<span class="hljs-name">kc-italic</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-italic</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">k-markdown-editor</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;submit&quot;</span>&gt;</span>Submit<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
@@ -186,8 +186,8 @@
             <label class="d-b mb">Comment:</label>
             <k-markdown-editor name="comment" required placeholder="Markdown supported">
               <div slot="controls-top" class="d-f">
-                <k-md-bold></k-md-bold>
-                <k-md-italic></k-md-italic>
+                <kc-bold></kc-bold>
+                <kc-italic></kc-italic>
               </div>
             </k-markdown-editor>
             <div class="mt">
@@ -257,28 +257,10 @@
     </div>
 
     <h3 id="customControls"><a href="#customControls" class="no-link">Custom Controls</a></h3>
-    <p>To write your own toolbar button, extend <code>MarkdownEditorControl</code>. Override <code>command()</code> and use the helpers (<code>wrapSelection</code>, <code>insertLinePrefix</code>, <code>replaceSelection</code>, <code>insertAtCursor</code>) to manipulate the textarea. The base class hides the control automatically when the editor flips to Preview mode.</p>
-    <p>Below is a tiny control that drops a horizontal rule (<code>---</code> on its own line) at the cursor &mdash; not common enough to ship as a built-in, but a clean example of using <code>insertAtCursor</code>.</p>
+    <p>To write your own toolbar button, extend <code>ButtonControl</code> from <code>controls/Button.js</code>. Override <code>handleAction()</code> and call the host&rsquo;s public methods (<code>wrapSelection</code>, <code>insertLinePrefix</code>, <code>replaceSelection</code>, <code>insertAtCursor</code>) via <code>this.host</code> to manipulate the textarea. The base class auto-discovers the host via <code>closest('[controlled]')</code> and disables itself when required host methods are missing.</p>
+    <p>Below is a tiny control that drops a horizontal rule (<code>---</code> on its own line) at the cursor &mdash; not common enough to ship as a built-in, but a clean example of using <code>invokeHost</code>.</p>
     <k-card label="JavaScript">
-      <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">MarkdownEditorControl</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'./markdownEditorControls/MarkdownEditorControl.js'</span>;
-<span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'./lit-all.min.js'</span>;
-
-<span class="hljs-comment">// Inserts a horizontal rule (`---`) on its own line at the cursor.</span>
-<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MarkdownHr</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">MarkdownEditorControl</span> {
-  <span class="hljs-title function_">constructor</span>(<span class="hljs-params"></span>) {
-    <span class="hljs-variable language_">super</span>();
-    <span class="hljs-variable language_">this</span>.<span class="hljs-property">label</span> = <span class="hljs-string">'Horizontal rule'</span>;
-  }
-  <span class="hljs-title function_">command</span>(<span class="hljs-params"></span>) {
-    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">insertAtCursor</span>(<span class="hljs-string">'\n\n---\n\n'</span>);
-  }
-  <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>) {
-    <span class="hljs-keyword">return</span> html<span class="hljs-string">`
-      &lt;button type=&quot;button&quot; class=<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.<span class="hljs-property">btnClass</span>}</span> @click=<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.<span class="hljs-property">handleClick</span>}</span>&gt;&mdash;&lt;/button&gt;
-    `</span>;
-  }
-}
-customElements.<span class="hljs-title function_">define</span>(<span class="hljs-string">'k-md-hr'</span>, <span class="hljs-title class_">MarkdownHr</span>);</code></pre>
+      <pre><code class="hljs javascript"><span class="hljs-keyword">import</span> <span class="hljs-title class_">ButtonControl</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./controls/Button.js&#x27;</span>;<br><span class="hljs-keyword">import</span> {<br>  html<br>} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./lit-all.min.js&#x27;</span>;<br><span class="hljs-comment">// Inserts a horizontal rule (`---`) on its own line at the cursor.</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MarkdownHr</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">ButtonControl</span> {<br>  <span class="hljs-keyword">static</span> requires = [<span class="hljs-string">&#x27;insertAtCursor&#x27;</span>];<br>  <span class="hljs-keyword">static</span> hostMode = <span class="hljs-string">&#x27;write&#x27;</span>;<br>  <span class="hljs-title function_">constructor</span>(<span class="hljs-params"></span>) {<br>    <span class="hljs-variable language_">super</span>();<br>    <span class="hljs-variable language_">this</span>.<span class="hljs-property">title</span> = <span class="hljs-string">&#x27;Horizontal rule&#x27;</span>;<br>  }<br>  <span class="hljs-title function_">handleAction</span>(<span class="hljs-params"></span>) {<br>    <span class="hljs-variable language_">this</span>.<span class="hljs-title function_">invokeHost</span>(<span class="hljs-string">&#x27;insertAtCursor&#x27;</span>, <span class="hljs-string">&#x27;\n\n---\n\n&#x27;</span>);<br>  }<br>  <span class="hljs-title function_">render</span>(<span class="hljs-params"></span>) {<br>    <span class="hljs-keyword">return</span> html`<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">slot</span>&gt;</span><span class="hljs-symbol">&amp;mdash;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span>`</span>;<br>  }<br>}<br>customElements.<span class="hljs-title function_">define</span>(<span class="hljs-string">&#x27;kc-md-hr&#x27;</span>, <span class="hljs-title class_">MarkdownHr</span>);</code></pre>
     </k-card>
 
     <h3 id="sizingExample"><a href="#sizingExample" class="no-link">Sizing Example</a></h3>
@@ -411,48 +393,47 @@ customElements.<span class="hljs-title function_">define</span>(<span class="hlj
     <h5><code>change</code></h5>
     <p>Fires with a 300ms debounce whenever text is typed, and also on blur. <code>detail.value</code> is the current markdown. Useful for enabling/disabling a "Save" button during long typing sessions without waiting for blur.</p>
 
-    <h5><code>mode-change</code></h5>
+    <h5><code>mode-changed</code></h5>
     <p>Fires when the user switches between Write and Preview tabs. <code>detail.mode</code> is the new mode.</p>
 
     <h3 id="controls"><a href="#controls" class="no-link">Built-in Controls</a></h3>
-    <p>Each control is a separate custom element under <code>src/components/markdownEditorControls/</code>. Import the ones you want and slot them into <code>controls-top</code> or <code>controls-bottom</code>.</p>
+    <p>Each control is a separate custom element under <code>src/components/controls/</code>. Import the ones you want and slot them into <code>controls-top</code> or <code>controls-bottom</code>.</p>
     <table class="b">
       <thead><tr><th>Tag</th><th>File</th><th>Inserts</th></tr></thead>
       <tbody>
-        <tr><td><code>&lt;k-md-bold&gt;</code></td><td><code>Bold.js</code></td><td><code>**bold**</code></td></tr>
-        <tr><td><code>&lt;k-md-italic&gt;</code></td><td><code>Italic.js</code></td><td><code>_italic_</code></td></tr>
-        <tr><td><code>&lt;k-md-strikethrough&gt;</code></td><td><code>Strikethrough.js</code></td><td><code>~~strike~~</code> &mdash; GFM strikethrough; renders to <code>&lt;del&gt;</code>.</td></tr>
-        <tr><td><code>&lt;k-md-heading&gt;</code></td><td><code>Heading.js</code></td><td><code>## </code> on the current line; <code>level</code> attribute (1&ndash;6) selects heading depth</td></tr>
-        <tr><td><code>&lt;k-md-code&gt;</code></td><td><code>Code.js</code></td><td>Inline backticks for a single line, fenced <code>```</code> blocks for multi-line selections</td></tr>
-        <tr><td><code>&lt;k-md-link&gt;</code></td><td><code>Link.js</code></td><td><code>[text](url)</code> with the URL portion pre-selected</td></tr>
-        <tr><td><code>&lt;k-md-image&gt;</code></td><td><code>Image.js</code></td><td>Opens a popover (URL + alt text) and inserts <code>![alt](url)</code> at the cursor. The popover type is configurable via <code>popup="dropdown"</code> (default, anchored next to the button) or <code>popup="dialog"</code> (modal Dialog).</td></tr>
-        <tr><td><code>&lt;k-md-table&gt;</code></td><td><code>Table.js</code></td><td>Opens a small dropdown with <em>cols × rows</em> inputs and a Create button. Inserts a GFM markdown table (with <code>Header 1</code>, <code>Header 2</code>&hellip; placeholders and empty body cells) at the cursor.</td></tr>
-        <tr><td><code>&lt;k-md-menu&gt;</code></td><td><code>Menu.js</code></td><td>Renders a single toolbar button that opens a Dropdown containing whatever child controls you slot into the default slot. The trigger button content is fully customizable via the <code>trigger</code> slot (defaults to a <code>menu</code> icon); <code>label</code> sets the accessible name.</td></tr>
-        <tr><td><code>&lt;k-md-format-block&gt;</code></td><td><code>FormatBlock.js</code></td><td>Heading-block picker designed to go inside a <code>&lt;k-md-menu&gt;</code>. <code>tag="h1"</code>&hellip;<code>"h6"</code> sets the heading level on the current line(s), swapping out any existing heading.</td></tr>
-        <tr><td><code>&lt;k-md-speech-to-text&gt;</code></td><td><code>SpeechToText.js</code></td><td>Reuses the standalone <a href="./speech-to-text.html"><code>&lt;k-speech-to-text&gt;</code></a> component &mdash; click the mic to start recording, click again to stop. The final transcript is inserted at the cursor when the user finishes speaking. Forwards <code>language</code> and <code>continuous</code> attributes through.</td></tr>
-        <tr><td><code>&lt;k-md-bullet-list&gt;</code></td><td><code>BulletList.js</code></td><td><code>- </code> prefix on each selected line</td></tr>
-        <tr><td><code>&lt;k-md-numbered-list&gt;</code></td><td><code>NumberedList.js</code></td><td><code>1. </code>, <code>2. </code>, &hellip; numbering each non-empty selected line</td></tr>
-        <tr><td><code>&lt;k-md-quote&gt;</code></td><td><code>Quote.js</code></td><td><code>&gt; </code> prefix on each selected line</td></tr>
+        <tr><td><code>&lt;kc-bold&gt;</code></td><td><code>Bold.js</code></td><td><code>**bold**</code></td></tr>
+        <tr><td><code>&lt;kc-italic&gt;</code></td><td><code>Italic.js</code></td><td><code>_italic_</code></td></tr>
+        <tr><td><code>&lt;kc-strikethrough&gt;</code></td><td><code>Strikethrough.js</code></td><td><code>~~strike~~</code> &mdash; GFM strikethrough; renders to <code>&lt;del&gt;</code>.</td></tr>
+        <tr><td><code>&lt;kc-inline-code&gt;</code></td><td><code>InlineCode.js</code></td><td>Inline backticks for a single line, fenced <code>```</code> blocks for multi-line selections</td></tr>
+        <tr><td><code>&lt;kc-md-link&gt;</code></td><td><code>MdLink.js</code></td><td><code>[text](url)</code> with the URL portion pre-selected</td></tr>
+        <tr><td><code>&lt;kc-md-image&gt;</code></td><td><code>MdImage.js</code></td><td>Opens a popover (URL + alt text) and inserts <code>![alt](url)</code> at the cursor. The popover type is configurable via <code>popup="dropdown"</code> (default, anchored next to the button) or <code>popup="dialog"</code> (modal Dialog).</td></tr>
+        <tr><td><code>&lt;kc-md-table&gt;</code></td><td><code>MdTable.js</code></td><td>Opens a small dropdown with <em>cols × rows</em> inputs and a Create button. Inserts a GFM markdown table (with <code>Header 1</code>, <code>Header 2</code>&hellip; placeholders and empty body cells) at the cursor.</td></tr>
+        <tr><td><code>&lt;kc-menu&gt;</code></td><td><code>Menu.js</code></td><td>Renders a single toolbar button that opens a Dropdown containing whatever child controls you slot into the default slot. The trigger button content is fully customizable via the <code>trigger</code> slot (defaults to a <code>menu</code> icon); <code>label</code> sets the accessible name.</td></tr>
+        <tr><td><code>&lt;kc-format-block&gt;</code></td><td><code>FormatBlock.js</code></td><td>Heading-block picker designed to go inside a <code>&lt;kc-menu&gt;</code>. <code>tag="h1"</code>&hellip;<code>"h6"</code> sets the heading level on the current line(s), swapping out any existing heading.</td></tr>
+        <tr><td><code>&lt;kc-md-speech-to-text&gt;</code></td><td><code>MdSpeechToText.js</code></td><td>Reuses the standalone <a href="./speech-to-text.html"><code>&lt;k-speech-to-text&gt;</code></a> component &mdash; click the mic to start recording, click again to stop. The final transcript is inserted at the cursor when the user finishes speaking. Forwards <code>language</code> and <code>continuous</code> attributes through.</td></tr>
+        <tr><td><code>&lt;kc-bullet-list&gt;</code></td><td><code>BulletList.js</code></td><td><code>- </code> prefix on each selected line</td></tr>
+        <tr><td><code>&lt;kc-number-list&gt;</code></td><td><code>NumberList.js</code></td><td><code>1. </code>, <code>2. </code>, &hellip; numbering each non-empty selected line</td></tr>
+        <tr><td><code>&lt;kc-quote&gt;</code></td><td><code>Quote.js</code></td><td><code>&gt; </code> prefix on each selected line</td></tr>
       </tbody>
     </table>
-    <p class="mt">All controls extend <code>MarkdownEditorControl</code> &mdash; see <a href="#customControls">Custom Controls</a> to write your own.</p>
+    <p class="mt">All controls extend <code>ButtonControl</code> from <code>controls/Button.js</code> &mdash; see <a href="#customControls">Custom Controls</a> to write your own.</p>
   </content>
   <content location="scripts">
     <script type="module" src="{{pathToRoot}}src/components/MarkdownEditor.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/Bold.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/Italic.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/Strikethrough.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/SpeechToText.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/Heading.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/Code.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/Link.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/Image.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/Table.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/Menu.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/FormatBlock.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/BulletList.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/NumberedList.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/markdownEditorControls/Quote.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/Bold.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/Italic.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/Strikethrough.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/MdSpeechToText.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/FormatBlock.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/InlineCode.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/MdLink.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/MdImage.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/MdTable.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/Menu.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/FormatBlock.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/BulletList.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/NumberList.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/Quote.js"></script>
     <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
     <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
   </content>

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

@@ -27,7 +27,7 @@
     </k-accordion>
 
     <p>A pagination interface component that tracks the current page, calculates total pages from <code>total-items</code> and <code>items-per-page</code>, and emits a <code>page-change</code> event when the pagination state changes. It does not manage or render the paginated content — it is a pure navigation interface. Place it beneath your content and listen for <code>page-change</code> to know when to load new content.</p>
-    <p>Toolbar controls are slotted in &mdash; mix and match the built-in controls listed below, or write your own by extending <code>PaginationControl</code>. Use the <code>controls</code> attribute for preconfigured sets.</p>
+    <p>Toolbar controls are slotted in &mdash; mix and match the built-in controls listed below, or write your own by extending <code>Control</code> from <code>controls/Control.js</code>. Use the <code>controls</code> attribute for preconfigured sets.</p>
 
     <h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
     <p>Without any controls the component tracks state but renders nothing visible &mdash; useful when you supply your own UI.</p>
@@ -65,16 +65,16 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-pagination</span> <span class="hljs-attr">total-items</span>=<span class="hljs-string">&quot;100&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-prev</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-prev</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-page-info</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-page-info</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-next</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-next</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-items-per-page</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-items-per-page</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-pagination</span>&gt;</span></code></pre>
+          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-pagination</span> <span class="hljs-attr">total-items</span>=<span class="hljs-string">&quot;100&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-prev</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-prev</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-page-info</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-page-info</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-next</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-next</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-items-per-page</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-items-per-page</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-pagination</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
         <k-card label="Output">
           <k-pagination total-items="100">
-            <k-pg-prev></k-pg-prev>
-            <k-pg-page-info></k-pg-page-info>
-            <k-pg-next></k-pg-next>
-            <k-pg-items-per-page slot="right"></k-pg-items-per-page>
+            <kc-pg-prev></kc-pg-prev>
+            <kc-pg-page-info></kc-pg-page-info>
+            <kc-pg-next></kc-pg-next>
+            <kc-pg-items-per-page slot="right"></kc-pg-items-per-page>
           </k-pagination>
         </k-card>
       </div>
@@ -115,57 +115,57 @@
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-pagination</span> <span class="hljs-attr">total-items</span>=<span class="hljs-string">&quot;100&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-first</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-first</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-prev</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-prev</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-page-info</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-page-info</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-goto-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-goto-page</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-count</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-count</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-next</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-next</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-last</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-last</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-items-per-page</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-items-per-page</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-pagination</span>&gt;</span></code></pre>
+          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-pagination</span> <span class="hljs-attr">total-items</span>=<span class="hljs-string">&quot;100&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-first</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-first</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-prev</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-prev</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-page-info</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-page-info</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-goto-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-goto-page</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-count</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-count</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-next</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-next</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-last</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-last</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-items-per-page</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-items-per-page</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-pagination</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
         <k-card label="Output">
           <k-pagination total-items="100">
-            <k-pg-first></k-pg-first>
-            <k-pg-prev></k-pg-prev>
-            <k-pg-page-info></k-pg-page-info>
-            <k-pg-goto-page></k-pg-goto-page>
-            <k-pg-count></k-pg-count>
-            <k-pg-next></k-pg-next>
-            <k-pg-last></k-pg-last>
-            <k-pg-items-per-page slot="right"></k-pg-items-per-page>
+            <kc-pg-first></kc-pg-first>
+            <kc-pg-prev></kc-pg-prev>
+            <kc-pg-page-info></kc-pg-page-info>
+            <kc-pg-goto-page></kc-pg-goto-page>
+            <kc-pg-count></kc-pg-count>
+            <kc-pg-next></kc-pg-next>
+            <kc-pg-last></kc-pg-last>
+            <kc-pg-items-per-page slot="right"></kc-pg-items-per-page>
           </k-pagination>
         </k-card>
       </div>
     </div>
 
     <h3 id="gotoPageExample"><a href="#gotoPageExample" class="no-link">Goto Page</a></h3>
-    <p>Use <code>&lt;k-pg-goto-page&gt;</code> and <code>&lt;k-pg-count&gt;</code> together for an interactive &ldquo;Page X of Y&rdquo; control where X is a dropdown the user can select directly.</p>
+    <p>Use <code>&lt;kc-pg-goto-page&gt;</code> and <code>&lt;kc-pg-count&gt;</code> together for an interactive &ldquo;Page X of Y&rdquo; control where X is a dropdown the user can select directly.</p>
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-pagination</span> <span class="hljs-attr">total-items</span>=<span class="hljs-string">&#x27;100&#x27;</span>&gt;</span> Page <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-goto-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-goto-page</span>&gt;</span> of <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-count</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-count</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-pagination</span>&gt;</span></code></pre>
+          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-pagination</span> <span class="hljs-attr">total-items</span>=<span class="hljs-string">&#x27;100&#x27;</span>&gt;</span> Page <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-goto-page</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-goto-page</span>&gt;</span> of <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-count</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-count</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-pagination</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
         <k-card label="Output">
           <k-pagination total-items="100">
-            Page <k-pg-goto-page></k-pg-goto-page> of <k-pg-count></k-pg-count>
+            Page <kc-pg-goto-page></kc-pg-goto-page> of <kc-pg-count></kc-pg-count>
           </k-pagination>
         </k-card>
       </div>
     </div>
 
     <h3 id="itemsPerPageOptions"><a href="#itemsPerPageOptions" class="no-link">Items Per Page Options</a></h3>
-    <p>Use the <code>options</code> attribute on <code>&lt;k-pg-items-per-page&gt;</code> to customize the available page-size choices. Pass a comma-separated list of numbers. Defaults to <code>5,10,25,50,100</code>. Typically placed on the right with <code>slot="right"</code>.</p>
+    <p>Use the <code>options</code> attribute on <code>&lt;kc-pg-items-per-page&gt;</code> to customize the available page-size choices. Pass a comma-separated list of numbers. Defaults to <code>5,10,25,50,100</code>. Typically placed on the right with <code>slot="right"</code>.</p>
     <div class="row -mx">
       <div class="col m-span-12 px">
         <k-card label="HTML">
-          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-pagination</span> <span class="hljs-attr">total-items</span>=<span class="hljs-string">&#x27;100&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-prev</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-prev</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-page-info</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-page-info</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-next</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-next</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">k-pg-items-per-page</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;right&#x27;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&#x27;5,10,20,50&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-pg-items-per-page</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-pagination</span>&gt;</span></code></pre>
+          <pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">k-pagination</span> <span class="hljs-attr">total-items</span>=<span class="hljs-string">&#x27;100&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-prev</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-prev</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-page-info</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-page-info</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-next</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-next</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">kc-pg-items-per-page</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">&#x27;right&#x27;</span> <span class="hljs-attr">options</span>=<span class="hljs-string">&#x27;5,10,20,50&#x27;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-pg-items-per-page</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">k-pagination</span>&gt;</span></code></pre>
         </k-card>
       </div>
       <div class="col m-span-12 px">
         <k-card label="Output">
           <k-pagination total-items="100">
-            <k-pg-prev></k-pg-prev>
-            <k-pg-page-info></k-pg-page-info>
-            <k-pg-next></k-pg-next>
-            <k-pg-items-per-page slot="right" options="5,10,20,50"></k-pg-items-per-page>
+            <kc-pg-prev></kc-pg-prev>
+            <kc-pg-page-info></kc-pg-page-info>
+            <kc-pg-next></kc-pg-next>
+            <kc-pg-items-per-page slot="right" options="5,10,20,50"></kc-pg-items-per-page>
           </k-pagination>
         </k-card>
       </div>
@@ -316,59 +316,59 @@
         </thead>
         <tbody>
           <tr>
-            <td><code>&lt;k-pg-first&gt;</code></td>
-            <td><code>paginationControls/FirstPage.js</code></td>
+            <td><code>&lt;kc-pg-first&gt;</code></td>
+            <td><code>controls/PgFirst.js</code></td>
             <td>Jumps to page 1. Disabled when already on page 1.</td>
           </tr>
           <tr>
-            <td><code>&lt;k-pg-prev&gt;</code></td>
-            <td><code>paginationControls/PrevPage.js</code></td>
+            <td><code>&lt;kc-pg-prev&gt;</code></td>
+            <td><code>controls/PgPrev.js</code></td>
             <td>Goes to the previous page. Disabled when on page 1.</td>
           </tr>
           <tr>
-            <td><code>&lt;k-pg-page-info&gt;</code></td>
-            <td><code>paginationControls/PageInfo.js</code></td>
+            <td><code>&lt;kc-pg-page-info&gt;</code></td>
+            <td><code>controls/PgPageInfo.js</code></td>
             <td>Displays &ldquo;Page X of Y&rdquo; text.</td>
           </tr>
           <tr>
-            <td><code>&lt;k-pg-next&gt;</code></td>
-            <td><code>paginationControls/NextPage.js</code></td>
+            <td><code>&lt;kc-pg-next&gt;</code></td>
+            <td><code>controls/PgNext.js</code></td>
             <td>Goes to the next page. Disabled when on the last page.</td>
           </tr>
           <tr>
-            <td><code>&lt;k-pg-last&gt;</code></td>
-            <td><code>paginationControls/LastPage.js</code></td>
+            <td><code>&lt;kc-pg-last&gt;</code></td>
+            <td><code>controls/PgLast.js</code></td>
             <td>Jumps to the last page. Disabled when already on the last page.</td>
           </tr>
           <tr>
-            <td><code>&lt;k-pg-items-per-page&gt;</code></td>
-            <td><code>paginationControls/ItemsPerPage.js</code></td>
-            <td>A select input for choosing items per page. Defaults to options 10, 25, 50, 100. Use the <code>options</code> attribute with a comma-separated list to customize (e.g. <code>options="5,10,20"</code>). Resets to page 1 on change.</td>
+            <td><code>&lt;kc-pg-items-per-page&gt;</code></td>
+            <td><code>controls/PgItemsPerPage.js</code></td>
+            <td>A select input for choosing items per page. Defaults to options 10, 25, 50, 100. Use the <code>options</code> attribute with a comma-separated list to customize (e.g. <code>options="5,10,20"</code>). Resets to page 1 on change. The label text is slotted — override it with children (e.g. <code>&lt;kc-pg-items-per-page&gt;Per page:&lt;/kc-pg-items-per-page&gt;</code>).</td>
           </tr>
           <tr>
-            <td><code>&lt;k-pg-goto-page&gt;</code></td>
-            <td><code>paginationControls/GotoPage.js</code></td>
+            <td><code>&lt;kc-pg-goto-page&gt;</code></td>
+            <td><code>controls/PgGotoPage.js</code></td>
             <td>A dropdown listing every page number. Selecting a value navigates directly to that page.</td>
           </tr>
           <tr>
-            <td><code>&lt;k-pg-count&gt;</code></td>
-            <td><code>paginationControls/PageCount.js</code></td>
-            <td>Displays the total page count as plain text. Pair with <code>&lt;k-pg-goto-page&gt;</code> to build a &ldquo;Page X of Y&rdquo; control.</td>
+            <td><code>&lt;kc-pg-count&gt;</code></td>
+            <td><code>controls/PgCount.js</code></td>
+            <td>Displays the total page count as plain text. Pair with <code>&lt;kc-pg-goto-page&gt;</code> to build a &ldquo;Page X of Y&rdquo; control.</td>
           </tr>
         </tbody>
       </table>
     </div>
 
     <script type="module" src="{{pathToRoot}}src/components/Pagination.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/paginationControls/PaginationControl.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/paginationControls/FirstPage.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/paginationControls/PrevPage.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/paginationControls/NextPage.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/paginationControls/LastPage.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/paginationControls/PageInfo.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/paginationControls/ItemsPerPage.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/paginationControls/GotoPage.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/paginationControls/PageCount.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/Control.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/PgFirst.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/PgPrev.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/PgNext.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/PgLast.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/PgPageInfo.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/PgItemsPerPage.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/PgGotoPage.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/PgCount.js"></script>
     <script type="module" src="{{pathToRoot}}src/components/Accordion.js"></script>
     <script type="module" src="{{pathToRoot}}src/components/Card.js"></script>
   </content>

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

@@ -45,14 +45,14 @@
     <p>The table component supports controls at both the top and bottom. These controls can handle pagination, adding new records, or other actions. They are web components that interact with their parent <code>k-table</code> by accessing its methods and listening for its events.</p>
     <p>Controls without a slot will be placed at the bottom of the table by default, to place a control on the top of the table give it a <code>slot="top"</code>.</p>
 
-    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"topBottomControlsExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-export-json</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">k-tc-export-csv</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-export-csv</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/tableControls/ExportJson.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/tableControls/ExportCsv.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'topBottomControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
+    <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">k-table</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"topBottomControlsExample"</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-export-json</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"top"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-export-json</span>&gt;</span><br />  <span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-export-csv</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-export-csv</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">k-table</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">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/controls/TcExportJson.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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">"module"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/src/components/controls/TcExportCsv.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</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">"module"</span>&gt;</span><span class="javascript"><br />  <span class="hljs-keyword">await</span> <span class="hljs-built_in">window</span>.customElements.whenDefined(<span class="hljs-string">'k-table'</span>);<br />  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'topBottomControlsExample'</span>).setRecords(contacts);<br /></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     
     <k-table id="topBottomControlsExample">
-      <k-tc-export-json slot="top"></k-tc-export-json>
-      <k-tc-export-csv></k-tc-export-csv>
+      <kc-tc-export-json slot="top"></kc-tc-export-json>
+      <kc-tc-export-csv></kc-tc-export-csv>
     </k-table>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/ExportJson.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/ExportCsv.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcExportJson.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcExportCsv.js"></script>
     <script type="module">
       await window.customElements.whenDefined('k-table');
       document.getElementById('topBottomControlsExample').setRecords(contacts);