@k2b/ui 0.51.0 → 0.52.0

package/dist/browser/content/DataTable.js

@@ -25,10 +25,10 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-data-table__header-title>`
   _tmpl$1 = /*#__PURE__*/_$template(`<td><div>`),
   _tmpl$10 = /*#__PURE__*/_$template(`<div><dt></dt><dd>`),
   _tmpl$11 = /*#__PURE__*/_$template(`<caption class=k2b-sr-only>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<th scope=col class=k2b-data-table__details-toggle><span class=k2b-sr-only>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-data-table__sentinel aria-hidden=true>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<div role=region tabindex=0><table><!$><!/><thead class=k2b-data-table__head><tr class=k2b-data-table__head-row><!$><!/><!$><!/></tr></thead><!$><!/><!$><!/></table><!$><!/>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<th scope=col>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<div class=k2b-data-table__sentinel aria-hidden=true>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<div role=region tabindex=0><table><!$><!/><thead class=k2b-data-table__head><tr class=k2b-data-table__head-row></tr></thead><!$><!/><!$><!/></table><!$><!/>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<th scope=col>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<th scope=col class=k2b-data-table__details-toggle><span class=k2b-sr-only>`),
   _tmpl$16 = /*#__PURE__*/_$template(`<tr aria-hidden=true><td class=k2b-data-table__fill>`),
   _tmpl$17 = /*#__PURE__*/_$template(`<tbody>`),
   _tmpl$18 = /*#__PURE__*/_$template(`<tr>`),
@@ -256,6 +256,9 @@ function DataTableRoot(props) {
     const priorities = props.columns.map(col => col.priority ?? 1);
     return priorities.includes(3) ? "3" : priorities.includes(2) ? "2" : undefined;
   });
+  // Keep the row's last child a cell in both SSR and the browser. Trailing conditional anchors
+  // change WebKit's rendered text between the header and the first body row.
+  const headerColumns = createMemo(() => detailsPriority() ? [...props.columns, null] : props.columns);
   const hiddenColumns = () => props.columns.filter(col => priorityAttr(col));
   const columnCount = () => props.columns.length + (detailsPriority() ? 1 : 0);
   const [openDetails, setOpenDetails] = createSignal(new Set());
@@ -723,22 +726,18 @@ function DataTableRoot(props) {
         onMouseLeave: () => setHoveredColumn(null),
         get children() {
           return [(() => {
-            var _el$29 = _$getNextElement(_tmpl$14),
+            var _el$29 = _$getNextElement(_tmpl$13),
               _el$30 = _el$29.firstChild,
-              _el$40 = _el$30.firstChild,
-              [_el$41, _co$7] = _$getNextMarker(_el$40.nextSibling),
-              _el$32 = _el$41.nextSibling,
+              _el$34 = _el$30.firstChild,
+              [_el$35, _co$5] = _$getNextMarker(_el$34.nextSibling),
+              _el$32 = _el$35.nextSibling,
               _el$33 = _el$32.firstChild,
-              _el$36 = _el$33.firstChild,
-              [_el$37, _co$5] = _$getNextMarker(_el$36.nextSibling),
+              _el$36 = _el$32.nextSibling,
+              [_el$37, _co$6] = _$getNextMarker(_el$36.nextSibling),
               _el$38 = _el$37.nextSibling,
-              [_el$39, _co$6] = _$getNextMarker(_el$38.nextSibling),
-              _el$42 = _el$32.nextSibling,
-              [_el$43, _co$8] = _$getNextMarker(_el$42.nextSibling),
-              _el$44 = _el$43.nextSibling,
-              [_el$45, _co$9] = _$getNextMarker(_el$44.nextSibling),
-              _el$47 = _el$30.nextSibling,
-              [_el$48, _co$0] = _$getNextMarker(_el$47.nextSibling);
+              [_el$39, _co$7] = _$getNextMarker(_el$38.nextSibling),
+              _el$41 = _el$30.nextSibling,
+              [_el$42, _co$8] = _$getNextMarker(_el$41.nextSibling);
             _el$29.addEventListener("scroll", onScroll);
             var _ref$ = scrollRef;
             typeof _ref$ === "function" ? _$use(_ref$, _el$29) : scrollRef = _el$29;
@@ -753,15 +752,15 @@ function DataTableRoot(props) {
                 _$insert(_el$31, () => dataTableMessages().loadingRows);
                 return _el$31;
               }
-            }), _el$41, _co$7);
+            }), _el$35, _co$5);
             _$insert(_el$33, _$createComponent(For, {
               get each() {
-                return props.columns;
+                return headerColumns();
               },
-              children: (col, index) => (() => {
-                var _el$49 = _$getNextElement(_tmpl$15);
-                _el$49.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                _$insert(_el$49, (() => {
+              children: (col, index) => col ? (() => {
+                var _el$43 = _$getNextElement(_tmpl$14);
+                _el$43.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+                _$insert(_el$43, (() => {
                   var _c$ = _$memo(() => !!props.renderHeader);
                   return () => _c$() ? props.renderHeader({
                     col,
@@ -774,11 +773,11 @@ function DataTableRoot(props) {
                     _v$37 = priorityAttr(col),
                     _v$38 = columnHighlighted(index()),
                     _v$39 = ariaSortFor(col);
-                  _v$35 !== _p$.e && _$className(_el$49, _p$.e = _v$35);
-                  _v$36 !== _p$.t && _$setAttribute(_el$49, "data-align", _p$.t = _v$36);
-                  _v$37 !== _p$.a && _$setAttribute(_el$49, "data-priority", _p$.a = _v$37);
-                  _v$38 !== _p$.o && _$setAttribute(_el$49, "data-highlighted", _p$.o = _v$38);
-                  _v$39 !== _p$.i && _$setAttribute(_el$49, "aria-sort", _p$.i = _v$39);
+                  _v$35 !== _p$.e && _$className(_el$43, _p$.e = _v$35);
+                  _v$36 !== _p$.t && _$setAttribute(_el$43, "data-align", _p$.t = _v$36);
+                  _v$37 !== _p$.a && _$setAttribute(_el$43, "data-priority", _p$.a = _v$37);
+                  _v$38 !== _p$.o && _$setAttribute(_el$43, "data-highlighted", _p$.o = _v$38);
+                  _v$39 !== _p$.i && _$setAttribute(_el$43, "aria-sort", _p$.i = _v$39);
                   return _p$;
                 }, {
                   e: undefined,
@@ -787,77 +786,71 @@ function DataTableRoot(props) {
                   o: undefined,
                   i: undefined
                 });
-                return _el$49;
+                return _el$43;
+              })() : (() => {
+                var _el$44 = _$getNextElement(_tmpl$15),
+                  _el$45 = _el$44.firstChild;
+                _$insert(_el$45, () => dataTableMessages().details);
+                return _el$44;
               })()
-            }), _el$37, _co$5);
-            _$insert(_el$33, _$createComponent(Show, {
-              get when() {
-                return detailsPriority();
-              },
-              get children() {
-                var _el$34 = _$getNextElement(_tmpl$12),
-                  _el$35 = _el$34.firstChild;
-                _$insert(_el$35, () => dataTableMessages().details);
-                return _el$34;
-              }
-            }), _el$39, _co$6);
+            }));
             _$insert(_el$30, _$createComponent(Show, {
               get when() {
                 return props.rows.length > 0;
               },
               get fallback() {
                 return (() => {
-                  var _el$50 = _$getNextElement(_tmpl$17);
-                  _$insert(_el$50, _$createComponent(Show, {
+                  var _el$46 = _$getNextElement(_tmpl$17);
+                  _$insert(_el$46, _$createComponent(Show, {
                     get when() {
                       return props.loading;
                     },
                     get fallback() {
                       return (() => {
-                        var _el$53 = _$getNextElement(_tmpl$18);
-                        _$insert(_el$53, _$createComponent(Show, {
+                        var _el$49 = _$getNextElement(_tmpl$18);
+                        _$insert(_el$49, _$createComponent(Show, {
                           get when() {
                             return props.query?.trim();
                           },
                           get fallback() {
                             return (() => {
-                              var _el$54 = _$getNextElement(_tmpl$19);
-                              _$insert(_el$54, _$createComponent(Placeholder, {
+                              var _el$50 = _$getNextElement(_tmpl$19);
+                              _$insert(_el$50, _$createComponent(Placeholder, {
                                 get description() {
                                   return _$memo(() => props.empty ?? dataTableMessages().noRecords);
                                 }
                               }));
-                              _$effect(() => _$setAttribute(_el$54, "colspan", columnCount()));
-                              return _el$54;
+                              _$effect(() => _$setAttribute(_el$50, "colspan", columnCount()));
+                              return _el$50;
                             })();
                           },
                           children: query => (() => {
-                            var _el$55 = _$getNextElement(_tmpl$21),
-                              _el$58 = _el$55.firstChild,
-                              [_el$59, _co$1] = _$getNextMarker(_el$58.nextSibling),
-                              _el$56 = _el$59.nextSibling,
-                              _el$60 = _el$56.nextSibling,
-                              [_el$61, _co$10] = _$getNextMarker(_el$60.nextSibling);
-                            _$insert(_el$55, () => dataTableMessages().noMatch({
+                            var _el$51 = _$getNextElement(_tmpl$21),
+                              _el$54 = _el$51.firstChild,
+                              [_el$55, _co$9] = _$getNextMarker(_el$54.nextSibling),
+                              _el$52 = _el$55.nextSibling,
+                              _el$56 = _el$52.nextSibling,
+                              [_el$57, _co$0] = _$getNextMarker(_el$56.nextSibling);
+                            _$insert(_el$51, () => dataTableMessages().noMatch({
                               query: query()
-                            }), _el$59, _co$1);
-                            _$insert(_el$55, _$createComponent(Show, {
+                            }), _el$55, _co$9);
+                            _$insert(_el$51, _$createComponent(Show, {
                               get when() {
                                 return props.onClearQuery;
                               },
                               get children() {
-                                var _el$57 = _$getNextElement(_tmpl$20);
-                                _el$57.$$click = () => props.onClearQuery?.();
-                                _$insert(_el$57, () => dataTableMessages().clearSearch);
+                                var _el$53 = _$getNextElement(_tmpl$20);
+                                _el$53.$$click = () => props.onClearQuery?.();
+                                _$insert(_el$53, () => dataTableMessages().clearSearch);
                                 _$runHydrationEvents();
-                                return _el$57;
+                                return _el$53;
                               }
-                            }), _el$61, _co$10);
-                            _$effect(() => _$setAttribute(_el$55, "colspan", columnCount()));
-                            return _el$55;
+                            }), _el$57, _co$0);
+                            _$effect(() => _$setAttribute(_el$51, "colspan", columnCount()));
+                            return _el$51;
                           })()
                         }));
-                        return _el$53;
+                        return _el$49;
                       })();
                     },
                     get children() {
@@ -868,54 +861,54 @@ function DataTableRoot(props) {
                           });
                         },
                         children: () => (() => {
-                          var _el$62 = _$getNextElement(_tmpl$23),
-                            _el$64 = _el$62.firstChild,
-                            [_el$65, _co$11] = _$getNextMarker(_el$64.nextSibling),
-                            _el$66 = _el$65.nextSibling,
-                            [_el$67, _co$12] = _$getNextMarker(_el$66.nextSibling);
-                          _$insert(_el$62, _$createComponent(For, {
+                          var _el$58 = _$getNextElement(_tmpl$23),
+                            _el$60 = _el$58.firstChild,
+                            [_el$61, _co$1] = _$getNextMarker(_el$60.nextSibling),
+                            _el$62 = _el$61.nextSibling,
+                            [_el$63, _co$10] = _$getNextMarker(_el$62.nextSibling);
+                          _$insert(_el$58, _$createComponent(For, {
                             get each() {
                               return props.columns;
                             },
                             children: col => (() => {
-                              var _el$68 = _$getNextElement(_tmpl$24);
+                              var _el$64 = _$getNextElement(_tmpl$24);
                               _$effect(_p$ => {
                                 var _v$40 = alignAttr(col),
                                   _v$41 = priorityAttr(col);
-                                _v$40 !== _p$.e && _$setAttribute(_el$68, "data-align", _p$.e = _v$40);
-                                _v$41 !== _p$.t && _$setAttribute(_el$68, "data-priority", _p$.t = _v$41);
+                                _v$40 !== _p$.e && _$setAttribute(_el$64, "data-align", _p$.e = _v$40);
+                                _v$41 !== _p$.t && _$setAttribute(_el$64, "data-priority", _p$.t = _v$41);
                                 return _p$;
                               }, {
                                 e: undefined,
                                 t: undefined
                               });
-                              return _el$68;
+                              return _el$64;
                             })()
-                          }), _el$65, _co$11);
-                          _$insert(_el$62, _$createComponent(Show, {
+                          }), _el$61, _co$1);
+                          _$insert(_el$58, _$createComponent(Show, {
                             get when() {
                               return detailsPriority();
                             },
                             get children() {
                               return _$getNextElement(_tmpl$22);
                             }
-                          }), _el$67, _co$12);
-                          return _el$62;
+                          }), _el$63, _co$10);
+                          return _el$58;
                         })()
                       }), _$createComponent(Show, {
                         get when() {
                           return props.fillHeight;
                         },
                         get children() {
-                          var _el$51 = _$getNextElement(_tmpl$16),
-                            _el$52 = _el$51.firstChild;
-                          _$effect(() => _$setAttribute(_el$52, "colspan", columnCount()));
-                          return _el$51;
+                          var _el$47 = _$getNextElement(_tmpl$16),
+                            _el$48 = _el$47.firstChild;
+                          _$effect(() => _$setAttribute(_el$48, "colspan", columnCount()));
+                          return _el$47;
                         }
                       })];
                     }
                   }));
-                  return _el$50;
+                  return _el$46;
                 })();
               },
               get children() {
@@ -925,29 +918,29 @@ function DataTableRoot(props) {
                   },
                   get fallback() {
                     return (() => {
-                      var _el$69 = _$getNextElement(_tmpl$25),
-                        _el$72 = _el$69.firstChild,
-                        [_el$73, _co$13] = _$getNextMarker(_el$72.nextSibling),
-                        _el$74 = _el$73.nextSibling,
-                        [_el$75, _co$14] = _$getNextMarker(_el$74.nextSibling);
-                      _$insert(_el$69, _$createComponent(For, {
+                      var _el$65 = _$getNextElement(_tmpl$25),
+                        _el$68 = _el$65.firstChild,
+                        [_el$69, _co$11] = _$getNextMarker(_el$68.nextSibling),
+                        _el$70 = _el$69.nextSibling,
+                        [_el$71, _co$12] = _$getNextMarker(_el$70.nextSibling);
+                      _$insert(_el$65, _$createComponent(For, {
                         get each() {
                           return props.rows;
                         },
                         children: (row, index) => renderRow(row, () => index() === props.rows.length - 1)
-                      }), _el$73, _co$13);
-                      _$insert(_el$69, _$createComponent(Show, {
+                      }), _el$69, _co$11);
+                      _$insert(_el$65, _$createComponent(Show, {
                         get when() {
                           return props.fillHeight;
                         },
                         get children() {
-                          var _el$70 = _$getNextElement(_tmpl$16),
-                            _el$71 = _el$70.firstChild;
-                          _$effect(() => _$setAttribute(_el$71, "colspan", columnCount()));
-                          return _el$70;
+                          var _el$66 = _$getNextElement(_tmpl$16),
+                            _el$67 = _el$66.firstChild;
+                          _$effect(() => _$setAttribute(_el$67, "colspan", columnCount()));
+                          return _el$66;
                         }
-                      }), _el$75, _co$14);
-                      return _el$69;
+                      }), _el$71, _co$12);
+                      return _el$65;
                     })();
                   },
                   children: list => [_$createComponent(For, {
@@ -955,71 +948,71 @@ function DataTableRoot(props) {
                       return list();
                     },
                     children: group => (() => {
-                      var _el$79 = _$getNextElement(_tmpl$27),
-                        _el$80 = _el$79.firstChild,
+                      var _el$75 = _$getNextElement(_tmpl$27),
+                        _el$76 = _el$75.firstChild,
+                        _el$77 = _el$76.firstChild,
+                        _el$84 = _el$77.firstChild,
+                        [_el$85, _co$14] = _$getNextMarker(_el$84.nextSibling),
+                        _el$78 = _el$85.nextSibling,
+                        _el$79 = _el$78.firstChild,
+                        _el$80 = _el$79.nextSibling,
                         _el$81 = _el$80.firstChild,
-                        _el$88 = _el$81.firstChild,
-                        [_el$89, _co$16] = _$getNextMarker(_el$88.nextSibling),
-                        _el$82 = _el$89.nextSibling,
-                        _el$83 = _el$82.firstChild,
-                        _el$84 = _el$83.nextSibling,
-                        _el$85 = _el$84.firstChild,
-                        _el$86 = _el$85.nextSibling,
-                        [_el$87, _co$15] = _$getNextMarker(_el$86.nextSibling),
-                        _el$90 = _el$80.nextSibling,
-                        [_el$91, _co$17] = _$getNextMarker(_el$90.nextSibling);
-                      _$insert(_el$81, () => group.label || "—", _el$89, _co$16);
-                      _$insert(_el$83, () => group.rows.length);
-                      _$insert(_el$84, () => dataTableMessages().rowCount({
+                        _el$82 = _el$81.nextSibling,
+                        [_el$83, _co$13] = _$getNextMarker(_el$82.nextSibling),
+                        _el$86 = _el$76.nextSibling,
+                        [_el$87, _co$15] = _$getNextMarker(_el$86.nextSibling);
+                      _$insert(_el$77, () => group.label || "—", _el$85, _co$14);
+                      _$insert(_el$79, () => group.rows.length);
+                      _$insert(_el$80, () => dataTableMessages().rowCount({
                         count: group.rows.length
-                      }), _el$87, _co$15);
-                      _$insert(_el$79, _$createComponent(For, {
+                      }), _el$83, _co$13);
+                      _$insert(_el$75, _$createComponent(For, {
                         get each() {
                           return group.rows;
                         },
                         children: (row, index) => renderRow(row, () => index() === group.rows.length - 1)
-                      }), _el$91, _co$17);
-                      _$effect(() => _$setAttribute(_el$81, "colspan", columnCount()));
-                      return _el$79;
+                      }), _el$87, _co$15);
+                      _$effect(() => _$setAttribute(_el$77, "colspan", columnCount()));
+                      return _el$75;
                     })()
                   }), _$createComponent(Show, {
                     get when() {
                       return props.fillHeight;
                     },
                     get children() {
-                      var _el$76 = _$getNextElement(_tmpl$26),
-                        _el$77 = _el$76.firstChild,
-                        _el$78 = _el$77.firstChild;
-                      _$effect(() => _$setAttribute(_el$78, "colspan", columnCount()));
-                      return _el$76;
+                      var _el$72 = _$getNextElement(_tmpl$26),
+                        _el$73 = _el$72.firstChild,
+                        _el$74 = _el$73.firstChild;
+                      _$effect(() => _$setAttribute(_el$74, "colspan", columnCount()));
+                      return _el$72;
                     }
                   })]
                 });
               }
-            }), _el$43, _co$8);
+            }), _el$37, _co$6);
             _$insert(_el$30, _$createComponent(Show, {
               get when() {
                 return props.footer;
               },
               children: footer => (() => {
-                var _el$92 = _$getNextElement(_tmpl$30),
-                  _el$93 = _el$92.firstChild,
-                  _el$95 = _el$93.firstChild,
-                  [_el$96, _co$18] = _$getNextMarker(_el$95.nextSibling),
-                  _el$97 = _el$96.nextSibling,
-                  [_el$98, _co$19] = _$getNextMarker(_el$97.nextSibling),
-                  _el$102 = _el$93.nextSibling,
-                  [_el$103, _co$20] = _$getNextMarker(_el$102.nextSibling);
-                _$insert(_el$93, _$createComponent(For, {
+                var _el$88 = _$getNextElement(_tmpl$30),
+                  _el$89 = _el$88.firstChild,
+                  _el$91 = _el$89.firstChild,
+                  [_el$92, _co$16] = _$getNextMarker(_el$91.nextSibling),
+                  _el$93 = _el$92.nextSibling,
+                  [_el$94, _co$17] = _$getNextMarker(_el$93.nextSibling),
+                  _el$98 = _el$89.nextSibling,
+                  [_el$99, _co$18] = _$getNextMarker(_el$98.nextSibling);
+                _$insert(_el$89, _$createComponent(For, {
                   get each() {
                     return props.columns;
                   },
                   children: (col, index) => {
                     const value = () => footer().values?.[col.id];
                     return (() => {
-                      var _el$104 = _$getNextElement(_tmpl$31);
-                      _el$104.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
-                      _$insert(_el$104, (() => {
+                      var _el$100 = _$getNextElement(_tmpl$31);
+                      _el$100.addEventListener("mouseenter", () => setHoveredColumnIfEnabled(index()));
+                      _$insert(_el$100, (() => {
                         var _c$2 = _$memo(() => !!footer().renderCell);
                         return () => _c$2() ? footer().renderCell({
                           col,
@@ -1032,10 +1025,10 @@ function DataTableRoot(props) {
                           _v$43 = alignAttr(col),
                           _v$44 = priorityAttr(col),
                           _v$45 = columnHighlighted(index());
-                        _v$42 !== _p$.e && _$setAttribute(_el$104, "data-nowrap", _p$.e = _v$42);
-                        _v$43 !== _p$.t && _$setAttribute(_el$104, "data-align", _p$.t = _v$43);
-                        _v$44 !== _p$.a && _$setAttribute(_el$104, "data-priority", _p$.a = _v$44);
-                        _v$45 !== _p$.o && _$setAttribute(_el$104, "data-highlighted", _p$.o = _v$45);
+                        _v$42 !== _p$.e && _$setAttribute(_el$100, "data-nowrap", _p$.e = _v$42);
+                        _v$43 !== _p$.t && _$setAttribute(_el$100, "data-align", _p$.t = _v$43);
+                        _v$44 !== _p$.a && _$setAttribute(_el$100, "data-priority", _p$.a = _v$44);
+                        _v$45 !== _p$.o && _$setAttribute(_el$100, "data-highlighted", _p$.o = _v$45);
                         return _p$;
                       }, {
                         e: undefined,
@@ -1043,36 +1036,36 @@ function DataTableRoot(props) {
                         a: undefined,
                         o: undefined
                       });
-                      return _el$104;
+                      return _el$100;
                     })();
                   }
-                }), _el$96, _co$18);
-                _$insert(_el$93, _$createComponent(Show, {
+                }), _el$92, _co$16);
+                _$insert(_el$89, _$createComponent(Show, {
                   get when() {
                     return detailsPriority();
                   },
                   get children() {
                     return _$getNextElement(_tmpl$28);
                   }
-                }), _el$98, _co$19);
-                _$insert(_el$92, _$createComponent(Show, {
+                }), _el$94, _co$17);
+                _$insert(_el$88, _$createComponent(Show, {
                   get when() {
                     return detailsPriority();
                   },
                   get children() {
-                    var _el$99 = _$getNextElement(_tmpl$29),
-                      _el$100 = _el$99.firstChild,
-                      _el$101 = _el$100.firstChild;
-                    _$insert(_el$101, _$createComponent(For, {
+                    var _el$95 = _$getNextElement(_tmpl$29),
+                      _el$96 = _el$95.firstChild,
+                      _el$97 = _el$96.firstChild;
+                    _$insert(_el$97, _$createComponent(For, {
                       get each() {
                         return hiddenColumns();
                       },
                       children: col => (() => {
-                        var _el$105 = _$getNextElement(_tmpl$10),
-                          _el$106 = _el$105.firstChild,
-                          _el$107 = _el$106.nextSibling;
-                        _$insert(_el$106, () => detailLabel(col));
-                        _$insert(_el$107, (() => {
+                        var _el$101 = _$getNextElement(_tmpl$10),
+                          _el$102 = _el$101.firstChild,
+                          _el$103 = _el$102.nextSibling;
+                        _$insert(_el$102, () => detailLabel(col));
+                        _$insert(_el$103, (() => {
                           var _c$3 = _$memo(() => !!footer().renderCell);
                           return () => _c$3() ? footer().renderCell({
                             col,
@@ -1080,28 +1073,28 @@ function DataTableRoot(props) {
                             render: v => renderTypedValue(col, v)
                           }) : renderTypedValue(col, footer().values?.[col.id]);
                         })());
-                        _$effect(() => _$setAttribute(_el$105, "data-priority", priorityAttr(col)));
-                        return _el$105;
+                        _$effect(() => _$setAttribute(_el$101, "data-priority", priorityAttr(col)));
+                        return _el$101;
                       })()
                     }));
-                    _$effect(() => _$setAttribute(_el$100, "colspan", columnCount()));
-                    return _el$99;
+                    _$effect(() => _$setAttribute(_el$96, "colspan", columnCount()));
+                    return _el$95;
                   }
-                }), _el$103, _co$20);
-                return _el$92;
+                }), _el$99, _co$18);
+                return _el$88;
               })()
-            }), _el$45, _co$9);
+            }), _el$39, _co$7);
             _$insert(_el$29, _$createComponent(Show, {
               get when() {
                 return shouldRenderLoadMoreSentinel();
               },
               get children() {
-                var _el$46 = _$getNextElement(_tmpl$13);
+                var _el$40 = _$getNextElement(_tmpl$12);
                 var _ref$3 = loadMoreRef;
-                typeof _ref$3 === "function" ? _$use(_ref$3, _el$46) : loadMoreRef = _el$46;
-                return _el$46;
+                typeof _ref$3 === "function" ? _$use(_ref$3, _el$40) : loadMoreRef = _el$40;
+                return _el$40;
               }
-            }), _el$48, _co$0);
+            }), _el$42, _co$8);
             _$effect(_p$ => {
               var _v$24 = labelledBy() ? undefined : props.ariaLabel ?? dataTableMessages().dataTable,
                 _v$25 = labelledBy(),
@@ -1143,22 +1136,22 @@ function DataTableRoot(props) {
           })(), _$createComponent(For, {
             each: ["y", "x"],
             children: axis => (() => {
-              var _el$108 = _$getNextElement(_tmpl$32),
-                _el$109 = _el$108.firstChild;
-              _el$108.addEventListener("pointercancel", event => event.currentTarget.releasePointerCapture(event.pointerId));
-              _el$108.$$pointerup = event => event.currentTarget.releasePointerCapture(event.pointerId);
-              _el$108.$$pointermove = event => {
+              var _el$104 = _$getNextElement(_tmpl$32),
+                _el$105 = _el$104.firstChild;
+              _el$104.addEventListener("pointercancel", event => event.currentTarget.releasePointerCapture(event.pointerId));
+              _el$104.$$pointerup = event => event.currentTarget.releasePointerCapture(event.pointerId);
+              _el$104.$$pointermove = event => {
                 if (event.currentTarget.hasPointerCapture(event.pointerId)) scrollFromPointer(event, axis);
               };
-              _el$108.$$pointerdown = event => startScrollbarDrag(event, axis);
-              _$setAttribute(_el$108, "data-axis", axis);
+              _el$104.$$pointerdown = event => startScrollbarDrag(event, axis);
+              _$setAttribute(_el$104, "data-axis", axis);
               _$effect(_p$ => {
                 var _v$46 = scrollbars()[axis].overflow ? "true" : undefined,
                   _v$47 = `${scrollbars()[axis].offset}px`,
                   _v$48 = `${scrollbars()[axis].size}px`;
-                _v$46 !== _p$.e && _$setAttribute(_el$108, "data-overflow", _p$.e = _v$46);
-                _v$47 !== _p$.t && _$setStyleProperty(_el$109, "--k2b-data-table-scroll-offset", _p$.t = _v$47);
-                _v$48 !== _p$.a && _$setStyleProperty(_el$109, "--k2b-data-table-scroll-size", _p$.a = _v$48);
+                _v$46 !== _p$.e && _$setAttribute(_el$104, "data-overflow", _p$.e = _v$46);
+                _v$47 !== _p$.t && _$setStyleProperty(_el$105, "--k2b-data-table-scroll-offset", _p$.t = _v$47);
+                _v$48 !== _p$.a && _$setStyleProperty(_el$105, "--k2b-data-table-scroll-size", _p$.a = _v$48);
                 return _p$;
               }, {
                 e: undefined,
@@ -1166,7 +1159,7 @@ function DataTableRoot(props) {
                 a: undefined
               });
               _$runHydrationEvents();
-              return _el$108;
+              return _el$104;
             })()
           })];
         }
@@ -1201,14 +1194,14 @@ const DataTableHeader = props => {
   const panel = useContext(DataTablePanelContext);
   panel?.registerHeading();
   return (() => {
-    var _el$110 = _$getNextElement(_tmpl$33);
-    _$insert(_el$110, _$createComponent(PanelHeader, {
+    var _el$106 = _$getNextElement(_tmpl$33);
+    _$insert(_el$106, _$createComponent(PanelHeader, {
       get title() {
         return (() => {
-          var _el$111 = _$getNextElement(_tmpl$34);
-          _$insert(_el$111, () => props.title);
-          _$effect(() => _$setAttribute(_el$111, "id", panel?.headingId));
-          return _el$111;
+          var _el$107 = _$getNextElement(_tmpl$34);
+          _$insert(_el$107, () => props.title);
+          _$effect(() => _$setAttribute(_el$107, "id", panel?.headingId));
+          return _el$107;
         })();
       },
       get subtitle() {
@@ -1224,21 +1217,21 @@ const DataTableHeader = props => {
         return props.size;
       }
     }));
-    _$effect(() => _$className(_el$110, `k2b-data-panel__header ${props.class ?? ""}`));
-    return _el$110;
+    _$effect(() => _$className(_el$106, `k2b-data-panel__header ${props.class ?? ""}`));
+    return _el$106;
   })();
 };
 const DataTableControls = props => (() => {
-  var _el$112 = _$getNextElement(_tmpl$33);
-  _$insert(_el$112, () => props.children);
-  _$effect(() => _$className(_el$112, `k2b-data-panel__controls ${props.class ?? ""}`));
-  return _el$112;
+  var _el$108 = _$getNextElement(_tmpl$33);
+  _$insert(_el$108, () => props.children);
+  _$effect(() => _$className(_el$108, `k2b-data-panel__controls ${props.class ?? ""}`));
+  return _el$108;
 })();
 const DataTablePanelFooter = props => (() => {
-  var _el$113 = _$getNextElement(_tmpl$35);
-  _$insert(_el$113, () => props.children);
-  _$effect(() => _$className(_el$113, `k2b-data-panel__footer ${props.class ?? ""}`));
-  return _el$113;
+  var _el$109 = _$getNextElement(_tmpl$35);
+  _$insert(_el$109, () => props.children);
+  _$effect(() => _$className(_el$109, `k2b-data-panel__footer ${props.class ?? ""}`));
+  return _el$109;
 })();
 const DataTable = DataTableRoot;
 DataTable.Panel = DataTablePanel;