@actabldesign/bellhop-core 0.0.8 → 0.0.12

package/dist/esm/bh-button_2.entry.js

@@ -1,5 +1,113 @@
-export { B as bh_button } from './bh-button-ImGVvXaj.js';
-import { r as registerInstance, h } from './index-nAAobRRQ.js';
+import { r as registerInstance, c as createEvent, h } from './index-nAAobRRQ.js';
+
+const bhButtonCss = ":host{display:inline-block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-inter);font-weight:var(--weight-medium);border:1px solid transparent;cursor:pointer;text-align:center;white-space:nowrap;transition:all 0.2s ease-in-out;text-decoration:none;outline:none}.btn-xs{padding:0 var(--spacing-lg);height:24px;border-radius:var(--radius-md);font-size:var(--text-sm-size)}.btn-sm{padding:0 var(--spacing-xl);height:32px;border-radius:var(--radius-md);font-size:var(--text-sm-size)}.btn-md{padding:0 var(--spacing-xl);height:40px;border-radius:var(--radius-md);font-size:var(--text-sm-size)}.btn-lg{padding:0 var(--spacing-xl);height:48px;border-radius:var(--radius-md);gap:var(--spacing-sm);font-size:var(--text-md-size)}.btn-xs.btn-icon-leading{padding-left:var(\n    --icon-compensation-xs-btn,\n    calc(var(--spacing-lg) - var(--spacing-xs))\n  )}.btn-sm.btn-icon-leading{padding-left:var(\n    --icon-compensation-sm-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-md.btn-icon-leading{padding-left:var(\n    --icon-compensation-md-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-lg.btn-icon-leading{padding-left:var(\n    --icon-compensation-lg-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-xs.btn-icon-trailing{padding-right:var(\n    --icon-compensation-xs-btn,\n    calc(var(--spacing-lg) - var(--spacing-xs))\n  )}.btn-sm.btn-icon-trailing{padding-right:var(\n    --icon-compensation-sm-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-md.btn-icon-trailing{padding-right:var(\n    --icon-compensation-md-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-lg.btn-icon-trailing{padding-right:var(\n    --icon-compensation-lg-btn,\n    calc(var(--spacing-xl) - var(--spacing-xs))\n  )}.btn-primary.btn-default{background-color:var(--color-brand-600);color:var(--color-white);border-color:var(--color-brand-600)}.btn-secondary.btn-default{background-color:var(--color-white);color:var(--color-neutral-600);border-color:var(--color-neutral-300)}.btn-tertiary.btn-default{background-color:transparent;color:var(--color-neutral-600);border-color:transparent}.btn-quaternary.btn-default{background-color:transparent;color:var(--color-brand-600);border-color:transparent}.btn-primary.btn-destructive{background-color:var(--color-error-600);color:var(--color-white);border-color:var(--color-error-600)}.btn-secondary.btn-destructive{background-color:var(--color-white);color:var(--color-error-600);border-color:var(--color-error-300)}.btn-tertiary.btn-destructive{background-color:transparent;color:var(--color-error-600);border-color:transparent}.btn-quaternary.btn-destructive{background-color:transparent;color:var(--color-error-600);border-color:transparent}.btn-primary.btn-success{background-color:var(--color-success-600);color:var(--color-white);border-color:var(--color-success-600)}.btn-secondary.btn-success{background-color:var(--color-white);color:var(--color-success-600);border-color:var(--color-success-300)}.btn-tertiary.btn-success{background-color:transparent;color:var(--color-success-600);border-color:transparent}.btn-quaternary.btn-success{background-color:transparent;color:var(--color-success-600);border-color:transparent}.btn-primary.btn-default:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-brand-700);border-color:var(--color-brand-700)}.btn-secondary.btn-default:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-neutral-50);color:var(--color-neutral-700);border-color:var(--color-neutral-400)}.btn-tertiary.btn-default:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-neutral-100);color:var(--color-neutral-700)}.btn-quaternary.btn-default:hover:not(:disabled):not(.btn-disabled){color:var(--color-brand-700)}.btn-primary.btn-destructive:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.btn-secondary.btn-destructive:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-error-50);border-color:var(--color-error-300)}.btn-tertiary.btn-destructive:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-error-50)}.btn-quaternary.btn-destructive:hover:not(:disabled):not(.btn-disabled){color:var(--color-error-700)}.btn-primary.btn-success:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-success-700);border-color:var(--color-success-700)}.btn-secondary.btn-success:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-success-50);border-color:var(--color-success-300)}.btn-tertiary.btn-success:hover:not(:disabled):not(.btn-disabled){background-color:var(--color-success-50)}.btn-quaternary.btn-success:hover:not(:disabled):not(.btn-disabled){color:var(--color-success-700)}.btn-primary.btn-default:active:not(:disabled):not(.btn-disabled){background-color:var(--color-brand-800);border-color:var(--color-brand-800)}.btn-secondary.btn-default:active:not(:disabled):not(.btn-disabled){background-color:var(--color-neutral-100);border-color:var(--color-neutral-500)}.btn-tertiary.btn-default:active:not(:disabled):not(.btn-disabled){background-color:var(--color-neutral-100)}.btn-quaternary.btn-default:active:not(:disabled):not(.btn-disabled){color:var(--color-brand-800)}.btn-primary.btn-destructive:active:not(:disabled):not(.btn-disabled){background-color:var(--color-error-800);border-color:var(--color-error-800)}.btn-secondary.btn-destructive:active:not(:disabled):not(.btn-disabled){background-color:var(--color-error-100);border-color:var(--color-error-400)}.btn-tertiary.btn-destructive:active:not(:disabled):not(.btn-disabled){background-color:var(--color-error-100)}.btn-quaternary.btn-destructive:active:not(:disabled):not(.btn-disabled){color:var(--color-error-800)}.btn-primary.btn-success:active:not(:disabled):not(.btn-disabled){background-color:var(--color-success-800);border-color:var(--color-success-800)}.btn-secondary.btn-success:active:not(:disabled):not(.btn-disabled){background-color:var(--color-success-100);border-color:var(--color-success-400)}.btn-tertiary.btn-success:active:not(:disabled):not(.btn-disabled){background-color:var(--color-success-100)}.btn-quaternary.btn-success:active:not(:disabled):not(.btn-disabled){color:var(--color-success-800)}.btn.btn-default:focus,.btn.btn-default:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.btn.btn-destructive:focus,.btn.btn-destructive:focus-visible{outline:2px solid var(--color-error-500);outline-offset:2px}.btn.btn-success:focus,.btn.btn-success:focus-visible{outline:2px solid var(--color-success-500);outline-offset:2px}.btn:disabled,.btn-disabled{cursor:not-allowed;pointer-events:none}.btn-primary:disabled,.btn-primary.btn-disabled{background-color:var(--color-neutral-200);color:var(--color-neutral-400);border-color:var(--color-neutral-200)}.btn-secondary:disabled,.btn-secondary.btn-disabled,.btn-tertiary:disabled,.btn-tertiary.btn-disabled,.btn-quaternary:disabled,.btn-quaternary.btn-disabled{opacity:0.5}.btn-loading{cursor:wait;pointer-events:none}.btn-loading .btn-label{opacity:0.7}.btn-label{display:inline-block;line-height:inherit}.btn-quaternary .btn-label{text-decoration:underline}.btn-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-icon-material{line-height:1;vertical-align:middle;color:inherit !important}.btn-xs .btn-icon-material{font-size:var(--text-sm-size)}.btn-sm .btn-icon-material{font-size:var(--text-md-size)}.btn-md .btn-icon-material{font-size:var(--text-lg-size)}.btn-lg .btn-icon-material{font-size:var(--text-lg-size)}.btn-icon-only{padding:0}.btn-icon-only.btn-xs{width:24px;height:24px}.btn-icon-only.btn-sm{width:32px;height:32px}.btn-icon-only.btn-md{width:40px;height:40px}.btn-icon-only.btn-lg{width:48px;height:48px}.btn-icon-only .btn-icon-material{margin:0}.btn-loading-icon{line-height:1;vertical-align:middle;color:inherit;animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.text-sm{font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.text-md{font-size:var(--text-md-size);line-height:var(--text-md-line)}.icon-md{width:20px;height:20px}.icon-lg{width:24px;height:24px}";
+
+const BhButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhClick = createEvent(this, "bhClick");
+    }
+    /**
+     * The visual hierarchy of the button
+     */
+    hierarchy = 'primary';
+    /**
+     * The kind/semantic meaning of the button
+     */
+    kind = 'default';
+    /**
+     * Icon position relative to the label
+     */
+    icon = 'none';
+    /**
+     * The size of the button
+     */
+    size = 'sm';
+    /**
+     * Fallback text label (used only if no slot content is provided)
+     */
+    label;
+    /**
+     * Material Symbols icon name (e.g., 'add', 'edit', 'delete')
+     */
+    iconName;
+    /**
+     * Whether the button is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the button is in a loading state
+     */
+    loading = false;
+    /**
+     * The type of button for form submission
+     * - 'button': No form submission (default)
+     * - 'submit': Submits the form
+     * - 'reset': Resets the form
+     */
+    type = 'button';
+    /**
+     * Emitted when the button is clicked
+     */
+    bhClick;
+    handleClick = (event) => {
+        if (!this.disabled && !this.loading) {
+            this.bhClick.emit(event);
+        }
+    };
+    getIconSizeClass() {
+        switch (this.size) {
+            case 'sm':
+            case 'md':
+                return 'icon-md';
+            case 'lg':
+                return 'icon-lg';
+            default:
+                return 'icon-md';
+        }
+    }
+    getTextSizeClass() {
+        switch (this.size) {
+            case 'sm':
+            case 'md':
+                return 'text-sm';
+            case 'lg':
+                return 'text-md';
+            default:
+                return 'text-sm';
+        }
+    }
+    getLoaderSize() {
+        switch (this.size) {
+            case 'xs':
+            case 'sm':
+                return 'sm';
+            default:
+                return 'sm';
+        }
+    }
+    getLoaderVariant() {
+        // Primary buttons (all kinds) have dark background, so use white spinner
+        return this.hierarchy === 'primary' ? 'white' : 'default';
+    }
+    render() {
+        const showLabel = this.icon !== 'only';
+        const showLeadingIcon = this.icon === 'leading' && (this.iconName || this.loading);
+        const showTrailingIcon = this.icon === 'trailing' && this.iconName && !this.loading;
+        const showOnlyIcon = this.icon === 'only' && (this.iconName || this.loading);
+        const buttonClasses = {
+            btn: true,
+            [`btn-${this.hierarchy}`]: true,
+            [`btn-${this.kind}`]: true,
+            [`btn-${this.size}`]: true,
+            [`btn-icon-${this.icon}`]: true,
+            'btn-disabled': this.disabled,
+            'btn-loading': this.loading,
+        };
+        return (h("button", { key: 'f2f54633cb42a7fea15c38aa8bc24be085320dc9', type: this.type, class: buttonClasses, disabled: this.disabled, onClick: this.handleClick, part: "button" }, showLeadingIcon && (h("span", { key: '682a4704e4f874b4f3d051aab4738829cbd47778', class: `btn-icon ${this.getIconSizeClass()}` }, this.loading ? (h("bh-loader-spinner", { size: this.getLoaderSize(), variant: this.getLoaderVariant() })) : (h("span", { class: "btn-icon-material material-symbols-outlined" }, this.iconName)))), showOnlyIcon && (h("span", { key: '767e0ee41843e2ef8b3a45ec82f15602848ad751', class: `btn-icon ${this.getIconSizeClass()}` }, this.loading ? (h("bh-loader-spinner", { size: this.getLoaderSize(), variant: this.getLoaderVariant() })) : (h("span", { class: "btn-icon-material material-symbols-outlined" }, this.iconName)))), showLabel && (h("span", { key: 'bb2ddbcf7eb35dd5af688a6fc6d61d07f67d90ba', class: `btn-label ${this.getTextSizeClass()}` }, h("slot", { key: '010690eeab4cea1205d2ebca5cc2e1bfc95048c7' }, this.label))), showTrailingIcon && (h("span", { key: '9de8df1ab10e9035affbd766fea95896762e2bca', class: `btn-icon ${this.getIconSizeClass()}` }, h("span", { key: 'b50370274c0513a7885eae4bf40235c3e7e245aa', class: "btn-icon-material material-symbols-outlined" }, this.iconName)))));
+    }
+};
+BhButton.style = bhButtonCss;
 
 const bhLoaderSpinnerCss = ":host{display:inline-block}.loader-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.3);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999}.loader-overlay-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.loader-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.loader-spinner{position:relative;display:inline-block}.loader-message{color:var(--color-neutral-700);font-size:var(--text-sm-size);line-height:var(--text-sm-line);font-weight:var(--weight-medium);text-align:center;margin-top:var(--spacing-xs)}.loader-overlay .loader-message{color:var(--color-white)}.spinner-gradient{animation:gradient-rotate 2s linear infinite;will-change:transform}.gradient-svg{display:block;transform-origin:50% 50%}.gradient-path{stroke-dasharray:90, 150;stroke-dashoffset:0;animation:gradient-dash 1.5s ease-in-out infinite;transform-origin:50% 50%}.size-sm .gradient-svg{width:20px;height:20px}.size-sm .gradient-path{stroke-width:5}.size-md .gradient-svg{width:30px;height:30px}.size-md .gradient-path{stroke-width:5}.size-lg .gradient-svg{width:40px;height:40px}.size-lg .gradient-path{stroke-width:5}.size-xl .gradient-svg{width:60px;height:60px}.size-xl .gradient-path{stroke-width:6}@keyframes gradient-rotate{100%{transform:rotate(360deg)}}@keyframes gradient-dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}.loader-container:hover .spinner-gradient{animation-duration:1s}.loader-container:hover .gradient-path{animation-duration:0.6s}.spinner-gradient{backface-visibility:hidden;perspective:1000px}.gradient-svg{transform:translateZ(0)}";
 
