@k2b/ui 0.29.0 → 0.30.0

package/dist/browser/content/DataTable.js

@@ -17,21 +17,25 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-data-table__header-title>`
   _tmpl$4 = /*#__PURE__*/_$template(`<a class="k2b-data-table__header-content k2b-data-table__sort">`),
   _tmpl$5 = /*#__PURE__*/_$template(`<button type=button class="k2b-data-table__header-content k2b-data-table__sort">`),
   _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-data-table__header-content>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<tr aria-hidden=true><td class=k2b-data-table__fill>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<div class=k2b-data-table__sentinel aria-hidden=true>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<div role=region tabindex=0><table><thead class=k2b-data-table__head><tr class=k2b-data-table__head-row></tr></thead><tbody></tbody><!$><!/></table><!$><!/>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<th scope=col>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<tr><td class=k2b-data-table__empty>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<tr>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<td><div>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<tfoot class=k2b-data-table__foot data-sticky=true><tr class=k2b-data-table__foot-row>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<td class=k2b-data-table__footer-cell>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-data-table__scrollbar aria-hidden=true><span>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<footer>`);
-import { createContext, createEffect, createMemo, createSignal, createUniqueId, For, Match, onCleanup, onMount, Show, Switch, useContext } from "solid-js";
+  _tmpl$7 = /*#__PURE__*/_$template(`<caption class=k2b-sr-only>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<tr aria-hidden=true><td class=k2b-data-table__fill>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<div class=k2b-data-table__sentinel aria-hidden=true>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div role=region tabindex=0><table><!$><!/><thead class=k2b-data-table__head><tr class=k2b-data-table__head-row></tr></thead><tbody></tbody><!$><!/></table><!$><!/>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<th scope=col>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<tr><td class=k2b-data-table__empty>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<tr class=k2b-data-table__row data-loading=true aria-hidden=true>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<td><span class=k2b-data-table__skeleton>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<tr>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<td><div>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<tfoot class=k2b-data-table__foot data-sticky=true><tr class=k2b-data-table__foot-row>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<td class=k2b-data-table__footer-cell>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-data-table__scrollbar aria-hidden=true><span>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<div>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<span>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<footer>`);
+import { createContext, createEffect, createMemo, createSignal, createUniqueId, For, Match, on, onCleanup, onMount, Show, Switch, useContext } from "solid-js";
 import { Dynamic } from "solid-js/web";
+import { announce } from "../feedback/announce";
 import { suppressTextSelection } from "../internal/text-selection";
 import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
@@ -39,6 +43,7 @@ import { PanelHeader } from "../layout/PanelHeader";
 import { Paper } from "../surfaces/Paper";
 import Placeholder from "../surfaces/Placeholder";
 import { useDataTableMessages } from "./data-table-messages";
+const WIDE_TABLE_COLUMNS = 8;
 const DataTablePanelContext = createContext();
 const defaultRender = (value, locale, messages) => {
   if (value === null || value === undefined || value === "") return "—";
@@ -105,6 +110,7 @@ function DataTableRoot(props) {
   let previousRowsLength = props.rows.length;
   let previousLoadingMore = !!props.loadingMore;
   let previousHasMore = !!props.hasMore;
+  const loadingRows = () => Math.min(50, Math.max(1, Math.trunc(Number.isNaN(props.loadingRows) ? 5 : props.loadingRows ?? 5)));
   const rowId = row => props.getRowId?.(row);
   const isInteractive = () => !!props.selection || !!props.onRowClick || !!props.onRowDoubleClick;
   const shouldHoverRows = () => props.hoverRows ?? isInteractive();
@@ -372,6 +378,11 @@ function DataTableRoot(props) {
       if (scrollingTimeout !== undefined) clearTimeout(scrollingTimeout);
     });
   });
