kempo-ui 0.4.19 → 0.4.21

package/src/components/markdownEditorControls/SpeechToText.js

@@ -1,65 +0,0 @@
-import MarkdownEditorControl from './MarkdownEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../SpeechToText.js';
-
-/*
-  Speech-to-text control. Reuses the standalone `<k-speech-to-text>`
-  component (which provides its own mic-button UI and handles the Web
-  Speech API) and just listens for its `end` event to drop the final
-  transcript into the editor at the cursor.
-*/
-export default class MarkdownSpeechToText extends MarkdownEditorControl {
-  static properties = {
-    ...MarkdownEditorControl.properties,
-    language: { type: String, reflect: true },
-    continuous: { type: Boolean, reflect: true }
-  };
-
-  constructor() {
-    super();
-    this.label = 'Speech to text';
-    this.language = 'en-US';
-    this.continuous = false;
-  }
-
-  /*
-    The trigger button lives inside the embedded `<k-speech-to-text>`,
-    which handles its own click-to-listen logic. Our base-class
-    handleClick (which calls command()) is unused; the speech component
-    drives the lifecycle and we just react to the `end` event.
-  */
-  command() {}
-
-  handleEnd = (e) => {
-    const text = (e.detail?.text || '').trim();
-    if(!text) return;
-    // Trailing space so successive recordings don't run together.
-    this.editor?.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 = [
-    MarkdownEditorControl.styles,
-    css`
-    :host {
-      margin: var(--spacer_q);
-    }
-      k-speech-to-text {
-        /* Shrink the default 2.5rem circular mic button so it sits
-           comfortably alongside other toolbar controls. */
-        --btn_size: 2rem;
-      }
-    `
-  ];
-}
-
-customElements.define('k-md-speech-to-text', MarkdownSpeechToText);

package/src/components/markdownEditorControls/Strikethrough.js

@@ -1,35 +0,0 @@
-import MarkdownEditorControl from './MarkdownEditorControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-/*
-  GFM strikethrough — wraps the selection in `~~...~~`. marked renders this
-  to `<del>` (allowed by sanitizeHtml's default tag set), so it survives
-  the sanitize pass.
-*/
-export default class MarkdownStrikethrough extends MarkdownEditorControl {
-  constructor() {
-    super();
-    this.label = 'Strikethrough';
-  }
-
-  command() {
-    this.wrapSelection('~~', '~~', 'strikethrough');
-  }
-
-  render() {
-    return html`
-      <button
-        type="button"
-        class=${this.btnClass}
-        title=${this.label}
-        aria-label=${this.label}
-        @click=${this.handleClick}
-      >
-        <k-icon name="format_strikethrough"></k-icon>
-      </button>
-    `;
-  }
-}
-
-customElements.define('k-md-strikethrough', MarkdownStrikethrough);

package/src/components/markdownEditorControls/Table.js

@@ -1,165 +0,0 @@
-import MarkdownEditorControl from './MarkdownEditorControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Icon.js';
-import '../Dropdown.js';
-import { bound } from '../../utils/number.js';
-
-/*
-  Table control. Opens a small dropdown with two number inputs (cols × rows)
-  and a Create button, then inserts a GFM markdown table with that many
-  empty cells at the cursor.
-*/
-export default class MarkdownTable extends MarkdownEditorControl {
-  constructor() {
-    super();
-    this.label = 'Table';
-  }
-
-  /*
-    The trigger is wired to Dropdown's own click handling, so the
-    base-class handleClick (which calls command()) would fire on top and
-    create a feedback loop. command() is a no-op here; the Insert button
-    inside the dropdown drives insertion.
-  */
-  command() {}
-
-  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();
-    }
-  };
-
-  handleInsertClick = () => this.#submit();
-
-  #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;
-    const editor = this.editor;
-    if(!editor) return;
-    editor.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}|`)
-    ];
-    // Surround with newlines so the table starts on its own line and the
-    // user's cursor lands on a fresh line below it.
-    return `\n${lines.join('\n')}\n`;
-  }
-
-  render() {
-    return html`
-      <k-dropdown @opened=${this.handleDropdownOpened}>
-        <button
-          slot="trigger"
-          type="button"
-          class=${this.btnClass}
-          title=${this.label}
-          aria-label=${this.label}
-        >
-          <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.handleInsertClick}>Insert</button>
-        </div>
-      </k-dropdown>
-    `;
-  }
-
-  static styles = [
-    MarkdownEditorControl.styles,
-    css`
-      .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;
-        background: var(--c_bg);
-        color: var(--tc);
-        text-align: center;
-        /* Hide the up/down spinner buttons that take up extra width. */
-        -moz-appearance: textfield;
-      }
-      .tbl-form input::-webkit-inner-spin-button,
-      .tbl-form input::-webkit-outer-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-      .tbl-form input:focus-visible {
-        outline: none;
-        box-shadow: var(--focus_shadow);
-      }
-      .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;
-      }
-      .tbl-form button.primary:focus-visible {
-        outline: none;
-        box-shadow: var(--focus_shadow);
-      }
-    `
-  ];
-}
-
-customElements.define('k-md-table', MarkdownTable);

package/src/components/paginationControls/FirstPage.js

@@ -1,26 +0,0 @@
-import PaginationButtonControl from './PaginationButtonControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class PaginationFirstPage extends PaginationButtonControl {
-  connectedCallback() {
-    super.connectedCallback();
-    if(!this.hasAttribute('aria-label')) this.setAttribute('aria-label', 'First Page');
-    if(!this.hasAttribute('title')) this.setAttribute('title', 'First Page');
-  }
-
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    const pg = this.pagination;
-    this.disabled = !pg || pg.page <= 1;
-  }
-
-  handleAction() { if(this.pagination) this.pagination.page = 1; }
-
-  render() {
-    return html`<k-icon name="chevron-line" direction="left"></k-icon>`;
-  }
-}
-
-customElements.define('k-pg-first', PaginationFirstPage);
-

package/src/components/paginationControls/GotoPage.js

@@ -1,56 +0,0 @@
-import PaginationControl from './PaginationControl.js';
-import { html, css } from '../../lit-all.min.js';
-import '../Combobox.js';
-
-export default class PaginationGotoPage extends PaginationControl {
-  /*
-    Event Handlers
-  */
-  handleInput = (e) => {
-    const cb = e.target;
-    if(this.pagination && cb.value) {
-      const page = parseInt(cb.value, 10);
-      if(!isNaN(page) && page > 0) this.pagination.page = page;
-    }
-  };
-
-  handleBlur = (e) => {
-    const pg = this.pagination;
-    if(pg) {
-      e.target.value = String(pg.page);
-    }
-  };
-
-  /*
-    Rendering
-  */
-  render() {
-    const pg = this.pagination;
-    const current = pg?.page ?? 1;
-    const total = pg?.totalPages ?? 1;
-    return html`
-      <k-combobox
-        .value=${String(current)}
-        @input=${this.handleInput}
-        @blur=${this.handleBlur}
-        placeholder="page"
-				no-results-message="Invalid Page"
-      >
-        ${Array.from({ length: total }, (_, i) => html`
-          <k-option value=${i + 1}>${i + 1}</k-option>
-        `)}
-      </k-combobox>
-    `;
-  }
-
-  static styles = [
-    PaginationControl.styles,
-    css`
-      k-combobox {
-        width: 5rem;
-      }
-    `
-  ];
-}
-
-customElements.define('k-pg-goto-page', PaginationGotoPage);

package/src/components/paginationControls/ItemsPerPage.js

@@ -1,44 +0,0 @@
-import PaginationControl from './PaginationControl.js';
-import { html, css } from '../../lit-all.min.js';
-
-export default class PaginationItemsPerPage extends PaginationControl {
-  /*
-    Event Handlers
-  */
-  handleChange = (e) => {
-    const pg = this.pagination;
-    if(!pg) return;
-    pg.itemsPerPage = parseInt(e.target.value, 10);
-  };
-
-  /*
-    Rendering
-  */
-  render() {
-    const pg = this.pagination;
-    const current = pg?.itemsPerPage ?? 10;
-    const options = pg?.pageSizes ?? [5, 10, 25, 50, 100];
-    return html`
-      <label>
-        Items per page:
-        <select @change=${this.handleChange}>
-          ${options.map(n => html`<option value=${n} ?selected=${n === current}>${n}</option>`)}
-        </select>
-      </label>
-    `;
-  }
-
-  static styles = [
-    PaginationControl.styles,
-    css`
-      label {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--spacer_q, 0.25rem);
-        white-space: nowrap;
-      }
-    `
-  ];
-}
-
-customElements.define('k-pg-items-per-page', PaginationItemsPerPage);

package/src/components/paginationControls/LastPage.js

@@ -1,26 +0,0 @@
-import PaginationButtonControl from './PaginationButtonControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class PaginationLastPage extends PaginationButtonControl {
-  connectedCallback() {
-    super.connectedCallback();
-    if(!this.hasAttribute('aria-label')) this.setAttribute('aria-label', 'Last Page');
-    if(!this.hasAttribute('title')) this.setAttribute('title', 'Last Page');
-  }
-
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    const pg = this.pagination;
-    this.disabled = !pg || pg.page >= pg.totalPages;
-  }
-
-  handleAction() { if(this.pagination) this.pagination.page = this.pagination.totalPages; }
-
-  render() {
-    return html`<k-icon name="chevron-line"></k-icon>`;
-  }
-}
-
-customElements.define('k-pg-last', PaginationLastPage);
-

package/src/components/paginationControls/NextPage.js

@@ -1,26 +0,0 @@
-import PaginationButtonControl from './PaginationButtonControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class PaginationNextPage extends PaginationButtonControl {
-  connectedCallback() {
-    super.connectedCallback();
-    if(!this.hasAttribute('aria-label')) this.setAttribute('aria-label', 'Next Page');
-    if(!this.hasAttribute('title')) this.setAttribute('title', 'Next Page');
-  }
-
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    const pg = this.pagination;
-    this.disabled = !pg || pg.page >= pg.totalPages;
-  }
-
-  handleAction() { this.pagination?.nextPage(); }
-
-  render() {
-    return html`<k-icon name="chevron"></k-icon>`;
-  }
-}
-
-customElements.define('k-pg-next', PaginationNextPage);
-

package/src/components/paginationControls/PageCount.js

@@ -1,10 +0,0 @@
-import PaginationControl from './PaginationControl.js';
-import { html } from '../../lit-all.min.js';
-
-export default class PaginationPageCount extends PaginationControl {
-  render() {
-    return html`<span>${this.pagination?.totalPages ?? 1}</span>`;
-  }
-}
-
-customElements.define('k-pg-count', PaginationPageCount);

package/src/components/paginationControls/PageInfo.js

@@ -1,23 +0,0 @@
-import PaginationControl from './PaginationControl.js';
-import { html, css } from '../../lit-all.min.js';
-
-export default class PaginationPageInfo extends PaginationControl {
-  render() {
-    const pg = this.pagination;
-    const current = pg?.page ?? 1;
-    const total = pg?.totalPages ?? 1;
-    return html`<span class="info">Page ${current} of ${total}</span>`;
-  }
-
-  static styles = [
-    PaginationControl.styles,
-    css`
-      .info {
-        padding: 0 var(--spacer_q, 0.25rem);
-        white-space: nowrap;
-      }
-    `
-  ];
-}
-
-customElements.define('k-pg-page-info', PaginationPageInfo);

package/src/components/paginationControls/PaginationButtonControl.js

@@ -1,76 +0,0 @@
-import Button from '../Button.js';
-import { css } from '../../lit-all.min.js';
-
-export default class PaginationButtonControl extends Button {
-  /*
-    Lifecycle Callbacks
-  */
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', this.handleActionClick);
-    const pg = this.pagination;
-    if(!pg) return;
-    this.boundPagination = pg;
-    this.pageChangeHandler = () => this.requestUpdate();
-    pg.addEventListener('page-change', this.pageChangeHandler);
-    this.attrObserver = new MutationObserver(() => this.requestUpdate());
-    this.attrObserver.observe(pg, { attributes: true, attributeFilter: ['total-items', 'items-per-page', 'page-sizes'] });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('click', this.handleActionClick);
-    if(this.boundPagination && this.pageChangeHandler) {
-      this.boundPagination.removeEventListener('page-change', this.pageChangeHandler);
-    }
-    this.attrObserver?.disconnect();
-    this.boundPagination = null;
-    this.pageChangeHandler = null;
-    this.attrObserver = null;
-  }
-
-  /*
-    Protected Members
-  */
-  get pagination() {
-    return this.closest('k-pagination')
-      || (this.getRootNode() instanceof ShadowRoot ? this.getRootNode().host : null);
-  }
-
-  /*
-    Public Methods
-  */
-  handleAction() {}
-
-  /*
-    Event Handlers
-  */
-  handleActionClick = () => this.handleAction();
-
-  /*
-    Rendering
-  */
-  static styles = [
-    Button.styles,
-    css`
-      :host {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-				background: transparent;
-				border: 1px solid var(--c_border);
-				padding: var(--spacer_h);
-				color: inherit;
-      }
-			:host(:not([disabled]):hover) {
-				background: oklch(from var(--c_bg__inv) l c h / 0.2);
-				color: inherit;
-			}
-			:host(:not([disabled]):focus),
-			:host(:not([disabled]):focus-visible) {
-				box-shadow: var(--focus_shadow);
-				z-index: 1;
-			}
-    `
-  ];
-}

package/src/components/paginationControls/PaginationControl.js

@@ -1,43 +0,0 @@
-import ShadowComponent from '../ShadowComponent.js';
-import { css } from '../../lit-all.min.js';
-
-/*
-  Base class for <k-pagination> control elements. Subclass and override
-  render() to create custom pagination controls. The pagination component
-  is located via closest('k-pagination'), or via getRootNode().host when
-  rendered as slot fallback content inside the shadow root.
-*/
-export default class PaginationControl extends ShadowComponent {
-  connectedCallback() {
-    super.connectedCallback();
-    const pg = this.pagination;
-    if(!pg) return;
-    this.boundPagination = pg;
-    this.pageChangeHandler = () => this.requestUpdate();
-    pg.addEventListener('page-change', this.pageChangeHandler);
-    this.attrObserver = new MutationObserver(() => this.requestUpdate());
-    this.attrObserver.observe(pg, { attributes: true, attributeFilter: ['total-items', 'items-per-page', 'page-sizes'] });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if(this.boundPagination && this.pageChangeHandler){
-      this.boundPagination.removeEventListener('page-change', this.pageChangeHandler);
-    }
-    this.attrObserver?.disconnect();
-    this.boundPagination = null;
-    this.pageChangeHandler = null;
-    this.attrObserver = null;
-  }
-
-  get pagination() {
-    return this.closest('k-pagination')
-      || (this.getRootNode() instanceof ShadowRoot ? this.getRootNode().host : null);
-  }
-
-  static styles = css`
-    :host {
-      display: inline-flex;
-    }
-  `;
-}

package/src/components/paginationControls/PrevPage.js

@@ -1,26 +0,0 @@
-import PaginationButtonControl from './PaginationButtonControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class PaginationPrevPage extends PaginationButtonControl {
-  connectedCallback() {
-    super.connectedCallback();
-    if(!this.hasAttribute('aria-label')) this.setAttribute('aria-label', 'Previous Page');
-    if(!this.hasAttribute('title')) this.setAttribute('title', 'Previous Page');
-  }
-
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    const pg = this.pagination;
-    this.disabled = !pg || pg.page <= 1;
-  }
-
-  handleAction() { this.pagination?.previousPage(); }
-
-  render() {
-    return html`<k-icon name="chevron" direction="left"></k-icon>`;
-  }
-}
-
-customElements.define('k-pg-prev', PaginationPrevPage);
-

package/src/components/tableControls/DeleteRecord.js

@@ -1,29 +0,0 @@
-import TableControl from './TableControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class DeleteRecord extends TableControl {
-	/*
-		Public Methods
-	*/
-	delete = () => {
-		if(this.record) {
-			this.table.deleteRecord(this.record);
-		}
-	};
-
-	/*
-		Rendering
-	*/
-	render() {
-		return html`
-			<button class="no-btn icon-btn" @click="${this.delete}">
-				<slot>
-					<k-icon name="delete"></k-icon>
-				</slot>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-tc-delete-record', DeleteRecord);

package/src/components/tableControls/DeleteSelected.js

@@ -1,27 +0,0 @@
-import TableControl from './TableControl.js';
-import { html } from '../../lit-all.min.js';
-import '../Icon.js';
-
-export default class DeleteSelected extends TableControl {
-	/*
-		Public Methods
-	*/
-	deleteSelected = () => {
-		this.table.deleteSelected();
-	};
-
-	/*
-		Rendering
-	*/
-	render() {
-		return html`
-			<button class="no-btn icon-btn" title="Delete Selected" @click="${this.deleteSelected}">
-				<slot>
-					<k-icon name="delete_sweep"></k-icon>
-				</slot>
-			</button>
-		`;
-	}
-}
-
-customElements.define('k-tc-delete-selected', DeleteSelected);