@@ -40,5 +148,5 @@ const BhLoaderSpinner = class {
 };
 BhLoaderSpinner.style = bhLoaderSpinnerCss;
 
-export { BhLoaderSpinner as bh_loader_spinner };
+export { BhButton as bh_button, BhLoaderSpinner as bh_loader_spinner };
 //# sourceMappingURL=bh-button.bh-loader-spinner.entry.js.map

package/dist/esm/bh-card.entry.js

@@ -37,7 +37,7 @@ const BhCard = class {
         const contentStyle = {
             minHeight: `${this.contentMinHeight}px`,
         };
-        return (h(Host, { key: '2f01aa3ee4b9cdeb1d5f0f16a961af880e11d0fb' }, h("div", { key: '4f4542a1f24dc9db216fef1e361efff54cb5f538', class: "card" }, this.showHeader && (h("div", { key: 'c290615fb8b36c965ac6a032963f2b4e78c22a29', class: "card-header-slot" }, h("slot", { key: '35d78f934a0a8486a62ff17897537cc0afd355a7', name: "header" }))), h("div", { key: 'bfd8a8827ea13baad0862ed5d962853ceed4be4e', class: "card-content", style: contentStyle }, h("slot", { key: 'b43aad6dfb675e4fd32f9614ba83f67aac264aa0' }), !this.hasContent && (h("div", { key: 'a9cf30bb2b1a9a0ab4baf6fa9d8514181f1e79c5', class: "card-content-placeholder" }, h("span", { key: '7d46bf5c2246cd8d9bd2d73695d9b55a1ba6112c', class: "card-placeholder-text" }, this.placeholderText)))), this.showFooter && (h("div", { key: '5588ba1dcc017c899909917f31961414dc4ffd9e', class: "card-footer-slot" }, h("slot", { key: 'ff28528d0090a67061fc7cd63f7df68662d908a8', name: "footer" }))))));
+        return (h(Host, { key: '31c722ab510a95909c875f389116ff547f3fb119' }, h("div", { key: 'b5390ca668bd29974154f7b0b831a4ce98b45394', class: "card" }, this.showHeader && (h("div", { key: 'df7f16b333cb5b8f651175c6c8299b35b90e16f2', class: "card-header-slot" }, h("slot", { key: '978b518b1ae6087bcb96846aa5c802524748bd14', name: "header" }))), h("div", { key: '7a1b7437e801d9b547d7bcd45639baf0774c34d7', class: "card-content", style: contentStyle }, h("slot", { key: '6c22feff58b21f0aec25c6f547d1443bf1f88f9d' }), !this.hasContent && (h("div", { key: '4b42011a00526f859a967a07fefd028cf9903f41', class: "card-content-placeholder" }, h("span", { key: '25fc157be159aae504164dd4dcb0faa9df632756', class: "card-placeholder-text" }, this.placeholderText)))), this.showFooter && (h("div", { key: '115e111772a1446b874e6f02f025fde54becd0a3', class: "card-footer-slot" }, h("slot", { key: '2cd029465310d2db438a684a3f6009e234b14c1b', name: "footer" }))))));
     }
 };
 BhCard.style = bhCardCss;

