kempo-ui 0.4.20 → 0.4.21

package/src/components/controls/FoldAll.js

@@ -0,0 +1,35 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class FoldAll extends ButtonControl {
+  static requires = ['foldAll', 'unfoldAll'];
+  static hostMode = 'code';
+
+  static properties = {
+    ...ButtonControl.properties,
+    folded: { type: Boolean, state: true }
+  };
+
+  constructor() {
+    super();
+    this.folded = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Fold All';
+  }
+
+  handleAction() {
+    this.folded = !this.folded;
+    if(this.folded) this.host?.foldAll?.();
+    else this.host?.unfoldAll?.();
+  }
+
+  render() {
+    return html`<slot><k-icon name="${this.folded ? 'unfold_more' : 'unfold_less'}"></k-icon></slot>`;
+  }
+}
+
+customElements.define('kc-fold-all', FoldAll);

package/src/components/controls/FontSize.js

@@ -0,0 +1,31 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+import './FontSizeIncrease.js';
+import './FontSizeDecrease.js';
+import '../ControlGroup.js';
+
+/*
+  Composite control rendering decrease + increase as a single grouped pair.
+  Mode/host visibility follows the children.
+*/
+export default class FontSize extends Control {
+  static hostMode = 'code';
+
+  static styles = [
+    Control.styles,
+    css`
+      :host { gap: 0; }
+    `
+  ];
+
+  render() {
+    return html`
+      <k-control-group class="b r mq">
+        <kc-font-size-decrease></kc-font-size-decrease>
+        <kc-font-size-increase></kc-font-size-increase>
+      </k-control-group>
+    `;
+  }
+}
+
+customElements.define('kc-font-size', FontSize);

package/src/components/controls/FontSizeDecrease.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class FontSizeDecrease extends ButtonControl {
+  static requires = ['decreaseFontSize'];
+  static hostMode = 'code';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Decrease Font Size';
+  }
+
+  handleAction() { this.host?.decreaseFontSize?.(); }
+
+  render() { return html`<slot><k-icon name="text_decrease"></k-icon></slot>`; }
+}
+
+customElements.define('kc-font-size-decrease', FontSizeDecrease);

package/src/components/controls/FontSizeIncrease.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class FontSizeIncrease extends ButtonControl {
+  static requires = ['increaseFontSize'];
+  static hostMode = 'code';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Increase Font Size';
+  }
+
+  handleAction() { this.host?.increaseFontSize?.(); }
+
+  render() { return html`<slot><k-icon name="text_increase"></k-icon></slot>`; }
+}
+
+customElements.define('kc-font-size-increase', FontSizeIncrease);

package/src/components/controls/FormatBlock.js

@@ -0,0 +1,64 @@
+import ButtonControl from './ButtonControl.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+const TAG_LABELS = {
+  p: 'Paragraph',
+  h1: 'Heading 1', h2: 'Heading 2', h3: 'Heading 3',
+  h4: 'Heading 4', h5: 'Heading 5', h6: 'Heading 6',
+  blockquote: 'Blockquote',
+  pre: 'Code Block'
+};
+
+const TAG_ICONS = {
+  p: 'format_paragraph',
+  h1: 'format_h1', h2: 'format_h2', h3: 'format_h3',
+  h4: 'format_h4', h5: 'format_h5', h6: 'format_h6',
+  blockquote: 'format_quote',
+  pre: 'code_blocks'
+};
+
+export default class FormatBlock extends ButtonControl {
+  static requires = ['formatBlock'];
+  static hostMode = ['visual', 'write'];
+
+  static properties = {
+    ...ButtonControl.properties,
+    tag: { type: String, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.tag = 'p';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = TAG_LABELS[this.tag] || this.tag;
+  }
+
+  getDefaultLabel(tag) { return TAG_LABELS[tag || this.tag] || (tag || this.tag).toUpperCase(); }
+  getDefaultIcon(tag) { return TAG_ICONS[tag || this.tag] || 'format_paragraph'; }
+
+  handleAction() { this.host?.formatBlock?.(this.tag); }
+
+  render() {
+    const label = TAG_LABELS[this.tag] || this.tag.toUpperCase();
+    const icon = TAG_ICONS[this.tag] || 'format_paragraph';
+    return html`
+      <slot name="icon"><k-icon name=${icon}></k-icon></slot>
+      <slot>${label}</slot>
+    `;
+  }
+
+  static styles = [
+    ButtonControl.styles,
+    css`
+      :host {
+        gap: 0.5rem;
+      }
+    `
+  ];
+}
+
+customElements.define('kc-format-block', FormatBlock);

package/src/components/controls/FormatCode.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class FormatCode extends ButtonControl {
+  static requires = ['formatCode'];
+  static hostMode = 'code';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Format Code';
+  }
+
+  handleAction() { this.host?.formatCode?.(); }
+
+  render() { return html`<slot><k-icon name="frame_source"></k-icon></slot>`; }
+}
+
+customElements.define('kc-format-code', FormatCode);