+
+  // Announced once per wait, outside the region that `aria-busy` keeps quiet.
+  createEffect(on(() => !!props.loading && props.rows.length === 0, waiting => {
+    if (waiting) announce(dataTableMessages().loadingRows);
+  }));
   createEffect(() => {
     const rowsLength = props.rows.length;
     const nextHasMore = !!props.hasMore;
@@ -429,28 +440,40 @@ function DataTableRoot(props) {
         onMouseLeave: () => setHoveredColumn(null),
         get children() {
           return [(() => {
-            var _el$0 = _$getNextElement(_tmpl$9),
+            var _el$0 = _$getNextElement(_tmpl$0),
               _el$1 = _el$0.firstChild,
-              _el$10 = _el$1.firstChild,
-              _el$11 = _el$10.firstChild,
-              _el$12 = _el$10.nextSibling,
-              _el$15 = _el$12.nextSibling,
-              [_el$16, _co$2] = _$getNextMarker(_el$15.nextSibling),
-              _el$18 = _el$1.nextSibling,
-              [_el$19, _co$3] = _$getNextMarker(_el$18.nextSibling);
+              _el$16 = _el$1.firstChild,
+              [_el$17, _co$2] = _$getNextMarker(_el$16.nextSibling),
+              _el$11 = _el$17.nextSibling,
+              _el$12 = _el$11.firstChild,
+              _el$13 = _el$11.nextSibling,
+              _el$18 = _el$13.nextSibling,
+              [_el$19, _co$3] = _$getNextMarker(_el$18.nextSibling),
+              _el$21 = _el$1.nextSibling,
+              [_el$22, _co$4] = _$getNextMarker(_el$21.nextSibling);
             _el$0.addEventListener("scroll", onScroll);
             var _ref$ = scrollRef;
             typeof _ref$ === "function" ? _$use(_ref$, _el$0) : scrollRef = _el$0;
             var _ref$2 = tableRef;
             typeof _ref$2 === "function" ? _$use(_ref$2, _el$1) : tableRef = _el$1;
-            _$insert(_el$11, _$createComponent(For, {
+            _$insert(_el$1, _$createComponent(Show, {
+              get when() {
+                return props.loading;
+              },
+              get children() {
+                var _el$10 = _$getNextElement(_tmpl$7);
+                _$insert(_el$10, () => dataTableMessages().loadingRows);
+                return _el$10;
+              }
+            }), _el$17, _co$2);
+            _$insert(_el$12, _$createComponent(For, {
               get each() {
                 return props.columns;
               },
               children: (col, index) => (() => {
-                var _el$20 = _$getNextElement(_tmpl$0);
-                _el$20.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                _$insert(_el$20, (() => {
+                var _el$23 = _$getNextElement(_tmpl$1);
+                _el$23.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+                _$insert(_el$23, (() => {
                   var _c$ = _$memo(() => !!props.renderHeader);
                   return () => _c$() ? props.renderHeader({
                     col,
@@ -458,14 +481,14 @@ function DataTableRoot(props) {
                   }) : renderHeaderDefault(col);
                 })());
                 _$effect(_p$ => {
-                  var _v$13 = `${col.headerClass ?? ""} ${col.class ?? ""}`,
-                    _v$14 = alignAttr(col),
-                    _v$15 = columnHighlighted(index()),
-                    _v$16 = ariaSortFor(col);
-                  _v$13 !== _p$.e && _$className(_el$20, _p$.e = _v$13);
-                  _v$14 !== _p$.t && _$setAttribute(_el$20, "data-align", _p$.t = _v$14);
-                  _v$15 !== _p$.a && _$setAttribute(_el$20, "data-highlighted", _p$.a = _v$15);
-                  _v$16 !== _p$.o && _$setAttribute(_el$20, "aria-sort", _p$.o = _v$16);
+                  var _v$15 = `${col.headerClass ?? ""} ${col.class ?? ""}`,
+                    _v$16 = alignAttr(col),
+                    _v$17 = columnHighlighted(index()),
+                    _v$18 = ariaSortFor(col);
+                  _v$15 !== _p$.e && _$className(_el$23, _p$.e = _v$15);
+                  _v$16 !== _p$.t && _$setAttribute(_el$23, "data-align", _p$.t = _v$16);
+                  _v$17 !== _p$.a && _$setAttribute(_el$23, "data-highlighted", _p$.a = _v$17);
+                  _v$18 !== _p$.o && _$setAttribute(_el$23, "aria-sort", _p$.o = _v$18);
                   return _p$;
                 }, {
                   e: undefined,
@@ -473,25 +496,65 @@ function DataTableRoot(props) {
                   a: undefined,
                   o: undefined
                 });
-                return _el$20;
+                return _el$23;
               })()
             }));
-            _$insert(_el$12, _$createComponent(Show, {
+            _$insert(_el$13, _$createComponent(Show, {
               get when() {
                 return props.rows.length > 0;
               },
               get fallback() {
-                return (() => {
-                  var _el$21 = _$getNextElement(_tmpl$1),
-                    _el$22 = _el$21.firstChild;
-                  _$insert(_el$22, _$createComponent(Placeholder, {
-                    get description() {
-                      return _$memo(() => props.empty ?? dataTableMessages().noRecords);
-                    }
-                  }));
-                  _$effect(() => _$setAttribute(_el$22, "colspan", props.columns.length));
-                  return _el$21;
-                })();
+                return _$createComponent(Show, {
+                  get when() {
+                    return props.loading;
+                  },
+                  get fallback() {
+                    return (() => {
+                      var _el$26 = _$getNextElement(_tmpl$10),
+                        _el$27 = _el$26.firstChild;
+                      _$insert(_el$27, _$createComponent(Placeholder, {
+                        get description() {
+                          return _$memo(() => props.empty ?? dataTableMessages().noRecords);
+                        }
+                      }));
+                      _$effect(() => _$setAttribute(_el$27, "colspan", props.columns.length));
+                      return _el$26;
+                    })();
+                  },
+                  get children() {
+                    return [_$createComponent(For, {
+                      get each() {
+                        return Array.from({
+                          length: loadingRows()
+                        });
+                      },
+                      children: () => (() => {
+                        var _el$28 = _$getNextElement(_tmpl$11);
+                        _$insert(_el$28, _$createComponent(For, {
+                          get each() {
+                            return props.columns;
+                          },
+                          children: col => (() => {
+                            var _el$29 = _$getNextElement(_tmpl$12);
+                            _$effect(() => _$setAttribute(_el$29, "data-align", alignAttr(col)));
+                            return _el$29;
+                          })()
+                        }));
+                        return _el$28;
+                      })()
+                    }), _$createComponent(Show, {
+                      get when() {
+                        return props.fillHeight;
+                      },
+                      get children() {
+                        var _el$24 = _$getNextElement(_tmpl$8),
+                          _el$25 = _el$24.firstChild;
+                        _$effect(() => _$setAttribute(_el$25, "colspan", props.columns.length));
+                        return _el$24;
+                      }
+                    })];
+                  }
+                });
               },
               get children() {
                 return [_$createComponent(For, {
@@ -502,30 +565,30 @@ function DataTableRoot(props) {
                     const id = () => rowId(row);
                     const isSelected = () => props.selection ? props.selection.selected().has(id() ?? "") : props.selectedRowId && id() === props.selectedRowId;
                     return (() => {
-                      var _el$23 = _$getNextElement(_tmpl$10);
-                      _el$23.$$keydown = e => onRowKeyDown(e, row);
-                      _el$23.$$contextmenu = () => props.onRowContextMenu?.(row);
-                      _el$23.$$dblclick = event => onRowDoubleClick(event, row);
-                      _el$23.$$click = event => onRowClick(event, row);
-                      _el$23.addEventListener("focus", () => {
+                      var _el$30 = _$getNextElement(_tmpl$13);
+                      _el$30.$$keydown = e => onRowKeyDown(e, row);
+                      _el$30.$$contextmenu = () => props.onRowContextMenu?.(row);
+                      _el$30.$$dblclick = event => onRowDoubleClick(event, row);
+                      _el$30.$$click = event => onRowClick(event, row);
+                      _el$30.addEventListener("focus", () => {
                         const key = id();
                         if (key !== undefined) props.selection?.markFocused(key);
                       });
                       _$use(element => {
                         const key = id();
                         if (key !== undefined) props.selection?.register(key, element);
-                      }, _el$23);
-                      _$insert(_el$23, _$createComponent(For, {
+                      }, _el$30);
+                      _$insert(_el$30, _$createComponent(For, {
                         get each() {
                           return props.columns;
                         },
                         children: (col, index) => {
                           const value = () => valueOf(row, col);
                           return (() => {
-                            var _el$24 = _$getNextElement(_tmpl$11),
-                              _el$25 = _el$24.firstChild;
-                            _el$24.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                            _$insert(_el$25, (() => {
+                            var _el$31 = _$getNextElement(_tmpl$14),
+                              _el$32 = _el$31.firstChild;
+                            _el$31.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+                            _$insert(_el$32, (() => {
                               var _c$2 = _$memo(() => !!props.renderCell);
                               return () => _c$2() ? props.renderCell({
                                 row,
@@ -538,18 +601,18 @@ function DataTableRoot(props) {
                               }) : renderValueDefault(value());
                             })());
                             _$effect(_p$ => {
-                              var _v$23 = `${col.cellClass ?? ""} ${col.class ?? ""}`,
-                                _v$24 = nowrapAttr(col),
-                                _v$25 = alignAttr(col),
-                                _v$26 = props.verticalAlign && props.verticalAlign !== "middle" ? props.verticalAlign : undefined,
-                                _v$27 = columnHighlighted(index()),
-                                _v$28 = cellContentClass();
-                              _v$23 !== _p$.e && _$className(_el$24, _p$.e = _v$23);
-                              _v$24 !== _p$.t && _$setAttribute(_el$24, "data-nowrap", _p$.t = _v$24);
-                              _v$25 !== _p$.a && _$setAttribute(_el$24, "data-align", _p$.a = _v$25);
-                              _v$26 !== _p$.o && _$setAttribute(_el$24, "data-valign", _p$.o = _v$26);
-                              _v$27 !== _p$.i && _$setAttribute(_el$24, "data-highlighted", _p$.i = _v$27);
-                              _v$28 !== _p$.n && _$className(_el$25, _p$.n = _v$28);
+                              var _v$25 = `${col.cellClass ?? ""} ${col.class ?? ""}`,
+                                _v$26 = nowrapAttr(col),
+                                _v$27 = alignAttr(col),
+                                _v$28 = props.verticalAlign && props.verticalAlign !== "middle" ? props.verticalAlign : undefined,
+                                _v$29 = columnHighlighted(index()),
+                                _v$30 = cellContentClass();
+                              _v$25 !== _p$.e && _$className(_el$31, _p$.e = _v$25);
+                              _v$26 !== _p$.t && _$setAttribute(_el$31, "data-nowrap", _p$.t = _v$26);
+                              _v$27 !== _p$.a && _$setAttribute(_el$31, "data-align", _p$.a = _v$27);
+                              _v$28 !== _p$.o && _$setAttribute(_el$31, "data-valign", _p$.o = _v$28);
+                              _v$29 !== _p$.i && _$setAttribute(_el$31, "data-highlighted", _p$.i = _v$29);
+                              _v$30 !== _p$.n && _$className(_el$32, _p$.n = _v$30);
                               return _p$;
                             }, {
                               e: undefined,
@@ -559,23 +622,23 @@ function DataTableRoot(props) {
                               i: undefined,
                               n: undefined
                             });
-                            return _el$24;
+                            return _el$31;
                           })();
                         }
                       }));
                       _$effect(_p$ => {
-                        var _v$17 = `k2b-data-table__row ${rowClass(row)}`,
-                          _v$18 = shouldHoverRows() ? "true" : undefined,
-                          _v$19 = shouldHoverRows() && isInteractive() ? "true" : undefined,
-                          _v$20 = isSelected() ? "true" : undefined,
-                          _v$21 = props.selection ? !!isSelected() : undefined,
-                          _v$22 = props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : undefined;
-                        _v$17 !== _p$.e && _$className(_el$23, _p$.e = _v$17);
-                        _v$18 !== _p$.t && _$setAttribute(_el$23, "data-hover", _p$.t = _v$18);
-                        _v$19 !== _p$.a && _$setAttribute(_el$23, "data-clickable", _p$.a = _v$19);
-                        _v$20 !== _p$.o && _$setAttribute(_el$23, "data-selected", _p$.o = _v$20);
-                        _v$21 !== _p$.i && _$setAttribute(_el$23, "aria-selected", _p$.i = _v$21);
-                        _v$22 !== _p$.n && _$setAttribute(_el$23, "tabindex", _p$.n = _v$22);
+                        var _v$19 = `k2b-data-table__row ${rowClass(row)}`,
+                          _v$20 = shouldHoverRows() ? "true" : undefined,
+                          _v$21 = shouldHoverRows() && isInteractive() ? "true" : undefined,
+                          _v$22 = isSelected() ? "true" : undefined,
+                          _v$23 = props.selection ? !!isSelected() : undefined,
+                          _v$24 = props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : undefined;
+                        _v$19 !== _p$.e && _$className(_el$30, _p$.e = _v$19);
+                        _v$20 !== _p$.t && _$setAttribute(_el$30, "data-hover", _p$.t = _v$20);
+                        _v$21 !== _p$.a && _$setAttribute(_el$30, "data-clickable", _p$.a = _v$21);
+                        _v$22 !== _p$.o && _$setAttribute(_el$30, "data-selected", _p$.o = _v$22);
+                        _v$23 !== _p$.i && _$setAttribute(_el$30, "aria-selected", _p$.i = _v$23);
+                        _v$24 !== _p$.n && _$setAttribute(_el$30, "tabindex", _p$.n = _v$24);
                         return _p$;
                       }, {
                         e: undefined,
@@ -586,7 +649,7 @@ function DataTableRoot(props) {
                         n: undefined
                       });
                       _$runHydrationEvents();
-                      return _el$23;
+                      return _el$30;
                     })();
                   }
                 }), _$createComponent(Show, {
@@ -594,10 +657,10 @@ function DataTableRoot(props) {
                     return props.fillHeight;
                   },
                   get children() {
-                    var _el$13 = _$getNextElement(_tmpl$7),
-                      _el$14 = _el$13.firstChild;
-                    _$effect(() => _$setAttribute(_el$14, "colspan", props.columns.length));
-                    return _el$13;
+                    var _el$14 = _$getNextElement(_tmpl$8),
+                      _el$15 = _el$14.firstChild;
+                    _$effect(() => _$setAttribute(_el$15, "colspan", props.columns.length));
+                    return _el$14;
                   }
                 })];
               }
@@ -607,18 +670,18 @@ function DataTableRoot(props) {
                 return props.footer;
               },
               children: footer => (() => {
-                var _el$26 = _$getNextElement(_tmpl$12),
-                  _el$27 = _el$26.firstChild;
-                _$insert(_el$27, _$createComponent(For, {
+                var _el$33 = _$getNextElement(_tmpl$15),
+                  _el$34 = _el$33.firstChild;
+                _$insert(_el$34, _$createComponent(For, {
                   get each() {
                     return props.columns;
                   },
                   children: (col, index) => {
                     const value = () => footer().values?.[col.id];
                     return (() => {
-                      var _el$28 = _$getNextElement(_tmpl$13);
-                      _el$28.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                      _$insert(_el$28, (() => {
+                      var _el$35 = _$getNextElement(_tmpl$16);
+                      _el$35.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+                      _$insert(_el$35, (() => {
                         var _c$3 = _$memo(() => !!footer().renderCell);
                         return () => _c$3() ? footer().renderCell({
                           col,
@@ -627,57 +690,61 @@ function DataTableRoot(props) {
                         }) : renderValueDefault(value());
                       })());
                       _$effect(_p$ => {
-                        var _v$29 = nowrapAttr(col),
-                          _v$30 = alignAttr(col),
-                          _v$31 = columnHighlighted(index());
-                        _v$29 !== _p$.e && _$setAttribute(_el$28, "data-nowrap", _p$.e = _v$29);
-                        _v$30 !== _p$.t && _$setAttribute(_el$28, "data-align", _p$.t = _v$30);
-                        _v$31 !== _p$.a && _$setAttribute(_el$28, "data-highlighted", _p$.a = _v$31);
+                        var _v$31 = nowrapAttr(col),
+                          _v$32 = alignAttr(col),
+                          _v$33 = columnHighlighted(index());
+                        _v$31 !== _p$.e && _$setAttribute(_el$35, "data-nowrap", _p$.e = _v$31);
+                        _v$32 !== _p$.t && _$setAttribute(_el$35, "data-align", _p$.t = _v$32);
+                        _v$33 !== _p$.a && _$setAttribute(_el$35, "data-highlighted", _p$.a = _v$33);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined,
                         a: undefined
                       });
-                      return _el$28;
+                      return _el$35;
                     })();
                   }
                 }));
-                return _el$26;
+                return _el$33;
               })()
-            }), _el$16, _co$2);
+            }), _el$19, _co$3);
             _$insert(_el$0, _$createComponent(Show, {
               get when() {
                 return shouldRenderLoadMoreSentinel();
               },
               get children() {
-                var _el$17 = _$getNextElement(_tmpl$8);
+                var _el$20 = _$getNextElement(_tmpl$9);
                 var _ref$3 = loadMoreRef;
-                typeof _ref$3 === "function" ? _$use(_ref$3, _el$17) : loadMoreRef = _el$17;
-                return _el$17;
+                typeof _ref$3 === "function" ? _$use(_ref$3, _el$20) : loadMoreRef = _el$20;
+                return _el$20;
               }
-            }), _el$19, _co$3);
+            }), _el$22, _co$4);
             _$effect(_p$ => {
               var _v$5 = labelledBy() ? undefined : props.ariaLabel ?? dataTableMessages().dataTable,
                 _v$6 = labelledBy(),
-                _v$7 = `k2b-table-wrap${props.scrollClass ? ` ${props.scrollClass}` : ""}`,
-                _v$8 = props.density === "compact" ? "compact" : undefined,
-                _v$9 = props.footer ? "true" : undefined,
-                _v$0 = surface(),
-                _v$1 = props.scrollPreserveKey || undefined,
-                _v$10 = tableClass(),
-                _v$11 = props.fillHeight ? "true" : undefined,
-                _v$12 = props.stickyHeader === false ? undefined : "true";
+                _v$7 = props.loading ? "true" : undefined,
+                _v$8 = `k2b-table-wrap${props.scrollClass ? ` ${props.scrollClass}` : ""}`,
+                _v$9 = props.density === "compact" ? "compact" : undefined,
+                _v$0 = props.footer ? "true" : undefined,
+                _v$1 = surface(),
+                _v$10 = props.scrollPreserveKey || undefined,
+                _v$11 = tableClass(),
+                _v$12 = props.fillHeight ? "true" : undefined,
+                _v$13 = props.columns.length > WIDE_TABLE_COLUMNS ? "true" : undefined,
+                _v$14 = props.stickyHeader === false ? undefined : "true";
               _v$5 !== _p$.e && _$setAttribute(_el$0, "aria-label", _p$.e = _v$5);
               _v$6 !== _p$.t && _$setAttribute(_el$0, "aria-labelledby", _p$.t = _v$6);
-              _v$7 !== _p$.a && _$className(_el$0, _p$.a = _v$7);
-              _v$8 !== _p$.o && _$setAttribute(_el$0, "data-density", _p$.o = _v$8);
-              _v$9 !== _p$.i && _$setAttribute(_el$0, "data-has-footer", _p$.i = _v$9);
-              _v$0 !== _p$.n && _$setAttribute(_el$0, "data-surface", _p$.n = _v$0);
-              _v$1 !== _p$.s && _$setAttribute(_el$0, "data-scroll-preserve", _p$.s = _v$1);
-              _v$10 !== _p$.h && _$className(_el$1, _p$.h = _v$10);
-              _v$11 !== _p$.r && _$setAttribute(_el$1, "data-fill", _p$.r = _v$11);
-              _v$12 !== _p$.d && _$setAttribute(_el$10, "data-sticky", _p$.d = _v$12);
+              _v$7 !== _p$.a && _$setAttribute(_el$0, "aria-busy", _p$.a = _v$7);
+              _v$8 !== _p$.o && _$className(_el$0, _p$.o = _v$8);
+              _v$9 !== _p$.i && _$setAttribute(_el$0, "data-density", _p$.i = _v$9);
+              _v$0 !== _p$.n && _$setAttribute(_el$0, "data-has-footer", _p$.n = _v$0);
+              _v$1 !== _p$.s && _$setAttribute(_el$0, "data-surface", _p$.s = _v$1);
+              _v$10 !== _p$.h && _$setAttribute(_el$0, "data-scroll-preserve", _p$.h = _v$10);
+              _v$11 !== _p$.r && _$className(_el$1, _p$.r = _v$11);
+              _v$12 !== _p$.d && _$setAttribute(_el$1, "data-fill", _p$.d = _v$12);
+              _v$13 !== _p$.l && _$setAttribute(_el$1, "data-wide", _p$.l = _v$13);
+              _v$14 !== _p$.u && _$setAttribute(_el$11, "data-sticky", _p$.u = _v$14);
               return _p$;
             }, {
               e: undefined,
@@ -689,28 +756,30 @@ function DataTableRoot(props) {
               s: undefined,
               h: undefined,
               r: undefined,
-              d: undefined
+              d: undefined,
+              l: undefined,
+              u: undefined
             });
             return _el$0;
           })(), _$createComponent(For, {
             each: ["y", "x"],
             children: axis => (() => {
-              var _el$29 = _$getNextElement(_tmpl$14),
-                _el$30 = _el$29.firstChild;
-              _el$29.addEventListener("pointercancel", event => event.currentTarget.releasePointerCapture(event.pointerId));
-              _el$29.$$pointerup = event => event.currentTarget.releasePointerCapture(event.pointerId);
-              _el$29.$$pointermove = event => {
+              var _el$36 = _$getNextElement(_tmpl$17),
+                _el$37 = _el$36.firstChild;
+              _el$36.addEventListener("pointercancel", event => event.currentTarget.releasePointerCapture(event.pointerId));
+              _el$36.$$pointerup = event => event.currentTarget.releasePointerCapture(event.pointerId);
+              _el$36.$$pointermove = event => {
                 if (event.currentTarget.hasPointerCapture(event.pointerId)) scrollFromPointer(event, axis);
               };
-              _el$29.$$pointerdown = event => startScrollbarDrag(event, axis);
-              _$setAttribute(_el$29, "data-axis", axis);
+              _el$36.$$pointerdown = event => startScrollbarDrag(event, axis);
+              _$setAttribute(_el$36, "data-axis", axis);
               _$effect(_p$ => {
-                var _v$32 = scrollbars()[axis].overflow ? "true" : undefined,
-                  _v$33 = `${scrollbars()[axis].offset}px`,
-                  _v$34 = `${scrollbars()[axis].size}px`;
-                _v$32 !== _p$.e && _$setAttribute(_el$29, "data-overflow", _p$.e = _v$32);
-                _v$33 !== _p$.t && _$setStyleProperty(_el$30, "--k2b-data-table-scroll-offset", _p$.t = _v$33);
-                _v$34 !== _p$.a && _$setStyleProperty(_el$30, "--k2b-data-table-scroll-size", _p$.a = _v$34);
+                var _v$34 = scrollbars()[axis].overflow ? "true" : undefined,
+                  _v$35 = `${scrollbars()[axis].offset}px`,
+                  _v$36 = `${scrollbars()[axis].size}px`;
+                _v$34 !== _p$.e && _$setAttribute(_el$36, "data-overflow", _p$.e = _v$34);
+                _v$35 !== _p$.t && _$setStyleProperty(_el$37, "--k2b-data-table-scroll-offset", _p$.t = _v$35);
+                _v$36 !== _p$.a && _$setStyleProperty(_el$37, "--k2b-data-table-scroll-size", _p$.a = _v$36);
                 return _p$;
               }, {
                 e: undefined,
@@ -718,7 +787,7 @@ function DataTableRoot(props) {
                 a: undefined
               });
               _$runHydrationEvents();
-              return _el$29;
+              return _el$36;
             })()
           })];
         }
@@ -753,14 +822,14 @@ const DataTableHeader = props => {
   const panel = useContext(DataTablePanelContext);
   panel?.registerHeading();
   return (() => {
-    var _el$31 = _$getNextElement(_tmpl$15);
-    _$insert(_el$31, _$createComponent(PanelHeader, {
+    var _el$38 = _$getNextElement(_tmpl$18);
+    _$insert(_el$38, _$createComponent(PanelHeader, {
       get title() {
         return (() => {
-          var _el$32 = _$getNextElement(_tmpl$16);
-          _$insert(_el$32, () => props.title);
-          _$effect(() => _$setAttribute(_el$32, "id", panel?.headingId));
-          return _el$32;
+          var _el$39 = _$getNextElement(_tmpl$19);
+          _$insert(_el$39, () => props.title);
+          _$effect(() => _$setAttribute(_el$39, "id", panel?.headingId));
+          return _el$39;
         })();
       },
       get subtitle() {
@@ -776,21 +845,21 @@ const DataTableHeader = props => {
         return props.size;
       }
     }));
-    _$effect(() => _$className(_el$31, `k2b-data-panel__header ${props.class ?? ""}`));
-    return _el$31;
+    _$effect(() => _$className(_el$38, `k2b-data-panel__header ${props.class ?? ""}`));
+    return _el$38;
   })();
 };
 const DataTableControls = props => (() => {
-  var _el$33 = _$getNextElement(_tmpl$15);
-  _$insert(_el$33, () => props.children);
-  _$effect(() => _$className(_el$33, `k2b-data-panel__controls ${props.class ?? ""}`));
-  return _el$33;
+  var _el$40 = _$getNextElement(_tmpl$18);
+  _$insert(_el$40, () => props.children);
+  _$effect(() => _$className(_el$40, `k2b-data-panel__controls ${props.class ?? ""}`));
+  return _el$40;
 })();
 const DataTablePanelFooter = props => (() => {
-  var _el$34 = _$getNextElement(_tmpl$17);
-  _$insert(_el$34, () => props.children);
-  _$effect(() => _$className(_el$34, `k2b-data-panel__footer ${props.class ?? ""}`));
-  return _el$34;
+  var _el$41 = _$getNextElement(_tmpl$20);
+  _$insert(_el$41, () => props.children);
+  _$effect(() => _$className(_el$41, `k2b-data-panel__footer ${props.class ?? ""}`));
+  return _el$41;
 })();
 const DataTable = DataTableRoot;
 DataTable.Panel = DataTablePanel;