@k2b/ui 0.21.0 → 0.23.0

package/dist/browser/content/DataTable.js

@@ -1,40 +1,44 @@
 import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
-import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-import { className as _$className } from "solid-js/web";
-import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { setAttribute as _$setAttribute } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
 import { insert as _$insert } from "solid-js/web";
 var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-data-table__header-title>`),
   _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-data-table__header-subtitle>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<div class=k2b-data-table__header-content>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<a class="k2b-data-table__header-content k2b-data-table__sort"><span class=k2b-data-table__header-line><!$><!/><i aria-hidden=true>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<tr aria-hidden=true><td class=k2b-data-table__fill>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-data-table__sentinel aria-hidden=true>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<div role=region tabindex=0 class=k2b-table-wrap><table><thead class=k2b-data-table__head><tr class=k2b-data-table__head-row></tr></thead><tbody></tbody><!$><!/></table><!$><!/>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<th scope=col>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<tr><td class=k2b-data-table__empty>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<tr>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<td><div>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<tfoot class=k2b-data-table__foot data-sticky=true><tr class=k2b-data-table__foot-row>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<td class=k2b-data-table__footer-cell>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-data-table__scrollbar aria-hidden=true><span>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<span>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<footer>`);
-import { createContext, createEffect, createMemo, createSignal, createUniqueId, For, onCleanup, onMount, Show, useContext } from "solid-js";
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-data-table__header-line><!$><!/><i aria-hidden=true>`),
+  _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";
 import { Dynamic } from "solid-js/web";
+import { suppressTextSelection } from "../internal/text-selection";
 import { useLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { PanelHeader } from "../layout/PanelHeader";
 import { Paper } from "../surfaces/Paper";
 import Placeholder from "../surfaces/Placeholder";
+import { useDataTableMessages } from "./data-table-messages";
 const DataTablePanelContext = createContext();
 const defaultRender = (value, locale, messages) => {
   if (value === null || value === undefined || value === "") return "—";
@@ -71,6 +75,7 @@ const scrollbarMetrics = (viewportSize, contentSize, scrollOffset) => {
 };
 function DataTableRoot(props) {
   const messages = useUiMessages();
+  const dataTableMessages = useDataTableMessages();
   const locale = useLocale();
   const [hoveredColumn, setHoveredColumn] = createSignal(null);
   const [scrollbars, setScrollbars] = createSignal({
@@ -176,12 +181,15 @@ function DataTableRoot(props) {
     revealScrollbars();
   };
   const startScrollbarDrag = (event, axis) => {
+    if (event.button !== 0) return;
     event.preventDefault();
     const metrics = scrollbars()[axis];
     const rect = event.currentTarget.getBoundingClientRect();
     const pointerOffset = axis === "y" ? event.clientY - rect.top : event.clientX - rect.left;
     scrollbarDragOffset = event.target === event.currentTarget ? metrics.size / 2 : Math.min(metrics.size, Math.max(0, pointerOffset - metrics.offset));
     event.currentTarget.setPointerCapture(event.pointerId);
+    // The track's own pointerup or pointercancel ends the hold.
+    suppressTextSelection(event.pointerId);
     scrollFromPointer(event, axis);
   };
   const valueOf = (row, col) => {
@@ -216,34 +224,29 @@ function DataTableRoot(props) {
   const sortKeyOf = col => col.sortable === true ? col.id : typeof col.sortable === "string" ? col.sortable : null;
 
   /**
-   * Sorting is a link, not a handler: these tables are server-rendered, so the
-   * order belongs in the URL. Clicking the active column flips its direction.
+   * Sorting is a link by default: server-rendered tables keep the order in the
+   * URL. Client tables pass onSortChange instead. Clicking the active column
+   * flips its direction.
    */
-  const sortLinkFor = col => {
-    const key = sortKeyOf(col);
-    if (!key || !props.sortHref) return null;
-    const active = props.sort?.key === key;
-    const direction = active && props.sort?.direction === "desc" ? "asc" : "desc";
-    return {
-      href: props.sortHref({
-        key,
-        direction
-      }),
-      active,
-      direction
-    };
-  };
+  const nextSortFor = key => ({
+    key,
+    direction: props.sort?.key === key && props.sort?.direction === "desc" ? "asc" : "desc"
+  });
 
   /** Only a sortable column carries a sort state; the rest carry none at all. */
   const ariaSortFor = col => {
     const key = sortKeyOf(col);
-    if (!key || !props.sortHref && !props.renderHeader) return undefined;
+    if (!key || !props.sortHref && !props.onSortChange && !props.renderHeader) return undefined;
     if (props.sort?.key !== key) return "none";
     return props.sort?.direction === "asc" ? "ascending" : "descending";
   };
   const renderHeaderDefault = col => {
-    const sort = sortLinkFor(col);
-    const title = [(() => {
+    const key = sortKeyOf(col);
+    // Only how a column sorts decides the element. The order lives in its attributes, so a header button keeps
+    // keyboard focus when a click sorts the table and the reader can press it again to reverse the order.
+    const mode = createMemo(() => !key ? null : props.sortHref ? "link" : props.onSortChange ? "button" : null);
+    const active = () => key !== null && props.sort?.key === key;
+    const title = () => [(() => {
       var _el$ = _$getNextElement(_tmpl$);
       _$insert(_el$, () => renderColumnPart(col.header, col));
       return _el$;
@@ -257,37 +260,68 @@ function DataTableRoot(props) {
         return _el$2;
       }
     })];
-    if (!sort) return (() => {
-      var _el$3 = _$getNextElement(_tmpl$3);
-      _$insert(_el$3, title);
-      _$effect(() => _$setAttribute(_el$3, "data-align", alignAttr(col)));
-      return _el$3;
-    })();
-    return (() => {
-      var _el$4 = _$getNextElement(_tmpl$4),
-        _el$5 = _el$4.firstChild,
-        _el$7 = _el$5.firstChild,
-        [_el$8, _co$] = _$getNextMarker(_el$7.nextSibling),
-        _el$6 = _el$8.nextSibling;
-      _$insert(_el$5, title, _el$8, _co$);
+    const line = () => (() => {
+      var _el$3 = _$getNextElement(_tmpl$3),
+        _el$5 = _el$3.firstChild,
+        [_el$6, _co$] = _$getNextMarker(_el$5.nextSibling),
+        _el$4 = _el$6.nextSibling;
+      _$insert(_el$3, title, _el$6, _co$);
       _$effect(_p$ => {
-        var _v$ = sort.href,
-          _v$2 = alignAttr(col),
-          _v$3 = `k2b-data-table__sort-icon ti ${props.sort?.direction === "asc" && sort.active ? "ti-arrow-up" : "ti-arrow-down"}`,
-          _v$4 = sort.active ? "true" : undefined;
-        _v$ !== _p$.e && _$setAttribute(_el$4, "href", _p$.e = _v$);
-        _v$2 !== _p$.t && _$setAttribute(_el$4, "data-align", _p$.t = _v$2);
-        _v$3 !== _p$.a && _$className(_el$6, _p$.a = _v$3);
-        _v$4 !== _p$.o && _$setAttribute(_el$6, "data-active", _p$.o = _v$4);
+        var _v$ = `k2b-data-table__sort-icon ti ${active() && props.sort?.direction === "asc" ? "ti-arrow-up" : "ti-arrow-down"}`,
+          _v$2 = active() ? "true" : undefined;
+        _v$ !== _p$.e && _$className(_el$4, _p$.e = _v$);
+        _v$2 !== _p$.t && _$setAttribute(_el$4, "data-active", _p$.t = _v$2);
         return _p$;
       }, {
         e: undefined,
-        t: undefined,
-        a: undefined,
-        o: undefined
+        t: undefined
       });
-      return _el$4;
+      return _el$3;
     })();
+    return _$createComponent(Switch, {
+      get fallback() {
+        return (() => {
+          var _el$9 = _$getNextElement(_tmpl$6);
+          _$insert(_el$9, title);
+          _$effect(() => _$setAttribute(_el$9, "data-align", alignAttr(col)));
+          return _el$9;
+        })();
+      },
+      get children() {
+        return [_$createComponent(Match, {
+          get when() {
+            return mode() === "link";
+          },
+          get children() {
+            var _el$7 = _$getNextElement(_tmpl$4);
+            _$insert(_el$7, line);
+            _$effect(_p$ => {
+              var _v$3 = key ? props.sortHref?.(nextSortFor(key)) : undefined,
+                _v$4 = alignAttr(col);
+              _v$3 !== _p$.e && _$setAttribute(_el$7, "href", _p$.e = _v$3);
+              _v$4 !== _p$.t && _$setAttribute(_el$7, "data-align", _p$.t = _v$4);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined
+            });
+            return _el$7;
+          }
+        }), _$createComponent(Match, {
+          get when() {
+            return mode() === "button";
+          },
+          get children() {
+            var _el$8 = _$getNextElement(_tmpl$5);
+            _el$8.$$click = () => key && props.onSortChange?.(nextSortFor(key));
+            _$insert(_el$8, line);
+            _$effect(() => _$setAttribute(_el$8, "data-align", alignAttr(col)));
+            _$runHydrationEvents();
+            return _el$8;
+          }
+        })];
+      }
+    });
   };
   const renderValueDefault = value => defaultRender(value, locale(), messages());
   const renderCellDefault = (row, col) => renderValueDefault(valueOf(row, col));
@@ -358,7 +392,7 @@ function DataTableRoot(props) {
       return _$createComponent(Placeholder, {
         surface: "paper",
         get description() {
-          return _$memo(() => messages().noColumns);
+          return _$memo(() => dataTableMessages().noColumns);
         }
       });
     },
@@ -391,28 +425,28 @@ function DataTableRoot(props) {
         onMouseLeave: () => setHoveredColumn(null),
         get children() {
           return [(() => {
-            var _el$9 = _$getNextElement(_tmpl$7),
-              _el$0 = _el$9.firstChild,
+            var _el$0 = _$getNextElement(_tmpl$9),
               _el$1 = _el$0.firstChild,
               _el$10 = _el$1.firstChild,
-              _el$11 = _el$1.nextSibling,
-              _el$14 = _el$11.nextSibling,
-              [_el$15, _co$2] = _$getNextMarker(_el$14.nextSibling),
-              _el$17 = _el$0.nextSibling,
-              [_el$18, _co$3] = _$getNextMarker(_el$17.nextSibling);
-            _el$9.addEventListener("scroll", onScroll);
+              _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$0.addEventListener("scroll", onScroll);
             var _ref$ = scrollRef;
-            typeof _ref$ === "function" ? _$use(_ref$, _el$9) : scrollRef = _el$9;
+            typeof _ref$ === "function" ? _$use(_ref$, _el$0) : scrollRef = _el$0;
             var _ref$2 = tableRef;
-            typeof _ref$2 === "function" ? _$use(_ref$2, _el$0) : tableRef = _el$0;
-            _$insert(_el$10, _$createComponent(For, {
+            typeof _ref$2 === "function" ? _$use(_ref$2, _el$1) : tableRef = _el$1;
+            _$insert(_el$11, _$createComponent(For, {
               get each() {
                 return props.columns;
               },
               children: (col, index) => (() => {
-                var _el$19 = _$getNextElement(_tmpl$8);
-                _el$19.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                _$insert(_el$19, (() => {
+                var _el$20 = _$getNextElement(_tmpl$0);
+                _el$20.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+                _$insert(_el$20, (() => {
                   var _c$ = _$memo(() => !!props.renderHeader);
                   return () => _c$() ? props.renderHeader({
                     col,
@@ -420,14 +454,14 @@ function DataTableRoot(props) {
                   }) : renderHeaderDefault(col);
                 })());
                 _$effect(_p$ => {
-                  var _v$12 = `${col.headerClass ?? ""} ${col.class ?? ""}`,
-                    _v$13 = alignAttr(col),
-                    _v$14 = columnHighlighted(index()),
-                    _v$15 = ariaSortFor(col);
-                  _v$12 !== _p$.e && _$className(_el$19, _p$.e = _v$12);
-                  _v$13 !== _p$.t && _$setAttribute(_el$19, "data-align", _p$.t = _v$13);
-                  _v$14 !== _p$.a && _$setAttribute(_el$19, "data-highlighted", _p$.a = _v$14);
-                  _v$15 !== _p$.o && _$setAttribute(_el$19, "aria-sort", _p$.o = _v$15);
+                  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);
                   return _p$;
                 }, {
                   e: undefined,
@@ -435,24 +469,24 @@ function DataTableRoot(props) {
                   a: undefined,
                   o: undefined
                 });
-                return _el$19;
+                return _el$20;
               })()
             }));
-            _$insert(_el$11, _$createComponent(Show, {
+            _$insert(_el$12, _$createComponent(Show, {
               get when() {
                 return props.rows.length > 0;
               },
               get fallback() {
                 return (() => {
-                  var _el$20 = _$getNextElement(_tmpl$9),
-                    _el$21 = _el$20.firstChild;
-                  _$insert(_el$21, _$createComponent(Placeholder, {
+                  var _el$21 = _$getNextElement(_tmpl$1),
+                    _el$22 = _el$21.firstChild;
+                  _$insert(_el$22, _$createComponent(Placeholder, {
                     get description() {
-                      return _$memo(() => props.empty ?? messages().noRecords);
+                      return _$memo(() => props.empty ?? dataTableMessages().noRecords);
                     }
                   }));
-                  _$effect(() => _$setAttribute(_el$21, "colspan", props.columns.length));
-                  return _el$20;
+                  _$effect(() => _$setAttribute(_el$22, "colspan", props.columns.length));
+                  return _el$21;
                 })();
               },
               get children() {
@@ -464,30 +498,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$22 = _$getNextElement(_tmpl$0);
-                      _el$22.$$keydown = e => onRowKeyDown(e, row);
-                      _el$22.$$contextmenu = () => props.onRowContextMenu?.(row);
-                      _el$22.$$dblclick = event => onRowDoubleClick(event, row);
-                      _el$22.$$click = event => onRowClick(event, row);
-                      _el$22.addEventListener("focus", () => {
+                      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", () => {
                         const key = id();
                         if (key !== undefined) props.selection?.markFocused(key);
                       });
                       _$use(element => {
                         const key = id();
                         if (key !== undefined) props.selection?.register(key, element);
-                      }, _el$22);
-                      _$insert(_el$22, _$createComponent(For, {
+                      }, _el$23);
+                      _$insert(_el$23, _$createComponent(For, {
                         get each() {
                           return props.columns;
                         },
                         children: (col, index) => {
                           const value = () => valueOf(row, col);
                           return (() => {
-                            var _el$23 = _$getNextElement(_tmpl$1),
-                              _el$24 = _el$23.firstChild;
-                            _el$23.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                            _$insert(_el$24, (() => {
+                            var _el$24 = _$getNextElement(_tmpl$11),
+                              _el$25 = _el$24.firstChild;
+                            _el$24.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+                            _$insert(_el$25, (() => {
                               var _c$2 = _$memo(() => !!props.renderCell);
                               return () => _c$2() ? props.renderCell({
                                 row,
@@ -500,16 +534,16 @@ function DataTableRoot(props) {
                               }) : renderValueDefault(value());
                             })());
                             _$effect(_p$ => {
-                              var _v$22 = `${col.cellClass ?? ""} ${col.class ?? ""}`,
-                                _v$23 = alignAttr(col),
-                                _v$24 = props.verticalAlign && props.verticalAlign !== "middle" ? props.verticalAlign : undefined,
-                                _v$25 = columnHighlighted(index()),
-                                _v$26 = cellContentClass();
-                              _v$22 !== _p$.e && _$className(_el$23, _p$.e = _v$22);
-                              _v$23 !== _p$.t && _$setAttribute(_el$23, "data-align", _p$.t = _v$23);
-                              _v$24 !== _p$.a && _$setAttribute(_el$23, "data-valign", _p$.a = _v$24);
-                              _v$25 !== _p$.o && _$setAttribute(_el$23, "data-highlighted", _p$.o = _v$25);
-                              _v$26 !== _p$.i && _$className(_el$24, _p$.i = _v$26);
+                              var _v$23 = `${col.cellClass ?? ""} ${col.class ?? ""}`,
+                                _v$24 = alignAttr(col),
+                                _v$25 = props.verticalAlign && props.verticalAlign !== "middle" ? props.verticalAlign : undefined,
+                                _v$26 = columnHighlighted(index()),
+                                _v$27 = cellContentClass();
+                              _v$23 !== _p$.e && _$className(_el$24, _p$.e = _v$23);
+                              _v$24 !== _p$.t && _$setAttribute(_el$24, "data-align", _p$.t = _v$24);
+                              _v$25 !== _p$.a && _$setAttribute(_el$24, "data-valign", _p$.a = _v$25);
+                              _v$26 !== _p$.o && _$setAttribute(_el$24, "data-highlighted", _p$.o = _v$26);
+                              _v$27 !== _p$.i && _$className(_el$25, _p$.i = _v$27);
                               return _p$;
                             }, {
                               e: undefined,
@@ -518,23 +552,23 @@ function DataTableRoot(props) {
                               o: undefined,
                               i: undefined
                             });
-                            return _el$23;
+                            return _el$24;
                           })();
                         }
                       }));
                       _$effect(_p$ => {
-                        var _v$16 = `k2b-data-table__row ${rowClass(row)}`,
-                          _v$17 = shouldHoverRows() ? "true" : undefined,
-                          _v$18 = shouldHoverRows() && isInteractive() ? "true" : undefined,
-                          _v$19 = isSelected() ? "true" : undefined,
-                          _v$20 = props.selection ? !!isSelected() : undefined,
-                          _v$21 = props.selection ? props.selection.focused() === id() ? 0 : -1 : isInteractive() ? 0 : undefined;
-                        _v$16 !== _p$.e && _$className(_el$22, _p$.e = _v$16);
-                        _v$17 !== _p$.t && _$setAttribute(_el$22, "data-hover", _p$.t = _v$17);
-                        _v$18 !== _p$.a && _$setAttribute(_el$22, "data-clickable", _p$.a = _v$18);
-                        _v$19 !== _p$.o && _$setAttribute(_el$22, "data-selected", _p$.o = _v$19);
-                        _v$20 !== _p$.i && _$setAttribute(_el$22, "aria-selected", _p$.i = _v$20);
-                        _v$21 !== _p$.n && _$setAttribute(_el$22, "tabindex", _p$.n = _v$21);
+                        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);
                         return _p$;
                       }, {
                         e: undefined,
@@ -545,7 +579,7 @@ function DataTableRoot(props) {
                         n: undefined
                       });
                       _$runHydrationEvents();
-                      return _el$22;
+                      return _el$23;
                     })();
                   }
                 }), _$createComponent(Show, {
@@ -553,31 +587,31 @@ function DataTableRoot(props) {
                     return props.fillHeight;
                   },
                   get children() {
-                    var _el$12 = _$getNextElement(_tmpl$5),
-                      _el$13 = _el$12.firstChild;
-                    _$effect(() => _$setAttribute(_el$13, "colspan", props.columns.length));
-                    return _el$12;
+                    var _el$13 = _$getNextElement(_tmpl$7),
+                      _el$14 = _el$13.firstChild;
+                    _$effect(() => _$setAttribute(_el$14, "colspan", props.columns.length));
+                    return _el$13;
                   }
                 })];
               }
             }));
-            _$insert(_el$0, _$createComponent(Show, {
+            _$insert(_el$1, _$createComponent(Show, {
               get when() {
                 return props.footer;
               },
               children: footer => (() => {
-                var _el$25 = _$getNextElement(_tmpl$10),
-                  _el$26 = _el$25.firstChild;
-                _$insert(_el$26, _$createComponent(For, {
+                var _el$26 = _$getNextElement(_tmpl$12),
+                  _el$27 = _el$26.firstChild;
+                _$insert(_el$27, _$createComponent(For, {
                   get each() {
                     return props.columns;
                   },
                   children: (col, index) => {
                     const value = () => footer().values?.[col.id];
                     return (() => {
-                      var _el$27 = _$getNextElement(_tmpl$11);
-                      _el$27.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                      _$insert(_el$27, (() => {
+                      var _el$28 = _$getNextElement(_tmpl$13);
+                      _el$28.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+                      _$insert(_el$28, (() => {
                         var _c$3 = _$memo(() => !!footer().renderCell);
                         return () => _c$3() ? footer().renderCell({
                           col,
@@ -586,52 +620,54 @@ function DataTableRoot(props) {
                         }) : renderValueDefault(value());
                       })());
                       _$effect(_p$ => {
-                        var _v$27 = alignAttr(col),
-                          _v$28 = columnHighlighted(index());
-                        _v$27 !== _p$.e && _$setAttribute(_el$27, "data-align", _p$.e = _v$27);
-                        _v$28 !== _p$.t && _$setAttribute(_el$27, "data-highlighted", _p$.t = _v$28);
+                        var _v$28 = alignAttr(col),
+                          _v$29 = columnHighlighted(index());
+                        _v$28 !== _p$.e && _$setAttribute(_el$28, "data-align", _p$.e = _v$28);
+                        _v$29 !== _p$.t && _$setAttribute(_el$28, "data-highlighted", _p$.t = _v$29);
                         return _p$;
                       }, {
                         e: undefined,
                         t: undefined
                       });
-                      return _el$27;
+                      return _el$28;
                     })();
                   }
                 }));
-                return _el$25;
+                return _el$26;
               })()
-            }), _el$15, _co$2);
-            _$insert(_el$9, _$createComponent(Show, {
+            }), _el$16, _co$2);
+            _$insert(_el$0, _$createComponent(Show, {
               get when() {
                 return shouldRenderLoadMoreSentinel();
               },
               get children() {
-                var _el$16 = _$getNextElement(_tmpl$6);
+                var _el$17 = _$getNextElement(_tmpl$8);
                 var _ref$3 = loadMoreRef;
-                typeof _ref$3 === "function" ? _$use(_ref$3, _el$16) : loadMoreRef = _el$16;
-                return _el$16;
+                typeof _ref$3 === "function" ? _$use(_ref$3, _el$17) : loadMoreRef = _el$17;
+                return _el$17;
               }
-            }), _el$18, _co$3);
+            }), _el$19, _co$3);
             _$effect(_p$ => {
-              var _v$5 = labelledBy() ? undefined : props.ariaLabel ?? messages().dataTable,
+              var _v$5 = labelledBy() ? undefined : props.ariaLabel ?? dataTableMessages().dataTable,
                 _v$6 = labelledBy(),
-                _v$7 = props.density === "compact" ? "compact" : undefined,
-                _v$8 = props.footer ? "true" : undefined,
-                _v$9 = surface(),
-                _v$0 = props.scrollPreserveKey || undefined,
-                _v$1 = tableClass(),
-                _v$10 = props.fillHeight ? "true" : undefined,
-                _v$11 = props.stickyHeader === false ? undefined : "true";
-              _v$5 !== _p$.e && _$setAttribute(_el$9, "aria-label", _p$.e = _v$5);
-              _v$6 !== _p$.t && _$setAttribute(_el$9, "aria-labelledby", _p$.t = _v$6);
-              _v$7 !== _p$.a && _$setAttribute(_el$9, "data-density", _p$.a = _v$7);
-              _v$8 !== _p$.o && _$setAttribute(_el$9, "data-has-footer", _p$.o = _v$8);
-              _v$9 !== _p$.i && _$setAttribute(_el$9, "data-surface", _p$.i = _v$9);
-              _v$0 !== _p$.n && _$setAttribute(_el$9, "data-scroll-preserve", _p$.n = _v$0);
-              _v$1 !== _p$.s && _$className(_el$0, _p$.s = _v$1);
-              _v$10 !== _p$.h && _$setAttribute(_el$0, "data-fill", _p$.h = _v$10);
-              _v$11 !== _p$.r && _$setAttribute(_el$1, "data-sticky", _p$.r = _v$11);
+                _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$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);
               return _p$;
             }, {
               e: undefined,
@@ -642,28 +678,29 @@ function DataTableRoot(props) {
               n: undefined,
               s: undefined,
               h: undefined,
-              r: undefined
+              r: undefined,
+              d: undefined
             });
-            return _el$9;
+            return _el$0;
           })(), _$createComponent(For, {
             each: ["y", "x"],
             children: axis => (() => {
-              var _el$28 = _$getNextElement(_tmpl$12),
-                _el$29 = _el$28.firstChild;
-              _el$28.addEventListener("pointercancel", event => event.currentTarget.releasePointerCapture(event.pointerId));
-              _el$28.$$pointerup = event => event.currentTarget.releasePointerCapture(event.pointerId);
-              _el$28.$$pointermove = event => {
+              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 => {
                 if (event.currentTarget.hasPointerCapture(event.pointerId)) scrollFromPointer(event, axis);
               };
-              _el$28.$$pointerdown = event => startScrollbarDrag(event, axis);
-              _$setAttribute(_el$28, "data-axis", axis);
+              _el$29.$$pointerdown = event => startScrollbarDrag(event, axis);
+              _$setAttribute(_el$29, "data-axis", axis);
               _$effect(_p$ => {
-                var _v$29 = scrollbars()[axis].overflow ? "true" : undefined,
-                  _v$30 = `${scrollbars()[axis].offset}px`,
-                  _v$31 = `${scrollbars()[axis].size}px`;
-                _v$29 !== _p$.e && _$setAttribute(_el$28, "data-overflow", _p$.e = _v$29);
-                _v$30 !== _p$.t && _$setStyleProperty(_el$29, "--k2b-data-table-scroll-offset", _p$.t = _v$30);
-                _v$31 !== _p$.a && _$setStyleProperty(_el$29, "--k2b-data-table-scroll-size", _p$.a = _v$31);
+                var _v$30 = scrollbars()[axis].overflow ? "true" : undefined,
+                  _v$31 = `${scrollbars()[axis].offset}px`,
+                  _v$32 = `${scrollbars()[axis].size}px`;
+                _v$30 !== _p$.e && _$setAttribute(_el$29, "data-overflow", _p$.e = _v$30);
+                _v$31 !== _p$.t && _$setStyleProperty(_el$30, "--k2b-data-table-scroll-offset", _p$.t = _v$31);
+                _v$32 !== _p$.a && _$setStyleProperty(_el$30, "--k2b-data-table-scroll-size", _p$.a = _v$32);
                 return _p$;
               }, {
                 e: undefined,
@@ -671,7 +708,7 @@ function DataTableRoot(props) {
                 a: undefined
               });
               _$runHydrationEvents();
-              return _el$28;
+              return _el$29;
             })()
           })];
         }
@@ -706,14 +743,14 @@ const DataTableHeader = props => {
   const panel = useContext(DataTablePanelContext);
   panel?.registerHeading();
   return (() => {
-    var _el$30 = _$getNextElement(_tmpl$13);
-    _$insert(_el$30, _$createComponent(PanelHeader, {
+    var _el$31 = _$getNextElement(_tmpl$15);
+    _$insert(_el$31, _$createComponent(PanelHeader, {
       get title() {
         return (() => {
-          var _el$31 = _$getNextElement(_tmpl$14);
-          _$insert(_el$31, () => props.title);
-          _$effect(() => _$setAttribute(_el$31, "id", panel?.headingId));
-          return _el$31;
+          var _el$32 = _$getNextElement(_tmpl$16);
+          _$insert(_el$32, () => props.title);
+          _$effect(() => _$setAttribute(_el$32, "id", panel?.headingId));
+          return _el$32;
         })();
       },
       get subtitle() {
@@ -729,22 +766,22 @@ const DataTableHeader = props => {
         return props.size;
       }
     }));
-    _$effect(() => _$className(_el$30, `k2b-data-panel__header ${props.class ?? ""}`));
-    return _el$30;
+    _$effect(() => _$className(_el$31, `k2b-data-panel__header ${props.class ?? ""}`));
+    return _el$31;
   })();
 };
 const DataTableControls = props => (() => {
-  var _el$32 = _$getNextElement(_tmpl$13);
-  _$insert(_el$32, () => props.children);
-  _$effect(() => _$className(_el$32, `k2b-data-panel__controls ${props.class ?? ""}`));
-  return _el$32;
-})();
-const DataTablePanelFooter = props => (() => {
   var _el$33 = _$getNextElement(_tmpl$15);
   _$insert(_el$33, () => props.children);
-  _$effect(() => _$className(_el$33, `k2b-data-panel__footer ${props.class ?? ""}`));
+  _$effect(() => _$className(_el$33, `k2b-data-panel__controls ${props.class ?? ""}`));
   return _el$33;
 })();
+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;
+})();
 const DataTable = DataTableRoot;
 DataTable.Panel = DataTablePanel;
 DataTable.Header = DataTableHeader;