npm - @actabldesign/bellhop-core - Versions diffs - 0.0.8 → 0.0.12 - Mend

@actabldesign/bellhop-core 0.0.8 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (466) hide show

package/dist/cjs/bh-data-grid.cjs.entry.js CHANGED Viewed

@@ -3411,7 +3411,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) {
@@ -3582,7 +3582,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);
         }
     }
@@ -3597,7 +3599,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);
         }
     }
@@ -3647,14 +3651,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,
@@ -3671,7 +3685,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,
             }));
@@ -3681,7 +3695,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;
@@ -3690,10 +3705,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,
@@ -3713,19 +3729,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;
     }
@@ -3805,10 +3827,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];
@@ -3919,8 +3941,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;
         });
@@ -3999,23 +4021,30 @@ const BhDataGrid = class {
         if (!this.table)
             return null;
         const headerGroups = this.table.getHeaderGroups();
-        return (index.h("div", { class: { 'data-grid-header': true, 'data-grid-header-sticky': this.stickyHeader } }, headerGroups.map(headerGroup => (index.h("div", { class: "data-grid-header-row", role: "row", key: headerGroup.id }, this.renderSelectionHeader(), this.enableExpansion && !this.enableGrouping && (index.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' && (index.h("div", { class: "data-grid-header-cell data-grid-cell-actions", role: "columnheader" }))))), this.showFilterRow && this.renderFilterRow()));
+        return (index.h("thead", { class: {
+                'data-grid-header': true,
+                'data-grid-header-sticky': this.stickyHeader,
+            } }, headerGroups.map((headerGroup) => (index.h("tr", { class: "data-grid-header-row", role: "row", key: headerGroup.id }, this.renderSelectionHeader(), this.enableExpansion && !this.enableGrouping && (index.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' && (index.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 index.h("div", { class: "data-grid-header-cell data-grid-cell-select", role: "columnheader" });
+            return (index.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 (index.h("div", { class: "data-grid-header-cell data-grid-cell-select", role: "columnheader" }, index.h("bh-checkbox", { size: "sm", checked: isAllSelected, indeterminate: isSomeSelected && !isAllSelected, onBhChange: () => this.table?.toggleAllRowsSelected() })));
+        return (index.h("th", { class: "data-grid-header-cell data-grid-cell-select", role: "columnheader", colSpan: 1 }, index.h("bh-checkbox", { size: "sm", checked: isAllSelected, indeterminate: isSomeSelected && !isAllSelected, onBhChange: () => this.table?.toggleAllRowsSelected() })));
     }
     renderHeaderCell(header) {
         if (header.isPlaceholder) {
-            return index.h("div", { class: "data-grid-header-cell", role: "columnheader", key: header.id });
+            return (index.h("th", { class: "data-grid-header-cell", role: "columnheader", key: header.id, colSpan: 1 }));
         }
         const canSort = header.column.getCanSort();
         const sortDirection = header.column.getIsSorted();
@@ -4029,21 +4058,32 @@ const BhDataGrid = class {
         const style = header.column.getSize()
             ? { width: `${header.column.getSize()}px` }
             : {};
-        return (index.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 }, index.h("span", { class: "data-grid-header-text" }, this.flexRender(header.column.columnDef.header, header.getContext())), canSort && sortDirection && (index.h("span", { class: "data-grid-sort-icon material-symbols-outlined" }, sortDirection === 'asc' ? 'arrow_upward' : 'arrow_downward'))));
+        return (index.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 }, index.h("span", { class: "data-grid-header-text" }, this.flexRender(header.column.columnDef.header, header.getContext())), canSort && sortDirection && (index.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 (index.h("div", { class: "data-grid-filter-row", role: "row" }, (this.selectionMode === 'single-radio' || this.selectionMode === 'multiple-checkbox') && (index.h("div", { class: "data-grid-filter-cell data-grid-cell-select", role: "cell" })), this.enableExpansion && !this.enableGrouping && (index.h("div", { class: "data-grid-filter-cell data-grid-cell-expand", role: "cell" })), headers.map(header => {
+        return (index.h("tr", { class: "data-grid-filter-row", role: "row" }, (this.selectionMode === 'single-radio' ||
+            this.selectionMode === 'multiple-checkbox') && (index.h("td", { class: "data-grid-filter-cell data-grid-cell-select", role: "cell" })), this.enableExpansion && !this.enableGrouping && (index.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 index.h("div", { class: "data-grid-filter-cell", role: "cell", key: header.id });
+                return (index.h("div", { class: "data-grid-filter-cell", role: "cell", key: header.id }));
             }
             const filterValue = header.column.getFilterValue() ?? '';
-            return (index.h("div", { class: "data-grid-filter-cell", role: "cell", key: header.id }, index.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' && (index.h("div", { class: "data-grid-filter-cell data-grid-cell-actions", role: "cell" }))));
+            return (index.h("td", { class: "data-grid-filter-cell", role: "cell", key: header.id }, index.h("span", { class: "data-grid-filter-icon material-symbols-outlined" }, "search"), index.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' && (index.h("td", { class: "data-grid-filter-cell data-grid-cell-actions", role: "cell" }))));
     }
     renderBody() {
         if (!this.table)
@@ -4057,7 +4097,7 @@ const BhDataGrid = class {
         if (rows.length === 0) {
             return this.renderEmptyState();
         }
-        return (index.h("div", { class: "data-grid-body", role: "rowgroup" }, rows.map(row => {
+        return (index.h("tbody", { class: "data-grid-body", role: "rowgroup" }, rows.map((row) => {
             if (row.getIsGrouped()) {
                 return this.renderGroupRow(row);
             }
@@ -4075,27 +4115,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 [
-            index.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 && (index.h("div", { class: "data-grid-cell data-grid-cell-expand", role: "cell", onClick: (e) => { e.stopPropagation(); } }, row.getCanExpand() && (index.h("button", { class: "data-grid-expand-btn", onClick: () => this.handleRowExpand(row), "aria-label": isExpanded ? 'Collapse row' : 'Expand row' }, index.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' && (index.h("div", { class: "data-grid-cell data-grid-cell-actions", role: "cell", onClick: (e) => e.stopPropagation() }, isRowEditing ? (index.h("div", { class: "data-grid-edit-actions" }, index.h("button", { class: "data-grid-action-btn", onClick: () => this.saveEditing(), title: "Save" }, index.h("span", { class: "material-symbols-outlined" }, "check")), index.h("button", { class: "data-grid-action-btn", onClick: () => this.cancelEditing(), title: "Cancel" }, index.h("span", { class: "material-symbols-outlined" }, "close")))) : (index.h("button", { class: "data-grid-action-btn", onClick: () => this.startEditing(row), title: "Edit" }, index.h("span", { class: "material-symbols-outlined" }, "edit")))))),
+            index.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 && (index.h("td", { class: "data-grid-cell data-grid-cell-expand", role: "cell", onClick: (e) => {
+                    e.stopPropagation();
+                } }, row.getCanExpand() && (index.h("button", { class: "data-grid-expand-btn", onClick: () => this.handleRowExpand(row), "aria-label": isExpanded ? 'Collapse row' : 'Expand row' }, index.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' && (index.h("td", { class: "data-grid-cell data-grid-cell-actions", role: "cell", onClick: (e) => e.stopPropagation() }, isRowEditing ? (index.h("div", { class: "data-grid-edit-actions" }, index.h("bh-button", { hierarchy: "tertiary", kind: "success", size: "sm", icon: "only", iconName: "check", onClick: () => this.saveEditing(), title: "Save" }, "Save"), index.h("bh-button", { hierarchy: "tertiary", kind: "destructive", size: "sm", icon: "only", iconName: "close", onClick: () => this.cancelEditing(), title: "Cancel" }, "Cancel"))) : (index.h("bh-button", { hierarchy: "tertiary", size: "sm", icon: "only", iconName: "edit", onClick: () => this.startEditing(row), title: "Edit" }, index.h("span", { class: "material-symbols-outlined" }, "edit")))))),
             // Expanded content
             isExpanded && this.enableExpansion && !this.enableGrouping && (index.h("div", { class: "data-grid-row-expansion", key: `${row.id}-expansion` }, index.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 (index.h("div", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, index.h("bh-radio-button", { selected: isSelected, onBhChange: () => {
+            return (index.h("td", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, index.h("bh-radio-button", { selected: isSelected, onBhChange: () => {
                     this.table?.resetRowSelection();
                     row.toggleSelected(true);
                 } })));
         }
         // Multiple checkbox
-        return (index.h("div", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, index.h("bh-checkbox", { size: "sm", checked: isSelected, onBhChange: () => row.toggleSelected() })));
+        return (index.h("td", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, index.h("bh-checkbox", { size: "sm", checked: isSelected, onBhChange: () => row.toggleSelected() })));
     }
     renderCell(row, cell) {
         const meta = cell.column.columnDef.meta;
@@ -4114,18 +4165,22 @@ const BhDataGrid = class {
         const style = cell.column.getSize()
             ? { width: `${cell.column.getSize()}px` }
             : {};
-        return (index.h("div", { class: cellClasses, style: style, role: "cell", key: cell.id, onClick: (e) => {
+        return (index.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 && (index.h("span", { class: "data-grid-cell-error-text" }, this.validationErrors[columnId]))));
+            } }, isCellEditing
+            ? this.renderEditInput(cell)
+            : this.renderCellContent(cell), hasError && (index.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
@@ -4135,9 +4190,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 (index.h("bh-checkbox", { size: "sm", checked: Boolean(currentValue), onBhChange: (e) => this.handleEditValueChange(columnId, e.detail.checked) }));
@@ -4154,36 +4212,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 [
-            index.h("div", { class: rowClasses, role: "row", "aria-expanded": isExpanded ? 'true' : 'false', key: row.id, onClick: () => this.handleGroupToggle(row) }, this.selectionMode === 'multiple-checkbox' && (index.h("div", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, index.h("bh-checkbox", { size: "sm", checked: allSelected, indeterminate: someSelected && !allSelected, onBhChange: () => {
-                    leafRows.forEach(r => r.toggleSelected(!allSelected));
+            index.h("tr", { class: rowClasses, role: "row", "aria-expanded": isExpanded ? 'true' : 'false', key: row.id, onClick: () => this.handleGroupToggle(row) }, this.selectionMode === 'multiple-checkbox' && (index.h("div", { class: "data-grid-cell data-grid-cell-select", role: "cell", onClick: (e) => e.stopPropagation() }, index.h("bh-checkbox", { size: "sm", checked: allSelected, indeterminate: someSelected && !allSelected, onBhChange: () => {
+                    leafRows.forEach((r) => r.toggleSelected(!allSelected));
                 } }))), index.h("div", { class: "data-grid-cell data-grid-cell-group-label", role: "cell" }, index.h("button", { class: "data-grid-group-toggle", "aria-label": isExpanded ? 'Collapse group' : 'Expand group' }, index.h("span", { class: "material-symbols-outlined" }, isExpanded ? 'expand_more' : 'chevron_right')), index.h("span", { class: "data-grid-group-label" }, index.h("span", { class: "data-grid-group-column" }, groupingColumnId, ": "), index.h("span", { class: "data-grid-group-value" }, String(groupValue))), index.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 (index.h("div", { class: "data-grid-empty" }, index.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 (index.h("tbody", { class: "data-grid-body", role: "rowgroup" }, index.h("tr", { class: "data-grid-empty", role: "row" }, index.h("td", { role: "cell", colSpan: columnCount }, index.h("div", { class: "empty-state-wrapper" }, index.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 (index.h("div", { class: "data-grid-body data-grid-skeleton", role: "rowgroup" }, skeletonRows.map(i => (index.h("div", { class: "data-grid-row data-grid-row-skeleton", role: "row", key: i }, Array.from({ length: columnCount }, (_, j) => (index.h("div", { class: "data-grid-cell", role: "cell", key: j }, index.h("bh-skeleton-loader", { width: "80%", height: "16px" })))))))));
+            (this.enableEditing && this.showEditActions && this.editMode === 'row'
+                ? 1
+                : 0);
+        return (index.h("div", { class: "data-grid-body data-grid-skeleton", role: "rowgroup" }, skeletonRows.map((i) => (index.h("div", { class: "data-grid-row data-grid-row-skeleton", role: "row", key: i }, Array.from({ length: columnCount }, (_, j) => (index.h("div", { class: "data-grid-cell", role: "cell", key: j }, index.h("bh-skeleton-loader", { width: "80%", height: "16px" })))))))));
     }
     renderLoadingOverlay() {
         if (!this.loading || this.loadingType !== 'spinner')
@@ -4194,7 +4267,7 @@ const BhDataGrid = class {
         if (!this.enablePagination || !this.table)
             return null;
         const rowCount = this.table.getFilteredRowModel().rows.length;
-        return (index.h("bh-pagination", { page: this.page, totalItems: rowCount, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, onBhPageChange: this.handlePaginationChange, onBhPageSizeChange: this.handlePaginationChange }));
+        return (index.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
@@ -4210,7 +4283,7 @@ const BhDataGrid = class {
         const containerStyle = this.maxHeight
             ? { maxHeight: this.maxHeight, overflowY: 'auto' }
             : {};
-        return (index.h("div", { key: 'aa7f1e09699fb99be7625f90b3b94fa9e6927498', class: gridClasses, role: "grid", "aria-busy": this.loading ? 'true' : 'false' }, this.captionPosition === 'top' && this.renderCaption(), this.renderGlobalFilter(), index.h("div", { key: '2929257ae04c88f8d225edac899fe7ec5f195fb2', class: "data-grid-container", style: containerStyle }, index.h("div", { key: '66bfba27da2199fbb1735229ea07e522b0f83dd1', class: "data-grid-table" }, this.renderHeader(), this.renderBody()), this.renderLoadingOverlay()), this.captionPosition === 'bottom' && this.renderCaption(), this.renderPagination()));
+        return (index.h("div", { key: '42e71a54dc147533e05938275bf747919b89aed6', class: gridClasses, role: "grid", "aria-busy": this.loading ? 'true' : 'false' }, this.captionPosition === 'top' && this.renderCaption(), this.renderGlobalFilter(), index.h("div", { key: 'f8aede627ce62a8195f439ff81aad478aa1544ba', class: "data-grid-container", style: containerStyle }, index.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"],