@zeyos/zx 2.1.0 → 2.2.1

package/dist/zx.global.js

@@ -241,7 +241,8 @@ var zx = (() => {
     );
   }
   function isElement(value) {
-    return Boolean(value && typeof value === "object" && value.nodeType === 1);
+    return Boolean(value && typeof value === "object" && /** @type {{nodeType?: unknown}} */
+    value.nodeType === 1);
   }
   function clamp(n, min, max) {
     return Math.min(max, Math.max(min, n));
@@ -249,11 +250,15 @@ var zx = (() => {
   function toArray(value) {
     if (value == null) return [];
     if (Array.isArray(value)) return value.slice();
-    if (typeof value !== "string" && typeof value[Symbol.iterator] === "function") {
-      return Array.from(value);
+    const candidate = (
+      /** @type {any} */
+      value
+    );
+    if (typeof value !== "string" && typeof candidate?.[Symbol.iterator] === "function") {
+      return Array.from(candidate);
     }
-    if (typeof value !== "string" && typeof value.length === "number") {
-      return Array.from(value);
+    if (typeof value !== "string" && typeof candidate?.length === "number") {
+      return Array.from(candidate);
     }
     return [
       /** @type {T} */
@@ -462,8 +467,12 @@ var zx = (() => {
   }
   function isPropsObject(value) {
     if (value === null || typeof value !== "object" || Array.isArray(value)) return false;
-    if (typeof value.nodeType === "number") return false;
-    return typeof value.toElement !== "function";
+    const candidate = (
+      /** @type {Record<string, unknown>} */
+      value
+    );
+    if (typeof candidate.nodeType === "number") return false;
+    return typeof candidate.toElement !== "function";
   }
   function applyProperty(element, key, value) {
     if (key === "ref") {
@@ -521,15 +530,33 @@ var zx = (() => {
     return "aria-" + key.slice(4).toLowerCase();
   }
   function appendChildren(parent, children) {
-    for (const child of children.flat(Infinity)) {
-      if (child == null) continue;
-      if (typeof child === "string" || typeof child === "number") {
-        parent.append(document.createTextNode(String(child)));
-      } else if (child && typeof child === "object" && typeof child.nodeType === "number") {
-        parent.append(child);
-      } else if (typeof child === "object" && typeof child.toElement === "function") {
+    const host = (
+      /** @type {ParentNode} */
+      parent
+    );
+    for (
+      const raw2 of
+      /** @type {any[]} */
+      children.flat(Infinity)
+    ) {
+      if (raw2 == null) continue;
+      if (typeof raw2 === "string" || typeof raw2 === "number") {
+        host.append(document.createTextNode(String(raw2)));
+        continue;
+      }
+      if (typeof raw2 !== "object") continue;
+      const child = (
+        /** @type {{nodeType?: number, toElement?: () => Node|null}} */
+        raw2
+      );
+      if (typeof child.nodeType === "number") {
+        host.append(
+          /** @type {Node} */
+          raw2
+        );
+      } else if (typeof child.toElement === "function") {
         const element = child.toElement();
-        if (element) parent.append(element);
+        if (element) host.append(element);
       }
     }
   }
@@ -584,11 +611,18 @@ var zx = (() => {
   var Component = class extends EventTarget {
     /** @type {ComponentOptions} */
     static defaults = {};
+    /**
+     * BEM block a subclass wants on its root, without the `zx-` prefix. Empty on the base, which is
+     * the same falsy answer the undeclared property gave — declared so the statics are visible to
+     * `this.constructor` and to the generated declarations.
+     * @type {string}
+     */
+    static cssName = "";
     /** @type {Element} Root element. */
     el;
     /** @type {Record<string, Element>} Elements captured by `h()` ref properties. */
     refs;
-    /** @type {Readonly<ComponentOptions>} Merged component options. */
+    /** @type {Readonly<TOptions>} Merged component options. */
     options;
     #abort = new AbortController();
     #created = false;
@@ -597,17 +631,27 @@ var zx = (() => {
     /**
      * Creates a component around an existing target, or asks `render()` to create its root.
      * @param {Element|string|null} target Existing element, selector, or null.
-     * @param {ComponentOptions} [options={}] Component options.
+     * @param {TOptions} [options={}] Component options.
      */
-    constructor(target, options = {}) {
+    constructor(target, options = (
+      /** @type {TOptions} */
+      {}
+    )) {
       super();
+      const self = (
+        /** @type {typeof Component} */
+        this.constructor
+      );
       this.#created = target === null;
       const resolved = resolveElement(target);
       if (target !== null && !resolved) throw new TypeError("Component target could not be resolved");
       this.el = /** @type {Element} */
       resolved;
       this.refs = {};
-      const merged = mergeOptions(this.constructor, options);
+      const merged = (
+        /** @type {TOptions} */
+        mergeOptions(self, options)
+      );
       const eventOptions = [];
       for (const [key, value] of Object.entries(merged)) {
         if (/^on[a-z]/.test(key) && typeof value === "function") {
@@ -637,7 +681,7 @@ var zx = (() => {
         this.#abort.abort();
         throw new TypeError("Component requires a root Element");
       }
-      const cssName = this.constructor.cssName;
+      const cssName = self.cssName;
       if (typeof cssName === "string" && cssName) {
         const className = `zx-${cssName}`;
         this.#addedRootClass = !this.el.classList.contains(className);
@@ -758,7 +802,10 @@ var zx = (() => {
       this.#destroyed = true;
       this.#abort.abort();
       if (registry.get(this.el) === this) registry.delete(this.el);
-      const cssName = this.constructor.cssName;
+      const cssName = (
+        /** @type {typeof Component} */
+        this.constructor.cssName
+      );
       if (this.#addedRootClass && typeof cssName === "string" && this.el) {
         this.el.classList.remove(`zx-${cssName}`);
       }
@@ -1742,7 +1789,10 @@ var zx = (() => {
     if (!lang) return 1;
     if (lang.toLowerCase() === "en") return 1;
     try {
-      const locale = new Intl.Locale(lang);
+      const locale = (
+        /** @type {Intl.Locale & {getWeekInfo?: () => {firstDay?: number}, weekInfo?: {firstDay?: number}}} */
+        new Intl.Locale(lang)
+      );
       const weekInfo = locale.getWeekInfo?.() ?? locale.weekInfo;
       if (weekInfo?.firstDay) return weekInfo.firstDay % 7;
     } catch {
@@ -1870,25 +1920,28 @@ var zx = (() => {
     const url = kitUrl(kit);
     const pending = kitLoads.get(url);
     if (pending) return pending;
-    const promise = new Promise((resolve, reject) => {
-      const absolute = new URL(url, document.baseURI).href;
-      const existing = [...document.scripts].find((script2) => script2.src === absolute);
-      if (existing && globalThis.FontAwesomeKitConfig) {
-        resolve();
-        return;
-      }
-      const script = existing ?? document.createElement("script");
-      script.addEventListener("load", () => resolve(), { once: true });
-      script.addEventListener("error", () => {
-        kitLoads.delete(url);
-        reject(new Error(`Font Awesome kit failed to load: ${url}`));
-      }, { once: true });
-      if (existing) return;
-      script.src = url;
-      script.async = true;
-      script.crossOrigin = "anonymous";
-      document.head.append(script);
-    });
+    const promise = (
+      /** @type {Promise<void>} */
+      new Promise((resolve, reject) => {
+        const absolute = new URL(url, document.baseURI).href;
+        const existing = [...document.scripts].find((script2) => script2.src === absolute);
+        if (existing && globalThis.FontAwesomeKitConfig) {
+          resolve();
+          return;
+        }
+        const script = existing ?? document.createElement("script");
+        script.addEventListener("load", () => resolve(), { once: true });
+        script.addEventListener("error", () => {
+          kitLoads.delete(url);
+          reject(new Error(`Font Awesome kit failed to load: ${url}`));
+        }, { once: true });
+        if (existing) return;
+        script.src = url;
+        script.async = true;
+        script.crossOrigin = "anonymous";
+        document.head.append(script);
+      })
+    );
     kitLoads.set(url, promise);
     return promise;
   }
@@ -3145,9 +3198,11 @@ var zx = (() => {
     const topY = anchorRect.top - offset - floatingRect.height;
     if (flip) {
       if (prefersBottom && bottomY + floatingRect.height > viewportHeight && topY >= 0) {
-        actualPlacement = placement.replace("bottom", "top");
+        actualPlacement = /** @type {typeof placement} */
+        placement.replace("bottom", "top");
       } else if (!prefersBottom && topY < 0 && bottomY + floatingRect.height <= viewportHeight) {
-        actualPlacement = placement.replace("top", "bottom");
+        actualPlacement = /** @type {typeof placement} */
+        placement.replace("top", "bottom");
       }
     }
     let left;
@@ -6160,10 +6215,13 @@ var zx = (() => {
     const originals = /* @__PURE__ */ new Map();
     let destroyed = false;
     function items() {
-      return Array.from(container.querySelectorAll(itemSelector)).filter((item) => {
-        remember(item);
-        return isAvailable(item);
-      });
+      return (
+        /** @type {HTMLElement[]} */
+        Array.from(container.querySelectorAll(itemSelector)).filter((item) => {
+          remember(item);
+          return isAvailable(item);
+        })
+      );
     }
     function remember(item) {
       if (!originals.has(item)) originals.set(item, item.getAttribute("tabindex"));
@@ -6178,7 +6236,11 @@ var zx = (() => {
     }
     function onKeydown(event) {
       const available = items();
-      const current = event.target?.closest?.(itemSelector);
+      const current = (
+        /** @type {HTMLElement|null} */
+        /** @type {Element|null} */
+        event.target?.closest?.(itemSelector) ?? null
+      );
       const index = available.indexOf(current);
       if (index < 0) return;
       const previousKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
@@ -6196,7 +6258,11 @@ var zx = (() => {
       available[nextIndex].focus();
     }
     function onFocus(event) {
-      const item = event.target?.closest?.(itemSelector);
+      const item = (
+        /** @type {HTMLElement|null} */
+        /** @type {Element|null} */
+        event.target?.closest?.(itemSelector) ?? null
+      );
       if (item && container.contains(item)) update(item);
     }
     container.addEventListener("keydown", onKeydown, { signal: controller.signal });
@@ -6256,8 +6322,9 @@ var zx = (() => {
     };
   }
   function focusableItems(container) {
-    return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter(
-      (item) => isAvailable(item) && item.getClientRects().length > 0
+    return (
+      /** @type {HTMLElement[]} */
+      Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((item) => isAvailable(item) && item.getClientRects().length > 0)
     );
   }
   function isAvailable(item) {
@@ -6271,7 +6338,11 @@ var zx = (() => {
       return String(item.textContent ?? "").trim().toLocaleLowerCase();
     }
     if (item && typeof item === "object") {
-      const value = item.label ?? item.text ?? item.value;
+      const shape = (
+        /** @type {{label?: unknown, text?: unknown, value?: unknown}} */
+        item
+      );
+      const value = shape.label ?? shape.text ?? shape.value;
       if (value != null) return String(value).trim().toLocaleLowerCase();
     }
     return String(item ?? "").trim().toLocaleLowerCase();
@@ -8754,11 +8825,19 @@ var zx = (() => {
   }
   function onBreakpoint(handler, options = {}) {
     if (typeof handler !== "function") throw new TypeError("onBreakpoint requires a handler");
+    if ("target" in options && !isElement(options.target) && /** @type {unknown} */
+    options.target !== /** @type {unknown} */
+    globalThis) {
+      throw new TypeError("onBreakpoint target must be an Element or the window");
+    }
     const target = options.target ?? globalThis;
-    const element = target instanceof Element ? target : null;
+    const element = isElement(target) ? (
+      /** @type {Element} */
+      target
+    ) : null;
     let name = (
-      /** @type {BreakpointName} */
-      "xs"
+      /** @type {BreakpointName|null} */
+      null
     );
     let destroyed = false;
     let observer = null;
@@ -8766,24 +8845,33 @@ var zx = (() => {
     const update = () => {
       if (destroyed) return;
       const width = measure();
+      if (element && width === 0) return;
       const next = breakpointOf(width);
       if (next === name) return;
       name = next;
       handler(name, width);
     };
-    name = breakpointOf(measure());
-    handler(name, measure());
+    update();
+    let frame = 0;
+    const schedule = () => {
+      if (frame || destroyed) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        update();
+      });
+    };
     if (element && typeof ResizeObserver === "function") {
-      observer = new ResizeObserver(update);
+      observer = new ResizeObserver(schedule);
       observer.observe(element);
     } else {
       globalThis.addEventListener?.("resize", update, { passive: true });
     }
     return {
-      current: () => name,
+      current: () => name ?? breakpointOf(measure()),
       destroy: () => {
         if (destroyed) return;
         destroyed = true;
+        if (frame) cancelAnimationFrame(frame);
         observer?.disconnect();
         globalThis.removeEventListener?.("resize", update);
       }
@@ -8850,7 +8938,10 @@ var zx = (() => {
           try {
             json2 = JSON.parse(text4);
           } catch (cause) {
-            const error = new Error("Invalid JSON response", { cause });
+            const error = (
+              /** @type {Error & {response?: Response}} */
+              new Error("Invalid JSON response", { cause })
+            );
             error.response = response;
             throw error;
           }
@@ -8862,7 +8953,10 @@ var zx = (() => {
             error2.response = response;
             throw error2;
           }
-          const error = new Error(`HTTP ${response.status} ${response.statusText}`.trim());
+          const error = (
+            /** @type {Error & {response?: Response}} */
+            new Error(`HTTP ${response.status} ${response.statusText}`.trim())
+          );
           error.response = response;
           throw error;
         }
@@ -8970,7 +9064,10 @@ var zx = (() => {
       for (const item of value) appendFormValue2(form, key, item);
     } else {
       const isBlob = typeof Blob === "function" && value instanceof Blob;
-      form.append(key, typeof value === "object" && !isBlob ? JSON.stringify(value) : value);
+      form.append(key, typeof value === "object" && !isBlob ? JSON.stringify(value) : (
+        /** @type {string|Blob} */
+        value
+      ));
     }
   }
   function isFileList(value) {
@@ -9043,7 +9140,11 @@ var zx = (() => {
     const diff = target.getTime() - reference.getTime();
     const division = TIME_DIVISIONS.find(({ ms, limit }) => Math.abs(diff) / ms < limit) ?? TIME_DIVISIONS[TIME_DIVISIONS.length - 1];
     const value = Math.round(diff / division.ms);
-    return relativeFormatter(locale, numeric).format(value, division.unit);
+    return relativeFormatter(locale, numeric).format(
+      value,
+      /** @type {Intl.RelativeTimeFormatUnit} */
+      division.unit
+    );
   }
   function format(locale, options, value) {
     const key = `${locale}\0${JSON.stringify(options)}`;
@@ -9347,7 +9448,10 @@ var zx = (() => {
   }
   function toBlob(data, type) {
     if (typeof Blob === "function" && data instanceof Blob) return data;
-    const parts = typeof data === "string" && /^text\/csv\b/i.test(type) ? ["\uFEFF", data] : [data];
+    const parts = (
+      /** @type {BlobPart[]} */
+      typeof data === "string" && /^text\/csv\b/i.test(type) ? ["\uFEFF", data] : [data]
+    );
     return new Blob(parts, { type });
   }
 
@@ -10736,6 +10840,8 @@ var zx = (() => {
       sortMode: "local",
       selectable: false,
       stickyHeader: true,
+      responsive: false,
+      growing: false,
       height: null,
       emptyText: null,
       rowClass: null,
@@ -10756,6 +10862,7 @@ var zx = (() => {
         /** @type {HTMLElement} */
         this.el ?? h("div")
       );
+      this.el = root;
       this._originalChildren = this.el ? Array.from(this.el.childNodes) : null;
       this._columns = Array.isArray(this.options.columns) ? this.options.columns.map((column) => ({ ...column })) : [];
       this._data = Array.isArray(this.options.data) ? [...this.options.data] : [];
@@ -10768,6 +10875,11 @@ var zx = (() => {
       this._editMode = normalizeEditMode(this.options.editMode);
       this._edit = null;
       this._editMessage = null;
+      this._stacked = false;
+      this._width = null;
+      this._growStep = growStep(this.options.growing);
+      this._rendered = this._growStep ?? Infinity;
+      this._more = null;
       this._rovingKey = null;
       this._rovingCell = null;
       this._rovingMatched = false;
@@ -10802,6 +10914,7 @@ var zx = (() => {
       this._renderColumns();
       this._renderHeader();
       this._renderBody();
+      this._watchWidth();
       this.listen(this._tbody, "click", (event) => this._handleBodyClick(event));
       this.listen(this._tbody, "dblclick", (event) => this._handleBodyDoubleClick(event));
       if (this._editMode !== false) {
@@ -10835,6 +10948,7 @@ var zx = (() => {
      * @fires Table#editcancel
      */
     setData(rows) {
+      this._rendered = this._growStep ?? Infinity;
       this.setLoading(false);
       assertRows(rows);
       this._data = [...rows];
@@ -11109,9 +11223,150 @@ var zx = (() => {
     getEditing() {
       return this._edit ? { id: this._edit.id, columnId: this._edit.columnId } : null;
     }
+    /**
+     * The rows currently rendered — all of them unless `growing` is on.
+     * @returns {TableRow[]}
+     */
+    _visibleData() {
+      return this._rendered === Infinity ? this._data : this._data.slice(0, this._rendered);
+    }
+    /**
+     * Renders the next batch of rows.
+     * @param {number} [count] How many to add; defaults to the configured batch size.
+     * @returns {this}
+     * @fires Table#grow
+     */
+    growBy(count2) {
+      if (!this._growStep) return this;
+      const step = Number(count2) > 0 ? Math.trunc(Number(count2)) : this._growStep;
+      const before = this._rendered;
+      this._rendered = Math.min(this._data.length, this._rendered + step);
+      if (this._rendered === before) return this;
+      this._renderBody();
+      this.emit("grow", { rendered: this._rendered, total: this._data.length });
+      return this;
+    }
+    /**
+     * Renders every remaining row.
+     * @returns {this}
+     * @fires Table#grow
+     */
+    showAll() {
+      return this.growBy(this._data.length);
+    }
+    /**
+     * How many rows are currently rendered.
+     * @returns {number}
+     */
+    getRenderedCount() {
+      return Math.min(this._rendered, this._data.length);
+    }
+    /**
+     * Keeps the "show more" control in step with what is rendered.
+     *
+     * The control sits outside the table rather than in a `<tfoot>` row spanning every column: it is
+     * a command, not data, and a button inside the grid would be reachable by the row navigation
+     * keys as though it were a cell.
+     * @returns {void}
+     */
+    _syncGrowing() {
+      if (!this._growStep) return;
+      const remaining = this._data.length - this.getRenderedCount();
+      if (remaining <= 0) {
+        this._more?.remove();
+        this._more = null;
+        return;
+      }
+      const label = this._message("table.more", "Show %1 more", [remaining]);
+      if (!this._more) {
+        this._more = h("button", {
+          class: "zx-table__more",
+          type: "button",
+          onclick: () => this.growBy()
+        });
+        this.el.append(this._more);
+      }
+      this._more.textContent = label;
+      this._more.setAttribute("aria-label", label);
+    }
+    /**
+     * Resolves a localized message, falling back to a built-in template.
+     * @param {string} key Message key.
+     * @param {string} fallback Template used when the host has no translation.
+     * @param {unknown[]} args Positional interpolation values.
+     * @returns {string}
+     */
+    _message(key, fallback, args) {
+      const message = this.msg(key, ...args);
+      return message === key ? printf(fallback, args) : message;
+    }
+    /**
+     * Watches the table's own width and stacks the rows below `responsive`.
+     *
+     * The width comes from `onBreakpoint` observing this element rather than the window, which is the
+     * whole point of the option: a table inside a split pane or a modal has no idea how wide the
+     * viewport is, and a media query would stack it on a phone while leaving it unreadable in a
+     * 320px pane on a desktop.
+     * @returns {void}
+     */
+    _watchWidth() {
+      this._width?.destroy();
+      this._width = null;
+      const threshold = this.options.responsive;
+      if (!threshold || !(threshold in breakpoints)) return;
+      this._width = onBreakpoint(
+        (_name, width) => this._setStacked(width > 0 && width < breakpoints[threshold]),
+        { target: this.el }
+      );
+    }
+    /**
+     * Enters or leaves stacked mode.
+     * @param {boolean} stacked Whether rows should stack.
+     * @returns {void}
+     * @fires Table#stackedchange
+     */
+    _setStacked(stacked) {
+      if (this._stacked === stacked) return;
+      this._stacked = stacked;
+      this.el.toggleAttribute("data-stacked", stacked);
+      this._applyStackedRoles(stacked);
+      this.emit("stackedchange", { stacked });
+    }
+    /**
+     * States the table roles explicitly while stacked, and removes them again on the way out.
+     *
+     * Stacking works by changing `display` on the table elements, and a table whose display is not
+     * `table` loses its implicit ARIA roles — leaving a screen reader with a pile of generic blocks
+     * where a table used to be. The roles are only asserted while the layout has taken them away.
+     * @param {boolean} stacked Whether the roles should be present.
+     * @returns {void}
+     */
+    _applyStackedRoles(stacked) {
+      const parts = [[this._table, "table"], [this._thead, "rowgroup"], [this._tbody, "rowgroup"]];
+      for (const [element, role] of parts) {
+        if (!element) continue;
+        if (stacked) element.setAttribute("role", role);
+        else element.removeAttribute("role");
+      }
+      for (const [selector, role] of [["tr", "row"], ["td", "cell"], ["th", "columnheader"]]) {
+        for (const element of this._table.querySelectorAll(selector)) {
+          if (stacked) element.setAttribute("role", role);
+          else element.removeAttribute("role");
+        }
+      }
+    }
+    /**
+     * Reports whether the rows are currently stacked.
+     * @returns {boolean}
+     */
+    isStacked() {
+      return Boolean(this._stacked);
+    }
     /** Restores an enhanced target and releases all component listeners. @returns {void} */
     destroy() {
       this._teardownEdit();
+      this._width?.destroy();
+      this._width = null;
       if (this.el) delete this.el.dataset.editMode;
       if (!this._restored && this._originalChildren) {
         this.el.replaceChildren(...this._originalChildren);
@@ -11139,6 +11394,7 @@ var zx = (() => {
     /** @returns {void} */
     _renderHeader() {
       const row2 = h("tr", { class: "zx-table__header-row" });
+      if (this._growStep) row2.setAttribute("aria-rowindex", "1");
       if (this.options.selectable === "multi") {
         this._selectAll = h("input", {
           class: "zx-table__checkbox zx-table__select-all",
@@ -11152,9 +11408,9 @@ var zx = (() => {
         row2.append(selectionHeader);
         this.listen(this._selectAll, "click", () => {
           if (this._selectAll.checked) {
-            for (const dataRow of this._data) this._selected.add(this._idFor(dataRow));
+            for (const dataRow of this._visibleData()) this._selected.add(this._idFor(dataRow));
           } else {
-            this._selected.clear();
+            for (const dataRow of this._visibleData()) this._selected.delete(this._idFor(dataRow));
           }
           this._selectionAnchorId = null;
           this._syncSelection();
@@ -11196,17 +11452,36 @@ var zx = (() => {
       this._rovingCell = null;
       this._rovingMatched = false;
       if (this._data.length === 0) {
-        const text4 = this.options.emptyText == null ? this.msg("table.empty") : String(this.options.emptyText);
         fragment.append(h(
           "tr",
           { class: "zx-table__empty-row" },
-          h("td", { class: "zx-table__empty", colspan: this._columns.length + (this.options.selectable === "multi" ? 1 : 0) }, text4)
+          h("td", {
+            class: "zx-table__empty",
+            colspan: this._columns.length + (this.options.selectable === "multi" ? 1 : 0)
+          }, this._emptyContent())
         ));
       } else {
-        this._data.forEach((row2, index) => fragment.append(this._createRow(row2, index)));
+        this._visibleData().forEach((row2, index) => fragment.append(this._createRow(row2, index)));
       }
       this._tbody.replaceChildren(fragment);
+      if (this._growStep) this._table.setAttribute("aria-rowcount", String(this._data.length + 1));
       this._syncSelectAll();
+      this._syncGrowing();
+      if (this._stacked) this._applyStackedRoles(true);
+    }
+    /**
+     * What to put in the empty row.
+     *
+     * An empty table is a screen in its own right — the place to say why there is nothing and what to
+     * do about it — so this takes a node as readily as a string. A function is re-called on every
+     * render, which matters when the placeholder contains a button: reusing one node would move the
+     * same element between renders and quietly share its listeners.
+     * @returns {Node|string}
+     */
+    _emptyContent() {
+      const empty = this.options.emptyText;
+      if (empty == null) return this.msg("table.empty");
+      return typeof empty === "function" ? empty() : empty;
     }
     /** @param {TableRow} row @param {number} index @returns {HTMLTableRowElement} */
     _createRow(row2, index) {
@@ -11215,6 +11490,7 @@ var zx = (() => {
         /** @type {HTMLTableRowElement} */
         h("tr", { dataset: { row: "" } })
       );
+      if (this._growStep) tr.setAttribute("aria-rowindex", String(index + 2));
       const rowClass = typeof this.options.rowClass === "function" ? this.options.rowClass(row2) : "";
       if (rowClass) tr.classList.add(...String(rowClass).split(/\s+/).filter(Boolean));
       if (this.options.selectable !== false) tr.setAttribute("aria-selected", String(this._selected.has(id)));
@@ -11237,6 +11513,8 @@ var zx = (() => {
           h("td")
         );
         if (column.align) cell.dataset.align = column.align;
+        cell.dataset.label = column.label;
+        if (column.popin === false) cell.dataset.popin = "false";
         if (this._editMode !== false) {
           cell.dataset.column = column.id;
           if (resolveEditable(column, row2) !== false) {
@@ -11720,10 +11998,14 @@ var zx = (() => {
     /** @returns {void} */
     _syncSelectAll() {
       if (!this._selectAll) return;
-      const selectedRows = this._data.reduce((count2, row2) => count2 + Number(this._selected.has(this._idFor(row2))), 0);
-      this._selectAll.disabled = this._data.length === 0;
-      this._selectAll.checked = this._data.length > 0 && selectedRows === this._data.length;
-      this._selectAll.indeterminate = selectedRows > 0 && selectedRows < this._data.length;
+      const visible = this._visibleData();
+      const selectedRows = visible.reduce(
+        (count2, row2) => count2 + Number(this._selected.has(this._idFor(row2))),
+        0
+      );
+      this._selectAll.disabled = visible.length === 0;
+      this._selectAll.checked = visible.length > 0 && selectedRows === visible.length;
+      this._selectAll.indeterminate = selectedRows > 0 && selectedRows < visible.length;
     }
     /** @returns {void} */
     _syncSortHeader() {
@@ -11855,6 +12137,10 @@ var zx = (() => {
   function sameSet(left, right) {
     return left.size === right.size && [...left].every((value) => right.has(value));
   }
+  function growStep(growing) {
+    const step = Math.trunc(Number(growing));
+    return Number.isFinite(step) && step > 0 ? step : null;
+  }
 
   // src/elements/reflect.js
   var INVALID_ATTRIBUTE = /* @__PURE__ */ Symbol("invalid attribute");