kempo-ui 0.4.20 → 0.4.21

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

@@ -62,16 +62,16 @@
       Toasts are used to notify the user of success or failure.
     </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">serverSyncExample</span> <span class="hljs-attr">enable-selection</span> <span class="hljs-attr">request-edit</span> <span class="hljs-attr">request-delete</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">k-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">after</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-edit</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">k-tc-delete-record</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">after</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">k-tc-delete-record</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">k-tc-delete-selected</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-delete-selected</span>&gt;</span><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>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">import</span> <span class="hljs-title class_">Toast</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;/src/components/Toast.js&#x27;</span>;<br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-keyword">const</span> table = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;serverSyncExample&#x27;</span>);<br>  <span class="hljs-keyword">const</span> <span class="hljs-title function_">mockServer</span> = (<span class="hljs-params"></span>) =&gt; <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> {<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {<br>      <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() &lt; <span class="hljs-number">0.8</span> ? <span class="hljs-title function_">resolve</span>() : <span class="hljs-title function_">reject</span>();<br>    }, <span class="hljs-number">1000</span> + <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * <span class="hljs-number">2000</span>);<br>  });<br>  table.<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">records</span>: contacts,<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;email&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Email&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;birthday&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Birthday&#x27;</span>,<br>      <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;date&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;phoneNumber&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Phone Number&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;gender&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Gender&#x27;</span>,<br>      <span class="hljs-attr">formatter</span>: <span class="hljs-function"><span class="hljs-params">v</span> =&gt;</span> v === <span class="hljs-string">&#x27;m&#x27;</span> ? <span class="hljs-string">&#x27;Male&#x27;</span> : <span class="hljs-string">&#x27;Female&#x27;</span><br>    }]<br>  });<br>  table.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;requestSave&#x27;</span>, <span class="hljs-title function_">async</span> ({<br>    <span class="hljs-attr">detail</span>: {<br>      approve,<br>      reject<br>    }<br>  }) =&gt; {<br>    <span class="hljs-keyword">try</span> {<br>      <span class="hljs-keyword">await</span> <span class="hljs-title function_">mockServer</span>();<br>      <span class="hljs-title function_">approve</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">success</span>(<span class="hljs-string">&#x27;Record saved.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br>      });<br>    } <span class="hljs-keyword">catch</span> {<br>      <span class="hljs-title function_">reject</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;Save failed. The record remains open for editing.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span><br>      });<br>    }<br>  });<br>  table.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;requestDelete&#x27;</span>, <span class="hljs-title function_">async</span> ({<br>    <span class="hljs-attr">detail</span>: {<br>      records,<br>      approve,<br>      reject<br>    }<br>  }) =&gt; {<br>    <span class="hljs-keyword">const</span> count = records.<span class="hljs-property">length</span>;<br>    <span class="hljs-keyword">try</span> {<br>      <span class="hljs-keyword">await</span> <span class="hljs-title function_">mockServer</span>();<br>      <span class="hljs-title function_">approve</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">success</span>(count === <span class="hljs-number">1</span> ? <span class="hljs-string">&#x27;1 record deleted.&#x27;</span> : count + <span class="hljs-string">&#x27; records deleted.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br>      });<br>    } <span class="hljs-keyword">catch</span> {<br>      <span class="hljs-title function_">reject</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;Delete failed. Please try again.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span><br>      });<br>    }<br>  });<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">serverSyncExample</span> <span class="hljs-attr">enable-selection</span> <span class="hljs-attr">request-edit</span> <span class="hljs-attr">request-delete</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-edit</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">after</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-edit</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-delete-record</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">after</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">kc-tc-delete-record</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">kc-tc-delete-selected</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-delete-selected</span>&gt;</span><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>&gt;</span><span class="language-javascript"><br>  <span class="hljs-keyword">import</span> <span class="hljs-title class_">Toast</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;/src/components/Toast.js&#x27;</span>;<br>  <span class="hljs-keyword">await</span> <span class="hljs-variable language_">window</span>.<span class="hljs-property">customElements</span>.<span class="hljs-title function_">whenDefined</span>(<span class="hljs-string">&#x27;k-table&#x27;</span>);<br>  <span class="hljs-keyword">const</span> table = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&#x27;serverSyncExample&#x27;</span>);<br>  <span class="hljs-keyword">const</span> <span class="hljs-title function_">mockServer</span> = (<span class="hljs-params"></span>) =&gt; <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =&gt;</span> {<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {<br>      <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() &lt; <span class="hljs-number">0.8</span> ? <span class="hljs-title function_">resolve</span>() : <span class="hljs-title function_">reject</span>();<br>    }, <span class="hljs-number">1000</span> + <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">random</span>() * <span class="hljs-number">2000</span>);<br>  });<br>  table.<span class="hljs-title function_">setData</span>({<br>    <span class="hljs-attr">records</span>: contacts,<br>    <span class="hljs-attr">fields</span>: [{<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;name&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Name&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;email&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Email&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;birthday&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Birthday&#x27;</span>,<br>      <span class="hljs-attr">type</span>: <span class="hljs-string">&#x27;date&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;phoneNumber&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Phone Number&#x27;</span><br>    }, {<br>      <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;gender&#x27;</span>,<br>      <span class="hljs-attr">label</span>: <span class="hljs-string">&#x27;Gender&#x27;</span>,<br>      <span class="hljs-attr">formatter</span>: <span class="hljs-function"><span class="hljs-params">v</span> =&gt;</span> v === <span class="hljs-string">&#x27;m&#x27;</span> ? <span class="hljs-string">&#x27;Male&#x27;</span> : <span class="hljs-string">&#x27;Female&#x27;</span><br>    }]<br>  });<br>  table.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;requestSave&#x27;</span>, <span class="hljs-title function_">async</span> ({<br>    <span class="hljs-attr">detail</span>: {<br>      approve,<br>      reject<br>    }<br>  }) =&gt; {<br>    <span class="hljs-keyword">try</span> {<br>      <span class="hljs-keyword">await</span> <span class="hljs-title function_">mockServer</span>();<br>      <span class="hljs-title function_">approve</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">success</span>(<span class="hljs-string">&#x27;Record saved.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br>      });<br>    } <span class="hljs-keyword">catch</span> {<br>      <span class="hljs-title function_">reject</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;Save failed. The record remains open for editing.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span><br>      });<br>    }<br>  });<br>  table.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&#x27;requestDelete&#x27;</span>, <span class="hljs-title function_">async</span> ({<br>    <span class="hljs-attr">detail</span>: {<br>      records,<br>      approve,<br>      reject<br>    }<br>  }) =&gt; {<br>    <span class="hljs-keyword">const</span> count = records.<span class="hljs-property">length</span>;<br>    <span class="hljs-keyword">try</span> {<br>      <span class="hljs-keyword">await</span> <span class="hljs-title function_">mockServer</span>();<br>      <span class="hljs-title function_">approve</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">success</span>(count === <span class="hljs-number">1</span> ? <span class="hljs-string">&#x27;1 record deleted.&#x27;</span> : count + <span class="hljs-string">&#x27; records deleted.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">3000</span><br>      });<br>    } <span class="hljs-keyword">catch</span> {<br>      <span class="hljs-title function_">reject</span>();<br>      <span class="hljs-title class_">Toast</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">&#x27;Delete failed. Please try again.&#x27;</span>, {<br>        <span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span><br>      });<br>    }<br>  });<br></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre>
     <k-table
       id="serverSyncExample"
       enable-selection
       request-edit
       request-delete
     >
