@kodaris/krubble-components 1.0.9 → 1.0.10

package/dist/krubble.bundled.js

@@ -89,7 +89,7 @@ const e$4=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"obj
  * SPDX-License-Identifier: BSD-3-Clause
  */function e$3(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$4(n,s,{get(){return o(this)}})}}
 
-var __decorate$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;
@@ -196,13 +196,13 @@ KRAccordion.styles = i$5 `
       padding: 16px 16px 8px 16px;
     }
   `;
-__decorate$b([
+__decorate$c([
     n$1({ type: String })
 ], KRAccordion.prototype, "header", void 0);
-__decorate$b([
+__decorate$c([
     n$1({ type: Boolean, reflect: true })
 ], KRAccordion.prototype, "expanded", void 0);
-KRAccordion = __decorate$b([
+KRAccordion = __decorate$c([
     t$1('kr-accordion')
 ], KRAccordion);
 
@@ -219,7 +219,7 @@ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4},e$2=t=>(...e)=>({_$
  * SPDX-License-Identifier: BSD-3-Clause
  */const e$1=e$2(class extends i$1{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -403,23 +403,23 @@ KRAlert.styles = i$5 `
       outline-offset: 2px;
     }
   `;
-__decorate$a([
+__decorate$b([
     n$1({ type: String })
 ], KRAlert.prototype, "type", void 0);
-__decorate$a([
+__decorate$b([
     n$1({ type: String })
 ], KRAlert.prototype, "header", void 0);
-__decorate$a([
+__decorate$b([
     n$1({ type: Boolean })
 ], KRAlert.prototype, "dismissible", void 0);
-__decorate$a([
+__decorate$b([
     n$1({ type: Boolean })
 ], KRAlert.prototype, "visible", void 0);
-KRAlert = __decorate$a([
+KRAlert = __decorate$b([
     t$1('kr-alert')
 ], KRAlert);
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -430,6 +430,7 @@ var __decorate$9 = (undefined && undefined.__decorate) || function (decorators,
  *
  * @slot - The button content
  * @fires click - Fired when the button is clicked
+ * @fires option-select - Fired when a dropdown option is selected
  */
 let KRButton = class KRButton extends i$2 {
     constructor() {
@@ -450,12 +451,36 @@ let KRButton = class KRButton extends i$2 {
          * Whether the button is disabled
          */
         this.disabled = false;
+        /**
+         * Dropdown options - when provided, button becomes a dropdown
+         */
+        this.options = [];
         this._state = 'idle';
         this._stateText = '';
+        this._dropdownOpen = false;
+        this._handleHostClick = (e) => {
+            if (this.options.length) {
+                e.stopPropagation();
+                this._toggleDropdown();
+            }
+        };
         this._handleKeydown = (e) => {
             if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
-                this.click();
+                if (this.options.length) {
+                    this._toggleDropdown();
+                }
+                else {
+                    this.click();
+                }
+            }
+            if (e.key === 'Escape' && this._dropdownOpen) {
+                this._dropdownOpen = false;
+            }
+        };
+        this._handleClickOutside = (e) => {
+            if (this._dropdownOpen && !this.contains(e.target)) {
+                this._dropdownOpen = false;
             }
         };
     }
@@ -464,10 +489,26 @@ let KRButton = class KRButton extends i$2 {
         this.setAttribute('role', 'button');
         this.setAttribute('tabindex', '0');
         this.addEventListener('keydown', this._handleKeydown);
+        this.addEventListener('click', this._handleHostClick);
+        document.addEventListener('click', this._handleClickOutside);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener('keydown', this._handleKeydown);
+        this.removeEventListener('click', this._handleHostClick);
+        document.removeEventListener('click', this._handleClickOutside);
+    }
+    _toggleDropdown() {
+        this._dropdownOpen = !this._dropdownOpen;
+    }
+    _handleOptionClick(option, e) {
+        e.stopPropagation();
+        this._dropdownOpen = false;
+        this.dispatchEvent(new CustomEvent('option-select', {
+            detail: { id: option.id, label: option.label },
+            bubbles: true,
+            composed: true
+        }));
     }
     /**
      * Shows a loading spinner and disables the button.
@@ -524,15 +565,27 @@ let KRButton = class KRButton extends i$2 {
         this.classList.toggle('kr-button--large', this.size === 'large');
     }
     render() {
+        const hasOptions = this.options.length > 0;
         return b `
       <slot></slot>
+      ${hasOptions ? b `<svg class="caret" xmlns="http://www.w3.org/2000/svg" height="20" width="20" 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>` : A}
       ${this._state !== 'idle'
             ? b `<span class="state-overlay">
             ${this._state === 'loading'
                 ? b `<span class="spinner"></span>`
                 : this._stateText}
           </span>`
-            : ''}
+            : A}
+      ${hasOptions ? b `
+        <div class="dropdown ${this._dropdownOpen ? 'open' : ''}">
+          ${this.options.map(option => b `
+            <button
+              class="dropdown-item"
+              @click=${(e) => this._handleOptionClick(option, e)}
+            >${option.label}</button>
+          `)}
+        </div>
+      ` : A}
     `;
     }
 };
@@ -681,26 +734,90 @@ KRButton.styles = i$5 `
       height: 16px;
       border-width: 3px;
     }
+
+    /* Dropdown */
+    .dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      margin-top: 4px;
+      min-width: 100%;
+      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;
+    }
+
+    .dropdown.open {
+      display: block;
+      animation: dropdown-fade-in 150ms ease-out;
+    }
+
+    @keyframes dropdown-fade-in {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .dropdown-item {
+      display: block;
+      width: 100%;
+      padding: 8px 16px;
+      text-align: left;
+      background: none;
+      border: none;
+      font-size: 14px;
+      color: #374151;
+      cursor: pointer;
+      font-family: inherit;
+      white-space: nowrap;
+    }
+
+    .dropdown-item:hover {
+      background: #f3f4f6;
+    }
+
+    /* Caret for dropdown button */
+    .caret {
+      margin-left: 4px;
+      margin-right: -6px;
+      display: flex;
+    }
   `;
-__decorate$9([
+__decorate$a([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "variant", void 0);
-__decorate$9([
+__decorate$a([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "color", void 0);
-__decorate$9([
+__decorate$a([
     n$1({ type: String, reflect: true })
 ], KRButton.prototype, "size", void 0);
-__decorate$9([
+__decorate$a([
     n$1({ type: Boolean, reflect: true })
 ], KRButton.prototype, "disabled", void 0);
-__decorate$9([
+__decorate$a([
+    n$1({ type: Array })
+], KRButton.prototype, "options", void 0);
+__decorate$a([
     r$1()
 ], KRButton.prototype, "_state", void 0);
-__decorate$9([
+__decorate$a([
     r$1()
 ], KRButton.prototype, "_stateText", void 0);
-KRButton = __decorate$9([
+__decorate$a([
+    r$1()
+], KRButton.prototype, "_dropdownOpen", void 0);
+KRButton = __decorate$a([
     t$1('kr-button')
 ], KRButton);
 
@@ -710,7 +827,7 @@ KRButton = __decorate$9([
  * 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$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -967,23 +1084,23 @@ KRCodeDemo.styles = i$5 `
       color: #fab387;
     }
   `;
-__decorate$8([
+__decorate$9([
     n$1({ type: String })
 ], KRCodeDemo.prototype, "language", void 0);
-__decorate$8([
+__decorate$9([
     n$1({ type: String })
 ], KRCodeDemo.prototype, "code", void 0);
-__decorate$8([
+__decorate$9([
     r$1()
 ], KRCodeDemo.prototype, "activeTab", void 0);
-__decorate$8([
+__decorate$9([
     r$1()
 ], KRCodeDemo.prototype, "copied", void 0);
-KRCodeDemo = __decorate$8([
+KRCodeDemo = __decorate$9([
     t$1('kr-code-demo')
 ], KRCodeDemo);
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1152,14 +1269,14 @@ KRContextMenu.styles = i$5 `
       margin: 4px 0;
     }
   `;
-__decorate$7([
+__decorate$8([
     r$1()
 ], KRContextMenu.prototype, "items", void 0);
-KRContextMenu = __decorate$7([
+KRContextMenu = __decorate$8([
     t$1('kr-context-menu')
 ], KRContextMenu);
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1291,14 +1408,14 @@ KRDialog.styles = i$5 `
       overflow: auto;
     }
   `;
-__decorate$6([
+__decorate$7([
     r$1()
 ], KRDialog.prototype, "contentElement", void 0);
-KRDialog = __decorate$6([
+KRDialog = __decorate$7([
     t$1('kr-dialog')
 ], KRDialog);
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1595,19 +1712,19 @@ KRSnackbar.styles = i$5 `
   `;
 /** Track active snackbars for stacking */
 KRSnackbar.activeSnackbars = [];
-__decorate$5([
+__decorate$6([
     n$1({ type: String })
 ], KRSnackbar.prototype, "type", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String })
 ], KRSnackbar.prototype, "title", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: String })
 ], KRSnackbar.prototype, "message", void 0);
-__decorate$5([
+__decorate$6([
     n$1({ type: Number })
 ], KRSnackbar.prototype, "duration", void 0);
-KRSnackbar = KRSnackbar_1 = __decorate$5([
+KRSnackbar = KRSnackbar_1 = __decorate$6([
     t$1('kr-snackbar')
 ], KRSnackbar);
 
@@ -1617,7 +1734,7 @@ KRSnackbar = KRSnackbar_1 = __decorate$5([
  * 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$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1792,7 +1909,9 @@ KRTabGroup.styles = [
       }
 
       .header {
+        height: 44px;
         display: flex;
+        flex-shrink: 0;
         align-items: stretch;
         border-bottom: 1px solid #e5e7eb;
         overflow-x: auto;
@@ -1917,20 +2036,20 @@ KRTabGroup.styles = [
       }
     `,
 ];
-__decorate$4([
+__decorate$5([
     n$1({ type: String, attribute: 'active-tab-id' })
 ], KRTabGroup.prototype, "activeTabId", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: Boolean })
 ], KRTabGroup.prototype, "justified", void 0);
-__decorate$4([
+__decorate$5([
     n$1({ type: String, reflect: true })
 ], KRTabGroup.prototype, "size", void 0);
-KRTabGroup = __decorate$4([
+KRTabGroup = __decorate$5([
     t$1('kr-tab-group')
 ], KRTabGroup);
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2001,34 +2120,1170 @@ KRTab.styles = [
       }
     `,
 ];
-__decorate$3([
+__decorate$4([
     n$1({ type: String, reflect: true })
 ], KRTab.prototype, "id", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRTab.prototype, "title", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String })
 ], KRTab.prototype, "badge", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String, attribute: 'badge-background' })
 ], KRTab.prototype, "badgeBackground", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: String, attribute: 'badge-color' })
 ], KRTab.prototype, "badgeColor", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: Boolean })
 ], KRTab.prototype, "disabled", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: Boolean })
 ], KRTab.prototype, "dismissible", void 0);
-__decorate$3([
+__decorate$4([
     n$1({ type: Boolean, reflect: true })
 ], KRTab.prototype, "active", void 0);
-KRTab = __decorate$3([
+KRTab = __decorate$4([
     t$1('kr-tab')
 ], KRTab);
 
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+// === Solr Utilities ===
+const SOLR_RESERVED_CHARS = [
+    '"', '+', '-', '&&', '||', '!', '(', ')', '{',
+    '}', '[', ']', '^', '~', '*', '?', ':'
+];
+const SOLR_RESERVED_CHARS_REPLACEMENT = [
+    '\\"', '\\+', '\\-', '\\&\\&', '\\|\\|', '\\!', '\\(', '\\)', '\\{',
+    '\\}', '\\[', '\\]', '\\^', '\\~', '\\*', '\\?', '\\:'
+];
+function escapeSolrQuery(query) {
+    let escaped = query;
+    for (let i = 0; i < SOLR_RESERVED_CHARS.length; i++) {
+        escaped = escaped.split(SOLR_RESERVED_CHARS[i]).join(SOLR_RESERVED_CHARS_REPLACEMENT[i]);
+    }
+    return escaped;
+}
+let KRTable = class KRTable 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._displayedColumns = [];
+        this._columnWidths = new Map();
+        this._resizing = null;
+        this._resizeObserver = null;
+        this._searchPositionLocked = false;
+        this.def = { columns: [] };
+        this._handleClickOutsideColumnPicker = (e) => {
+            if (!this._columnPickerOpen)
+                return;
+            const path = e.composedPath();
+            const picker = this.shadowRoot?.querySelector('.column-picker-wrapper');
+            if (picker && !path.includes(picker)) {
+                this._columnPickerOpen = false;
+            }
+        };
+        this._handleResizeMove = (e) => {
+            if (!this._resizing)
+                return;
+            this._columnWidths.set(this._resizing.columnId, Math.max(50, this._resizing.startWidth + (e.clientX - this._resizing.startX)));
+            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._handleClickOutsideColumnPicker);
+        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._handleClickOutsideColumnPicker);
+        this._resizeObserver?.disconnect();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('def')) {
+            this._displayedColumns = this.def.displayedColumns || this.def.columns.map(c => c.id);
+            this._fetch();
+            this._initRefresh();
+        }
+        this._updateScrollFlags();
+    }
+    // ----------------------------------------------------------------------------
+    // 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
+    // ----------------------------------------------------------------------------
+    /**
+     * 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.def.dataSource)
+            return;
+        this._dataState = 'loading';
+        // Build request based on mode
+        let request;
+        switch (this.def.dataSource.mode) {
+            case 'opensearch':
+                throw Error('Opensearch not supported yet');
+            case 'db':
+                throw Error('DB not supported yet');
+            default: // solr
+                request = {
+                    page: this._page - 1,
+                    size: this._pageSize,
+                    sorts: [],
+                    filterFields: [],
+                    queryFields: [],
+                    facetFields: []
+                };
+                if (this._searchQuery?.trim().length) {
+                    request.queryFields.push({
+                        name: '_text_',
+                        operation: 'IS',
+                        value: escapeSolrQuery(this._searchQuery)
+                    });
+                }
+        }
+        this.def.dataSource.fetch(request)
+            .then(response => {
+            // Parse response based on mode
+            switch (this.def.dataSource?.mode) {
+                case 'opensearch': {
+                    throw Error('Opensearch not supported yet');
+                }
+                case 'db': {
+                    throw Error('DB not supported yet');
+                }
+                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._dataState = 'success';
+            this._updateSearchPosition();
+        })
+            .catch(err => {
+            this._dataState = 'error';
+            KRSnackbar.show({
+                message: err instanceof Error ? err.message : 'Failed to load data',
+                type: 'error'
+            });
+        });
+    }
+    /**
+     * 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.def.refreshInterval && this.def.refreshInterval > 0) {
+            this._refreshTimer = window.setInterval(() => {
+                this._fetch();
+            }, this.def.refreshInterval);
+        }
+    }
+    _handleSearch(e) {
+        const input = e.target;
+        this._searchQuery = input.value;
+        this._page = 1;
+        this._fetch();
+    }
+    /**
+     * 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;
+        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._displayedColumns.includes(columnId)) {
+            this._displayedColumns = this._displayedColumns.filter(id => id !== columnId);
+        }
+        else {
+            this._displayedColumns = [...this._displayedColumns, columnId];
+        }
+    }
+    // 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.
+    getDisplayedColumns() {
+        return this._displayedColumns.map(id => this.def.columns.find(col => col.id === id));
+    }
+    // ----------------------------------------------------------------------------
+    // 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);
+    }
+    // ----------------------------------------------------------------------------
+    // Column Resizing
+    // ----------------------------------------------------------------------------
+    _handleResizeStart(e, columnId) {
+        e.preventDefault();
+        const column = this.def.columns.find(c => c.id === columnId);
+        this._resizing = {
+            columnId,
+            startX: e.clientX,
+            startWidth: this._columnWidths.get(columnId) || parseInt(column?.width || '150', 10)
+        };
+        document.addEventListener('mousemove', this._handleResizeMove);
+        document.addEventListener('mouseup', this._handleResizeEnd);
+    }
+    // ----------------------------------------------------------------------------
+    // Header
+    // ----------------------------------------------------------------------------
+    _handleAction(action) {
+        this.dispatchEvent(new CustomEvent('action', {
+            detail: { action: action.id },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    // ----------------------------------------------------------------------------
+    // Rendering
+    // ----------------------------------------------------------------------------
+    _renderCellContent(column, row) {
+        const value = row[column.id];
+        if (column.render) {
+            return column.render(row);
+        }
+        if (value === null || value === undefined) {
+            return '';
+        }
+        switch (column.type) {
+            case 'number':
+                return typeof value === 'number' ? value.toLocaleString() : String(value);
+            case 'currency':
+                return typeof value === 'number'
+                    ? value.toLocaleString('en-US', { style: 'currency', currency: 'USD' })
+                    : String(value);
+            case 'date':
+                return value instanceof Date
+                    ? value.toLocaleDateString()
+                    : new Date(value).toLocaleDateString();
+            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--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--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 = {};
+        const isLastColumn = index === this.getDisplayedColumns().length - 1;
+        const customWidth = this._columnWidths.get(column.id);
+        const width = customWidth ? `${customWidth}px` : (column.width || '150px');
+        if (isLastColumn && !customWidth) {
+            styles.flex = '1';
+            styles.minWidth = column.width || '150px';
+            styles.marginRight = '24px';
+        }
+        else {
+            styles.width = width;
+        }
+        if (column.minWidth)
+            styles.minWidth = column.minWidth;
+        if (column.sticky === 'left') {
+            let leftOffset = 0;
+            for (let i = 0; i < index; i++) {
+                if (this.getDisplayedColumns()[i].sticky === 'left') {
+                    leftOffset += parseInt(this.getDisplayedColumns()[i].width || '150', 10);
+                }
+            }
+            styles.left = `${leftOffset}px`;
+        }
+        if (column.sticky === 'right') {
+            let rightOffset = 0;
+            for (let i = index + 1; i < this.getDisplayedColumns().length; i++) {
+                if (this.getDisplayedColumns()[i].sticky === 'right') {
+                    rightOffset += parseInt(this.getDisplayedColumns()[i].width || '150', 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 header toolbar containing:
+     * - Title (left)
+     * - Search bar with view selector dropdown (center)
+     * - 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.def.title && !this.def.actions?.length && this._totalPages <= 1) {
+            return A;
+        }
+        return b `
+      <div class="header">
+        <div class="title">${this.def.title ?? ''}</div>
+        <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.def.columns].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._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.def.actions?.length ? b `
+            <kr-button
+              class="actions"
+              .options=${this.def.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;
+    }
+    /** 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">
+            <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))}
+                >
+                  <span class="header-cell__label">${col.label ?? col.id}</span>
+                  <div
+                    class="header-cell__resize"
+                    @mousedown=${(e) => this._handleResizeStart(e, col.id)}
+                  ></div>
+                </div>
+              `)}
+            </div>
+            ${this._data.map(row => b `
+              <div class="row">
+                ${this.getDisplayedColumns().map((col, i) => b `
+                  <div
+                    class=${e$1(this._getCellClasses(col, i))}
+                    style=${o$1(this._getCellStyle(col, i))}
+                  >
+                    ${this._renderCellContent(col, row)}
+                  </div>
+                `)}
+              </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.def.columns.length) {
+            return b `<slot></slot>`;
+        }
+        return b `
+      ${this._renderHeader()}
+      ${this._renderTable()}
+    `;
+    }
+};
+KRTable.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;
+      padding: 0 4px;
+      height: 64px;
+      border-bottom: 1px solid #e5e7eb;
+      background: #fff;
+    }
+
+    :host(.kr-table--scroll-edge) .header {
+      border-bottom: none;
+    }
+
+    .title {
+      font-size: 20px;
+      font-weight: 400;
+      color: #000;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Content
+     * ----------------------------------------------------------------------- */
+    .wrapper {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .content {
+      height: 100%;
+      overflow: auto;
+      padding-bottom: 24px;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Search
+     * ----------------------------------------------------------------------- */
+    .search {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 0;
+    }
+
+    .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: flex;
+      flex-direction: column;
+      width: 100%;
+      min-width: max-content;
+      font-size: 14px;
+    }
+    
+    .row {
+      display: flex;
+    }
+
+    .header-row {
+      display: flex;
+      position: sticky;
+      top: 0;
+      z-index: 2;
+    }
+
+    .row:hover .cell {
+      background: #f9fafb;
+    }
+
+    .cell {
+      padding: 12px 16px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-shrink: 0;
+      box-sizing: border-box;
+    }
+
+    .header-cell {
+      display: flex;
+      align-items: center;
+      padding: 12px 16px;
+      white-space: nowrap;
+      flex-shrink: 0;
+      box-sizing: border-box;
+      background: #f9fafb;
+      border-bottom: 2px solid #e5e7eb;
+      font-weight: 600;
+      color: #374151;
+      overflow: visible;
+    }
+
+    .header-cell__label {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .header-cell__resize {
+      width: 14px;
+      margin-right: -22px;
+      align-self: stretch;
+      cursor: col-resize;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1;
+    }
+
+    .header-cell__resize::after {
+      content: '';
+      width: 2px;
+      height: 20px;
+      background: #c6c6cd;
+    }
+
+    .header-cell:last-child .header-cell__resize::after {
+      display: none;
+    }
+
+    .cell {
+      background: #fff;
+      border-bottom: 1px solid #e5e7eb;
+      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
+     * ----------------------------------------------------------------------- */
+    :host(.kr-table--scroll-edge) .table {
+      padding-left: 24px;
+    }
+
+    /* 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 {
+      border-top: 1px solid #e5e7eb;
+    }
+
+    /* -------------------------------------------------------------------------
+     * Scroll Mode: Overlay
+     * Fixed padding with overlay elements that hide content at edges
+     * ----------------------------------------------------------------------- */
+    :host(.kr-table--scroll-overlay) .content {
+      padding-left: 24px;
+      padding-right: 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: linear-gradient(to right, #fff 50%, transparent);
+    }
+
+    .overlay-right {
+      right: 0;
+      background: linear-gradient(to left, #fff 50%, transparent);
+    }
+
+    :host(.kr-table--scroll-left-available) .overlay-left {
+      box-shadow: inset -6px 0 6px -6px rgba(0, 0, 0, 0.08);
+    }
+
+    :host(.kr-table--scroll-right-available) .overlay-right {
+      box-shadow: inset 6px 0 6px -6px rgba(0, 0, 0, 0.08);
+    }
+    
+    /* -------------------------------------------------------------------------
+     * 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;
+    }
+  `];
+__decorate$3([
+    r$1()
+], KRTable.prototype, "_data", void 0);
+__decorate$3([
+    r$1()
+], KRTable.prototype, "_dataState", void 0);
+__decorate$3([
+    r$1()
+], KRTable.prototype, "_page", void 0);
+__decorate$3([
+    r$1()
+], KRTable.prototype, "_pageSize", void 0);
+__decorate$3([
+    r$1()
+], KRTable.prototype, "_totalItems", void 0);
+__decorate$3([
+    r$1()
+], KRTable.prototype, "_totalPages", void 0);
+__decorate$3([
+    r$1()
+], KRTable.prototype, "_searchQuery", void 0);
+__decorate$3([
+    r$1()
+], KRTable.prototype, "_canScrollLeft", void 0);
+__decorate$3([
+    r$1()
+], KRTable.prototype, "_canScrollRight", void 0);
+__decorate$3([
+    r$1()
+], KRTable.prototype, "_canScrollHorizontal", void 0);
+__decorate$3([
+    r$1()
+], KRTable.prototype, "_columnPickerOpen", void 0);
+__decorate$3([
+    r$1()
+], KRTable.prototype, "_displayedColumns", void 0);
+__decorate$3([
+    r$1()
+], KRTable.prototype, "_columnWidths", void 0);
+__decorate$3([
+    n$1({ type: Object })
+], KRTable.prototype, "def", void 0);
+KRTable = __decorate$3([
+    t$1('kr-table')
+], KRTable);
+
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -2266,8 +3521,8 @@ KRTextField.styles = i$5 `
 
     input:focus {
       outline: none;
-      border-color: var(--kr-text-field-focus-border-color, #2563eb);
-      box-shadow: 0 0 0 3px var(--kr-text-field-focus-ring-color, rgba(37, 99, 235, 0.1));
+      border-color: var(--kr-text-field-focus-border-color, #163052);
+      box-shadow: 0 0 0 3px var(--kr-text-field-focus-ring-color, rgba(22, 48, 82, 0.1));
     }
 
     input:disabled {
@@ -2914,5 +4169,5 @@ KRSelectOption = __decorate([
     t$1('kr-select-option')
 ], KRSelectOption);
 
-export { DialogRef, KRAccordion, KRAlert, KRButton, KRCodeDemo, KRContextMenu, KRDialog, KRSelect, KRSelectOption, KRSnackbar, KRTab, KRTabGroup, KRTextField, krBaseCSS };
+export { DialogRef, KRAccordion, KRAlert, KRButton, KRCodeDemo, KRContextMenu, KRDialog, KRSelect, KRSelectOption, KRSnackbar, KRTab, KRTabGroup, KRTable, KRTextField, krBaseCSS };
 //# sourceMappingURL=krubble.bundled.js.map