@kodaris/krubble-components 1.0.39 → 1.0.41

package/dist/krubble-components.bundled.js

@@ -89,7 +89,7 @@ const e$4=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
  * 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$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;
@@ -196,13 +196,13 @@ KRAccordion.styles = i$5 `
       padding: 16px 16px 8px 16px;
     }
   `;
-__decorate$g([
+__decorate$h([
     n$1({ type: String })
 ], KRAccordion.prototype, "header", void 0);
-__decorate$g([
+__decorate$h([
     n$1({ type: Boolean, reflect: true })
 ], KRAccordion.prototype, "expanded", void 0);
-KRAccordion = __decorate$g([
+KRAccordion = __decorate$h([
     t$1('kr-accordion')
 ], KRAccordion);
 
@@ -219,7 +219,7 @@ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4},e$2=t=>(...e)=>({_$
  * 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$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;
@@ -417,23 +417,23 @@ KRAlert.styles = i$5 `
       outline-offset: 2px;
     }
   `;
-__decorate$f([
+__decorate$g([
     n$1({ type: String })
 ], KRAlert.prototype, "type", void 0);
-__decorate$f([
+__decorate$g([
     n$1({ type: String })
 ], KRAlert.prototype, "title", void 0);
-__decorate$f([
+__decorate$g([
     n$1({ type: Boolean })
 ], KRAlert.prototype, "dismissible", void 0);
-__decorate$f([
+__decorate$g([
     n$1({ type: Boolean })
 ], KRAlert.prototype, "visible", void 0);
-KRAlert = __decorate$f([
+KRAlert = __decorate$g([
     t$1('kr-alert')
 ], KRAlert);
 
-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;
@@ -892,40 +892,40 @@ KRButton.styles = i$5 `
       height: 22px;
     }
   `;
-__decorate$e([
+__decorate$f([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "variant", void 0);
-__decorate$e([
+__decorate$f([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "color", void 0);
-__decorate$e([
+__decorate$f([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "size", void 0);
-__decorate$e([
+__decorate$f([
     n$1({ type: Boolean, reflect: true })
 ], KRButton.prototype, "disabled", void 0);
-__decorate$e([
+__decorate$f([
     n$1({ type: String })
 ], KRButton.prototype, "href", void 0);
-__decorate$e([
+__decorate$f([
     n$1({ type: String })
 ], KRButton.prototype, "target", void 0);
-__decorate$e([
+__decorate$f([
     n$1({ type: Array })
 ], KRButton.prototype, "options", void 0);
-__decorate$e([
+__decorate$f([
     n$1({ type: String, reflect: true, attribute: 'icon-position' })
 ], KRButton.prototype, "iconPosition", void 0);
-__decorate$e([
+__decorate$f([
     r$1()
 ], KRButton.prototype, "_state", void 0);
-__decorate$e([
+__decorate$f([
     r$1()
 ], KRButton.prototype, "_stateText", void 0);
-__decorate$e([
+__decorate$f([
     r$1()
 ], KRButton.prototype, "_dropdownOpened", void 0);
-KRButton = __decorate$e([
+KRButton = __decorate$f([
     t$1('kr-button')
 ], KRButton);
 
@@ -935,7 +935,7 @@ KRButton = __decorate$e([
  * 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$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;
@@ -1169,26 +1169,26 @@ KRCodeDemo.styles = [krBaseCSS, i$5 `
     .hljs-property { color: #005cc5; }
 
   `];
-__decorate$d([
+__decorate$e([
     n$1({ type: String })
 ], KRCodeDemo.prototype, "language", void 0);
-__decorate$d([
+__decorate$e([
     r$1()
 ], KRCodeDemo.prototype, "code", void 0);
-__decorate$d([
+__decorate$e([
     r$1()
 ], KRCodeDemo.prototype, "activeTab", void 0);
-__decorate$d([
+__decorate$e([
     r$1()
 ], KRCodeDemo.prototype, "copied", void 0);
-__decorate$d([
+__decorate$e([
     r$1()
 ], KRCodeDemo.prototype, "highlightedCode", void 0);
-KRCodeDemo = __decorate$d([
+KRCodeDemo = __decorate$e([
     t$1('kr-code-demo')
 ], KRCodeDemo);
 
-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;
@@ -1357,10 +1357,10 @@ KRContextMenu.styles = i$5 `
       margin: 4px 0;
     }
   `;
-__decorate$c([
+__decorate$d([
     r$1()
 ], KRContextMenu.prototype, "items", void 0);
-KRContextMenu = __decorate$c([
+KRContextMenu = __decorate$d([
     t$1('kr-context-menu')
 ], KRContextMenu);
 
@@ -1370,7 +1370,7 @@ KRContextMenu = __decorate$c([
  * 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$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;
@@ -1397,7 +1397,7 @@ KRDialogHeader.styles = i$5 `
       font-weight: 600;
     }
   `;
-KRDialogHeader = __decorate$b([
+KRDialogHeader = __decorate$c([
     t$1('kr-dialog-header')
 ], KRDialogHeader);
 let KRDialogContent = class KRDialogContent extends i$2 {
@@ -1413,7 +1413,7 @@ KRDialogContent.styles = i$5 `
       flex: 1 1 auto;
     }
   `;
-KRDialogContent = __decorate$b([
+KRDialogContent = __decorate$c([
     t$1('kr-dialog-content')
 ], KRDialogContent);
 let KRDialogFooter = class KRDialogFooter extends i$2 {
@@ -1433,7 +1433,7 @@ KRDialogFooter.styles = i$5 `
       justify-content: flex-end;
     }
   `;
-KRDialogFooter = __decorate$b([
+KRDialogFooter = __decorate$c([
     t$1('kr-dialog-footer')
 ], KRDialogFooter);
 /**
@@ -1641,23 +1641,23 @@ KRDialog.styles = i$5 `
       font-weight: 600;
     }
   `;
-__decorate$b([
+__decorate$c([
     r$1()
 ], KRDialog.prototype, "_contentElement", void 0);
-__decorate$b([
+__decorate$c([
     n$1({ type: Boolean, reflect: true })
 ], KRDialog.prototype, "opened", void 0);
-__decorate$b([
+__decorate$c([
     n$1({ type: String })
 ], KRDialog.prototype, "label", void 0);
-__decorate$b([
+__decorate$c([
     n$1({ type: String })
 ], KRDialog.prototype, "width", void 0);
-KRDialog = __decorate$b([
+KRDialog = __decorate$c([
     t$1('kr-dialog')
 ], KRDialog);
 
-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;
@@ -1959,23 +1959,23 @@ KRSnackbar.styles = i$5 `
   `;
 /** Track active snackbars for stacking */
 KRSnackbar.activeSnackbars = [];
-__decorate$a([
+__decorate$b([
     n$1({ type: String })
 ], KRSnackbar.prototype, "type", void 0);
-__decorate$a([
+__decorate$b([
     n$1({ type: String })
 ], KRSnackbar.prototype, "title", void 0);
-__decorate$a([
+__decorate$b([
     n$1({ type: String })
 ], KRSnackbar.prototype, "message", void 0);
-__decorate$a([
+__decorate$b([
     n$1({ type: Number })
 ], KRSnackbar.prototype, "duration", void 0);
-KRSnackbar = KRSnackbar_1 = __decorate$a([
+KRSnackbar = KRSnackbar_1 = __decorate$b([
     t$1('kr-snackbar')
 ], KRSnackbar);
 
-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;
@@ -2278,20 +2278,20 @@ KRTabGroup.styles = [
       }
     `,
 ];
-__decorate$9([
+__decorate$a([
     n$1({ type: String, attribute: 'active-tab-id' })
 ], KRTabGroup.prototype, "activeTabId", void 0);
-__decorate$9([
+__decorate$a([
     n$1({ type: Boolean })
 ], KRTabGroup.prototype, "justified", void 0);
-__decorate$9([
+__decorate$a([
     n$1({ type: String, reflect: true })
 ], KRTabGroup.prototype, "size", void 0);
-KRTabGroup = __decorate$9([
+KRTabGroup = __decorate$a([
     t$1('kr-tab-group')
 ], KRTabGroup);
 
-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;
@@ -2365,35 +2365,35 @@ KRTab.styles = [
       }
     `,
 ];
-__decorate$8([
+__decorate$9([
     n$1({ type: String, reflect: true })
 ], KRTab.prototype, "id", void 0);
-__decorate$8([
+__decorate$9([
     n$1({ type: String })
 ], KRTab.prototype, "label", void 0);
-__decorate$8([
+__decorate$9([
     n$1({ type: String })
 ], KRTab.prototype, "badge", void 0);
-__decorate$8([
+__decorate$9([
     n$1({ type: String, attribute: 'badge-background' })
 ], KRTab.prototype, "badgeBackground", void 0);
-__decorate$8([
+__decorate$9([
     n$1({ type: String, attribute: 'badge-color' })
 ], KRTab.prototype, "badgeColor", void 0);
-__decorate$8([
+__decorate$9([
     n$1({ type: Boolean })
 ], KRTab.prototype, "disabled", void 0);
-__decorate$8([
+__decorate$9([
     n$1({ type: Boolean })
 ], KRTab.prototype, "dismissible", void 0);
-__decorate$8([
+__decorate$9([
     n$1({ type: Boolean, reflect: true })
 ], KRTab.prototype, "active", void 0);
-KRTab = __decorate$8([
+KRTab = __decorate$9([
     t$1('kr-tab')
 ], KRTab);
 
-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;
@@ -3595,50 +3595,50 @@ KRTable.styles = [krBaseCSS, i$5 `
       color: #dc2626;
     }
   `];
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRTable.prototype, "_data", void 0);
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRTable.prototype, "_dataState", void 0);
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRTable.prototype, "_page", void 0);
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRTable.prototype, "_pageSize", void 0);
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRTable.prototype, "_totalItems", void 0);
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRTable.prototype, "_totalPages", void 0);
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRTable.prototype, "_searchQuery", void 0);
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRTable.prototype, "_canScrollLeft", void 0);
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRTable.prototype, "_canScrollRight", void 0);
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRTable.prototype, "_canScrollHorizontal", void 0);
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRTable.prototype, "_columnPickerOpen", void 0);
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRTable.prototype, "_displayedColumns", void 0);
-__decorate$7([
+__decorate$8([
     n$1({ type: Object })
 ], KRTable.prototype, "def", void 0);
-KRTable = __decorate$7([
+KRTable = __decorate$8([
     t$1('kr-table')
 ], KRTable);
 
-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;
@@ -3758,17 +3758,17 @@ KRSpinner.styles = i$5 `
       stroke-linecap: round;
     }
   `;
-__decorate$6([
+__decorate$7([
     n$1({ type: String, reflect: true })
 ], KRSpinner.prototype, "size", void 0);
-__decorate$6([
+__decorate$7([
     n$1({ type: String, reflect: true })
 ], KRSpinner.prototype, "color", void 0);
-KRSpinner = __decorate$6([
+KRSpinner = __decorate$7([
     t$1('kr-spinner')
 ], KRSpinner);
 
-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;
@@ -3859,13 +3859,13 @@ KRProgressBar.styles = i$5 `
       }
     }
   `;
-__decorate$5([
+__decorate$6([
     n$1({ type: String, reflect: true })
 ], KRProgressBar.prototype, "color", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String, reflect: true })
 ], KRProgressBar.prototype, "trackColor", void 0);
-KRProgressBar = __decorate$5([
+KRProgressBar = __decorate$6([
     t$1('kr-progress-bar')
 ], KRProgressBar);
 
@@ -3887,7 +3887,7 @@ KRProgressBar = __decorate$5([
  * 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$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;
@@ -4140,59 +4140,59 @@ KRTextField.styles = i$5 `
   `;
 // Enable form association
 KRTextField.formAssociated = true;
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextField.prototype, "label", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextField.prototype, "name", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextField.prototype, "value", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextField.prototype, "placeholder", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextField.prototype, "type", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Boolean })
 ], KRTextField.prototype, "required", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Boolean })
 ], KRTextField.prototype, "disabled", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Boolean })
 ], KRTextField.prototype, "readonly", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Number })
 ], KRTextField.prototype, "minlength", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Number })
 ], KRTextField.prototype, "maxlength", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextField.prototype, "pattern", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextField.prototype, "autocomplete", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: String })
 ], KRTextField.prototype, "hint", void 0);
-__decorate$4([
+__decorate$5([
     e$3('input')
 ], KRTextField.prototype, "_input", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTextField.prototype, "_touched", void 0);
-__decorate$4([
+__decorate$5([
     r$1()
 ], KRTextField.prototype, "_dirty", void 0);
-KRTextField = __decorate$4([
+KRTextField = __decorate$5([
     t$1('kr-text-field')
 ], KRTextField);
 
-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;
@@ -4664,47 +4664,47 @@ KRSelectField.styles = [krBaseCSS, i$5 `
   `];
 // Enable form association
 KRSelectField.formAssociated = true;
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRSelectField.prototype, "label", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRSelectField.prototype, "name", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRSelectField.prototype, "value", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRSelectField.prototype, "placeholder", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: Boolean })
 ], KRSelectField.prototype, "disabled", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: Boolean })
 ], KRSelectField.prototype, "required", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: Boolean })
 ], KRSelectField.prototype, "readonly", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRSelectField.prototype, "hint", void 0);
-__decorate$3([
+__decorate$4([
     r$1()
 ], KRSelectField.prototype, "_isOpen", void 0);
-__decorate$3([
+__decorate$4([
     r$1()
 ], KRSelectField.prototype, "_highlightedIndex", void 0);
-__decorate$3([
+__decorate$4([
     r$1()
 ], KRSelectField.prototype, "_touched", void 0);
-__decorate$3([
+__decorate$4([
     e$3('.select-trigger')
 ], KRSelectField.prototype, "_triggerElement", void 0);
-KRSelectField = __decorate$3([
+KRSelectField = __decorate$4([
     t$1('kr-select-field')
 ], KRSelectField);
 
-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;
@@ -4741,17 +4741,17 @@ KRSelectOption.styles = i$5 `
       display: none;
     }
   `;
-__decorate$2([
+__decorate$3([
     n$1({ type: String })
 ], KRSelectOption.prototype, "value", void 0);
-__decorate$2([
+__decorate$3([
     n$1({ type: Boolean })
 ], KRSelectOption.prototype, "disabled", void 0);
-KRSelectOption = __decorate$2([
+KRSelectOption = __decorate$3([
     t$1('kr-select-option')
 ], KRSelectOption);
 
-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;
@@ -5009,59 +5009,59 @@ KRTextareaField.styles = i$5 `
   `;
 // Enable form association
 KRTextareaField.formAssociated = true;
-__decorate$1([
+__decorate$2([
     n$1({ type: String })
 ], KRTextareaField.prototype, "label", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: String })
 ], KRTextareaField.prototype, "name", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: String })
 ], KRTextareaField.prototype, "value", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: String })
 ], KRTextareaField.prototype, "placeholder", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: Boolean })
 ], KRTextareaField.prototype, "required", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: Boolean })
 ], KRTextareaField.prototype, "disabled", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: Boolean })
 ], KRTextareaField.prototype, "readonly", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: Number })
 ], KRTextareaField.prototype, "rows", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: Number })
 ], KRTextareaField.prototype, "cols", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: Number })
 ], KRTextareaField.prototype, "minlength", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: Number })
 ], KRTextareaField.prototype, "maxlength", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: String })
 ], KRTextareaField.prototype, "autocomplete", void 0);
-__decorate$1([
+__decorate$2([
     n$1({ type: String })
 ], KRTextareaField.prototype, "hint", void 0);
-__decorate$1([
+__decorate$2([
     e$3('textarea')
 ], KRTextareaField.prototype, "_textarea", void 0);
-__decorate$1([
+__decorate$2([
     r$1()
 ], KRTextareaField.prototype, "_touched", void 0);
-__decorate$1([
+__decorate$2([
     r$1()
 ], KRTextareaField.prototype, "_dirty", void 0);
-KRTextareaField = __decorate$1([
+KRTextareaField = __decorate$2([
     t$1('kr-textarea-field')
 ], KRTextareaField);
 
-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;
@@ -5118,15 +5118,788 @@ KRDetailField.styles = i$5 `
       color: black;
     }
   `;
-__decorate([
+__decorate$1([
     n$1({ type: String })
 ], KRDetailField.prototype, "label", void 0);
-__decorate([
+__decorate$1([
     n$1({ type: String })
 ], KRDetailField.prototype, "value", void 0);
-KRDetailField = __decorate([
+KRDetailField = __decorate$1([
     t$1('kr-detail-field')
 ], KRDetailField);
 
-export { KRAccordion, KRAlert, KRButton, KRCodeDemo, KRContextMenu, KRDialog, KRDialogRef, KRProgressBar, KRSelectField, KRSelectOption, KRSnackbar, KRSpinner, KRTab, KRTabGroup, KRTable, KRTextField, KRTextareaField, krBaseCSS };
+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;
+};
+function isGroup(option) {
+    return 'options' in option;
+}
+/**
+ * @element kr-auto-suggest
+ *
+ * @property {string} label - Label text for the input
+ * @property {string} name - Name for form submission
+ * @property {string} value - Current input value
+ * @property {string} placeholder - Placeholder text
+ * @property {boolean} disabled - Whether the input is disabled
+ * @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
+ *
+ * @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
+ */
+let KRAutoSuggest = class KRAutoSuggest extends i$2 {
+    constructor() {
+        super();
+        this.label = '';
+        this.name = '';
+        this.value = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.hint = '';
+        this.options = [];
+        this.statusType = 'finished';
+        this.loadingText = 'Loading...';
+        this.errorText = 'Error loading options';
+        this.emptyText = 'No matches found';
+        this.filteringType = 'auto';
+        this.highlightMatches = true;
+        this._isOpen = false;
+        this._highlightedIndex = -1;
+        this._touched = false;
+        this._dirty = false;
+        this._handleDocumentClick = this._onDocumentClick.bind(this);
+        this._internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this._handleDocumentClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this._handleDocumentClick);
+    }
+    firstUpdated() {
+        this._updateFormValue();
+    }
+    get form() {
+        return this._internals.form;
+    }
+    get validity() {
+        return this._internals.validity;
+    }
+    get validationMessage() {
+        return this._internals.validationMessage;
+    }
+    checkValidity() {
+        return this._internals.checkValidity();
+    }
+    reportValidity() {
+        return this._internals.reportValidity();
+    }
+    formResetCallback() {
+        this.value = '';
+        this._touched = false;
+        this._dirty = false;
+        this._isOpen = false;
+        this._highlightedIndex = -1;
+        this._updateFormValue();
+    }
+    formStateRestoreCallback(state) {
+        this.value = state;
+    }
+    get _filteredOptions() {
+        if (this.filteringType === 'manual' || !this.value) {
+            return this.options;
+        }
+        const searchValue = this.value.toLowerCase();
+        const filtered = [];
+        for (const option of this.options) {
+            if (isGroup(option)) {
+                const filteredGroupOptions = option.options.filter((opt) => {
+                    const label = (opt.label || opt.value).toLowerCase();
+                    const tags = opt.filteringTags?.join(' ').toLowerCase() || '';
+                    return label.includes(searchValue) || tags.includes(searchValue);
+                });
+                if (filteredGroupOptions.length > 0) {
+                    filtered.push({ ...option, options: filteredGroupOptions });
+                }
+            }
+            else {
+                const label = (option.label || option.value).toLowerCase();
+                const tags = option.filteringTags?.join(' ').toLowerCase() || '';
+                if (label.includes(searchValue) || tags.includes(searchValue)) {
+                    filtered.push(option);
+                }
+            }
+        }
+        return filtered;
+    }
+    get _flatOptions() {
+        const flat = [];
+        for (const option of this._filteredOptions) {
+            if (isGroup(option)) {
+                flat.push(...option.options);
+            }
+            else {
+                flat.push(option);
+            }
+        }
+        return flat;
+    }
+    _updateFormValue() {
+        this._internals.setFormValue(this.value);
+        // Validation
+        if (this.required && !this.value) {
+            this._internals.setValidity({ valueMissing: true }, 'This field is required', this._input);
+        }
+        else {
+            this._internals.setValidity({});
+        }
+    }
+    _onInput(e) {
+        const target = e.target;
+        this.value = target.value;
+        this._dirty = true;
+        this._isOpen = true;
+        this._highlightedIndex = -1;
+        this._updateFormValue();
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+        if (this.filteringType === 'manual') {
+            this.dispatchEvent(new CustomEvent('load-items', {
+                detail: { filteringText: this.value },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    _onFocus() {
+        this._isOpen = true;
+        if (this.filteringType === 'manual') {
+            this.dispatchEvent(new CustomEvent('load-items', {
+                detail: { filteringText: this.value },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    _onBlur() {
+        this._touched = true;
+        // Delay to allow click on option
+        setTimeout(() => {
+            this._isOpen = false;
+            this._highlightedIndex = -1;
+        }, 200);
+        this._updateFormValue();
+    }
+    _onKeyDown(e) {
+        const options = this._flatOptions;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this._isOpen = true;
+                this._highlightedIndex = Math.min(this._highlightedIndex + 1, options.length - 1);
+                this._scrollToHighlighted();
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this._highlightedIndex = Math.max(this._highlightedIndex - 1, -1);
+                this._scrollToHighlighted();
+                break;
+            case 'Enter':
+                if (this._highlightedIndex >= 0 && options[this._highlightedIndex]) {
+                    e.preventDefault();
+                    this._selectOption(options[this._highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                this._isOpen = false;
+                this._highlightedIndex = -1;
+                break;
+            case 'Tab':
+                this._isOpen = false;
+                this._highlightedIndex = -1;
+                break;
+        }
+    }
+    _scrollToHighlighted() {
+        this.updateComplete.then(() => {
+            const container = this.shadowRoot?.querySelector('.dropdown');
+            const highlighted = this.shadowRoot?.querySelector('.option.is-highlighted');
+            if (container && highlighted) {
+                const containerRect = container.getBoundingClientRect();
+                const highlightedRect = highlighted.getBoundingClientRect();
+                if (highlightedRect.bottom > containerRect.bottom) {
+                    highlighted.scrollIntoView({ block: 'nearest' });
+                }
+                else if (highlightedRect.top < containerRect.top) {
+                    highlighted.scrollIntoView({ block: 'nearest' });
+                }
+            }
+        });
+    }
+    _selectOption(option) {
+        if (option.disabled)
+            return;
+        this.value = option.label || option.value;
+        this._isOpen = false;
+        this._highlightedIndex = -1;
+        this._dirty = true;
+        this._updateFormValue();
+        this.dispatchEvent(new CustomEvent('select', {
+            detail: { value: option.value, selectedOption: option },
+            bubbles: true,
+            composed: true,
+        }));
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    _handleClear() {
+        this.value = '';
+        this._updateFormValue();
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value: '' },
+            bubbles: true,
+            composed: true,
+        }));
+        this._input?.focus();
+    }
+    _onDocumentClick(e) {
+        const path = e.composedPath();
+        if (!path.includes(this)) {
+            this._isOpen = false;
+        }
+    }
+    _highlightMatch(text) {
+        if (!this.value || this.filteringType === 'manual' || !this.highlightMatches) {
+            return b `${text}`;
+        }
+        const searchValue = this.value.toLowerCase();
+        const index = text.toLowerCase().indexOf(searchValue);
+        if (index === -1) {
+            return b `${text}`;
+        }
+        const before = text.slice(0, index);
+        const match = text.slice(index, index + this.value.length);
+        const after = text.slice(index + this.value.length);
+        return b `${before}<span class="highlight">${match}</span>${after}`;
+    }
+    _renderOption(option, index) {
+        const isHighlighted = index === this._highlightedIndex;
+        return b `
+      <button
+        class=${e$1({
+            option: true,
+            'is-highlighted': isHighlighted,
+        })}
+        type="button"
+        role="option"
+        aria-selected=${isHighlighted}
+        ?disabled=${option.disabled}
+        @click=${() => this._selectOption(option)}
+        @mouseenter=${() => {
+            this._highlightedIndex = index;
+        }}
+      >
+        <div class="option-content">
+          <div class="option-label">
+            ${this._highlightMatch(option.label || option.value)}
+            ${option.labelTag ? b `<span class="option-tag">${option.labelTag}</span>` : A}
+          </div>
+          ${option.description
+            ? b `<div class="option-description">${option.description}</div>`
+            : A}
+          ${option.tags && option.tags.length > 0
+            ? b `
+                <div class="option-tags">
+                  ${option.tags.map((tag) => b `<span class="option-tag">${tag}</span>`)}
+                </div>
+              `
+            : A}
+        </div>
+      </button>
+    `;
+    }
+    _renderDropdownContent() {
+        if (this.statusType === 'loading') {
+            return b `
+        <div class="status">
+          <div class="spinner"></div>
+          ${this.loadingText}
+        </div>
+      `;
+        }
+        if (this.statusType === 'error') {
+            return b `
+        <div class="status is-error">
+          <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+            <path
+              d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"
+            />
+          </svg>
+          ${this.errorText}
+        </div>
+      `;
+        }
+        const filtered = this._filteredOptions;
+        if (filtered.length === 0) {
+            return b `<div class="empty">${this.emptyText}</div>`;
+        }
+        let optionIndex = 0;
+        return b `
+      ${filtered.map((option) => {
+            if (isGroup(option)) {
+                const groupOptions = option.options.map((opt) => {
+                    const rendered = this._renderOption(opt, optionIndex);
+                    optionIndex++;
+                    return rendered;
+                });
+                return b `
+            <div class="group-label">${option.label}</div>
+            ${groupOptions}
+          `;
+            }
+            const rendered = this._renderOption(option, optionIndex);
+            optionIndex++;
+            return rendered;
+        })}
+    `;
+    }
+    render() {
+        const hasError = this._touched && !this.validity.valid;
+        return b `
+      <div class="field-wrapper">
+        ${this.label
+            ? b `
+              <label>
+                ${this.label}
+                ${this.required ? b `<span class="required">*</span>` : A}
+              </label>
+            `
+            : A}
+
+        <div class="input-container">
+          <div class="input-wrapper">
+            <input
+              type="text"
+              .value=${l(this.value)}
+              placeholder=${o(this.placeholder || undefined)}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readonly}
+              ?required=${this.required}
+              name=${o(this.name || undefined)}
+              autocomplete="off"
+              role="combobox"
+              aria-autocomplete="list"
+              aria-expanded=${this._isOpen}
+              aria-controls="dropdown"
+              class=${e$1({
+            'input--invalid': hasError,
+        })}
+              @input=${this._onInput}
+              @blur=${this._onBlur}
+              @focus=${this._onFocus}
+              @keydown=${this._onKeyDown}
+            />
+            <div class="icon-container">
+              ${this.value && !this.disabled && !this.readonly
+            ? b `
+                    <button
+                      class="clear-button"
+                      type="button"
+                      aria-label="Clear"
+                      @click=${this._handleClear}
+                    >
+                      <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                        <path
+                          d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
+                        />
+                      </svg>
+                    </button>
+                  `
+            : ''}
+              ${!this.value && !this.disabled && !this.readonly
+            ? b `
+                    <svg class="search-icon" fill="currentColor" viewBox="0 0 16 16">
+                      <path
+                        d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"
+                      />
+                    </svg>
+                  `
+            : ''}
+            </div>
+          </div>
+
+          <div
+            id="dropdown"
+            role="listbox"
+            class=${e$1({
+            dropdown: true,
+            'is-open': this._isOpen,
+        })}
+          >
+            ${this._renderDropdownContent()}
+          </div>
+        </div>
+
+        ${hasError
+            ? b `<div class="validation-message">${this.validationMessage}</div>`
+            : this.hint
+                ? b `<div class="hint">${this.hint}</div>`
+                : A}
+      </div>
+    `;
+    }
+};
+KRAutoSuggest.styles = i$5 `
+    :host {
+      display: block;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+        'Helvetica Neue', sans-serif;
+    }
+
+    .field-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    label {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--kr-text-field-label-color, #374151);
+      display: block;
+    }
+
+    .required {
+      color: var(--kr-text-field-required-color, #ef4444);
+      margin-left: 2px;
+    }
+
+    .input-container {
+      position: relative;
+    }
+
+    .input-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    input {
+      flex: 1;
+      width: 100%;
+      padding: 8px 32px 8px 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;
+    }
+
+    input: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));
+    }
+
+    input:disabled {
+      background: var(--kr-text-field-disabled-bg, #f3f4f6);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    input:read-only {
+      background: var(--kr-text-field-disabled-bg, #f3f4f6);
+      cursor: default;
+    }
+
+    input.input--invalid {
+      border-color: var(--kr-text-field-error-border-color, #ef4444);
+    }
+
+    input.input--invalid:focus {
+      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+    }
+
+    input::placeholder {
+      color: var(--kr-text-field-placeholder-color, #9ca3af);
+    }
+
+    .icon-container {
+      position: absolute;
+      right: 8px;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .clear-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      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;
+    }
+
+    .clear-button:hover {
+      background-color: var(--kr-select-option-hover-bg, #f3f4f6);
+      color: var(--kr-text, #000000);
+    }
+
+    .search-icon {
+      width: 16px;
+      height: 16px;
+      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;
+      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);
+      display: none;
+    }
+
+    .dropdown.is-open {
+      display: block;
+    }
+
+    /* Options */
+    .option {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      width: 100%;
+      padding: 8px 12px;
+      background: none;
+      border: none;
+      font-size: 14px;
+      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.is-highlighted {
+      background: var(--kr-select-option-highlight-bg, #e5e7eb);
+    }
+
+    .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;
+    }
+
+    /* 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);
+    }
+
+    /* Status */
+    .status {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 16px;
+      font-size: 14px;
+      color: var(--kr-text-muted, #6b7280);
+    }
+
+    .status.is-error {
+      color: var(--kr-text-field-error-border-color, #ef4444);
+    }
+
+    .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;
+    }
+
+    @keyframes spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .empty {
+      padding: 16px;
+      text-align: center;
+      font-size: 14px;
+      color: var(--kr-text-muted, #6b7280);
+    }
+
+    .hint {
+      font-size: 12px;
+      color: var(--kr-text-field-hint-color, #6b7280);
+    }
+
+    .validation-message {
+      font-size: 12px;
+      color: var(--kr-text-field-error-border-color, #ef4444);
+      margin-top: 2px;
+    }
+  `;
+KRAutoSuggest.formAssociated = true;
+__decorate([
+    n$1({ type: String })
+], KRAutoSuggest.prototype, "label", void 0);
+__decorate([
+    n$1({ type: String })
+], KRAutoSuggest.prototype, "name", void 0);
+__decorate([
+    n$1({ type: String })
+], KRAutoSuggest.prototype, "value", void 0);
+__decorate([
+    n$1({ type: String })
+], KRAutoSuggest.prototype, "placeholder", void 0);
+__decorate([
+    n$1({ type: Boolean })
+], KRAutoSuggest.prototype, "disabled", void 0);
+__decorate([
+    n$1({ type: Boolean })
+], KRAutoSuggest.prototype, "readonly", void 0);
+__decorate([
+    n$1({ type: Boolean })
+], KRAutoSuggest.prototype, "required", void 0);
+__decorate([
+    n$1({ type: String })
+], KRAutoSuggest.prototype, "hint", void 0);
+__decorate([
+    n$1({ type: Array })
+], KRAutoSuggest.prototype, "options", void 0);
+__decorate([
+    n$1({ type: String, attribute: 'status-type' })
+], KRAutoSuggest.prototype, "statusType", void 0);
+__decorate([
+    n$1({ type: String, attribute: 'loading-text' })
+], KRAutoSuggest.prototype, "loadingText", void 0);
+__decorate([
+    n$1({ type: String, attribute: 'error-text' })
+], KRAutoSuggest.prototype, "errorText", void 0);
+__decorate([
+    n$1({ type: String, attribute: 'empty-text' })
+], KRAutoSuggest.prototype, "emptyText", void 0);
+__decorate([
+    n$1({ type: String, attribute: 'filtering-type' })
+], KRAutoSuggest.prototype, "filteringType", void 0);
+__decorate([
+    n$1({ type: Boolean, attribute: 'highlight-matches' })
+], KRAutoSuggest.prototype, "highlightMatches", void 0);
+__decorate([
+    r$1()
+], KRAutoSuggest.prototype, "_isOpen", void 0);
+__decorate([
+    r$1()
+], KRAutoSuggest.prototype, "_highlightedIndex", void 0);
+__decorate([
+    r$1()
+], KRAutoSuggest.prototype, "_touched", void 0);
+__decorate([
+    r$1()
+], KRAutoSuggest.prototype, "_dirty", void 0);
+__decorate([
+    e$3('input')
+], KRAutoSuggest.prototype, "_input", void 0);
+KRAutoSuggest = __decorate([
+    t$1('kr-auto-suggest')
+], KRAutoSuggest);
+
+export { KRAccordion, KRAlert, KRAutoSuggest, KRButton, KRCodeDemo, KRContextMenu, KRDialog, KRDialogRef, KRProgressBar, KRSelectField, KRSelectOption, KRSnackbar, KRSpinner, KRTab, KRTabGroup, KRTable, KRTextField, KRTextareaField, krBaseCSS };
 //# sourceMappingURL=krubble-components.bundled.js.map