-      <k-tc-edit slot="after"></k-tc-edit>
-      <k-tc-delete-record slot="after"></k-tc-delete-record>
-      <k-tc-delete-selected slot="top"></k-tc-delete-selected>
+      <kc-tc-edit slot="after"></kc-tc-edit>
+      <kc-tc-delete-record slot="after"></kc-tc-delete-record>
+      <kc-tc-delete-selected slot="top"></kc-tc-delete-selected>
     </k-table>
     <script type="module">
       import Toast from '{{pathToRoot}}src/components/Toast.js';
@@ -121,9 +121,9 @@
   </content>
   <content location="scripts">
     <script type="module" src="{{pathToRoot}}src/components/Table.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/Edit.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/DeleteRecord.js"></script>
-    <script type="module" src="{{pathToRoot}}src/components/tableControls/DeleteSelected.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcEdit.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcDeleteRecord.js"></script>
+    <script type="module" src="{{pathToRoot}}src/components/controls/TcDeleteSelected.js"></script>
     <script type="module" src="{{pathToRoot}}src/components/Toast.js"></script>
   </content>
 </page>

package/llms.txt

@@ -57,10 +57,11 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<k-calendar>` | `Calendar.js` | Inline month-grid date picker widget; `mode="single"` (default) or `mode="range"`; `value` is ISO `YYYY-MM-DD` (single) or comma-separated pair (range); `min`/`max` bounds; form-associated; fires `change` | [calendar.html](https://dustinpoissant.github.io/kempo-ui/components/calendar.html) |
 | `<k-card>` | `Card.js` | Bordered container; optional `label` attribute | [card.html](https://dustinpoissant.github.io/kempo-ui/components/card.html) |
 | `<k-chat>` | `Chat.js` | Chat-room widget; markdown input via embedded `<k-markdown-editor>` (rendered through `marked` with `breaks:true` so single newlines become `<br>`, then run through `sanitizeHtml` so any inline HTML is filtered against the allow-list); default Enter sends / Shift+Enter newline (Slack-style), add `enter-newline` to invert; `show-status` (or `show-status="text"` / `show-status="icons"`) renders iMessage-style `sending`/`delivered`/`read`/`failed` only on the most recent outgoing message (sending/failed always show); methods `addMessage(msg)`, `updateMessage(id, updates)`, `removeMessage(id)`, `clear()`, `send()`; fires `send` with `{id, html, markdown}` | [chat.html](https://dustinpoissant.github.io/kempo-ui/components/chat.html) |
-| `<k-code-editor>` | `CodeEditor.js` | Monaco-powered code editor; `value`, `language`, `controls`, `disabled`/`readonly`/`required` attributes; form-associated (full validity + reset/restore/disabled callbacks); theme-aware | [code-editor.html](https://dustinpoissant.github.io/kempo-ui/components/code-editor.html) |
+| `<k-code-editor>` | `CodeEditor.js` | Monaco-powered code editor; `value`, `language`, `controls`, `disabled`/`required` attributes; form-associated (full validity + reset/restore/disabled callbacks); theme-aware; toolbar button controls use the unified `kc-*` prefix and extend `ButtonControl` from `controls/Button.js` | [code-editor.html](https://dustinpoissant.github.io/kempo-ui/components/code-editor.html) |
 | `<k-color-picker>` | `ColorPicker.js` | Full color picker (hex, rgb, hsl, hsv, alpha); `value` property | [color-picker.html](https://dustinpoissant.github.io/kempo-ui/components/color-picker.html) |
 | `<k-combobox>` | `Combobox.js` | Searchable dropdown with debounced `search` event, dynamic `setOptions()`, `searching` indicator, keyboard nav; options are strings or `{label, value}` objects | [combobox.html](https://dustinpoissant.github.io/kempo-ui/components/combobox.html) |
 | `<k-content-slider>` | `ContentSlider.js` | Swipeable carousel | [content-slider.html](https://dustinpoissant.github.io/kempo-ui/components/content-slider.html) |
+| `<k-control-group>` | `ControlGroup.js` | Groups toolbar controls visually; strips child borders/radius/margin and adds right-side separators via `::slotted(*)`; auto-hides when all children are hidden; used internally by CodeEditor, HtmlEditor, and other toolbar-based components | — |
 | `<k-context>` | `Context.js` | Non-rendering state container; `set(key,value)`, `get(key)`, `delete(key)`, `clear()`, `getData()`; fires `context:create`, `context:set`, `context:delete` | [context.html](https://dustinpoissant.github.io/kempo-ui/components/context.html) |
 | `<k-dialog>` | `Dialog.js` | Modal dialog with focus trapping; call `.open()` / `.close()` | [dialog.html](https://dustinpoissant.github.io/kempo-ui/components/dialog.html) |
 | `<k-dropdown>` | `Dropdown.js` | Action menu with keyboard navigation | [dropdown.html](https://dustinpoissant.github.io/kempo-ui/components/dropdown.html) |
@@ -68,14 +69,14 @@ import { html, css, LitElement } from 'kempo-ui/src/lit-all.min.js';
 | `<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-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 `controls/` with `kc-*` prefix (`kc-bold`, `kc-italic`, `kc-strikethrough` (`~~...~~`), `kc-format-block` w/ `tag` (heading picker — `h1`-`h6`), `kc-inline-code`, `kc-md-link`, `kc-md-image` w/ `popup` (opens a Dropdown by default — `popup="dialog"` to switch to modal Dialog — for URL + alt text), `kc-md-table` (small Dropdown with cols × rows inputs + Create button, inserts a GFM markdown table), `kc-menu` w/ `label` (toolbar button that opens a Dropdown of slotted child controls; `icon` slot customizes the trigger button content), `kc-md-speech-to-text` w/ `language`/`continuous` (wraps `<k-speech-to-text>`; final transcript is inserted at the cursor), `kc-bullet-list`, `kc-number-list`, `kc-quote`); extend `ButtonControl` from `controls/Button.js` for custom buttons; fires `input`, `change`, `mode-changed` | [markdown-editor.html](https://dustinpoissant.github.io/kempo-ui/components/markdown-editor.html) |
 | `<k-icon>` | `Icon.js` | SVG icon; `name` (looked up in `pathsToIcons`) or `src` (direct URL); `rotation`, `direction`, `animation` attributes | [icon.html](https://dustinpoissant.github.io/kempo-ui/components/icon.html) |
 | `<k-import>` | `Import.js` | Includes external HTML fragments; `src` attribute | [import.html](https://dustinpoissant.github.io/kempo-ui/components/import.html) |
 | `<k-main>` | `Main.js` | Layout main; automatically adjusts margins when a `k-aside[main="push"]` opens | — |
 | `<k-nav>` | `Nav.js` | Navigation bar | [nav.html](https://dustinpoissant.github.io/kempo-ui/components/nav.html) |
 | `<k-nav-spacer>` | `NavSpacer.js` | Auto-sizing spacer that offsets page content below a fixed `k-nav` bar; default bottom margin of `var(--spacer)` can be overridden with kempo-css margin utilities | [nav-spacer.html](https://dustinpoissant.github.io/kempo-ui/components/nav-spacer.html) |
 | `<k-photo-viewer>` | `PhotoViewer.js` | Lightbox/gallery viewer | [photo-viewer.html](https://dustinpoissant.github.io/kempo-ui/components/photo-viewer.html) |
-| `<k-pagination>` | `Pagination.js` | Pagination interface; tracks current page; `total-items`, `items-per-page`, and `page` attributes; computed `totalPages` getter; `nextPage()`, `previousPage()` methods; fires `page-change` with `{ currentPage, totalPages, itemsPerPage, totalItems }` on any page change (user-initiated or from configuration updates); controls slotted in or via `controls="simple"` (prev/info/next) or `controls="full"` (first/prev/goto-page/next/last/items-per-page); individual control tags: `k-pg-first`, `k-pg-prev`, `k-pg-page-info`, `k-pg-goto-page`, `k-pg-count`, `k-pg-next`, `k-pg-last`, `k-pg-items-per-page`; extend `PaginationControl` for custom controls | [pagination.html](https://dustinpoissant.github.io/kempo-ui/components/pagination.html) |
+| `<k-pagination>` | `Pagination.js` | Pagination interface; tracks current page; `total-items`, `items-per-page`, and `page` attributes; computed `totalPages` getter; `nextPage()`, `previousPage()` methods; fires `page-change` with `{ currentPage, totalPages, itemsPerPage, totalItems }` on any page change (user-initiated or from configuration updates); controls slotted in or via `controls="simple"` (prev/info/next) or `controls="full"` (first/prev/goto-page/next/last/items-per-page); individual control tags: `kc-pg-first`, `kc-pg-prev`, `kc-pg-page-info`, `kc-pg-goto-page`, `kc-pg-count`, `kc-pg-next`, `kc-pg-last`, `kc-pg-items-per-page` (label text is slotted — override with children); extend `Control` from `controls/Control.js` for custom controls | [pagination.html](https://dustinpoissant.github.io/kempo-ui/components/pagination.html) |
 | `<k-resize>` | `Resize.js` | Resizable pane with drag handle | [resize.html](https://dustinpoissant.github.io/kempo-ui/components/resize.html) |
 | `<k-segmented-control>` | `SegmentedControl.js` | Button group with one selectable option; accepts custom sub-components as options; `value` property reflects the selected option's value; fires `change` event | [segmented-control.html](https://dustinpoissant.github.io/kempo-ui/components/segmented-control.html) |
 | `<k-show-more>` | `ShowMore.js` | Truncated content with expand toggle | [show-more.html](https://dustinpoissant.github.io/kempo-ui/components/show-more.html) |
@@ -136,6 +137,39 @@ Base class for custom elements that behave like buttons. The custom element itse
 - Public event handlers `handleClick` / `handleKeyDown` are arrow class fields — override or reference directly
 - **Not registered to a tag** — extend it and call `customElements.define()`
 
+### Unified Control Architecture (`controls/`)
+
+All toolbar controls for CodeEditor, HtmlEditor, MarkdownEditor, Pagination, and Table use the `kc-*` tag prefix and live in `src/components/controls/`. Three base classes:
+
+#### Control ← ShadowComponent (`controls/Control.js`, tag `kc-control`)
+
+Base for non-button controls (dropdowns, inputs, status displays).
+
+- `static requires = ['methodName', ...]` — host must expose these methods; missing → `disabled=true`
+- `static hostMode = 'write'` or `['write', 'code']` — control hides when host's `mode` doesn't match (only checked when `'mode' in host`)
+- `static hostEvents = ['event-name', ...]` — host events that trigger `requestUpdate()`
+- `get host()` — walks shadow boundaries via `getRootNode()` → `closest('[controlled]')` to find the host component
+- `invokeHost(method, ...args)` — safe method call on host
+
+#### ButtonControl ← Control (`controls/Button.js`, tag `kc-button`)
+
+Base for button-style controls. The host element IS the button (no inner `<button>`).
+
+- Sets `role="button"`, `tabindex`, `aria-disabled`
+- `handleAction()` — override point; called on click / Enter / Space
+- Default `render()` returns `<slot></slot>`
+
+#### ControlMenu ← Control (`controls/Menu.js`, tag `kc-menu`)
+
+Dropdown menu trigger for grouping controls. Renders `<k-dropdown>` with a trigger button.
+
+- Slots: `icon` for trigger icon, `label` for trigger text, default slot for menu items
+- `::slotted` unifies menu item styling
+
+#### loadControls helper (`controls/loadControls.js`)
+
+Parses Lit `TemplateResult.strings` to find `<kc-*>` and `<k-control-group>` tags, converts tag names to PascalCase file paths, and dynamically imports them. Called by host components when `controls` attribute is set.
+
 ---
 
 ## Creating a Custom Component

package/package.json

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

package/src/components/Chat.js

@@ -3,13 +3,13 @@ import ShadowComponent from './ShadowComponent.js';
 import sanitizeHtml from '../utils/sanitizeHtml.js';
 import renderMarkdown from '../utils/renderMarkdown.js';
 import './MarkdownEditor.js';
-import './markdownEditorControls/Bold.js';
-import './markdownEditorControls/Italic.js';
-import './markdownEditorControls/Code.js';
-import './markdownEditorControls/Link.js';
-import './markdownEditorControls/BulletList.js';
-import './markdownEditorControls/NumberedList.js';
-import './markdownEditorControls/Quote.js';
+import './controls/Bold.js';
+import './controls/Italic.js';
+import './controls/InlineCode.js';
+import './controls/MdLink.js';
+import './controls/BulletList.js';
+import './controls/NumberList.js';
+import './controls/Quote.js';
 import './Spinner.js';
 import './Icon.js';
 
@@ -247,13 +247,13 @@ export default class Chat extends ShadowComponent {
         >
           <div slot="controls-top" class="controls-top">
             <slot name="controls-top">
-              <k-md-bold></k-md-bold>
-              <k-md-italic></k-md-italic>
-              <k-md-code></k-md-code>
-              <k-md-link></k-md-link>
-              <k-md-bullet-list></k-md-bullet-list>
-              <k-md-numbered-list></k-md-numbered-list>
-              <k-md-quote></k-md-quote>
+              <kc-bold></kc-bold>
+              <kc-italic></kc-italic>
+              <kc-inline-code></kc-inline-code>
+              <kc-md-link></kc-md-link>
+              <kc-bullet-list></kc-bullet-list>
+              <kc-number-list></kc-number-list>
+              <kc-quote></kc-quote>
             </slot>
           </div>
           <div slot="controls-bottom" class="controls-bottom">

package/src/components/CodeEditor.js

@@ -2,6 +2,7 @@ import { html, css } from '../lit-all.min.js';
 import ShadowComponent from './ShadowComponent.js';
 import formatCode from '../utils/formatCode.js';
 import { getCalculatedTheme, subscribeToTheme } from '../utils/theme.js';
+import Control from './controls/Control.js';
 
 /*
 	Default CDN URL
@@ -56,6 +57,7 @@ export default class CodeEditor extends ShadowComponent {
 	*/
 	connectedCallback() {
 		super.connectedCallback();
+		if(!this.hasAttribute('controlled')) this.setAttribute('controlled', '');
 		if(this.hasAttribute('value')){
 			this.value = this.getAttribute('value');
 		}
@@ -161,11 +163,9 @@ export default class CodeEditor extends ShadowComponent {
 		Module Loading
 	*/
 	loadControls() {
-		const modules = this.constructor.controlModules[this.controls];
-		if(!modules?.length) return;
-		const loaded = this.constructor.loadedModules;
-		const base = new URL('./codeEditorControls/', import.meta.url).href;
-		modules.filter(m => !loaded.has(m)).forEach(m => { loaded.add(m); import(`${base}${m}.js`); });
+		const set = this.constructor.controlSets[this.controls];
+		if(!set) return;
+		Control.load(Object.values(set));
 	}
 
 	async initMonaco() {
@@ -401,34 +401,29 @@ export default class CodeEditor extends ShadowComponent {
 	/*
 		Rendering
 	*/
-	static loadedModules = new Set();
-	static controlModules = {
-		full: ['FormatCode', 'CopyCode', 'EditorTheme', 'Undo', 'Redo', 'WordWrap', 'Minimap', 'FindReplace', 'FontSize', 'FoldAll', 'LanguageSelect', 'Fullscreen', 'ControlGroup', 'ControlSpacer']
-	};
-
 	static controlSets = {
 		full: {
 			topLeft: html`
-				<k-cec-group>
-					<k-cec-undo></k-cec-undo>
-					<k-cec-redo></k-cec-redo>
-				</k-cec-group>
-				<k-cec-group>
-					<k-cec-format-code></k-cec-format-code>
-					<k-cec-copy-code></k-cec-copy-code>
-					<k-cec-find-replace></k-cec-find-replace>
-				</k-cec-group>
-				<k-cec-group>
-					<k-cec-word-wrap></k-cec-word-wrap>
-					<k-cec-minimap></k-cec-minimap>
-					<k-cec-fold-all></k-cec-fold-all>
-				</k-cec-group>
-				<k-cec-font-size></k-cec-font-size>
+				<k-control-group>
+					<kc-undo></kc-undo>
+					<kc-redo></kc-redo>
+				</k-control-group>
+				<k-control-group>
+					<kc-format-code></kc-format-code>
+					<kc-copy-code></kc-copy-code>
+					<kc-find-replace></kc-find-replace>
+				</k-control-group>
+				<k-control-group>
+					<kc-word-wrap></kc-word-wrap>
+					<kc-minimap></kc-minimap>
+					<kc-fold-all></kc-fold-all>
+				</k-control-group>
+				<kc-font-size></kc-font-size>
 			`,
 			topRight: html`
-				<k-cec-language></k-cec-language>
-				<k-cec-editor-theme></k-cec-editor-theme>
-				<k-cec-fullscreen></k-cec-fullscreen>
+				<kc-language></kc-language>
+				<kc-editor-theme></kc-editor-theme>
+				<kc-fullscreen></kc-fullscreen>
 			`,
 			bottomLeft: null,
 			bottomRight: null,
@@ -445,10 +440,9 @@ export default class CodeEditor extends ShadowComponent {
 		}
 		:host([fullscreen]) {
 			position: fixed;
-			top: 0;
-			left: 0;
-			width: 100vw;
-			height: 100vh;
+			inset: 0;
+			width: auto;
+			height: auto;
 			z-index: 10000;
 		}
 		.toolbar-top,

package/src/components/{codeEditorControls/ControlGroup.js → ControlGroup.js}

@@ -1,5 +1,5 @@
-import ShadowComponent from '../ShadowComponent.js';
-import { html, css } from '../../lit-all.min.js';
+import ShadowComponent from './ShadowComponent.js';
+import { html, css } from '../lit-all.min.js';
 
 export default class ControlGroup extends ShadowComponent {
 	static properties = {
@@ -53,8 +53,13 @@ export default class ControlGroup extends ShadowComponent {
 			display: none !important;
 		}
 		::slotted(*) {
-			margin-top: -1px;
-			margin-bottom: -1px;
+			border: 0;
+			border-right: 1px solid var(--c_border);
+			border-radius: 0;
+			margin: 0;
+		}
+		::slotted(*:last-child) {
+			border-right: 0;
 		}
 	`;
 
@@ -66,5 +71,4 @@ export default class ControlGroup extends ShadowComponent {
 	}
 }
 
-customElements.define('k-cec-group', ControlGroup);
-
+customElements.define('k-control-group', ControlGroup);