@kodaris/krubble-components 1.0.53 → 1.0.55

package/dist/krubble-components.umd.js

@@ -95,7 +95,7 @@
    * SPDX-License-Identifier: BSD-3-Clause
    */function e$3(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$4(n,s,{get(){return o(this)}})}}
 
-  var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -202,13 +202,13 @@
       padding: 16px 16px 8px 16px;
     }
   `;
-  __decorate$j([
+  __decorate$k([
       n$1({ type: String })
   ], exports.KRAccordion.prototype, "header", void 0);
-  __decorate$j([
+  __decorate$k([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRAccordion.prototype, "expanded", void 0);
-  exports.KRAccordion = __decorate$j([
+  exports.KRAccordion = __decorate$k([
       t$1('kr-accordion')
   ], exports.KRAccordion);
 
@@ -225,7 +225,7 @@
    * SPDX-License-Identifier: BSD-3-Clause
    */const e$1=e$2(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
 
-  var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -423,23 +423,23 @@
       outline-offset: 2px;
     }
   `;
-  __decorate$i([
+  __decorate$j([
       n$1({ type: String })
   ], exports.KRAlert.prototype, "type", void 0);
-  __decorate$i([
+  __decorate$j([
       n$1({ type: String })
   ], exports.KRAlert.prototype, "title", void 0);
-  __decorate$i([
+  __decorate$j([
       n$1({ type: Boolean })
   ], exports.KRAlert.prototype, "dismissible", void 0);
-  __decorate$i([
+  __decorate$j([
       n$1({ type: Boolean })
   ], exports.KRAlert.prototype, "visible", void 0);
-  exports.KRAlert = __decorate$i([
+  exports.KRAlert = __decorate$j([
       t$1('kr-alert')
   ], exports.KRAlert);
 
-  var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -938,40 +938,40 @@
       height: 22px;
     }
   `;
-  __decorate$h([
+  __decorate$i([
       n$1({ type: String, reflect: true })
   ], exports.KRButton.prototype, "variant", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: String, reflect: true })
   ], exports.KRButton.prototype, "color", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: String, reflect: true })
   ], exports.KRButton.prototype, "size", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRButton.prototype, "disabled", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: String })
   ], exports.KRButton.prototype, "href", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: String })
   ], exports.KRButton.prototype, "target", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: Array })
   ], exports.KRButton.prototype, "options", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: String, reflect: true, attribute: 'icon-position' })
   ], exports.KRButton.prototype, "iconPosition", void 0);
-  __decorate$h([
+  __decorate$i([
       r$1()
   ], exports.KRButton.prototype, "_state", void 0);
-  __decorate$h([
+  __decorate$i([
       r$1()
   ], exports.KRButton.prototype, "_stateText", void 0);
-  __decorate$h([
+  __decorate$i([
       r$1()
   ], exports.KRButton.prototype, "_dropdownOpened", void 0);
-  exports.KRButton = __decorate$h([
+  exports.KRButton = __decorate$i([
       t$1('kr-button')
   ], exports.KRButton);
 
@@ -981,7 +981,7 @@
    * SPDX-License-Identifier: BSD-3-Clause
    */class e extends i$1{constructor(i){if(super(i),this.it=A,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o$2=e$2(e);
 
-  var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1215,26 +1215,26 @@
     .hljs-property { color: #005cc5; }
 
   `];
-  __decorate$g([
+  __decorate$h([
       n$1({ type: String })
   ], exports.KRCodeDemo.prototype, "language", void 0);
-  __decorate$g([
+  __decorate$h([
       r$1()
   ], exports.KRCodeDemo.prototype, "code", void 0);
-  __decorate$g([
+  __decorate$h([
       r$1()
   ], exports.KRCodeDemo.prototype, "activeTab", void 0);
-  __decorate$g([
+  __decorate$h([
       r$1()
   ], exports.KRCodeDemo.prototype, "copied", void 0);
-  __decorate$g([
+  __decorate$h([
       r$1()
   ], exports.KRCodeDemo.prototype, "highlightedCode", void 0);
-  exports.KRCodeDemo = __decorate$g([
+  exports.KRCodeDemo = __decorate$h([
       t$1('kr-code-demo')
   ], exports.KRCodeDemo);
 
-  var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1403,10 +1403,10 @@
       margin: 4px 0;
     }
   `;
-  __decorate$f([
+  __decorate$g([
       r$1()
   ], exports.KRContextMenu.prototype, "items", void 0);
-  exports.KRContextMenu = __decorate$f([
+  exports.KRContextMenu = __decorate$g([
       t$1('kr-context-menu')
   ], exports.KRContextMenu);
 
@@ -1416,7 +1416,7 @@
    * SPDX-License-Identifier: BSD-3-Clause
    */const n="important",i=" !"+n,o$1=e$2(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"style"!==t$1.name||t$1.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(t){return Object.keys(t).reduce((e,r)=>{const s=t[r];return null==s?e:e+`${r=r.includes("-")?r:r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${s};`},"")}update(e,[r]){const{style:s}=e.element;if(void 0===this.ft)return this.ft=new Set(Object.keys(r)),this.render(r);for(const t of this.ft)null==r[t]&&(this.ft.delete(t),t.includes("-")?s.removeProperty(t):s[t]=null);for(const t in r){const e=r[t];if(null!=e){this.ft.add(t);const r="string"==typeof e&&e.endsWith(i);t.includes("-")||r?s.setProperty(t,r?e.slice(0,-11):e,r?n:""):s[t]=e;}}return E}});
 
-  var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1443,7 +1443,7 @@
       font-weight: 600;
     }
   `;
-  KRDialogHeader = __decorate$e([
+  KRDialogHeader = __decorate$f([
       t$1('kr-dialog-header')
   ], KRDialogHeader);
   let KRDialogContent = class KRDialogContent extends i$2 {
@@ -1459,7 +1459,7 @@
       flex: 1 1 auto;
     }
   `;
-  KRDialogContent = __decorate$e([
+  KRDialogContent = __decorate$f([
       t$1('kr-dialog-content')
   ], KRDialogContent);
   let KRDialogFooter = class KRDialogFooter extends i$2 {
@@ -1479,7 +1479,7 @@
       justify-content: flex-end;
     }
   `;
-  KRDialogFooter = __decorate$e([
+  KRDialogFooter = __decorate$f([
       t$1('kr-dialog-footer')
   ], KRDialogFooter);
   /**
@@ -1687,23 +1687,23 @@
       font-weight: 600;
     }
   `;
-  __decorate$e([
+  __decorate$f([
       r$1()
   ], exports.KRDialog.prototype, "_contentElement", void 0);
-  __decorate$e([
+  __decorate$f([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRDialog.prototype, "opened", void 0);
-  __decorate$e([
+  __decorate$f([
       n$1({ type: String })
   ], exports.KRDialog.prototype, "label", void 0);
-  __decorate$e([
+  __decorate$f([
       n$1({ type: String })
   ], exports.KRDialog.prototype, "width", void 0);
-  exports.KRDialog = __decorate$e([
+  exports.KRDialog = __decorate$f([
       t$1('kr-dialog')
   ], exports.KRDialog);
 
-  var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2005,23 +2005,23 @@
   `;
   /** Track active snackbars for stacking */
   exports.KRSnackbar.activeSnackbars = [];
-  __decorate$d([
+  __decorate$e([
       n$1({ type: String })
   ], exports.KRSnackbar.prototype, "type", void 0);
-  __decorate$d([
+  __decorate$e([
       n$1({ type: String })
   ], exports.KRSnackbar.prototype, "title", void 0);
-  __decorate$d([
+  __decorate$e([
       n$1({ type: String })
   ], exports.KRSnackbar.prototype, "message", void 0);
-  __decorate$d([
+  __decorate$e([
       n$1({ type: Number })
   ], exports.KRSnackbar.prototype, "duration", void 0);
-  exports.KRSnackbar = KRSnackbar_1 = __decorate$d([
+  exports.KRSnackbar = KRSnackbar_1 = __decorate$e([
       t$1('kr-snackbar')
   ], exports.KRSnackbar);
 
-  var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2324,20 +2324,20 @@
       }
     `,
   ];
-  __decorate$c([
+  __decorate$d([
       n$1({ type: String, attribute: 'active-tab-id' })
   ], exports.KRTabGroup.prototype, "activeTabId", void 0);
-  __decorate$c([
+  __decorate$d([
       n$1({ type: Boolean })
   ], exports.KRTabGroup.prototype, "justified", void 0);
-  __decorate$c([
+  __decorate$d([
       n$1({ type: String, reflect: true })
   ], exports.KRTabGroup.prototype, "size", void 0);
-  exports.KRTabGroup = __decorate$c([
+  exports.KRTabGroup = __decorate$d([
       t$1('kr-tab-group')
   ], exports.KRTabGroup);
 
-  var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2392,8 +2392,15 @@
       getIconElement() {
           return this.querySelector('[slot="icon"]');
       }
+      updated() {
+          // The parent kr-tab-group renders tab headers by reading properties from its
+          // kr-tab children. When those properties change, tell the parent to re-render.
+          const tabGroup = this.closest('kr-tab-group');
+          if (tabGroup) {
+              tabGroup.requestUpdate();
+          }
+      }
       render() {
-          console.log('tab render');
           return b `<slot></slot>`;
       }
   };
@@ -2411,35 +2418,35 @@
       }
     `,
   ];
-  __decorate$b([
+  __decorate$c([
       n$1({ type: String, reflect: true })
   ], exports.KRTab.prototype, "id", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: String })
   ], exports.KRTab.prototype, "label", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: String })
   ], exports.KRTab.prototype, "badge", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: String, attribute: 'badge-background' })
   ], exports.KRTab.prototype, "badgeBackground", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: String, attribute: 'badge-color' })
   ], exports.KRTab.prototype, "badgeColor", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: Boolean })
   ], exports.KRTab.prototype, "disabled", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: Boolean })
   ], exports.KRTab.prototype, "dismissible", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRTab.prototype, "active", void 0);
-  exports.KRTab = __decorate$b([
+  exports.KRTab = __decorate$c([
       t$1('kr-tab')
   ], exports.KRTab);
 
-  var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2911,47 +2918,47 @@
   `];
   // Enable form association
   exports.KRSelectField.formAssociated = true;
-  __decorate$a([
+  __decorate$b([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "label", void 0);
-  __decorate$a([
+  __decorate$b([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "name", void 0);
-  __decorate$a([
+  __decorate$b([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "value", void 0);
-  __decorate$a([
+  __decorate$b([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "placeholder", void 0);
-  __decorate$a([
+  __decorate$b([
       n$1({ type: Boolean })
   ], exports.KRSelectField.prototype, "disabled", void 0);
-  __decorate$a([
+  __decorate$b([
       n$1({ type: Boolean })
   ], exports.KRSelectField.prototype, "required", void 0);
-  __decorate$a([
+  __decorate$b([
       n$1({ type: Boolean })
   ], exports.KRSelectField.prototype, "readonly", void 0);
-  __decorate$a([
+  __decorate$b([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "hint", void 0);
-  __decorate$a([
+  __decorate$b([
       r$1()
   ], exports.KRSelectField.prototype, "_isOpen", void 0);
-  __decorate$a([
+  __decorate$b([
       r$1()
   ], exports.KRSelectField.prototype, "_highlightedIndex", void 0);
-  __decorate$a([
+  __decorate$b([
       r$1()
   ], exports.KRSelectField.prototype, "_touched", void 0);
-  __decorate$a([
+  __decorate$b([
       e$3('.select-trigger')
   ], exports.KRSelectField.prototype, "_triggerElement", void 0);
-  exports.KRSelectField = __decorate$a([
+  exports.KRSelectField = __decorate$b([
       t$1('kr-select-field')
   ], exports.KRSelectField);
 
-  var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2988,13 +2995,13 @@
       display: none;
     }
   `;
-  __decorate$9([
+  __decorate$a([
       n$1({ type: String })
   ], exports.KRSelectOption.prototype, "value", void 0);
-  __decorate$9([
+  __decorate$a([
       n$1({ type: Boolean })
   ], exports.KRSelectOption.prototype, "disabled", void 0);
-  exports.KRSelectOption = __decorate$9([
+  exports.KRSelectOption = __decorate$a([
       t$1('kr-select-option')
   ], exports.KRSelectOption);
 
@@ -4013,7 +4020,7 @@
       }
   }
 
-  var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4159,7 +4166,11 @@
                       column.filter = new KRQuery();
                       column.filter.field = col.id;
                       column.filter.type = column.type;
-                      if (col.facetable && !col.filterable) {
+                      if (col.filter) {
+                          column.filter.setOperator(col.filter.operator);
+                          column.filter.setValue(col.filter.value);
+                      }
+                      else if (col.facetable && !col.filterable) {
                           column.filter.operator = 'in';
                           column.filter.value = [];
                       }
@@ -4495,6 +4506,7 @@
           else {
               this._model.displayedColumns = [...this._model.displayedColumns, columnId];
           }
+          this.requestUpdate();
       }
       // Clear any existing text selection on mousedown so we only detect
       // selections made during this click gesture, not stale selections from elsewhere
@@ -4619,7 +4631,14 @@
           }
           else {
               const rect = e.currentTarget.getBoundingClientRect();
-              this._filterPanelPos = { top: rect.bottom + 4, left: rect.left };
+              let left = rect.left;
+              if (left + 328 > window.innerWidth) {
+                  left = window.innerWidth - 328;
+              }
+              this._filterPanelPos = {
+                  top: rect.bottom + 4,
+                  left
+              };
               this._filterPanelOpened = column.id;
               if (column.facetable) {
                   this._filterPanelTab = 'counts';
@@ -6127,56 +6146,56 @@
     }
 
   `];
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_data", void 0);
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_dataState", void 0);
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_page", void 0);
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_pageSize", void 0);
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_totalItems", void 0);
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_totalPages", void 0);
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_searchQuery", void 0);
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_canScrollLeft", void 0);
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_canScrollRight", void 0);
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_canScrollHorizontal", void 0);
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_columnPickerOpen", void 0);
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_filterPanelOpened", void 0);
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_filterPanelTab", void 0);
-  __decorate$8([
+  __decorate$9([
       r$1()
   ], exports.KRTable.prototype, "_buckets", void 0);
-  __decorate$8([
+  __decorate$9([
       n$1({ type: Object })
   ], exports.KRTable.prototype, "def", void 0);
-  exports.KRTable = __decorate$8([
+  exports.KRTable = __decorate$9([
       t$1('kr-table')
   ], exports.KRTable);
 
-  var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6296,17 +6315,17 @@
       stroke-linecap: round;
     }
   `;
-  __decorate$7([
+  __decorate$8([
       n$1({ type: String, reflect: true })
   ], exports.KRSpinner.prototype, "size", void 0);
-  __decorate$7([
+  __decorate$8([
       n$1({ type: String, reflect: true })
   ], exports.KRSpinner.prototype, "color", void 0);
-  exports.KRSpinner = __decorate$7([
+  exports.KRSpinner = __decorate$8([
       t$1('kr-spinner')
   ], exports.KRSpinner);
 
-  var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6397,17 +6416,17 @@
       }
     }
   `;
-  __decorate$6([
+  __decorate$7([
       n$1({ type: String, reflect: true })
   ], exports.KRProgressBar.prototype, "color", void 0);
-  __decorate$6([
+  __decorate$7([
       n$1({ type: String, reflect: true })
   ], exports.KRProgressBar.prototype, "trackColor", void 0);
-  exports.KRProgressBar = __decorate$6([
+  exports.KRProgressBar = __decorate$7([
       t$1('kr-progress-bar')
   ], exports.KRProgressBar);
 
-  var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6875,23 +6894,23 @@
     }
   `;
   exports.KRFilePreview._activePreview = null;
-  __decorate$5([
+  __decorate$6([
       n$1({ type: String })
   ], exports.KRFilePreview.prototype, "src", void 0);
-  __decorate$5([
+  __decorate$6([
       n$1({ type: String })
   ], exports.KRFilePreview.prototype, "name", void 0);
-  __decorate$5([
+  __decorate$6([
       r$1()
   ], exports.KRFilePreview.prototype, "_zoomLevel", void 0);
-  __decorate$5([
+  __decorate$6([
       r$1()
   ], exports.KRFilePreview.prototype, "_textContent", void 0);
-  exports.KRFilePreview = KRFilePreview_1 = __decorate$5([
+  exports.KRFilePreview = KRFilePreview_1 = __decorate$6([
       t$1('kr-file-preview')
   ], exports.KRFilePreview);
 
-  var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -7134,13 +7153,13 @@
       padding: 20px;
     }
   `;
-  __decorate$4([
+  __decorate$5([
       n$1({ type: Array })
   ], exports.KRFileList.prototype, "files", void 0);
-  __decorate$4([
+  __decorate$5([
       n$1({ type: String, attribute: 'empty-message' })
   ], exports.KRFileList.prototype, "emptyMessage", void 0);
-  exports.KRFileList = __decorate$4([
+  exports.KRFileList = __decorate$5([
       t$1('kr-file-list')
   ], exports.KRFileList);
 
@@ -7162,7 +7181,7 @@
    * SPDX-License-Identifier: BSD-3-Clause
    */const l=e$2(class extends i$1{constructor(r$1){if(super(r$1),r$1.type!==t.PROPERTY&&r$1.type!==t.ATTRIBUTE&&r$1.type!==t.BOOLEAN_ATTRIBUTE)throw Error("The `live` directive is not allowed on child or event bindings");if(!r(r$1))throw Error("`live` bindings can only contain a single expression")}render(r){return r}update(i,[t$1]){if(t$1===E||t$1===A)return t$1;const o=i.element,l=i.name;if(i.type===t.PROPERTY){if(t$1===o[l])return E}else if(i.type===t.BOOLEAN_ATTRIBUTE){if(!!t$1===o.hasAttribute(l))return E}else if(i.type===t.ATTRIBUTE&&o.getAttribute(l)===t$1+"")return E;return p(i),t$1}});
 
-  var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -7415,59 +7434,59 @@
   `;
   // Enable form association
   exports.KRTextField.formAssociated = true;
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "label", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "name", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "value", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "placeholder", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "type", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: Boolean })
   ], exports.KRTextField.prototype, "required", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: Boolean })
   ], exports.KRTextField.prototype, "disabled", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: Boolean })
   ], exports.KRTextField.prototype, "readonly", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: Number })
   ], exports.KRTextField.prototype, "minlength", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: Number })
   ], exports.KRTextField.prototype, "maxlength", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "pattern", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "autocomplete", void 0);
-  __decorate$3([
+  __decorate$4([
       n$1({ type: String })
   ], exports.KRTextField.prototype, "hint", void 0);
-  __decorate$3([
+  __decorate$4([
       e$3('input')
   ], exports.KRTextField.prototype, "_input", void 0);
-  __decorate$3([
+  __decorate$4([
       r$1()
   ], exports.KRTextField.prototype, "_touched", void 0);
-  __decorate$3([
+  __decorate$4([
       r$1()
   ], exports.KRTextField.prototype, "_dirty", void 0);
-  exports.KRTextField = __decorate$3([
+  exports.KRTextField = __decorate$4([
       t$1('kr-text-field')
   ], exports.KRTextField);
 
-  var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -7725,59 +7744,59 @@
   `;
   // Enable form association
   exports.KRTextareaField.formAssociated = true;
-  __decorate$2([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "label", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "name", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "value", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "placeholder", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: Boolean })
   ], exports.KRTextareaField.prototype, "required", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: Boolean })
   ], exports.KRTextareaField.prototype, "disabled", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: Boolean })
   ], exports.KRTextareaField.prototype, "readonly", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: Number })
   ], exports.KRTextareaField.prototype, "rows", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: Number })
   ], exports.KRTextareaField.prototype, "cols", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: Number })
   ], exports.KRTextareaField.prototype, "minlength", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: Number })
   ], exports.KRTextareaField.prototype, "maxlength", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "autocomplete", void 0);
-  __decorate$2([
+  __decorate$3([
       n$1({ type: String })
   ], exports.KRTextareaField.prototype, "hint", void 0);
-  __decorate$2([
+  __decorate$3([
       e$3('textarea')
   ], exports.KRTextareaField.prototype, "_textarea", void 0);
-  __decorate$2([
+  __decorate$3([
       r$1()
   ], exports.KRTextareaField.prototype, "_touched", void 0);
-  __decorate$2([
+  __decorate$3([
       r$1()
   ], exports.KRTextareaField.prototype, "_dirty", void 0);
-  exports.KRTextareaField = __decorate$2([
+  exports.KRTextareaField = __decorate$3([
       t$1('kr-textarea-field')
   ], exports.KRTextareaField);
 
-  var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -7834,25 +7853,22 @@
       color: black;
     }
   `;
-  __decorate$1([
+  __decorate$2([
       n$1({ type: String })
   ], KRDetailField.prototype, "label", void 0);
-  __decorate$1([
+  __decorate$2([
       n$1({ type: String })
   ], KRDetailField.prototype, "value", void 0);
-  KRDetailField = __decorate$1([
+  KRDetailField = __decorate$2([
       t$1('kr-detail-field')
   ], KRDetailField);
 
-  var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
       else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
       return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
-  function isGroup(option) {
-      return 'options' in option;
-  }
   /**
    * @element kr-auto-suggest
    *
@@ -7864,23 +7880,24 @@
    * @property {boolean} readonly - Whether the input is readonly
    * @property {boolean} required - Whether the input is required
    * @property {string} hint - Helper text displayed below the input
-   * @property {SuggestionOptions} options - Array of suggestion options or groups
-   * @property {AutoSuggestStatusType} statusType - Loading state: 'pending' | 'loading' | 'finished' | 'error'
-   * @property {string} loadingText - Text to show during loading
-   * @property {string} errorText - Text to show on error
-   * @property {string} emptyText - Text to show when no matches
-   * @property {AutoSuggestFilteringType} filteringType - 'auto' (client-side) or 'manual' (server-side)
-   * @property {boolean} highlightMatches - Whether to highlight matching text
+   * @property {KRAutoSuggestOption[]} options - Array of suggestion options
+   * @property {Function} fetch - Function that returns a promise of options
    *
    * @fires change - Fired when the input value changes
    * @fires select - Fired when a suggestion is selected
-   * @fires load-items - Fired when items should be loaded (manual filtering)
    *
    * @slot - Not used
    */
   exports.KRAutoSuggest = class KRAutoSuggest extends i$2 {
       constructor() {
           super();
+          this._requestId = 0;
+          this._handleDocumentClick = (e) => {
+              const path = e.composedPath();
+              if (!path.includes(this)) {
+                  this._isOpen = false;
+              }
+          };
           this.label = '';
           this.name = '';
           this.value = '';
@@ -7890,29 +7907,36 @@
           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.fetch = null;
           this._isOpen = false;
           this._highlightedIndex = -1;
           this._touched = false;
-          this._dirty = false;
-          this._handleDocumentClick = this._onDocumentClick.bind(this);
+          this._handleInvalid = (e) => {
+              e.preventDefault();
+              this._touched = true;
+          };
           this._internals = this.attachInternals();
       }
       connectedCallback() {
           super.connectedCallback();
           document.addEventListener('click', this._handleDocumentClick);
+          this.addEventListener('invalid', this._handleInvalid);
       }
       disconnectedCallback() {
           super.disconnectedCallback();
           document.removeEventListener('click', this._handleDocumentClick);
+          this.removeEventListener('invalid', this._handleInvalid);
       }
       firstUpdated() {
-          this._updateFormValue();
+          this._updateValidity();
+      }
+      updated(changedProperties) {
+          if (changedProperties.has('required') || changedProperties.has('value')) {
+              this._updateValidity();
+          }
+          if (changedProperties.has('options') && this._isOpen) {
+              this._positionDropdown();
+          }
       }
       get form() {
           return this._internals.form;
@@ -7932,120 +7956,104 @@
       formResetCallback() {
           this.value = '';
           this._touched = false;
-          this._dirty = false;
           this._isOpen = false;
           this._highlightedIndex = -1;
-          this._updateFormValue();
+          this._internals.setFormValue('');
+          this._internals.setValidity({});
       }
       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);
-              }
+      _updateValidity() {
+          if (this._input) {
+              this._internals.setValidity(this._input.validity, this._input.validationMessage);
           }
-          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({});
+      _fetch() {
+          if (!this.fetch) {
+              return;
           }
+          this._requestId++;
+          const requestId = this._requestId;
+          this.fetch(this.value).then((options) => {
+              if (requestId === this._requestId) {
+                  this.options = options;
+              }
+          }).catch((error) => {
+              console.error('kr-auto-suggest: fetch failed', error);
+          });
       }
-      _onInput(e) {
-          const target = e.target;
-          this.value = target.value;
-          this._dirty = true;
+      _handleInput(e) {
+          this.value = e.target.value;
           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,
-              }));
-          }
+          this._positionDropdown();
+          this._internals.setFormValue(this.value);
+          this._internals.setValidity(this._input.validity, this._input.validationMessage);
+          this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+          this._fetch();
+      }
+      _positionDropdown() {
+          requestAnimationFrame(() => {
+              const dropdown = this.shadowRoot?.querySelector('.dropdown');
+              if (!dropdown) {
+                  return;
+              }
+              const inputRect = this._input.getBoundingClientRect();
+              const spaceBelow = window.innerHeight - inputRect.bottom - 4 - 8;
+              const spaceAbove = inputRect.top - 4 - 8;
+              dropdown.style.left = inputRect.left + 'px';
+              dropdown.style.width = inputRect.width + 'px';
+              // Open above the input if there's more room above than below
+              if (spaceAbove > spaceBelow) {
+                  dropdown.style.top = '';
+                  dropdown.style.bottom = (window.innerHeight - inputRect.top + 4) + 'px';
+                  dropdown.style.maxHeight = spaceAbove + 'px';
+              }
+              else {
+                  dropdown.style.bottom = '';
+                  dropdown.style.top = inputRect.bottom + 4 + 'px';
+                  dropdown.style.maxHeight = spaceBelow + 'px';
+              }
+          });
       }
-      _onFocus() {
+      _handleFocus() {
           this._isOpen = true;
-          if (this.filteringType === 'manual') {
-              this.dispatchEvent(new CustomEvent('load-items', {
-                  detail: { filteringText: this.value },
-                  bubbles: true,
-                  composed: true,
-              }));
-          }
+          this._positionDropdown();
+          this._fetch();
       }
-      _onBlur() {
+      _handleBlur() {
           this._touched = true;
+          this._internals.setValidity(this._input.validity, this._input.validationMessage);
           // Delay to allow click on option
           setTimeout(() => {
               this._isOpen = false;
               this._highlightedIndex = -1;
           }, 200);
-          this._updateFormValue();
       }
-      _onKeyDown(e) {
-          const options = this._flatOptions;
+      _handleKeyDown(e) {
           switch (e.key) {
               case 'ArrowDown':
                   e.preventDefault();
                   this._isOpen = true;
-                  this._highlightedIndex = Math.min(this._highlightedIndex + 1, options.length - 1);
+                  this._highlightedIndex = Math.min(this._highlightedIndex + 1, this.options.length - 1);
                   this._scrollToHighlighted();
                   break;
               case 'ArrowUp':
                   e.preventDefault();
-                  this._highlightedIndex = Math.max(this._highlightedIndex - 1, -1);
+                  if (this._highlightedIndex === -1) {
+                      this._isOpen = true;
+                      this._highlightedIndex = this.options.length - 1;
+                  }
+                  else {
+                      this._highlightedIndex = Math.max(this._highlightedIndex - 1, 0);
+                  }
                   this._scrollToHighlighted();
                   break;
               case 'Enter':
-                  if (this._highlightedIndex >= 0 && options[this._highlightedIndex]) {
+                  if (this._highlightedIndex >= 0 && this.options[this._highlightedIndex]) {
                       e.preventDefault();
-                      this._selectOption(options[this._highlightedIndex]);
+                      this._selectOption(this.options[this._highlightedIndex]);
                   }
                   break;
               case 'Escape':
@@ -8062,7 +8070,7 @@
       _scrollToHighlighted() {
           this.updateComplete.then(() => {
               const container = this.shadowRoot?.querySelector('.dropdown');
-              const highlighted = this.shadowRoot?.querySelector('.option.is-highlighted');
+              const highlighted = this.shadowRoot?.querySelector('.option--highlighted');
               if (container && highlighted) {
                   const containerRect = container.getBoundingClientRect();
                   const highlightedRect = highlighted.getBoundingClientRect();
@@ -8076,15 +8084,15 @@
           });
       }
       _selectOption(option) {
-          if (option.disabled)
+          if (option.disabled) {
               return;
-          this.value = option.label || option.value;
+          }
+          this.value = option.value;
           this._isOpen = false;
           this._highlightedIndex = -1;
-          this._dirty = true;
-          this._updateFormValue();
+          this._internals.setFormValue(this.value);
           this.dispatchEvent(new CustomEvent('select', {
-              detail: { value: option.value, selectedOption: option },
+              detail: { value: option.value, option: option },
               bubbles: true,
               composed: true,
           }));
@@ -8092,119 +8100,41 @@
       }
       _handleClear() {
           this.value = '';
-          this._updateFormValue();
-          this.dispatchEvent(new CustomEvent('change', {
-              detail: { value: '' },
-              bubbles: true,
-              composed: true,
-          }));
+          this._internals.setFormValue(this.value);
+          this.dispatchEvent(new Event('change', { 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}`;
+      _handleOptionMouseEnter(e, index) {
+          this._highlightedIndex = index;
       }
       _renderOption(option, index) {
-          const isHighlighted = index === this._highlightedIndex;
           return b `
       <button
         class=${e$1({
             option: true,
-            'is-highlighted': isHighlighted,
+            'option--highlighted': index === this._highlightedIndex,
         })}
         type="button"
         role="option"
-        aria-selected=${isHighlighted}
+        aria-selected=${index === this._highlightedIndex}
         ?disabled=${option.disabled}
-        @click=${() => this._selectOption(option)}
-        @mouseenter=${() => {
-            this._highlightedIndex = index;
-        }}
+        @click=${(e) => this._selectOption(option)}
+        @mouseenter=${(e) => this._handleOptionMouseEnter(e, 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>
+        ${option.label || option.value}
       </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>
-      `;
+      render() {
+          let footer = A;
+          if (this._touched && this._input && !this._input.validity.valid) {
+              footer = b `<div class="validation-message">${this._input.validationMessage}</div>`;
           }
-          const filtered = this._filteredOptions;
-          if (filtered.length === 0) {
-              return b `<div class="empty">${this.emptyText}</div>`;
+          else if (this.hint) {
+              footer = b `<div class="hint">${this.hint}</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">
+      <div class="wrapper">
         ${this.label
             ? b `
               <label>
@@ -8214,75 +8144,58 @@
             `
             : 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,
+        <div class="input-wrapper">
+          <input
+            type="text"
+            .value=${l(this.value)}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            name=${this.name}
+            autocomplete="off"
+            role="combobox"
+            aria-autocomplete="list"
+            aria-expanded=${this._isOpen}
+            aria-controls="dropdown"
+            class=${e$1({
+            'input--invalid': this._touched && this._input && !this._input.validity.valid,
         })}
-              @input=${this._onInput}
-              @blur=${this._onBlur}
-              @focus=${this._onFocus}
-              @keydown=${this._onKeyDown}
-            />
-            <div class="icon-container">
-              ${this.value && !this.disabled && !this.readonly
+            @input=${this._handleInput}
+            @blur=${this._handleBlur}
+            @focus=${this._handleFocus}
+            @keydown=${this._handleKeyDown}
+          />
+          <div class="icon-wrapper">
+            ${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
+                  <svg class="clear" viewBox="0 0 24 24" fill="currentColor" aria-label="Clear" @click=${this._handleClear}>
+                    <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
+                  </svg>
+                `
+            : A}
+            ${!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>
+                  <svg class="search-icon" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+                  </svg>
+                `
+            : A}
           </div>
+        </div>
 
-          <div
-            id="dropdown"
-            role="listbox"
-            class=${e$1({
+        <div
+          id="dropdown"
+          role="listbox"
+          class=${e$1({
             dropdown: true,
-            'is-open': this._isOpen,
+            'dropdown--open': this._isOpen && this.options.length > 0,
         })}
-          >
-            ${this._renderDropdownContent()}
-          </div>
+        >
+          ${this.options.map((option, index) => this._renderOption(option, index))}
         </div>
 
-        ${hasError
-            ? b `<div class="validation-message">${this.validationMessage}</div>`
-            : this.hint
-                ? b `<div class="hint">${this.hint}</div>`
-                : A}
+        ${footer}
       </div>
     `;
       }
@@ -8290,30 +8203,24 @@
   exports.KRAutoSuggest.styles = i$5 `
     :host {
       display: block;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-        'Helvetica Neue', sans-serif;
+      font-family: inherit;
     }
 
-    .field-wrapper {
+    .wrapper {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: 6px;
     }
 
     label {
       font-size: 14px;
       font-weight: 500;
-      color: var(--kr-text-field-label-color, #374151);
-      display: block;
+      color: black;
     }
 
     .required {
       color: var(--kr-text-field-required-color, #ef4444);
-      margin-left: 2px;
-    }
-
-    .input-container {
-      position: relative;
+      margin-left: 0.125rem;
     }
 
     .input-wrapper {
@@ -8325,15 +8232,15 @@
     input {
       flex: 1;
       width: 100%;
-      padding: 8px 32px 8px 12px;
+      padding: 10px 32px 10px 12px;
       font-size: 14px;
-      border: 1px solid var(--kr-text-field-border-color, #d1d5db);
-      border-radius: 6px;
-      background: var(--kr-text-field-bg, #ffffff);
-      color: var(--kr-text-field-color, #000000);
-      transition: all 0.2s ease;
-      box-sizing: border-box;
       font-family: inherit;
+      border: 1px solid var(--kr-text-field-border-color, #0000003d);
+      border-radius: 8px;
+      background-color: var(--kr-text-field-bg, #fff);
+      color: var(--kr-text-field-color, #111827);
+      transition: border-color 0.2s, box-shadow 0.2s;
+      box-sizing: border-box;
     }
 
     input:focus {
@@ -8343,13 +8250,13 @@
     }
 
     input:disabled {
-      background: var(--kr-text-field-disabled-bg, #f3f4f6);
+      background-color: var(--kr-text-field-disabled-bg, #f3f4f6);
+      color: var(--kr-text-field-disabled-color, #9ca3af);
       cursor: not-allowed;
-      opacity: 0.6;
     }
 
     input:read-only {
-      background: var(--kr-text-field-disabled-bg, #f3f4f6);
+      background-color: var(--kr-text-field-disabled-bg, #f3f4f6);
       cursor: default;
     }
 
@@ -8358,14 +8265,14 @@
     }
 
     input.input--invalid:focus {
-      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+      box-shadow: 0 0 0 3px var(--kr-text-field-error-ring-color, rgba(239, 68, 68, 0.1));
     }
 
     input::placeholder {
       color: var(--kr-text-field-placeholder-color, #9ca3af);
     }
 
-    .icon-container {
+    .icon-wrapper {
       position: absolute;
       right: 8px;
       display: flex;
@@ -8373,51 +8280,40 @@
       gap: 4px;
     }
 
-    .clear-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    .clear {
       width: 20px;
       height: 20px;
-      padding: 0;
-      background: none;
-      border: none;
-      border-radius: 50%;
       color: var(--kr-text-muted, #6b7280);
       cursor: pointer;
-      transition: all 0.15s ease;
+      transition: color 0.15s ease;
     }
 
-    .clear-button:hover {
-      background-color: var(--kr-select-option-hover-bg, #f3f4f6);
+    .clear:hover {
       color: var(--kr-text, #000000);
     }
 
     .search-icon {
-      width: 16px;
-      height: 16px;
+      width: 20px;
+      height: 20px;
       color: var(--kr-text-muted, #6b7280);
       pointer-events: none;
     }
 
     /* Dropdown */
     .dropdown {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      right: 0;
-      z-index: 50;
-      margin-top: 4px;
-      max-height: 300px;
+      position: fixed;
+      z-index: 10000;
       overflow-y: auto;
       background: white;
-      border: 1px solid var(--kr-text-field-border-color, #d1d5db);
-      border-radius: 6px;
-      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      border: 1px solid #9ba7b6;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      padding: 8px 0;
+      box-sizing: border-box;
       display: none;
     }
 
-    .dropdown.is-open {
+    .dropdown--open {
       display: block;
     }
 
@@ -8431,6 +8327,7 @@
       background: none;
       border: none;
       font-size: 14px;
+      line-height: 1.5;
       font-family: inherit;
       color: var(--kr-text, #000000);
       text-align: left;
@@ -8442,180 +8339,793 @@
       background: var(--kr-select-option-hover-bg, #f3f4f6);
     }
 
-    .option.is-highlighted {
-      background: var(--kr-select-option-highlight-bg, #e5e7eb);
+    .option--highlighted {
+      background-color: var(--kr-select-option-hover-bg, #f3f4f6);
     }
 
     .option:disabled {
       opacity: 0.5;
       cursor: not-allowed;
     }
-
-    .option-content {
-      flex: 1;
-      min-width: 0;
-    }
-
-    .option-label {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      flex-wrap: wrap;
-    }
-
-    .option-tag {
-      flex-shrink: 0;
-      padding: 2px 6px;
-      font-size: 11px;
-      color: var(--kr-text-muted, #6b7280);
-      background: var(--kr-select-option-hover-bg, #f3f4f6);
-      border-radius: 3px;
-    }
-
-    .option-description {
-      font-size: 12px;
-      color: var(--kr-text-muted, #6b7280);
-      margin-top: 2px;
-    }
-
-    .option-tags {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 4px;
-      margin-top: 4px;
-    }
-
-    /* Highlight */
-    .highlight {
-      font-weight: 600;
-      background-color: #fef3c7;
-      color: #92400e;
+    
+    .hint {
+      font-size: 0.75rem;
+      color: var(--kr-text-field-helper-color, #6b7280);
     }
 
-    /* Group */
-    .group-label {
-      padding: 8px 12px;
-      font-size: 11px;
-      font-weight: 600;
-      color: var(--kr-text-muted, #6b7280);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      background: var(--kr-select-option-hover-bg, #f9fafb);
-      border-bottom: 1px solid var(--kr-text-field-border-color, #e5e7eb);
+    .validation-message {
+      font-size: 0.75rem;
+      color: var(--kr-text-field-error-color, #ef4444);
     }
-
-    /* Status */
-    .status {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      padding: 16px;
-      font-size: 14px;
-      color: var(--kr-text-muted, #6b7280);
+  `;
+  exports.KRAutoSuggest.formAssociated = true;
+  __decorate$1([
+      n$1({ type: String })
+  ], exports.KRAutoSuggest.prototype, "label", void 0);
+  __decorate$1([
+      n$1({ type: String })
+  ], exports.KRAutoSuggest.prototype, "name", void 0);
+  __decorate$1([
+      n$1({ type: String })
+  ], exports.KRAutoSuggest.prototype, "value", void 0);
+  __decorate$1([
+      n$1({ type: String })
+  ], exports.KRAutoSuggest.prototype, "placeholder", void 0);
+  __decorate$1([
+      n$1({ type: Boolean })
+  ], exports.KRAutoSuggest.prototype, "disabled", void 0);
+  __decorate$1([
+      n$1({ type: Boolean })
+  ], exports.KRAutoSuggest.prototype, "readonly", void 0);
+  __decorate$1([
+      n$1({ type: Boolean })
+  ], exports.KRAutoSuggest.prototype, "required", void 0);
+  __decorate$1([
+      n$1({ type: String })
+  ], exports.KRAutoSuggest.prototype, "hint", void 0);
+  __decorate$1([
+      n$1({ type: Array })
+  ], exports.KRAutoSuggest.prototype, "options", void 0);
+  __decorate$1([
+      n$1({ attribute: false })
+  ], exports.KRAutoSuggest.prototype, "fetch", void 0);
+  __decorate$1([
+      r$1()
+  ], exports.KRAutoSuggest.prototype, "_isOpen", void 0);
+  __decorate$1([
+      r$1()
+  ], exports.KRAutoSuggest.prototype, "_highlightedIndex", void 0);
+  __decorate$1([
+      r$1()
+  ], exports.KRAutoSuggest.prototype, "_touched", void 0);
+  __decorate$1([
+      e$3('input')
+  ], exports.KRAutoSuggest.prototype, "_input", void 0);
+  exports.KRAutoSuggest = __decorate$1([
+      t$1('kr-auto-suggest')
+  ], exports.KRAutoSuggest);
+
+  var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+      var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+      if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+      else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /**
+   * @element kr-combo-box
+   *
+   * A searchable select field. Looks like a select dropdown but when opened
+   * shows a search input at the top of the panel for filtering options via
+   * a fetch function. Works with any object shape — use optionValue and
+   * optionLabel to tell the component how to extract the value and display text.
+   *
+   * @property {string} label - Label text
+   * @property {string} name - Name for form submission
+   * @property {string} value - Currently selected value
+   * @property {string} placeholder - Placeholder text when nothing is selected
+   * @property {boolean} disabled - Whether the field is disabled
+   * @property {boolean} readonly - Whether the field is readonly
+   * @property {boolean} required - Whether the field is required
+   * @property {string} hint - Helper text displayed below the field
+   * @property {string|Function} optionValue - Field name or function to extract the value from an option
+   * @property {string|Function} optionLabel - Field name or function to extract the label from an option
+   * @property {any[]} options - Array of options
+   * @property {Function} fetch - Function that returns a promise of options
+   * @property {Function} fetchSelection - Function that resolves a single option by its value
+   *
+   * @fires change - Fired when the selected value changes
+   * @fires select - Fired when an option is selected
+   */
+  exports.KRComboBox = class KRComboBox extends i$2 {
+      constructor() {
+          super();
+          this._requestId = 0;
+          this._selectedOption = null;
+          this._handleDocumentClick = (e) => {
+              if (!e.composedPath().includes(this)) {
+                  this._close();
+              }
+          };
+          this.label = '';
+          this.name = '';
+          this.value = '';
+          this.placeholder = 'Select an option';
+          this.disabled = false;
+          this.readonly = false;
+          this.required = false;
+          this.hint = '';
+          this.optionValue = 'value';
+          this.optionLabel = 'label';
+          this.options = [];
+          this.fetch = null;
+          this.fetchSelection = null;
+          this._isOpen = false;
+          this._highlightedIndex = -1;
+          this._touched = false;
+          this._searchQuery = '';
+          this._loading = false;
+          this._handleInvalid = (e) => {
+              e.preventDefault();
+              this._touched = true;
+          };
+          this._internals = this.attachInternals();
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          document.addEventListener('click', this._handleDocumentClick);
+          this.addEventListener('invalid', this._handleInvalid);
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          document.removeEventListener('click', this._handleDocumentClick);
+          this.removeEventListener('invalid', this._handleInvalid);
+      }
+      firstUpdated() {
+          this._updateValidity();
+          if (this.value && this.fetchSelection) {
+              this._resolveSelection();
+          }
+      }
+      updated(changedProperties) {
+          if (changedProperties.has('required') || changedProperties.has('value')) {
+              this._updateValidity();
+          }
+          if (changedProperties.has('value')) {
+              if (this.value) {
+                  // Only resolve if the selected option doesn't match the current value
+                  if (!this._selectedOption || this._getOptionValue(this._selectedOption) !== this.value) {
+                      this._resolveSelection();
+                  }
+              }
+              else {
+                  this._selectedOption = null;
+              }
+          }
+          if (changedProperties.has('options') && this._isOpen) {
+              this._positionDropdown();
+          }
+      }
+      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._selectedOption = null;
+          this._touched = false;
+          this._isOpen = false;
+          this._highlightedIndex = -1;
+          this._searchQuery = '';
+          this._internals.setFormValue('');
+          this._internals.setValidity({});
+      }
+      formStateRestoreCallback(state) {
+          this.value = state;
+      }
+      focus() {
+          if (!this._isOpen) {
+              this._open();
+          }
+      }
+      blur() {
+          this._triggerElement?.blur();
+      }
+      _updateValidity() {
+          if (this.required && !this.value) {
+              this._internals.setValidity({ valueMissing: true }, 'Please select an option', this._triggerElement);
+          }
+          else {
+              this._internals.setValidity({});
+          }
+      }
+      _handleTriggerClick() {
+          if (this.disabled || this.readonly) {
+              return;
+          }
+          if (this._isOpen) {
+              this._close();
+          }
+          else {
+              this._open();
+          }
+      }
+      _open() {
+          this._isOpen = true;
+          this._searchQuery = '';
+          this._highlightedIndex = -1;
+          this._fetch();
+          this.updateComplete.then(() => {
+              this._positionDropdown();
+              if (this._searchInput) {
+                  this._searchInput.focus();
+              }
+          });
+      }
+      _close() {
+          this._isOpen = false;
+          this._highlightedIndex = -1;
+          this._searchQuery = '';
+      }
+      _positionDropdown() {
+          requestAnimationFrame(() => {
+              const dropdown = this.shadowRoot?.querySelector('.dropdown');
+              if (!dropdown) {
+                  return;
+              }
+              const triggerRect = this._triggerElement.getBoundingClientRect();
+              const spaceBelow = window.innerHeight - triggerRect.bottom - 4 - 8;
+              const spaceAbove = triggerRect.top - 4 - 8;
+              dropdown.style.left = triggerRect.left + 'px';
+              dropdown.style.width = triggerRect.width + 'px';
+              // Prefer opening below; only flip above when space below is tight
+              if (spaceBelow < 200 && spaceAbove > spaceBelow) {
+                  dropdown.style.top = '';
+                  dropdown.style.bottom = (window.innerHeight - triggerRect.top + 4) + 'px';
+                  dropdown.style.maxHeight = spaceAbove + 'px';
+              }
+              else {
+                  dropdown.style.bottom = '';
+                  dropdown.style.top = triggerRect.bottom + 4 + 'px';
+                  dropdown.style.maxHeight = spaceBelow + 'px';
+              }
+          });
+      }
+      _fetch() {
+          if (!this.fetch) {
+              return;
+          }
+          this._loading = true;
+          this._requestId++;
+          const requestId = this._requestId;
+          this.fetch(this._searchQuery).then((options) => {
+              if (requestId === this._requestId) {
+                  this.options = options;
+                  this._loading = false;
+              }
+          }).catch((error) => {
+              console.error('kr-combo-box: fetch failed', error);
+              this._loading = false;
+          });
+      }
+      _handleSearchInput(e) {
+          this._searchQuery = e.target.value;
+          this._highlightedIndex = -1;
+          this._fetch();
+      }
+      _handleSearchKeyDown(e) {
+          switch (e.key) {
+              case 'ArrowDown':
+                  e.preventDefault();
+                  this._highlightedIndex = Math.min(this._highlightedIndex + 1, this.options.length - 1);
+                  this._scrollToHighlighted();
+                  break;
+              case 'ArrowUp':
+                  e.preventDefault();
+                  if (this._highlightedIndex === -1) {
+                      this._highlightedIndex = this.options.length - 1;
+                  }
+                  else {
+                      this._highlightedIndex = Math.max(this._highlightedIndex - 1, 0);
+                  }
+                  this._scrollToHighlighted();
+                  break;
+              case 'Enter':
+                  e.preventDefault();
+                  if (this._highlightedIndex >= 0 && this.options[this._highlightedIndex]) {
+                      this._selectOption(this.options[this._highlightedIndex]);
+                  }
+                  break;
+              case 'Escape':
+                  e.preventDefault();
+                  this._close();
+                  this._triggerElement?.focus();
+                  break;
+              case 'Tab':
+                  this._close();
+                  break;
+          }
+      }
+      _handleTriggerKeyDown(e) {
+          if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              if (!this._isOpen) {
+                  this._open();
+              }
+          }
+      }
+      _handleTriggerBlur() {
+          this._touched = true;
+          this._updateValidity();
+      }
+      _scrollToHighlighted() {
+          this.updateComplete.then(() => {
+              const container = this.shadowRoot?.querySelector('.options');
+              const highlighted = this.shadowRoot?.querySelector('.option--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' });
+                  }
+              }
+          });
+      }
+      _getOptionValue(option) {
+          if (typeof this.optionValue === 'function') {
+              return this.optionValue(option);
+          }
+          return option[this.optionValue];
+      }
+      _getOptionLabel(option) {
+          let label;
+          if (typeof this.optionLabel === 'function') {
+              label = this.optionLabel(option);
+          }
+          else {
+              label = option[this.optionLabel];
+          }
+          if (!label) {
+              return this._getOptionValue(option);
+          }
+          return label;
+      }
+      _resolveSelection() {
+          if (!this.fetchSelection) {
+              return;
+          }
+          const fetchedValue = this.value;
+          this.fetchSelection(this.value).then((option) => {
+              if (this.value !== fetchedValue) {
+                  return;
+              }
+              if (!option) {
+                  return;
+              }
+              this._selectedOption = option;
+              this.requestUpdate();
+          }).catch((error) => {
+              console.error('kr-combo-box: fetchSelection failed', error);
+          });
+      }
+      _selectOption(option) {
+          if (option.disabled) {
+              return;
+          }
+          this.value = this._getOptionValue(option);
+          this._selectedOption = option;
+          this._close();
+          this._internals.setFormValue(this.value);
+          this._updateValidity();
+          this.dispatchEvent(new CustomEvent('select', {
+              detail: { option: option },
+              bubbles: true,
+              composed: true,
+          }));
+          this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+          this._triggerElement?.focus();
+      }
+      _handleOptionMouseEnter(e, index) {
+          this._highlightedIndex = index;
+      }
+      _renderOption(option, index) {
+          const optionValue = this._getOptionValue(option);
+          return b `
+      <button
+        class=${e$1({
+            option: true,
+            'option--highlighted': index === this._highlightedIndex,
+            'option--selected': optionValue === this.value,
+        })}
+        type="button"
+        role="option"
+        aria-selected=${optionValue === this.value}
+        ?disabled=${option.disabled}
+        @click=${(e) => this._selectOption(option)}
+        @mouseenter=${(e) => this._handleOptionMouseEnter(e, index)}
+      >
+        ${this._getOptionLabel(option)}
+      </button>
+    `;
+      }
+      render() {
+          let footer = A;
+          if (this._touched && this.required && !this.value) {
+              footer = b `<div class="validation-message">Please select an option</div>`;
+          }
+          else if (this.hint) {
+              footer = b `<div class="hint">${this.hint}</div>`;
+          }
+          return b `
+      <div class="wrapper">
+        ${this.label
+            ? b `
+              <label>
+                ${this.label}
+                ${this.required ? b `<span class="required">*</span>` : A}
+              </label>
+            `
+            : A}
+
+        <button
+          class=${e$1({
+            trigger: true,
+            'trigger--open': this._isOpen,
+            'trigger--invalid': this._touched && this.required && !this.value,
+        })}
+          type="button"
+          ?disabled=${this.disabled}
+          aria-haspopup="listbox"
+          aria-expanded=${this._isOpen}
+          @click=${this._handleTriggerClick}
+          @keydown=${this._handleTriggerKeyDown}
+          @blur=${this._handleTriggerBlur}
+        >
+          <span class=${e$1({
+            trigger__value: true,
+            trigger__placeholder: !this._selectedOption,
+        })}>
+            ${this._selectedOption ? this._getOptionLabel(this._selectedOption) : this.placeholder}
+          </span>
+          <svg
+            class=${e$1({
+            trigger__icon: true,
+            'trigger__icon--open': this._isOpen,
+        })}
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"/>
+          </svg>
+        </button>
+
+        <div
+          role="listbox"
+          class=${e$1({
+            dropdown: true,
+            'dropdown--open': this._isOpen,
+        })}
+        >
+          <div class="search">
+            <div class="search__field">
+              <input
+                class="search__input"
+                type="text"
+                placeholder="Search..."
+                .value=${this._searchQuery}
+                @input=${this._handleSearchInput}
+                @keydown=${this._handleSearchKeyDown}
+              />
+              <svg class="search__icon" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
+              </svg>
+            </div>
+          </div>
+
+          <div class="options">
+            ${this._loading
+            ? b `<div class="empty">Loading...</div>`
+            : this.options.length === 0
+                ? b `<div class="empty">No options found</div>`
+                : this.options.map((option, index) => this._renderOption(option, index))}
+          </div>
+        </div>
+
+        ${footer}
+      </div>
+    `;
+      }
+  };
+  exports.KRComboBox.styles = i$5 `
+    :host {
+      display: block;
+      font-family: inherit;
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
     }
 
-    .status.is-error {
-      color: var(--kr-text-field-error-border-color, #ef4444);
+    label {
+      font-size: 14px;
+      font-weight: 500;
+      color: black;
     }
 
-    .spinner {
-      width: 16px;
-      height: 16px;
-      border: 2px solid var(--kr-text-field-border-color, #e5e7eb);
-      border-top-color: var(--kr-text-field-focus-border-color, #163052);
-      border-radius: 50%;
-      animation: spin 0.6s linear infinite;
+    .required {
+      color: var(--kr-text-field-required-color, #ef4444);
+      margin-left: 0.125rem;
     }
 
-    @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
+    /* Trigger button */
+    .trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      padding: 10px 12px;
+      font-family: inherit;
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--kr-text-field-color, #111827);
+      background-color: var(--kr-text-field-bg, #fff);
+      border: 1px solid var(--kr-text-field-border-color, #0000003d);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: border-color 0.2s, box-shadow 0.2s;
+      text-align: left;
     }
 
-    .empty {
-      padding: 16px;
-      text-align: center;
+    .trigger:hover:not(:disabled) {
+      border-color: #9ca3af;
+    }
+
+    .trigger:focus {
+      outline: none;
+      border-color: var(--kr-text-field-focus-border-color, #163052);
+      box-shadow: 0 0 0 3px var(--kr-text-field-focus-ring-color, rgba(22, 48, 82, 0.1));
+    }
+
+    .trigger:disabled {
+      background-color: var(--kr-text-field-disabled-bg, #f3f4f6);
+      color: var(--kr-text-field-disabled-color, #9ca3af);
+      cursor: not-allowed;
+    }
+
+    .trigger--open {
+      border-color: var(--kr-text-field-focus-border-color, #163052);
+      box-shadow: 0 0 0 3px var(--kr-text-field-focus-ring-color, rgba(22, 48, 82, 0.1));
+    }
+
+    .trigger--invalid {
+      border-color: var(--kr-text-field-error-border-color, #ef4444);
+    }
+
+    .trigger--invalid:focus {
+      box-shadow: 0 0 0 3px var(--kr-text-field-error-ring-color, rgba(239, 68, 68, 0.1));
+    }
+
+    .trigger__value {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .trigger__placeholder {
+      color: var(--kr-text-field-placeholder-color, #9ca3af);
+    }
+
+    .trigger__icon {
+      flex-shrink: 0;
+      margin-left: 0.5rem;
+      width: 20px;
+      height: 20px;
+      color: var(--kr-text-muted, #6b7280);
+      transition: transform 0.2s;
+    }
+
+    .trigger__icon--open {
+      transform: rotate(180deg);
+    }
+
+    /* Dropdown */
+    .dropdown {
+      position: fixed;
+      z-index: 10000;
+      background: white;
+      border: 1px solid #9ba7b6;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      box-sizing: border-box;
+      display: none;
+      overflow: hidden;
+    }
+
+    .dropdown--open {
+      display: flex;
+      flex-direction: column;
+    }
+
+    /* Search input inside dropdown */
+    .search {
+      padding: 12px 12px 2px 12px;
+      flex-shrink: 0;
+    }
+
+    .search__field {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      border: 1px solid var(--kr-text-field-border-color, #0000003d);
+      border-radius: 8px;
+      background-color: var(--kr-text-field-bg, #fff);
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .search__field:focus-within {
+      border-color: var(--kr-text-field-focus-border-color, #163052);
+      box-shadow: 0 0 0 3px var(--kr-text-field-focus-ring-color, rgba(22, 48, 82, 0.1));
+    }
+
+    .search__icon {
+      width: 20px;
+      height: 20px;
+      color: var(--kr-text-muted, #6b7280);
+      flex-shrink: 0;
+      margin-left: 8px;
+    }
+
+    .search__input {
+      flex: 1;
+      border: none;
+      outline: none;
+      font-size: 14px;
+      font-family: inherit;
+      color: var(--kr-text-field-color, #111827);
+      background: transparent;
+      padding: 0;
+    }
+
+    .search__input::placeholder {
+      color: var(--kr-text-field-placeholder-color, #9ca3af);
+    }
+
+    /* Options list */
+    .options {
+      overflow-y: auto;
+      padding: 4px 0;
+    }
+
+    .option {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 12px 18px;
+      background: none;
+      border: none;
       font-size: 14px;
+      line-height: 1.5;
+      font-family: inherit;
+      color: var(--kr-text, #000000);
+      text-align: left;
+      cursor: pointer;
+      transition: background 0.15s ease;
+    }
+
+    .option:hover:not(:disabled) {
+      background: var(--kr-select-option-hover-bg, #f3f4f6);
+    }
+
+    .option--highlighted {
+      background-color: var(--kr-select-option-hover-bg, #f3f4f6);
+    }
+
+    .option--selected {
+      color: var(--kr-text-field-focus-border-color, #163052);
+    }
+
+    .option:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .empty {
+      padding: 12px 18px;
+      text-align: left;
       color: var(--kr-text-muted, #6b7280);
+      font-size: 14px;
     }
 
     .hint {
-      font-size: 12px;
-      color: var(--kr-text-field-hint-color, #6b7280);
+      font-size: 0.75rem;
+      color: var(--kr-text-field-helper-color, #6b7280);
     }
 
     .validation-message {
-      font-size: 12px;
-      color: var(--kr-text-field-error-border-color, #ef4444);
-      margin-top: 2px;
+      font-size: 0.75rem;
+      color: var(--kr-text-field-error-color, #ef4444);
     }
   `;
-  exports.KRAutoSuggest.formAssociated = true;
+  exports.KRComboBox.formAssociated = true;
   __decorate([
       n$1({ type: String })
-  ], exports.KRAutoSuggest.prototype, "label", void 0);
+  ], exports.KRComboBox.prototype, "label", void 0);
   __decorate([
       n$1({ type: String })
-  ], exports.KRAutoSuggest.prototype, "name", void 0);
+  ], exports.KRComboBox.prototype, "name", void 0);
   __decorate([
       n$1({ type: String })
-  ], exports.KRAutoSuggest.prototype, "value", void 0);
+  ], exports.KRComboBox.prototype, "value", void 0);
   __decorate([
       n$1({ type: String })
-  ], exports.KRAutoSuggest.prototype, "placeholder", void 0);
+  ], exports.KRComboBox.prototype, "placeholder", void 0);
   __decorate([
       n$1({ type: Boolean })
-  ], exports.KRAutoSuggest.prototype, "disabled", void 0);
+  ], exports.KRComboBox.prototype, "disabled", void 0);
   __decorate([
       n$1({ type: Boolean })
-  ], exports.KRAutoSuggest.prototype, "readonly", void 0);
+  ], exports.KRComboBox.prototype, "readonly", void 0);
   __decorate([
       n$1({ type: Boolean })
-  ], exports.KRAutoSuggest.prototype, "required", void 0);
+  ], exports.KRComboBox.prototype, "required", void 0);
   __decorate([
       n$1({ type: String })
-  ], exports.KRAutoSuggest.prototype, "hint", void 0);
-  __decorate([
-      n$1({ type: Array })
-  ], exports.KRAutoSuggest.prototype, "options", void 0);
+  ], exports.KRComboBox.prototype, "hint", void 0);
   __decorate([
-      n$1({ type: String, attribute: 'status-type' })
-  ], exports.KRAutoSuggest.prototype, "statusType", void 0);
+      n$1({ attribute: 'option-value' })
+  ], exports.KRComboBox.prototype, "optionValue", void 0);
   __decorate([
-      n$1({ type: String, attribute: 'loading-text' })
-  ], exports.KRAutoSuggest.prototype, "loadingText", void 0);
+      n$1({ attribute: 'option-label' })
+  ], exports.KRComboBox.prototype, "optionLabel", void 0);
   __decorate([
-      n$1({ type: String, attribute: 'error-text' })
-  ], exports.KRAutoSuggest.prototype, "errorText", void 0);
+      n$1({ type: Array })
+  ], exports.KRComboBox.prototype, "options", void 0);
   __decorate([
-      n$1({ type: String, attribute: 'empty-text' })
-  ], exports.KRAutoSuggest.prototype, "emptyText", void 0);
+      n$1({ attribute: false })
+  ], exports.KRComboBox.prototype, "fetch", void 0);
   __decorate([
-      n$1({ type: String, attribute: 'filtering-type' })
-  ], exports.KRAutoSuggest.prototype, "filteringType", void 0);
+      n$1({ attribute: false })
+  ], exports.KRComboBox.prototype, "fetchSelection", void 0);
   __decorate([
-      n$1({ type: Boolean, attribute: 'highlight-matches' })
-  ], exports.KRAutoSuggest.prototype, "highlightMatches", void 0);
+      r$1()
+  ], exports.KRComboBox.prototype, "_isOpen", void 0);
   __decorate([
       r$1()
-  ], exports.KRAutoSuggest.prototype, "_isOpen", void 0);
+  ], exports.KRComboBox.prototype, "_highlightedIndex", void 0);
   __decorate([
       r$1()
-  ], exports.KRAutoSuggest.prototype, "_highlightedIndex", void 0);
+  ], exports.KRComboBox.prototype, "_touched", void 0);
   __decorate([
       r$1()
-  ], exports.KRAutoSuggest.prototype, "_touched", void 0);
+  ], exports.KRComboBox.prototype, "_searchQuery", void 0);
   __decorate([
       r$1()
-  ], exports.KRAutoSuggest.prototype, "_dirty", void 0);
+  ], exports.KRComboBox.prototype, "_loading", void 0);
   __decorate([
-      e$3('input')
-  ], exports.KRAutoSuggest.prototype, "_input", void 0);
-  exports.KRAutoSuggest = __decorate([
-      t$1('kr-auto-suggest')
-  ], exports.KRAutoSuggest);
+      e$3('.trigger')
+  ], exports.KRComboBox.prototype, "_triggerElement", void 0);
+  __decorate([
+      e$3('.search__input')
+  ], exports.KRComboBox.prototype, "_searchInput", void 0);
+  exports.KRComboBox = __decorate([
+      t$1('kr-combo-box')
+  ], exports.KRComboBox);
 
   exports.KRDialogRef = KRDialogRef;
   exports.KRQuery = KRQuery;