@editora/ui-core 0.1.25 → 0.2.0

package/dist/data-table.esm.js

@@ -5,22 +5,22 @@ const A = `
     /* A wide table scrolls inside its own frame. Without this a grid or flex parent grows to the table's width. */
     min-inline-size: 0;
     max-inline-size: 100%;
-    --ui-data-table-radius: 16px;
-    --ui-data-table-border-color: var(--ui-color-border, rgba(15, 23, 42, 0.14));
+    --ui-data-table-radius: calc(var(--ui-radius, 6px) + 2px);
+    --ui-data-table-border-color: var(--ui-color-line-subtle, var(--ui-color-border, rgba(15, 23, 42, 0.14)));
     --ui-data-table-border: 1px solid var(--ui-data-table-border-color);
-    --ui-data-table-bg: var(--ui-color-surface, rgba(255, 255, 255, 0.96));
+    --ui-data-table-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-data-table-shadow: none;
     --ui-data-table-empty-color: var(--ui-color-muted, #526175);
     --ui-data-table-summary-color: var(--ui-color-muted, #475569);
     --ui-data-table-text: var(--ui-color-text, #0f172a);
     --ui-data-table-header-text: var(--ui-color-text, #1e293b);
-    --ui-data-table-header-bg: var(--ui-color-surface-alt, #f8fafc);
+    --ui-data-table-header-bg: var(--ui-color-surface-subtle, var(--ui-color-surface-alt, #f8fafc));
     --ui-data-table-footer-text: var(--ui-color-text, #0f172a);
-    --ui-data-table-footer-bg: color-mix(in srgb, var(--ui-color-surface-alt, #f8fafc) 88%, var(--ui-color-surface, #ffffff));
+    --ui-data-table-footer-bg: var(--ui-color-surface-subtle, color-mix(in srgb, var(--ui-color-surface-alt, #f8fafc) 88%, var(--ui-color-surface, #ffffff)));
     --ui-data-table-cell-border: color-mix(in srgb, var(--ui-data-table-border-color) 58%, transparent);
-    --ui-data-table-striped-bg: color-mix(in srgb, var(--ui-color-surface-alt, #f8fafc) 82%, transparent);
-    --ui-data-table-hover-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 12%, transparent);
-    --ui-data-table-selected-bg: color-mix(in srgb, var(--ui-color-primary, #2563eb) 20%, transparent);
+    --ui-data-table-striped-bg: var(--ui-color-surface-subtle, color-mix(in srgb, var(--ui-color-surface-alt, #f8fafc) 82%, transparent));
+    --ui-data-table-hover-bg: var(--ui-color-fill, color-mix(in srgb, var(--ui-color-primary, #2563eb) 12%, transparent));
+    --ui-data-table-selected-bg: var(--ui-color-accent-fill, color-mix(in srgb, var(--ui-color-primary, #2563eb) 20%, transparent));
     --ui-data-table-sort-indicator: color-mix(in srgb, var(--ui-color-muted, #94a3b8) 80%, transparent);
     --ui-data-table-sort-active: var(--ui-color-primary, #2563eb);
     --ui-data-table-resize-handle: color-mix(in srgb, var(--ui-color-muted, #94a3b8) 70%, transparent);
@@ -40,13 +40,16 @@ const A = `
     overflow: auto;
     border: var(--ui-data-table-border);
     border-radius: var(--ui-data-table-radius);
