@zeyos/zx 2.2.0 → 2.2.1

package/CHANGELOG.md

@@ -8,6 +8,18 @@ and friends remain the complete record.
 
 ## Unreleased
 
+## 2.2.1 — 2026-08-21
+
+### Fixed
+
+- **Select-all covers the rendered rows when `growing` is on**, not the whole result set. Ticking a
+  box above the ten rows you can see and selecting a hundred is a trap, because the next click is
+  usually a bulk action; `showAll()` first to mean all of them. Tables without `growing` are
+  unaffected — everything is rendered, so the two are the same set.
+- **A growing table reports its real size to assistive technology.** Only a prefix of the data is in
+  the DOM, so a screen reader was announcing "row 3 of 10" for a table of ten thousand. The table
+  now carries `aria-rowcount` and each row an `aria-rowindex`.
+
 ## 2.2.0 — 2026-08-21
 
 ### Added

package/dist/zx-compat.esm.js

@@ -10921,6 +10921,7 @@ var Table = class extends Component {
   /** @returns {void} */
   _renderHeader() {
     const row = h("tr", { class: "zx-table__header-row" });
+    if (this._growStep) row.setAttribute("aria-rowindex", "1");
     if (this.options.selectable === "multi") {
       this._selectAll = h("input", {
         class: "zx-table__checkbox zx-table__select-all",
@@ -10934,9 +10935,9 @@ var Table = class extends Component {
       row.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();
@@ -10990,6 +10991,7 @@ var Table = class extends Component {
       this._visibleData().forEach((row, index) => fragment.append(this._createRow(row, 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);
@@ -11015,6 +11017,7 @@ var Table = class extends Component {
       /** @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(row) : "";
     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)));
@@ -11522,10 +11525,14 @@ var Table = class extends Component {
   /** @returns {void} */
   _syncSelectAll() {
     if (!this._selectAll) return;
-    const selectedRows = this._data.reduce((count, row) => count + Number(this._selected.has(this._idFor(row))), 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(
+      (count, row) => count + Number(this._selected.has(this._idFor(row))),
+      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() {