@kodaris/krubble-components 1.0.40 → 1.0.41

package/custom-elements.json

@@ -150,6 +150,14 @@
             "name": "KRSelectOption",
             "module": "./form/index.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "KRAutoSuggest",
+          "declaration": {
+            "name": "KRAutoSuggest",
+            "module": "./form/index.js"
+          }
         }
       ]
     },
@@ -325,6 +333,11 @@
           "name": "KRTextareaField",
           "default": "class KRTextareaField extends i$2 { constructor() { super(); /** * The textarea label text */ this.label = ''; /** * The textarea name for form submission */ this.name = ''; /** * The current value */ this.value = ''; /** * Placeholder text */ this.placeholder = ''; /** * Whether the field is required */ this.required = false; /** * Whether the field is disabled */ this.disabled = false; /** * Whether the field is readonly */ this.readonly = false; /** * Number of visible text lines */ this.rows = 3; /** * Autocomplete attribute value */ this.autocomplete = ''; /** * Helper text shown below the textarea */ this.hint = ''; this._touched = false; this._dirty = false; this._handleInvalid = (e) => { e.preventDefault(); this._touched = true; }; this._internals = this.attachInternals(); } // Form-associated custom element callbacks get form() { return this._internals.form; } get validity() { return this._internals.validity; } get validationMessage() { return this._internals.validationMessage; } get willValidate() { return this._internals.willValidate; } checkValidity() { return this._internals.checkValidity(); } reportValidity() { return this._internals.reportValidity(); } formResetCallback() { this.value = ''; this._touched = false; this._dirty = false; this._internals.setFormValue(''); this._internals.setValidity({}); } formStateRestoreCallback(state) { this.value = state; } connectedCallback() { super.connectedCallback(); this.addEventListener('invalid', this._handleInvalid); } disconnectedCallback() { super.disconnectedCallback(); this.removeEventListener('invalid', this._handleInvalid); } firstUpdated() { this._updateValidity(); } updated(changedProperties) { if (changedProperties.has('required') || changedProperties.has('value')) { this._updateValidity(); } } _updateValidity() { if (this._textarea) { this._internals.setValidity(this._textarea.validity, this._textarea.validationMessage); } } _handleInput(e) { this.value = e.target.value; this._dirty = true; this._internals.setFormValue(this.value); this._internals.setValidity(this._textarea.validity, this._textarea.validationMessage); } _handleChange(e) { this.value = e.target.value; this._internals.setFormValue(this.value); } _handleBlur() { this._touched = true; this._internals.setValidity(this._textarea.validity, this._textarea.validationMessage); } render() { let validationMessage = ''; if (this._touched && this._textarea && !this._textarea.validity.valid) { validationMessage = this._textarea.validationMessage; } return b ` <div class=\"wrapper\"> ${this.label ? b ` <label for=\"textarea\"> ${this.label} ${this.required ? b `<span class=\"required\" aria-hidden=\"true\">*</span>` : A} </label> ` : A} <textarea id=\"textarea\" class=${e$1({ 'textarea--invalid': this._touched && this._textarea && !this._textarea.validity.valid })} name=${this.name} .value=${l(this.value)} placeholder=${this.placeholder} ?required=${this.required} ?disabled=${this.disabled} ?readonly=${this.readonly} rows=${this.rows} cols=${o(this.cols)} minlength=${o(this.minlength)} maxlength=${o(this.maxlength)} autocomplete=${o(this.autocomplete || undefined)} @input=${this._handleInput} @change=${this._handleChange} @blur=${this._handleBlur} ></textarea> ${validationMessage ? b `<div class=\"validation-message\">${validationMessage}</div>` : this.hint ? b `<div class=\"hint\">${this.hint}</div>` : A} </div> `; } // Public methods for programmatic control focus() { this._textarea?.focus(); } blur() { this._textarea?.blur(); } select() { this._textarea?.select(); } }",
           "description": "A textarea component that works with native browser forms.\n\nUses ElementInternals for form association, allowing the component\nto participate in form submission, validation, and reset.\n\nNative input and change events bubble up from the inner textarea element."