package/src/components/controls/Fullscreen.js

@@ -0,0 +1,42 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class Fullscreen extends ButtonControl {
+  static requires = ['toggleFullscreen'];
+  static hostEvents = ['fullscreen-changed'];
+
+  static properties = {
+    ...ButtonControl.properties,
+    fullscreen: { type: Boolean, state: true }
+  };
+
+  constructor() {
+    super();
+    this.fullscreen = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Fullscreen';
+    if(this.host) this.fullscreen = !!this.host.fullscreen;
+  }
+
+  willUpdate(changed) {
+    super.willUpdate?.(changed);
+    if(this.host) this.fullscreen = !!this.host.fullscreen;
+  }
+
+  updated(changed) {
+    super.updated(changed);
+    if(changed.has('fullscreen')) this.toggleAttribute('active', this.fullscreen);
+  }
+
+  handleAction() { this.host?.toggleFullscreen?.(); }
+
+  render() {
+    return html`<slot><k-icon name="${this.fullscreen ? 'fullscreen_exit' : 'fullscreen'}"></k-icon></slot>`;
+  }
+}
+
+customElements.define('kc-fullscreen', Fullscreen);

package/src/components/controls/InlineCode.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class InlineCode extends ButtonControl {
+  static requires = ['inlineCode'];
+  static hostMode = ['visual', 'write'];
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Inline Code';
+  }
+
+  handleAction() { this.host?.inlineCode?.(); }
+
+  render() { return html`<slot><k-icon name="code_blocks"></k-icon></slot>`; }
+}
+
+customElements.define('kc-inline-code', InlineCode);

package/src/components/controls/InsertTable.js

@@ -0,0 +1,67 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+import Dialog from '../Dialog.js';
+
+export default class InsertTable extends ButtonControl {
+  static requires = ['insertTable'];
+  static hostMode = 'visual';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Insert Table';
+  }
+
+  handleAction() {
+    const host = this.host;
+    if(!host) return;
+    const existing = host.getTableAtSelection?.();
+    const isEditing = !!existing;
+    const defRows = existing?.rows ?? 3;
+    const defCols = existing?.cols ?? 3;
+    const defHeaders = existing?.hasHeaders ?? true;
+    const cellData = existing?.cellData ?? null;
+
+    const rowsInput = document.createElement('input');
+    rowsInput.type = 'number'; rowsInput.min = '1'; rowsInput.max = '20'; rowsInput.value = String(defRows);
+    rowsInput.style.cssText = 'padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;';
+
+    const colsInput = document.createElement('input');
+    colsInput.type = 'number'; colsInput.min = '1'; colsInput.max = '10'; colsInput.value = String(defCols);
+    colsInput.style.cssText = 'padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;';
+
+    const headersCheckbox = document.createElement('input');
+    headersCheckbox.type = 'checkbox'; headersCheckbox.checked = defHeaders;
+    headersCheckbox.id = 'kc-table-headers';
+
+    const content = document.createElement('div');
+    content.className = 'p';
+    content.style.cssText = 'display: flex; flex-direction: column; gap: 1rem;';
+    content.innerHTML = `
+      <div style="display: flex; flex-direction: column; gap: 0.5rem;"><label style="font-weight: bold;">Rows</label></div>
+      <div style="display: flex; flex-direction: column; gap: 0.5rem;"><label style="font-weight: bold;">Columns</label></div>
+      <div style="display: flex; align-items: center; gap: 0.5rem;"><label for="kc-table-headers" style="font-weight: bold;">Include Headers</label></div>
+    `;
+    content.children[0].appendChild(rowsInput);
+    content.children[1].appendChild(colsInput);
+    content.children[2].insertBefore(headersCheckbox, content.children[2].firstChild);
+
+    Dialog.create(content, {
+      title: isEditing ? 'Edit Table' : 'Insert Table',
+      cancelText: 'Cancel',
+      confirmText: isEditing ? 'Update Table' : 'Insert Table',
+      confirmClasses: 'success',
+      confirmAction: () => {
+        const rows = parseInt(rowsInput.value) || 3;
+        const cols = parseInt(colsInput.value) || 3;
+        const includeHeaders = headersCheckbox.checked;
+        if(isEditing) host.removeTableByKey?.(existing.key);
+        host.insertTable(rows, cols, includeHeaders, cellData);
+      }
+    });
+  }
+
+  render() { return html`<slot><k-icon name="table"></k-icon></slot>`; }
+}
+
+customElements.define('kc-insert-table', InsertTable);

