@helixui/library 2.1.2-next.51 → 2.1.2-next.53

package/dist/shared/{hx-data-table-D5Ne-goy.js → hx-data-table-609C-e9w.js}

@@ -1,8 +1,8 @@
-import { css as b, LitElement as m, html as l, nothing as p } from "lit";
+import { css as f, LitElement as m, html as h, nothing as p } from "lit";
 import "./document-token-adoption-DuYNKd4k.js";
-import { property as d, state as f, customElement as y } from "lit/decorators.js";
-import { repeat as w } from "lit/directives/repeat.js";
-const x = b`
+import { property as d, state as b, customElement as x } from "lit/decorators.js";
+import { repeat as y } from "lit/directives/repeat.js";
+const w = f`
   :host {
     display: block;
     overflow-x: auto;
@@ -209,73 +209,96 @@ const x = b`
     color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));
     padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    table {
+      border: 1px solid CanvasText;
+    }
+
+    th,
+    td {
+      border-bottom-color: CanvasText;
+    }
+
+    tbody tr[aria-selected='true'] {
+      outline: 2px solid Highlight;
+    }
+
+    .skeleton-cell {
+      animation: none;
+      border: 1px solid GrayText;
+      background: none;
+    }
+  }
 `;
-var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (t, e, r, a) => {
-  for (var s = a > 1 ? void 0 : a ? v(e, r) : e, o = t.length - 1, c; o >= 0; o--)
-    (c = t[o]) && (s = (a ? c(e, r, s) : c(s)) || s);
-  return a && s && g(e, r, s), s;
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (e, r, t, o) => {
+  for (var s = o > 1 ? void 0 : o ? v(r, t) : r, a = e.length - 1, n; a >= 0; a--)
+    (n = e[a]) && (s = (o ? n(r, t, s) : n(s)) || s);
+  return o && s && g(r, t, s), s;
 };
-let i = class extends m {
+let l = class extends m {
   constructor() {
-    super(...arguments), this.columns = [], this.rows = [], this.selectable = !1, this.sortKey = "", this.sortDirection = "asc", this.loading = !1, this.emptyLabel = "No data", this.label = "", this.selectAllLabel = "Select all rows", this.stickyHeader = !1, this.page = 1, this.pageSize = 0, this._selectedRows = /* @__PURE__ */ new Set(), this._cachedCells = null;
+    super(...arguments), this.columns = [], this.rows = [], this.selectable = !1, this.sortKey = "", this.sortDirection = "asc", this.loading = !1, this.emptyLabel = "No data", this.label = "", this.selectAllLabel = "Select all rows", this.stickyHeader = !1, this.page = 1, this.pageSize = 0, this._selectedRows = /* @__PURE__ */ new Set(), this._cachedCells = null, this._focusedHeaderIndex = -1;
   }
   // ─── Lifecycle ───
-  willUpdate(t) {
-    if (t.has("columns")) {
-      const e = this.columns;
-      if (typeof e == "string")
+  willUpdate(e) {
+    if (e.has("columns")) {
+      const r = this.columns;
+      if (typeof r == "string")
         try {
-          this.columns = JSON.parse(e);
+          this.columns = JSON.parse(r);
         } catch {
           this.columns = [];
         }
       else Array.isArray(this.columns) || (this.columns = []);
     }
-    if (t.has("rows")) {
-      const e = this.rows;
-      if (typeof e == "string")
+    if (e.has("rows")) {
+      const r = this.rows;
+      if (typeof r == "string")
         try {
-          this.rows = JSON.parse(e);
+          this.rows = JSON.parse(r);
         } catch {
           this.rows = [];
         }
       else Array.isArray(this.rows) || (this.rows = []);
     }
-    t.has("rows") && this.rows.length > 500, (t.has("label") || t.has("columns")) && this.columns.length > 0 && this.label;
+    e.has("rows") && this.rows.length > 500, (e.has("label") || e.has("columns")) && this.columns.length > 0 && this.label;
   }
-  updated(t) {
-    (t.has("rows") || t.has("columns")) && (this._cachedCells = null);
+  updated(e) {
+    (e.has("rows") || e.has("columns")) && (this._cachedCells = null);
   }
   // ─── Event Handlers ───
   /** @internal */
-  _handleSort(t) {
-    const e = this.sortKey === t && this.sortDirection === "asc" ? "desc" : "asc";
-    this.sortKey = t, this.sortDirection = e, this.dispatchEvent(
+  _handleSort(e) {
+    const r = this.sortKey === e && this.sortDirection === "asc" ? "desc" : "asc";
+    this.sortKey = e, this.sortDirection = r, this.dispatchEvent(
       new CustomEvent("hx-sort", {
         bubbles: !0,
         composed: !0,
-        detail: { key: t, direction: e }
+        detail: { key: e, direction: r }
       })
     );
   }
   /** @internal */
-  _handleRowClick(t, e) {
+  _handleRowClick(e, r) {
     this.dispatchEvent(
       new CustomEvent("hx-row-click", {
         bubbles: !0,
         composed: !0,
-        detail: { row: t, index: e }
+        detail: { row: e, index: r }
       })
     );
   }
   /** @internal */
-  _handleSelect(t, e) {
-    const r = new Set(this._selectedRows);
-    e ? r.add(t) : r.delete(t), this._selectedRows = r, this._dispatchSelect();
+  _handleSelect(e, r) {
+    const t = new Set(this._selectedRows);
+    r ? t.add(e) : t.delete(e), this._selectedRows = t, this._dispatchSelect();
   }
   /** @internal */
-  _handleSelectAll(t) {
-    this._selectedRows = t ? new Set(this.rows.map((e, r) => r)) : /* @__PURE__ */ new Set(), this._dispatchSelect();
+  _handleSelectAll(e) {
+    this._selectedRows = e ? new Set(this.rows.map((r, t) => t)) : /* @__PURE__ */ new Set(), this._dispatchSelect();
   }
   /** @internal */
   _dispatchSelect() {
@@ -284,9 +307,9 @@ let i = class extends m {
         bubbles: !0,
         composed: !0,
         detail: {
-          selectedRows: [...this._selectedRows].flatMap((t) => {
-            const e = this.rows[t];
-            return e !== void 0 ? [e] : [];
+          selectedRows: [...this._selectedRows].flatMap((e) => {
+            const r = this.rows[e];
+            return r !== void 0 ? [r] : [];
           })
         }
       })
@@ -294,62 +317,62 @@ let i = class extends m {
   }
   // ─── Keyboard Navigation ───
   /** @internal */
-  _handleKeydown(t) {
+  _handleKeydown(e) {
     var u;
-    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", " "].includes(t.key))
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", " "].includes(e.key))
       return;
-    const e = this.shadowRoot;
-    if (!e) return;
+    const r = this.shadowRoot;
+    if (!r) return;
     this._cachedCells || (this._cachedCells = Array.from(
-      e.querySelectorAll('[part~="td"],[part~="th"]')
+      r.querySelectorAll('[part~="td"],[part~="th"]')
     ));
-    const r = this._cachedCells;
-    let a = e.activeElement;
-    if (!a) return;
-    if (r.indexOf(a) === -1) {
-      let h = a.parentElement;
-      for (; h; ) {
-        if (r.includes(h)) {
-          a = h;
+    const t = this._cachedCells;
+    let o = r.activeElement;
+    if (!o) return;
+    if (t.indexOf(o) === -1) {
+      let i = o.parentElement;
+      for (; i; ) {
+        if (t.includes(i)) {
+          o = i;
           break;
         }
-        h = h.parentElement;
+        i = i.parentElement;
       }
     }
-    const s = this.columns.length + (this.selectable ? 1 : 0), o = r.indexOf(a);
-    if (o === -1) return;
-    let c = null;
-    if (t.key === "ArrowRight" && o + 1 < r.length)
-      c = r[o + 1] ?? null;
-    else if (t.key === "ArrowLeft" && o - 1 >= 0)
-      c = r[o - 1] ?? null;
-    else if (t.key === "ArrowDown" && o + s < r.length)
-      c = r[o + s] ?? null;
-    else if (t.key === "ArrowUp" && o - s >= 0)
-      c = r[o - s] ?? null;
-    else if (t.key === "Home") {
-      const h = o - o % s;
-      c = r[h] ?? null;
-    } else if (t.key === "End") {
-      const h = Math.min(o - o % s + s - 1, r.length - 1);
-      c = r[h] ?? null;
-    } else if (t.key === " " && ((u = a.getAttribute("part")) != null && u.includes("td"))) {
-      const h = Number(a.dataset.rowIndex);
-      this.selectable && !isNaN(h) && (t.preventDefault(), this._handleSelect(h, !this._selectedRows.has(h)));
+    const s = this.columns.length + (this.selectable ? 1 : 0), a = t.indexOf(o);
+    if (a === -1) return;
+    let n = null;
+    if (e.key === "ArrowRight" && a + 1 < t.length)
+      n = t[a + 1] ?? null;
+    else if (e.key === "ArrowLeft" && a - 1 >= 0)
+      n = t[a - 1] ?? null;
+    else if (e.key === "ArrowDown" && a + s < t.length)
+      n = t[a + s] ?? null;
+    else if (e.key === "ArrowUp" && a - s >= 0)
+      n = t[a - s] ?? null;
+    else if (e.key === "Home") {
+      const i = a - a % s;
+      n = t[i] ?? null;
+    } else if (e.key === "End") {
+      const i = Math.min(a - a % s + s - 1, t.length - 1);
+      n = t[i] ?? null;
+    } else if (e.key === " " && ((u = o.getAttribute("part")) != null && u.includes("td"))) {
+      const i = Number(o.dataset.rowIndex);
+      this.selectable && !isNaN(i) && (e.preventDefault(), this._handleSelect(i, !this._selectedRows.has(i)));
       return;
     }
-    c && (t.preventDefault(), c.setAttribute("tabindex", "0"), c.focus(), a.setAttribute("tabindex", "-1"));
+    n && (e.preventDefault(), n.setAttribute("tabindex", "0"), n.focus(), o.setAttribute("tabindex", "-1"));
   }
   // ─── Render Helpers ───
   /** @internal */
-  _renderSortIcon(t) {
-    const e = this.sortKey === t, r = [
+  _renderSortIcon(e) {
+    const r = this.sortKey === e, t = [
       "sort-icon",
-      e ? "sort-icon--active" : "",
-      e && this.sortDirection === "desc" ? "sort-icon--desc" : ""
+      r ? "sort-icon--active" : "",
+      r && this.sortDirection === "desc" ? "sort-icon--desc" : ""
     ].filter(Boolean).join(" ");
-    return l`
-      <span part="sort-icon" class=${r} aria-hidden="true">
+    return h`
+      <span part="sort-icon" class=${t} aria-hidden="true">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 16 16"
@@ -362,11 +385,46 @@ let i = class extends m {
       </span>
     `;
   }
+  /**
+   * Returns the indices (within the columns array) of all sortable columns.
+   * @internal
+   */
+  get _sortableIndices() {
+    return this.columns.reduce((e, r, t) => (r.sortable && e.push(t), e), []);
+  }
+  /**
+   * Handles keyboard navigation between sortable column headers using the
+   * roving tabindex pattern (ARIA Grid specification). Supports ArrowLeft/Right
+   * to move between sortable headers, Home/End to jump to first/last, and
+   * Enter/Space to trigger sort on the focused sortable header.
+   * @internal
+   */
+  _handleHeaderKeydown(e) {
+    var u;
+    const r = this._sortableIndices;
+    if (r.length === 0) return;
+    if (e.key === "Enter" || e.key === " ") {
+      const i = this.columns[this._focusedHeaderIndex];
+      i != null && i.sortable && (e.preventDefault(), this._handleSort(i.key));
+      return;
+    }
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) return;
+    const t = r.indexOf(this._focusedHeaderIndex);
+    if (t === -1) return;
+    let o;
+    e.key === "ArrowRight" ? o = t === -1 ? 0 : Math.min(t + 1, r.length - 1) : e.key === "ArrowLeft" ? o = t <= 0 ? 0 : t - 1 : e.key === "Home" ? o = 0 : o = r.length - 1;
+    const s = r[o];
+    if (s === void 0) return;
+    e.preventDefault(), this._focusedHeaderIndex = s;
+    const a = (u = this.shadowRoot) == null ? void 0 : u.querySelectorAll("thead th[data-col-index]"), n = (a == null ? void 0 : a[s]) ?? null;
+    n && n.focus();
+  }
   /** @internal */
   _renderHeaderRow() {
-    return l`
-      <tr part="tr">
-        ${this.selectable ? l`
+    const e = this._sortableIndices, r = this._focusedHeaderIndex >= 0 ? this._focusedHeaderIndex : e[0] ?? -1;
+    return h`
+      <tr part="tr" @keydown=${this._handleHeaderKeydown}>
+        ${this.selectable ? h`
               <th part="th" class="col-checkbox" tabindex="0">
                 <input
                   type="checkbox"
@@ -379,14 +437,18 @@ let i = class extends m {
               </th>
             ` : p}
         ${this.columns.map(
-      (t) => l`
+      (t, o) => h`
             <th
               part="th"
-              tabindex="0"
+              data-col-index=${o}
+              tabindex=${t.sortable && o === r ? "0" : "-1"}
               style=${t.width ? `width: ${t.width}` : ""}
               aria-sort=${t.sortable ? this.sortKey === t.key ? this.sortDirection === "asc" ? "ascending" : "descending" : "none" : p}
+              @focus=${t.sortable ? () => {
+        this._focusedHeaderIndex = o;
+      } : p}
             >
-              ${t.sortable ? l`
+              ${t.sortable ? h`
                     <button
                       class="sort-btn"
                       @click=${() => this._handleSort(t.key)}
@@ -405,13 +467,13 @@ let i = class extends m {
   _renderSkeletonRows() {
     return Array.from(
       { length: 3 },
-      (t) => l`
+      (e) => h`
         <tr part="tr" aria-hidden="true">
-          ${this.selectable ? l`<td part="td" class="col-checkbox">
+          ${this.selectable ? h`<td part="td" class="col-checkbox">
                 <span class="skeleton-cell" style="width:1rem;margin:auto"></span>
               </td>` : p}
           ${this.columns.map(
-        () => l`
+        () => h`
               <td part="td">
                 <span class="skeleton-cell"></span>
               </td>
@@ -423,10 +485,10 @@ let i = class extends m {
   }
   /** @internal */
   _renderEmptyRow() {
-    const t = this.columns.length + (this.selectable ? 1 : 0);
-    return l`
+    const e = this.columns.length + (this.selectable ? 1 : 0);
+    return h`
       <tr part="tr">
-        <td part="td" colspan=${t} class="empty-cell">
+        <td part="td" colspan=${e} class="empty-cell">
           <slot name="empty">${this.emptyLabel}</slot>
         </td>
       </tr>
@@ -434,41 +496,41 @@ let i = class extends m {
   }
   /** @internal */
   _renderDataRows() {
-    let t = this.rows;
+    let e = this.rows;
     if (this.pageSize > 0) {
-      const e = (this.page - 1) * this.pageSize;
-      t = this.rows.slice(e, e + this.pageSize);
+      const r = (this.page - 1) * this.pageSize;
+      e = this.rows.slice(r, r + this.pageSize);
     }
-    return w(
-      t,
-      (e, r) => this.pageSize > 0 ? (this.page - 1) * this.pageSize + r : r,
-      (e, r) => {
-        const a = this.pageSize > 0 ? (this.page - 1) * this.pageSize + r : r;
-        return l`
+    return y(
+      e,
+      (r, t) => this.pageSize > 0 ? (this.page - 1) * this.pageSize + t : t,
+      (r, t) => {
+        const o = this.pageSize > 0 ? (this.page - 1) * this.pageSize + t : t;
+        return h`
           <tr
             part="tr"
-            aria-selected=${this.selectable ? String(this._selectedRows.has(a)) : p}
-            @click=${() => this._handleRowClick(e, a)}
+            aria-selected=${this.selectable ? String(this._selectedRows.has(o)) : p}
+            @click=${() => this._handleRowClick(r, o)}
             @keydown=${(s) => {
-          (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this._handleRowClick(e, a));
+          (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this._handleRowClick(r, o));
         }}
           >
-            ${this.selectable ? l`
-                  <td part="td" class="col-checkbox" tabindex="-1" data-row-index=${a}>
+            ${this.selectable ? h`
+                  <td part="td" class="col-checkbox" tabindex="-1" data-row-index=${o}>
                     <input
                       type="checkbox"
                       part="checkbox"
-                      aria-label=${`Select row ${a + 1}`}
-                      .checked=${this._selectedRows.has(a)}
+                      aria-label=${`Select row ${o + 1}`}
+                      .checked=${this._selectedRows.has(o)}
                       @click=${(s) => s.stopPropagation()}
-                      @change=${(s) => this._handleSelect(a, s.target.checked)}
+                      @change=${(s) => this._handleSelect(o, s.target.checked)}
                     />
                   </td>
                 ` : p}
             ${this.columns.map(
-          (s) => l`
-                <td part="td" tabindex="-1" data-row-index=${a}>
-                  ${e[s.key] != null ? String(e[s.key]) : ""}
+          (s) => h`
+                <td part="td" tabindex="-1" data-row-index=${o}>
+                  ${r[s.key] != null ? String(r[s.key]) : ""}
                 </td>
               `
         )}
@@ -479,7 +541,7 @@ let i = class extends m {
   }
   // ─── Render ───
   render() {
-    return l`
+    return h`
       <slot name="toolbar"></slot>
       <div class="table-wrapper">
         <table
@@ -493,81 +555,84 @@ let i = class extends m {
             ${this._renderHeaderRow()}
           </thead>
           <tbody part="tbody">
-            ${this.loading ? l`<slot name="loading">${this._renderSkeletonRows()}</slot>` : this.rows.length === 0 ? this._renderEmptyRow() : this._renderDataRows()}
+            ${this.loading ? h`<slot name="loading">${this._renderSkeletonRows()}</slot>` : this.rows.length === 0 ? this._renderEmptyRow() : this._renderDataRows()}
           </tbody>
         </table>
       </div>
     `;
   }
 };
-i.styles = [x];
-n([
+l.styles = [w];
+c([
   d({
     type: Array,
     converter: {
-      fromAttribute(t) {
-        if (!t) return [];
+      fromAttribute(e) {
+        if (!e) return [];
         try {
-          return JSON.parse(t);
+          return JSON.parse(e);
         } catch {
           return [];
         }
       }
     }
   })
-], i.prototype, "columns", 2);
-n([
+], l.prototype, "columns", 2);
+c([
   d({
     type: Array,
     converter: {
-      fromAttribute(t) {
-        if (!t) return [];
+      fromAttribute(e) {
+        if (!e) return [];
         try {
-          return JSON.parse(t);
+          return JSON.parse(e);
         } catch {
           return [];
         }
       }
     }
   })
-], i.prototype, "rows", 2);
-n([
+], l.prototype, "rows", 2);
+c([
   d({ type: Boolean, reflect: !0 })
-], i.prototype, "selectable", 2);
-n([
+], l.prototype, "selectable", 2);
+c([
   d({ type: String, attribute: "sort-key" })
-], i.prototype, "sortKey", 2);
-n([
+], l.prototype, "sortKey", 2);
+c([
   d({ type: String, attribute: "sort-direction" })
-], i.prototype, "sortDirection", 2);
-n([
+], l.prototype, "sortDirection", 2);
+c([
   d({ type: Boolean, reflect: !0 })
-], i.prototype, "loading", 2);
-n([
+], l.prototype, "loading", 2);
+c([
   d({ type: String, attribute: "empty-label" })
-], i.prototype, "emptyLabel", 2);
-n([
+], l.prototype, "emptyLabel", 2);
+c([
   d({ type: String })
-], i.prototype, "label", 2);
-n([
+], l.prototype, "label", 2);
+c([
   d({ attribute: "select-all-label" })
-], i.prototype, "selectAllLabel", 2);
-n([
+], l.prototype, "selectAllLabel", 2);
+c([
   d({ type: Boolean, reflect: !0, attribute: "sticky-header" })
-], i.prototype, "stickyHeader", 2);
-n([
+], l.prototype, "stickyHeader", 2);
+c([
   d({ type: Number })
-], i.prototype, "page", 2);
-n([
+], l.prototype, "page", 2);
+c([
   d({ type: Number, attribute: "page-size" })
-], i.prototype, "pageSize", 2);
-n([
-  f()
-], i.prototype, "_selectedRows", 2);
-i = n([
-  y("hx-data-table")
-], i);
+], l.prototype, "pageSize", 2);
+c([
+  b()
+], l.prototype, "_selectedRows", 2);
+c([
+  b()
+], l.prototype, "_focusedHeaderIndex", 2);
+l = c([
+  x("hx-data-table")
+], l);
 export {
-  i as H
+  l as H
 };
-//# sourceMappingURL=hx-data-table-D5Ne-goy.js.map
+//# sourceMappingURL=hx-data-table-609C-e9w.js.map