@kodaris/krubble-components 1.0.73 → 1.0.75

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$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$o = (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$n([
+  __decorate$o([
       n$1({ type: String })
   ], exports.KRAccordion.prototype, "header", void 0);
-  __decorate$n([
+  __decorate$o([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRAccordion.prototype, "expanded", void 0);
-  exports.KRAccordion = __decorate$n([
+  exports.KRAccordion = __decorate$o([
       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$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$n = (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$m([
+  __decorate$n([
       n$1({ type: String })
   ], exports.KRAlert.prototype, "type", void 0);
-  __decorate$m([
+  __decorate$n([
       n$1({ type: String })
   ], exports.KRAlert.prototype, "title", void 0);
-  __decorate$m([
+  __decorate$n([
       n$1({ type: Boolean })
   ], exports.KRAlert.prototype, "dismissible", void 0);
-  __decorate$m([
+  __decorate$n([
       n$1({ type: Boolean })
   ], exports.KRAlert.prototype, "visible", void 0);
-  exports.KRAlert = __decorate$m([
+  exports.KRAlert = __decorate$n([
       t$1('kr-alert')
   ], exports.KRAlert);
 
-  var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$m = (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;
@@ -571,16 +571,27 @@
                       dropdown.style.right = '';
                       dropdown.style.minWidth = hostRect.width + 'px';
                       dropdown.style.transformOrigin = 'top left';
+                      dropdown.style.maxHeight = '';
+                      dropdown.style.overflowY = '';
                       const dropdownRect = dropdown.getBoundingClientRect();
-                      // Open above if dropdown overflows viewport bottom
-                      if (dropdownRect.bottom > window.innerHeight) {
+                      // Open above only if the dropdown doesn't fit below and there's more room above than below
+                      // 8 = 4px gap between button and dropdown + 4px margin from viewport edge
+                      if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8 && hostRect.top > window.innerHeight - hostRect.bottom) {
                           dropdown.style.top = '';
                           dropdown.style.bottom = window.innerHeight - hostRect.top + 4 + 'px';
                           dropdown.style.transformOrigin = 'bottom left';
                           dropdown.classList.add('dropdown--above');
+                          if (dropdownRect.height > hostRect.top - 8) {
+                              dropdown.style.maxHeight = hostRect.top - 8 + 'px';
+                              dropdown.style.overflowY = 'auto';
+                          }
                       }
                       else {
                           dropdown.classList.remove('dropdown--above');
+                          if (dropdownRect.height > window.innerHeight - hostRect.bottom - 8) {
+                              dropdown.style.maxHeight = window.innerHeight - hostRect.bottom - 8 + 'px';
+                              dropdown.style.overflowY = 'auto';
+                          }
                       }
                       // Align right if dropdown overflows viewport right
                       if (dropdownRect.right > window.innerWidth) {
@@ -901,6 +912,7 @@
     .dropdown {
       position: fixed;
       min-width: 100%;
+      box-sizing: border-box;
       background: white;
       border: 1px solid #9ba7b6;
       border-radius: 8px;
@@ -1149,43 +1161,43 @@
       opacity: 0.6;
     }
   `;
-  __decorate$l([
+  __decorate$m([
       n$1({ type: String, reflect: true })
   ], exports.KRButton.prototype, "variant", void 0);
-  __decorate$l([
+  __decorate$m([
       n$1({ type: String, reflect: true })
   ], exports.KRButton.prototype, "color", void 0);
-  __decorate$l([
+  __decorate$m([
       n$1({ type: String, reflect: true })
   ], exports.KRButton.prototype, "size", void 0);
-  __decorate$l([
+  __decorate$m([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRButton.prototype, "disabled", void 0);
-  __decorate$l([
+  __decorate$m([
       n$1({ type: String })
   ], exports.KRButton.prototype, "href", void 0);
-  __decorate$l([
+  __decorate$m([
       n$1({ type: String })
   ], exports.KRButton.prototype, "target", void 0);
-  __decorate$l([
+  __decorate$m([
       n$1({ type: Array })
   ], exports.KRButton.prototype, "options", void 0);
-  __decorate$l([
+  __decorate$m([
       n$1({ type: String, reflect: true, attribute: 'icon-position' })
   ], exports.KRButton.prototype, "iconPosition", void 0);
-  __decorate$l([
+  __decorate$m([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRButton.prototype, "split", void 0);
-  __decorate$l([
+  __decorate$m([
       r$1()
   ], exports.KRButton.prototype, "_state", void 0);
-  __decorate$l([
+  __decorate$m([
       r$1()
   ], exports.KRButton.prototype, "_stateText", void 0);
-  __decorate$l([
+  __decorate$m([
       r$1()
   ], exports.KRButton.prototype, "_dropdownOpened", void 0);
-  exports.KRButton = __decorate$l([
+  exports.KRButton = __decorate$m([
       t$1('kr-button')
   ], exports.KRButton);
 
@@ -1195,7 +1207,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$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var __decorate$l = (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;
@@ -1429,26 +1441,26 @@
     .hljs-property { color: #005cc5; }
 
   `];
-  __decorate$k([
+  __decorate$l([
       n$1({ type: String })
   ], exports.KRCodeDemo.prototype, "language", void 0);
-  __decorate$k([
+  __decorate$l([
       r$1()
   ], exports.KRCodeDemo.prototype, "code", void 0);
-  __decorate$k([
+  __decorate$l([
       r$1()
   ], exports.KRCodeDemo.prototype, "activeTab", void 0);
-  __decorate$k([
+  __decorate$l([
       r$1()
   ], exports.KRCodeDemo.prototype, "copied", void 0);
-  __decorate$k([
+  __decorate$l([
       r$1()
   ], exports.KRCodeDemo.prototype, "highlightedCode", void 0);
-  exports.KRCodeDemo = __decorate$k([
+  exports.KRCodeDemo = __decorate$l([
       t$1('kr-code-demo')
   ], exports.KRCodeDemo);
 
-  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;
@@ -1617,10 +1629,10 @@
       margin: 4px 0;
     }
   `;
-  __decorate$j([
+  __decorate$k([
       r$1()
   ], exports.KRContextMenu.prototype, "items", void 0);
-  exports.KRContextMenu = __decorate$j([
+  exports.KRContextMenu = __decorate$k([
       t$1('kr-context-menu')
   ], exports.KRContextMenu);
 
@@ -1630,7 +1642,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$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;
@@ -1657,7 +1669,7 @@
       font-weight: 600;
     }
   `;
-  KRDialogHeader = __decorate$i([
+  KRDialogHeader = __decorate$j([
       t$1('kr-dialog-header')
   ], KRDialogHeader);
   let KRDialogContent = class KRDialogContent extends i$2 {
@@ -1673,7 +1685,7 @@
       flex: 1 1 auto;
     }
   `;
-  KRDialogContent = __decorate$i([
+  KRDialogContent = __decorate$j([
       t$1('kr-dialog-content')
   ], KRDialogContent);
   let KRDialogFooter = class KRDialogFooter extends i$2 {
@@ -1693,7 +1705,7 @@
       justify-content: flex-end;
     }
   `;
-  KRDialogFooter = __decorate$i([
+  KRDialogFooter = __decorate$j([
       t$1('kr-dialog-footer')
   ], KRDialogFooter);
   /**
@@ -1909,23 +1921,23 @@
       flex-direction: column;
     }
   `;
-  __decorate$i([
+  __decorate$j([
       r$1()
   ], exports.KRDialog.prototype, "_contentElement", void 0);
-  __decorate$i([
+  __decorate$j([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRDialog.prototype, "opened", void 0);
-  __decorate$i([
+  __decorate$j([
       n$1({ type: String })
   ], exports.KRDialog.prototype, "label", void 0);
-  __decorate$i([
+  __decorate$j([
       n$1({ type: String })
   ], exports.KRDialog.prototype, "width", void 0);
-  exports.KRDialog = __decorate$i([
+  exports.KRDialog = __decorate$j([
       t$1('kr-dialog')
   ], exports.KRDialog);
 
-  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;
@@ -2445,47 +2457,47 @@
       border-top: 1px solid #e5e7eb;
     }
   `;
-  __decorate$h([
+  __decorate$i([
       n$1({ type: Object })
   ], exports.KRDateRangePicker.prototype, "value", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: Array })
   ], exports.KRDateRangePicker.prototype, "relativeOptions", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: Boolean })
   ], exports.KRDateRangePicker.prototype, "disabled", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: Boolean })
   ], exports.KRDateRangePicker.prototype, "invalid", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: String })
   ], exports.KRDateRangePicker.prototype, "placeholder", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: String })
   ], exports.KRDateRangePicker.prototype, "startDate", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: String })
   ], exports.KRDateRangePicker.prototype, "endDate", void 0);
-  __decorate$h([
+  __decorate$i([
       n$1({ type: String })
   ], exports.KRDateRangePicker.prototype, "mode", void 0);
-  __decorate$h([
+  __decorate$i([
       r$1()
   ], exports.KRDateRangePicker.prototype, "_isOpen", void 0);
-  __decorate$h([
+  __decorate$i([
       r$1()
   ], exports.KRDateRangePicker.prototype, "_activeTab", void 0);
-  __decorate$h([
+  __decorate$i([
       r$1()
   ], exports.KRDateRangePicker.prototype, "_tempStartDate", void 0);
-  __decorate$h([
+  __decorate$i([
       r$1()
   ], exports.KRDateRangePicker.prototype, "_tempEndDate", void 0);
-  exports.KRDateRangePicker = __decorate$h([
+  exports.KRDateRangePicker = __decorate$i([
       t$1('kr-date-range-picker')
   ], exports.KRDateRangePicker);
 
-  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;
@@ -2787,23 +2799,23 @@
   `;
   /** Track active snackbars for stacking */
   exports.KRSnackbar.activeSnackbars = [];
-  __decorate$g([
+  __decorate$h([
       n$1({ type: String })
   ], exports.KRSnackbar.prototype, "type", void 0);
-  __decorate$g([
+  __decorate$h([
       n$1({ type: String })
   ], exports.KRSnackbar.prototype, "title", void 0);
-  __decorate$g([
+  __decorate$h([
       n$1({ type: String })
   ], exports.KRSnackbar.prototype, "message", void 0);
-  __decorate$g([
+  __decorate$h([
       n$1({ type: Number })
   ], exports.KRSnackbar.prototype, "duration", void 0);
-  exports.KRSnackbar = KRSnackbar_1 = __decorate$g([
+  exports.KRSnackbar = KRSnackbar_1 = __decorate$h([
       t$1('kr-snackbar')
   ], exports.KRSnackbar);
 
-  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;
@@ -3106,20 +3118,20 @@
       }
     `,
   ];
-  __decorate$f([
+  __decorate$g([
       n$1({ type: String, attribute: 'active-tab-id' })
   ], exports.KRTabGroup.prototype, "activeTabId", void 0);
-  __decorate$f([
+  __decorate$g([
       n$1({ type: Boolean })
   ], exports.KRTabGroup.prototype, "justified", void 0);
-  __decorate$f([
+  __decorate$g([
       n$1({ type: String, reflect: true })
   ], exports.KRTabGroup.prototype, "size", void 0);
-  exports.KRTabGroup = __decorate$f([
+  exports.KRTabGroup = __decorate$g([
       t$1('kr-tab-group')
   ], exports.KRTabGroup);
 
-  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;
@@ -3200,35 +3212,35 @@
       }
     `,
   ];
-  __decorate$e([
+  __decorate$f([
       n$1({ type: String, reflect: true })
   ], exports.KRTab.prototype, "id", void 0);
-  __decorate$e([
+  __decorate$f([
       n$1({ type: String })
   ], exports.KRTab.prototype, "label", void 0);
-  __decorate$e([
+  __decorate$f([
       n$1({ type: String })
   ], exports.KRTab.prototype, "badge", void 0);
-  __decorate$e([
+  __decorate$f([
       n$1({ type: String, attribute: 'badge-background' })
   ], exports.KRTab.prototype, "badgeBackground", void 0);
-  __decorate$e([
+  __decorate$f([
       n$1({ type: String, attribute: 'badge-color' })
   ], exports.KRTab.prototype, "badgeColor", void 0);
-  __decorate$e([
+  __decorate$f([
       n$1({ type: Boolean })
   ], exports.KRTab.prototype, "disabled", void 0);
-  __decorate$e([
+  __decorate$f([
       n$1({ type: Boolean })
   ], exports.KRTab.prototype, "dismissible", void 0);
-  __decorate$e([
+  __decorate$f([
       n$1({ type: Boolean, reflect: true })
   ], exports.KRTab.prototype, "active", void 0);
-  exports.KRTab = __decorate$e([
+  exports.KRTab = __decorate$f([
       t$1('kr-tab')
   ], exports.KRTab);
 
-  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;
@@ -3700,47 +3712,47 @@
   `];
   // Enable form association
   exports.KRSelectField.formAssociated = true;
-  __decorate$d([
+  __decorate$e([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "label", void 0);
-  __decorate$d([
+  __decorate$e([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "name", void 0);
-  __decorate$d([
+  __decorate$e([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "value", void 0);
-  __decorate$d([
+  __decorate$e([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "placeholder", void 0);
-  __decorate$d([
+  __decorate$e([
       n$1({ type: Boolean })
   ], exports.KRSelectField.prototype, "disabled", void 0);
-  __decorate$d([
+  __decorate$e([
       n$1({ type: Boolean })
   ], exports.KRSelectField.prototype, "required", void 0);
-  __decorate$d([
+  __decorate$e([
       n$1({ type: Boolean })
   ], exports.KRSelectField.prototype, "readonly", void 0);
-  __decorate$d([
+  __decorate$e([
       n$1({ type: String })
   ], exports.KRSelectField.prototype, "hint", void 0);
-  __decorate$d([
+  __decorate$e([
       r$1()
   ], exports.KRSelectField.prototype, "_isOpen", void 0);
-  __decorate$d([
+  __decorate$e([
       r$1()
   ], exports.KRSelectField.prototype, "_highlightedIndex", void 0);
-  __decorate$d([
+  __decorate$e([
       r$1()
   ], exports.KRSelectField.prototype, "_touched", void 0);
-  __decorate$d([
+  __decorate$e([
       e$3('.select-trigger')
   ], exports.KRSelectField.prototype, "_triggerElement", void 0);
-  exports.KRSelectField = __decorate$d([
+  exports.KRSelectField = __decorate$e([
       t$1('kr-select-field')
   ], exports.KRSelectField);
 
-  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;
@@ -3777,13 +3789,13 @@
       display: none;
     }
   `;
-  __decorate$c([
+  __decorate$d([
       n$1({ type: String })
   ], exports.KRSelectOption.prototype, "value", void 0);
-  __decorate$c([
+  __decorate$d([
       n$1({ type: Boolean })
   ], exports.KRSelectOption.prototype, "disabled", void 0);
-  exports.KRSelectOption = __decorate$c([
+  exports.KRSelectOption = __decorate$d([
       t$1('kr-select-option')
   ], exports.KRSelectOption);
 
@@ -4831,7 +4843,7 @@
       }
   }
 
-  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;
@@ -7188,61 +7200,2466 @@
     }
 
   `];
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_data", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_dataState", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_page", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_pageSize", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_totalItems", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_totalPages", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_searchQuery", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_canScrollLeft", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_canScrollRight", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_canScrollHorizontal", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_columnPickerOpen", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_filterPanelOpened", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_filterPanelTab", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_buckets", void 0);
-  __decorate$b([
+  __decorate$c([
       r$1()
   ], exports.KRTable.prototype, "_sorts", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: Object })
   ], exports.KRTable.prototype, "def", void 0);
-  __decorate$b([
+  __decorate$c([
       n$1({ type: String, reflect: true })
   ], exports.KRTable.prototype, "variant", void 0);
-  exports.KRTable = __decorate$b([
+  exports.KRTable = __decorate$c([
       t$1('kr-table')
   ], exports.KRTable);
 
+  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;
+      return c > 3 && r && Object.defineProperty(target, key, r), r;
+  };
+  /** Internal grid model built from user-provided def. */
+  class KRGridModel {
+      constructor() {
+          this.title = '';
+          this.description = '';
+          this.actions = [];
+          this.columns = [];
+          this.displayedColumns = [];
+          this.data = null;
+          this.dataSource = null;
+          this.refreshInterval = 0;
+          this.pageSize = 0;
+          this.rowClickable = false;
+          this.rowHref = null;
+      }
+  }
+  exports.KRGrid = class KRGrid extends i$2 {
+      constructor() {
+          super(...arguments);
+          /**
+           * Internal flag to switch between scroll edge modes:
+           * - 'overlay': Fixed padding with overlay elements that hide content at edges (scrollbar at viewport edge)
+           * - 'edge': Padding scrolls with content, allowing table to reach edges when scrolling
+           */
+          this._scrollStyle = 'edge';
+          this._data = [];
+          this._dataState = 'idle';
+          this._page = 1;
+          this._pageSize = 50;
+          this._totalItems = 0;
+          this._totalPages = 0;
+          this._searchQuery = '';
+          this._canScrollLeft = false;
+          this._canScrollRight = false;
+          this._canScrollHorizontal = false;
+          this._columnPickerOpen = false;
+          this._filterPanelOpened = null;
+          this._filterPanelTab = 'filter';
+          this._buckets = new Map();
+          this._filterPanelPos = { top: 0, left: 0 };
+          this._sorts = [];
+          this._resizing = null;
+          this._resizeObserver = null;
+          this._searchPositionLocked = false;
+          this._columnWidthsLocked = false;
+          this._model = new KRGridModel();
+          this.def = { columns: [] };
+          /**
+           * Table layout variant.
+           * - 'default': Full-page table that fills parent height with centered search.
+           * - 'card': Embedded table that sizes itself to content, left-aligns search, and
+           *   reserves space for pageSize rows to prevent layout shift.
+           */
+          this.variant = 'default';
+          this._handleClickOutside = (e) => {
+              const path = e.composedPath();
+              if (this._columnPickerOpen) {
+                  const picker = this.shadowRoot?.querySelector('.column-picker-wrapper');
+                  if (picker && !path.includes(picker)) {
+                      this._columnPickerOpen = false;
+                  }
+              }
+              if (this._filterPanelOpened) {
+                  if (!path.some((el) => el.classList?.contains('filter-panel'))) {
+                      this._handleFilterApply();
+                  }
+              }
+          };
+          this._handleResizeMove = (e) => {
+              if (!this._resizing)
+                  return;
+              const col = this._model.columns.find(c => c.id === this._resizing.columnId);
+              if (col) {
+                  const newWidth = this._resizing.startWidth + (e.clientX - this._resizing.startX);
+                  col.width = `${Math.min(900, Math.max(50, newWidth))}px`;
+                  this.requestUpdate();
+              }
+          };
+          this._handleResizeEnd = () => {
+              this._resizing = null;
+              document.removeEventListener('mousemove', this._handleResizeMove);
+              document.removeEventListener('mouseup', this._handleResizeEnd);
+          };
+      }
+      connectedCallback() {
+          super.connectedCallback();
+          this.classList.toggle('kr-table--scroll-overlay', this._scrollStyle === 'overlay');
+          this.classList.toggle('kr-table--scroll-edge', this._scrollStyle === 'edge');
+          this._fetch();
+          this._initRefresh();
+          document.addEventListener('click', this._handleClickOutside);
+          this._resizeObserver = new ResizeObserver(() => {
+              // Unlock and recalculate on resize since layout changes
+              this._searchPositionLocked = false;
+              this._updateSearchPosition();
+          });
+          this._resizeObserver.observe(this);
+      }
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          clearInterval(this._refreshTimer);
+          document.removeEventListener('click', this._handleClickOutside);
+          this._resizeObserver?.disconnect();
+      }
+      willUpdate(changedProperties) {
+          if (changedProperties.has('def')) {
+              // Build internal model from user-provided def
+              this._columnWidthsLocked = false;
+              this._model = new KRGridModel();
+              if (this.def.title) {
+                  this._model.title = this.def.title;
+              }
+              if (this.def.description) {
+                  this._model.description = this.def.description;
+              }
+              if (this.def.actions) {
+                  this._model.actions = this.def.actions;
+              }
+              if (this.def.data) {
+                  this._model.data = this.def.data;
+              }
+              if (this.def.dataSource) {
+                  this._model.dataSource = this.def.dataSource;
+              }
+              if (typeof this.def.refreshInterval === 'number') {
+                  this._model.refreshInterval = this.def.refreshInterval;
+              }
+              if (typeof this.def.pageSize === 'number') {
+                  this._model.pageSize = this.def.pageSize;
+                  this._pageSize = this.def.pageSize;
+              }
+              if (this.def.rowClickable) {
+                  this._model.rowClickable = this.def.rowClickable;
+              }
+              if (this.def.rowHref) {
+                  this._model.rowHref = this.def.rowHref;
+              }
+              this._sorts = [];
+              this._model.columns = this.def.columns.map(col => {
+                  const column = {
+                      ...col,
+                      filter: null
+                  };
+                  if (!column.type) {
+                      column.type = 'string';
+                  }
+                  if (col.sort) {
+                      this._sorts.push({
+                          sortBy: col.id,
+                          sortDirection: col.sort
+                      });
+                  }
+                  if (column.type === 'actions') {
+                      column.label = col.label ?? '';
+                      column.sticky = 'right';
+                      column.resizable = false;
+                      return column;
+                  }
+                  if (col.filterable || col.facetable) {
+                      column.filter = new KRQuery();
+                      column.filter.field = col.id;
+                      column.filter.type = column.type;
+                      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 = [];
+                      }
+                      else if (column.filter.type === 'string') {
+                          column.filter.operator = 'contains';
+                      }
+                  }
+                  return column;
+              });
+              if (this.def.displayedColumns) {
+                  this._model.displayedColumns = this.def.displayedColumns;
+              }
+              else {
+                  this._model.displayedColumns = this._model.columns.map(c => c.id);
+              }
+              this._fetch();
+              this._initRefresh();
+          }
+      }
+      updated(changedProperties) {
+          this.classList.toggle('kr-table--card', this.variant === 'card');
+          this._updateScrollFlags();
+          this._syncSlottedContent();
+          this._lockColumnWidths();
+      }
+      /** Measures header cell widths and locks them to prevent column shift on subsequent data changes. */
+      _lockColumnWidths() {
+          if (this._columnWidthsLocked || this._data.length === 0)
+              return;
+          const headerCells = this.shadowRoot?.querySelectorAll('.header-row > .header-cell');
+          if (!headerCells)
+              return;
+          const cols = this.getDisplayedColumns();
+          headerCells.forEach((cell, i) => {
+              const cellWidth = cell.offsetWidth;
+              if (i < cols.length && !cols[i].width && cols[i].type !== 'actions' && cellWidth > 0) {
+                  cols[i].width = `${cellWidth}px`;
+                  this._columnWidthsLocked = true;
+              }
+          });
+      }
+      /** Syncs light DOM content for cells with custom render functions */
+      _syncSlottedContent() {
+          const columns = this.getDisplayedColumns().filter(col => col.render);
+          if (!columns.length)
+              return;
+          // Clear old slotted content
+          this.querySelectorAll('[slot^="cell-"]').forEach(el => el.remove());
+          // Create new slotted content
+          this._data.forEach((row, rowIndex) => {
+              columns.forEach(col => {
+                  const result = col.render(row);
+                  if (!result)
+                      return;
+                  const el = document.createElement('span');
+                  el.slot = `cell-${rowIndex}-${col.id}`;
+                  if (col.type === 'actions') {
+                      el.style.display = 'flex';
+                      el.style.gap = '8px';
+                  }
+                  if (typeof result === 'string') {
+                      el.innerHTML = result;
+                  }
+                  else {
+                      D(result, el);
+                  }
+                  this.appendChild(el);
+              });
+          });
+      }
+      // ----------------------------------------------------------------------------
+      // Public Interface
+      // ----------------------------------------------------------------------------
+      refresh() {
+          this._fetch();
+      }
+      goToPrevPage() {
+          if (this._page > 1) {
+              this._page--;
+              this._fetch();
+          }
+      }
+      goToNextPage() {
+          if (this._page < this._totalPages) {
+              this._page++;
+              this._fetch();
+          }
+      }
+      goToPage(page) {
+          if (page >= 1 && page <= this._totalPages) {
+              this._page = page;
+              this._fetch();
+          }
+      }
+      // ----------------------------------------------------------------------------
+      // Data Fetching
+      // ----------------------------------------------------------------------------
+      _toSolrData() {
+          const request = {
+              page: this._page - 1,
+              size: this._pageSize,
+              sorts: this._sorts,
+              filterFields: [],
+              queryFields: [],
+              facetFields: []
+          };
+          for (const col of this._model.columns) {
+              if (!col.filter || col.filter.isEmpty() || !col.filter.isValid()) {
+                  continue;
+              }
+              const filterData = col.filter.toSolrData();
+              if (col.facetable && (col.filter.operator === 'in' || col.filter.operator === 'n_in')) {
+                  filterData.tagged = true;
+              }
+              request.filterFields.push(filterData);
+          }
+          for (const col of this._model.columns) {
+              if (!col.facetable) {
+                  continue;
+              }
+              request.facetFields.push({
+                  name: col.id,
+                  type: 'FIELD',
+                  limit: 100,
+                  sort: 'count',
+                  minimumCount: 1
+              });
+          }
+          if (this._searchQuery?.trim().length) {
+              request.queryFields.push({
+                  name: '_text_',
+                  operation: 'IS',
+                  value: termify(this._searchQuery, false)
+              });
+          }
+          return request;
+      }
+      _toDbParams() {
+          const request = {
+              page: this._page - 1,
+              size: this._pageSize,
+              sorts: this._sorts,
+              filterFields: [],
+              queryFields: [],
+              facetFields: []
+          };
+          for (const col of this._model.columns) {
+              if (!col.filter || col.filter.isEmpty() || !col.filter.isValid()) {
+                  continue;
+              }
+              request.filterFields.push(col.filter.toDbParams());
+          }
+          if (this._searchQuery?.trim().length) {
+              this._model.columns.filter(col => col.searchable).forEach(col => {
+                  request.queryFields.push({
+                      name: col.id,
+                      operation: 'CONTAINS',
+                      value: this._searchQuery,
+                      and: false
+                  });
+              });
+          }
+          return request;
+      }
+      /**
+       * Fetches data from the API and updates the table.
+       * Shows a loading spinner while fetching, then displays rows on success
+       * or an error snackbar on failure.
+       * Request/response format depends on dataSource.mode (solr, opensearch, db).
+       */
+      _fetch() {
+          if (this._model.data) {
+              this._data = this._model.data;
+              this._totalItems = this._model.data.length;
+              this._totalPages = Math.ceil(this._model.data.length / this._pageSize);
+              this._dataState = 'success';
+              return;
+          }
+          if (!this._model.dataSource)
+              return;
+          this._dataState = 'loading';
+          let request;
+          if (this._model.dataSource.mode === 'db') {
+              request = this._toDbParams();
+          }
+          else {
+              request = this._toSolrData();
+          }
+          this._model.dataSource.fetch(request)
+              .then(response => {
+              // Parse response based on mode
+              switch (this._model.dataSource?.mode) {
+                  case 'opensearch': {
+                      throw Error('Opensearch not supported yet');
+                  }
+                  case 'db': {
+                      const res = response;
+                      this._data = res.data.content;
+                      this._totalItems = res.data.totalElements;
+                      this._totalPages = res.data.totalPages;
+                      this._pageSize = res.data.size;
+                      break;
+                  }
+                  default: { // solr
+                      const res = response;
+                      this._data = res.data.content;
+                      this._totalItems = res.data.totalElements;
+                      this._totalPages = res.data.totalPages;
+                      this._pageSize = res.data.size;
+                      this._parseFacetResults(res);
+                  }
+              }
+              this._dataState = 'success';
+              this._updateSearchPosition();
+          })
+              .catch(err => {
+              this._dataState = 'error';
+              exports.KRSnackbar.show({
+                  message: err instanceof Error ? err.message : 'Failed to load data',
+                  type: 'error'
+              });
+          });
+      }
+      _parseFacetResults(response) {
+          if (!response.data.facetFields) {
+              return;
+          }
+          for (const col of this._model.columns) {
+              if (!col.facetable) {
+                  continue;
+              }
+              const rawBuckets = response.data.facetFields[col.id];
+              if (!rawBuckets) {
+                  this._buckets.set(col.id, []);
+                  continue;
+              }
+              const buckets = [];
+              for (const raw of rawBuckets) {
+                  // Solr returns boolean facet values as strings — coerce to actual booleans
+                  // so they match the filter values stored by toggle().
+                  let val = raw.name;
+                  if (col.type === 'boolean' && typeof raw.name === 'string') {
+                      if (raw.name === 'true') {
+                          val = true;
+                      }
+                      else if (raw.name === 'false') {
+                          val = false;
+                      }
+                  }
+                  if (raw.name === null && raw.count > 0) {
+                      buckets.unshift({
+                          val: null,
+                          count: raw.count
+                      });
+                  }
+                  if (raw.name !== null) {
+                      buckets.push({
+                          val: val,
+                          count: raw.count
+                      });
+                  }
+              }
+              // Bucket sync: ensure selected values appear even with 0 results
+              if (col.filter && (col.filter.operator === 'in' || col.filter.operator === 'n_in') && Array.isArray(col.filter.value)) {
+                  for (const selectedVal of col.filter.value) {
+                      if (!buckets.some(b => b.val === selectedVal)) {
+                          buckets.push({
+                              val: selectedVal,
+                              count: 0
+                          });
+                      }
+                  }
+              }
+              this._buckets.set(col.id, buckets);
+          }
+          // Trigger re-render since Map mutation doesn't trigger Lit updates
+          this._buckets = new Map(this._buckets);
+      }
+      /**
+       * Sets up auto-refresh so the table automatically fetches fresh data
+       * at a regular interval (useful for dashboards, monitoring views).
+       * Configured via def.refreshInterval in milliseconds.
+       */
+      _initRefresh() {
+          clearInterval(this._refreshTimer);
+          if (this._model.refreshInterval && this._model.refreshInterval > 0) {
+              this._refreshTimer = window.setInterval(() => {
+                  this._fetch();
+              }, this._model.refreshInterval);
+          }
+      }
+      _handleSearch(e) {
+          const input = e.target;
+          this._searchQuery = input.value;
+          this._page = 1;
+          this._fetch();
+      }
+      _getGridTemplateColumns() {
+          const cols = this.getDisplayedColumns();
+          return cols.map((col) => {
+              // If column has explicit width, use it
+              if (col.width) {
+                  return col.width;
+              }
+              // Actions columns: fit content without minimum
+              if (col.type === 'actions') {
+                  return 'max-content';
+              }
+              // No width specified - use content-based sizing with minimum
+              return 'minmax(80px, auto)';
+          }).join(' ');
+      }
+      /**
+       * Updates search position to be centered with equal gaps from title and tools.
+       * On first call: resets to flex centering, measures position, then locks with fixed margin.
+       * Subsequent calls are ignored unless _searchPositionLocked is reset (e.g., on resize).
+       */
+      _updateSearchPosition() {
+          // Skip if already locked (prevents shifts on pagination changes)
+          if (this._searchPositionLocked)
+              return;
+          // In card mode, search is left-aligned via CSS — no position locking needed
+          if (this.variant === 'card')
+              return;
+          const search = this.shadowRoot?.querySelector('.search');
+          const searchField = search?.querySelector('.search-field');
+          if (!search || !searchField)
+              return;
+          // Reset to flex centering
+          search.style.justifyContent = 'center';
+          searchField.style.marginLeft = '';
+          requestAnimationFrame(() => {
+              const searchRect = search.getBoundingClientRect();
+              const fieldRect = searchField.getBoundingClientRect();
+              // Calculate how far from the left of search container the field currently is
+              const currentOffset = fieldRect.left - searchRect.left;
+              // Lock position: switch to flex-start and use fixed margin
+              search.style.justifyContent = 'flex-start';
+              searchField.style.marginLeft = `${currentOffset}px`;
+              // Mark as locked so pagination changes don't shift the search
+              this._searchPositionLocked = true;
+          });
+      }
+      // ----------------------------------------------------------------------------
+      // Columns
+      // ----------------------------------------------------------------------------
+      _toggleColumnPicker() {
+          this._columnPickerOpen = !this._columnPickerOpen;
+      }
+      _toggleColumn(columnId) {
+          if (this._model.displayedColumns.includes(columnId)) {
+              this._model.displayedColumns = this._model.displayedColumns.filter(id => id !== columnId);
+          }
+          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
+      _handleRowMouseDown() {
+          if (!this._model.rowClickable && !this._model.rowHref) {
+              return;
+          }
+          window.getSelection()?.removeAllRanges();
+      }
+      _handleRowClick(e, row, rowIndex) {
+          if (!this._model.rowClickable && !this._model.rowHref) {
+              return;
+          }
+          const selection = window.getSelection();
+          if (selection && selection.toString().length > 0) {
+              e.preventDefault();
+              return;
+          }
+          this.dispatchEvent(new CustomEvent('row-click', {
+              detail: { row, rowIndex },
+              bubbles: true,
+              composed: true
+          }));
+      }
+      // When a user toggles a column on via the column picker, it gets appended
+      // to _displayedColumns. By mapping over _displayedColumns (not def.columns),
+      // the new column appears at the right edge of the table instead of jumping
+      // back to its original position in the column definition.
+      // Actions columns are always moved to the end.
+      getDisplayedColumns() {
+          return this._model.displayedColumns
+              .map(id => this._model.columns.find(col => col.id === id))
+              .sort((a, b) => {
+              if (a.type === 'actions' && b.type !== 'actions')
+                  return 1;
+              if (a.type !== 'actions' && b.type === 'actions')
+                  return -1;
+              return 0;
+          });
+      }
+      // ----------------------------------------------------------------------------
+      // Scrolling
+      // ----------------------------------------------------------------------------
+      /**
+       * Scroll event handler that updates scroll flags in real-time as user scrolls.
+       * Updates shadow indicators to show if more content exists left/right.
+       */
+      _handleScroll(e) {
+          const container = e.target;
+          this._canScrollLeft = container.scrollLeft > 0;
+          this._canScrollRight = container.scrollLeft < container.scrollWidth - container.clientWidth - 1;
+      }
+      /**
+       * Updates scroll state flags for the table content container.
+       * - _canScrollLeft: true if scrolled right (can scroll back left)
+       * - _canScrollRight: true if more content exists to the right
+       * - _canScrollHorizontal: true if content is wider than container
+       * These flags control scroll shadow indicators and CSS classes.
+       */
+      _updateScrollFlags() {
+          const container = this.shadowRoot?.querySelector('.content');
+          if (container) {
+              this._canScrollLeft = container.scrollLeft > 0;
+              this._canScrollRight = container.scrollWidth > container.clientWidth && container.scrollLeft < container.scrollWidth - container.clientWidth - 1;
+              this._canScrollHorizontal = container.scrollWidth > container.clientWidth;
+          }
+          this.classList.toggle('kr-table--scroll-left-available', this._canScrollLeft);
+          this.classList.toggle('kr-table--scroll-right-available', this._canScrollRight);
+          this.classList.toggle('kr-table--scroll-horizontal-available', this._canScrollHorizontal);
+          this.classList.toggle('kr-table--sticky-left', this.getDisplayedColumns().some(c => c.sticky === 'left'));
+          this.classList.toggle('kr-table--sticky-right', this.getDisplayedColumns().some(c => c.sticky === 'right'));
+      }
+      // ----------------------------------------------------------------------------
+      // Column Resizing
+      // ----------------------------------------------------------------------------
+      _handleResizeStart(e, columnId) {
+          e.preventDefault();
+          const headerCell = this.shadowRoot?.querySelector(`.header-cell[data-column-id="${columnId}"]`);
+          this._resizing = {
+              columnId,
+              startX: e.clientX,
+              startWidth: headerCell?.offsetWidth || 200
+          };
+          document.addEventListener('mousemove', this._handleResizeMove);
+          document.addEventListener('mouseup', this._handleResizeEnd);
+      }
+      // ----------------------------------------------------------------------------
+      // Sorting
+      // ----------------------------------------------------------------------------
+      _handleSortClick(e, column) {
+          if (e.shiftKey) {
+              // Multi-sort: add or cycle existing
+              const existingIndex = this._sorts.findIndex(s => s.sortBy === column.id);
+              if (existingIndex === -1) {
+                  this._sorts.push({ sortBy: column.id, sortDirection: 'asc' });
+              }
+              else {
+                  const existing = this._sorts[existingIndex];
+                  if (existing.sortDirection === 'asc') {
+                      existing.sortDirection = 'desc';
+                  }
+                  else {
+                      // on third click, remove sorting for the column
+                      this._sorts.splice(existingIndex, 1);
+                  }
+              }
+              this.requestUpdate();
+          }
+          else {
+              // Single sort: replace all
+              let existing = null;
+              if (this._sorts.length === 1) {
+                  existing = this._sorts.find(s => s.sortBy === column.id);
+              }
+              if (!existing) {
+                  this._sorts = [{ sortBy: column.id, sortDirection: 'asc' }];
+              }
+              else if (existing.sortDirection === 'asc') {
+                  this._sorts = [{ sortBy: column.id, sortDirection: 'desc' }];
+              }
+              else {
+                  this._sorts = [];
+              }
+          }
+          this._page = 1;
+          this._fetch();
+      }
+      _renderSortIndicator(column) {
+          if (!column.sortable) {
+              return A;
+          }
+          const sortIndex = this._sorts.findIndex(s => s.sortBy === column.id);
+          if (sortIndex === -1) {
+              // Ghost arrow: visible only on hover via CSS
+              return b `
+        <span class="header-cell__sort" @click=${(e) => this._handleSortClick(e, column)}>
+          <svg class="header-cell__sort-arrow header-cell__sort-arrow--ghost" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
+          </svg>
+        </span>
+      `;
+          }
+          let arrowStyle = {};
+          if (this._sorts[sortIndex].sortDirection === 'desc') {
+              arrowStyle = { transform: 'rotate(180deg)' };
+          }
+          return b `
+      <span class="header-cell__sort" @click=${(e) => this._handleSortClick(e, column)}>
+        <svg class="header-cell__sort-arrow" viewBox="0 0 24 24" fill="currentColor" style=${o$1(arrowStyle)}>
+          <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
+        </svg>
+        ${this._sorts.length > 1 ? b `
+          <span class="header-cell__sort-priority">${sortIndex + 1}</span>
+        ` : A}
+      </span>
+    `;
+      }
+      // ----------------------------------------------------------------------------
+      // Header
+      // ----------------------------------------------------------------------------
+      _handleAction(action) {
+          if (action.href) {
+              return;
+          }
+          this.dispatchEvent(new CustomEvent('action', {
+              detail: { action: action.id },
+              bubbles: true,
+              composed: true
+          }));
+      }
+      // ----------------------------------------------------------------------------
+      // Filter Handlers
+      // ----------------------------------------------------------------------------
+      _handleKqlChange(e, column) {
+          const kql = e.target.value.trim();
+          if (!kql) {
+              column.filter.clear();
+              this.requestUpdate();
+          }
+          else {
+              column.filter.setKql(kql);
+              this.requestUpdate();
+              if (!column.filter.isValid()) {
+                  return;
+              }
+          }
+          this._page = 1;
+          this._fetch();
+      }
+      _handleFilterPanelToggle(e, column) {
+          e.stopPropagation();
+          if (this._filterPanelOpened === column.id) {
+              this._filterPanelOpened = null;
+          }
+          else {
+              const rect = e.currentTarget.getBoundingClientRect();
+              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';
+              }
+              else {
+                  this._filterPanelTab = 'filter';
+              }
+          }
+      }
+      _handleKqlClear(column) {
+          column.filter.clear();
+          this._page = 1;
+          this._fetch();
+      }
+      _handleFilterClear() {
+          const column = this._model.columns.find(c => c.id === this._filterPanelOpened);
+          if (column) {
+              column.filter.clear();
+              if (column.facetable && !column.filterable) {
+                  column.filter.operator = 'in';
+                  column.filter.value = [];
+              }
+          }
+          this._filterPanelOpened = null;
+          this._page = 1;
+          this._fetch();
+      }
+      _handleFilterTextKeydown(e, column) {
+          if (e.key === 'Enter') {
+              e.preventDefault();
+              this._handleFilterApply();
+          }
+      }
+      _handleOperatorChange(e, column) {
+          column.filter.setOperator(e.target.value);
+          this.requestUpdate();
+      }
+      _handleFilterStringChange(e, column) {
+          column.filter.setValue(e.target.value);
+          this.requestUpdate();
+      }
+      _handleFilterNumberChange(e, column) {
+          column.filter.setValue(Number(e.target.value));
+          this.requestUpdate();
+      }
+      _handleFilterDateChange(e, column) {
+          column.filter.setValue(new Date(e.target.value), 'day');
+          this.requestUpdate();
+      }
+      _handleFilterBooleanChange(e, column) {
+          column.filter.setValue(e.target.value === 'true');
+          this.requestUpdate();
+      }
+      _handleFilterDateStartChange(e, column) {
+          column.filter.setStart(new Date(e.target.value), 'day');
+          this.requestUpdate();
+      }
+      _handleFilterDateEndChange(e, column) {
+          column.filter.setEnd(new Date(e.target.value), 'day');
+          this.requestUpdate();
+      }
+      _handleFilterNumberStartChange(e, column) {
+          column.filter.setStart(Number(e.target.value));
+          this.requestUpdate();
+      }
+      _handleFilterNumberEndChange(e, column) {
+          column.filter.setEnd(Number(e.target.value));
+          this.requestUpdate();
+      }
+      _handleFilterListChange(e, column) {
+          const items = e.target.value.split(',').map((v) => v.trim()).filter((v) => v !== '');
+          if (column.type === 'number') {
+              column.filter.setValue(items.map((v) => Number(v)));
+          }
+          else {
+              column.filter.setValue(items);
+          }
+          this.requestUpdate();
+      }
+      _handleFilterApply() {
+          this._filterPanelOpened = null;
+          this._page = 1;
+          this._fetch();
+      }
+      _handleFilterPanelTabChange(e) {
+          this._filterPanelTab = e.detail.activeTabId;
+      }
+      _handleBucketToggle(e, column, bucket) {
+          column.filter.toggle(bucket.val);
+          this._page = 1;
+          this._fetch();
+      }
+      // ----------------------------------------------------------------------------
+      // Rendering
+      // ----------------------------------------------------------------------------
+      _renderCellContent(column, row, rowIndex) {
+          const value = row[column.id];
+          if (column.render) {
+              // Use slot to project content from light DOM so external styles apply
+              return b `<slot name="cell-${rowIndex}-${column.id}"></slot>`;
+          }
+          if (value === null || value === undefined) {
+              return '';
+          }
+          switch (column.type) {
+              case 'number':
+                  if (column.format === 'currency' && typeof value === 'number') {
+                      return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+                  }
+                  return String(value);
+              case 'date': {
+                  let date;
+                  if (value instanceof Date) {
+                      date = value;
+                  }
+                  else if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/.test(value)) {
+                      // MySQL datetime format (UTC): "2026-01-28 01:33:44:517"
+                      // Replace last colon before ms with dot, append Z for UTC
+                      const isoString = value.replace(/(\d{2}:\d{2}:\d{2}):(\d+)$/, '$1.$2').replace(' ', 'T') + 'Z';
+                      date = new Date(isoString);
+                  }
+                  else {
+                      date = new Date(value);
+                  }
+                  // Show date and time for datetime values in UTC
+                  return date.toLocaleString(undefined, {
+                      year: 'numeric', month: 'short', day: 'numeric',
+                      hour: 'numeric', minute: '2-digit',
+                      timeZone: 'UTC'
+                  });
+              }
+              case 'boolean':
+                  if (value === true)
+                      return 'Yes';
+                  if (value === false)
+                      return 'No';
+                  return '';
+              default:
+                  return String(value);
+          }
+      }
+      /**
+       * Returns CSS classes for a header cell based on column config.
+       */
+      _getHeaderCellClasses(column, index) {
+          return {
+              'header-cell': true,
+              'header-cell--sortable': !!column.sortable,
+              'header-cell--align-center': column.align === 'center',
+              'header-cell--align-right': column.align === 'right',
+              'header-cell--sticky-left': column.sticky === 'left',
+              'header-cell--sticky-left-last': column.sticky === 'left' &&
+                  !this.getDisplayedColumns().slice(index + 1).some(c => c.sticky === 'left'),
+              'header-cell--sticky-right': column.sticky === 'right',
+              'header-cell--sticky-right-first': column.sticky === 'right' &&
+                  !this.getDisplayedColumns().slice(0, index).some(c => c.sticky === 'right')
+          };
+      }
+      /**
+       * Returns CSS classes for a table cell based on column config:
+       * - Alignment (center, right)
+       * - Sticky positioning (left, right)
+       * - Border classes for the last left-sticky or first right-sticky column
+       */
+      _getCellClasses(column, index) {
+          return {
+              'cell': true,
+              'cell--actions': column.type === 'actions',
+              'cell--align-center': column.align === 'center',
+              'cell--align-right': column.align === 'right',
+              'cell--sticky-left': column.sticky === 'left',
+              'cell--sticky-left-last': column.sticky === 'left' &&
+                  !this.getDisplayedColumns().slice(index + 1).some(c => c.sticky === 'left'),
+              'cell--sticky-right': column.sticky === 'right',
+              'cell--sticky-right-first': column.sticky === 'right' &&
+                  !this.getDisplayedColumns().slice(0, index).some(c => c.sticky === 'right')
+          };
+      }
+      /**
+       * Returns inline styles for a table cell:
+       * - Width (from column config or default 150px)
+       * - Min-width (if specified)
+       * - Left/right offset for sticky columns (calculated from widths of preceding sticky columns)
+       */
+      _getCellStyle(column, index) {
+          const styles = {};
+          if (column.sticky === 'left') {
+              let leftOffset = 0;
+              for (let i = 0; i < index; i++) {
+                  const col = this.getDisplayedColumns()[i];
+                  if (col.sticky === 'left') {
+                      leftOffset += parseInt(col.width || '0', 10);
+                  }
+              }
+              styles.left = `${leftOffset}px`;
+          }
+          if (column.sticky === 'right') {
+              let rightOffset = 0;
+              for (let i = index + 1; i < this.getDisplayedColumns().length; i++) {
+                  const col = this.getDisplayedColumns()[i];
+                  if (col.sticky === 'right') {
+                      rightOffset += parseInt(col.width || '0', 10);
+                  }
+              }
+              styles.right = `${rightOffset}px`;
+          }
+          return styles;
+      }
+      /**
+       * Renders the pagination controls:
+       * - Previous page arrow (disabled on first page)
+       * - Range text showing "1-50 of 150" format
+       * - Next page arrow (disabled on last page)
+       *
+       * Hidden when there's no data or all data fits on one page.
+       */
+      _renderPagination() {
+          const start = (this._page - 1) * this._pageSize + 1;
+          const end = Math.min(this._page * this._pageSize, this._totalItems);
+          return b `
+      <div class="pagination">
+        <span
+          class="pagination-icon ${this._page === 1 ? 'pagination-icon--disabled' : ''}"
+          @click=${this.goToPrevPage}
+        >
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
+        </span>
+        <span class="pagination-info">${start}-${end} of ${this._totalItems}</span>
+        <span
+          class="pagination-icon ${this._page === this._totalPages ? 'pagination-icon--disabled' : ''}"
+          @click=${this.goToNextPage}
+        >
+          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+        </span>
+      </div>
+    `;
+      }
+      /** Renders the card title block (title + description) above the toolbar in card mode. */
+      _renderCardHeader() {
+          if (this.variant !== 'card')
+              return A;
+          if (!this._model.title && !this._model.description)
+              return A;
+          return b `
+      <div class="card-header">
+        ${this._model.title ? b `<h2 class="card-header__title">${this._model.title}</h2>` : A}
+        ${this._model.description ? b `<p class="card-header__description">${this._model.description}</p>` : A}
+      </div>
+    `;
+      }
+      /**
+       * Renders the header toolbar containing:
+       * - Title (left, default variant only)
+       * - Search bar with view selector dropdown (center, or left-aligned in card variant)
+       * - Tools (right): page navigation, refresh button, column visibility picker, actions dropdown
+       *
+       * Hidden when there's no title, no actions, and data fits on one page.
+       */
+      _renderHeader() {
+          if (!this._model.title && !this._model.actions?.length && this._totalPages <= 1) {
+              return A;
+          }
+          return b `
+      <div class="header">
+        ${this._model.title && this.variant !== 'card' ? b `<div class="title">${this._model.title}</div>` : A}
+        ${this._model.dataSource?.mode === 'db' && !this._model.columns.some(col => col.searchable) ? b `<div class="search"></div>` : b `
+          <div class="search">
+            <!-- TODO: Saved views dropdown
+            <div class="views">
+              <span>Default View</span>
+              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
+            </div>
+            -->
+            <div class="search-field">
+              <svg class="search-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
+              <input
+                type="text"
+                class="search-input"
+                placeholder="Search..."
+                .value=${this._searchQuery}
+                @input=${this._handleSearch}
+              />
+            </div>
+          </div>
+        `}
+        <div class="tools">
+          ${this._renderPagination()}
+          <span class="refresh" title="Refresh" @click=${() => this.refresh()}>
+            <svg viewBox="0 -960 960 960" fill="currentColor"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>
+          </span>
+          <div class="column-picker-wrapper">
+            <span class="header-icon" title="Columns" @click=${this._toggleColumnPicker}>
+              <svg viewBox="0 -960 960 960" fill="currentColor"><path d="M121-280v-400q0-33 23.5-56.5T201-760h559q33 0 56.5 23.5T840-680v400q0 33-23.5 56.5T760-200H201q-33 0-56.5-23.5T121-280Zm79 0h133v-400H200v400Zm213 0h133v-400H413v400Zm213 0h133v-400H626v400Z"/></svg>
+            </span>
+            <div class="column-picker ${this._columnPickerOpen ? 'open' : ''}">
+              ${[...this._model.columns].filter(col => col.type !== 'actions').sort((a, b) => (a.label ?? a.id).localeCompare(b.label ?? b.id)).map(col => b `
+                <div class="column-picker-item" @click=${() => this._toggleColumn(col.id)}>
+                  <div class="column-picker-checkbox ${this._model.displayedColumns.includes(col.id) ? 'checked' : ''}">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+                  </div>
+                  <span class="column-picker-label">${col.label ?? col.id}</span>
+                </div>
+              `)}
+            </div>
+          </div>
+          ${this._model.actions?.length === 1 ? b `
+            <kr-button
+              class="actions"
+              .href=${this._model.actions[0].href}
+              .target=${this._model.actions[0].target}
+              @click=${() => this._handleAction(this._model.actions[0])}
+            >
+              ${this._model.actions[0].label}
+            </kr-button>
+          ` : this._model.actions?.length ? b `
+            <kr-button
+              class="actions"
+              .options=${this._model.actions.map(a => ({ id: a.id, label: a.label }))}
+              @option-select=${(e) => this._handleAction({ id: e.detail.id, label: e.detail.label })}
+            >
+              Actions
+            </kr-button>
+          ` : A}
+        </div>
+      </div>
+    `;
+      }
+      /** Renders status message (loading, error, empty) */
+      _renderStatus() {
+          if (this._dataState === 'loading' && this._data.length === 0) {
+              return b `<div class="status">Loading...</div>`;
+          }
+          if (this._dataState === 'error' && this._data.length === 0) {
+              return b `<div class="status status--error">Error loading data</div>`;
+          }
+          if (this._data.length === 0) {
+              return b `<div class="status">No data available</div>`;
+          }
+          return A;
+      }
+      _renderFilterPanel() {
+          if (!this._filterPanelOpened) {
+              return A;
+          }
+          const column = this._model.columns.find(c => c.id === this._filterPanelOpened);
+          // Build filter content (operator + value input)
+          let valueInput = b ``;
+          if (column.filter.operator === 'empty' || column.filter.operator === 'n_empty') {
+              valueInput = b `
+        <input
+          type="text"
+          class="filter-panel__input"
+          disabled
+          .value=${column.filter.text}
+        />
+      `;
+          }
+          else if (column.filter.operator === 'between' && column.type === 'date') {
+              valueInput = b `
+        <input
+          type="date"
+          class="filter-panel__input"
+          .valueAsDate=${column.filter.value?.start ?? null}
+          @change=${(e) => this._handleFilterDateStartChange(e, column)}
+        />
+        <input
+          type="date"
+          class="filter-panel__input"
+          .valueAsDate=${column.filter.value?.end ?? null}
+          @change=${(e) => this._handleFilterDateEndChange(e, column)}
+        />
+      `;
+          }
+          else if (column.filter.operator === 'between' && column.type === 'number') {
+              valueInput = b `
+        <input
+          type="number"
+          class="filter-panel__input"
+          placeholder="Start"
+          .value=${column.filter.value?.start ?? ''}
+          @input=${(e) => this._handleFilterNumberStartChange(e, column)}
+          @keydown=${(e) => this._handleFilterTextKeydown(e, column)}
+        />
+        <input
+          type="number"
+          class="filter-panel__input"
+          placeholder="End"
+          .value=${column.filter.value?.end ?? ''}
+          @input=${(e) => this._handleFilterNumberEndChange(e, column)}
+          @keydown=${(e) => this._handleFilterTextKeydown(e, column)}
+        />
+      `;
+          }
+          else if (column.filter.operator === 'in' || column.filter.operator === 'n_in') {
+              valueInput = b `
+        <textarea
+          class="filter-panel__textarea"
+          rows="3"
+          placeholder="Values (comma-separated)"
+          .value=${column.filter.text}
+          @input=${(e) => this._handleFilterListChange(e, column)}
+          @keydown=${(e) => this._handleFilterTextKeydown(e, column)}
+        ></textarea>
+      `;
+          }
+          else if (column.type === 'boolean') {
+              valueInput = b `
+        <kr-select-field
+          placeholder="Value"
+          .value=${String(column.filter.value ?? '')}
+          @change=${(e) => this._handleFilterBooleanChange(e, column)}
+        >
+          <kr-select-option value="true">Yes</kr-select-option>
+          <kr-select-option value="false">No</kr-select-option>
+        </kr-select-field>
+      `;
+          }
+          else if (column.type === 'date') {
+              valueInput = b `
+        <input
+          type="date"
+          class="filter-panel__input"
+          .valueAsDate=${column.filter.value}
+          @change=${(e) => this._handleFilterDateChange(e, column)}
+        />
+      `;
+          }
+          else if (column.type === 'number') {
+              valueInput = b `
+        <input
+          type="number"
+          class="filter-panel__input"
+          placeholder="Value"
+          min="0"
+          .value=${column.filter.text}
+          @input=${(e) => this._handleFilterNumberChange(e, column)}
+          @keydown=${(e) => this._handleFilterTextKeydown(e, column)}
+        />
+      `;
+          }
+          else {
+              valueInput = b `
+        <input
+          type="text"
+          class="filter-panel__input"
+          placeholder="Value"
+          .value=${column.filter.text}
+          @input=${(e) => this._handleFilterStringChange(e, column)}
+          @keydown=${(e) => this._handleFilterTextKeydown(e, column)}
+        />
+      `;
+          }
+          const filterContent = b `
+      <div class="filter-panel__content">
+        <kr-select-field
+          .value=${column.filter.operator}
+          @change=${(e) => this._handleOperatorChange(e, column)}
+        >
+          ${getOperatorsForType(column.type).map(op => b `
+            <kr-select-option value=${op.key}>${op.label}</kr-select-option>
+          `)}
+        </kr-select-field>
+        ${valueInput}
+      </div>
+    `;
+          // Build bucket list content
+          const buckets = this._buckets.get(column.id) || [];
+          let bucketContent;
+          if (!buckets.length) {
+              bucketContent = b `<div class="bucket-empty">No data</div>`;
+          }
+          else {
+              bucketContent = b `
+        <div class="buckets">
+          ${buckets.map(bucket => {
+                let bucketLabel = '(Empty)';
+                if (bucket.val !== null && bucket.val !== undefined) {
+                    if (column.type === 'boolean') {
+                        if (bucket.val === true || bucket.val === 'true') {
+                            bucketLabel = 'Yes';
+                        }
+                        else {
+                            bucketLabel = 'No';
+                        }
+                    }
+                    else {
+                        bucketLabel = String(bucket.val);
+                    }
+                }
+                // When using n_in, the user sees all buckets checked by default and unchecks
+                // the ones they want to hide. Under the hood, has() returns true for values
+                // in the exclusion list, so we invert the check state for n_in.
+                let checked = column.filter.has(bucket.val);
+                if (column.filter.operator === 'n_in') {
+                    checked = !checked;
+                }
+                let checkIcon = A;
+                if (checked) {
+                    checkIcon = b `
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
+                </svg>
+              `;
+                }
+                return b `
+              <div
+                class="bucket"
+                @click=${(e) => this._handleBucketToggle(e, column, bucket)}
+              >
+                <div class=${e$1({
+                    'bucket__checkbox': true,
+                    'bucket__checkbox--checked': checked
+                })}>
+                  ${checkIcon}
+                </div>
+                <span class="bucket__label">${bucketLabel}</span>
+                <span class="bucket__count">${bucket.count}</span>
+              </div>
+            `;
+            })}
+        </div>
+      `;
+          }
+          // Build panel body — tabs if both filterable+facetable, otherwise just the relevant content
+          let panelBody;
+          if (column.facetable && column.filterable) {
+              panelBody = b `
+        <kr-tab-group
+          size="small"
+          active-tab-id=${this._filterPanelTab}
+          @tab-change=${(e) => this._handleFilterPanelTabChange(e)}
+        >
+          <kr-tab id="filter" label="Filter">
+            ${filterContent}
+          </kr-tab>
+          <kr-tab id="counts" label="Counts">
+            ${bucketContent}
+          </kr-tab>
+        </kr-tab-group>
+      `;
+          }
+          else if (column.facetable) {
+              panelBody = bucketContent;
+          }
+          else {
+              panelBody = filterContent;
+          }
+          return b `
+      <div
+        class="filter-panel"
+        style=${o$1({
+            top: this._filterPanelPos.top + 'px',
+            left: this._filterPanelPos.left + 'px'
+        })}
+      >
+        ${panelBody}
+        <div class="filter-panel__actions">
+          <kr-button variant="outline" color="secondary" size="small" @click=${this._handleFilterClear}>
+            Clear
+          </kr-button>
+          <kr-button size="small" @click=${this._handleFilterApply}>
+            Apply
+          </kr-button>
+        </div>
+      </div>
+    `;
+      }
+      /**
+       * Renders filter row below column headers.
+       * Only displays for columns with filterable: true.
+       */
+      _renderFilterRow() {
+          const columns = this.getDisplayedColumns();
+          if (!columns.some(col => col.filterable || col.facetable)) {
+              return A;
+          }
+          return b `
+      <div class="filter-row">
+        ${columns.map((col, i) => {
+            if (!col.filterable && !col.facetable) {
+                return b `<div
+              class=${e$1({
+                    'filter-cell': true,
+                    'filter-cell--sticky-left': col.sticky === 'left',
+                    'filter-cell--sticky-right': col.sticky === 'right',
+                    'filter-cell--sticky-right-first': col.sticky === 'right' &&
+                        !columns.slice(0, i).some((c) => c.sticky === 'right')
+                })}
+              style=${o$1(this._getCellStyle(col, i))}
+            ></div>`;
+            }
+            return b `
+            <div
+              class=${e$1({
+                'filter-cell': true,
+                'filter-cell--sticky-left': col.sticky === 'left',
+                'filter-cell--sticky-right': col.sticky === 'right',
+                'filter-cell--sticky-right-first': col.sticky === 'right' &&
+                    !columns.slice(0, i).some((c) => c.sticky === 'right')
+            })}
+              style=${o$1(this._getCellStyle(col, i))}
+            >
+              <div class="filter-cell__wrapper">
+                  <input
+                    type="text"
+                    class=${e$1({
+                'filter-cell__input': true,
+                'filter-cell__input--invalid': !col.filter.isValid()
+            })}
+                    .value=${col.filter.kql}
+                    @change=${(e) => this._handleKqlChange(e, col)}
+                  />
+                  ${col.filter?.kql?.length > 0 ? b `
+                    <button
+                      class="filter-cell__clear"
+                      @click=${() => this._handleKqlClear(col)}
+                    >
+                      <svg viewBox="0 0 24 24" fill="currentColor">
+                        <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>
+                    </button>
+                  ` : A}
+                  <button
+                    class=${e$1({
+                'filter-cell__advanced': true,
+                'filter-cell__advanced--opened': this._filterPanelOpened === col.id
+            })}
+                    @click=${(e) => this._handleFilterPanelToggle(e, col)}
+                  >
+                    <svg viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
+                    </svg>
+                  </button>
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+      }
+      /** Renders the scrollable data grid with column headers and rows. */
+      _renderTable() {
+          return b `
+      <div class="wrapper">
+        <div class="overlay-left"></div>
+        <div class="overlay-right"></div>
+        ${this._renderStatus()}
+        <div class="content" @scroll=${this._handleScroll}>
+          <div class="table" style="grid-template-columns: ${this._getGridTemplateColumns()}">
+            <div class="header-row">
+              ${this.getDisplayedColumns().map((col, i) => b `
+                <div
+                  class=${e$1(this._getHeaderCellClasses(col, i))}
+                  style=${o$1(this._getCellStyle(col, i))}
+                  data-column-id=${col.id}
+                >
+                  <span class="header-cell__label">${col.label ?? col.id}</span>
+                  ${this._renderSortIndicator(col)}
+                  ${col.resizable !== false ? b `<div
+                      class="header-cell__resize"
+                      @mousedown=${(e) => this._handleResizeStart(e, col.id)}
+                    ></div>` : A}
+                </div>
+              `)}
+            </div>
+            ${this._renderFilterRow()}
+            ${this._data.map((row, rowIndex) => {
+            const cells = this.getDisplayedColumns().map((col, i) => b `
+                <div
+                  class=${e$1(this._getCellClasses(col, i))}
+                  style=${o$1(this._getCellStyle(col, i))}
+                  data-column-id=${col.id}
+                >
+                  ${this._renderCellContent(col, row, rowIndex)}
+                </div>
+              `);
+            if (this._model.rowHref) {
+                return b `
+                  <a
+                    href=${this._model.rowHref(row)}
+                    draggable="false"
+                    class=${e$1({ 'row': true, 'row--clickable': true, 'row--link': true })}
+                    @mousedown=${() => this._handleRowMouseDown()}
+                    @click=${(e) => this._handleRowClick(e, row, rowIndex)}
+                  >${cells}</a>
+                `;
+            }
+            return b `
+                <div
+                  class=${e$1({ 'row': true, 'row--clickable': !!this._model.rowClickable })}
+                  @mousedown=${() => this._handleRowMouseDown()}
+                  @click=${(e) => this._handleRowClick(e, row, rowIndex)}
+                >${cells}</div>
+              `;
+        })}
+          </div>
+        </div>
+      </div>
+    `;
+      }
+      /**
+       * Renders a data table with:
+       * - Header bar with title, search input with view selector, and tools (pagination, refresh, column visibility, actions dropdown)
+       * - Scrollable grid with sticky header row and optional sticky left/right columns
+       * - Loading, error message, or empty state when no data
+       */
+      render() {
+          if (!this._model.columns.length) {
+              return b `<slot></slot>`;
+          }
+          return b `
+      ${this._renderCardHeader()}
+      ${this._renderHeader()}
+      ${this._renderTable()}
+      ${this._renderFilterPanel()}
+    `;
+      }
+  };
+  exports.KRGrid.styles = [krBaseCSS, i$5 `
+    /* -------------------------------------------------------------------------
+     * Host
+     * ----------------------------------------------------------------------- */
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      container-type: inline-size;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Header
+     * ----------------------------------------------------------------------- */
+    .header {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin: 0 24px;
+      height: 64px;
+      border-bottom: 1px solid #e5e7eb;
+      background: #fff;
+    }
+
+    :host(.kr-table--scroll-edge) .header {
+      border-bottom: none;
+    }
+
+    .title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #000;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Content
+     * ----------------------------------------------------------------------- */
+    .wrapper {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .content {
+      height: 100%;
+      overflow: auto;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Search
+     * ----------------------------------------------------------------------- */
+    .search {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 0;
+    }
+
+    /* In card mode, align search left instead of center */
+    :host(.kr-table--card) .search {
+      justify-content: flex-start;
+    }
+
+    .search-field {
+      width: 100%;
+      max-width: 400px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      border: 1px solid #00000038;
+      border-radius: 18px;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .search-field:focus-within {
+      border-color: #163052;
+      box-shadow: 0 0 0 3px rgba(22, 48, 82, 0.1);
+    }
+
+    /* TODO: Uncomment when views dropdown is added
+    .search-field:focus-within .views {
+      border-color: #163052;
+    }
+    */
+
+    .search-icon {
+      position: absolute;
+      left: 16px;
+      width: 20px;
+      height: 20px;
+      color: #656871;
+      pointer-events: none;
+    }
+
+    .search-input {
+      height: 36px;
+      padding: 0 16px 0 42px;
+      border: none;
+      border-radius: 16px;
+      font-size: 14px;
+      font-weight: 400;
+      font-family: inherit;
+      color: #163052;
+      background: transparent;
+      outline: none;
+      flex: 1;
+      min-width: 0;
+      width: 100%;
+    }
+
+    .search-input::placeholder {
+      color: #656871;
+      font-weight: 400;
+    }
+
+    .search-input:focus {
+      outline: none;
+    }
+
+    @container (max-width: 800px) {
+      .search-field {
+        max-width: 250px;
+      }
+    }
+
+    .views {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      height: 36px;
+      padding: 0 16px;
+      border: 1px solid #00000038;
+      border-right: none;
+      border-radius: 16px 0 0 16px;
+      font-size: 14px;
+      font-family: inherit;
+      color: #163052;
+      background: transparent;
+      cursor: pointer;
+      white-space: nowrap;
+      transition: border-color 0.2s;
+    }
+
+    .views:hover {
+      background: #e8f0f8;
+    }
+
+    .views svg {
+      width: 16px;
+      height: 16px;
+      color: #163052;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Pagination
+     * ----------------------------------------------------------------------- */
+    .tools {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .pagination-info {
+      font-size: 13px;
+      color: var(--kr-primary);
+      white-space: nowrap;
+    }
+
+    .pagination-icon {
+      display: flex;
+      color: var(--kr-primary);
+      cursor: pointer;
+    }
+
+    .pagination-icon--disabled {
+      opacity: 0.3;
+      pointer-events: none;
+    }
+
+    .pagination-icon svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Header Icons
+     * ----------------------------------------------------------------------- */
+    .refresh,
+    .header-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--kr-primary);
+      background: #EBF1FA;
+      cursor: pointer;
+      padding: 6px;
+      border-radius: 50%;
+      transition: background 0.15s;
+    }
+
+    .refresh:hover,
+    .header-icon:hover {
+      background: #e8f0f8;
+    }
+
+    .refresh svg,
+    .header-icon svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Column Picker
+     * ----------------------------------------------------------------------- */
+    .column-picker-wrapper {
+      position: relative;
+    }
+
+    .column-picker {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      margin-top: 4px;
+      min-width: 200px;
+      max-height: calc(100vh - 120px);
+      overflow-y: auto;
+      background: white;
+      border: 1px solid #9ba7b6;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      padding: 8px 0;
+      z-index: 100;
+      display: none;
+      transform-origin: top;
+    }
+
+    .column-picker.open {
+      display: block;
+      animation: column-picker-fade-in 150ms ease-out;
+    }
+
+    @keyframes column-picker-fade-in {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .column-picker-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 16px;
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .column-picker-item:hover {
+      background: #f3f4f6;
+    }
+
+    .column-picker-checkbox {
+      width: 16px;
+      height: 16px;
+      border: 1.5px solid #9ca3af;
+      border-radius: 3px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: all 0.15s;
+    }
+
+    .column-picker-checkbox.checked {
+      background: var(--kr-primary);
+      border-color: var(--kr-primary);
+    }
+
+    .column-picker-checkbox svg {
+      width: 12px;
+      height: 12px;
+      color: white;
+      opacity: 0;
+    }
+
+    .column-picker-checkbox.checked svg {
+      opacity: 1;
+    }
+
+    .column-picker-label {
+      font-size: 14px;
+      color: #374151;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Table Structure
+     * ----------------------------------------------------------------------- */
+    .table {
+      display: grid;
+      width: max-content;
+      min-width: 100%;
+      font-size: 13px;
+    }
+
+    .row {
+      display: contents;
+    }
+
+    .row:hover .cell {
+      background: #f8f9fa;
+    }
+
+    .row--clickable {
+      cursor: pointer;
+    }
+
+    .row--link {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .header-row {
+      display: contents;
+    }
+
+    .cell {
+      padding: 8px 12px;
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      box-sizing: border-box;
+    }
+
+    .cell--actions {
+      gap: 8px;
+    }
+
+    .header-cell {
+      position: sticky;
+      top: 0;
+      padding: 10px 12px;
+      white-space: nowrap;
+      box-sizing: border-box;
+      background: #173153;
+      color: #fff;
+      font-weight: 600;
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      display: flex;
+      align-items: center;
+    }
+
+    .header-cell__resize {
+      position: absolute;
+      right: -7px;
+      top: 0;
+      bottom: 0;
+      width: 14px;
+      cursor: col-resize;
+      z-index: 10;
+    }
+
+    .header-cell--sortable {
+      user-select: none;
+    }
+
+    .header-cell__label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+      line-height: 20px;
+    }
+
+    .header-cell__sort {
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      height: 100%;
+      margin-left: 6px;
+      cursor: pointer;
+    }
+
+    .header-cell__sort-arrow {
+      width: 16px;
+      height: 16px;
+      color: #fff;
+      stroke: currentColor;
+      stroke-width: 1px;
+    }
+
+    .header-cell__sort-arrow--ghost {
+      opacity: 0;
+      color: rgba(255, 255, 255, 0.6);
+      transition: opacity 0.15s;
+    }
+
+    .header-cell--sortable:hover .header-cell__sort-arrow--ghost {
+      opacity: 0.4;
+    }
+
+    .header-cell__sort-priority {
+      font-size: 10px;
+      font-weight: 600;
+      color: #fff;
+      line-height: 1;
+    }
+
+    .cell {
+      background: #fff;
+      border-bottom: 1px solid rgb(238, 239, 241);
+      color: #1f2937;
+    }
+
+    .cell--align-center {
+      text-align: center;
+    }
+
+    .cell--align-right {
+      text-align: right;
+    }
+
+    .cell--sticky-left,
+    .cell--sticky-right {
+      position: sticky;
+      z-index: 1;
+    }
+
+    .header-cell--sticky-left,
+    .header-cell--sticky-right {
+      position: sticky;
+      z-index: 3;
+    }
+
+    .header-cell--align-center {
+      text-align: center;
+    }
+
+    .header-cell--align-right {
+      text-align: right;
+    }
+
+    .header-cell--sticky-left-last,
+    .cell--sticky-left-last {
+      border-right: 1px solid #d1d5db;
+    }
+
+    .header-cell--sticky-right-first,
+    .cell--sticky-right-first {
+      border-left: 1px solid #d1d5db;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Scroll Mode: Edge
+     * Padding scrolls with content, table can reach edges when scrolling
+     * ----------------------------------------------------------------------- */
+    /* Only add right padding when no horizontal scroll is needed */
+    :host(.kr-table--scroll-edge):not(.kr-table--scroll-horizontal-available) .table {
+      padding-right: 24px;
+    }
+
+    :host(.kr-table--scroll-edge) .header-row .header-cell:first-child,
+    :host(.kr-table--scroll-edge) .row .cell:first-child {
+      padding-left: 24px;
+    }
+
+    :host(.kr-table--scroll-edge) .header-row .header-cell:last-child,
+    :host(.kr-table--scroll-edge) .row .cell:last-child {
+      padding-right: 24px;
+    }
+
+    :host(.kr-table--scroll-edge) .filter-row .filter-cell:first-child .filter-cell__input {
+      padding-left: 24px;
+    }
+
+    :host(.kr-table--scroll-edge) .filter-row .filter-cell:last-child .filter-cell__input {
+      padding-right: 52px;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Scroll Mode: Overlay
+     * Fixed padding with overlay elements that hide content at edges
+     * ----------------------------------------------------------------------- */
+    :host(.kr-table--scroll-overlay) .content {
+      padding-left: 24px;
+    }
+
+    .overlay-left,
+    .overlay-right {
+      display: none;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 24px;
+      z-index: 5;
+      pointer-events: none;
+      transition: box-shadow 0.15s ease;
+    }
+
+    :host(.kr-table--scroll-overlay) .overlay-left,
+    :host(.kr-table--scroll-overlay) .overlay-right {
+      display: block;
+    }
+
+    .overlay-left {
+      left: 0;
+      background: #fff;
+    }
+
+    .overlay-right {
+      right: 0;
+      background: #fff;
+    }
+
+    :host(.kr-table--scroll-overlay.kr-table--scroll-left-available:not(.kr-table--sticky-left)) .overlay-left {
+      border-right: 1px solid #d1d5db54;
+    }
+
+    :host(.kr-table--scroll-overlay.kr-table--scroll-right-available:not(.kr-table--sticky-right)) .overlay-right {
+      border-left: 1px solid #d1d5db54;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Status (Loading, Error, Empty)
+     * ----------------------------------------------------------------------- */
+    .status {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 400;
+      color: #5f6368;
+      pointer-events: none;
+    }
+
+    .status--error {
+      color: #dc2626;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Filter Row
+     * ----------------------------------------------------------------------- */
+    .filter-row {
+      display: contents;
+    }
+
+    .filter-cell {
+      position: sticky;
+      top: 40px;
+      z-index: 2;
+      height: 36px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      background: #fff;
+      border-bottom: 1px solid #d1d5db;
+      border-right: 1px solid #e5e7ebba;
+      box-sizing: border-box;
+      box-shadow: inset 0 0 0 0 #163052;
+      transition: box-shadow 0.15s;
+    }
+
+    .filter-cell:focus-within {
+      box-shadow: inset 0 0 0 1px #163052;
+    }
+
+
+    .filter-cell--sticky-left,
+    .filter-cell--sticky-right {
+      position: sticky;
+      z-index: 3;
+    }
+
+    .filter-cell--sticky-right-first {
+      border-left: 1px solid #d1d5db;
+    }
+
+    .filter-cell__wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    .filter-cell__input {
+      width: 100%;
+      height: 100%;
+      padding: 0 60px 0 16px;
+      border: none;
+      border-radius: 0;
+      font-size: 14px;
+      font-family: inherit;
+      color: #111827;
+      background: transparent;
+      outline: none;
+    }
+
+    .filter-cell__input--invalid {
+      border-color: #dc2626;
+    }
+
+    .filter-cell__input--invalid:focus {
+      border-color: #dc2626;
+      box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
+    }
+
+    .filter-cell__input::placeholder {
+      color: #9ca3af;
+      font-size: 13px;
+    }
+
+    .filter-cell__clear {
+      position: absolute;
+      right: 36px;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      border: none;
+      border-radius: 4px;
+      background: transparent;
+      color: #6b7280;
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+    }
+
+    .filter-cell__clear:hover {
+      background: #e5e7eb;
+      color: #374151;
+    }
+
+    .filter-cell__clear svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .filter-cell__advanced {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      border: none;
+      border-radius: 4px;
+      background: transparent;
+      color: #163052;
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+    }
+
+    .filter-cell__advanced:hover {
+      background: #e5e7eb;
+    }
+
+    .filter-cell__advanced svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .filter-cell__advanced--opened {
+      background: #163052;
+      color: #fff;
+    }
+
+    .filter-cell__advanced--opened:hover {
+      background: #1a3a5f;
+      color: #fff;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Filter Panel (Advanced)
+     * ----------------------------------------------------------------------- */
+    .filter-panel {
+      position: fixed;
+      min-width: 320px;
+      background: white;
+      border: 1px solid #9ba7b6;
+      border-radius: 8px;
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+      z-index: 100;
+      animation: filter-panel-fade-in 150ms ease-out;
+    }
+
+    @keyframes filter-panel-fade-in {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .filter-panel__content {
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .filter-panel__actions {
+      padding: 12px 16px;
+      border-top: 1px solid #e5e7eb;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 12px;
+    }
+
+
+    .filter-panel__input {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      font-size: 14px;
+      font-family: inherit;
+      color: #111827;
+      background: #fff;
+      outline: none;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .filter-panel__input:focus {
+      border-color: #163052;
+      box-shadow: 0 0 0 2px rgba(22, 48, 82, 0.1);
+    }
+
+    .filter-panel__input::placeholder {
+      color: #9ca3af;
+    }
+
+    .filter-panel__textarea {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      font-size: 14px;
+      font-family: inherit;
+      color: #111827;
+      background: #fff;
+      outline: none;
+      resize: vertical;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .filter-panel__textarea:focus {
+      border-color: #163052;
+      box-shadow: 0 0 0 2px rgba(22, 48, 82, 0.1);
+    }
+
+    .filter-panel__textarea::placeholder {
+      color: #9ca3af;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Bucket List
+     * ----------------------------------------------------------------------- */
+    .buckets {
+      max-height: 280px;
+      overflow-y: auto;
+      padding: 8px 0;
+    }
+
+    .bucket {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      height: 32px;
+      padding: 0 16px;
+      cursor: pointer;
+      transition: background 0.1s;
+    }
+
+    .bucket:hover {
+      background: #f3f4f6;
+    }
+
+    .bucket__checkbox {
+      width: 16px;
+      height: 16px;
+      border: 1.5px solid #9ca3af;
+      border-radius: 3px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: all 0.15s;
+    }
+
+    .bucket__checkbox--checked {
+      background: var(--kr-primary, #163052);
+      border-color: var(--kr-primary, #163052);
+    }
+
+    .bucket__checkbox svg {
+      width: 12px;
+      height: 12px;
+      color: white;
+    }
+
+    .bucket__label {
+      flex: 1;
+      font-size: 14px;
+      color: #000;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .bucket__count {
+      font-size: 14px;
+      color: #000;
+      flex-shrink: 0;
+    }
+
+    .bucket-empty {
+      font-size: 14px;
+      color: #000;
+      padding: 16px;
+    }
+
+    /* Card variant — self-contained card with border, auto height, left-aligned search */
+    :host(.kr-table--card) {
+      height: auto;
+      /* overflow: visible; */
+      overflow: hidden;
+      /* border: 1px solid #e5e7eb; */
+      /* border-radius: 8px; */
+      border: 1px solid #c6c6cd;
+      border-radius: 12px;
+      background: #fff;
+    }
+
+    .card-header {
+      padding: 24px 24px 16px;
+    }
+
+    .card-header__title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #1f2937;
+      margin: 0;
+    }
+
+    .card-header__description {
+      font-size: 14px;
+      color: #1f2937;
+      margin: 12px 0 0;
+    }
+
+    :host(.kr-table--card) .header {
+      margin: 0 24px;
+    }
+
+    :host(.kr-table--card) .wrapper {
+      flex: none;
+      overflow: visible;
+      min-height: 200px;
+    }
+
+    :host(.kr-table--card) .content {
+      height: auto;
+    }
+
+  `];
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_data", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_dataState", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_page", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_pageSize", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_totalItems", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_totalPages", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_searchQuery", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_canScrollLeft", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_canScrollRight", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_canScrollHorizontal", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_columnPickerOpen", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_filterPanelOpened", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_filterPanelTab", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_buckets", void 0);
+  __decorate$b([
+      r$1()
+  ], exports.KRGrid.prototype, "_sorts", void 0);
+  __decorate$b([
+      n$1({ type: Object })
+  ], exports.KRGrid.prototype, "def", void 0);
+  __decorate$b([
+      n$1({ type: String, reflect: true })
+  ], exports.KRGrid.prototype, "variant", void 0);
+  exports.KRGrid = __decorate$b([
+      t$1('kr-grid')
+  ], exports.KRGrid);
+
   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);