kempo-ui 0.4.19 → 0.4.21

package/docs/src/components/Table.js

@@ -1,4 +1,4 @@
-import{html as e,css as t,unsafeStatic as s,literal as i}from"../lit-all.min.js";import r from"./ShadowComponent.js";import{toTitleCase as o}from"../utils/string.js";import{boolExists as n}from"../utils/propConverters.js";const l=Symbol("selected"),a=Symbol("hidden"),d=Symbol("index"),c=Symbol("editing");export default class h extends r{static properties={enablePages:{type:Boolean,reflect:!0,converter:n,attribute:"enable-pages"},pageSize:{type:Number,reflect:!0,attribute:"page-size"},currentPage:{type:Number,reflect:!0,attribute:"current-page"},pageSizeOptions:{type:Array,attribute:"page-size-options"},enableSelection:{type:Boolean,reflect:!0,converter:n,attribute:"enable-selection"},enableSorting:{type:Boolean,reflect:!0,converter:n,attribute:"enable-sorting"},caseSensitiveFilters:{type:Boolean,reflect:!0,converter:n,attribute:"case-sensitive-filters"},requestEdit:{type:Boolean,reflect:!0,converter:n,attribute:"request-edit"},requestDelete:{type:Boolean,reflect:!0,converter:n,attribute:"request-delete"},placeholder:{type:String,reflect:!0},filteredPlaceholder:{type:String,reflect:!0,attribute:"filtered-placeholder"},fields:{type:Array},records:{type:Array},filters:{type:Array},sort:{type:Array},columnSizes:{type:Object},fetchPending:{type:Boolean}};constructor(e={}){super(),void 0===this.pageSize&&(this.pageSize=50),void 0===this.currentPage&&(this.currentPage=1),void 0===this.pageSizeOptions&&(this.pageSizeOptions=[10,25,50,100,500]),void 0===this.records&&(this.records=e.records||[]),void 0===this.fields&&(this.fields=e.fields||[]),void 0===this.filters&&(this.filters=e.filters||[]),void 0===this.sort&&(this.sort=[]),void 0===this.columnSizes&&(this.columnSizes={}),void 0===this.fetchPending&&(this.fetchPending=!1),void 0===this.requestEdit&&(this.requestEdit=!1),void 0===this.requestDelete&&(this.requestDelete=!1),void 0===this.placeholder&&(this.placeholder="No Records"),void 0===this.filteredPlaceholder&&(this.filteredPlaceholder="")}handleSelectAllChange=e=>{e.target.checked?this.selectAllOnPage():this.deselectAllOnPage()};handleFieldClick=e=>{const t=this.sort.find(t=>t.name===e),s=!t||!t.asc;this.sortBy(e,s)};handleRecordSelectionChange=(e,t)=>{e[l]=!!t.target.checked,this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};firstUpdated(){this.setData({records:this.records,fields:this.fields,filters:this.filters})}childrenUpdated(){this.requestUpdate()}updated(e){if(super.updated(e),this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e&&(e.checked=this.getDisplayedRecords().length>0&&this.allOnPageSelected())}}renderColgroupTemplate(){const t=[];return this.enableSelection&&t.push(e`<col style="width: 40px" />`),this.hasBeforeControls()&&t.push(e`<col style="width: ${this.columnSizes.beforeControls}px" />`),this.fields.forEach(({size:s,hidden:i})=>{i||t.push(s?e`<col style="width: ${s}px" />`:e`<col />`)}),this.hasAfterControls()&&t.push(e`<col style="width: ${this.columnSizes.afterControls}px" />`),t}getColumnCount(){let e=0;return this.enableSelection&&e++,this.hasBeforeControls()&&e++,this.fields.forEach(({hidden:t})=>{t||e++}),this.hasAfterControls()&&e++,e}renderFieldsTemplate(){const t=[];return this.enableSelection&&t.push(e`
+import{html as e,css as t,unsafeStatic as s,literal as i}from"../lit-all.min.js";import r from"./ShadowComponent.js";import{toTitleCase as o}from"../utils/string.js";import{boolExists as n}from"../utils/propConverters.js";const l=Symbol("selected"),a=Symbol("hidden"),d=Symbol("index"),c=Symbol("editing");export default class h extends r{static properties={enablePages:{type:Boolean,reflect:!0,converter:n,attribute:"enable-pages"},pageSize:{type:Number,reflect:!0,attribute:"page-size"},currentPage:{type:Number,reflect:!0,attribute:"current-page"},pageSizeOptions:{type:Array,attribute:"page-size-options"},enableSelection:{type:Boolean,reflect:!0,converter:n,attribute:"enable-selection"},enableSorting:{type:Boolean,reflect:!0,converter:n,attribute:"enable-sorting"},caseSensitiveFilters:{type:Boolean,reflect:!0,converter:n,attribute:"case-sensitive-filters"},requestEdit:{type:Boolean,reflect:!0,converter:n,attribute:"request-edit"},requestDelete:{type:Boolean,reflect:!0,converter:n,attribute:"request-delete"},placeholder:{type:String,reflect:!0},filteredPlaceholder:{type:String,reflect:!0,attribute:"filtered-placeholder"},fields:{type:Array},records:{type:Array},filters:{type:Array},sort:{type:Array},columnSizes:{type:Object},fetchPending:{type:Boolean}};constructor(e={}){super(),void 0===this.pageSize&&(this.pageSize=50),void 0===this.currentPage&&(this.currentPage=1),void 0===this.pageSizeOptions&&(this.pageSizeOptions=[10,25,50,100,500]),void 0===this.records&&(this.records=e.records||[]),void 0===this.fields&&(this.fields=e.fields||[]),void 0===this.filters&&(this.filters=e.filters||[]),void 0===this.sort&&(this.sort=[]),void 0===this.columnSizes&&(this.columnSizes={}),void 0===this.fetchPending&&(this.fetchPending=!1),void 0===this.requestEdit&&(this.requestEdit=!1),void 0===this.requestDelete&&(this.requestDelete=!1),void 0===this.placeholder&&(this.placeholder="No Records"),void 0===this.filteredPlaceholder&&(this.filteredPlaceholder="")}handleSelectAllChange=e=>{e.target.checked?this.selectAllOnPage():this.deselectAllOnPage()};handleFieldClick=e=>{const t=this.sort.find(t=>t.name===e),s=!t||!t.asc;this.sortBy(e,s)};handleRecordSelectionChange=(e,t)=>{e[l]=!!t.target.checked,this.requestUpdate(),this.dispatchEvent(new CustomEvent("selectionChange",{bubbles:!0}))};connectedCallback(){super.connectedCallback(),this.hasAttribute("controlled")||this.setAttribute("controlled","")}firstUpdated(){this.setData({records:this.records,fields:this.fields,filters:this.filters})}childrenUpdated(){this.requestUpdate()}updated(e){if(super.updated(e),this.enableSelection){const e=this.shadowRoot.getElementById("select-all");e&&(e.checked=this.getDisplayedRecords().length>0&&this.allOnPageSelected())}}renderColgroupTemplate(){const t=[];return this.enableSelection&&t.push(e`<col style="width: 40px" />`),this.hasBeforeControls()&&t.push(e`<col style="width: ${this.columnSizes.beforeControls}px" />`),this.fields.forEach(({size:s,hidden:i})=>{i||t.push(s?e`<col style="width: ${s}px" />`:e`<col />`)}),this.hasAfterControls()&&t.push(e`<col style="width: ${this.columnSizes.afterControls}px" />`),t}getColumnCount(){let e=0;return this.enableSelection&&e++,this.hasBeforeControls()&&e++,this.fields.forEach(({hidden:t})=>{t||e++}),this.hasAfterControls()&&e++,e}renderFieldsTemplate(){const t=[];return this.enableSelection&&t.push(e`
         <th class="controls field-select">
           <input type="checkbox" id="select-all" @change=${this.handleSelectAllChange} />
         </th>

package/docs/src/components/controls/AlignCenter.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{static requires=["alignCenter"];static hostMode="visual";connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Align Center")}handleAction(){this.host?.alignCenter?.()}render(){return e`<slot><k-icon name="format_align_center"></k-icon></slot>`}}customElements.define("kc-align-center",n);

package/docs/src/components/controls/AlignJustify.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as i}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static requires=["alignJustify"];static hostMode="visual";connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Justify")}handleAction(){this.host?.alignJustify?.()}render(){return i`<slot><k-icon name="format_align_justify"></k-icon></slot>`}}customElements.define("kc-align-justify",s);

package/docs/src/components/controls/AlignLeft.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static requires=["alignLeft"];static hostMode="visual";connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Align Left")}handleAction(){this.host?.alignLeft?.()}render(){return e`<slot><k-icon name="format_align_left"></k-icon></slot>`}}customElements.define("kc-align-left",i);

package/docs/src/components/controls/AlignRight.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as i}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{static requires=["alignRight"];static hostMode="visual";connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Align Right")}handleAction(){this.host?.alignRight?.()}render(){return i`<slot><k-icon name="format_align_right"></k-icon></slot>`}}customElements.define("kc-align-right",e);

package/docs/src/components/controls/Bold.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as o}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{static requires=["bold"];static hostMode=["visual","write"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Bold")}handleAction(){this.host?.bold?.()}render(){return o`<slot><k-icon name="format_bold"></k-icon></slot>`}}customElements.define("kc-bold",e);

package/docs/src/components/controls/BulletList.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class l extends t{static requires=["bulletList"];static hostMode=["visual","write"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Bulleted List")}handleAction(){this.host?.bulletList?.()}render(){return e`<slot><k-icon name="format_list_bulleted"></k-icon></slot>`}}customElements.define("kc-bullet-list",l);

package/docs/src/components/controls/ButtonControl.js

@@ -0,0 +1,33 @@
+import e from"./Control.js";import{css as t,html as i}from"../../lit-all.min.js";export default class s extends e{connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","button"),this.hasAttribute("tabindex")||(this.tabIndex=this.disabled?-1:0),this.setAttribute("aria-disabled",String(!!this.disabled)),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown)}updated(e){super.updated(e),e.has("disabled")&&(this.tabIndex=this.disabled?-1:0,this.setAttribute("aria-disabled",String(this.disabled)))}handleAction(){}handleClick=e=>{this.disabled?e.stopImmediatePropagation():this.handleAction()};handleKeyDown=e=>{this.disabled||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.click())};render(){return i`<slot></slot>`}static styles=[e.styles,t`
+      :host {
+        align-items: center;
+        justify-content: center;
+        min-width: 2rem;
+        min-height: 2rem;
+        background: transparent;
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+        margin: var(--spacer_q);
+        padding: var(--spacer_h);
+        color: inherit;
+        cursor: pointer;
+        outline: none;
+        font-size: inherit;
+        user-select: none;
+        transition: background-color var(--animation_ms), box-shadow var(--animation_ms);
+      }
+      :host(:not([disabled]):hover) {
+        background: oklch(from var(--c_bg__inv) l c h / 0.15);
+      }
+      :host(:not([disabled]):focus),
+      :host(:not([disabled]):focus-visible) {
+        box-shadow: var(--focus_shadow);
+        z-index: 1;
+      }
+      :host([disabled]) {
+        cursor: default;
+      }
+      :host([active]) {
+        background: oklch(from var(--c_primary) l c h / 0.18);
+      }
+    `]}customElements.define("kc-button",s);

package/docs/src/components/controls/CharacterCount.js

@@ -0,0 +1,4 @@
+import t from"./Control.js";import{html as e,css as s}from"../../lit-all.min.js";export default class n extends t{static hostEvents=["change","ready"];static properties={...t.properties,count:{type:Number,state:!0}};constructor(){super(),this.count=0}connectedCallback(){super.connectedCallback(),setTimeout(()=>this.updateCount(),0)}willUpdate(t){super.willUpdate?.(t),this.updateCount()}updateCount(){const t=this.host;if(!t||"function"!=typeof t.getValue)return;const e=t.getValue()||"",s=e.includes("<")?(new DOMParser).parseFromString(e,"text/html").body.innerText||"":e;this.count=s.length}render(){return e`<span class="character-count"><slot name="label">Characters:</slot> ${this.count}</span>`}static styles=[t.styles,s`
+      :host { align-items: center; padding: 0 0.5rem; font-size: 0.875rem; color: var(--tc_muted, #666); }
+      .character-count { display: flex; align-items: center; gap: 0.25rem; }
+    `]}customElements.define("kc-character-count",n);

package/docs/src/components/controls/ClearFormatting.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static requires=["removeFormat"];static hostMode="visual";connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Clear Formatting")}handleAction(){this.host?.removeFormat?.()}render(){return e`<slot><k-icon name="format_clear"></k-icon></slot>`}}customElements.define("kc-clear-formatting",o);

package/docs/src/components/controls/CodeBlock.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as o}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{static requires=["formatBlock"];static hostMode="visual";connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Code Block")}handleAction(){const t=this.host,o=t?.isSelectionInCodeBlock?.();t?.formatBlock?.(o?"p":"pre")}render(){return o`<slot><k-icon name="code_blocks"></k-icon></slot>`}}customElements.define("kc-code-block",e);

package/docs/src/components/controls/Control.js

@@ -0,0 +1,12 @@
+import t from"../ShadowComponent.js";import{css as e}from"../../lit-all.min.js";export default class s extends t{static properties={hidden:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0}};static requires=[];static hostEvents=[];constructor(){super(),this.hidden=!1,this.disabled=!1}connectedCallback(){super.connectedCallback();const t=this.host;if(this.boundHost=t,this.updateHostSupport(),t){this.modeHandler=()=>{this.updateModeVisibility(),this.requestUpdate()},t.addEventListener("mode-changed",this.modeHandler),this.hostEventHandler=()=>this.requestUpdate();for(const e of this.constructor.hostEvents||[])t.addEventListener(e,this.hostEventHandler);this.updateModeVisibility()}}disconnectedCallback(){if(super.disconnectedCallback(),this.boundHost&&(this.modeHandler&&this.boundHost.removeEventListener("mode-changed",this.modeHandler),this.hostEventHandler))for(const t of this.constructor.hostEvents||[])this.boundHost.removeEventListener(t,this.hostEventHandler);this.modeHandler=null,this.hostEventHandler=null,this.boundHost=null}updated(t){super.updated(t),t.has("hidden")&&this.dispatchEvent(new CustomEvent("control_visibility_change",{bubbles:!0}))}get host(){if(this.boundHost)return this.boundHost;let t=this.getRootNode();for(;t instanceof ShadowRoot;){const e=t.host,s=e?.closest?.("[controlled]")||(e?.hasAttribute?.("controlled")?e:null);if(s)return s;t=e.getRootNode()}return this.closest("[controlled]")}updateHostSupport(){const t=this.host,e=this.constructor.requires||[],s=!(t&&e.every(e=>"function"==typeof t[e]));this.disabled!==s&&(this.disabled=s)}updateModeVisibility(){const t=this.constructor.hostMode;if(!t)return;const e=this.host;if(!e)return;if(!("mode"in e))return;const s=!(Array.isArray(t)?t:[t]).includes(e.mode);this.hidden!==s&&(this.hidden=s)}static load=(()=>{const t=/<(kc-[a-z][a-z0-9-]*|k-control-group)\b/g,e=new Set,s=t=>{if("k-control-group"===t)return"../ControlGroup.js";return`./${t.slice(3).split("-").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join("")}.js`},o=(e,s=new Set)=>{if(!e)return s;if(Array.isArray(e))return e.forEach(t=>o(t,s)),s;if(e.strings)for(const o of e.strings){let e;for(t.lastIndex=0;null!==(e=t.exec(o));)s.add(e[1])}if("object"==typeof e)for(const t of Object.values(e))t&&(Array.isArray(t)||t.strings)&&o(t,s);return s};return async t=>{const n=o(t),i=new URL("./",import.meta.url).href,r=[];for(const t of n)e.has(t)||(e.add(t),r.push(import(new URL(s(t),i).href)));r.length&&await Promise.all(r)}})();static styles=e`
+    :host {
+      display: inline-flex;
+    }
+    :host([hidden]) {
+      display: none !important;
+    }
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  `}customElements.define("kc-control",s);

package/docs/src/components/controls/CopyCode.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as o}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{static requires=["copyToClipboard"];static hostMode="code";connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Copy Code")}handleAction(){this.host?.copyToClipboard?.()}render(){return o`<slot><k-icon name="content_copy"></k-icon></slot>`}}customElements.define("kc-copy-code",e);

package/docs/src/components/controls/CreateLink.js

@@ -0,0 +1 @@
+import e from"./ButtonControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";import n from"../Dialog.js";export default class i extends e{static requires=["createLink"];static hostMode="visual";connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Insert Link")}handleAction(){const e=this.host;if(!e)return;const t=e.getSelectedText?.()||"",i=document.createElement("input");i.type="text",i.placeholder="https://example.com",i.style.cssText="padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;";const l=document.createElement("input");l.type="text",l.placeholder="Enter link text",l.value=t,l.style.cssText="padding: 0.5rem; border: 1px solid var(--c_border); border-radius: var(--radius); font: inherit;";const r=document.createElement("div");r.className="p",r.style.cssText="display: flex; flex-direction: column; gap: 1rem;",r.innerHTML='\n      <div style="display: flex; flex-direction: column; gap: 0.5rem;">\n        <label style="font-weight: bold;">URL</label>\n      </div>\n      <div style="display: flex; flex-direction: column; gap: 0.5rem;">\n        <label style="font-weight: bold;">Link Text</label>\n      </div>\n    ',r.children[0].appendChild(i),r.children[1].appendChild(l),n.create(r,{title:"Create Link",cancelText:"Cancel",confirmText:"Insert Link",confirmClasses:"success ml",confirmAction:n=>{const r=i.value.trim(),o=l.value.trim();r?!e.selection||o&&o!==t?e.createLinkWithText?.(r,o||r):e.createLink(r):n.keepDialogOpen=!0}})}render(){return t`<slot><k-icon name="link"></k-icon></slot>`}}customElements.define("kc-create-link",i);

package/docs/src/components/controls/EditorTheme.js

@@ -0,0 +1,30 @@
+import t from"./Control.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class r extends t{static requires=["setEditorTheme"];static hostMode="code";static hostEvents=["editor-theme-changed"];static properties={...t.properties,value:{type:String,state:!0}};constructor(){super(),this.value="auto"}connectedCallback(){super.connectedCallback(),this.host&&(this.value=this.host.editorTheme||"auto")}willUpdate(t){super.willUpdate?.(t),this.host&&(this.value=this.host.editorTheme||"auto")}handleChange=t=>{this.host?.setEditorTheme?.(t.target.value)};static styles=[t.styles,o`
+      :host {
+        position: relative;
+        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);
+      }
+      k-icon {
+        position: absolute;
+        left: 0.5rem;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+      }
+      select {
+        border: 0;
+        padding: var(--spacer_h) 1rem var(--spacer_h) 2rem;
+        min-height: 2.5rem;
+      }
+    `];render(){return e`
+      <k-icon name="contrast"></k-icon>
+      <select .value=${this.value} @change=${this.handleChange} title="Editor Theme">
+        <option value="auto">Auto</option>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+      </select>
+    `}}customElements.define("kc-editor-theme",r);

package/docs/src/components/controls/FindReplace.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{static requires=["openFind"];static hostMode="code";connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Find & Replace")}handleAction(){this.host?.openFind?.()}render(){return e`<slot><k-icon name="search"></k-icon></slot>`}}customElements.define("kc-find-replace",n);

package/docs/src/components/controls/FoldAll.js

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

package/docs/src/components/controls/FontSize.js

@@ -0,0 +1,8 @@
+import e from"./Control.js";import{html as o,css as s}from"../../lit-all.min.js";import"./FontSizeIncrease.js";import"./FontSizeDecrease.js";import"../ControlGroup.js";export default class t extends e{static hostMode="code";static styles=[e.styles,s`
+      :host { gap: 0; }
+    `];render(){return o`
+      <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",t);

package/docs/src/components/controls/FontSizeDecrease.js

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

package/docs/src/components/controls/FontSizeIncrease.js

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

package/docs/src/components/controls/FormatBlock.js

@@ -0,0 +1,8 @@
+import t from"./ButtonControl.js";import{html as a,css as e}from"../../lit-all.min.js";import"../Icon.js";const o={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"},r={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 s extends t{static requires=["formatBlock"];static hostMode=["visual","write"];static properties={...t.properties,tag:{type:String,reflect:!0}};constructor(){super(),this.tag="p"}connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title=o[this.tag]||this.tag)}getDefaultLabel(t){return o[t||this.tag]||(t||this.tag).toUpperCase()}getDefaultIcon(t){return r[t||this.tag]||"format_paragraph"}handleAction(){this.host?.formatBlock?.(this.tag)}render(){const t=o[this.tag]||this.tag.toUpperCase(),e=r[this.tag]||"format_paragraph";return a`
+      <slot name="icon"><k-icon name=${e}></k-icon></slot>
+      <slot>${t}</slot>
+    `}static styles=[t.styles,e`
+      :host {
+        gap: 0.5rem;
+      }
+    `]}customElements.define("kc-format-block",s);

package/docs/src/components/controls/FormatCode.js

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

package/docs/src/components/controls/Fullscreen.js

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

package/docs/src/components/controls/InlineCode.js

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

package/docs/src/components/controls/InsertTable.js

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

package/docs/src/components/controls/Italic.js

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

package/docs/src/components/controls/Language.js

@@ -0,0 +1,21 @@
+import t from"./Control.js";import{html as a,css as e}from"../../lit-all.min.js";import"../Icon.js";const s=["javascript","typescript","html","css","json","markdown","python","java","csharp","cpp","go","rust","php","ruby","sql","xml","yaml","shell","plaintext"];export default class r extends t{static requires=["setLanguage"];static hostMode="code";static hostEvents=["language-changed"];static properties={...t.properties,value:{type:String,state:!0}};constructor(){super(),this.value="javascript"}connectedCallback(){super.connectedCallback(),this.host&&(this.value=this.host.language||"javascript")}willUpdate(t){super.willUpdate?.(t),this.host&&(this.value=this.host.language||"javascript")}handleChange=t=>{this.host?.setLanguage?.(t.target.value)};static styles=[t.styles,e`
+      :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 a`
+      <select .value=${this.value} @change=${this.handleChange} title="Language">
+        ${s.map(t=>a`
+          <option value="${t}" ?selected=${this.value===t}>${t}</option>
+        `)}
+      </select>
+    `}}customElements.define("kc-language",r);

package/docs/src/components/controls/MdImage.js

@@ -0,0 +1,23 @@
+import e from"./Control.js";import{html as t,css as o}from"../../lit-all.min.js";import"../Icon.js";import"../Dropdown.js";export default class r extends e{static requires=["replaceSelection"];static hostMode="write";handleDropdownOpened=()=>{requestAnimationFrame(()=>{const e=this.shadowRoot.querySelector(".image-url"),t=this.shadowRoot.querySelector(".image-alt");e?.focus();const o=this.host?.textarea;o&&t&&(t.value=o.value.substring(o.selectionStart,o.selectionEnd)||"")})};handleDropdownClosed=()=>{const e=this.shadowRoot.querySelector(".image-url"),t=this.shadowRoot.querySelector(".image-alt");e&&(e.value=""),t&&(t.value="")};handleFormKeydown=e=>{"Enter"===e.key?(e.preventDefault(),this.submit()):"Escape"===e.key&&this.shadowRoot.querySelector("k-dropdown")?.close()};submit(){const e=this.shadowRoot.querySelector(".image-url").value.trim(),t=this.shadowRoot.querySelector(".image-alt").value.trim();e?(this.host?.replaceSelection?.(`![${t}](${e})`,{selectInserted:!1}),this.shadowRoot.querySelector("k-dropdown")?.close()):this.shadowRoot.querySelector(".image-url").focus()}render(){return t`
+      <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=[e.styles,o`
+      .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",r);

package/docs/src/components/controls/MdLink.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{static requires=["replaceSelection"];static hostMode="write";connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Link")}handleAction(){const t=this.host;if(!t)return;const e=t.textarea;if(!e)return;const n=e.selectionStart,s=e.selectionEnd,l=e.value.substring(n,s),i=/\[([^\]]*)\]\([^)]*\)/g;let o;for(;null!==(o=i.exec(e.value));){const l=o.index,i=l+o[0].length;if(n>=l&&s<=i){const n=o[1],s=e.value.substring(0,l)+n+e.value.substring(i);return e.value=s,e.selectionStart=l,e.selectionEnd=l+n.length,e.focus(),t.value=s,void e.dispatchEvent(new Event("input",{bubbles:!0}))}}const c=l||"link text",r=`[${c}](url)`,u=e.value.substring(0,n)+r+e.value.substring(s),a=n+1+c.length+2;e.value=u,e.selectionStart=a,e.selectionEnd=a+3,e.focus(),t.value=u,e.dispatchEvent(new Event("input",{bubbles:!0}))}render(){return e`<slot><k-icon name="link"></k-icon></slot>`}}customElements.define("kc-md-link",n);

package/docs/src/components/controls/MdSpeechToText.js

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

package/docs/src/components/controls/MdTable.js

@@ -0,0 +1,19 @@
+import e from"./Control.js";import{html as t,css as r}from"../../lit-all.min.js";import"../Icon.js";import"../Dropdown.js";import{bound as o}from"../../utils/number.js";export default class n extends e{static requires=["replaceSelection"];static hostMode="write";handleDropdownOpened=()=>{requestAnimationFrame(()=>{const e=this.shadowRoot.querySelector(".tbl-cols");e&&(e.value="3",e.select());const t=this.shadowRoot.querySelector(".tbl-rows");t&&(t.value="2")})};handleFormKeydown=e=>{"Enter"===e.key?(e.preventDefault(),this.submit()):"Escape"===e.key&&this.shadowRoot.querySelector("k-dropdown")?.close()};submit(){const e=this.clamp(this.shadowRoot.querySelector(".tbl-cols").value,1,20),t=this.clamp(this.shadowRoot.querySelector(".tbl-rows").value,1,50);e&&t&&(this.host?.replaceSelection?.(this.buildTable(e,t),{selectInserted:!1}),this.shadowRoot.querySelector("k-dropdown")?.close())}clamp(e,t,r){const n=parseInt(e,10);return Number.isFinite(n)?o(n,t,r):0}buildTable(e,t){const r=Array.from({length:e},(e,t)=>` Header ${t+1} `).join("|"),o=Array.from({length:e},()=>" --- ").join("|"),n=Array.from({length:e},()=>"   ").join("|");return`\n${[`|${r}|`,`|${o}|`,...Array.from({length:t},()=>`|${n}|`)].join("\n")}\n`}render(){return t`
+      <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=[e.styles,r`
+      .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",n);

package/docs/src/components/controls/Menu.js

@@ -0,0 +1,51 @@
+import e from"./Control.js";import{css as o,html as t}from"../../lit-all.min.js";import"../Dropdown.js";import"../Icon.js";export default class n extends e{static properties={...e.properties,opened:{type:Boolean,reflect:!0}};constructor(){super(),this.opened=!1}handleToggle=()=>{this.opened=!this.opened};handleOpened=()=>{this.opened=!0};handleClosed=()=>{this.opened=!1};render(){return t`
+      <k-dropdown
+        ?opened=${this.opened}
+        @opened=${this.handleOpened}
+        @closed=${this.handleClosed}
+      >
+        <button slot="trigger" class="no-btn icon-btn">
+          <slot name="icon"><k-icon name="arrow_drop_down"></k-icon></slot>
+          <slot name="label"></slot>
+        </button>
+        <slot></slot>
+      </k-dropdown>
+    `}static styles=[e.styles,o`
+      :host {
+        border: 1px solid var(--c_border);
+        border-radius: var(--radius);
+        margin: var(--spacer_q);
+      }
+
+      k-dropdown {
+        display: inline-flex;
+      }
+
+      button[slot="trigger"] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        min-width: 2.5rem;
+        min-height: 2.5rem;
+        padding: 0 0.75rem;
+        background: transparent;
+        border: none;
+        color: inherit;
+        cursor: pointer;
+        font-size: inherit;
+      }
+
+      /* Slotted menu items: remove individual borders/radii so the menu
+         reads as a single unified surface. */
+      ::slotted(:not([slot="icon"]):not([slot="label"])) {
+        display: block !important;
+        margin: 0 !important;
+        border: none !important;
+        border-radius: 0 !important;
+        border-bottom: 1px solid var(--c_border) !important;
+      }
+      ::slotted(:not([slot="icon"]):not([slot="label"]):last-child) {
+        border-bottom: none !important;
+      }
+    `]}customElements.define("kc-menu",n);

package/docs/src/components/controls/Minimap.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as i}from"../../lit-all.min.js";import"../Icon.js";export default class e extends t{static requires=["toggleMinimap"];static hostMode="code";static hostEvents=["minimap-changed"];static properties={...t.properties,active:{type:Boolean,reflect:!0}};constructor(){super(),this.active=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Toggle Minimap"),this.host&&(this.active=!!this.host.minimapEnabled)}willUpdate(t){super.willUpdate?.(t),this.host&&(this.active=!!this.host.minimapEnabled)}handleAction(){this.host?.toggleMinimap?.()}render(){return i`<slot><k-icon name="map"></k-icon></slot>`}}customElements.define("kc-minimap",e);

package/docs/src/components/controls/Mode.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static requires=["toggleMode"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Toggle Code View")}updated(t){super.updated(t);const e=this.host;e&&this.toggleAttribute("active","code"===e.mode)}get mode(){return this.host?.mode}handleAction(){this.host?.toggleMode?.()}render(){return e`<slot><k-icon name="code"></k-icon></slot>`}}customElements.define("kc-mode",o);

package/docs/src/components/controls/NumberList.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static requires=["numberList"];static hostMode=["visual","write"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Numbered List")}handleAction(){this.host?.numberList?.()}render(){return e`<slot><k-icon name="format_list_numbered"></k-icon></slot>`}}customElements.define("kc-number-list",s);

package/docs/src/components/controls/PgCount.js

@@ -0,0 +1 @@
+import t from"./Control.js";import{html as e}from"../../lit-all.min.js";export default class s extends t{static hostEvents=["page-change"];render(){return e`<span>${this.host?.totalPages??1}</span>`}}customElements.define("kc-pg-count",s);

package/docs/src/components/controls/PgFirst.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static hostEvents=["page-change"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="First Page"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","First Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.page<=1}handleAction(){const t=this.host;t&&(t.page=1)}render(){return e`<slot><k-icon name="chevron-line" direction="left"></k-icon></slot>`}}customElements.define("kc-pg-first",i);

package/docs/src/components/controls/PgGotoPage.js

@@ -0,0 +1,15 @@
+import t from"./Control.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Combobox.js";export default class s extends t{static hostEvents=["page-change"];handleInput=t=>{const e=this.host;if(e&&t.target.value){const o=parseInt(t.target.value,10);!isNaN(o)&&o>0&&(e.page=o)}};handleBlur=t=>{const e=this.host;e&&(t.target.value=String(e.page))};render(){const t=this.host,o=t?.page??1,s=t?.totalPages??1;return e`
+      <k-combobox
+        .value=${String(o)}
+        @input=${this.handleInput}
+        @blur=${this.handleBlur}
+        placeholder="page"
+        no-results-message="Invalid Page"
+      >
+        ${Array.from({length:s},(t,o)=>e`
+          <k-option value=${o+1}>${o+1}</k-option>
+        `)}
+      </k-combobox>
+    `}static styles=[t.styles,o`
+      k-combobox { width: 5rem; }
+    `]}customElements.define("kc-pg-goto-page",s);

package/docs/src/components/controls/PgItemsPerPage.js

@@ -0,0 +1,12 @@
+import e from"./Control.js";import{html as t,css as s}from"../../lit-all.min.js";export default class a extends e{static hostEvents=["page-change"];handleChange=e=>{const t=this.host;t&&(t.itemsPerPage=parseInt(e.target.value,10))};render(){const e=this.host,s=e?.itemsPerPage??10,a=e?.pageSizes??[5,10,25,50,100];return t`
+      <label>
+        <slot>Items per page:</slot>
+        <select @change=${this.handleChange}>
+          ${a.map(e=>t`<option value=${e} ?selected=${e===s}>${e}</option>`)}
+        </select>
+      </label>
+    `}static styles=[e.styles,s`
+      :host { align-items: center; }
+      label { display: inline-flex; align-items: center; gap: var(--spacer_q, 0.25rem); padding: 0; white-space: nowrap; }
+      select { min-height: 2.5rem; box-sizing: border-box; }
+    `]}customElements.define("kc-pg-items-per-page",a);

package/docs/src/components/controls/PgLast.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static hostEvents=["page-change"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Last Page"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Last Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.page>=e.totalPages}handleAction(){const t=this.host;t&&(t.page=t.totalPages)}render(){return e`<slot><k-icon name="chevron-line"></k-icon></slot>`}}customElements.define("kc-pg-last",s);

package/docs/src/components/controls/PgNext.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static hostEvents=["page-change"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Next Page"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Next Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.page>=e.totalPages}handleAction(){this.host?.nextPage()}render(){return e`<slot><k-icon name="chevron"></k-icon></slot>`}}customElements.define("kc-pg-next",s);

package/docs/src/components/controls/PgPageInfo.js

@@ -0,0 +1,3 @@
+import s from"./Control.js";import{html as e,css as t}from"../../lit-all.min.js";export default class a extends s{static hostEvents=["page-change"];render(){const s=this.host;return e`<span class="info">Page ${s?.page??1} of ${s?.totalPages??1}</span>`}static styles=[s.styles,t`
+      .info { padding: 0 var(--spacer_q, 0.25rem); white-space: nowrap; }
+    `]}customElements.define("kc-pg-page-info",a);

package/docs/src/components/controls/PgPrev.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class i extends t{static hostEvents=["page-change"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Previous Page"),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Previous Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.page<=1}handleAction(){this.host?.previousPage()}render(){return e`<slot><k-icon name="chevron" direction="left"></k-icon></slot>`}}customElements.define("kc-pg-prev",i);

package/docs/src/components/controls/Quote.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static requires=["quote"];static hostMode=["visual","write"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Quote")}handleAction(){this.host?.quote?.()}render(){return e`<slot><k-icon name="format_quote"></k-icon></slot>`}}customElements.define("kc-quote",o);

package/docs/src/components/controls/Redo.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static requires=["redo"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Redo")}handleAction(){this.host?.redo?.()}render(){return e`<slot><k-icon name="redo"></k-icon></slot>`}}customElements.define("kc-redo",o);

package/docs/src/components/{codeEditorControls/ControlSpacer.js → controls/Spacer.js}

@@ -1,6 +1,6 @@
 import e from"../ShadowComponent.js";import{html as t,css as s}from"../../lit-all.min.js";export default class l extends e{static styles=s`
-		:host {
-			display: inline-flex;
-			flex: 1;
-		}
-	`;render(){return t``}}customElements.define("k-cec-spacer",l);
+    :host {
+      display: inline-flex;
+      flex: 1;
+    }
+  `;render(){return t``}}customElements.define("kc-spacer",l);

package/docs/src/components/controls/Strikethrough.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{static requires=["strikethrough"];static hostMode=["visual","write"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Strikethrough")}handleAction(){this.host?.strikethrough?.()}render(){return e`<slot><k-icon name="strikethrough_s"></k-icon></slot>`}}customElements.define("kc-strikethrough",o);

package/docs/src/components/controls/TcDeleteRecord.js

@@ -0,0 +1 @@
+import e from"./ButtonControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class o extends e{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Delete Record")}get record(){const e=this.closest(".record");if(e){const t=e.dataset.index;if(void 0!==t)return this.host?.records?.[t]}return null}delete(){this.handleAction()}handleAction(){const e=this.record;e&&this.host?.deleteRecord(e)}render(){return t`<slot><k-icon name="delete"></k-icon></slot>`}}customElements.define("kc-tc-delete-record",o);

package/docs/src/components/controls/TcDeleteSelected.js

@@ -0,0 +1 @@
+import e from"./ButtonControl.js";import{html as t}from"../../lit-all.min.js";import"../Icon.js";export default class l extends e{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Delete Selected")}handleAction(){this.host?.deleteSelected()}render(){return t`<slot><k-icon name="delete_sweep"></k-icon></slot>`}}customElements.define("kc-tc-delete-selected",l);

package/docs/src/components/controls/TcEdit.js

@@ -0,0 +1,12 @@
+import t from"./Control.js";import{html as e,css as i}from"../../lit-all.min.js";import"../Icon.js";export default class n extends t{static hostEvents=["editingChange"];static properties={...t.properties,isEditing:{type:Boolean,state:!0}};constructor(){super(),this.isEditing=!1}get record(){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.host?.records?.[e]}return null}connectedCallback(){super.connectedCallback();const t=this.host;t&&t.addEventListener("editingChange",t=>{t.detail.record===this.record&&(this.isEditing=t.detail.editing)})}handleEdit=()=>{const t=this.record;t&&this.host?.editRecord(t)};handleSave=()=>{const t=this.record;t&&this.host?.saveEditedRecord(t)};handleCancel=()=>{const t=this.record;t&&this.host?.cancelEditedRecord(t)};render(){return this.isEditing?e`
+      <button class="edit-btn save" @click=${this.handleSave}><k-icon name="check"></k-icon></button>
+      <button class="edit-btn cancel" @click=${this.handleCancel}><k-icon name="close"></k-icon></button>
+    `:e`
+      <button class="edit-btn" @click=${this.handleEdit}><k-icon name="edit"></k-icon></button>
+    `}static styles=[t.styles,i`
+      :host { align-items: baseline; gap: 0.25rem; }
+      .edit-btn { background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius); }
+      .edit-btn:hover { background: oklch(from var(--c_bg__inv) l c h / 0.1); }
+      .save { color: var(--c_success, green); }
+      .cancel { color: var(--c_danger, red); }
+    `]}customElements.define("kc-tc-edit",n);

package/docs/src/components/controls/TcExportCsv.js

@@ -0,0 +1,3 @@
+import t from"./ButtonControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class r extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Export CSV")}get record(){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.host?.records?.[e]}return null}getCSV(){const t=this.host;if(!t)return"";const e=[];t.fields.forEach(({name:t,calculator:o})=>{o||e.push(t)});let o=e.join(",")+"\n";const r=this.record;return r?o+=e.map(t=>r[t]||"").join(",")+"\n":t.records.forEach(t=>{o+=e.map(e=>t[e]||"").join(",")+"\n"}),o}export(){this.handleAction()}handleAction(){const t=this.getCSV(),e=new Blob([t],{type:"text/csv"}),o=URL.createObjectURL(e),r=document.createElement("a");r.href=o,r.download="data.csv",r.click(),URL.revokeObjectURL(o)}render(){return e`<slot><k-icon name="export-file"></k-icon> Export CSV</slot>`}static styles=[t.styles,o`
+      :host { gap: 0.25rem; padding: 0 var(--spacer_h, 0.5rem); }
+    `]}customElements.define("kc-tc-export-csv",r);

package/docs/src/components/controls/TcExportJson.js

@@ -0,0 +1,3 @@
+import t from"./ButtonControl.js";import{html as e,css as o}from"../../lit-all.min.js";import"../Icon.js";export default class r extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Export JSON")}get record(){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.host?.records?.[e]}return null}export(){this.handleAction()}handleAction(){const t=this.record,e=t?JSON.stringify(t):JSON.stringify(this.host?.records||[]),o=new Blob([e],{type:"application/json"}),r=URL.createObjectURL(o),s=document.createElement("a");s.href=r,s.download="data.json",s.click(),URL.revokeObjectURL(r)}render(){return e`<slot><k-icon name="export-file"></k-icon> Export JSON</slot>`}static styles=[t.styles,o`
+      :host { gap: 0.25rem; padding: 0 var(--spacer_h, 0.5rem); }
+    `]}customElements.define("kc-tc-export-json",r);

package/docs/src/components/controls/TcFieldSortHide.js

@@ -0,0 +1,21 @@
+import e from"./ButtonControl.js";import{html as t,render as i}from"../../lit-all.min.js";import"../Icon.js";import l from"../Dialog.js";export default class o extends e{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Show / Hide / Order Fields")}openDialog(){this.handleAction()}handleAction(){import("../Sortable.js");const e=this.host;if(!e)return;const o=document.createElement("div");i(t`
+      <div class="m">
+        <k-sortable id="sorting" @sort=${t=>{const i=Array.from(t.target.querySelectorAll("k-sortable-item")).map(e=>e.getAttribute("data-field"));e.reorderFields(i)}}>
+          ${e.fields.map(i=>t`
+            <k-sortable-item data-field="${i.name}">
+              <label class="field pb0">
+                <input
+                  class="field-visibility"
+                  data-field="${i.name}"
+                  type="checkbox"
+                  .checked="${!i.hidden}"
+                  @change="${t=>e.setFieldHiddenState(i.name,!t.target.checked)}"
+                  style="height: 1.25rem; width: 1.25rem"
+                />
+                ${i.label}
+              </label>
+            </k-sortable-item>
+          `)}
+        </k-sortable>
+      </div>
+    `,o),l.create(o,{title:"Show / Hide / Order Fields",width:"400px",cancelText:"Close"})}render(){return t`<slot><k-icon name="table-visibility"></k-icon></slot>`}}customElements.define("kc-tc-field-sort-hide",o);

package/docs/src/components/controls/TcFilters.js

@@ -0,0 +1,34 @@
+import t from"./ButtonControl.js";import{html as e,render as l}from"../../lit-all.min.js";import"../Icon.js";import i from"../Dialog.js";const n={equals:"equals","not-equals":"does not equal",contains:"contains","not-contains":"does not contain","greater-than":"is greater than","greater-than-or-equal":"is greater than or equal to","less-than":"is less than","less-than-or-equal":"is less than or equal to"};export default class o extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Filters")}handleFilter(){this.handleAction()}handleAction(){this.openDialog()}openDialog=()=>{const t=this.host;if(!t)return;const o=document.createElement("div");l(e`
+      <div class="p">
+        ${0===t.filters.length?e`<p>No Current Filters.</p>`:e`
+          <h5>Current Filters</h5>
+          <ul id="currentFilters">
+            ${t.filters.map(({field:l,condition:i,value:o})=>e`
+              <li data-field="${l}" data-condition="${i}" data-value="${o}">
+                ${t.getFieldLabel(l)} ${n[i]} "${o}"
+                <button class="remove-filter no-btn pq" @click=${()=>{t.removeFilter(l,i,o),s.close(),this.openDialog()}}>
+                  <k-icon name="close"></k-icon>
+                </button>
+              </li>
+            `)}
+          </ul>
+        `}
+        <hr />
+        <h5>Add A Filter</h5>
+        <form id="addFilter" @submit=${e=>{e.preventDefault();const l=e.target;t.addFilter(l.filterField.value,l.filterCondition.value,l.filterValue.value),s.close(),this.openDialog()}}>
+          <select id="filterField" class="mb">
+            ${t.fields.map(({name:t,label:l})=>e`<option value="${t}">${l}</option>`)}
+          </select>
+          <select id="filterCondition" class="mb">
+            ${Object.entries(n).map(([t,l])=>e`
+              <option value="${t}" ?selected="${"contains"===t}">${l}</option>
+            `)}
+          </select>
+          <input id="filterValue" type="text" class="mb" />
+          <button type="submit" class="btn primary mb mr">Add Filter</button>
+          ${0===t.filters.length?"":e`
+            <button type="button" class="btn danger mb mr" @click=${()=>{t.removeAllFilters(),s.close()}}>Clear All Filters</button>
+          `}
+        </form>
+      </div>
+    `,o);const s=i.create(o,{width:"600px",title:"Filters"})};render(){return e`<slot><k-icon name="filter"></k-icon></slot>`}}customElements.define("kc-tc-filters",o);

package/docs/src/components/controls/TcFirstPage.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static hostEvents=["pageChange"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="First Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||1===e.getCurrentPage()}handleAction(){this.host?.firstPage()}render(){return e`<slot><k-icon name="chevron-line" direction="left"></k-icon></slot>`}}customElements.define("kc-tc-first-page",s);

package/docs/src/components/controls/TcHiddenCount.js

@@ -0,0 +1 @@
+import t from"./Control.js";import{html as e}from"../../lit-all.min.js";export default class d extends t{static hostEvents=["recordHidden","recordShown"];static properties={...t.properties,hiddenCount:{type:Number,state:!0}};constructor(){super(),this.hiddenCount=0}connectedCallback(){super.connectedCallback(),this.updateCount()}willUpdate(t){super.willUpdate?.(t),this.updateCount()}updateHiddenCount(){this.updateCount()}handleHiddenChange(){this.updateCount()}updateCount(){this.hiddenCount=this.host?.getHiddenRecords?.()?.length||0}render(){return e`<div><span>${this.hiddenCount}</span> Hidden Records</div>`}}customElements.define("kc-tc-hidden-count",d);

package/docs/src/components/controls/TcHide.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class o extends t{connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Hide Record")}get record(){const t=this.closest(".record");if(t){const e=t.dataset.index;if(void 0!==e)return this.host?.records?.[e]}return null}handleHide(){this.handleAction()}handleAction(){const t=this.record;t&&this.host?.hideRecord(t)}render(){return e`<slot><k-icon name="hide"></k-icon></slot>`}}customElements.define("kc-tc-hide",o);

package/docs/src/components/controls/TcLastPage.js

@@ -0,0 +1 @@
+import t from"./ButtonControl.js";import{html as e}from"../../lit-all.min.js";import"../Icon.js";export default class s extends t{static hostEvents=["pageChange"];connectedCallback(){super.connectedCallback(),this.hasAttribute("title")||(this.title="Last Page")}willUpdate(t){super.willUpdate(t);const e=this.host;this.disabled=!e||e.getCurrentPage()===e.getTotalPages()}handleAction(){this.host?.lastPage()}render(){return e`<slot><k-icon name="chevron-line"></k-icon></slot>`}}customElements.define("kc-tc-last-page",s);