+        },
+        {
+          "kind": "variable",
+          "name": "KRAutoSuggest",
+          "default": "class KRAutoSuggest extends i$2 { constructor() { super(); this.label = ''; this.name = ''; this.value = ''; this.placeholder = ''; this.disabled = false; this.readonly = false; this.required = false; this.hint = ''; this.options = []; this.statusType = 'finished'; this.loadingText = 'Loading...'; this.errorText = 'Error loading options'; this.emptyText = 'No matches found'; this.filteringType = 'auto'; this.highlightMatches = true; this._isOpen = false; this._highlightedIndex = -1; this._touched = false; this._dirty = false; this._handleDocumentClick = this._onDocumentClick.bind(this); this._internals = this.attachInternals(); } connectedCallback() { super.connectedCallback(); document.addEventListener('click', this._handleDocumentClick); } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('click', this._handleDocumentClick); } firstUpdated() { this._updateFormValue(); } get form() { return this._internals.form; } get validity() { return this._internals.validity; } get validationMessage() { return this._internals.validationMessage; } checkValidity() { return this._internals.checkValidity(); } reportValidity() { return this._internals.reportValidity(); } formResetCallback() { this.value = ''; this._touched = false; this._dirty = false; this._isOpen = false; this._highlightedIndex = -1; this._updateFormValue(); } formStateRestoreCallback(state) { this.value = state; } get _filteredOptions() { if (this.filteringType === 'manual' || !this.value) { return this.options; } const searchValue = this.value.toLowerCase(); const filtered = []; for (const option of this.options) { if (isGroup(option)) { const filteredGroupOptions = option.options.filter((opt) => { const label = (opt.label || opt.value).toLowerCase(); const tags = opt.filteringTags?.join(' ').toLowerCase() || ''; return label.includes(searchValue) || tags.includes(searchValue); }); if (filteredGroupOptions.length > 0) { filtered.push({ ...option, options: filteredGroupOptions }); } } else { const label = (option.label || option.value).toLowerCase(); const tags = option.filteringTags?.join(' ').toLowerCase() || ''; if (label.includes(searchValue) || tags.includes(searchValue)) { filtered.push(option); } } } return filtered; } get _flatOptions() { const flat = []; for (const option of this._filteredOptions) { if (isGroup(option)) { flat.push(...option.options); } else { flat.push(option); } } return flat; } _updateFormValue() { this._internals.setFormValue(this.value); // Validation if (this.required && !this.value) { this._internals.setValidity({ valueMissing: true }, 'This field is required', this._input); } else { this._internals.setValidity({}); } } _onInput(e) { const target = e.target; this.value = target.value; this._dirty = true; this._isOpen = true; this._highlightedIndex = -1; this._updateFormValue(); this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value }, bubbles: true, composed: true, })); if (this.filteringType === 'manual') { this.dispatchEvent(new CustomEvent('load-items', { detail: { filteringText: this.value }, bubbles: true, composed: true, })); } } _onFocus() { this._isOpen = true; if (this.filteringType === 'manual') { this.dispatchEvent(new CustomEvent('load-items', { detail: { filteringText: this.value }, bubbles: true, composed: true, })); } } _onBlur() { this._touched = true; // Delay to allow click on option setTimeout(() => { this._isOpen = false; this._highlightedIndex = -1; }, 200); this._updateFormValue(); } _onKeyDown(e) { const options = this._flatOptions; switch (e.key) { case 'ArrowDown': e.preventDefault(); this._isOpen = true; this._highlightedIndex = Math.min(this._highlightedIndex + 1, options.length - 1); this._scrollToHighlighted(); break; case 'ArrowUp': e.preventDefault(); this._highlightedIndex = Math.max(this._highlightedIndex - 1, -1); this._scrollToHighlighted(); break; case 'Enter': if (this._highlightedIndex >= 0 && options[this._highlightedIndex]) { e.preventDefault(); this._selectOption(options[this._highlightedIndex]); } break; case 'Escape': e.preventDefault(); this._isOpen = false; this._highlightedIndex = -1; break; case 'Tab': this._isOpen = false; this._highlightedIndex = -1; break; } } _scrollToHighlighted() { this.updateComplete.then(() => { const container = this.shadowRoot?.querySelector('.dropdown'); const highlighted = this.shadowRoot?.querySelector('.option.is-highlighted'); if (container && highlighted) { const containerRect = container.getBoundingClientRect(); const highlightedRect = highlighted.getBoundingClientRect(); if (highlightedRect.bottom > containerRect.bottom) { highlighted.scrollIntoView({ block: 'nearest' }); } else if (highlightedRect.top < containerRect.top) { highlighted.scrollIntoView({ block: 'nearest' }); } } }); } _selectOption(option) { if (option.disabled) return; this.value = option.label || option.value; this._isOpen = false; this._highlightedIndex = -1; this._dirty = true; this._updateFormValue(); this.dispatchEvent(new CustomEvent('select', { detail: { value: option.value, selectedOption: option }, bubbles: true, composed: true, })); this.dispatchEvent(new Event('change', { bubbles: true, composed: true })); } _handleClear() { this.value = ''; this._updateFormValue(); this.dispatchEvent(new CustomEvent('change', { detail: { value: '' }, bubbles: true, composed: true, })); this._input?.focus(); } _onDocumentClick(e) { const path = e.composedPath(); if (!path.includes(this)) { this._isOpen = false; } } _highlightMatch(text) { if (!this.value || this.filteringType === 'manual' || !this.highlightMatches) { return b `${text}`; } const searchValue = this.value.toLowerCase(); const index = text.toLowerCase().indexOf(searchValue); if (index === -1) { return b `${text}`; } const before = text.slice(0, index); const match = text.slice(index, index + this.value.length); const after = text.slice(index + this.value.length); return b `${before}<span class=\"highlight\">${match}</span>${after}`; } _renderOption(option, index) { const isHighlighted = index === this._highlightedIndex; return b ` <button class=${e$1({ option: true, 'is-highlighted': isHighlighted, })} type=\"button\" role=\"option\" aria-selected=${isHighlighted} ?disabled=${option.disabled} @click=${() => this._selectOption(option)} @mouseenter=${() => { this._highlightedIndex = index; }} > <div class=\"option-content\"> <div class=\"option-label\"> ${this._highlightMatch(option.label || option.value)} ${option.labelTag ? b `<span class=\"option-tag\">${option.labelTag}</span>` : A} </div> ${option.description ? b `<div class=\"option-description\">${option.description}</div>` : A} ${option.tags && option.tags.length > 0 ? b ` <div class=\"option-tags\"> ${option.tags.map((tag) => b `<span class=\"option-tag\">${tag}</span>`)} </div> ` : A} </div> </button> `; } _renderDropdownContent() { if (this.statusType === 'loading') { return b ` <div class=\"status\"> <div class=\"spinner\"></div> ${this.loadingText} </div> `; } if (this.statusType === 'error') { return b ` <div class=\"status is-error\"> <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"> <path d=\"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z\" /> </svg> ${this.errorText} </div> `; } const filtered = this._filteredOptions; if (filtered.length === 0) { return b `<div class=\"empty\">${this.emptyText}</div>`; } let optionIndex = 0; return b ` ${filtered.map((option) => { if (isGroup(option)) { const groupOptions = option.options.map((opt) => { const rendered = this._renderOption(opt, optionIndex); optionIndex++; return rendered; }); return b ` <div class=\"group-label\">${option.label}</div> ${groupOptions} `; } const rendered = this._renderOption(option, optionIndex); optionIndex++; return rendered; })} `; } render() { const hasError = this._touched && !this.validity.valid; return b ` <div class=\"field-wrapper\"> ${this.label ? b ` <label> ${this.label} ${this.required ? b `<span class=\"required\">*</span>` : A} </label> ` : A} <div class=\"input-container\"> <div class=\"input-wrapper\"> <input type=\"text\" .value=${l(this.value)} placeholder=${o(this.placeholder || undefined)} ?disabled=${this.disabled} ?readonly=${this.readonly} ?required=${this.required} name=${o(this.name || undefined)} autocomplete=\"off\" role=\"combobox\" aria-autocomplete=\"list\" aria-expanded=${this._isOpen} aria-controls=\"dropdown\" class=${e$1({ 'input--invalid': hasError, })} @input=${this._onInput} @blur=${this._onBlur} @focus=${this._onFocus} @keydown=${this._onKeyDown} /> <div class=\"icon-container\"> ${this.value && !this.disabled && !this.readonly ? b ` <button class=\"clear-button\" type=\"button\" aria-label=\"Clear\" @click=${this._handleClear} > <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"> <path d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\" /> </svg> </button> ` : ''} ${!this.value && !this.disabled && !this.readonly ? b ` <svg class=\"search-icon\" fill=\"currentColor\" viewBox=\"0 0 16 16\"> <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z\" /> </svg> ` : ''} </div> </div> <div id=\"dropdown\" role=\"listbox\" class=${e$1({ dropdown: true, 'is-open': this._isOpen, })} > ${this._renderDropdownContent()} </div> </div> ${hasError ? b `<div class=\"validation-message\">${this.validationMessage}</div>` : this.hint ? b `<div class=\"hint\">${this.hint}</div>` : A} </div> `; } }"
         }
       ],
       "exports": [
@@ -360,6 +373,14 @@
             "module": "dist/krubble-components.bundled.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "KRAutoSuggest",
+          "declaration": {
+            "name": "KRAutoSuggest",
+            "module": "dist/krubble-components.bundled.js"
+          }
+        },
         {
           "kind": "js",
           "name": "KRButton",
@@ -510,7 +531,7 @@
         },
         {
           "kind": "variable",
-          "name": "ge",
+          "name": "fe",
           "default": "class extends re{constructor(){super(...arguments),this.header=\"\",this.expanded=!1}toggle(){this.expanded=!this.expanded}render(){return H` <div class=\"header\" @click=${this.toggle}> <span class=\"header__title\">${this.header}</span> <svg class=\"header__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M6 9l6 6 6-6\"/> </svg> </div> <div class=\"content\"> <div class=\"content__inner\"> <div class=\"content__body\"> <slot></slot> </div> </div> </div> `}}"
         },
         {
@@ -525,12 +546,12 @@
         },
         {
           "kind": "variable",
-          "name": "Oe",
-          "default": "class extends re{constructor(){super(...arguments),this.language=\"html\",this.code=\"\",this.activeTab=\"preview\",this.copied=!1,this.highlightedCode=\"\"}connectedCallback(){super.connectedCallback(),requestAnimationFrame((()=>{this.code||(this.code=this.innerHTML.trim().replace(/=\"\"(?=[\\s>])/g,\"\")),this.querySelectorAll(\"script\").forEach((e=>{const t=document.createElement(\"script\");t.textContent=e.textContent,e.replaceWith(t)})),this.code&&window.hljs&&window.hljs.getLanguage(this.language)?this.highlightedCode=window.hljs.highlight(this.code,{language:this.language}).value:this.highlightedCode=this.code.replace(/&/g,\"&amp;\").replace(/</g,\"&lt;\").replace(/>/g,\"&gt;\")}))}activateTab(e){this.activeTab=e}copyCode(){this.code&&navigator.clipboard.writeText(this.code).then((()=>{this.copied=!0,setTimeout((()=>{this.copied=!1}),2e3)}))}render(){return H` <div class=\"tabs\"> <button class=${ke({tab:!0,\"tab--active\":\"preview\"===this.activeTab})} @click=${()=>this.activateTab(\"preview\")} > Preview </button> <button class=${ke({tab:!0,\"tab--active\":\"code\"===this.activeTab})} @click=${()=>this.activateTab(\"code\")} > Code </button> <button class=${ke({copy:!0,\"copy--success\":this.copied})} @click=${this.copyCode} title=${this.copied?\"Copied!\":\"Copy code\"} > ${this.copied?H`<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>`:H`<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>`} </button> </div> <div class=${ke({panel:!0,\"panel--active\":\"preview\"===this.activeTab,\"panel--preview\":!0})}> <slot></slot> </div> <div class=${ke({panel:!0,\"panel--active\":\"code\"===this.activeTab,\"panel--code\":!0})}> <pre class=\"code\"><code>${Ae(this.highlightedCode)}</code></pre> </div> `}}"
+          "name": "ze",
+          "default": "class extends re{constructor(){super(...arguments),this.language=\"html\",this.code=\"\",this.activeTab=\"preview\",this.copied=!1,this.highlightedCode=\"\"}connectedCallback(){super.connectedCallback(),requestAnimationFrame((()=>{this.code||(this.code=this.innerHTML.trim().replace(/=\"\"(?=[\\s>])/g,\"\")),this.querySelectorAll(\"script\").forEach((e=>{const t=document.createElement(\"script\");t.textContent=e.textContent,e.replaceWith(t)})),this.code&&window.hljs&&window.hljs.getLanguage(this.language)?this.highlightedCode=window.hljs.highlight(this.code,{language:this.language}).value:this.highlightedCode=this.code.replace(/&/g,\"&amp;\").replace(/</g,\"&lt;\").replace(/>/g,\"&gt;\")}))}activateTab(e){this.activeTab=e}copyCode(){this.code&&navigator.clipboard.writeText(this.code).then((()=>{this.copied=!0,setTimeout((()=>{this.copied=!1}),2e3)}))}render(){return H` <div class=\"tabs\"> <button class=${ke({tab:!0,\"tab--active\":\"preview\"===this.activeTab})} @click=${()=>this.activateTab(\"preview\")} > Preview </button> <button class=${ke({tab:!0,\"tab--active\":\"code\"===this.activeTab})} @click=${()=>this.activateTab(\"code\")} > Code </button> <button class=${ke({copy:!0,\"copy--success\":this.copied})} @click=${this.copyCode} title=${this.copied?\"Copied!\":\"Copy code\"} > ${this.copied?H`<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg>`:H`<svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"></rect><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"></path></svg>`} </button> </div> <div class=${ke({panel:!0,\"panel--active\":\"preview\"===this.activeTab,\"panel--preview\":!0})}> <slot></slot> </div> <div class=${ke({panel:!0,\"panel--active\":\"code\"===this.activeTab,\"panel--code\":!0})}> <pre class=\"code\"><code>${Oe(this.highlightedCode)}</code></pre> </div> `}}"
         },
         {
           "kind": "variable",
-          "name": "Te",
+          "name": "Pe",
           "default": "class extends re{constructor(){super(...arguments),this.items=[],this.resolvePromise=null,this.boundHandleOutsideClick=this.handleOutsideClick.bind(this),this.boundHandleKeyDown=this.handleKeyDown.bind(this)}static async open(e){const t=document.querySelector(\"kr-context-menu\");t&&t.remove();const i=document.createElement(\"kr-context-menu\");return document.body.appendChild(i),i.show(e)}async show(e){this.items=e.items,this.style.left=`${e.x}px`,this.style.top=`${e.y}px`,await this.updateComplete;const t=this.getBoundingClientRect();return t.right>window.innerWidth&&(this.style.left=e.x-t.width+\"px\"),t.bottom>window.innerHeight&&(this.style.top=e.y-t.height+\"px\"),requestAnimationFrame((()=>{document.addEventListener(\"click\",this.boundHandleOutsideClick),document.addEventListener(\"contextmenu\",this.boundHandleOutsideClick),document.addEventListener(\"keydown\",this.boundHandleKeyDown)})),new Promise((e=>{this.resolvePromise=e}))}handleOutsideClick(e){this.contains(e.target)||this.close(null)}handleKeyDown(e){\"Escape\"===e.key&&this.close(null)}handleItemClick(e){e.disabled||e.divider||this.close(e)}close(e){document.removeEventListener(\"click\",this.boundHandleOutsideClick),document.removeEventListener(\"contextmenu\",this.boundHandleOutsideClick),document.removeEventListener(\"keydown\",this.boundHandleKeyDown),this.resolvePromise&&(this.resolvePromise(e),this.resolvePromise=null),this.remove()}render(){return H` <div class=\"menu\"> ${this.items.map((e=>e.divider?H`<div class=\"menu__divider\"></div>`:H` <button class=\"menu__item\" ?disabled=${e.disabled} @click=${()=>this.handleItemClick(e)} > ${e.icon?H`<span class=\"menu__item-icon\">${e.icon}</span>`:null} ${e.label} </button> `))} </div> `}}"
         },
         {
@@ -634,8 +655,13 @@
         },
         {
           "kind": "variable",
-          "name": "ft",
+          "name": "gt",
           "default": "class extends re{constructor(){super(),this.label=\"\",this.name=\"\",this.value=\"\",this.placeholder=\"\",this.required=!1,this.disabled=!1,this.readonly=!1,this.rows=3,this.autocomplete=\"\",this.hint=\"\",this._touched=!1,this._dirty=!1,this._handleInvalid=e=>{e.preventDefault(),this._touched=!0},this._internals=this.attachInternals()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value=\"\",this._touched=!1,this._dirty=!1,this._internals.setFormValue(\"\"),this._internals.setValidity({})}formStateRestoreCallback(e){this.value=e}connectedCallback(){super.connectedCallback(),this.addEventListener(\"invalid\",this._handleInvalid)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener(\"invalid\",this._handleInvalid)}firstUpdated(){this._updateValidity()}updated(e){(e.has(\"required\")||e.has(\"value\"))&&this._updateValidity()}_updateValidity(){this._textarea&&this._internals.setValidity(this._textarea.validity,this._textarea.validationMessage)}_handleInput(e){this.value=e.target.value,this._dirty=!0,this._internals.setFormValue(this.value),this._internals.setValidity(this._textarea.validity,this._textarea.validationMessage)}_handleChange(e){this.value=e.target.value,this._internals.setFormValue(this.value)}_handleBlur(){this._touched=!0,this._internals.setValidity(this._textarea.validity,this._textarea.validationMessage)}render(){let e=\"\";return this._touched&&this._textarea&&!this._textarea.validity.valid&&(e=this._textarea.validationMessage),H` <div class=\"wrapper\"> ${this.label?H` <label for=\"textarea\"> ${this.label} ${this.required?H`<span class=\"required\" aria-hidden=\"true\">*</span>`:U} </label> `:U} <textarea id=\"textarea\" class=${ke({\"textarea--invalid\":this._touched&&this._textarea&&!this._textarea.validity.valid})} name=${this.name} .value=${nt(this.value)} placeholder=${this.placeholder} ?required=${this.required} ?disabled=${this.disabled} ?readonly=${this.readonly} rows=${this.rows} cols=${st(this.cols)} minlength=${st(this.minlength)} maxlength=${st(this.maxlength)} autocomplete=${st(this.autocomplete||void 0)} @input=${this._handleInput} @change=${this._handleChange} @blur=${this._handleBlur} ></textarea> ${e?H`<div class=\"validation-message\">${e}</div>`:this.hint?H`<div class=\"hint\">${this.hint}</div>`:U} </div> `}focus(){this._textarea?.focus()}blur(){this._textarea?.blur()}select(){this._textarea?.select()}}"
+        },
+        {
+          "kind": "variable",
+          "name": "mt",
+          "default": "class extends re{constructor(){super(),this.label=\"\",this.name=\"\",this.value=\"\",this.placeholder=\"\",this.disabled=!1,this.readonly=!1,this.required=!1,this.hint=\"\",this.options=[],this.statusType=\"finished\",this.loadingText=\"Loading...\",this.errorText=\"Error loading options\",this.emptyText=\"No matches found\",this.filteringType=\"auto\",this.highlightMatches=!0,this._isOpen=!1,this._highlightedIndex=-1,this._touched=!1,this._dirty=!1,this._handleDocumentClick=this._onDocumentClick.bind(this),this._internals=this.attachInternals()}connectedCallback(){super.connectedCallback(),document.addEventListener(\"click\",this._handleDocumentClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(\"click\",this._handleDocumentClick)}firstUpdated(){this._updateFormValue()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value=\"\",this._touched=!1,this._dirty=!1,this._isOpen=!1,this._highlightedIndex=-1,this._updateFormValue()}formStateRestoreCallback(e){this.value=e}get _filteredOptions(){if(\"manual\"===this.filteringType||!this.value)return this.options;const e=this.value.toLowerCase(),t=[];for(const i of this.options)if(yt(i)){const o=i.options.filter((t=>{const i=(t.label||t.value).toLowerCase(),o=t.filteringTags?.join(\" \").toLowerCase()||\"\";return i.includes(e)||o.includes(e)}));o.length>0&&t.push({...i,options:o})}else{const o=(i.label||i.value).toLowerCase(),s=i.filteringTags?.join(\" \").toLowerCase()||\"\";(o.includes(e)||s.includes(e))&&t.push(i)}return t}get _flatOptions(){const e=[];for(const t of this._filteredOptions)yt(t)?e.push(...t.options):e.push(t);return e}_updateFormValue(){this._internals.setFormValue(this.value),this.required&&!this.value?this._internals.setValidity({valueMissing:!0},\"This field is required\",this._input):this._internals.setValidity({})}_onInput(e){const t=e.target;this.value=t.value,this._dirty=!0,this._isOpen=!0,this._highlightedIndex=-1,this._updateFormValue(),this.dispatchEvent(new CustomEvent(\"change\",{detail:{value:this.value},bubbles:!0,composed:!0})),\"manual\"===this.filteringType&&this.dispatchEvent(new CustomEvent(\"load-items\",{detail:{filteringText:this.value},bubbles:!0,composed:!0}))}_onFocus(){this._isOpen=!0,\"manual\"===this.filteringType&&this.dispatchEvent(new CustomEvent(\"load-items\",{detail:{filteringText:this.value},bubbles:!0,composed:!0}))}_onBlur(){this._touched=!0,setTimeout((()=>{this._isOpen=!1,this._highlightedIndex=-1}),200),this._updateFormValue()}_onKeyDown(e){const t=this._flatOptions;switch(e.key){case\"ArrowDown\":e.preventDefault(),this._isOpen=!0,this._highlightedIndex=Math.min(this._highlightedIndex+1,t.length-1),this._scrollToHighlighted();break;case\"ArrowUp\":e.preventDefault(),this._highlightedIndex=Math.max(this._highlightedIndex-1,-1),this._scrollToHighlighted();break;case\"Enter\":this._highlightedIndex>=0&&t[this._highlightedIndex]&&(e.preventDefault(),this._selectOption(t[this._highlightedIndex]));break;case\"Escape\":e.preventDefault(),this._isOpen=!1,this._highlightedIndex=-1;break;case\"Tab\":this._isOpen=!1,this._highlightedIndex=-1}}_scrollToHighlighted(){this.updateComplete.then((()=>{const e=this.shadowRoot?.querySelector(\".dropdown\"),t=this.shadowRoot?.querySelector(\".option.is-highlighted\");if(e&&t){const i=e.getBoundingClientRect(),o=t.getBoundingClientRect();(o.bottom>i.bottom||o.top<i.top)&&t.scrollIntoView({block:\"nearest\"})}}))}_selectOption(e){e.disabled||(this.value=e.label||e.value,this._isOpen=!1,this._highlightedIndex=-1,this._dirty=!0,this._updateFormValue(),this.dispatchEvent(new CustomEvent(\"select\",{detail:{value:e.value,selectedOption:e},bubbles:!0,composed:!0})),this.dispatchEvent(new Event(\"change\",{bubbles:!0,composed:!0})))}_handleClear(){this.value=\"\",this._updateFormValue(),this.dispatchEvent(new CustomEvent(\"change\",{detail:{value:\"\"},bubbles:!0,composed:!0})),this._input?.focus()}_onDocumentClick(e){e.composedPath().includes(this)||(this._isOpen=!1)}_highlightMatch(e){if(!this.value||\"manual\"===this.filteringType||!this.highlightMatches)return H`${e}`;const t=this.value.toLowerCase(),i=e.toLowerCase().indexOf(t);if(-1===i)return H`${e}`;const o=e.slice(0,i),s=e.slice(i,i+this.value.length),r=e.slice(i+this.value.length);return H`${o}<span class=\"highlight\">${s}</span>${r}`}_renderOption(e,t){const i=t===this._highlightedIndex;return H` <button class=${ke({option:!0,\"is-highlighted\":i})} type=\"button\" role=\"option\" aria-selected=${i} ?disabled=${e.disabled} @click=${()=>this._selectOption(e)} @mouseenter=${()=>{this._highlightedIndex=t}} > <div class=\"option-content\"> <div class=\"option-label\"> ${this._highlightMatch(e.label||e.value)} ${e.labelTag?H`<span class=\"option-tag\">${e.labelTag}</span>`:U} </div> ${e.description?H`<div class=\"option-description\">${e.description}</div>`:U} ${e.tags&&e.tags.length>0?H` <div class=\"option-tags\"> ${e.tags.map((e=>H`<span class=\"option-tag\">${e}</span>`))} </div> `:U} </div> </button> `}_renderDropdownContent(){if(\"loading\"===this.statusType)return H` <div class=\"status\"> <div class=\"spinner\"></div> ${this.loadingText} </div> `;if(\"error\"===this.statusType)return H` <div class=\"status is-error\"> <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"> <path d=\"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z\" /> </svg> ${this.errorText} </div> `;const e=this._filteredOptions;if(0===e.length)return H`<div class=\"empty\">${this.emptyText}</div>`;let t=0;return H` ${e.map((e=>{if(yt(e)){const i=e.options.map((e=>{const i=this._renderOption(e,t);return t++,i}));return H` <div class=\"group-label\">${e.label}</div> ${i} `}const i=this._renderOption(e,t);return t++,i}))} `}render(){const e=this._touched&&!this.validity.valid;return H` <div class=\"field-wrapper\"> ${this.label?H` <label> ${this.label} ${this.required?H`<span class=\"required\">*</span>`:U} </label> `:U} <div class=\"input-container\"> <div class=\"input-wrapper\"> <input type=\"text\" .value=${nt(this.value)} placeholder=${st(this.placeholder||void 0)} ?disabled=${this.disabled} ?readonly=${this.readonly} ?required=${this.required} name=${st(this.name||void 0)} autocomplete=\"off\" role=\"combobox\" aria-autocomplete=\"list\" aria-expanded=${this._isOpen} aria-controls=\"dropdown\" class=${ke({\"input--invalid\":e})} @input=${this._onInput} @blur=${this._onBlur} @focus=${this._onFocus} @keydown=${this._onKeyDown} /> <div class=\"icon-container\"> ${!this.value||this.disabled||this.readonly?\"\":H` <button class=\"clear-button\" type=\"button\" aria-label=\"Clear\" @click=${this._handleClear} > <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"> <path d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\" /> </svg> </button> `} ${this.value||this.disabled||this.readonly?\"\":H` <svg class=\"search-icon\" fill=\"currentColor\" viewBox=\"0 0 16 16\"> <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z\" /> </svg> `} </div> </div> <div id=\"dropdown\" role=\"listbox\" class=${ke({dropdown:!0,\"is-open\":this._isOpen})} > ${this._renderDropdownContent()} </div> </div> ${e?H`<div class=\"validation-message\">${this.validationMessage}</div>`:this.hint?H`<div class=\"hint\">${this.hint}</div>`:U} </div> `}}"
         }
       ],
       "exports": [
@@ -659,7 +685,7 @@
           "kind": "js",
           "name": "KRAccordion",
           "declaration": {
-            "name": "ge",
+            "name": "fe",
             "module": "dist/krubble-components.bundled.min.js"
           }
         },
