kempo-ui 0.4.4 → 0.4.6

package/docs/index.html

@@ -67,6 +67,9 @@
             >Calendar<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="card components"><a
               href="./components/card.html">Card<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="chat message conversation messaging components"><a
+              href="./components/chat.html"
+            >Chat<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="code editor codeeditor monaco components"><a
               href="./components/code-editor.html"
             >Code Editor<br><small>Component</small></a></k-filter-item>
@@ -95,6 +98,9 @@
           <k-filter-item filter-keywords="html editor components"><a
               href="./components/html-editor.html">HTML
               Editor<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="markdown editor markdowneditor write preview marked gfm tables components"><a
+              href="./components/markdown-editor.html"
+            >Markdown Editor<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="icon components"><a
               href="./components/icon.html">Icon<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="import components"><a
@@ -198,6 +204,9 @@
             >Toggle<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="tree treeview components"><a
               href="./components/tree.html">Tree<br><small>Component</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice selector dropdown speech synthesis preference components"><a
+              href="./components/voice-selector.html"
+            >Voice Selector<br><small>Component</small></a></k-filter-item>
           <k-filter-item filter-keywords="shadow component base"><a
               href="./components/shadow-component.html"
             >Shadow Component<br><small>Base Component</small></a></k-filter-item>
@@ -225,12 +234,17 @@
           <k-filter-item filter-keywords="propconverters prop converters utils utility"><a
               href="./utils/propConverters.html"
             >propConverters<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="sanitizehtml sanitize html xss security utils utility"><a
+              href="./utils/sanitizeHtml.html"
+            >sanitizeHtml<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="string utils utility"><a
               href="./utils/string.html">string<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="theme utils utility"><a
               href="./utils/theme.html">theme<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="type utils utility"><a
               href="./utils/type.html">type<br><small>Utility</small></a></k-filter-item>
+          <k-filter-item filter-keywords="voice speech synthesis preference utils utility"><a
+              href="./utils/voice.html">voice<br><small>Utility</small></a></k-filter-item>
           <k-filter-item filter-keywords="wait async utils utility"><a
               href="./utils/wait.html">wait<br><small>Utility</small></a></k-filter-item>
         </k-filter-list>
@@ -283,6 +297,7 @@
         <a href="./components/aside.html">Aside</a>
         <a href="./components/calendar.html">Calendar</a>
         <a href="./components/card.html">Card</a>
+        <a href="./components/chat.html">Chat</a>
         <a href="./components/code-editor.html">Code Editor</a>
         <a href="./components/combobox.html">Combobox</a>
         <a href="./components/color-picker.html">ColorPicker</a>
@@ -293,6 +308,7 @@
         <a href="./components/filter-list.html">Filter List</a>
         <a href="./components/focus-capture.html">FocusCapture</a>
         <a href="./components/html-editor.html">HTML Editor</a>
+        <a href="./components/markdown-editor.html">Markdown Editor</a>
         <a href="./components/icon.html">Icon</a>
         <a href="./components/import.html">Import</a>
         <a href="./components/nav.html">Nav</a>
@@ -317,6 +333,7 @@
         <a href="./components/toast.html">Toast</a>
         <a href="./components/toggle.html">Toggle</a>
         <a href="./components/tree.html">Tree</a>
+        <a href="./components/voice-selector.html">Voice Selector</a>
       </div>
 
       <h5 class="mb0">Base Components</h5>
@@ -336,9 +353,11 @@
         <a href="./utils/formatTimestamp.html">formatTimestamp</a>
         <a href="./utils/object.html">object</a>
         <a href="./utils/propConverters.html">propConverters</a>
+        <a href="./utils/sanitizeHtml.html">sanitizeHtml</a>
         <a href="./utils/string.html">string</a>
         <a href="./utils/theme.html">theme</a>
         <a href="./utils/type.html">type</a>
+        <a href="./utils/voice.html">voice</a>
         <a href="./utils/wait.html">wait</a>
       </div>
     </menu>
@@ -518,6 +537,12 @@
           <p class="tc-muted">Container component with optional labels and border styling.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./components/chat.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Chat</h3>
+          <p class="tc-muted">Chat-room widget with rich-text input, send-on-enter option, and per-message state tracking.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="./components/code-editor.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Code Editor</h3>
@@ -578,6 +603,12 @@
           <p class="tc-muted">WYSIWYG editor with formatting tools and dual editing modes.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./components/markdown-editor.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Markdown Editor</h3>
+          <p class="tc-muted">Markdown editor with Write/Preview tabs, slot-based toolbars, and a tiny safe parser (no inline HTML).</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="./components/icon.html" class="card mb no-link d-b">
           <h3 class="tc-primary">Icon</h3>
@@ -722,6 +753,12 @@
           <p class="tc-muted">Hierarchical data visualization with collapsible branches and custom leaf types.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./components/voice-selector.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">Voice Selector</h3>