-    background:
-      linear-gradient(180deg, color-mix(in srgb, var(--ui-data-table-bg) 96%, #ffffff 4%), var(--ui-data-table-bg)),
-      var(--ui-data-table-bg);
+    background: var(--ui-data-table-bg);
     box-shadow: var(--ui-data-table-shadow);
     transition: border-color var(--ui-data-table-duration) var(--ui-data-table-ease), box-shadow var(--ui-data-table-duration) var(--ui-data-table-ease);
   }
 
+  .frame[data-scroll-region]:focus-visible {
+    outline: var(--ui-ring-width, 2px) solid var(--ui-ring-color, var(--ui-data-table-focus-ring, #2563eb));
+    outline-offset: -2px;
+  }
+
   .frame::before {
     content: '';
     position: absolute;
@@ -549,12 +552,12 @@ const A = `
   }
 
   ui-data-table[loading]:not([headless]) > table tbody {
-    opacity: 0.55;
+    opacity: 0.7;
     pointer-events: none;
   }
 
   ui-data-table[state="loading"]:not([headless]) > table tbody {
-    opacity: 0.55;
+    opacity: 0.7;
     pointer-events: none;
   }
 
@@ -677,7 +680,7 @@ function S(m) {
   const a = Date.parse(m);
   return !Number.isNaN(a) && /[-/]/.test(m) ? a : m.toLowerCase();
 }
-const k = /* @__PURE__ */ new Set([
+const E = /* @__PURE__ */ new Set([
   "sticky-header",
   "sticky-footer",
   "striped",
@@ -690,7 +693,7 @@ const k = /* @__PURE__ */ new Set([
   "shape",
   "variant",
   "elevation"
-]), E = /* @__PURE__ */ new Set([
+]), k = /* @__PURE__ */ new Set([
   "pagination-id",
   "bulk-actions-label",
   "bulk-clear-label",
@@ -698,7 +701,7 @@ const k = /* @__PURE__ */ new Set([
 ]);
 class R extends C {
   constructor() {
-    super(), this._table = null, this._observer = null, this._sortColumnIndex = -1, this._sortDirection = "asc", this._selectedRows = /* @__PURE__ */ new Set(), this._isSyncing = !1, this._isSettingPage = !1, this._isSettingColumnOrder = !1, this._page = 1, this._pageCount = 1, this._pageSize = 10, this._totalRows = 0, this._filteredRows = 0, this._paginationEl = null, this._resizeState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._frameEl = null, this._virtualRaf = 0, this._virtualTopSpacer = null, this._virtualBottomSpacer = null, this._dragColumnIndex = -1, this._dragOverColumnIndex = -1, this._ignoreHeaderClickUntil = 0, this._syncRaf = 0, this._virtualStart = -1, this._virtualEnd = -1, this._virtualVisibleTotal = -1, this._resizeRaf = 0, this._pendingResizeColumn = -1, this._pendingResizeWidth = null, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onPaginationChange = this._onPaginationChange.bind(this), this._onPointerDown = this._onPointerDown.bind(this), this._onPointerMove = this._onPointerMove.bind(this), this._onPointerUp = this._onPointerUp.bind(this), this._onFrameScroll = this._onFrameScroll.bind(this), this._onDragStart = this._onDragStart.bind(this), this._onDragOver = this._onDragOver.bind(this), this._onDrop = this._onDrop.bind(this), this._onDragEnd = this._onDragEnd.bind(this);
+    super(), this._table = null, this._observer = null, this._sortColumnIndex = -1, this._sortDirection = "asc", this._selectedRows = /* @__PURE__ */ new Set(), this._isSyncing = !1, this._isSettingPage = !1, this._isSettingColumnOrder = !1, this._page = 1, this._pageCount = 1, this._pageSize = 10, this._totalRows = 0, this._filteredRows = 0, this._paginationEl = null, this._resizeState = null, this._columnWidths = /* @__PURE__ */ new Map(), this._frameEl = null, this._scrollObserver = null, this._virtualRaf = 0, this._virtualTopSpacer = null, this._virtualBottomSpacer = null, this._dragColumnIndex = -1, this._dragOverColumnIndex = -1, this._ignoreHeaderClickUntil = 0, this._syncRaf = 0, this._virtualStart = -1, this._virtualEnd = -1, this._virtualVisibleTotal = -1, this._resizeRaf = 0, this._pendingResizeColumn = -1, this._pendingResizeWidth = null, this._onClick = this._onClick.bind(this), this._onKeyDown = this._onKeyDown.bind(this), this._onPaginationChange = this._onPaginationChange.bind(this), this._onPointerDown = this._onPointerDown.bind(this), this._onPointerMove = this._onPointerMove.bind(this), this._onPointerUp = this._onPointerUp.bind(this), this._onFrameScroll = this._onFrameScroll.bind(this), this._onDragStart = this._onDragStart.bind(this), this._onDragOver = this._onDragOver.bind(this), this._onDrop = this._onDrop.bind(this), this._onDragEnd = this._onDragEnd.bind(this);
   }
   static get observedAttributes() {
     return [
@@ -747,7 +750,7 @@ class R extends C {
     }), this._syncPaginationBinding();
   }
   disconnectedCallback() {
-    this.removeEventListener("click", this._onClick), this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("dragstart", this._onDragStart), this.removeEventListener("dragover", this._onDragOver), this.removeEventListener("drop", this._onDrop), this.removeEventListener("dragend", this._onDragEnd), window.removeEventListener("pointermove", this._onPointerMove), window.removeEventListener("pointerup", this._onPointerUp), this._resizeState = null, this._frameEl && (this._frameEl.removeEventListener("scroll", this._onFrameScroll), this._frameEl = null), this._virtualRaf && (cancelAnimationFrame(this._virtualRaf), this._virtualRaf = 0), this._resizeRaf && (cancelAnimationFrame(this._resizeRaf), this._resizeRaf = 0), this._pendingResizeColumn = -1, this._pendingResizeWidth = null, this._syncRaf && (cancelAnimationFrame(this._syncRaf), this._syncRaf = 0), this._clearVirtualSpacers(), this._observer && (this._observer.disconnect(), this._observer = null), this._detachPaginationListener(), super.disconnectedCallback();
+    this.removeEventListener("click", this._onClick), this.removeEventListener("keydown", this._onKeyDown), this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("dragstart", this._onDragStart), this.removeEventListener("dragover", this._onDragOver), this.removeEventListener("drop", this._onDrop), this.removeEventListener("dragend", this._onDragEnd), window.removeEventListener("pointermove", this._onPointerMove), window.removeEventListener("pointerup", this._onPointerUp), this._resizeState = null, this._frameEl && (this._frameEl.removeEventListener("scroll", this._onFrameScroll), this._frameEl = null), this._virtualRaf && (cancelAnimationFrame(this._virtualRaf), this._virtualRaf = 0), this._resizeRaf && (cancelAnimationFrame(this._resizeRaf), this._resizeRaf = 0), this._pendingResizeColumn = -1, this._pendingResizeWidth = null, this._syncRaf && (cancelAnimationFrame(this._syncRaf), this._syncRaf = 0), this._clearVirtualSpacers(), this._observer && (this._observer.disconnect(), this._observer = null), this._detachPaginationListener(), this._scrollObserver?.disconnect(), this._scrollObserver = null, super.disconnectedCallback();
   }
   attributeChangedCallback(t, a, e) {
     if (a !== e && !(t === "column-order" && this._isSettingColumnOrder) && !(t === "page" && this._isSettingPage)) {
@@ -760,11 +763,11 @@ class R extends C {
         return;
       }
       if (this.isConnected) {
-        if (E.has(t)) {
+        if (k.has(t)) {
           t === "pagination-id" ? this._syncPaginationBinding() : t === "bulk-actions-label" || t === "bulk-clear-label" ? this._updateBulkActions() : t === "state-text" && this._syncStateBar();
           return;
         }
-        if (k.has(t)) {
+        if (E.has(t)) {
           t === "hide-summary" ? this._updateSummary() : (t === "state" || t === "loading") && this._syncStateBar();
           return;
         }
@@ -842,14 +845,14 @@ class R extends C {
     return a || (t === "loading" ? "Refreshing table data" : t === "error" ? "Table data could not be loaded" : t === "success" ? "Table data is up to date" : "");
   }
   _syncStateBar() {
-    const t = this.root.querySelector(".statebar"), a = this.root.querySelector(".state-text"), e = this.root.querySelector(".loading-text"), i = this.root.querySelector(".frame"), r = this._table;
+    const t = this.root.querySelector(".statebar"), a = this.root.querySelector(".state-text"), e = this.root.querySelector(".loading-text"), r = this.root.querySelector(".frame"), i = this._table;
     if (!t) return;
     const s = this._state();
     s !== "idle" ? t.removeAttribute("hidden") : t.setAttribute("hidden", ""), t.setAttribute("data-state", s), t.setAttribute("aria-live", s === "error" ? "assertive" : "polite");
     const n = this._stateText(s);
     a && (a.textContent = n), e && (e.textContent = this._stateText("loading"));
     const u = s === "loading" ? "true" : "false";
-    i && i.setAttribute("aria-busy", u), r && r.setAttribute("aria-busy", u);
+    r && r.setAttribute("aria-busy", u), i && i.setAttribute("aria-busy", u);
   }
   _isInteractionBlocked() {
     return this._state() === "loading";
@@ -865,8 +868,8 @@ class R extends C {
     if (!t) return `column-${a + 1}`;
     const e = (t.getAttribute("data-key") || "").trim();
     if (e) return e;
-    const i = p(t);
-    return i ? i.toLowerCase().replace(/\s+/g, "_") : `column-${a + 1}`;
+    const r = p(t);
+    return r ? r.toLowerCase().replace(/\s+/g, "_") : `column-${a + 1}`;
   }
   _currentColumnOrderString() {
     return this._headerCells().map((a, e) => this._headerKey(a, e)).join(",");
@@ -894,10 +897,10 @@ class R extends C {
     const e = Number(a);
     if (Number.isInteger(e) && e >= 0 && e < t.length)
       return e;
-    const i = a.toLowerCase();
-    for (let r = 0; r < t.length; r += 1) {
-      const s = t[r], o = (s.getAttribute("data-key") || "").toLowerCase(), n = p(s).toLowerCase();
-      if (o === i || n === i) return r;
+    const r = a.toLowerCase();
+    for (let i = 0; i < t.length; i += 1) {
+      const s = t[i], o = (s.getAttribute("data-key") || "").toLowerCase(), n = p(s).toLowerCase();
+      if (o === r || n === r) return i;
     }
     return -1;
   }
@@ -905,12 +908,12 @@ class R extends C {
     if (typeof a == "number" && Number.isInteger(a) && a >= 0 && a < t.length) return a;
     const e = String(a || "").trim();
     if (!e) return -1;
-    const i = Number(e);
-    if (Number.isInteger(i) && i >= 0 && i < t.length) return i;
-    const r = e.toLowerCase();
+    const r = Number(e);
+    if (Number.isInteger(r) && r >= 0 && r < t.length) return r;
+    const i = e.toLowerCase();
     for (let s = 0; s < t.length; s += 1) {
       const o = t[s], n = (o.getAttribute("data-key") || "").toLowerCase(), u = p(o).toLowerCase();
-      if (n === r || u === r || this._headerKey(o, s) === r) return s;
+      if (n === i || u === i || this._headerKey(o, s) === i) return s;
     }
     return -1;
   }
@@ -920,14 +923,14 @@ class R extends C {
     try {
       const e = JSON.parse(a);
       if (!Array.isArray(e)) return [];
-      const i = [];
-      return e.forEach((r) => {
-        if (!r || typeof r != "object") return;
-        const s = r.column ?? r.field ?? r.key, o = this._resolveColumnIndex(t, s);
+      const r = [];
+      return e.forEach((i) => {
+        if (!i || typeof i != "object") return;
+        const s = i.column ?? i.field ?? i.key, o = this._resolveColumnIndex(t, s);
         if (o < 0) return;
-        const n = String(r.op || r.operator || "contains").trim().toLowerCase();
-        i.push({ columnIndex: o, op: n, value: r.value });
-      }), i;
+        const n = String(i.op || i.operator || "contains").trim().toLowerCase();
+        r.push({ columnIndex: o, op: n, value: i.value });
+      }), r;
     } catch {
       return [];
     }
@@ -938,8 +941,8 @@ class R extends C {
   _parsePinColumns(t) {
     const a = this.getAttribute("pin-columns");
     if (!a) return { left: [], right: [] };
-    const e = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), r = (u, h) => {
-      h.forEach((l) => {
+    const e = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), i = (u, c) => {
+      c.forEach((l) => {
         const d = this._resolveColumnIndex(t, l);
         d >= 0 && u.add(d);
       });
@@ -947,17 +950,17 @@ class R extends C {
     try {
       const u = JSON.parse(a);
       if (u && typeof u == "object") {
-        r(e, this._normalizePinTokens(u.left)), r(i, this._normalizePinTokens(u.right));
-        const h = Array.from(e).sort((d, c) => d - c), l = Array.from(i).filter((d) => !e.has(d)).sort((d, c) => c - d);
-        return { left: h, right: l };
+        i(e, this._normalizePinTokens(u.left)), i(r, this._normalizePinTokens(u.right));
+        const c = Array.from(e).sort((d, h) => d - h), l = Array.from(r).filter((d) => !e.has(d)).sort((d, h) => h - d);
+        return { left: c, right: l };
       }
     } catch {
     }
     a.split(";").map((u) => u.trim()).filter(Boolean).forEach((u) => {
-      const [h, l] = u.split(":"), d = (h || "").trim().toLowerCase(), c = this._normalizePinTokens(l || "");
-      d === "left" && r(e, c), d === "right" && r(i, c);
+      const [c, l] = u.split(":"), d = (c || "").trim().toLowerCase(), h = this._normalizePinTokens(l || "");
+      d === "left" && i(e, h), d === "right" && i(r, h);
     });
-    const o = Array.from(e).sort((u, h) => u - h), n = Array.from(i).filter((u) => !e.has(u)).sort((u, h) => h - u);
+    const o = Array.from(e).sort((u, c) => u - c), n = Array.from(r).filter((u) => !e.has(u)).sort((u, c) => c - u);
     return { left: o, right: n };
   }
   _setPageAttribute(t) {
@@ -983,11 +986,11 @@ class R extends C {
   _resolveColumnWidth(t, a) {
     const e = this._columnWidths.get(t);
     if (typeof e == "number" && Number.isFinite(e)) return Math.max(1, e);
-    const i = a?.getBoundingClientRect().width || a?.offsetWidth || 0;
-    return Number.isFinite(i) && i > 0 ? i : 120;
+    const r = a?.getBoundingClientRect().width || a?.offsetWidth || 0;
+    return Number.isFinite(r) && r > 0 ? r : 120;
   }
-  _pinCell(t, a, e, i, r) {
-    t && (t.setAttribute("data-pinned", a), i ? t.setAttribute("data-pin-edge", "true") : t.removeAttribute("data-pin-edge"), a === "left" ? (t.style.left = `${Math.max(0, Math.round(e))}px`, t.style.right = "") : (t.style.right = `${Math.max(0, Math.round(e))}px`, t.style.left = ""), t.style.zIndex = r ? "4" : "3");
+  _pinCell(t, a, e, r, i) {
+    t && (t.setAttribute("data-pinned", a), r ? t.setAttribute("data-pin-edge", "true") : t.removeAttribute("data-pin-edge"), a === "left" ? (t.style.left = `${Math.max(0, Math.round(e))}px`, t.style.right = "") : (t.style.right = `${Math.max(0, Math.round(e))}px`, t.style.left = ""), t.style.zIndex = i ? "4" : "3");
   }
   _applyPinnedColumns() {
     if (!this._table) return;
@@ -996,21 +999,21 @@ class R extends C {
     if (!t.length) return;
     const { left: a, right: e } = this._parsePinColumns(t);
     if (!a.length && !e.length) return;
-    const i = Array.from(this._table.rows).filter((o) => !this._isVirtualSpacerRow(o));
-    let r = 0;
+    const r = Array.from(this._table.rows).filter((o) => !this._isVirtualSpacerRow(o));
+    let i = 0;
     a.forEach((o, n) => {
-      const u = this._resolveColumnWidth(o, t[o]), h = n === a.length - 1;
-      i.forEach((l, d) => {
-        const c = l.cells[o];
-        this._pinCell(c, "left", r, h, d === 0);
-      }), r += u;
+      const u = this._resolveColumnWidth(o, t[o]), c = n === a.length - 1;
+      r.forEach((l, d) => {
+        const h = l.cells[o];
+        this._pinCell(h, "left", i, c, d === 0);
+      }), i += u;
     });
     let s = 0;
     e.forEach((o, n) => {
-      const u = this._resolveColumnWidth(o, t[o]), h = n === e.length - 1;
-      i.forEach((l, d) => {
-        const c = l.cells[o];
-        this._pinCell(c, "right", s, h, d === 0);
+      const u = this._resolveColumnWidth(o, t[o]), c = n === e.length - 1;
+      r.forEach((l, d) => {
+        const h = l.cells[o];
+        this._pinCell(h, "right", s, c, d === 0);
       }), s += u;
     });
   }
@@ -1020,48 +1023,48 @@ class R extends C {
     if (!t) return;
     const a = this._table.tHead?.rows[0], e = this._table.tBodies[0];
     if (!a || !e) return;
-    const i = Array.from(a.cells);
-    if (!i.length) return;
-    const r = t.split(",").map((l) => l.trim()).filter(Boolean);
+    const r = Array.from(a.cells);
     if (!r.length) return;
+    const i = t.split(",").map((l) => l.trim()).filter(Boolean);
+    if (!i.length) return;
     const s = [], o = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Map();
-    i.forEach((l, d) => {
-      const c = (l.getAttribute("data-key") || p(l)).toLowerCase().trim();
-      c && n.set(c, d);
+    r.forEach((l, d) => {
+      const h = (l.getAttribute("data-key") || p(l)).toLowerCase().trim();
+      h && n.set(h, d);
     });
-    for (const l of r) {
+    for (const l of i) {
       const d = Number(l);
-      if (Number.isInteger(d) && d >= 0 && d < i.length) {
+      if (Number.isInteger(d) && d >= 0 && d < r.length) {
         o.has(d) || (o.add(d), s.push(d));
         continue;
       }
-      const c = n.get(l.toLowerCase());
-      typeof c == "number" && !o.has(c) && (o.add(c), s.push(c));
+      const h = n.get(l.toLowerCase());
+      typeof h == "number" && !o.has(h) && (o.add(h), s.push(h));
     }
-    for (let l = 0; l < i.length; l += 1)
+    for (let l = 0; l < r.length; l += 1)
       o.has(l) || s.push(l);
     if (s.every((l, d) => l === d)) return;
-    s.map((l) => i[l]).forEach((l) => a.appendChild(l)), Array.from(e.rows).filter((l) => !this._isVirtualSpacerRow(l)).forEach((l) => {
+    s.map((l) => r[l]).forEach((l) => a.appendChild(l)), Array.from(e.rows).filter((l) => !this._isVirtualSpacerRow(l)).forEach((l) => {
       const d = Array.from(l.cells);
       s.map((f) => d[f]).filter(Boolean).forEach((f) => l.appendChild(f));
     }), this._columnWidths.clear();
   }
   _moveColumn(t, a) {
     if (!this._table) return !1;
-    const e = this._table.tHead?.rows[0], i = this._table.tBodies[0];
-    if (!e || !i) return !1;
-    const r = Array.from(e.cells), s = r.length;
+    const e = this._table.tHead?.rows[0], r = this._table.tBodies[0];
+    if (!e || !r) return !1;
+    const i = Array.from(e.cells), s = i.length;
     if (!s || t < 0 || t >= s || a < 0 || a >= s || t === a) return !1;
     const o = Array.from({ length: s }, (l, d) => d), [n] = o.splice(t, 1);
-    o.splice(a, 0, n), o.map((l) => r[l]).forEach((l) => e.appendChild(l)), Array.from(i.rows).filter((l) => !this._isVirtualSpacerRow(l)).forEach((l) => {
+    o.splice(a, 0, n), o.map((l) => i[l]).forEach((l) => e.appendChild(l)), Array.from(r.rows).filter((l) => !this._isVirtualSpacerRow(l)).forEach((l) => {
       const d = Array.from(l.cells);
       o.map((f) => d[f]).filter(Boolean).forEach((f) => l.appendChild(f));
     });
-    const h = /* @__PURE__ */ new Map();
+    const c = /* @__PURE__ */ new Map();
     return o.forEach((l, d) => {
-      const c = this._columnWidths.get(l);
-      typeof c == "number" && h.set(d, c);
-    }), this._columnWidths = h, this._sortColumnIndex >= 0 && (this._sortColumnIndex = o.indexOf(this._sortColumnIndex)), this._syncHeaderState(), this._applyPinnedColumns(), this._syncRowSelectionState(), !0;
+      const h = this._columnWidths.get(l);
+      typeof h == "number" && c.set(d, h);
+    }), this._columnWidths = c, this._sortColumnIndex >= 0 && (this._sortColumnIndex = o.indexOf(this._sortColumnIndex)), this._syncHeaderState(), this._applyPinnedColumns(), this._syncRowSelectionState(), !0;
   }
   _clearDragMarkers() {
     this._headerCells().forEach((a) => {
@@ -1076,7 +1079,7 @@ class R extends C {
           sourceIndex: t,
           targetIndex: a,
           order: e,
-          keys: this._headerCells().map((i, r) => this._headerKey(i, r))
+          keys: this._headerCells().map((r, i) => this._headerKey(r, i))
         },
         bubbles: !0
       })
@@ -1087,14 +1090,31 @@ class R extends C {
     e && e.focus();
   }
   _focusSelectableRow(t, a) {
-    const e = this._bodyRows().filter((o) => !o.hidden), i = e.indexOf(t);
-    if (i < 0) return;
-    const r = Math.min(e.length - 1, Math.max(0, i + a)), s = e[r];
+    const e = this._bodyRows().filter((o) => !o.hidden), r = e.indexOf(t);
+    if (r < 0) return;
+    const i = Math.min(e.length - 1, Math.max(0, r + a)), s = e[i];
     s && s.focus();
   }
   _headerKeyboardShortcuts(t, a) {
-    const e = this._isRtl(), i = e ? "ArrowRight" : "ArrowLeft", r = e ? "ArrowLeft" : "ArrowRight", s = [i, r, "Home", "End"];
-    return t && s.push("Enter", "Space"), a && s.push(`Alt+${i}`, `Alt+${r}`), s.join(" ");
+    const e = this._isRtl(), r = e ? "ArrowRight" : "ArrowLeft", i = e ? "ArrowLeft" : "ArrowRight", s = [r, i, "Home", "End"];
+    return t && s.push("Enter", "Space"), a && s.push(`Alt+${r}`, `Alt+${i}`), s.join(" ");
+  }
+  /**
+   * A frame that scrolls but holds nothing focusable (a loading or read-only table in a narrow
+   * container) cannot be scrolled from the keyboard. Make it a focusable, named region while that is true.
+   */
+  _syncScrollRegion() {
+    const t = this._frameEl;
+    if (!t) return;
+    const a = t.scrollWidth > t.clientWidth + 1 || t.scrollHeight > t.clientHeight + 1, e = !!this._table?.querySelector('[tabindex="0"], a[href], button, input, select, textarea');
+    if (a && !e) {
+      t.setAttribute("tabindex", "0"), t.setAttribute("role", "region"), t.setAttribute("data-scroll-region", "");
+      const r = (this.getAttribute("aria-label") || "").trim();
+      t.setAttribute("aria-label", r ? `${r}, scrollable` : "Scrollable table");
+    } else t.hasAttribute("data-scroll-region") && (t.removeAttribute("tabindex"), t.removeAttribute("role"), t.removeAttribute("aria-label"), t.removeAttribute("data-scroll-region"));
+  }
+  _watchScrollRegion() {
+    this._scrollObserver?.disconnect(), this._scrollObserver = null, !(!this._frameEl || typeof ResizeObserver > "u") && (this._scrollObserver = new ResizeObserver(() => this._syncScrollRegion()), this._scrollObserver.observe(this._frameEl), this._table && this._scrollObserver.observe(this._table));
   }
   _syncStructure() {
     if (!this._isSyncing) {
@@ -1102,7 +1122,7 @@ class R extends C {
       try {
         this._table = this._findTable();
         const t = this.root.querySelector(".frame");
-        this._frameEl !== t && (this._frameEl && this._frameEl.removeEventListener("scroll", this._onFrameScroll), this._frameEl = t, this._frameEl && this._frameEl.addEventListener("scroll", this._onFrameScroll, { passive: !0 }));
+        this._frameEl !== t && (this._frameEl && this._frameEl.removeEventListener("scroll", this._onFrameScroll), this._frameEl = t, this._frameEl && this._frameEl.addEventListener("scroll", this._onFrameScroll, { passive: !0 }), this._watchScrollRegion());
         const a = this.root.querySelector(".empty"), e = this.root.querySelector(".summary");
         if (this._syncEmptyText(), !this._table) {
           a && a.removeAttribute("hidden"), e && (e.textContent = ""), this._selectedRows.clear(), this._page = 1, this._pageCount = 1, this._totalRows = 0, this._filteredRows = 0, this._clearVirtualization(!1), this._syncPaginationElement(), this._syncStateBar();
@@ -1115,9 +1135,9 @@ class R extends C {
     }
   }
   _syncHeaderState() {
-    const t = this.hasAttribute("sortable"), a = this.hasAttribute("draggable-columns"), e = this.hasAttribute("resizable-columns"), i = this._headerKeyboardShortcuts(t, a);
+    const t = this.hasAttribute("sortable"), a = this.hasAttribute("draggable-columns"), e = this.hasAttribute("resizable-columns"), r = this._headerKeyboardShortcuts(t, a);
     this._headerCells().forEach((s, o) => {
-      if (s.setAttribute("data-col-index", String(o)), s.setAttribute("scope", "col"), s.setAttribute("aria-colindex", String(o + 1)), t || a ? s.setAttribute("aria-keyshortcuts", i) : s.removeAttribute("aria-keyshortcuts"), t ? s.setAttribute("data-sortable", "true") : s.removeAttribute("data-sortable"), t || a ? s.hasAttribute("tabindex") || s.setAttribute("tabindex", "0") : s.getAttribute("tabindex") === "0" && s.removeAttribute("tabindex"), o === this._sortColumnIndex && t ? s.setAttribute("aria-sort", this._sortDirection === "asc" ? "ascending" : "descending") : t ? s.setAttribute("aria-sort", "none") : s.removeAttribute("aria-sort"), a ? (s.setAttribute("data-draggable", "true"), s.setAttribute("draggable", "true"), s.setAttribute("aria-description", "Draggable column header")) : (s.removeAttribute("data-draggable"), s.removeAttribute("draggable"), s.removeAttribute("data-dragging"), s.removeAttribute("data-drag-over"), s.removeAttribute("aria-description")), e) {
+      if (s.setAttribute("data-col-index", String(o)), s.setAttribute("scope", "col"), s.setAttribute("aria-colindex", String(o + 1)), t || a ? s.setAttribute("aria-keyshortcuts", r) : s.removeAttribute("aria-keyshortcuts"), t ? s.setAttribute("data-sortable", "true") : s.removeAttribute("data-sortable"), t || a ? s.hasAttribute("tabindex") || s.setAttribute("tabindex", "0") : s.getAttribute("tabindex") === "0" && s.removeAttribute("tabindex"), o === this._sortColumnIndex && t ? s.setAttribute("aria-sort", this._sortDirection === "asc" ? "ascending" : "descending") : t ? s.setAttribute("aria-sort", "none") : s.removeAttribute("aria-sort"), a ? (s.setAttribute("data-draggable", "true"), s.setAttribute("draggable", "true"), s.setAttribute("aria-description", "Draggable column header")) : (s.removeAttribute("data-draggable"), s.removeAttribute("draggable"), s.removeAttribute("data-dragging"), s.removeAttribute("data-drag-over"), s.removeAttribute("aria-description")), e) {
         s.setAttribute("data-resizable", "true");
         let n = s.querySelector(".resize-handle");
         n || (n = document.createElement("button"), n.type = "button", n.className = "resize-handle", n.setAttribute("aria-hidden", "true"), n.tabIndex = -1, s.appendChild(n)), n.setAttribute("data-col-index", String(o));
@@ -1133,18 +1153,18 @@ class R extends C {
   _applyPagination(t) {
     const a = this._bodyRows();
     this._pageSize = this._parsePageSize(), this._totalRows = a.length;
-    const e = this._parseFilterQuery(), i = this._headerCells(), r = this._resolveFilterColumnIndex(i), s = this._parseFilters(i), o = a.filter((d) => this._rowMatchesFilter(d, e, r, s));
+    const e = this._parseFilterQuery(), r = this._headerCells(), i = this._resolveFilterColumnIndex(r), s = this._parseFilters(r), o = a.filter((d) => this._rowMatchesFilter(d, e, i, s));
     this._filteredRows = o.length, this._table?.setAttribute("aria-rowcount", String(this._filteredRows));
     const n = this._parsePage();
     this._pageCount = Math.max(1, Math.ceil(o.length / this._pageSize)), this._page = Math.min(this._pageCount, Math.max(1, n)), this._page !== n && this._setPageAttribute(this._page);
-    const u = (this._page - 1) * this._pageSize, h = u + this._pageSize, l = new Set(o);
+    const u = (this._page - 1) * this._pageSize, c = u + this._pageSize, l = new Set(o);
     if (a.forEach((d) => {
       l.has(d) ? d.removeAttribute("data-hidden-by-filter") : (d.hidden = !0, d.setAttribute("data-hidden-by-filter", ""), d.removeAttribute("data-hidden-by-page"), d.removeAttribute("aria-rowindex"));
-    }), o.forEach((d, c) => {
-      const f = c >= u && c < h;
-      d.hidden = !f, f ? d.removeAttribute("data-hidden-by-page") : d.setAttribute("data-hidden-by-page", ""), d.setAttribute("aria-rowindex", String(c + 1));
+    }), o.forEach((d, h) => {
+      const f = h >= u && h < c;
+      d.hidden = !f, f ? d.removeAttribute("data-hidden-by-page") : d.setAttribute("data-hidden-by-page", ""), d.setAttribute("aria-rowindex", String(h + 1));
     }), t) {
-      const d = o.length, c = d === 0 ? 0 : u + 1, f = Math.min(h, d);
+      const d = o.length, h = d === 0 ? 0 : u + 1, f = Math.min(c, d);
       this.dispatchEvent(
         new CustomEvent("page-change", {
           detail: {
@@ -1152,7 +1172,7 @@ class R extends C {
             count: this._pageCount,
             pageSize: this._pageSize,
             total: d,
-            start: c,
+            start: h,
             end: f
           },
           bubbles: !0
@@ -1171,15 +1191,15 @@ class R extends C {
     if (!a) return null;
     const e = t === "top" ? this._virtualTopSpacer : this._virtualBottomSpacer;
     if (e && e.isConnected) return e;
-    const i = document.createElement("tr");
-    i.setAttribute("data-virtual-spacer", t), i.setAttribute("aria-hidden", "true"), i.setAttribute("role", "presentation"), i.style.pointerEvents = "none";
-    const r = document.createElement("td");
-    return r.style.padding = "0", r.style.border = "0", r.style.height = "0px", r.style.lineHeight = "0", r.style.fontSize = "0", r.innerHTML = "&nbsp;", i.appendChild(r), t === "top" ? (a.insertBefore(i, a.firstChild), this._virtualTopSpacer = i) : (a.appendChild(i), this._virtualBottomSpacer = i), i;
+    const r = document.createElement("tr");
+    r.setAttribute("data-virtual-spacer", t), r.setAttribute("aria-hidden", "true"), r.setAttribute("role", "presentation"), r.style.pointerEvents = "none";
+    const i = document.createElement("td");
+    return i.style.padding = "0", i.style.border = "0", i.style.height = "0px", i.style.lineHeight = "0", i.style.fontSize = "0", i.innerHTML = "&nbsp;", r.appendChild(i), t === "top" ? (a.insertBefore(r, a.firstChild), this._virtualTopSpacer = r) : (a.appendChild(r), this._virtualBottomSpacer = r), r;
   }
   _setVirtualSpacerHeight(t, a, e) {
     if (!t) return;
-    const i = t.cells[0] || t.appendChild(document.createElement("td"));
-    i.colSpan !== Math.max(1, e) && (i.colSpan = Math.max(1, e)), i.style.padding = "0", i.style.border = "0", i.style.height = `${Math.max(0, Math.round(a))}px`, i.style.lineHeight = "0", i.style.fontSize = "0";
+    const r = t.cells[0] || t.appendChild(document.createElement("td"));
+    r.colSpan !== Math.max(1, e) && (r.colSpan = Math.max(1, e)), r.style.padding = "0", r.style.border = "0", r.style.height = `${Math.max(0, Math.round(a))}px`, r.style.lineHeight = "0", r.style.fontSize = "0";
   }
   _applyVirtualization(t) {
     if (!this.hasAttribute("virtualize") || !this._frameEl || !this._table) {
@@ -1191,8 +1211,8 @@ class R extends C {
       this._clearVirtualization(!0);
       return;
     }
-    const i = this._parseRowHeight(), r = this._parseOverscan(), s = this._frameEl.clientHeight || i * 8, o = this._frameEl.scrollTop, n = Math.max(0, Math.floor(o / i) - r), u = Math.min(e.length, Math.ceil((o + s) / i) + r), h = n * i, l = Math.max(0, (e.length - u) * i), d = Math.max(1, this._headerCells().length || e[0]?.cells.length || 1), c = this._ensureVirtualSpacer("top"), f = this._ensureVirtualSpacer("bottom");
-    this._setVirtualSpacerHeight(c, h, d), this._setVirtualSpacerHeight(f, l, d);
+    const r = this._parseRowHeight(), i = this._parseOverscan(), s = this._frameEl.clientHeight || r * 8, o = this._frameEl.scrollTop, n = Math.max(0, Math.floor(o / r) - i), u = Math.min(e.length, Math.ceil((o + s) / r) + i), c = n * r, l = Math.max(0, (e.length - u) * r), d = Math.max(1, this._headerCells().length || e[0]?.cells.length || 1), h = this._ensureVirtualSpacer("top"), f = this._ensureVirtualSpacer("bottom");
+    this._setVirtualSpacerHeight(h, c, d), this._setVirtualSpacerHeight(f, l, d);
     const y = (g, v) => {
       v ? (g.style.display === "none" && (g.style.display = ""), g.removeAttribute("data-hidden-by-virtual")) : (g.style.display !== "none" && (g.style.display = "none"), g.setAttribute("data-hidden-by-virtual", ""));
     };
@@ -1239,12 +1259,12 @@ class R extends C {
       t.textContent = "No records";
       return;
     }
-    const i = (this._page - 1) * this._pageSize + 1, r = Math.min(this._page * this._pageSize, e);
+    const r = (this._page - 1) * this._pageSize + 1, i = Math.min(this._page * this._pageSize, e);
     if (e === a) {
-      t.textContent = `Showing ${i}-${r} of ${a}`;
+      t.textContent = `Showing ${r}-${i} of ${a}`;
       return;
     }
-    t.textContent = `Showing ${i}-${r} of ${e} filtered records (${a} total)`;
+    t.textContent = `Showing ${r}-${i} of ${e} filtered records (${a} total)`;
   }
   _syncEmptyText() {
     const t = this.root.querySelector(".empty");
@@ -1276,45 +1296,45 @@ class R extends C {
     return /^-?\d+(\.\d+)?$/.test(a) ? Number(a) : t.toLowerCase();
   }
   _rulePasses(t, a) {
-    const e = a.op, i = a.value, r = t.trim(), s = r.toLowerCase();
-    if (e === "empty") return r.length === 0;
-    if (e === "notempty" || e === "not-empty") return r.length > 0;
-    if (e === "equals" || e === "eq") return s === String(i ?? "").toLowerCase();
-    if (e === "neq" || e === "not-equals") return s !== String(i ?? "").toLowerCase();
-    if (e === "startswith" || e === "starts-with") return s.startsWith(String(i ?? "").toLowerCase());
-    if (e === "endswith" || e === "ends-with") return s.endsWith(String(i ?? "").toLowerCase());
+    const e = a.op, r = a.value, i = t.trim(), s = i.toLowerCase();
+    if (e === "empty") return i.length === 0;
+    if (e === "notempty" || e === "not-empty") return i.length > 0;
+    if (e === "equals" || e === "eq") return s === String(r ?? "").toLowerCase();
+    if (e === "neq" || e === "not-equals") return s !== String(r ?? "").toLowerCase();
+    if (e === "startswith" || e === "starts-with") return s.startsWith(String(r ?? "").toLowerCase());
+    if (e === "endswith" || e === "ends-with") return s.endsWith(String(r ?? "").toLowerCase());
     if (e === "in")
-      return (Array.isArray(i) ? i.map((n) => String(n).toLowerCase()) : String(i ?? "").split(",").map((n) => n.trim().toLowerCase()).filter(Boolean)).includes(s);
+      return (Array.isArray(r) ? r.map((n) => String(n).toLowerCase()) : String(r ?? "").split(",").map((n) => n.trim().toLowerCase()).filter(Boolean)).includes(s);
     if (e === "gt" || e === "gte" || e === "lt" || e === "lte" || e === "between") {
-      const o = this._parseComparable(r);
+      const o = this._parseComparable(i);
       if (typeof o != "number") return !1;
       if (e === "between") {
-        const u = Array.isArray(i) ? i : String(i ?? "").split(","), h = Number(u[0]), l = Number(u[1]);
-        return !Number.isFinite(h) || !Number.isFinite(l) ? !1 : o >= Math.min(h, l) && o <= Math.max(h, l);
+        const u = Array.isArray(r) ? r : String(r ?? "").split(","), c = Number(u[0]), l = Number(u[1]);
+        return !Number.isFinite(c) || !Number.isFinite(l) ? !1 : o >= Math.min(c, l) && o <= Math.max(c, l);
       }
-      const n = Number(i);
+      const n = Number(r);
       return Number.isFinite(n) ? e === "gt" ? o > n : e === "gte" ? o >= n : e === "lt" ? o < n : o <= n : !1;
     }
-    return s.includes(String(i ?? "").toLowerCase());
+    return s.includes(String(r ?? "").toLowerCase());
   }
-  _rowMatchesFilter(t, a, e, i) {
+  _rowMatchesFilter(t, a, e, r) {
     if (a) {
-      const r = e >= 0 ? p(t.cells[e]) : Array.from(t.cells).map((n) => p(n)).join(" ");
-      if (!r) return !1;
-      const s = r.toLowerCase(), o = a.split(/\s+/).filter(Boolean);
+      const i = e >= 0 ? p(t.cells[e]) : Array.from(t.cells).map((n) => p(n)).join(" ");
+      if (!i) return !1;
+      const s = i.toLowerCase(), o = a.split(/\s+/).filter(Boolean);
       if (o.length && !o.every((n) => s.includes(n))) return !1;
     }
-    return i.length ? i.every((r) => {
-      const s = t.cells[r.columnIndex];
-      return this._rulePasses(p(s), r);
+    return r.length ? r.every((i) => {
+      const s = t.cells[i.columnIndex];
+      return this._rulePasses(p(s), i);
     }) : !0;
   }
   _setColumnWidth(t, a, e = !0) {
     if (!this._table) return;
-    const i = Math.max(72, Math.round(a));
-    if (this._columnWidths.set(t, i), Array.from(this._table.rows).forEach((o) => {
+    const r = Math.max(72, Math.round(a));
+    if (this._columnWidths.set(t, r), Array.from(this._table.rows).forEach((o) => {
       const n = o.cells[t];
-      n && (n.style.width = `${i}px`, n.style.minWidth = `${i}px`, n.style.maxWidth = `${i}px`, n.style.boxSizing = "border-box");
+      n && (n.style.width = `${r}px`, n.style.minWidth = `${r}px`, n.style.maxWidth = `${r}px`, n.style.boxSizing = "border-box");
     }), !e) return;
     this._applyPinnedColumns();
     const s = this._headerCells()[t];
@@ -1323,7 +1343,7 @@ class R extends C {
         detail: {
           columnIndex: t,
           key: s?.getAttribute("data-key") || p(s) || `column-${t + 1}`,
-          width: i
+          width: r
         },
         bubbles: !0
       })
@@ -1333,14 +1353,14 @@ class R extends C {
     if (!this.hasAttribute("resizable-columns") || !this._table) return;
     const e = t.target.closest(".resize-handle");
     if (!e || !this._table.contains(e)) return;
-    const i = Number(e.getAttribute("data-col-index"));
-    if (!Number.isInteger(i) || i < 0) return;
-    const r = this._headerCells()[i];
-    if (!r) return;
+    const r = Number(e.getAttribute("data-col-index"));
+    if (!Number.isInteger(r) || r < 0) return;
+    const i = this._headerCells()[r];
+    if (!i) return;
     t.preventDefault();
-    const s = r.getBoundingClientRect().width;
+    const s = i.getBoundingClientRect().width;
     this._resizeState = {
-      columnIndex: i,
+      columnIndex: r,
       startX: t.clientX,
       startWidth: s
     }, window.addEventListener("pointermove", this._onPointerMove), window.addEventListener("pointerup", this._onPointerUp);
@@ -1373,58 +1393,58 @@ class R extends C {
     }
     const e = a.closest("th");
     if (!e || !this._table.contains(e)) return;
-    const r = this._headerCells().indexOf(e);
-    r < 0 || (this._dragColumnIndex = r, this._dragOverColumnIndex = r, this._clearDragMarkers(), e.setAttribute("data-dragging", "true"), t.dataTransfer && (t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", String(r))));
+    const i = this._headerCells().indexOf(e);
+    i < 0 || (this._dragColumnIndex = i, this._dragOverColumnIndex = i, this._clearDragMarkers(), e.setAttribute("data-dragging", "true"), t.dataTransfer && (t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", String(i))));
   }
   _onDragOver(t) {
     if (!this.hasAttribute("draggable-columns") || !this._table || this._dragColumnIndex < 0) return;
     const e = t.target.closest("th");
     if (!e || !this._table.contains(e)) return;
-    const i = this._headerCells(), r = i.indexOf(e);
-    if (r < 0 || (t.preventDefault(), this._dragOverColumnIndex === r)) return;
-    this._clearDragMarkers(), this._dragOverColumnIndex = r, e.setAttribute("data-drag-over", "true");
-    const s = i[this._dragColumnIndex];
+    const r = this._headerCells(), i = r.indexOf(e);
+    if (i < 0 || (t.preventDefault(), this._dragOverColumnIndex === i)) return;
+    this._clearDragMarkers(), this._dragOverColumnIndex = i, e.setAttribute("data-drag-over", "true");
+    const s = r[this._dragColumnIndex];
     s && s.setAttribute("data-dragging", "true");
   }
   _onDrop(t) {
     if (!this.hasAttribute("draggable-columns") || !this._table || this._dragColumnIndex < 0) return;
     const e = t.target.closest("th");
     if (!e || !this._table.contains(e)) return;
-    const r = this._headerCells().indexOf(e);
-    if (r < 0) return;
+    const i = this._headerCells().indexOf(e);
+    if (i < 0) return;
     t.preventDefault();
-    const s = this._dragColumnIndex, o = this._moveColumn(s, r);
-    this._clearDragMarkers(), this._dragColumnIndex = -1, this._ignoreHeaderClickUntil = Date.now() + 220, o && (this._applyVirtualization(!1), this._emitColumnOrderChange(s, r));
+    const s = this._dragColumnIndex, o = this._moveColumn(s, i);
+    this._clearDragMarkers(), this._dragColumnIndex = -1, this._ignoreHeaderClickUntil = Date.now() + 220, o && (this._applyVirtualization(!1), this._emitColumnOrderChange(s, i));
   }
   _onDragEnd() {
     this._clearDragMarkers(), this._dragColumnIndex = -1;
   }
   _rowValues(t) {
-    const a = this._headerCells(), e = Array.from(t.cells), i = {};
-    return e.forEach((r, s) => {
+    const a = this._headerCells(), e = Array.from(t.cells), r = {};
+    return e.forEach((i, s) => {
       const o = a[s], n = (o?.getAttribute("data-key") || p(o || void 0) || `col_${s + 1}`).toLowerCase().replace(/[^a-z0-9_]+/g, "_").replace(/^_+|_+$/g, "");
-      i[n || `col_${s + 1}`] = p(r);
-    }), i;
+      r[n || `col_${s + 1}`] = p(i);
+    }), r;
   }
   _syncRowSelectionState() {
     const t = this.hasAttribute("selectable"), a = this._bodyRows();
     for (const e of Array.from(this._selectedRows))
       a.includes(e) || this._selectedRows.delete(e);
     a.forEach((e) => {
-      const i = !e.hidden;
-      t && i ? (e.setAttribute("aria-selected", this._selectedRows.has(e) ? "true" : "false"), e.setAttribute("aria-keyshortcuts", "ArrowUp ArrowDown Home End Enter Space"), e.hasAttribute("tabindex") || e.setAttribute("tabindex", "0"), this._selectedRows.has(e) ? e.setAttribute("data-selected", "true") : e.removeAttribute("data-selected")) : (e.removeAttribute("aria-selected"), e.removeAttribute("aria-keyshortcuts"), e.removeAttribute("data-selected"), e.getAttribute("tabindex") === "0" && e.removeAttribute("tabindex"));
+      const r = !e.hidden;
+      t && r ? (e.setAttribute("aria-selected", this._selectedRows.has(e) ? "true" : "false"), e.setAttribute("aria-keyshortcuts", "ArrowUp ArrowDown Home End Enter Space"), e.hasAttribute("tabindex") || e.setAttribute("tabindex", "0"), this._selectedRows.has(e) ? e.setAttribute("data-selected", "true") : e.removeAttribute("data-selected")) : (e.removeAttribute("aria-selected"), e.removeAttribute("aria-keyshortcuts"), e.removeAttribute("data-selected"), e.getAttribute("tabindex") === "0" && e.removeAttribute("tabindex"));
     });
   }
   _toggleRowSelection(t) {
     const a = this.hasAttribute("multi-select"), e = this._selectedRows.has(t);
     a || this._selectedRows.clear(), e && a ? this._selectedRows.delete(t) : this._selectedRows.add(t), this._syncRowSelectionState(), this._updateBulkActions();
-    const i = this._bodyRows(), r = i.flatMap((o, n) => this._selectedRows.has(o) ? [n] : []), s = i.filter((o) => this._selectedRows.has(o)).map((o) => this._rowValues(o));
+    const r = this._bodyRows(), i = r.flatMap((o, n) => this._selectedRows.has(o) ? [n] : []), s = r.filter((o) => this._selectedRows.has(o)).map((o) => this._rowValues(o));
     this.dispatchEvent(
       new CustomEvent("row-select", {
         detail: {
-          index: i.indexOf(t),
+          index: r.indexOf(t),
           selected: this._selectedRows.has(t),
-          indices: r,
+          indices: i,
           rows: s,
           page: this._page
         },
@@ -1441,9 +1461,9 @@ class R extends C {
       rowIndex: n,
       value: S(p(o.cells[t]))
     })).sort((o, n) => {
-      const u = o.value, h = n.value;
+      const u = o.value, c = n.value;
       let l = 0;
-      return typeof u == "number" && typeof h == "number" ? l = u - h : l = String(u).localeCompare(String(h), void 0, { numeric: !0, sensitivity: "base" }), l === 0 && (l = o.rowIndex - n.rowIndex), this._sortDirection === "asc" ? l : -l;
+      return typeof u == "number" && typeof c == "number" ? l = u - c : l = String(u).localeCompare(String(c), void 0, { numeric: !0, sensitivity: "base" }), l === 0 && (l = o.rowIndex - n.rowIndex), this._sortDirection === "asc" ? l : -l;
     }).map((o) => o.row).forEach((o) => e.appendChild(o)), this._syncHeaderState(), this._applyPagination(!1), this._syncRowSelectionState(), this._updateSummary(), this._syncPaginationElement();
     const s = a.getAttribute("data-key") || p(a) || `column-${t + 1}`;
     this.dispatchEvent(
@@ -1477,29 +1497,29 @@ class R extends C {
   }
   _onClick(t) {
     if (!this._table) return;
-    const e = t.composedPath().find((r) => r instanceof HTMLElement) || t.target;
+    const e = t.composedPath().find((i) => i instanceof HTMLElement) || t.target;
     if (e.closest(".bulk-clear")) {
-      const r = this._selectedRows.size;
-      r > 0 && (this._selectedRows.clear(), this._syncRowSelectionState(), this._updateBulkActions(), this.dispatchEvent(new CustomEvent("bulk-clear", { detail: { count: r, page: this._page }, bubbles: !0 })));
+      const i = this._selectedRows.size;
+      i > 0 && (this._selectedRows.clear(), this._syncRowSelectionState(), this._updateBulkActions(), this.dispatchEvent(new CustomEvent("bulk-clear", { detail: { count: i, page: this._page }, bubbles: !0 })));
       return;
     }
     if (!e.closest(".resize-handle") && !(e.closest("th") && Date.now() < this._ignoreHeaderClickUntil) && !this._isInteractionBlocked()) {
       if (this.hasAttribute("sortable")) {
-        const r = e.closest("th");
-        if (r && this._table.contains(r)) {
-          if (e !== r && this._isInteractiveTarget(e)) return;
-          const o = this._headerCells().indexOf(r);
+        const i = e.closest("th");
+        if (i && this._table.contains(i)) {
+          if (e !== i && this._isInteractiveTarget(e)) return;
+          const o = this._headerCells().indexOf(i);
           if (o >= 0) {
-            this._sortByColumn(o, r);
+            this._sortByColumn(o, i);
             return;
           }
         }
       }
       if (this.hasAttribute("selectable")) {
-        const r = e.closest("tbody tr");
-        if (r && this._table.contains(r) && !r.hidden && !this._isVirtualSpacerRow(r)) {
-          if (e !== r && this._isInteractiveTarget(e)) return;
-          this._toggleRowSelection(r);
+        const i = e.closest("tbody tr");
+        if (i && this._table.contains(i) && !i.hidden && !this._isVirtualSpacerRow(i)) {
+          if (e !== i && this._isInteractiveTarget(e)) return;
+          this._toggleRowSelection(i);
         }
       }
     }
@@ -1508,19 +1528,19 @@ class R extends C {
     if (!this._table) return;
     const a = t.key, e = t.target;
     if (a === "Escape" && this._selectedRows.size) {
-      const r = this._selectedRows.size;
-      this._selectedRows.clear(), this._syncRowSelectionState(), this._updateBulkActions(), this.dispatchEvent(new CustomEvent("bulk-clear", { detail: { count: r, page: this._page }, bubbles: !0 }));
+      const i = this._selectedRows.size;
+      this._selectedRows.clear(), this._syncRowSelectionState(), this._updateBulkActions(), this.dispatchEvent(new CustomEvent("bulk-clear", { detail: { count: i, page: this._page }, bubbles: !0 }));
       return;
     }
     if (this._isInteractionBlocked()) return;
-    const i = e.closest("th");
-    if (i && this._table.contains(i)) {
-      const r = this._headerCells(), s = r.indexOf(i);
+    const r = e.closest("th");
+    if (r && this._table.contains(r)) {
+      const i = this._headerCells(), s = i.indexOf(r);
       if (s >= 0) {
         const n = this._isRtl() ? -1 : 1, u = -n;
         if (a === "ArrowRight" || a === "ArrowLeft") {
           t.preventDefault();
-          const h = a === "ArrowRight" ? n : u, l = Math.max(0, Math.min(r.length - 1, s + h));
+          const c = a === "ArrowRight" ? n : u, l = Math.max(0, Math.min(i.length - 1, s + c));
           if (t.altKey && this.hasAttribute("draggable-columns") && l !== s) {
             this._moveColumn(s, l) && (this._ignoreHeaderClickUntil = Date.now() + 220, this._emitColumnOrderChange(s, l), this._applyVirtualization(!1), this._focusHeaderAt(l));
             return;
@@ -1529,22 +1549,22 @@ class R extends C {
           return;
         }
         if (a === "Home" || a === "End") {
-          t.preventDefault(), this._focusHeaderAt(a === "Home" ? 0 : r.length - 1);
+          t.preventDefault(), this._focusHeaderAt(a === "Home" ? 0 : i.length - 1);
           return;
         }
         if ((a === "Enter" || a === " ") && this.hasAttribute("sortable")) {
-          if (e !== i && this._isInteractiveTarget(e)) return;
-          t.preventDefault(), this._sortByColumn(s, i);
+          if (e !== r && this._isInteractiveTarget(e)) return;
+          t.preventDefault(), this._sortByColumn(s, r);
           return;
         }
       }
     }
     if (this.hasAttribute("selectable")) {
-      const r = e.closest("tbody tr");
-      if (r && this._table.contains(r) && !r.hidden && !this._isVirtualSpacerRow(r)) {
-        if (e !== r && this._isInteractiveTarget(e)) return;
+      const i = e.closest("tbody tr");
+      if (i && this._table.contains(i) && !i.hidden && !this._isVirtualSpacerRow(i)) {
+        if (e !== i && this._isInteractiveTarget(e)) return;
         if (a === "ArrowDown" || a === "ArrowUp") {
-          t.preventDefault(), this._focusSelectableRow(r, a === "ArrowDown" ? 1 : -1);
+          t.preventDefault(), this._focusSelectableRow(i, a === "ArrowDown" ? 1 : -1);
           return;
         }
         if (a === "Home" || a === "End") {
@@ -1553,7 +1573,7 @@ class R extends C {
           o && o.focus();
           return;
         }
-        (a === "Enter" || a === " ") && (t.preventDefault(), this._toggleRowSelection(r));
+        (a === "Enter" || a === " ") && (t.preventDefault(), this._toggleRowSelection(i));
       }
     }
   }
@@ -1566,8 +1586,8 @@ class R extends C {
       return;
     }
     t.removeAttribute("hidden");
-    const r = this.getAttribute("bulk-actions-label") || "{count} selected", s = this.getAttribute("bulk-clear-label") || "Clear selection", o = t.querySelector(".bulk-count");
-    o && (o.textContent = r.replace("{count}", String(e)));
+    const i = this.getAttribute("bulk-actions-label") || "{count} selected", s = this.getAttribute("bulk-clear-label") || "Clear selection", o = t.querySelector(".bulk-count");
+    o && (o.textContent = i.replace("{count}", String(e)));
     const n = t.querySelector(".bulk-clear");
     n && (n.textContent = s);
   }