@@ -671,6 +697,14 @@
             "module": "dist/krubble-components.bundled.min.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "KRAutoSuggest",
+          "declaration": {
+            "name": "mt",
+            "module": "dist/krubble-components.bundled.min.js"
+          }
+        },
         {
           "kind": "js",
           "name": "KRButton",
@@ -683,7 +717,7 @@
           "kind": "js",
           "name": "KRCodeDemo",
           "declaration": {
-            "name": "Oe",
+            "name": "ze",
             "module": "dist/krubble-components.bundled.min.js"
           }
         },
@@ -691,7 +725,7 @@
           "kind": "js",
           "name": "KRContextMenu",
           "declaration": {
-            "name": "Te",
+            "name": "Pe",
             "module": "dist/krubble-components.bundled.min.js"
           }
         },
@@ -787,7 +821,7 @@
           "kind": "js",
           "name": "KRTextareaField",
           "declaration": {
-            "name": "ft",
+            "name": "gt",
             "module": "dist/krubble-components.bundled.min.js"
           }
         },
@@ -1067,6 +1101,14 @@
             "module": "./form/index.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "KRAutoSuggest",
+          "declaration": {
+            "name": "KRAutoSuggest",
+            "module": "./form/index.js"
+          }
+        },
         {
           "kind": "js",
           "name": "ContextMenuItem",
@@ -1098,6 +1140,46 @@
             "name": "KRSnackbarOptions",
             "module": "./snackbar/snackbar.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "SuggestionOption",
+          "declaration": {
+            "name": "SuggestionOption",
+            "module": "./form/auto-suggest/auto-suggest.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SuggestionOptionGroup",
+          "declaration": {
+            "name": "SuggestionOptionGroup",
+            "module": "./form/auto-suggest/auto-suggest.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SuggestionOptions",
+          "declaration": {
+            "name": "SuggestionOptions",
+            "module": "./form/auto-suggest/auto-suggest.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AutoSuggestStatusType",
+          "declaration": {
+            "name": "AutoSuggestStatusType",
+            "module": "./form/auto-suggest/auto-suggest.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AutoSuggestFilteringType",
+          "declaration": {
+            "name": "AutoSuggestFilteringType",
+            "module": "./form/auto-suggest/auto-suggest.js"
+          }
         }
       ]
     },
@@ -1373,6 +1455,14 @@
             "name": "KRDetailField",
             "module": "./detail-field/detail-field.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "KRAutoSuggest",
+          "declaration": {
+            "name": "KRAutoSuggest",
+            "module": "./auto-suggest/auto-suggest.js"
+          }
         }
       ]
     },