+          <p class="tc-muted">Dropdown of available speech-synthesis voices, persisted via the voice utility for site-wide use.</p>
+        </a>
+      </div>
     </div>
 
     <h2>Base Components</h2>
@@ -784,6 +821,12 @@
           <p class="tc-muted">Type converters for Lit component properties and attributes.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./utils/sanitizeHtml.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">sanitizeHtml</h3>
+          <p class="tc-muted">Whitelist HTML sanitizer for user-submitted rich text. Strips unsafe tags, attributes, and URL schemes.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="./utils/string.html" class="card mb no-link d-b">
           <h3 class="tc-primary">string</h3>
@@ -808,6 +851,12 @@
           <p class="tc-muted">Functions for manipulating and analyzing JavaScript objects.</p>
         </a>
       </div>
+      <div class="span-12 t-span-6 d-span-4 px">
+        <a href="./utils/voice.html" class="card mb no-link d-b">
+          <h3 class="tc-primary">voice</h3>
+          <p class="tc-muted">Persisted speech-synthesis voice preference with pub/sub, mirroring the theme utility.</p>
+        </a>
+      </div>
       <div class="span-12 t-span-6 d-span-4 px">
         <a href="./utils/wait.html" class="card mb no-link d-b">
           <h3 class="tc-primary">wait</h3>

package/docs/src/components/Chat.js