package/src/components/controls/Italic.js

@@ -0,0 +1,19 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+export default class Italic extends ButtonControl {
+  static requires = ['italic'];
+  static hostMode = ['visual', 'write'];
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Italic';
+  }
+
+  handleAction() { this.host?.italic?.(); }
+
+  render() { return html`<slot><k-icon name="format_italic"></k-icon></slot>`; }
+}
+
+customElements.define('kc-italic', Italic);

package/src/components/controls/Language.js

@@ -0,0 +1,69 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+
+const COMMON_LANGUAGES = [
+  'javascript', 'typescript', 'html', 'css', 'json',
+  'markdown', 'python', 'java', 'csharp', 'cpp',
+  'go', 'rust', 'php', 'ruby', 'sql',
+  'xml', 'yaml', 'shell', 'plaintext'
+];
+
+export default class LanguageSelect extends Control {
+  static requires = ['setLanguage'];
+  static hostMode = 'code';
+  static hostEvents = ['language-changed'];
+
+  static properties = {
+    ...Control.properties,
+    value: { type: String, state: true }
+  };
+
+  constructor() {
+    super();
+    this.value = 'javascript';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(this.host) this.value = this.host.language || 'javascript';
+  }
+
+  willUpdate(changed) {
+    super.willUpdate?.(changed);
+    if(this.host) this.value = this.host.language || 'javascript';
+  }
+
+  handleChange = e => { this.host?.setLanguage?.(e.target.value); };
+
+  static styles = [
+    Control.styles,
+    css`
+      :host {
+        background-color: var(--input_bg);
+        color: var(--input_tc);
+        border: var(--input_border_width) solid var(--c_input_border);
+        border-radius: var(--radius);
+        transition: box-shadow var(--animation_ms);
+        margin-right: var(--spacer_q);
+      }
+      select {
+        border: 0;
+        padding: var(--spacer_h) var(--spacer);
+        min-height: 2.5rem;
+      }
+    `
+  ];
+
+  render() {
+    return html`
+      <select .value=${this.value} @change=${this.handleChange} title="Language">
+        ${COMMON_LANGUAGES.map(lang => html`
+          <option value="${lang}" ?selected=${this.value === lang}>${lang}</option>
+        `)}
+      </select>
+    `;
+  }
+}
+
+customElements.define('kc-language', LanguageSelect);

package/src/components/controls/MdImage.js