@@ -2757,6 +2847,14 @@
             "name": "KRDetailField",
             "module": "./detail-field/detail-field.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "KRAutoSuggest",
+          "declaration": {
+            "name": "KRAutoSuggest",
+            "module": "./auto-suggest/auto-suggest.js"
+          }
         }
       ]
     },
@@ -4143,6 +4241,27 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/form/auto-suggest/auto-suggest.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "KRAutoSuggest",
+          "default": "class KRAutoSuggest extends LitElement { constructor() { super(); this.label = ''; this.name = ''; this.value = ''; this.placeholder = ''; this.disabled = false; this.readonly = false; this.required = false; this.hint = ''; this.options = []; this.statusType = 'finished'; this.loadingText = 'Loading...'; this.errorText = 'Error loading options'; this.emptyText = 'No matches found'; this.filteringType = 'auto'; this.highlightMatches = true; this._isOpen = false; this._highlightedIndex = -1; this._touched = false; this._dirty = false; this._handleDocumentClick = this._onDocumentClick.bind(this); this._internals = this.attachInternals(); } connectedCallback() { super.connectedCallback(); document.addEventListener('click', this._handleDocumentClick); } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('click', this._handleDocumentClick); } firstUpdated() { this._updateFormValue(); } get form() { return this._internals.form; } get validity() { return this._internals.validity; } get validationMessage() { return this._internals.validationMessage; } checkValidity() { return this._internals.checkValidity(); } reportValidity() { return this._internals.reportValidity(); } formResetCallback() { this.value = ''; this._touched = false; this._dirty = false; this._isOpen = false; this._highlightedIndex = -1; this._updateFormValue(); } formStateRestoreCallback(state) { this.value = state; } get _filteredOptions() { if (this.filteringType === 'manual' || !this.value) { return this.options; } const searchValue = this.value.toLowerCase(); const filtered = []; for (const option of this.options) { if (isGroup(option)) { const filteredGroupOptions = option.options.filter((opt) => { const label = (opt.label || opt.value).toLowerCase(); const tags = opt.filteringTags?.join(' ').toLowerCase() || ''; return label.includes(searchValue) || tags.includes(searchValue); }); if (filteredGroupOptions.length > 0) { filtered.push({ ...option, options: filteredGroupOptions }); } } else { const label = (option.label || option.value).toLowerCase(); const tags = option.filteringTags?.join(' ').toLowerCase() || ''; if (label.includes(searchValue) || tags.includes(searchValue)) { filtered.push(option); } } } return filtered; } get _flatOptions() { const flat = []; for (const option of this._filteredOptions) { if (isGroup(option)) { flat.push(...option.options); } else { flat.push(option); } } return flat; } _updateFormValue() { this._internals.setFormValue(this.value); // Validation if (this.required && !this.value) { this._internals.setValidity({ valueMissing: true }, 'This field is required', this._input); } else { this._internals.setValidity({}); } } _onInput(e) { const target = e.target; this.value = target.value; this._dirty = true; this._isOpen = true; this._highlightedIndex = -1; this._updateFormValue(); this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value }, bubbles: true, composed: true, })); if (this.filteringType === 'manual') { this.dispatchEvent(new CustomEvent('load-items', { detail: { filteringText: this.value }, bubbles: true, composed: true, })); } } _onFocus() { this._isOpen = true; if (this.filteringType === 'manual') { this.dispatchEvent(new CustomEvent('load-items', { detail: { filteringText: this.value }, bubbles: true, composed: true, })); } } _onBlur() { this._touched = true; // Delay to allow click on option setTimeout(() => { this._isOpen = false; this._highlightedIndex = -1; }, 200); this._updateFormValue(); } _onKeyDown(e) { const options = this._flatOptions; switch (e.key) { case 'ArrowDown': e.preventDefault(); this._isOpen = true; this._highlightedIndex = Math.min(this._highlightedIndex + 1, options.length - 1); this._scrollToHighlighted(); break; case 'ArrowUp': e.preventDefault(); this._highlightedIndex = Math.max(this._highlightedIndex - 1, -1); this._scrollToHighlighted(); break; case 'Enter': if (this._highlightedIndex >= 0 && options[this._highlightedIndex]) { e.preventDefault(); this._selectOption(options[this._highlightedIndex]); } break; case 'Escape': e.preventDefault(); this._isOpen = false; this._highlightedIndex = -1; break; case 'Tab': this._isOpen = false; this._highlightedIndex = -1; break; } } _scrollToHighlighted() { this.updateComplete.then(() => { const container = this.shadowRoot?.querySelector('.dropdown'); const highlighted = this.shadowRoot?.querySelector('.option.is-highlighted'); if (container && highlighted) { const containerRect = container.getBoundingClientRect(); const highlightedRect = highlighted.getBoundingClientRect(); if (highlightedRect.bottom > containerRect.bottom) { highlighted.scrollIntoView({ block: 'nearest' }); } else if (highlightedRect.top < containerRect.top) { highlighted.scrollIntoView({ block: 'nearest' }); } } }); } _selectOption(option) { if (option.disabled) return; this.value = option.label || option.value; this._isOpen = false; this._highlightedIndex = -1; this._dirty = true; this._updateFormValue(); this.dispatchEvent(new CustomEvent('select', { detail: { value: option.value, selectedOption: option }, bubbles: true, composed: true, })); this.dispatchEvent(new Event('change', { bubbles: true, composed: true })); } _handleClear() { this.value = ''; this._updateFormValue(); this.dispatchEvent(new CustomEvent('change', { detail: { value: '' }, bubbles: true, composed: true, })); this._input?.focus(); } _onDocumentClick(e) { const path = e.composedPath(); if (!path.includes(this)) { this._isOpen = false; } } _highlightMatch(text) { if (!this.value || this.filteringType === 'manual' || !this.highlightMatches) { return html `${text}`; } const searchValue = this.value.toLowerCase(); const index = text.toLowerCase().indexOf(searchValue); if (index === -1) { return html `${text}`; } const before = text.slice(0, index); const match = text.slice(index, index + this.value.length); const after = text.slice(index + this.value.length); return html `${before}<span class=\"highlight\">${match}</span>${after}`; } _renderOption(option, index) { const isHighlighted = index === this._highlightedIndex; return html ` <button class=${classMap({ option: true, 'is-highlighted': isHighlighted, })} type=\"button\" role=\"option\" aria-selected=${isHighlighted} ?disabled=${option.disabled} @click=${() => this._selectOption(option)} @mouseenter=${() => { this._highlightedIndex = index; }} > <div class=\"option-content\"> <div class=\"option-label\"> ${this._highlightMatch(option.label || option.value)} ${option.labelTag ? html `<span class=\"option-tag\">${option.labelTag}</span>` : nothing} </div> ${option.description ? html `<div class=\"option-description\">${option.description}</div>` : nothing} ${option.tags && option.tags.length > 0 ? html ` <div class=\"option-tags\"> ${option.tags.map((tag) => html `<span class=\"option-tag\">${tag}</span>`)} </div> ` : nothing} </div> </button> `; } _renderDropdownContent() { if (this.statusType === 'loading') { return html ` <div class=\"status\"> <div class=\"spinner\"></div> ${this.loadingText} </div> `; } if (this.statusType === 'error') { return html ` <div class=\"status is-error\"> <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"> <path d=\"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z\" /> </svg> ${this.errorText} </div> `; } const filtered = this._filteredOptions; if (filtered.length === 0) { return html `<div class=\"empty\">${this.emptyText}</div>`; } let optionIndex = 0; return html ` ${filtered.map((option) => { if (isGroup(option)) { const groupOptions = option.options.map((opt) => { const rendered = this._renderOption(opt, optionIndex); optionIndex++; return rendered; }); return html ` <div class=\"group-label\">${option.label}</div> ${groupOptions} `; } const rendered = this._renderOption(option, optionIndex); optionIndex++; return rendered; })} `; } render() { const hasError = this._touched && !this.validity.valid; return html ` <div class=\"field-wrapper\"> ${this.label ? html ` <label> ${this.label} ${this.required ? html `<span class=\"required\">*</span>` : nothing} </label> ` : nothing} <div class=\"input-container\"> <div class=\"input-wrapper\"> <input type=\"text\" .value=${live(this.value)} placeholder=${ifDefined(this.placeholder || undefined)} ?disabled=${this.disabled} ?readonly=${this.readonly} ?required=${this.required} name=${ifDefined(this.name || undefined)} autocomplete=\"off\" role=\"combobox\" aria-autocomplete=\"list\" aria-expanded=${this._isOpen} aria-controls=\"dropdown\" class=${classMap({ 'input--invalid': hasError, })} @input=${this._onInput} @blur=${this._onBlur} @focus=${this._onFocus} @keydown=${this._onKeyDown} /> <div class=\"icon-container\"> ${this.value && !this.disabled && !this.readonly ? html ` <button class=\"clear-button\" type=\"button\" aria-label=\"Clear\" @click=${this._handleClear} > <svg width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"> <path d=\"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z\" /> </svg> </button> ` : ''} ${!this.value && !this.disabled && !this.readonly ? html ` <svg class=\"search-icon\" fill=\"currentColor\" viewBox=\"0 0 16 16\"> <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z\" /> </svg> ` : ''} </div> </div> <div id=\"dropdown\" role=\"listbox\" class=${classMap({ dropdown: true, 'is-open': this._isOpen, })} > ${this._renderDropdownContent()} </div> </div> ${hasError ? html `<div class=\"validation-message\">${this.validationMessage}</div>` : this.hint ? html `<div class=\"hint\">${this.hint}</div>` : nothing} </div> `; } }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRAutoSuggest",
+          "declaration": {
+            "name": "KRAutoSuggest",
+            "module": "dist/form/auto-suggest/auto-suggest.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/form/detail-field/detail-field.js",
@@ -4253,6 +4372,641 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/form/auto-suggest/auto-suggest.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "KRAutoSuggest",
+          "slots": [
+            {
+              "description": "Not used",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label text for the input",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name for form submission",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Current input value",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the input is disabled",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the input is readonly",
+              "attribute": "readonly"
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the input is required",
+              "attribute": "required"
+            },
+            {
+              "kind": "field",
+              "name": "hint",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Helper text displayed below the input",
+              "attribute": "hint"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "SuggestionOptions"
+              },
+              "default": "[]",
+              "description": "Array of suggestion options or groups",
+              "attribute": "options"
+            },
+            {
+              "kind": "field",
+              "name": "statusType",
+              "type": {
+                "text": "AutoSuggestStatusType"
+              },
+              "default": "'finished'",
+              "description": "Loading state: 'pending' | 'loading' | 'finished' | 'error'",
+              "attribute": "status-type"
+            },
+            {
+              "kind": "field",
+              "name": "loadingText",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Loading...'",
+              "description": "Text to show during loading",
+              "attribute": "loading-text"
+            },
+            {
+              "kind": "field",
+              "name": "errorText",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Error loading options'",
+              "description": "Text to show on error",
+              "attribute": "error-text"
+            },
+            {
+              "kind": "field",
+              "name": "emptyText",
+              "type": {
+                "text": "string"
+              },
+              "default": "'No matches found'",
+              "description": "Text to show when no matches",
+              "attribute": "empty-text"
+            },
+            {
+              "kind": "field",
+              "name": "filteringType",
+              "type": {
+                "text": "AutoSuggestFilteringType"
+              },
+              "default": "'auto'",
+              "description": "'auto' (client-side) or 'manual' (server-side)",
+              "attribute": "filtering-type"
+            },
+            {
+              "kind": "field",
+              "name": "highlightMatches",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether to highlight matching text",
+              "attribute": "highlight-matches"
+            },
+            {
+              "kind": "field",
+              "name": "_isOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_highlightedIndex",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "-1"
+            },
+            {
+              "kind": "field",
+              "name": "_touched",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_dirty",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_input",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_internals",
+              "type": {
+                "text": "ElementInternals"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_handleDocumentClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity"
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity"
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_filteredOptions",
+              "type": {
+                "text": "SuggestionOptions"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_flatOptions",
+              "type": {
+                "text": "SuggestionOption[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_updateFormValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_onInput",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_onFocus",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_onBlur",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_onKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_scrollToHighlighted",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_selectOption",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SuggestionOption"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleClear",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_onDocumentClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_highlightMatch",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_renderOption",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SuggestionOption"
+                  }
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_renderDropdownContent",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the input value changes"
+            },
+            {
+              "name": "load-items",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when items should be loaded (manual filtering)"
+            },
+            {
+              "name": "select",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when a suggestion is selected"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Label text for the input",
+              "fieldName": "label"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name for form submission",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Current input value",
+              "fieldName": "value"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the input is disabled",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the input is readonly",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the input is required",
+              "fieldName": "required"
+            },
+            {
+              "name": "hint",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Helper text displayed below the input",
+              "fieldName": "hint"
+            },
+            {
+              "name": "options",
+              "type": {
+                "text": "SuggestionOptions"
+              },
+              "default": "[]",
+              "description": "Array of suggestion options or groups",
+              "fieldName": "options"
+            },
+            {
+              "name": "status-type",
+              "type": {
+                "text": "AutoSuggestStatusType"
+              },
+              "default": "'finished'",
+              "description": "Loading state: 'pending' | 'loading' | 'finished' | 'error'",
+              "fieldName": "statusType"
+            },
+            {
+              "name": "loading-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Loading...'",
+              "description": "Text to show during loading",
+              "fieldName": "loadingText"
+            },
+            {
+              "name": "error-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Error loading options'",
+              "description": "Text to show on error",
+              "fieldName": "errorText"
+            },
+            {
+              "name": "empty-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "'No matches found'",
+              "description": "Text to show when no matches",
+              "fieldName": "emptyText"
+            },
+            {
+              "name": "filtering-type",
+              "type": {
+                "text": "AutoSuggestFilteringType"
+              },
+              "default": "'auto'",
+              "description": "'auto' (client-side) or 'manual' (server-side)",
+              "fieldName": "filteringType"
+            },
+            {
+              "name": "highlight-matches",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether to highlight matching text",
+              "fieldName": "highlightMatches"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kr-auto-suggest",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRAutoSuggest",
+          "declaration": {
+            "name": "KRAutoSuggest",
+            "module": "src/form/auto-suggest/auto-suggest.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kr-auto-suggest",
+          "declaration": {
+            "name": "KRAutoSuggest",
+            "module": "src/form/auto-suggest/auto-suggest.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/form/detail-field/detail-field.ts",