@@ -0,0 +1,201 @@
+import{html as e,css as t,nothing as s}from"../lit-all.min.js";import i from"./ShadowComponent.js";import o from"../utils/sanitizeHtml.js";import a from"../utils/renderMarkdown.js";import"./MarkdownEditor.js";import"./markdownEditorControls/Bold.js";import"./markdownEditorControls/Italic.js";import"./markdownEditorControls/Code.js";import"./markdownEditorControls/Link.js";import"./markdownEditorControls/BulletList.js";import"./markdownEditorControls/NumberedList.js";import"./markdownEditorControls/Quote.js";import"./Spinner.js";import"./Icon.js";const r=new Set(["sending","delivered","read","failed"]);export default class n extends i{static properties={enterNewline:{type:Boolean,reflect:!0,attribute:"enter-newline"},showStatus:{type:String,reflect:!0,attribute:"show-status"},placeholder:{type:String,reflect:!0},disabled:{type:Boolean,reflect:!0},messages:{state:!0}};constructor(){super(),this.enterNewline=!1,this.showStatus=null,this.placeholder="Type a message...",this.disabled=!1,this.messages=[]}updated(e){super.updated(e),e.has("messages")&&this.#e()}addMessage(e={}){const t="outgoing"===e.type?"outgoing":"incoming",s=e.id||("undefined"!=typeof crypto&&"function"==typeof crypto.randomUUID?crypto.randomUUID():`msg-${Date.now()}-${Math.random().toString(36).slice(2,10)}`),i={id:s,type:t,html:o(e.html||""),status:r.has(e.status)?e.status:"outgoing"===t?"delivered":"read",sender:e.sender||"",timestamp:e.timestamp instanceof Date?e.timestamp:new Date};return this.messages=[...this.messages,i],s}updateMessage(e,t={}){let s=!1;return this.messages=this.messages.map(i=>{if(i.id!==e)return i;s=!0;const a={...i};return void 0!==t.html&&(a.html=o(t.html)),void 0!==t.status&&r.has(t.status)&&(a.status=t.status),void 0!==t.sender&&(a.sender=t.sender),t.timestamp instanceof Date&&(a.timestamp=t.timestamp),a}),s}removeMessage(e){const t=this.messages.length;return this.messages=this.messages.filter(t=>t.id!==e),this.messages.length!==t}clear(){this.messages=[]}send(){if(this.disabled)return null;const e=this.shadowRoot?.querySelector("k-markdown-editor");if(!e)return null;const t=(e.value||"").trim();if(!t)return null;const s=o(a(t,{breaks:!0})),i=this.addMessage({type:"outgoing",html:s,status:this.#t?"sending":"delivered"});return e.clear(),this.dispatchEvent(new CustomEvent("send",{detail:{id:i,html:s,markdown:t},bubbles:!0})),i}handleSendClick=()=>this.send();handleEditorKeydown=e=>{if(this.disabled)return;if("Enter"!==e.key||e.ctrlKey||e.metaKey||e.altKey)return;(this.enterNewline?e.shiftKey:!e.shiftKey)&&(e.preventDefault(),this.send())};#e=()=>{this.updateComplete.then(()=>{const e=this.shadowRoot?.querySelector(".window");e&&(e.scrollTop=e.scrollHeight)})};get#s(){for(let e=this.messages.length-1;e>=0;e--)if("outgoing"===this.messages[e].type)return this.messages[e].id;return null}get#t(){return null!=this.showStatus&&"false"!==this.showStatus}get#i(){return"icons"===this.showStatus?"icons":"text"}#o(e,t){return!!this.#t&&("outgoing"===e.type&&("sending"===e.status||"failed"===e.status||e.id===t))}#a(e){return"icons"===this.#i?this.#r(e):this.#n(e)}#n(t){return"sending"===t?e`<span class="status sending"><k-spinner size="xs"></k-spinner> Sending&hellip;</span>`:"delivered"===t?e`<span class="status">Delivered</span>`:"read"===t?e`<span class="status">Read</span>`:"failed"===t?e`<span class="status failed"><k-icon name="error"></k-icon> Not Delivered</span>`:s}#r(t){return"sending"===t?e`<span class="status status-icon-only"><k-spinner size="xs" title="Sending"></k-spinner></span>`:"delivered"===t?e`<span class="status status-icon-only"><k-icon name="check" title="Delivered"></k-icon></span>`:"read"===t?e`<span class="status status-icon-only"><k-icon name="done_all" title="Read"></k-icon></span>`:"failed"===t?e`<span class="status status-icon-only failed"><k-icon name="error" title="Not Delivered"></k-icon></span>`:s}#d(t,i){const o=this.#o(t,i);return e`
+      <div
+        class="message ${t.type} ${t.status}"
+        data-id=${t.id}
+      >
+        ${t.sender?e`<div class="sender">${t.sender}</div>`:s}
+        <div class="bubble">
+          <div class="content" .innerHTML=${t.html}></div>
+        </div>
+        ${o?this.#a(t.status):s}
+      </div>
+    `}render(){const t=this.#s;return e`
+      <div class="window" role="log" aria-live="polite">
+        ${this.messages.map(e=>this.#d(e,t))}
+      </div>
+      <div class="input-area">
+        <k-markdown-editor
+          class="editor"
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          @keydown=${this.handleEditorKeydown}
+        >
+          <div slot="controls-top" class="controls-top">
+            <slot name="controls-top">
+              <k-md-bold></k-md-bold>
+              <k-md-italic></k-md-italic>
+              <k-md-code></k-md-code>
+              <k-md-link></k-md-link>
+              <k-md-bullet-list></k-md-bullet-list>
+              <k-md-numbered-list></k-md-numbered-list>
+              <k-md-quote></k-md-quote>
+            </slot>
+          </div>
+          <div slot="controls-bottom" class="controls-bottom">
+            <slot name="controls-bottom"></slot>
+            <button
+              type="button"
+              class="send-btn primary"
+              ?disabled=${this.disabled}
+              @click=${this.handleSendClick}
+              aria-label="Send message"
+              title="Send message"
+            >
+              <k-icon name="send"></k-icon>
+            </button>
+          </div>
+        </k-markdown-editor>
+      </div>
+    `}static styles=t`
+    :host {
+      --window_min_height: 16rem;
+      --window_max_height: 32rem;
+      --chat_padding: 0.5rem;
+      --chat_gap: 0.5rem;
+      --message_radius: 1rem;
+      --message_max_width: 75%;
+      --bubble_padding: 0.5rem 0.75rem;
+      --bubble_bg__incoming: var(--c_bg__alt);
+      --bubble_bg__outgoing: var(--c_primary);
+      --bubble_tc__outgoing: white;
+      --send_btn_bg: var(--c_primary);
+      --send_btn_tc: white;
+
+      display: flex;
+      flex-direction: column;
+      border: 1px solid var(--c_border);
+      border-radius: var(--radius);
+      background: var(--c_bg);
+      /* Note: NO overflow:hidden on the host — that would clip the input
+         area's focus shadow. Each child clips its own content against the
+         shared rounded corners instead. */
+    }
+    :host([disabled]) {
+      opacity: 0.6;
+    }
+    .window {
+      flex: 1 1 auto;
+      min-height: var(--window_min_height);
+      max-height: var(--window_max_height);
+      overflow-y: auto;
+      padding: var(--chat_padding);
+      display: flex;
+      flex-direction: column;
+      gap: var(--chat_gap);
+      scroll-behavior: smooth;
+      /* Match the chat's outer rounded corners on the top edge so messages
+         don't render past them. */
+      border-top-left-radius: var(--radius);
+      border-top-right-radius: var(--radius);
+    }
+    .message {
+      display: flex;
+      flex-direction: column;
+      max-width: var(--message_max_width);
+      gap: 0.125rem;
+    }
+    .message.outgoing {
+      align-self: flex-end;
+      align-items: flex-end;
+    }
+    .message.incoming {
+      align-self: flex-start;
+      align-items: flex-start;
+    }
+    .sender {
+      font-size: 0.75rem;
+      color: var(--tc_muted);
+    }
+    .bubble {
+      padding: var(--bubble_padding);
+      border-radius: var(--message_radius);
+      background: var(--bubble_bg__incoming);
+      color: var(--tc);
+      word-wrap: break-word;
+      overflow-wrap: anywhere;
+    }
+    .message.outgoing .bubble {
+      background: var(--bubble_bg__outgoing);
+      color: var(--bubble_tc__outgoing);
+    }
+    .message.outgoing.sending .bubble {
+      opacity: 0.7;
+    }
+    .message.outgoing.failed .bubble {
+      background: var(--c_danger, #d32f2f);
+    }
+    .content {
+      line-height: 1.4;
+    }
+    .content p:first-child { margin-top: 0; }
+    .content p:last-child { margin-bottom: 0; }
+    /* iMessage-style small grey label below the message bubble. */
+    .status {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      font-size: 0.7rem;
+      color: var(--tc_muted);
+      margin-top: 0.125rem;
+    }
+    .status.failed {
+      color: var(--c_danger, #d32f2f);
+    }
+    .status k-spinner,
+    .status k-icon {
+      font-size: 0.8rem;
+    }
+    .status-icon-only {
+      font-size: 0.95rem;
+    }
+    .input-area {
+      position: relative;
+      border-top: 1px solid var(--c_border);
+      border-bottom-left-radius: var(--radius);
+      border-bottom-right-radius: var(--radius);
+    }
+    .editor {
+      /* Markdown editor fills the bottom of the chat. CSS custom properties
+         pierce shadow boundaries -- '--height' sets the initial size of the
+         editor's internal Resize wrapper. */
+      --height: 13rem;
+      display: block;
+      width: 100%;
+    }
+    .controls-top,
+    .controls-bottom {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 0.125rem;
+    }
+    .controls-bottom {
+      width: 100%;
+    }
+    .send-btn {
+      margin-left: auto;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      height: 2rem;
+      padding: 0;
+      border: 1px solid transparent;
+      border-radius: 50%;
+      background: var(--c_primary);
+      color: white;
+      cursor: pointer;
+      transition: opacity var(--animation_ms);
+    }
+    .send-btn:hover:not(:disabled) {
+      opacity: 0.9;
+    }
+    .send-btn:focus-visible {
+      outline: none;
+      box-shadow: var(--focus_shadow);
+    }
+    .send-btn:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  `}customElements.define("k-chat",n);

package/docs/src/components/CodeEditor.js

@@ -1,4 +1,4 @@
-import{html as t,css as e}from"../lit-all.min.js";import o from"./ShadowComponent.js";import i from"../utils/formatCode.js";import{getCalculatedTheme as s,subscribeToTheme as r}from"../utils/theme.js";export default class a extends o{static formAssociated=!0;static properties={name:{type:String,reflect:!0},value:{type:String,reflect:!0},language:{type:String,reflect:!0},monacoSrc:{type:String,attribute:"monaco-src"},controls:{type:String,reflect:!0},editorTheme:{type:String,attribute:"editor-theme",reflect:!0},hasTopToolbar:{type:Boolean,state:!0},hasBottomToolbar:{type:Boolean,state:!0},fullscreen:{type:Boolean,reflect:!0},wordWrap:{type:Boolean},minimapEnabled:{type:Boolean}};constructor(){super(),this.internals=this.attachInternals(),this.name="",this.value="",this.language="javascript",this.monacoSrc="",this.controls="",this.controlsLoaded=!1,this.hasTopToolbar=!1,this.hasBottomToolbar=!1,this.monacoEditor=null,this.skipValueSync=!1,this.editorTheme="auto",this.wordWrap=!0,this.minimapEnabled=!1,this.fontSize=14,this.fullscreen=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("value")&&(this.value=this.getAttribute("value")),this.slotObserver=new MutationObserver(()=>this.updateToolbarVisibility()),this.slotObserver.observe(this,{childList:!0,subtree:!0}),this.updateToolbarVisibility()}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.monacoEditor?.dispose(),this.unsubscribeTheme?.(),this.fullscreen&&this.exitFullscreen()}updateToolbarVisibility(){const t=new Set(Array.from(this.children).map(t=>t.getAttribute("slot"))),e=this.constructor.controlSets[this.controls]??null;this.hasTopToolbar=!(!e?.topLeft&&!e?.topRight)||["toolbar-top","toolbar-top-left","toolbar-top-right"].some(e=>t.has(e)),this.hasBottomToolbar=!(!e?.bottomLeft&&!e?.bottomRight)||["toolbar-bottom","toolbar-bottom-left","toolbar-bottom-right"].some(e=>t.has(e))}updated(t){if(super.updated(t),t.has("controls")&&(this.updateToolbarVisibility(),this.controls&&"none"!==this.controls&&this.loadControls()),t.has("value")&&!this.skipValueSync&&(this.monacoEditor&&this.monacoEditor.getValue()!==this.value&&this.monacoEditor.setValue(this.value),this.updateFormValue(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))),t.has("language")&&this.monacoEditor){const t=this.monacoEditor.getModel();t&&window.monaco.editor.setModelLanguage(t,this.language),this.dispatchEvent(new CustomEvent("language-changed",{detail:{language:this.language},bubbles:!0}))}t.has("editorTheme")&&this.monacoEditor&&(window.monaco.editor.setTheme(this.resolveMonacoTheme()),this.dispatchEvent(new CustomEvent("editor-theme-changed",{detail:{editorTheme:this.editorTheme},bubbles:!0}))),t.has("wordWrap")&&(this.monacoEditor?.updateOptions({wordWrap:this.wordWrap?"on":"off"}),this.dispatchEvent(new CustomEvent("word-wrap-changed",{detail:{wordWrap:this.wordWrap},bubbles:!0}))),t.has("minimapEnabled")&&(this.monacoEditor?.updateOptions({minimap:{enabled:this.minimapEnabled}}),this.dispatchEvent(new CustomEvent("minimap-changed",{detail:{minimapEnabled:this.minimapEnabled},bubbles:!0}))),t.has("fullscreen")&&(this.fullscreen||this.monacoEditor?.layout({width:0,height:0}),requestAnimationFrame(()=>this.monacoEditor?.layout()))}async firstUpdated(){this.monacoContainer=this.shadowRoot.querySelector(".monaco-editor-container"),await this.initMonaco(),this.dispatchEvent(new CustomEvent("ready",{detail:{value:this.value},bubbles:!0}))}async loadControls(){if(this.controlsLoaded)return;this.controlsLoaded=!0;const t=new URL("./codeEditorControls/",import.meta.url).href;await Promise.all([import(`${t}FormatCode.js`),import(`${t}CopyCode.js`),import(`${t}EditorTheme.js`),import(`${t}Undo.js`),import(`${t}Redo.js`),import(`${t}WordWrap.js`),import(`${t}Minimap.js`),import(`${t}FindReplace.js`),import(`${t}FontSize.js`),import(`${t}FoldAll.js`),import(`${t}LanguageSelect.js`),import(`${t}Fullscreen.js`),import(`${t}ControlGroup.js`),import(`${t}ControlSpacer.js`)]),this.requestUpdate()}async initMonaco(){if(!this.monacoEditor){if(this.monacoInitPromise)return this.monacoInitPromise;this.monacoInitPromise=this._initMonaco(),await this.monacoInitPromise,this.monacoInitPromise=null}}async _initMonaco(){const t=this.monacoSrc||window.kempo?.monacoUrl||"https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min";await new Promise((e,o)=>{if(window.monaco)return void e();if(window.require?.defined?.("vs/editor/editor.main"))return void e();const i=document.querySelector(`script[src="${t}/vs/loader.js"]`);if(i)return void i.addEventListener("load",()=>{window.require.config({paths:{vs:`${t}/vs`}}),window.require(["vs/editor/editor.main"],()=>e(),o)});const s=document.createElement("script");s.src=`${t}/vs/loader.js`,s.onload=()=>{window.require.config({paths:{vs:`${t}/vs`}}),window.require(["vs/editor/editor.main"],()=>e(),o)},s.onerror=o,document.head.appendChild(s)}),this.monacoEditor=window.monaco.editor.create(this.monacoContainer,{value:this.value,language:this.language,theme:this.resolveMonacoTheme(),minimap:{enabled:!1},wordWrap:"on",fontSize:14,scrollBeyondLastLine:!1,automaticLayout:!0,tabSize:2,padding:{top:8}});const e=document.querySelector('link[href*="monaco"][href*="editor.main.css"]');if(e){const t=document.createElement("link");t.rel="stylesheet",t.href=e.href,this.shadowRoot.appendChild(t)}this.unsubscribeTheme=r(()=>{this.monacoEditor&&"auto"===this.editorTheme&&window.monaco.editor.setTheme(this.resolveMonacoTheme())}),this.monacoEditor.onDidChangeModelContent(()=>{this.skipValueSync=!0,this.value=this.monacoEditor.getValue(),this.skipValueSync=!1,this.updateFormValue(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0})),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0}))})}updateFormValue(){this.internals.setFormValue(this.getValue())}formResetCallback(){this.value=""}formStateRestoreCallback(t){this.value=t}getValue(){return this.monacoEditor?this.monacoEditor.getValue():this.value}setValue(t){return this.skipValueSync=!0,this.value=t,this.monacoEditor&&this.monacoEditor.setValue(t),this.updateFormValue(),this.skipValueSync=!1,this}clear(){return this.setValue("")}formatCode(){return this.monacoEditor?.getAction("editor.action.formatDocument")?.run(),this}selectAll(){if(!this.monacoEditor)return this;const t=this.monacoEditor.getModel();return t&&this.monacoEditor.setSelection(t.getFullModelRange()),this}getSelectedText(){return this.monacoEditor&&this.monacoEditor.getModel()?.getValueInRange(this.monacoEditor.getSelection())||""}focus(){return this.monacoEditor?.focus(),this}setLanguage(t){return this.language=t,this}setEditorTheme(t){return["auto","light","dark"].includes(t)&&(this.editorTheme=t),this}copyToClipboard(){return navigator.clipboard.writeText(this.getValue()),this}undo(){return this.monacoEditor?.trigger("toolbar","undo"),this}redo(){return this.monacoEditor?.trigger("toolbar","redo"),this}setWordWrap(t){return this.wordWrap=t,this}setMinimap(t){return this.minimapEnabled=t,this}toggleWordWrap(){return this.setWordWrap(!this.wordWrap)}toggleMinimap(){return this.setMinimap(!this.minimapEnabled)}openFind(){return this.monacoEditor?.getAction("actions.find")?.run(),this}increaseFontSize(){return this.fontSize=Math.min(this.fontSize+2,40),this.monacoEditor?.updateOptions({fontSize:this.fontSize}),this}decreaseFontSize(){return this.fontSize=Math.max(this.fontSize-2,8),this.monacoEditor?.updateOptions({fontSize:this.fontSize}),this}foldAll(){return this.monacoEditor?.getAction("editor.foldAll")?.run(),this}unfoldAll(){return this.monacoEditor?.getAction("editor.unfoldAll")?.run(),this}enterFullscreen(){return this.fullscreen=!0,document.body.classList.add("no-scroll"),this.dispatchEvent(new CustomEvent("fullscreen-changed",{detail:{fullscreen:!0},bubbles:!0})),this}exitFullscreen(){return this.fullscreen=!1,document.body.classList.remove("no-scroll"),this.dispatchEvent(new CustomEvent("fullscreen-changed",{detail:{fullscreen:!1},bubbles:!0})),this}toggleFullscreen(){return this.fullscreen?this.exitFullscreen():this.enterFullscreen()}resolveMonacoTheme(){return"dark"===this.editorTheme?"vs-dark":"light"===this.editorTheme?"vs":"dark"===s()?"vs-dark":"vs"}static controlSets={full:{topLeft:t`
+import{html as t,css as e}from"../lit-all.min.js";import o from"./ShadowComponent.js";import i from"../utils/formatCode.js";import{getCalculatedTheme as s,subscribeToTheme as a}from"../utils/theme.js";export default class r extends o{static formAssociated=!0;static properties={name:{type:String,reflect:!0},value:{type:String,reflect:!0},language:{type:String,reflect:!0},monacoSrc:{type:String,attribute:"monaco-src"},controls:{type:String,reflect:!0},editorTheme:{type:String,attribute:"editor-theme",reflect:!0},hasTopToolbar:{type:Boolean,state:!0},hasBottomToolbar:{type:Boolean,state:!0},fullscreen:{type:Boolean,reflect:!0},wordWrap:{type:Boolean},minimapEnabled:{type:Boolean},disabled:{type:Boolean,reflect:!0},readonly:{type:Boolean,reflect:!0},required:{type:Boolean,reflect:!0}};constructor(){super(),this.internals=this.attachInternals(),this.name="",this.value="",this.language="javascript",this.monacoSrc="",this.controls="",this.controlsLoaded=!1,this.hasTopToolbar=!1,this.hasBottomToolbar=!1,this.monacoEditor=null,this.skipValueSync=!1,this.editorTheme="auto",this.wordWrap=!0,this.minimapEnabled=!1,this.fontSize=14,this.fullscreen=!1,this.disabled=!1,this.readonly=!1,this.required=!1}connectedCallback(){super.connectedCallback(),this.hasAttribute("value")&&(this.value=this.getAttribute("value")),this.slotObserver=new MutationObserver(()=>this.updateToolbarVisibility()),this.slotObserver.observe(this,{childList:!0,subtree:!0}),this.updateToolbarVisibility()}disconnectedCallback(){super.disconnectedCallback(),this.slotObserver?.disconnect(),this.monacoEditor?.dispose(),this.unsubscribeTheme?.(),this.fullscreen&&this.exitFullscreen()}updateToolbarVisibility(){const t=new Set(Array.from(this.children).map(t=>t.getAttribute("slot"))),e=this.constructor.controlSets[this.controls]??null;this.hasTopToolbar=!(!e?.topLeft&&!e?.topRight)||["toolbar-top","toolbar-top-left","toolbar-top-right"].some(e=>t.has(e)),this.hasBottomToolbar=!(!e?.bottomLeft&&!e?.bottomRight)||["toolbar-bottom","toolbar-bottom-left","toolbar-bottom-right"].some(e=>t.has(e))}updated(t){if(super.updated(t),t.has("controls")&&(this.updateToolbarVisibility(),this.controls&&"none"!==this.controls&&this.loadControls()),t.has("value")&&!this.skipValueSync&&(this.monacoEditor&&this.monacoEditor.getValue()!==this.value&&this.monacoEditor.setValue(this.value),this.updateFormValue(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0}))),t.has("language")&&this.monacoEditor){const t=this.monacoEditor.getModel();t&&window.monaco.editor.setModelLanguage(t,this.language),this.dispatchEvent(new CustomEvent("language-changed",{detail:{language:this.language},bubbles:!0}))}t.has("editorTheme")&&this.monacoEditor&&(window.monaco.editor.setTheme(this.resolveMonacoTheme()),this.dispatchEvent(new CustomEvent("editor-theme-changed",{detail:{editorTheme:this.editorTheme},bubbles:!0}))),t.has("wordWrap")&&(this.monacoEditor?.updateOptions({wordWrap:this.wordWrap?"on":"off"}),this.dispatchEvent(new CustomEvent("word-wrap-changed",{detail:{wordWrap:this.wordWrap},bubbles:!0}))),t.has("minimapEnabled")&&(this.monacoEditor?.updateOptions({minimap:{enabled:this.minimapEnabled}}),this.dispatchEvent(new CustomEvent("minimap-changed",{detail:{minimapEnabled:this.minimapEnabled},bubbles:!0}))),t.has("fullscreen")&&(this.fullscreen||this.monacoEditor?.layout({width:0,height:0}),requestAnimationFrame(()=>this.monacoEditor?.layout())),(t.has("disabled")||t.has("readonly"))&&this.monacoEditor?.updateOptions({readOnly:this.disabled||this.readonly}),(t.has("value")||t.has("required")||t.has("disabled"))&&this.#t()}#t=()=>{this.disabled?this.internals.setValidity({}):this.required&&!(this.getValue()||"").trim()?this.internals.setValidity({valueMissing:!0},"Please fill out this field.",this.monacoContainer||this):this.internals.setValidity({})};async firstUpdated(){this.monacoContainer=this.shadowRoot.querySelector(".monaco-editor-container"),await this.initMonaco(),this.dispatchEvent(new CustomEvent("ready",{detail:{value:this.value},bubbles:!0}))}async loadControls(){if(this.controlsLoaded)return;this.controlsLoaded=!0;const t=new URL("./codeEditorControls/",import.meta.url).href;await Promise.all([import(`${t}FormatCode.js`),import(`${t}CopyCode.js`),import(`${t}EditorTheme.js`),import(`${t}Undo.js`),import(`${t}Redo.js`),import(`${t}WordWrap.js`),import(`${t}Minimap.js`),import(`${t}FindReplace.js`),import(`${t}FontSize.js`),import(`${t}FoldAll.js`),import(`${t}LanguageSelect.js`),import(`${t}Fullscreen.js`),import(`${t}ControlGroup.js`),import(`${t}ControlSpacer.js`)]),this.requestUpdate()}async initMonaco(){if(!this.monacoEditor){if(this.monacoInitPromise)return this.monacoInitPromise;this.monacoInitPromise=this._initMonaco(),await this.monacoInitPromise,this.monacoInitPromise=null}}async _initMonaco(){const t=this.monacoSrc||window.kempo?.monacoUrl||"https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min";await new Promise((e,o)=>{if(window.monaco)return void e();if(window.require?.defined?.("vs/editor/editor.main"))return void e();const i=document.querySelector(`script[src="${t}/vs/loader.js"]`);if(i)return void i.addEventListener("load",()=>{window.require.config({paths:{vs:`${t}/vs`}}),window.require(["vs/editor/editor.main"],()=>e(),o)});const s=document.createElement("script");s.src=`${t}/vs/loader.js`,s.onload=()=>{window.require.config({paths:{vs:`${t}/vs`}}),window.require(["vs/editor/editor.main"],()=>e(),o)},s.onerror=o,document.head.appendChild(s)}),this.monacoEditor=window.monaco.editor.create(this.monacoContainer,{value:this.value,language:this.language,theme:this.resolveMonacoTheme(),minimap:{enabled:!1},wordWrap:"on",fontSize:14,scrollBeyondLastLine:!1,automaticLayout:!0,tabSize:2,padding:{top:8},readOnly:this.disabled||this.readonly});const e=document.querySelector('link[href*="monaco"][href*="editor.main.css"]');if(e){const t=document.createElement("link");t.rel="stylesheet",t.href=e.href,this.shadowRoot.appendChild(t)}this.unsubscribeTheme=a(()=>{this.monacoEditor&&"auto"===this.editorTheme&&window.monaco.editor.setTheme(this.resolveMonacoTheme())}),this.monacoEditor.onDidChangeModelContent(()=>{this.skipValueSync=!0,this.value=this.monacoEditor.getValue(),this.skipValueSync=!1,this.updateFormValue(),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0})),this.dispatchEvent(new CustomEvent("input",{detail:{value:this.value},bubbles:!0}))})}updateFormValue(){this.internals.setFormValue(this.getValue())}formResetCallback(){this.value=""}formStateRestoreCallback(t){this.value=t}formDisabledCallback(t){this.disabled=t}getValue(){return this.monacoEditor?this.monacoEditor.getValue():this.value}setValue(t){return this.skipValueSync=!0,this.value=t,this.monacoEditor&&this.monacoEditor.setValue(t),this.updateFormValue(),this.skipValueSync=!1,this}clear(){return this.setValue("")}formatCode(){return this.monacoEditor?.getAction("editor.action.formatDocument")?.run(),this}selectAll(){if(!this.monacoEditor)return this;const t=this.monacoEditor.getModel();return t&&this.monacoEditor.setSelection(t.getFullModelRange()),this}getSelectedText(){return this.monacoEditor&&this.monacoEditor.getModel()?.getValueInRange(this.monacoEditor.getSelection())||""}focus(){return this.monacoEditor?.focus(),this}setLanguage(t){return this.language=t,this}setEditorTheme(t){return["auto","light","dark"].includes(t)&&(this.editorTheme=t),this}copyToClipboard(){return navigator.clipboard.writeText(this.getValue()),this}undo(){return this.monacoEditor?.trigger("toolbar","undo"),this}redo(){return this.monacoEditor?.trigger("toolbar","redo"),this}setWordWrap(t){return this.wordWrap=t,this}setMinimap(t){return this.minimapEnabled=t,this}toggleWordWrap(){return this.setWordWrap(!this.wordWrap)}toggleMinimap(){return this.setMinimap(!this.minimapEnabled)}openFind(){return this.monacoEditor?.getAction("actions.find")?.run(),this}increaseFontSize(){return this.fontSize=Math.min(this.fontSize+2,40),this.monacoEditor?.updateOptions({fontSize:this.fontSize}),this}decreaseFontSize(){return this.fontSize=Math.max(this.fontSize-2,8),this.monacoEditor?.updateOptions({fontSize:this.fontSize}),this}foldAll(){return this.monacoEditor?.getAction("editor.foldAll")?.run(),this}unfoldAll(){return this.monacoEditor?.getAction("editor.unfoldAll")?.run(),this}enterFullscreen(){return this.fullscreen=!0,document.body.classList.add("no-scroll"),this.dispatchEvent(new CustomEvent("fullscreen-changed",{detail:{fullscreen:!0},bubbles:!0})),this}exitFullscreen(){return this.fullscreen=!1,document.body.classList.remove("no-scroll"),this.dispatchEvent(new CustomEvent("fullscreen-changed",{detail:{fullscreen:!1},bubbles:!0})),this}toggleFullscreen(){return this.fullscreen?this.exitFullscreen():this.enterFullscreen()}resolveMonacoTheme(){return"dark"===this.editorTheme?"vs-dark":"light"===this.editorTheme?"vs":"dark"===s()?"vs-dark":"vs"}static controlSets={full:{topLeft:t`
 				<k-cec-group>
 					<k-cec-undo></k-cec-undo>
 					<k-cec-redo></k-cec-redo>
@@ -69,6 +69,25 @@ import{html as t,css as e}from"../lit-all.min.js";import o from"./ShadowComponen
 		[hidden] {
 			display: none !important;
 		}
+		:host([disabled]) {
+			opacity: 0.6;
+		}
+		/* disabled blocks all interaction -- toolbar AND editor. Monaco's
+		   readOnly already prevents typing; pointer-events: none also stops
+		   focus / cursor placement, matching native form control semantics. */
+		:host([disabled]) .toolbar-top,
+		:host([disabled]) .toolbar-bottom,
+		:host([disabled]) .editor-container {
+			pointer-events: none;
+		}
+		/* readonly keeps the editor interactive (so users can place a cursor
+		   to select / copy) but mutes the toolbar so its buttons can't
+		   mutate the document. */
+		:host([readonly]) .toolbar-top,
+		:host([readonly]) .toolbar-bottom {
+			pointer-events: none;
+			opacity: 0.5;
+		}
 	`;render(){const e=this.constructor.controlSets[this.controls]??{};return t`
 			${this.hasTopToolbar?t`
 				<div class="toolbar-top bb">
@@ -93,4 +112,4 @@ import{html as t,css as e}from"../lit-all.min.js";import o from"./ShadowComponen
 					</div>
 				</div>
 			`:""}
-		`}}customElements.define("k-code-editor",a);
+		`}}customElements.define("k-code-editor",r);

package/docs/src/components/Dropdown.js

@@ -14,7 +14,7 @@ import{html as e,css as t}from"../lit-all.min.js";import o from"./ShadowComponen
 			display: none;
 			position: fixed;
 			position-anchor: --dropdown-trigger;
-			z-index: 70;
+			z-index: 30;
 			min-width: anchor-size(width);
 			background: var(--c_bg);
 			border: 1px solid var(--c_border);