@@ -0,0 +1,72 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+import '../Dropdown.js';
+
+export default class MdImage extends Control {
+  static requires = ['replaceSelection'];
+  static hostMode = 'write';
+
+  handleDropdownOpened = () => {
+    requestAnimationFrame(() => {
+      const url = this.shadowRoot.querySelector('.image-url');
+      const alt = this.shadowRoot.querySelector('.image-alt');
+      url?.focus();
+      const ta = this.host?.textarea;
+      if(ta && alt) alt.value = ta.value.substring(ta.selectionStart, ta.selectionEnd) || '';
+    });
+  };
+
+  handleDropdownClosed = () => {
+    const u = this.shadowRoot.querySelector('.image-url');
+    const a = this.shadowRoot.querySelector('.image-alt');
+    if(u) u.value = '';
+    if(a) a.value = '';
+  };
+
+  handleFormKeydown = (e) => {
+    if(e.key === 'Enter'){ e.preventDefault(); this.submit(); }
+    else if(e.key === 'Escape') this.shadowRoot.querySelector('k-dropdown')?.close();
+  };
+
+  submit() {
+    const url = this.shadowRoot.querySelector('.image-url').value.trim();
+    const alt = this.shadowRoot.querySelector('.image-alt').value.trim();
+    if(!url){ this.shadowRoot.querySelector('.image-url').focus(); return; }
+    this.host?.replaceSelection?.(`![${alt}](${url})`, { selectInserted: false });
+    this.shadowRoot.querySelector('k-dropdown')?.close();
+  }
+
+  render() {
+    return html`
+      <k-dropdown @opened=${this.handleDropdownOpened} @closed=${this.handleDropdownClosed}>
+        <button slot="trigger" type="button" class="trigger" title="Image"><k-icon name="image"></k-icon></button>
+        <div class="image-form" @keydown=${this.handleFormKeydown}>
+          <label>Image URL</label>
+          <input class="image-url" type="url" required placeholder="https://example.com/image.png" />
+          <label>Alt text</label>
+          <input class="image-alt" type="text" placeholder="Description for screen readers" />
+          <div class="image-actions">
+            <button type="button" @click=${() => this.shadowRoot.querySelector('k-dropdown').close()}>Cancel</button>
+            <button type="button" class="primary" @click=${() => this.submit()}>Insert</button>
+          </div>
+        </div>
+      </k-dropdown>
+    `;
+  }
+
+  static styles = [
+    Control.styles,
+    css`
+      .trigger { min-width: 2.5rem; min-height: 2.5rem; background: transparent; border: none; cursor: pointer; }
+      .image-form { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; min-width: 16rem; }
+      .image-form label { font-weight: bold; font-size: 0.875rem; }
+      .image-form input { padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit; }
+      .image-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; }
+      .image-actions button { padding: 0.4rem 0.8rem; border: 1px solid var(--c_border); border-radius: var(--radius); cursor: pointer; font: inherit; }
+      .image-actions button.primary { background: var(--c_primary); color: white; border-color: var(--c_primary); }
+    `
+  ];
+}
+
+customElements.define('kc-md-image', MdImage);

package/src/components/controls/MdLink.js

@@ -0,0 +1,60 @@
+import ButtonControl from './ButtonControl.js';
+import { html } from '../../lit-all.min.js';
+import '../Icon.js';
+
+/*
+  Markdown Link control. Toggles `[text](url)` wrapping. If the cursor is
+  inside an existing link, unwraps it to just the label.
+*/
+export default class MdLink extends ButtonControl {
+  static requires = ['replaceSelection'];
+  static hostMode = 'write';
+
+  connectedCallback() {
+    super.connectedCallback();
+    if(!this.hasAttribute('title')) this.title = 'Link';
+  }
+
+  handleAction() {
+    const host = this.host;
+    if(!host) return;
+    const ta = host.textarea;
+    if(!ta) return;
+    const start = ta.selectionStart;
+    const end = ta.selectionEnd;
+    const selText = ta.value.substring(start, end);
+
+    const re = /\[([^\]]*)\]\([^)]*\)/g;
+    let m;
+    while((m = re.exec(ta.value)) !== null){
+      const ms = m.index;
+      const me = ms + m[0].length;
+      if(start >= ms && end <= me){
+        const label = m[1];
+        const next = ta.value.substring(0, ms) + label + ta.value.substring(me);
+        ta.value = next;
+        ta.selectionStart = ms;
+        ta.selectionEnd = ms + label.length;
+        ta.focus();
+        host.value = next;
+        ta.dispatchEvent(new Event('input', { bubbles: true }));
+        return;
+      }
+    }
+
+    const text = selText || 'link text';
+    const inserted = `[${text}](url)`;
+    const next = ta.value.substring(0, start) + inserted + ta.value.substring(end);
+    const urlStart = start + 1 + text.length + 2;
+    ta.value = next;
+    ta.selectionStart = urlStart;
+    ta.selectionEnd = urlStart + 'url'.length;
+    ta.focus();
+    host.value = next;
+    ta.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+
+  render() { return html`<slot><k-icon name="link"></k-icon></slot>`; }
+}
+
+customElements.define('kc-md-link', MdLink);

package/src/components/controls/MdSpeechToText.js