package/dist/esm/bh-data-grid.entry.js

@@ -3409,7 +3409,7 @@ function getSortedRowModel() {
   }, getMemoOptions(table.options, 'debugTable', 'getSortedRowModel', () => table._autoResetPageIndex()));
 }
 
-const bhDataGridCss = ":host{display:block;font-family:var(--font-family-body, 'Inter', sans-serif)}.data-grid{display:flex;flex-direction:column;background-color:var(--color-white, #fff);border:1px solid var(--color-neutral-200, #e2e4eb);border-radius:var(--radius-lg, 8px);overflow:hidden}.data-grid-container{position:relative;overflow:auto}.data-grid-table{display:table;width:100%;border-collapse:collapse}.data-grid-compact .data-grid-header-cell,.data-grid-compact .data-grid-cell,.data-grid-compact .data-grid-filter-cell{padding:var(--sp-1-5, 6px) var(--sp-2, 8px);font-size:0.75rem}.data-grid-compact .data-grid-row{height:32px}.data-grid-default .data-grid-header-cell,.data-grid-default .data-grid-cell,.data-grid-default .data-grid-filter-cell{padding:var(--sp-2, 8px) var(--sp-3, 12px);font-size:0.875rem}.data-grid-default .data-grid-row{height:44px}.data-grid-relaxed .data-grid-header-cell,.data-grid-relaxed .data-grid-cell,.data-grid-relaxed .data-grid-filter-cell{padding:var(--sp-3, 12px) var(--sp-4, 16px);font-size:0.875rem}.data-grid-relaxed .data-grid-row{height:56px}.data-grid-bordered .data-grid-cell,.data-grid-bordered .data-grid-header-cell,.data-grid-bordered .data-grid-filter-cell{border:1px solid var(--color-neutral-200, #e2e4eb)}.data-grid-bordered .data-grid-header-cell{border-bottom-width:2px}.data-grid-striped .data-grid-row-striped{background-color:var(--color-neutral-50, #fafafc)}.data-grid-caption{padding:var(--sp-3, 12px) var(--sp-4, 16px);font-size:0.875rem;font-weight:500;color:var(--color-neutral-700, #4d5266)}.data-grid-caption-top{border-bottom:1px solid var(--color-neutral-200, #e2e4eb)}.data-grid-caption-bottom{border-top:1px solid var(--color-neutral-200, #e2e4eb)}.data-grid-global-filter{display:flex;align-items:center;gap:var(--sp-2, 8px);padding:var(--sp-3, 12px) var(--sp-4, 16px);border-bottom:1px solid var(--color-neutral-200, #e2e4eb)}.data-grid-search-icon{font-size:20px;color:var(--color-neutral-400, #939ab4)}.data-grid-global-filter-input{flex:1;padding:var(--sp-2, 8px) var(--sp-3, 12px);border:1px solid var(--color-neutral-300, #c0c4d4);border-radius:var(--radius-md, 6px);font-size:0.875rem;color:var(--color-neutral-900, #141624);background-color:var(--color-white, #fff);transition:border-color 0.15s ease, box-shadow 0.15s ease}.data-grid-global-filter-input:focus{outline:none;border-color:var(--color-brand-500, #6366f1);box-shadow:0 0 0 3px var(--color-brand-100, #e0e1fc)}.data-grid-global-filter-input::placeholder{color:var(--color-neutral-400, #939ab4)}.data-grid-header{display:table-header-group;background-color:var(--color-neutral-50, #fafafc)}.data-grid-header-sticky{position:sticky;top:0;z-index:10}.data-grid-header-row{display:table-row}.data-grid-header-cell{display:table-cell;vertical-align:middle;text-align:left;font-weight:600;color:var(--color-neutral-700, #4d5266);border-bottom:1px solid var(--color-neutral-200, #e2e4eb);white-space:nowrap;user-select:none}.data-grid-header-cell-sortable{cursor:pointer;transition:background-color 0.15s ease}.data-grid-header-cell-sortable:hover{background-color:var(--color-neutral-100, #f0f1f5)}.data-grid-header-cell-sorted{color:var(--color-brand-600, #4f46e5)}.data-grid-header-text{display:inline-flex;align-items:center;gap:var(--sp-1, 4px)}.data-grid-sort-icon{font-size:16px;color:var(--color-brand-600, #4f46e5)}.data-grid-filter-row{display:table-row;background-color:var(--color-neutral-25, #fcfcfe)}.data-grid-filter-cell{display:table-cell;vertical-align:middle;border-bottom:1px solid var(--color-neutral-200, #e2e4eb)}.data-grid-filter-input{width:100%;padding:var(--sp-1-5, 6px) var(--sp-2, 8px);border:1px solid var(--color-neutral-300, #c0c4d4);border-radius:var(--radius-sm, 4px);font-size:0.75rem;color:var(--color-neutral-900, #141624);background-color:var(--color-white, #fff);transition:border-color 0.15s ease}.data-grid-filter-input:focus{outline:none;border-color:var(--color-brand-500, #6366f1)}.data-grid-filter-input::placeholder{color:var(--color-neutral-400, #939ab4)}.data-grid-body{display:table-row-group}.data-grid-row{display:table-row;transition:background-color 0.1s ease}.data-grid-row-hover,.data-grid-row:hover{background-color:var(--color-neutral-50, #fafafc)}.data-grid-row-selected{background-color:var(--color-brand-50, #eef2ff) !important}.data-grid-row-selected:hover{background-color:var(--color-brand-100, #e0e7ff) !important}.data-grid-row-clickable{cursor:pointer}.data-grid-row-editing{background-color:var(--color-warning-50, #fffbeb) !important}.data-grid-cell{display:table-cell;vertical-align:middle;color:var(--color-neutral-900, #141624);border-bottom:1px solid var(--color-neutral-100, #f0f1f5)}.data-grid-cell-align-left{text-align:left}.data-grid-cell-align-center{text-align:center}.data-grid-cell-align-right{text-align:right}.data-grid-cell-type-number{font-variant-numeric:tabular-nums}.data-grid-cell-editable{cursor:cell}.data-grid-cell-editable:hover{background-color:var(--color-brand-25, #f5f8ff)}.data-grid-cell-editing{padding:var(--sp-1, 4px) !important}.data-grid-cell-error{position:relative}.data-grid-cell-error-text{position:absolute;bottom:2px;left:4px;font-size:0.625rem;color:var(--color-error-600, #dc2626)}.data-grid-cell-select{width:40px;min-width:40px;max-width:40px;text-align:center}.data-grid-cell-expand{width:40px;min-width:40px;max-width:40px;text-align:center}.data-grid-cell-actions{width:80px;min-width:80px;max-width:80px;text-align:center}.data-grid-expand-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:var(--radius-md, 6px);background-color:transparent;color:var(--color-neutral-500, #6b7280);cursor:pointer;transition:background-color 0.15s ease, color 0.15s ease}.data-grid-expand-btn:hover{background-color:var(--color-neutral-100, #f0f1f5);color:var(--color-neutral-700, #4d5266)}.data-grid-expand-btn .material-symbols-outlined{font-size:20px;transition:transform 0.15s ease}.data-grid-row-expanded .data-grid-expand-btn .material-symbols-outlined{transform:rotate(90deg)}.data-grid-row-expansion{display:table-row;background-color:var(--color-neutral-50, #fafafc)}.data-grid-row-expansion>*{display:table-cell;padding:var(--sp-4, 16px);border-bottom:1px solid var(--color-neutral-200, #e2e4eb)}.data-grid-row-group{background-color:var(--color-neutral-100, #f0f1f5);cursor:pointer}.data-grid-row-group:hover{background-color:var(--color-neutral-200, #e2e4eb)}.data-grid-cell-group-label{display:flex;align-items:center;gap:var(--sp-2, 8px);font-weight:500}.data-grid-group-toggle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:transparent;color:var(--color-neutral-600, #5c627a);cursor:pointer}.data-grid-group-toggle .material-symbols-outlined{font-size:20px;transition:transform 0.15s ease}.data-grid-row-group-expanded .data-grid-group-toggle .material-symbols-outlined{transform:rotate(90deg)}.data-grid-group-label{display:inline-flex;align-items:center;gap:var(--sp-1, 4px)}.data-grid-group-column{color:var(--color-neutral-500, #6b7280)}.data-grid-group-value{color:var(--color-neutral-900, #141624);font-weight:600}.data-grid-group-count{color:var(--color-neutral-400, #939ab4);font-size:0.75rem;font-weight:400}.data-grid-edit-input{width:100%;padding:var(--sp-1-5, 6px) var(--sp-2, 8px);border:1px solid var(--color-brand-400, #818cf8);border-radius:var(--radius-sm, 4px);font-size:inherit;color:var(--color-neutral-900, #141624);background-color:var(--color-white, #fff);box-shadow:0 0 0 3px var(--color-brand-100, #e0e1fc)}.data-grid-edit-input:focus{outline:none;border-color:var(--color-brand-500, #6366f1)}.data-grid-edit-actions{display:flex;align-items:center;justify-content:center;gap:var(--sp-1, 4px)}.data-grid-action-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:var(--radius-md, 6px);background-color:transparent;color:var(--color-neutral-600, #5c627a);cursor:pointer;transition:background-color 0.15s ease, color 0.15s ease}.data-grid-action-btn:hover{background-color:var(--color-neutral-100, #f0f1f5);color:var(--color-neutral-900, #141624)}.data-grid-action-btn .material-symbols-outlined{font-size:18px}.data-grid-empty{display:flex;align-items:center;justify-content:center;padding:var(--sp-12, 48px) var(--sp-4, 16px)}.data-grid-loading{position:relative}.data-grid-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:rgba(255, 255, 255, 0.8);z-index:20}.data-grid-skeleton .data-grid-cell{padding:var(--sp-2, 8px) var(--sp-3, 12px)}.data-grid-row-skeleton{animation:skeleton-pulse 1.5s ease-in-out infinite}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.5}}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:'liga';font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}@media (max-width: 640px){.data-grid-global-filter{padding:var(--sp-2, 8px)}.data-grid-header-cell,.data-grid-cell,.data-grid-filter-cell{padding:var(--sp-2, 8px) !important;font-size:0.75rem !important}.data-grid-cell-select,.data-grid-cell-expand{width:32px;min-width:32px;max-width:32px}.data-grid-cell-actions{width:60px;min-width:60px;max-width:60px}}";
+const bhDataGridCss = ":host{display:block;font-family:var(--font-family-body, 'Inter', sans-serif)}.data-grid{display:flex;flex-direction:column;background-color:var(--color-white, #fff);overflow:hidden}.data-grid-container{position:relative;overflow:auto}.data-grid-table{display:table;width:100%;border-collapse:collapse}.data-grid-compact .data-grid-header-cell,.data-grid-compact .data-grid-cell{padding:var(--sp-1-5, 6px) var(--sp-2, 8px);font-size:0.875rem}.data-grid-compact .data-grid-row{height:40px}.data-grid-default .data-grid-header-cell,.data-grid-default .data-grid-cell{padding:var(--sp-2, 8px) var(--sp-3, 12px);font-size:0.875rem}.data-grid-default .data-grid-row{height:48px}.data-grid-relaxed .data-grid-header-cell,.data-grid-relaxed .data-grid-cell{padding:var(--sp-3, 12px) var(--sp-4, 16px);font-size:0.875rem}.data-grid-relaxed .data-grid-row{height:64px}.data-grid-bordered .data-grid-cell,.data-grid-bordered .data-grid-header-cell,.data-grid-bordered .data-grid-filter-cell{border:1px solid var(--color-neutral-200, #e2e4eb)}.data-grid-bordered .data-grid-header-cell{border-bottom-width:2px}.data-grid-striped .data-grid-row-striped{background-color:var(--color-neutral-50, #fafafc)}.data-grid-caption{padding:var(--sp-3, 12px) var(--sp-4, 16px);font-size:0.875rem;font-weight:500;color:var(--color-neutral-700, #4d5266)}.data-grid-caption-top{border-bottom:1px solid var(--color-neutral-200, #e2e4eb)}.data-grid-caption-bottom{border-top:1px solid var(--color-neutral-200, #e2e4eb)}.data-grid-global-filter{position:relative;display:flex;align-items:center;gap:var(--sp-2, 8px);padding:var(--sp-3, 12px) var(--sp-4, 16px);border-bottom:1px solid var(--color-neutral-200, #e2e4eb)}.data-grid-search-icon{position:absolute;font-size:20px;color:var(--color-neutral-400, #939ab4);left:var(--sp-5);top:50%;transform:translateY(-50%);pointer-events:none}.data-grid-global-filter-input{padding:var(--sp-2, 8px) var(--sp-3, 12px) var(--sp-2, 8px) var(--sp-8, 32px);border:1px solid var(--color-neutral-300, #c0c4d4);border-radius:var(--radius-sm, 4px);font-size:0.875rem;color:var(--color-neutral-900, #141624);background-color:var(--color-white, #fff);transition:border-color 0.15s ease, box-shadow 0.15s ease}.data-grid-global-filter-input:focus{outline:none;border-color:var(--color-brand-500, #6366f1);box-shadow:0 0 0 3px var(--color-brand-100, #e0e1fc)}.data-grid-global-filter-input::placeholder{color:var(--color-neutral-400, #939ab4);padding-right:var(--sp-10, 40px)}.data-grid-header{display:table-header-group;background-color:var(--color-white, #ffffff)}.data-grid-header-sticky{position:sticky;top:0;z-index:10}.data-grid-header-row{display:table-row}.data-grid-header-cell{display:table-cell;vertical-align:middle;text-align:left;font-weight:600;color:var(--color-neutral-700, #4d5266);border-bottom:1px solid var(--color-neutral-200, #e2e4eb);white-space:nowrap;user-select:none}.data-grid-header-cell-sortable{cursor:pointer;transition:background-color 0.2s ease}.data-grid-header-cell-sortable:hover{background-color:var(--color-neutral-50, #fafafc)}.data-grid-header-cell-sorted{color:var(--color-neutral-900, #141624)}.data-grid-header-text{display:inline-flex;align-items:center;gap:var(--sp-2)}.data-grid-sort-icon.material-symbols-outlined{font-size:16px !important;color:var(--color-neutral-700, #4d5266);vertical-align:middle;padding:var(--sp-0) var(--sp-0) var(--sp-0-5) var(--sp-0-5)}.data-grid-filter-row{display:table-row;background:var(--color-white, #ffffff);height:28px}.data-grid-filter-cell{position:relative;height:28px;padding:var(--sp-0, 0px);display:table-cell;vertical-align:middle;border-bottom:1px solid var(--color-neutral-200, #e2e4eb)}.data-grid-filter-input{width:100%;height:100%;padding:var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-8);border:none;outline:none;font-size:0.875rem;color:var(--color-neutral-900, #141624);background:var(--color-white, #ffffff);transition:background 0.15s ease}.data-grid-filter-icon{position:absolute;font-size:20px !important;color:var(--color-neutral-400, #939ab4);left:var(--sp-2);top:50%;transform:translateY(-50%);pointer-events:none}.data-grid-filter-input:focus{background:var(--color-brand-25)}.data-grid-filter-input::placeholder{color:var(--color-neutral-400, #939ab4);padding-right:var(--sp-8)}.data-grid-body{display:table-row-group}.data-grid-row{display:table-row;transition:background-color 0.1s ease}.data-grid-row-hover,.data-grid-row:hover{background-color:var(--color-neutral-25)}.data-grid-row-selected{background-color:var(--color-brand-50, #eef2ff) !important}.data-grid-row-selected:hover{background-color:var(--color-brand-100, #e0e7ff) !important}.data-grid-row-clickable{cursor:pointer}.data-grid-row-editing{background-color:var(--color-brand-50) !important}.data-grid-cell{display:table-cell;vertical-align:middle;color:var(--color-neutral-900, #141624);border-bottom:1px solid var(--color-neutral-100, #f0f1f5)}.data-grid-cell-align-left{text-align:left}.data-grid-cell-align-center{text-align:center}.data-grid-cell-align-right{text-align:right}.data-grid-cell-type-number{font-variant-numeric:tabular-nums}.data-grid-cell-editable{cursor:cell}.data-grid-cell-editable:hover{background-color:var(--color-brand-25, #f5f8ff)}.data-grid-cell-editing{padding:var(--sp-1, 4px) !important}.data-grid-cell-error{position:relative}.data-grid-cell-error-text{position:absolute;bottom:2px;left:4px;font-size:0.625rem;color:var(--color-error-600, #dc2626)}.data-grid-cell-select{width:40px;min-width:40px;max-width:40px;text-align:center}.data-grid-cell-expand{width:40px;min-width:40px;max-width:40px;text-align:center}.data-grid-cell-actions{width:80px;min-width:80px;max-width:80px;text-align:center}.data-grid-expand-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:var(--radius-md, 6px);background-color:transparent;color:var(--color-neutral-500, #6b7280);cursor:pointer;transition:background-color 0.15s ease, color 0.15s ease}.data-grid-expand-btn:hover{background-color:var(--color-neutral-100, #f0f1f5);color:var(--color-neutral-700, #4d5266)}.data-grid-expand-btn .material-symbols-outlined{font-size:20px;transition:transform 0.15s ease}.data-grid-row-expanded .data-grid-expand-btn .material-symbols-outlined{transform:rotate(45deg)}.data-grid-row-expansion{display:table-row;background-color:var(--color-neutral-50, #fafafc)}.data-grid-row-expansion>*{display:table-cell;padding:var(--sp-4, 16px);border-bottom:1px solid var(--color-neutral-200, #e2e4eb)}.data-grid-row-group{background-color:var(--color-neutral-50);cursor:pointer}.data-grid-row-group:hover{background-color:var(--color-neutral-100)}.data-grid-cell-group-label{display:flex;align-items:center;gap:var(--sp-2, 8px);font-weight:500}.data-grid-group-toggle{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:transparent;color:var(--color-neutral-600, #5c627a);cursor:pointer}.data-grid-group-toggle .material-symbols-outlined{font-size:20px;transition:transform 0.15s ease}.data-grid-row-group-expanded .data-grid-group-toggle .material-symbols-outlined{transform:rotate(90deg)}.data-grid-group-label{display:inline-flex;align-items:center;gap:var(--sp-1, 4px)}.data-grid-group-column{color:var(--color-neutral-600, #5c627a)}.data-grid-group-value{color:var(--color-neutral-900, #141624);font-weight:600}.data-grid-group-count{color:var(--color-neutral-400, #939ab4);font-size:0.75rem;font-weight:400}.data-grid-edit-input{width:100%;padding:var(--sp-1-5, 6px) var(--sp-2, 8px);border:1px solid var(--color-brand-400, #818cf8);border-radius:var(--radius-sm, 4px);font-size:inherit;color:var(--color-neutral-900, #141624);background-color:var(--color-white, #fff);box-shadow:0 0 0 3px var(--color-brand-100, #e0e1fc)}.data-grid-edit-input:focus{outline:none;border-color:var(--color-brand-500, #6366f1)}.data-grid-edit-actions{display:flex;align-items:center;justify-content:center;gap:var(--sp-1, 4px)}.data-grid-empty{display:table-row;width:100%}.data-grid-empty>*{display:table-cell;text-align:center;padding:var(--sp-12, 48px) var(--sp-4, 16px);width:100%}.data-grid-empty .empty-state-wrapper{display:flex;justify-content:center;align-items:center;width:100%;padding:20px 0;}.data-grid-loading{position:relative}.data-grid-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;background-color:rgba(255, 255, 255, 0.8);z-index:20}.data-grid-skeleton .data-grid-cell{position:relative;padding:var(--sp-2, 8px) var(--sp-3, 12px)}.data-grid-skeleton-bar{display:inline-block;height:12px;background-color:var(--color-neutral-200, #e2e4eb);border-radius:var(--radius-sm, 4px);animation:skeleton-pulse 1.5s ease-in-out infinite}.data-grid-row-skeleton .hydrated{width:80%}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:0.4}}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:'liga';font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}@media (max-width: 640px){.data-grid-global-filter{padding:var(--sp-2, 8px)}.data-grid-header-cell,.data-grid-cell,.data-grid-filter-cell{padding:var(--sp-2, 8px) !important;font-size:0.75rem !important}.data-grid-cell-select,.data-grid-cell-expand{width:32px;min-width:32px;max-width:32px}.data-grid-cell-actions{width:60px;min-width:60px;max-width:60px}}";
 
 const BhDataGrid = class {
     constructor(hostRef) {
@@ -3580,7 +3580,9 @@ const BhDataGrid = class {
     handleSelectedRowIdsChange(newValue) {
         if (this.table) {
             const selection = {};
-            newValue.forEach(id => { selection[id] = true; });
+            newValue.forEach((id) => {
+                selection[id] = true;
+            });
             this.table.setRowSelection(selection);
         }
     }
@@ -3595,7 +3597,9 @@ const BhDataGrid = class {
     handleExpandedRowIdsChange(newValue) {
         if (this.table) {
             const expanded = {};
-            newValue.forEach(id => { expanded[id] = true; });
+            newValue.forEach((id) => {
+                expanded[id] = true;
+            });
             this.table.setExpanded(expanded);
         }
     }
@@ -3645,14 +3649,24 @@ const BhDataGrid = class {
             },
             getCoreRowModel: getCoreRowModel(),
             getSortedRowModel: this.enableSorting ? getSortedRowModel() : undefined,
-            getFilteredRowModel: this.enableFiltering || this.enableGlobalFilter ? getFilteredRowModel() : undefined,
-            getPaginationRowModel: this.enablePagination ? getPaginationRowModel() : undefined,
-            getExpandedRowModel: this.enableExpansion || this.enableGrouping ? getExpandedRowModel() : undefined,
-            getGroupedRowModel: this.enableGrouping ? getGroupedRowModel() : undefined,
-            getRowId: this.getRowId || ((row, index) => String(row.id ?? index)),
+            getFilteredRowModel: this.enableFiltering || this.enableGlobalFilter
+                ? getFilteredRowModel()
+                : undefined,
+            getPaginationRowModel: this.enablePagination
+                ? getPaginationRowModel()
+                : undefined,
+            getExpandedRowModel: this.enableExpansion || this.enableGrouping
+                ? getExpandedRowModel()
+                : undefined,
+            getGroupedRowModel: this.enableGrouping
+                ? getGroupedRowModel()
+                : undefined,
+            getRowId: this.getRowId ||
+                ((row, index) => String(row.id ?? index)),
             getSubRows: this.getSubRows,
             enableRowSelection: this.selectionMode !== 'none',
-            enableMultiRowSelection: this.selectionMode === 'multiple-click' || this.selectionMode === 'multiple-checkbox',
+            enableMultiRowSelection: this.selectionMode === 'multiple-click' ||
+                this.selectionMode === 'multiple-checkbox',
             enableSorting: this.enableSorting,
             enableFilters: this.enableFiltering || this.enableGlobalFilter,
             enableExpanding: this.enableExpansion || this.enableGrouping,
@@ -3669,7 +3683,7 @@ const BhDataGrid = class {
         this.tableState = newState;
         // Update table options with new state
         if (this.table) {
-            this.table.setOptions(prev => ({
+            this.table.setOptions((prev) => ({
                 ...prev,
                 state: newState,
             }));
@@ -3679,7 +3693,8 @@ const BhDataGrid = class {
             this.sortState = newState.sorting;
             this.bhSortChange.emit({ sorting: newState.sorting });
         }
-        if (JSON.stringify(oldState.columnFilters) !== JSON.stringify(newState.columnFilters) ||
+        if (JSON.stringify(oldState.columnFilters) !==
+            JSON.stringify(newState.columnFilters) ||
             oldState.globalFilter !== newState.globalFilter) {
             this.filterState = newState.columnFilters;
             this.globalFilter = newState.globalFilter;
@@ -3688,10 +3703,11 @@ const BhDataGrid = class {
                 globalFilter: newState.globalFilter,
             });
         }
-        if (JSON.stringify(oldState.rowSelection) !== JSON.stringify(newState.rowSelection)) {
-            const selectedIds = Object.keys(newState.rowSelection).filter(id => newState.rowSelection[id]);
+        if (JSON.stringify(oldState.rowSelection) !==
+            JSON.stringify(newState.rowSelection)) {
+            const selectedIds = Object.keys(newState.rowSelection).filter((id) => newState.rowSelection[id]);
             this.selectedRowIds = selectedIds;
-            const selectedRows = this.table?.getSelectedRowModel().rows.map(r => r.original) ?? [];
+            const selectedRows = this.table?.getSelectedRowModel().rows.map((r) => r.original) ?? [];
             this.bhSelectionChange.emit({
                 selectedRowIds: selectedIds,
                 selectedRows,
@@ -3711,19 +3727,25 @@ const BhDataGrid = class {
     }
     buildRowSelection() {
         const selection = {};
-        this.selectedRowIds.forEach(id => { selection[id] = true; });
+        this.selectedRowIds.forEach((id) => {
+            selection[id] = true;
+        });
         return selection;
     }
     buildExpanded() {
         const expanded = {};
-        this.expandedRowIds.forEach(id => { expanded[id] = true; });
+        this.expandedRowIds.forEach((id) => {
+            expanded[id] = true;
+        });
         return expanded;
     }
     buildColumnVisibility() {
         // Hide grouped columns
         const visibility = {};
         if (this.enableGrouping) {
-            this.groupBy.forEach(colId => { visibility[colId] = false; });
+            this.groupBy.forEach((colId) => {
+                visibility[colId] = false;
+            });
         }
         return visibility;
     }
@@ -3803,10 +3825,10 @@ const BhDataGrid = class {
         if (!this.enableEditing)
             return;
         this.editingRowId = row.id;
-        this.editingColumnId = this.editMode === 'cell' ? (columnId || null) : null;
+        this.editingColumnId = this.editMode === 'cell' ? columnId || null : null;
         // Initialize editing values from current row
         const values = {};
-        this.columns.forEach(col => {
+        this.columns.forEach((col) => {
             const colId = col.accessorKey || col.id;
             if (colId) {
                 values[colId] = row.original[colId];
@@ -3917,8 +3939,8 @@ const BhDataGrid = class {
         }
     };
     moveToNextEditableCell = (currentColumnId, reverse) => {
-        const editableColumns = this.columns.filter(col => col.meta?.editable !== false);
-        const currentIndex = editableColumns.findIndex(col => {
+        const editableColumns = this.columns.filter((col) => col.meta?.editable !== false);
+        const currentIndex = editableColumns.findIndex((col) => {
             const colId = col.accessorKey || col.id;
             return colId === currentColumnId;
         });
@@ -3997,23 +4019,30 @@ const BhDataGrid = class {
         if (!this.table)
             return null;
         const headerGroups = this.table.getHeaderGroups();
-        return (h("div", { class: { 'data-grid-header': true, 'data-grid-header-sticky': this.stickyHeader } }, headerGroups.map(headerGroup => (h("div", { class: "data-grid-header-row", role: "row", key: headerGroup.id }, this.renderSelectionHeader(), this.enableExpansion && !this.enableGrouping && (h("div", { class: "data-grid-header-cell data-grid-cell-expand", role: "columnheader" })), headerGroup.headers.map(header => this.renderHeaderCell(header)), this.enableEditing && this.showEditActions && this.editMode === 'row' && (h("div", { class: "data-grid-header-cell data-grid-cell-actions", role: "columnheader" }))))), this.showFilterRow && this.renderFilterRow()));
+        return (h("thead", { class: {
+                'data-grid-header': true,
+                'data-grid-header-sticky': this.stickyHeader,
+            } }, headerGroups.map((headerGroup) => (h("tr", { class: "data-grid-header-row", role: "row", key: headerGroup.id }, this.renderSelectionHeader(), this.enableExpansion && !this.enableGrouping && (h("th", { class: "data-grid-header-cell data-grid-cell-expand", role: "columnheader" })), headerGroup.headers.map((header) => this.renderHeaderCell(header)), this.enableEditing &&
+            this.showEditActions &&
+            this.editMode === 'row' && (h("th", { class: "data-grid-header-cell data-grid-cell-actions", role: "columnheader", colSpan: 1 }))))), this.showFilterRow && this.renderFilterRow()));
     }
     renderSelectionHeader() {
-        if (this.selectionMode === 'none' || this.selectionMode === 'single-click' || this.selectionMode === 'multiple-click') {
+        if (this.selectionMode === 'none' ||
+            this.selectionMode === 'single-click' ||
+            this.selectionMode === 'multiple-click') {
             return null;
         }
         if (this.selectionMode === 'single-radio') {
-            return h("div", { class: "data-grid-header-cell data-grid-cell-select", role: "columnheader" });
+            return (h("th", { class: "data-grid-header-cell data-grid-cell-select", role: "columnheader", colSpan: 1 }));
         }
         // Multiple checkbox - show select all
         const isAllSelected = this.table?.getIsAllRowsSelected();
         const isSomeSelected = this.table?.getIsSomeRowsSelected();
-        return (h("div", { class: "data-grid-header-cell data-grid-cell-select", role: "columnheader" }, h("bh-checkbox", { size: "sm", checked: isAllSelected, indeterminate: isSomeSelected && !isAllSelected, onBhChange: () => this.table?.toggleAllRowsSelected() })));
+        return (h("th", { class: "data-grid-header-cell data-grid-cell-select", role: "columnheader", colSpan: 1 }, h("bh-checkbox", { size: "sm", checked: isAllSelected, indeterminate: isSomeSelected && !isAllSelected, onBhChange: () => this.table?.toggleAllRowsSelected() })));
     }
     renderHeaderCell(header) {
         if (header.isPlaceholder) {
-            return h("div", { class: "data-grid-header-cell", role: "columnheader", key: header.id });
+            return (h("th", { class: "data-grid-header-cell", role: "columnheader", key: header.id, colSpan: 1 }));
         }
         const canSort = header.column.getCanSort();
         const sortDirection = header.column.getIsSorted();
@@ -4027,21 +4056,32 @@ const BhDataGrid = class {
         const style = header.column.getSize()
             ? { width: `${header.column.getSize()}px` }
             : {};
-        return (h("div", { class: cellClasses, style: style, role: "columnheader", "aria-sort": sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none', onClick: () => canSort && this.handleHeaderClick(header), key: header.id }, h("span", { class: "data-grid-header-text" }, this.flexRender(header.column.columnDef.header, header.getContext())), canSort && sortDirection && (h("span", { class: "data-grid-sort-icon material-symbols-outlined" }, sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward'))));
+        return (h("th", { class: cellClasses, style: style, role: "columnheader", "aria-sort": sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                    ? 'descending'
+                    : 'none', onClick: () => canSort && this.handleHeaderClick(header), key: header.id, colSpan: 1 }, h("span", { class: "data-grid-header-text" }, this.flexRender(header.column.columnDef.header, header.getContext())), canSort && sortDirection && (h("span", { class: "data-grid-sort-icon material-symbols-outlined" }, sortDirection === 'asc' ? 'north' : 'south'))));
     }
     renderFilterRow() {
         if (!this.table)
             return null;
         const headers = this.table.getHeaderGroups()[0]?.headers || [];
-        return (h("div", { class: "data-grid-filter-row", role: "row" }, (this.selectionMode === 'single-radio' || this.selectionMode === 'multiple-checkbox') && (h("div", { class: "data-grid-filter-cell data-grid-cell-select", role: "cell" })), this.enableExpansion && !this.enableGrouping && (h("div", { class: "data-grid-filter-cell data-grid-cell-expand", role: "cell" })), headers.map(header => {
+        return (h("tr", { class: "data-grid-filter-row", role: "row" }, (this.selectionMode === 'single-radio' ||
+            this.selectionMode === 'multiple-checkbox') && (h("td", { class: "data-grid-filter-cell data-grid-cell-select", role: "cell" })), this.enableExpansion && !this.enableGrouping && (h("td", { class: "data-grid-filter-cell data-grid-cell-expand", role: "cell" })), headers.map((header) => {
             const canFilter = header.column.getCanFilter();
             const meta = header.column.columnDef.meta;
             if (!canFilter || meta?.filterable === false) {
-                return h("div", { class: "data-grid-filter-cell", role: "cell", key: header.id });
+                return (h("div", { class: "data-grid-filter-cell", role: "cell", key: header.id }));
             }
             const filterValue = header.column.getFilterValue() ?? '';
-            return (h("div", { class: "data-grid-filter-cell", role: "cell", key: header.id }, h("input", { type: meta?.type === 'number' ? 'number' : meta?.type === 'date' ? 'date' : 'text', class: "data-grid-filter-input", placeholder: `Filter...`, value: filterValue, onInput: (e) => this.handleColumnFilterChange(header.column.id, e.target.value) })));
-        }), this.enableEditing && this.showEditActions && this.editMode === 'row' && (h("div", { class: "data-grid-filter-cell data-grid-cell-actions", role: "cell" }))));
+            return (h("td", { class: "data-grid-filter-cell", role: "cell", key: header.id }, h("span", { class: "data-grid-filter-icon material-symbols-outlined" }, "search"), h("input", { type: meta?.type === 'number'
+                    ? 'number'
+                    : meta?.type === 'date'
+                        ? 'date'
+                        : 'text', class: "data-grid-filter-input", placeholder: ``, value: filterValue, onInput: (e) => this.handleColumnFilterChange(header.column.id, e.target.value) })));
+        }), this.enableEditing &&
+            this.showEditActions &&
+            this.editMode === 'row' && (h("td", { class: "data-grid-filter-cell data-grid-cell-actions", role: "cell" }))));
     }
     renderBody() {
         if (!this.table)
@@ -4055,7 +4095,7 @@ const BhDataGrid = class {
         if (rows.length === 0) {
             return this.renderEmptyState();
         }
-        return (h("div", { class: "data-grid-body", role: "rowgroup" }, rows.map(row => {
+        return (h("tbody", { class: "data-grid-body", role: "rowgroup" }, rows.map((row) => {
             if (row.getIsGrouped()) {
                 return this.renderGroupRow(row);
             }
@@ -4073,27 +4113,38 @@ const BhDataGrid = class {
             'data-grid-row-editing': isRowEditing,
             'data-grid-row-hover': this.hoveredRowId === row.id,
             'data-grid-row-striped': this.striped && row.index % 2 === 1,
-            'data-grid-row-clickable': this.selectionMode === 'single-click' || this.selectionMode === 'multiple-click',
+            'data-grid-row-clickable': this.selectionMode === 'single-click' ||
+                this.selectionMode === 'multiple-click',
         };
         return [
-            h("div", { class: rowClasses, role: "row", "aria-selected": isSelected ? 'true' : 'false', key: row.id, onClick: () => this.handleRowClick(row), onMouseEnter: () => { this.hoveredRowId = row.id; }, onMouseLeave: () => { this.hoveredRowId = null; } }, this.renderSelectionCell(row), this.enableExpansion && !this.enableGrouping && (h("div", { class: "data-grid-cell data-grid-cell-expand", role: "cell", onClick: (e) => { e.stopPropagation(); } }, row.getCanExpand() && (h("button", { class: "data-grid-expand-btn", onClick: () => this.handleRowExpand(row), "aria-label": isExpanded ? 'Collapse row' : 'Expand row' }, h("span", { class: "material-symbols-outlined" }, isExpanded ? 'expand_more' : 'chevron_right'))))), row.getVisibleCells().map(cell => this.renderCell(row, cell)), this.enableEditing && this.showEditActions && this.editMode === 'row' && (h("div", { class: "data-grid-cell data-grid-cell-actions", role: "cell", onClick: (e) => e.stopPropagation() }, isRowEditing ? (h("div", { class: "data-grid-edit-actions" }, h("button", { class: "data-grid-action-btn", onClick: () => this.saveEditing(), title: "Save" }, h("span", { class: "material-symbols-outlined" }, "check")), h("button", { class: "data-grid-action-btn", onClick: () => this.cancelEditing(), title: "Cancel" }, h("span", { class: "material-symbols-outlined" }, "close")))) : (h("button", { class: "data-grid-action-btn", onClick: () => this.startEditing(row), title: "Edit" }, h("span", { class: "material-symbols-outlined" }, "edit")))))),
+            h("tr", { class: rowClasses, role: "row", "aria-selected": isSelected ? 'true' : 'false', key: row.id, onClick: () => this.handleRowClick(row), onMouseEnter: () => {
+                    this.hoveredRowId = row.id;
+                }, onMouseLeave: () => {
+                    this.hoveredRowId = null;
+                } }, this.renderSelectionCell(row), this.enableExpansion && !this.enableGrouping && (h("td", { class: "data-grid-cell data-grid-cell-expand", role: "cell", onClick: (e) => {
+                    e.stopPropagation();
+                } }, row.getCanExpand() && (h("button", { class: "data-grid-expand-btn", onClick: () => this.handleRowExpand(row), "aria-label": isExpanded ? 'Collapse row' : 'Expand row' }, h("span", { class: "material-symbols-outlined" }, isExpanded ? 'expand_more' : 'chevron_right'))))), row.getVisibleCells().map((cell) => this.renderCell(row, cell)), this.enableEditing &&
+                this.showEditActions &&
+                this.editMode === 'row' && (h("td", { class: "data-grid-cell data-grid-cell-actions", role: "cell", onClick: (e) => e.stopPropagation() }, isRowEditing ? (h("div", { class: "data-grid-edit-actions" }, h("bh-button", { hierarchy: "tertiary", kind: "success", size: "sm", icon: "only", iconName: "check", onClick: () => this.saveEditing(), title: "Save" }, "Save"), h("bh-button", { hierarchy: "tertiary", kind: "destructive", size: "sm", icon: "only", iconName: "close", onClick: () => this.cancelEditing(), title: "Cancel" }, "Cancel"))) : (h("bh-button", { hierarchy: "tertiary", size: "sm", icon: "only", iconName: "edit", onClick: () => this.startEditing(row), title: "Edit" }, h("span", { class: "material-symbols-outlined" }, "edit")))))),
             // Expanded content
             isExpanded && this.enableExpansion && !this.enableGrouping && (h("div", { class: "data-grid-row-expansion", key: `${row.id}-expansion` }, h("slot", { name: "expanded-row" }))),
         ];
     }
     renderSelectionCell(row) {
-        if (this.selectionMode === 'none' || this.selectionMode === 'single-click' || this.selectionMode === 'multiple-click') {
+        if (this.selectionMode === 'none' ||
+            this.selectionMode === 'single-click' ||
+            this.selectionMode === 'multiple-click') {
             return null;
         }
         const isSelected = row.getIsSelected();
         if (this.selectionMode === 'single-radio') {
-            return (h("div", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, h("bh-radio-button", { selected: isSelected, onBhChange: () => {
+            return (h("td", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, h("bh-radio-button", { selected: isSelected, onBhChange: () => {
                     this.table?.resetRowSelection();
                     row.toggleSelected(true);
                 } })));
         }
         // Multiple checkbox
-        return (h("div", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, h("bh-checkbox", { size: "sm", checked: isSelected, onBhChange: () => row.toggleSelected() })));
+        return (h("td", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, h("bh-checkbox", { size: "sm", checked: isSelected, onBhChange: () => row.toggleSelected() })));
     }
     renderCell(row, cell) {
         const meta = cell.column.columnDef.meta;
@@ -4112,18 +4163,22 @@ const BhDataGrid = class {
         const style = cell.column.getSize()
             ? { width: `${cell.column.getSize()}px` }
             : {};
-        return (h("div", { class: cellClasses, style: style, role: "cell", key: cell.id, onClick: (e) => {
+        return (h("td", { class: cellClasses, style: style, role: "cell", key: cell.id, onClick: (e) => {
                 e.stopPropagation();
                 this.handleCellClick(row, cell);
             }, onDblClick: (e) => {
                 e.stopPropagation();
                 this.handleCellDoubleClick(row, cell);
-            } }, isCellEditing ? this.renderEditInput(cell) : this.renderCellContent(cell), hasError && (h("span", { class: "data-grid-cell-error-text" }, this.validationErrors[columnId]))));
+            } }, isCellEditing
+            ? this.renderEditInput(cell)
+            : this.renderCellContent(cell), hasError && (h("span", { class: "data-grid-cell-error-text" }, this.validationErrors[columnId]))));
     }
     renderCellContent(cell) {
         const rendered = this.flexRender(cell.column.columnDef.cell, cell.getContext());
         // If custom cell renderer returns something, use it
-        if (rendered !== undefined && rendered !== null && rendered !== cell.getValue()) {
+        if (rendered !== undefined &&
+            rendered !== null &&
+            rendered !== cell.getValue()) {
             return rendered;
         }
         // Default formatting
@@ -4133,9 +4188,12 @@ const BhDataGrid = class {
         const columnId = cell.column.id;
         const meta = cell.column.columnDef.meta;
         const currentValue = this.editingValues[columnId] ?? cell.getValue();
-        const inputType = meta?.type === 'number' ? 'number'
-            : meta?.type === 'date' ? 'date'
-                : meta?.type === 'boolean' ? 'checkbox'
+        const inputType = meta?.type === 'number'
+            ? 'number'
+            : meta?.type === 'date'
+                ? 'date'
+                : meta?.type === 'boolean'
+                    ? 'checkbox'
                     : 'text';
         if (meta?.type === 'boolean') {
             return (h("bh-checkbox", { size: "sm", checked: Boolean(currentValue), onBhChange: (e) => this.handleEditValueChange(columnId, e.detail.checked) }));
@@ -4152,36 +4210,51 @@ const BhDataGrid = class {
         const groupValue = row.groupingValue;
         const leafRows = row.getLeafRows();
         // Check if all leaf rows are selected for group selection
-        const allSelected = leafRows.every(r => r.getIsSelected());
-        const someSelected = leafRows.some(r => r.getIsSelected());
+        const allSelected = leafRows.every((r) => r.getIsSelected());
+        const someSelected = leafRows.some((r) => r.getIsSelected());
         const rowClasses = {
             'data-grid-row': true,
             'data-grid-row-group': true,
             'data-grid-row-group-expanded': isExpanded,
         };
         return [
-            h("div", { class: rowClasses, role: "row", "aria-expanded": isExpanded ? 'true' : 'false', key: row.id, onClick: () => this.handleGroupToggle(row) }, this.selectionMode === 'multiple-checkbox' && (h("div", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, h("bh-checkbox", { size: "sm", checked: allSelected, indeterminate: someSelected && !allSelected, onBhChange: () => {
-                    leafRows.forEach(r => r.toggleSelected(!allSelected));
+            h("tr", { class: rowClasses, role: "row", "aria-expanded": isExpanded ? 'true' : 'false', key: row.id, onClick: () => this.handleGroupToggle(row) }, this.selectionMode === 'multiple-checkbox' && (h("div", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, h("bh-checkbox", { size: "sm", checked: allSelected, indeterminate: someSelected && !allSelected, onBhChange: () => {
+                    leafRows.forEach((r) => r.toggleSelected(!allSelected));
                 } }))), h("div", { class: "data-grid-cell data-grid-cell-group-label", role: "cell" }, h("button", { class: "data-grid-group-toggle", "aria-label": isExpanded ? 'Collapse group' : 'Expand group' }, h("span", { class: "material-symbols-outlined" }, isExpanded ? 'expand_more' : 'chevron_right')), h("span", { class: "data-grid-group-label" }, h("span", { class: "data-grid-group-column" }, groupingColumnId, ": "), h("span", { class: "data-grid-group-value" }, String(groupValue))), h("span", { class: "data-grid-group-count" }, "(", leafRows.length, " ", leafRows.length === 1 ? 'item' : 'items', ")"))),
             // Render child rows if expanded
-            isExpanded && row.subRows.map(subRow => {
-                if (subRow.getIsGrouped()) {
-                    return this.renderGroupRow(subRow);
-                }
-                return this.renderDataRow(subRow);
-            }),
+            isExpanded &&
+                row.subRows.map((subRow) => {
+                    if (subRow.getIsGrouped()) {
+                        return this.renderGroupRow(subRow);
+                    }
+                    return this.renderDataRow(subRow);
+                }),
         ];
     }
     renderEmptyState() {
-        return (h("div", { class: "data-grid-empty" }, h("bh-empty-state", { emptyTitle: this.emptyTitle, description: this.emptyDescription })));
+        const columnCount = this.columns.length +
+            (this.selectionMode === 'single-radio' ||
+                this.selectionMode === 'multiple-checkbox'
+                ? 1
+                : 0) +
+            (this.enableExpansion && !this.enableGrouping ? 1 : 0) +
+            (this.enableEditing && this.showEditActions && this.editMode === 'row'
+                ? 1
+                : 0);
+        return (h("tbody", { class: "data-grid-body", role: "rowgroup" }, h("tr", { class: "data-grid-empty", role: "row" }, h("td", { role: "cell", colSpan: columnCount }, h("div", { class: "empty-state-wrapper" }, h("bh-empty-state", { emptyTitle: this.emptyTitle, description: this.emptyDescription }))))));
     }
     renderSkeleton() {
         const skeletonRows = Array.from({ length: this.skeletonRowCount }, (_, i) => i);
         const columnCount = this.columns.length +
-            (this.selectionMode === 'single-radio' || this.selectionMode === 'multiple-checkbox' ? 1 : 0) +
+            (this.selectionMode === 'single-radio' ||
+                this.selectionMode === 'multiple-checkbox'
+                ? 1
+                : 0) +
             (this.enableExpansion && !this.enableGrouping ? 1 : 0) +
-            (this.enableEditing && this.showEditActions && this.editMode === 'row' ? 1 : 0);
-        return (h("div", { class: "data-grid-body data-grid-skeleton", role: "rowgroup" }, skeletonRows.map(i => (h("div", { class: "data-grid-row data-grid-row-skeleton", role: "row", key: i }, Array.from({ length: columnCount }, (_, j) => (h("div", { class: "data-grid-cell", role: "cell", key: j }, h("bh-skeleton-loader", { width: "80%", height: "16px" })))))))));
+            (this.enableEditing && this.showEditActions && this.editMode === 'row'
+                ? 1
+                : 0);
+        return (h("div", { class: "data-grid-body data-grid-skeleton", role: "rowgroup" }, skeletonRows.map((i) => (h("div", { class: "data-grid-row data-grid-row-skeleton", role: "row", key: i }, Array.from({ length: columnCount }, (_, j) => (h("div", { class: "data-grid-cell", role: "cell", key: j }, h("bh-skeleton-loader", { width: "80%", height: "16px" })))))))));
     }
     renderLoadingOverlay() {
         if (!this.loading || this.loadingType !== 'spinner')
@@ -4192,7 +4265,7 @@ const BhDataGrid = class {
         if (!this.enablePagination || !this.table)
             return null;
         const rowCount = this.table.getFilteredRowModel().rows.length;
-        return (h("bh-pagination", { page: this.page, totalItems: rowCount, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, onBhPageChange: this.handlePaginationChange, onBhPageSizeChange: this.handlePaginationChange }));
+        return (h("bh-pagination", { page: this.page, totalItems: rowCount, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, showItemCount: false, compact: true, onBhPageChange: this.handlePaginationChange, onBhPageSizeChange: this.handlePaginationChange }));
     }
     // ===========================================================================
     // Main Render
@@ -4208,7 +4281,7 @@ const BhDataGrid = class {
         const containerStyle = this.maxHeight
             ? { maxHeight: this.maxHeight, overflowY: 'auto' }
             : {};
-        return (h("div", { key: 'aa7f1e09699fb99be7625f90b3b94fa9e6927498', class: gridClasses, role: "grid", "aria-busy": this.loading ? 'true' : 'false' }, this.captionPosition === 'top' && this.renderCaption(), this.renderGlobalFilter(), h("div", { key: '2929257ae04c88f8d225edac899fe7ec5f195fb2', class: "data-grid-container", style: containerStyle }, h("div", { key: '66bfba27da2199fbb1735229ea07e522b0f83dd1', class: "data-grid-table" }, this.renderHeader(), this.renderBody()), this.renderLoadingOverlay()), this.captionPosition === 'bottom' && this.renderCaption(), this.renderPagination()));
+        return (h("div", { key: '42e71a54dc147533e05938275bf747919b89aed6', class: gridClasses, role: "grid", "aria-busy": this.loading ? 'true' : 'false' }, this.captionPosition === 'top' && this.renderCaption(), this.renderGlobalFilter(), h("div", { key: 'f8aede627ce62a8195f439ff81aad478aa1544ba', class: "data-grid-container", style: containerStyle }, h("table", { key: '528f578c5a756960d139a5a1a5cd171961c97ceb', class: "data-grid-table" }, this.renderHeader(), this.renderBody()), this.renderLoadingOverlay()), this.captionPosition === 'bottom' && this.renderCaption(), this.renderPagination()));
     }
     static get watchers() { return {
         "data": ["handleDataChange"],