@@ -0,0 +1,46 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+import '../SpeechToText.js';
+
+export default class MdSpeechToText extends Control {
+  static requires = ['replaceSelection'];
+  static hostMode = 'write';
+
+  static properties = {
+    ...Control.properties,
+    language: { type: String, reflect: true },
+    continuous: { type: Boolean, reflect: true }
+  };
+
+  constructor() {
+    super();
+    this.language = 'en-US';
+    this.continuous = false;
+  }
+
+  handleEnd = (e) => {
+    const text = (e.detail?.text || '').trim();
+    if(!text) return;
+    this.host?.replaceSelection?.(text + ' ', { selectInserted: false });
+  };
+
+  render() {
+    return html`
+      <k-speech-to-text
+        language=${this.language}
+        ?continuous=${this.continuous}
+        @end=${this.handleEnd}
+      ></k-speech-to-text>
+    `;
+  }
+
+  static styles = [
+    Control.styles,
+    css`
+      :host { margin: var(--spacer_q); }
+      k-speech-to-text { --btn_size: 2rem; }
+    `
+  ];
+}
+
+customElements.define('kc-md-speech-to-text', MdSpeechToText);

package/src/components/controls/MdTable.js

@@ -0,0 +1,79 @@
+import Control from './Control.js';
+import { html, css } from '../../lit-all.min.js';
+import '../Icon.js';
+import '../Dropdown.js';
+import { bound } from '../../utils/number.js';
+
+export default class MdTable extends Control {
+  static requires = ['replaceSelection'];
+  static hostMode = 'write';
+
+  handleDropdownOpened = () => {
+    requestAnimationFrame(() => {
+      const cols = this.shadowRoot.querySelector('.tbl-cols');
+      if(cols){ cols.value = '3'; cols.select(); }
+      const rows = this.shadowRoot.querySelector('.tbl-rows');
+      if(rows) rows.value = '2';
+    });
+  };
+
+  handleFormKeydown = (e) => {
+    if(e.key === 'Enter'){ e.preventDefault(); this.submit(); }
+    else if(e.key === 'Escape') this.shadowRoot.querySelector('k-dropdown')?.close();
+  };
+
+  submit() {
+    const cols = this.clamp(this.shadowRoot.querySelector('.tbl-cols').value, 1, 20);
+    const rows = this.clamp(this.shadowRoot.querySelector('.tbl-rows').value, 1, 50);
+    if(!cols || !rows) return;
+    this.host?.replaceSelection?.(this.buildTable(cols, rows), { selectInserted: false });
+    this.shadowRoot.querySelector('k-dropdown')?.close();
+  }
+
+  clamp(raw, min, max) {
+    const n = parseInt(raw, 10);
+    if(!Number.isFinite(n)) return 0;
+    return bound(n, min, max);
+  }
+
+  buildTable(cols, rows) {
+    const headerCells = Array.from({ length: cols }, (_, i) => ` Header ${i + 1} `).join('|');
+    const separatorCells = Array.from({ length: cols }, () => ' --- ').join('|');
+    const bodyCells = Array.from({ length: cols }, () => '   ').join('|');
+    const lines = [
+      `|${headerCells}|`,
+      `|${separatorCells}|`,
+      ...Array.from({ length: rows }, () => `|${bodyCells}|`)
+    ];
+    return `\n${lines.join('\n')}\n`;
+  }
+
+  render() {
+    return html`
+      <k-dropdown @opened=${this.handleDropdownOpened}>
+        <button slot="trigger" type="button" class="trigger" title="Table"><k-icon name="table"></k-icon></button>
+        <div class="tbl-form" @keydown=${this.handleFormKeydown}>
+          <input class="tbl-cols" type="number" min="1" max="20" inputmode="numeric" aria-label="Columns" value="3" />
+          <span class="tbl-x" aria-hidden="true">×</span>
+          <input class="tbl-rows" type="number" min="1" max="50" inputmode="numeric" aria-label="Rows" value="2" />
+          <button type="button" class="primary" @click=${() => this.submit()}>Insert</button>
+        </div>
+      </k-dropdown>
+    `;
+  }
+
+  static styles = [
+    Control.styles,
+    css`
+      .trigger { min-width: 2.5rem; min-height: 2.5rem; background: transparent; border: none; cursor: pointer; }
+      .tbl-form { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem; }
+      .tbl-form input { width: 2.5rem; padding: 0.35rem 0.4rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit; text-align: center; -moz-appearance: textfield; }
+      .tbl-form input::-webkit-inner-spin-button,
+      .tbl-form input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+      .tbl-x { color: var(--tc_muted); font-weight: bold; }
+      .tbl-form button.primary { padding: 0.4rem 0.8rem; border: 1px solid var(--c_primary); border-radius: var(--radius); background: var(--c_primary); color: white; cursor: pointer; font: inherit; }
+    `
+  ];
+}
+
+customElements.define('kc-md-table', MdTable);