@helixui/library 3.0.0 → 3.1.0-next.67

package/dist/shared/{hx-data-table-B6h0RPn0.js → hx-data-table-CnLxo9PH.js}

@@ -1,5 +1,5 @@
-import { css as f, html as c, nothing as p } from "lit";
-import { property as d, state as b, customElement as m } from "lit/decorators.js";
+import { css as f, html as d, nothing as p } from "lit";
+import { property as c, state as b, customElement as m } from "lit/decorators.js";
 import { repeat as x } from "lit/directives/repeat.js";
 import { H as y } from "./helix-element-BNEYeiys.js";
 const v = f`
@@ -29,14 +29,14 @@ const v = f`
   /* ─── Head ─── */
 
   thead {
-    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   :host([sticky-header]) thead th {
     position: sticky;
     top: 0;
     z-index: 1;
-    background-color: var(--hx-data-table-header-bg, var(--hx-color-neutral-50, #f8fafc));
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   /* ─── Cells ─── */
@@ -46,18 +46,18 @@ const v = f`
     padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
     text-align: start;
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-data-table-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-data-table-border-color, var(--hx-color-border-default, #e2e8f0));
     vertical-align: middle;
   }
 
   th {
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-data-table-header-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-data-table-header-color, var(--hx-color-text-strong, #334155));
     white-space: nowrap;
   }
 
   td {
-    color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-data-table-cell-color, var(--hx-color-text-primary, #0f172a));
   }
 
   /* ─── Checkbox Column ─── */
@@ -131,7 +131,7 @@ const v = f`
   }
 
   tbody tr:hover {
-    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-neutral-50, #f8fafc));
+    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-surface-raised, #f8fafc));
   }
 
   tbody tr[aria-selected='true'] {
@@ -153,6 +153,7 @@ const v = f`
     display: block;
     height: 1em;
     border-radius: var(--hx-border-radius-sm, 2px);
+    /* Skeleton shimmer: intentionally primitive so the animation reads the same across all modes. */
     background: linear-gradient(
       90deg,
       var(--hx-color-neutral-200, #e2e8f0) 25%,
@@ -206,7 +207,7 @@ const v = f`
 
   .empty-cell {
     text-align: center;
-    color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-data-table-empty-color, var(--hx-color-text-secondary, #475569));
     padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
   }
 
@@ -233,10 +234,10 @@ const v = f`
     }
   }
 `;
-var w = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (e, r, t, o) => {
-  for (var s = o > 1 ? void 0 : o ? g(r, t) : r, a = e.length - 1, h; a >= 0; a--)
-    (h = e[a]) && (s = (o ? h(r, t, s) : h(s)) || s);
-  return o && s && w(r, t, s), s;
+var w = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (e, r, t, s) => {
+  for (var o = s > 1 ? void 0 : s ? g(r, t) : r, a = e.length - 1, h; a >= 0; a--)
+    (h = e[a]) && (o = (s ? h(r, t, o) : h(o)) || o);
+  return s && o && w(r, t, o), o;
 };
 let i = class extends y {
   constructor() {
@@ -327,41 +328,41 @@ let i = class extends y {
       r.querySelectorAll('[part~="td"],[part~="th"]')
     ));
     const t = this._cachedCells;
-    let o = r.activeElement;
-    if (!o) return;
-    if (t.indexOf(o) === -1) {
-      let l = o.parentElement;
+    let s = r.activeElement;
+    if (!s) return;
+    if (t.indexOf(s) === -1) {
+      let l = s.parentElement;
       for (; l; ) {
         if (t.includes(l)) {
-          o = l;
+          s = l;
           break;
         }
         l = l.parentElement;
       }
     }
-    const s = this._resolvedColumns.length + (this.selectable ? 1 : 0), a = t.indexOf(o);
+    const o = this._resolvedColumns.length + (this.selectable ? 1 : 0), a = t.indexOf(s);
     if (a === -1) return;
     let h = null;
     if (e.key === "ArrowRight" && a + 1 < t.length)
       h = t[a + 1] ?? null;
     else if (e.key === "ArrowLeft" && a - 1 >= 0)
       h = t[a - 1] ?? null;
-    else if (e.key === "ArrowDown" && a + s < t.length)
-      h = t[a + s] ?? null;
-    else if (e.key === "ArrowUp" && a - s >= 0)
-      h = t[a - s] ?? null;
+    else if (e.key === "ArrowDown" && a + o < t.length)
+      h = t[a + o] ?? null;
+    else if (e.key === "ArrowUp" && a - o >= 0)
+      h = t[a - o] ?? null;
     else if (e.key === "Home") {
-      const l = a - a % s;
+      const l = a - a % o;
       h = t[l] ?? null;
     } else if (e.key === "End") {
-      const l = Math.min(a - a % s + s - 1, t.length - 1);
+      const l = Math.min(a - a % o + o - 1, t.length - 1);
       h = t[l] ?? null;
-    } else if (e.key === " " && ((u = o.getAttribute("part")) != null && u.includes("td"))) {
-      const l = Number(o.dataset.rowIndex);
+    } else if (e.key === " " && ((u = s.getAttribute("part")) != null && u.includes("td"))) {
+      const l = Number(s.dataset.rowIndex);
       this.selectable && !isNaN(l) && (e.preventDefault(), this._handleSelect(l, !this._selectedRows.has(l)));
       return;
     }
-    h && (e.preventDefault(), h.setAttribute("tabindex", "0"), h.focus(), o.setAttribute("tabindex", "-1"));
+    h && (e.preventDefault(), h.setAttribute("tabindex", "0"), h.focus(), s.setAttribute("tabindex", "-1"));
   }
   // ─── Render Helpers ───
   /** @internal */
@@ -371,7 +372,7 @@ let i = class extends y {
       r ? "sort-icon--active" : "",
       r && this.sortDirection === "desc" ? "sort-icon--desc" : ""
     ].filter(Boolean).join(" ");
-    return c`
+    return d`
       <span part="sort-icon" class=${t} aria-hidden="true">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -411,20 +412,20 @@ let i = class extends y {
     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]"), h = (a == null ? void 0 : a[s]) ?? null;
+    let s;
+    e.key === "ArrowRight" ? s = t === -1 ? 0 : Math.min(t + 1, r.length - 1) : e.key === "ArrowLeft" ? s = t <= 0 ? 0 : t - 1 : e.key === "Home" ? s = 0 : s = r.length - 1;
+    const o = r[s];
+    if (o === void 0) return;
+    e.preventDefault(), this._focusedHeaderIndex = o;
+    const a = (u = this.shadowRoot) == null ? void 0 : u.querySelectorAll("thead th[data-col-index]"), h = (a == null ? void 0 : a[o]) ?? null;
     h && h.focus();
   }
   /** @internal */
   _renderHeaderRow() {
     const e = this._sortableIndices, r = this._focusedHeaderIndex >= 0 ? this._focusedHeaderIndex : e[0] ?? -1;
-    return c`
+    return d`
       <tr part="tr" @keydown=${this._handleHeaderKeydown}>
-        ${this.selectable ? c`
+        ${this.selectable ? d`
               <th part="th" class="col-checkbox" tabindex="0">
                 <input
                   type="checkbox"
@@ -437,18 +438,18 @@ let i = class extends y {
               </th>
             ` : p}
         ${this._resolvedColumns.map(
-      (t, o) => c`
+      (t, s) => d`
             <th
               part="th"
-              data-col-index=${o}
-              tabindex=${t.sortable && o === r ? "0" : "-1"}
+              data-col-index=${s}
+              tabindex=${t.sortable && s === 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;
+        this._focusedHeaderIndex = s;
       } : p}
             >
-              ${t.sortable ? c`
+              ${t.sortable ? d`
                     <button
                       class="sort-btn"
                       @click=${() => this._handleSort(t.key)}
@@ -467,13 +468,13 @@ let i = class extends y {
   _renderSkeletonRows() {
     return Array.from(
       { length: 3 },
-      (e) => c`
+      (e) => d`
         <tr part="tr" aria-hidden="true">
-          ${this.selectable ? c`<td part="td" class="col-checkbox">
+          ${this.selectable ? d`<td part="td" class="col-checkbox">
                 <span class="skeleton-cell" style="width:1rem;margin:auto"></span>
               </td>` : p}
           ${this._resolvedColumns.map(
-        () => c`
+        () => d`
               <td part="td">
                 <span class="skeleton-cell"></span>
               </td>
@@ -486,7 +487,7 @@ let i = class extends y {
   /** @internal */
   _renderEmptyRow() {
     const e = this._resolvedColumns.length + (this.selectable ? 1 : 0);
-    return c`
+    return d`
       <tr part="tr">
         <td part="td" colspan=${e} class="empty-cell">
           <slot name="empty">${this.emptyLabel}</slot>
@@ -505,32 +506,32 @@ let i = class extends 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 c`
+        const s = this.pageSize > 0 ? (this.page - 1) * this.pageSize + t : t;
+        return d`
           <tr
             part="tr"
-            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(r, o));
+            aria-selected=${this.selectable ? String(this._selectedRows.has(s)) : p}
+            @click=${() => this._handleRowClick(r, s)}
+            @keydown=${(o) => {
+          (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this._handleRowClick(r, s));
         }}
           >
-            ${this.selectable ? c`
-                  <td part="td" class="col-checkbox" tabindex="-1" data-row-index=${o}>
+            ${this.selectable ? d`
+                  <td part="td" class="col-checkbox" tabindex="-1" data-row-index=${s}>
                     <input
                       type="checkbox"
                       part="checkbox"
-                      aria-label=${`Select row ${o + 1}`}
-                      .checked=${this._selectedRows.has(o)}
-                      @click=${(s) => s.stopPropagation()}
-                      @change=${(s) => this._handleSelect(o, s.target.checked)}
+                      aria-label=${`Select row ${s + 1}`}
+                      .checked=${this._selectedRows.has(s)}
+                      @click=${(o) => o.stopPropagation()}
+                      @change=${(o) => this._handleSelect(s, o.target.checked)}
                     />
                   </td>
                 ` : p}
             ${this._resolvedColumns.map(
-          (s) => c`
-                <td part="td" tabindex="-1" data-row-index=${o}>
-                  ${r[s.key] != null ? String(r[s.key]) : ""}
+          (o) => d`
+                <td part="td" tabindex="-1" data-row-index=${s}>
+                  ${r[o.key] != null ? String(r[o.key]) : ""}
                 </td>
               `
         )}
@@ -541,7 +542,7 @@ let i = class extends y {
   }
   // ─── Render ───
   render() {
-    return c`
+    return d`
       <slot name="toolbar"></slot>
       <div class="table-wrapper">
         <table
@@ -555,7 +556,7 @@ let i = class extends y {
             ${this._renderHeaderRow()}
           </thead>
           <tbody part="tbody">
-            ${this.loading ? c`<slot name="loading">${this._renderSkeletonRows()}</slot>` : this._resolvedRows.length === 0 ? this._renderEmptyRow() : this._renderDataRows()}
+            ${this.loading ? d`<slot name="loading">${this._renderSkeletonRows()}</slot>` : this._resolvedRows.length === 0 ? this._renderEmptyRow() : this._renderDataRows()}
           </tbody>
         </table>
       </div>
@@ -564,7 +565,7 @@ let i = class extends y {
 };
 i.styles = [v];
 n([
-  d({
+  c({
     type: Array,
     converter: {
       fromAttribute(e) {
@@ -579,7 +580,7 @@ n([
   })
 ], i.prototype, "columns", 2);
 n([
-  d({
+  c({
     type: Array,
     converter: {
       fromAttribute(e) {
@@ -594,34 +595,34 @@ n([
   })
 ], i.prototype, "rows", 2);
 n([
-  d({ type: Boolean, reflect: !0 })
+  c({ type: Boolean, reflect: !0 })
 ], i.prototype, "selectable", 2);
 n([
-  d({ type: String, attribute: "sort-key" })
+  c({ type: String, attribute: "sort-key" })
 ], i.prototype, "sortKey", 2);
 n([
-  d({ type: String, attribute: "sort-direction" })
+  c({ type: String, attribute: "sort-direction" })
 ], i.prototype, "sortDirection", 2);
 n([
-  d({ type: Boolean, reflect: !0 })
+  c({ type: Boolean, reflect: !0 })
 ], i.prototype, "loading", 2);
 n([
-  d({ type: String, attribute: "empty-label" })
+  c({ type: String, attribute: "empty-label" })
 ], i.prototype, "emptyLabel", 2);
 n([
-  d({ type: String })
+  c({ type: String })
 ], i.prototype, "label", 2);
 n([
-  d({ attribute: "select-all-label" })
+  c({ attribute: "select-all-label" })
 ], i.prototype, "selectAllLabel", 2);
 n([
-  d({ type: Boolean, reflect: !0, attribute: "sticky-header" })
+  c({ type: Boolean, reflect: !0, attribute: "sticky-header" })
 ], i.prototype, "stickyHeader", 2);
 n([
-  d({ type: Number })
+  c({ type: Number })
 ], i.prototype, "page", 2);
 n([
-  d({ type: Number, attribute: "page-size" })
+  c({ type: Number, attribute: "page-size" })
 ], i.prototype, "pageSize", 2);
 n([
   b()
@@ -641,4 +642,4 @@ i = n([
 export {
   i as H
 };
-//# sourceMappingURL=hx-data-table-B6h0RPn0.js.map
+//# sourceMappingURL=hx-data-table-CnLxo9PH.js.map

package/dist/shared/hx-data-table-CnLxo9PH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-data-table-CnLxo9PH.js","sources":["../../src/components/hx-data-table/hx-data-table.styles.ts","../../src/components/hx-data-table/hx-data-table.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDataTableStyles = css`\n  :host {\n    display: block;\n    overflow-x: auto;\n    font-family: var(--hx-data-table-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  /* ─── Scroll Wrapper ─── */\n\n  .table-wrapper {\n    min-width: 0;\n    width: 100%;\n  }\n\n  /* ─── Table ─── */\n\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n    min-width: var(--hx-data-table-min-width, 600px);\n  }\n\n  /* ─── Head ─── */\n\n  thead {\n    background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));\n  }\n\n  :host([sticky-header]) thead th {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));\n  }\n\n  /* ─── Cells ─── */\n\n  th,\n  td {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n    text-align: start;\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-data-table-border-color, var(--hx-color-border-default, #e2e8f0));\n    vertical-align: middle;\n  }\n\n  th {\n    font-weight: var(--hx-font-weight-semibold, 600);\n    color: var(--hx-data-table-header-color, var(--hx-color-text-strong, #334155));\n    white-space: nowrap;\n  }\n\n  td {\n    color: var(--hx-data-table-cell-color, var(--hx-color-text-primary, #0f172a));\n  }\n\n  /* ─── Checkbox Column ─── */\n\n  th.col-checkbox,\n  td.col-checkbox {\n    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n    width: var(--hx-touch-target-min, 2.75rem);\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    padding-inline-end: var(--hx-space-2, 0.5rem);\n  }\n\n  th.col-checkbox {\n    text-align: center;\n  }\n\n  td.col-checkbox {\n    text-align: center;\n  }\n\n  /* ─── Sort Button ─── */\n\n  .sort-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    background: none;\n    border: none;\n    padding: 0;\n    font: inherit;\n    font-weight: inherit;\n    color: inherit;\n    cursor: pointer;\n    white-space: nowrap;\n  }\n\n  .sort-btn:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 2px);\n  }\n\n  /* ─── Sort Icon ─── */\n\n  .sort-icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    width: 1em;\n    height: 1em;\n    opacity: var(--hx-opacity-25, 0.25); /* sort icon inactive — intentionally subtle */\n    transition:\n      opacity var(--hx-transition-fast, 150ms ease),\n      transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  .sort-icon--active {\n    opacity: var(--hx-opacity-100, 1);\n    color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  .sort-icon--desc {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Row States ─── */\n\n  tbody tr {\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  tbody tr:hover {\n    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-surface-raised, #f8fafc));\n  }\n\n  tbody tr[aria-selected='true'] {\n    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));\n  }\n\n  /* ─── Checkbox Input ─── */\n\n  input[type='checkbox'] {\n    width: var(--hx-size-4, 1rem);\n    height: var(--hx-size-4, 1rem);\n    cursor: pointer;\n    accent-color: var(--hx-color-primary-500, #2563eb);\n  }\n\n  /* ─── Loading Skeleton ─── */\n\n  .skeleton-cell {\n    display: block;\n    height: 1em;\n    border-radius: var(--hx-border-radius-sm, 2px);\n    /* Skeleton shimmer: intentionally primitive so the animation reads the same across all modes. */\n    background: linear-gradient(\n      90deg,\n      var(--hx-color-neutral-200, #e2e8f0) 25%,\n      var(--hx-color-neutral-100, #f1f5f9) 50%,\n      var(--hx-color-neutral-200, #e2e8f0) 75%\n    );\n    background-size: 200% 100%;\n    animation: hx-shimmer var(--hx-data-table-shimmer-duration, 1.5s) infinite;\n  }\n\n  @keyframes hx-shimmer {\n    0% {\n      background-position: 200% 0;\n    }\n    100% {\n      background-position: -200% 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .skeleton-cell {\n      animation: none;\n      opacity: var(\n        --hx-opacity-50,\n        0.5\n      ); /* reduced from animation; approximate to available token */\n    }\n\n    .sort-icon {\n      transition: none;\n    }\n\n    tbody tr {\n      transition: none;\n    }\n  }\n\n  /* ─── Cell Focus ─── */\n\n  td:focus-visible,\n  th:focus-visible,\n  [part~='td']:focus-visible,\n  [part~='th']:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, -2px);\n    border-radius: var(--hx-border-radius-sm, 2px);\n  }\n\n  /* ─── Empty State ─── */\n\n  .empty-cell {\n    text-align: center;\n    color: var(--hx-data-table-empty-color, var(--hx-color-text-secondary, #475569));\n    padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    table {\n      border: 1px solid CanvasText;\n    }\n\n    th,\n    td {\n      border-bottom-color: CanvasText;\n    }\n\n    tbody tr[aria-selected='true'] {\n      outline: 2px solid Highlight;\n    }\n\n    .skeleton-cell {\n      animation: none;\n      border: 1px solid GrayText;\n      background: none;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixDataTableStyles } from './hx-data-table.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * Column definition for `hx-data-table`.\n */\nexport interface HxDataTableColumn {\n  key: string;\n  label: string;\n  sortable?: boolean;\n  width?: string;\n}\n\n/**\n * Sort state exported for TypeScript consumers and CEM event types.\n */\nexport interface HxDataTableSortState {\n  key: string;\n  direction: 'asc' | 'desc';\n}\n\n/** Detail for the hx-select event dispatched by hx-data-table. */\nexport interface HxDataTableSelectDetail {\n  selectedRows: Record<string, unknown>[];\n}\n\n/** Detail for the hx-row-click event dispatched by hx-data-table. */\nexport interface HxDataTableRowClickDetail {\n  row: Record<string, unknown>;\n  index: number;\n}\n\n/**\n * An enterprise data table with sorting, row selection, and keyboard navigation.\n *\n * @summary Enterprise data table with sorting, selection, and responsive scroll.\n *\n * @tag hx-data-table\n *\n * @slot toolbar - Content rendered above the table (e.g., search, actions).\n * @slot empty - Custom empty-state content rendered when `rows` is empty and not loading.\n * @slot loading - Custom loading content rendered when `loading` is true.\n *\n * @fires {CustomEvent<HxDataTableSortState>} hx-sort - Dispatched when a sortable column header is clicked.\n * @fires {CustomEvent<{selectedRows: Record<string, unknown>[]}>} hx-select - Dispatched when row selection changes.\n * @fires {CustomEvent<{row: Record<string, unknown>, index: number}>} hx-row-click - Dispatched when a data row is clicked.\n *\n * @csspart table - The `<table>` element.\n * @csspart thead - The `<thead>` element.\n * @csspart tbody - The `<tbody>` element.\n * @csspart tr - Each `<tr>` element.\n * @csspart th - Each `<th>` element.\n * @csspart td - Each `<td>` element.\n * @csspart sort-icon - The sort indicator icon `<span>` inside sortable headers.\n * @csspart checkbox - Each `<input type=\"checkbox\">` element.\n *\n * @cssprop [--hx-data-table-header-bg=var(--hx-color-neutral-50)] - Header background color.\n * @cssprop [--hx-data-table-header-color=var(--hx-color-neutral-700)] - Header text color.\n * @cssprop [--hx-data-table-cell-color=var(--hx-color-neutral-900)] - Cell text color.\n * @cssprop [--hx-data-table-border-color=var(--hx-color-neutral-200)] - Row border color.\n * @cssprop [--hx-data-table-row-hover-bg=var(--hx-color-neutral-50)] - Row hover background.\n * @cssprop [--hx-data-table-row-selected-bg=var(--hx-color-primary-50)] - Selected row background.\n * @cssprop [--hx-data-table-empty-color=var(--hx-color-neutral-600)] - Empty state text color.\n * @cssprop [--hx-data-table-min-width=600px] - Minimum table width before horizontal scrolling.\n * @cssprop [--hx-data-table-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-data-table-shimmer-duration=1.5s] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-opacity-25] - Opacity.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-opacity-100] - Opacity.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-size-4] - Size token.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-color-primary-50] - Color.\n * @cssprop [--hx-opacity-50] - Opacity.\n * @cssprop [--hx-space-8] - Spacing token.\n */\n@customElement('hx-data-table')\nexport class HelixDataTable extends HelixElement {\n  static override styles = [helixDataTableStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Column definitions. Each item: `{ key, label, sortable?, width? }`.\n   * Can be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).\n   * @attr columns\n   */\n  @property({\n    type: Array,\n    converter: {\n      fromAttribute(value: string | null) {\n        if (!value) return [];\n        try {\n          return JSON.parse(value);\n        } catch {\n          return [];\n        }\n      },\n    },\n  })\n  columns: HxDataTableColumn[] = [];\n\n  /**\n   * Row data. Each item is a plain object keyed by column `key` values.\n   * Can be set as a JS array or a JSON string (e.g., from a Drupal Twig attribute).\n   * @attr rows\n   */\n  @property({\n    type: Array,\n    converter: {\n      fromAttribute(value: string | null) {\n        if (!value) return [];\n        try {\n          return JSON.parse(value);\n        } catch {\n          return [];\n        }\n      },\n    },\n  })\n  rows: Record<string, unknown>[] = [];\n\n  /**\n   * When true, renders a checkbox column for row selection.\n   * @attr selectable\n   */\n  @property({ type: Boolean, reflect: true })\n  selectable = false;\n\n  /**\n   * The column key currently used for sorting.\n   * @attr sort-key\n   */\n  @property({ type: String, attribute: 'sort-key' })\n  sortKey = '';\n\n  /**\n   * Current sort direction.\n   * @attr sort-direction\n   */\n  @property({ type: String, attribute: 'sort-direction' })\n  sortDirection: 'asc' | 'desc' = 'asc';\n\n  /**\n   * When true, renders a loading skeleton and sets `aria-busy=\"true\"` on the host.\n   * @attr loading\n   */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  /**\n   * Text displayed in the default empty state when `rows` is empty and not loading.\n   * @attr empty-label\n   */\n  @property({ type: String, attribute: 'empty-label' })\n  emptyLabel = 'No data';\n\n  /**\n   * Accessible name for the table. Exposed via `aria-label` on the `<table>` element.\n   * Required when the table has columns — a missing label is a WCAG 4.1.2 violation.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Accessible label for the \"select all rows\" checkbox in the table header.\n   * @attr select-all-label\n   */\n  @property({ attribute: 'select-all-label' })\n  selectAllLabel = 'Select all rows';\n\n  /**\n   * When true, the header row is sticky (position: sticky; top: 0).\n   * @attr sticky-header\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })\n  stickyHeader = false;\n\n  /**\n   * Current page (1-based). Set to 0 or leave at default (0) to disable pagination.\n   * @attr page\n   */\n  @property({ type: Number })\n  page = 1;\n\n  /**\n   * Number of rows per page. Set to 0 to disable pagination (show all rows).\n   * @attr page-size\n   */\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 0;\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state()\n  private _selectedRows: Set<number> = new Set();\n\n  /**\n   * Cached flat list of all td/th cells in the shadow DOM.\n   * Invalidated (set to null) whenever rows or columns change so the next keydown\n   * re-queries the DOM and re-caches. Avoids repeated querySelectorAll on every keypress.\n   * @internal\n   */\n  private _cachedCells: HTMLElement[] | null = null;\n\n  /**\n   * Index (within the columns array) of the sortable header that currently holds\n   * roving tabindex focus. -1 means no sortable header has been focused yet;\n   * the first sortable column will receive tabindex=\"0\" by default.\n   * @internal\n   */\n  @state() private _focusedHeaderIndex = -1;\n\n  /**\n   * Resolved columns array. Computed in willUpdate from the public `columns`\n   * property which may be a JSON string (Drupal/Twig path) or a JS array.\n   * All internal reads use this field to avoid mutating reactive properties\n   * inside willUpdate (which would trigger extra update cycles).\n   * @internal\n   */\n  @state() private _resolvedColumns: HxDataTableColumn[] = [];\n\n  /**\n   * Resolved rows array. Computed in willUpdate from the public `rows`\n   * property which may be a JSON string (Drupal/Twig path) or a JS array.\n   * @internal\n   */\n  @state() private _resolvedRows: Record<string, unknown>[] = [];\n\n  // ─── Lifecycle ───\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    // Coerce JSON strings to arrays — this is the Drupal/Twig integration path.\n    // Lit does not JSON-parse array attributes automatically, so we do it here.\n    // Note: Lit's defaultConverter returns null (not a string) when JSON.parse fails for\n    // type: Array — so we guard against both string and any non-array value.\n    //\n    // We write to private @state() resolved fields instead of mutating the public\n    // reactive properties. Mutating @property fields inside willUpdate triggers an\n    // additional update cycle; writing to separate @state fields does not because\n    // Lit batches all changes within the same willUpdate into a single render.\n    if (changed.has('columns')) {\n      const rawColumns: unknown = this.columns;\n      if (typeof rawColumns === 'string') {\n        try {\n          this._resolvedColumns = JSON.parse(rawColumns) as HxDataTableColumn[];\n        } catch {\n          this._resolvedColumns = [];\n        }\n      } else if (Array.isArray(this.columns)) {\n        this._resolvedColumns = this.columns;\n      } else {\n        this._resolvedColumns = [];\n      }\n    }\n    if (changed.has('rows')) {\n      const rawRows: unknown = this.rows;\n      if (typeof rawRows === 'string') {\n        try {\n          this._resolvedRows = JSON.parse(rawRows) as Record<string, unknown>[];\n        } catch {\n          this._resolvedRows = [];\n        }\n      } else if (Array.isArray(this.rows)) {\n        this._resolvedRows = this.rows;\n      } else {\n        this._resolvedRows = [];\n      }\n    }\n    // Only warn when rows actually changes to avoid noise on every property update.\n    if (changed.has('rows') && this._resolvedRows.length > 500) {\n      devWarn(\n        'hx-data-table',\n        'Rendering more than 500 rows may impact performance. Consider server-side pagination.',\n      );\n    }\n    // WCAG 4.1.2: data tables must have an accessible name so screen readers can identify them.\n    if (\n      (changed.has('label') || changed.has('columns')) &&\n      this._resolvedColumns.length > 0 &&\n      !this.label\n    ) {\n      devWarn(\n        'hx-data-table',\n        'No accessible name provided. Set the `label` attribute so screen readers can identify this table (WCAG 4.1.2).',\n      );\n    }\n  }\n\n  override updated(changed: PropertyValues<this>): void {\n    // Invalidate cell cache when rows or columns change so the next keyboard\n    // navigation re-queries and re-caches the updated DOM. We check the public\n    // properties because _resolvedColumns/_resolvedRows are derived from them\n    // in willUpdate and always change in lockstep.\n    if (changed.has('rows') || changed.has('columns')) {\n      this._cachedCells = null;\n    }\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleSort(key: string): void {\n    const direction =\n      this.sortKey === key ? (this.sortDirection === 'asc' ? 'desc' : 'asc') : 'asc';\n    this.sortKey = key;\n    this.sortDirection = direction;\n    this.dispatchEvent(\n      new CustomEvent<HxDataTableSortState>('hx-sort', {\n        bubbles: true,\n        composed: true,\n        detail: { key, direction },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleRowClick(row: Record<string, unknown>, index: number): void {\n    this.dispatchEvent(\n      new CustomEvent<{ row: Record<string, unknown>; index: number }>('hx-row-click', {\n        bubbles: true,\n        composed: true,\n        detail: { row, index },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleSelect(index: number, checked: boolean): void {\n    const next = new Set(this._selectedRows);\n    if (checked) {\n      next.add(index);\n    } else {\n      next.delete(index);\n    }\n    this._selectedRows = next;\n    this._dispatchSelect();\n  }\n\n  /** @internal */\n  private _handleSelectAll(checked: boolean): void {\n    this._selectedRows = checked ? new Set(this._resolvedRows.map((_, i) => i)) : new Set<number>();\n    this._dispatchSelect();\n  }\n\n  /** @internal */\n  private _dispatchSelect(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ selectedRows: Record<string, unknown>[] }>('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selectedRows: [...this._selectedRows].flatMap((i) => {\n            const row = this._resolvedRows[i];\n            return row !== undefined ? [row] : [];\n          }),\n        },\n      }),\n    );\n  }\n\n  // ─── Keyboard Navigation ───\n\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', ' '].includes(e.key))\n      return;\n\n    const root = this.shadowRoot;\n    if (!root) return;\n\n    // Use cached cell list; re-query only when invalidated by rows/columns change\n    if (!this._cachedCells) {\n      this._cachedCells = Array.from(\n        root.querySelectorAll<HTMLElement>('[part~=\"td\"],[part~=\"th\"]'),\n      );\n    }\n    const cells = this._cachedCells;\n\n    // When focus is inside a child element (e.g., the sort <button> inside a <th>),\n    // shadowRoot.activeElement returns the child, not the cell. Walk up to find the cell.\n    let focused = root.activeElement as HTMLElement | null;\n    if (!focused) return;\n\n    if (cells.indexOf(focused) === -1) {\n      let ancestor = focused.parentElement;\n      while (ancestor) {\n        if (cells.includes(ancestor as HTMLElement)) {\n          focused = ancestor as HTMLElement;\n          break;\n        }\n        ancestor = ancestor.parentElement;\n      }\n    }\n\n    const colCount = this._resolvedColumns.length + (this.selectable ? 1 : 0);\n    const idx = cells.indexOf(focused);\n    if (idx === -1) return;\n\n    let target: HTMLElement | null = null;\n\n    if (e.key === 'ArrowRight' && idx + 1 < cells.length) {\n      target = cells[idx + 1] ?? null;\n    } else if (e.key === 'ArrowLeft' && idx - 1 >= 0) {\n      target = cells[idx - 1] ?? null;\n    } else if (e.key === 'ArrowDown' && idx + colCount < cells.length) {\n      target = cells[idx + colCount] ?? null;\n    } else if (e.key === 'ArrowUp' && idx - colCount >= 0) {\n      target = cells[idx - colCount] ?? null;\n    } else if (e.key === 'Home') {\n      // First cell of the current row\n      const rowStart = idx - (idx % colCount);\n      target = cells[rowStart] ?? null;\n    } else if (e.key === 'End') {\n      // Last cell of the current row\n      const rowEnd = Math.min(idx - (idx % colCount) + colCount - 1, cells.length - 1);\n      target = cells[rowEnd] ?? null;\n    } else if (e.key === ' ' && focused.getAttribute('part')?.includes('td')) {\n      // Toggle selection on Space in a data row\n      const rowIdx = Number(focused.dataset['rowIndex']);\n      if (this.selectable && !isNaN(rowIdx)) {\n        e.preventDefault();\n        this._handleSelect(rowIdx, !this._selectedRows.has(rowIdx));\n      }\n      return;\n    }\n\n    if (target) {\n      e.preventDefault();\n      target.setAttribute('tabindex', '0');\n      target.focus();\n      focused.setAttribute('tabindex', '-1');\n    }\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderSortIcon(key: string) {\n    const isActive = this.sortKey === key;\n    const iconClass = [\n      'sort-icon',\n      isActive ? 'sort-icon--active' : '',\n      isActive && this.sortDirection === 'desc' ? 'sort-icon--desc' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return html`\n      <span part=\"sort-icon\" class=${iconClass} aria-hidden=\"true\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          fill=\"currentColor\"\n          width=\"16\"\n          height=\"16\"\n        >\n          <path d=\"M8 3L5 7h6L8 3zM8 13l3-4H5l3 4z\" fill-rule=\"evenodd\" />\n        </svg>\n      </span>\n    `;\n  }\n\n  /**\n   * Returns the indices (within the columns array) of all sortable columns.\n   * @internal\n   */\n  private get _sortableIndices(): number[] {\n    return this._resolvedColumns.reduce<number[]>((acc, col, i) => {\n      if (col.sortable) acc.push(i);\n      return acc;\n    }, []);\n  }\n\n  /**\n   * Handles keyboard navigation between sortable column headers using the\n   * roving tabindex pattern (ARIA Grid specification). Supports ArrowLeft/Right\n   * to move between sortable headers, Home/End to jump to first/last, and\n   * Enter/Space to trigger sort on the focused sortable header.\n   * @internal\n   */\n  private _handleHeaderKeydown(e: KeyboardEvent): void {\n    const sortable = this._sortableIndices;\n    if (sortable.length === 0) return;\n\n    // Enter/Space on a sortable header triggers sort\n    if (e.key === 'Enter' || e.key === ' ') {\n      const col = this._resolvedColumns[this._focusedHeaderIndex];\n      if (col?.sortable) {\n        e.preventDefault();\n        this._handleSort(col.key);\n      }\n      return;\n    }\n\n    if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) return;\n\n    // Determine which sortable position is currently focused.\n    // If no sortable header is focused (currentPos === -1), let the\n    // table-level _handleKeydown handle grid navigation instead.\n    const currentPos = sortable.indexOf(this._focusedHeaderIndex);\n    if (currentPos === -1) return;\n    let nextPos: number;\n\n    if (e.key === 'ArrowRight') {\n      nextPos = currentPos === -1 ? 0 : Math.min(currentPos + 1, sortable.length - 1);\n    } else if (e.key === 'ArrowLeft') {\n      nextPos = currentPos <= 0 ? 0 : currentPos - 1;\n    } else if (e.key === 'Home') {\n      nextPos = 0;\n    } else {\n      // End\n      nextPos = sortable.length - 1;\n    }\n\n    const nextIndex = sortable[nextPos];\n    if (nextIndex === undefined) return;\n\n    e.preventDefault();\n    this._focusedHeaderIndex = nextIndex;\n\n    // Focus the <th> element for the target column\n    const headers = this.shadowRoot?.querySelectorAll<HTMLElement>('thead th[data-col-index]');\n    const target = headers?.[nextIndex] ?? null;\n    if (target) {\n      target.focus();\n    }\n  }\n\n  /** @internal */\n  private _renderHeaderRow() {\n    // Determine which sortable header gets tabindex=\"0\" (roving tabindex).\n    // If _focusedHeaderIndex is -1 (initial), the first sortable column wins.\n    const sortable = this._sortableIndices;\n    const activeIndex =\n      this._focusedHeaderIndex >= 0 ? this._focusedHeaderIndex : (sortable[0] ?? -1);\n\n    return html`\n      <tr part=\"tr\" @keydown=${this._handleHeaderKeydown}>\n        ${this.selectable\n          ? html`\n              <th part=\"th\" class=\"col-checkbox\" tabindex=\"0\">\n                <input\n                  type=\"checkbox\"\n                  part=\"checkbox\"\n                  aria-label=${this.selectAllLabel}\n                  .indeterminate=${this._selectedRows.size > 0 &&\n                  this._selectedRows.size < this._resolvedRows.length}\n                  .checked=${this._selectedRows.size === this._resolvedRows.length &&\n                  this._resolvedRows.length > 0}\n                  @change=${(e: Event) =>\n                    this._handleSelectAll((e.target as HTMLInputElement).checked)}\n                />\n              </th>\n            `\n          : nothing}\n        ${this._resolvedColumns.map(\n          (col, i) => html`\n            <th\n              part=\"th\"\n              data-col-index=${i}\n              tabindex=${col.sortable ? (i === activeIndex ? '0' : '-1') : '-1'}\n              style=${col.width ? `width: ${col.width}` : ''}\n              aria-sort=${col.sortable\n                ? this.sortKey === col.key\n                  ? this.sortDirection === 'asc'\n                    ? 'ascending'\n                    : 'descending'\n                  : 'none'\n                : nothing}\n              @focus=${col.sortable\n                ? () => {\n                    this._focusedHeaderIndex = i;\n                  }\n                : nothing}\n            >\n              ${col.sortable\n                ? html`\n                    <button\n                      class=\"sort-btn\"\n                      @click=${() => this._handleSort(col.key)}\n                      aria-label=${this.sortKey === col.key\n                        ? `Sort by ${col.label}, currently sorted ${this.sortDirection === 'asc' ? 'ascending' : 'descending'}`\n                        : `Sort by ${col.label}`}\n                    >\n                      ${col.label} ${this._renderSortIcon(col.key)}\n                    </button>\n                  `\n                : col.label}\n            </th>\n          `,\n        )}\n      </tr>\n    `;\n  }\n\n  /** @internal */\n  private _renderSkeletonRows() {\n    return Array.from(\n      { length: 3 },\n      (_) => html`\n        <tr part=\"tr\" aria-hidden=\"true\">\n          ${this.selectable\n            ? html`<td part=\"td\" class=\"col-checkbox\">\n                <span class=\"skeleton-cell\" style=\"width:1rem;margin:auto\"></span>\n              </td>`\n            : nothing}\n          ${this._resolvedColumns.map(\n            () => html`\n              <td part=\"td\">\n                <span class=\"skeleton-cell\"></span>\n              </td>\n            `,\n          )}\n        </tr>\n      `,\n    );\n  }\n\n  /** @internal */\n  private _renderEmptyRow() {\n    const colSpan = this._resolvedColumns.length + (this.selectable ? 1 : 0);\n    return html`\n      <tr part=\"tr\">\n        <td part=\"td\" colspan=${colSpan} class=\"empty-cell\">\n          <slot name=\"empty\">${this.emptyLabel}</slot>\n        </td>\n      </tr>\n    `;\n  }\n\n  /** @internal */\n  private _renderDataRows() {\n    let displayRows = this._resolvedRows;\n\n    // Client-side pagination when pageSize > 0\n    if (this.pageSize > 0) {\n      const start = (this.page - 1) * this.pageSize;\n      displayRows = this._resolvedRows.slice(start, start + this.pageSize);\n    }\n\n    return repeat(\n      displayRows,\n      (_row, pageIndex) => {\n        const globalIndex =\n          this.pageSize > 0 ? (this.page - 1) * this.pageSize + pageIndex : pageIndex;\n        return globalIndex;\n      },\n      (row, pageIndex) => {\n        // The global row index for selection and events\n        const globalIndex =\n          this.pageSize > 0 ? (this.page - 1) * this.pageSize + pageIndex : pageIndex;\n        return html`\n          <tr\n            part=\"tr\"\n            aria-selected=${this.selectable ? String(this._selectedRows.has(globalIndex)) : nothing}\n            @click=${() => this._handleRowClick(row, globalIndex)}\n            @keydown=${(e: KeyboardEvent) => {\n              // WCAG 2.1.1: rows are keyboard-activatable via Enter and Space so that\n              // the hx-row-click event fires equivalently for keyboard users.\n              if (e.key === 'Enter' || e.key === ' ') {\n                e.preventDefault();\n                this._handleRowClick(row, globalIndex);\n              }\n            }}\n          >\n            ${this.selectable\n              ? html`\n                  <td part=\"td\" class=\"col-checkbox\" tabindex=\"-1\" data-row-index=${globalIndex}>\n                    <input\n                      type=\"checkbox\"\n                      part=\"checkbox\"\n                      aria-label=${`Select row ${globalIndex + 1}`}\n                      .checked=${this._selectedRows.has(globalIndex)}\n                      @click=${(e: Event) => e.stopPropagation()}\n                      @change=${(e: Event) =>\n                        this._handleSelect(globalIndex, (e.target as HTMLInputElement).checked)}\n                    />\n                  </td>\n                `\n              : nothing}\n            ${this._resolvedColumns.map(\n              (col) => html`\n                <td part=\"td\" tabindex=\"-1\" data-row-index=${globalIndex}>\n                  ${row[col.key] != null ? String(row[col.key]) : ''}\n                </td>\n              `,\n            )}\n          </tr>\n        `;\n      },\n    );\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <slot name=\"toolbar\"></slot>\n      <div class=\"table-wrapper\">\n        <table\n          part=\"table\"\n          role=\"grid\"\n          aria-label=${this.label.trim() || 'Table'}\n          aria-busy=${this.loading ? 'true' : nothing}\n          @keydown=${this._handleKeydown}\n        >\n          <thead part=\"thead\">\n            ${this._renderHeaderRow()}\n          </thead>\n          <tbody part=\"tbody\">\n            ${this.loading\n              ? html`<slot name=\"loading\">${this._renderSkeletonRows()}</slot>`\n              : this._resolvedRows.length === 0\n                ? this._renderEmptyRow()\n                : this._renderDataRows()}\n          </tbody>\n        </table>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-data-table': HelixDataTable;\n  }\n}\n"],"names":["helixDataTableStyles","css","HelixDataTable","HelixElement","changed","rawColumns","rawRows","key","direction","row","index","checked","next","_","i","root","cells","focused","ancestor","colCount","idx","target","rowStart","rowEnd","_a","rowIdx","isActive","iconClass","html","acc","col","sortable","currentPos","nextPos","nextIndex","headers","activeIndex","e","nothing","colSpan","displayRows","start","repeat","_row","pageIndex","globalIndex","__decorateClass","property","value","state","customElement"],"mappings":";;;;AAEO,MAAMA,IAAuBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACkG7B,IAAMC,IAAN,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"}

package/dist/shared/{hx-date-picker-Dq2Nb68_.js → hx-date-picker-D7H7CsVH.js}

@@ -46,7 +46,7 @@ const C = D`
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-date-picker-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -63,9 +63,9 @@ const C = D`
     display: flex;
     align-items: stretch;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #cbd5e1));
     border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-date-picker-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -116,7 +116,7 @@ const C = D`
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-date-picker-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-date-picker-color, var(--hx-color-text-strong, #1e293b));
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-size-10, 2.5rem);
     width: 100%;
@@ -124,7 +124,7 @@ const C = D`
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #94a3b8);
   }
 
   .field__input:disabled {
@@ -142,9 +142,9 @@ const C = D`
     padding: 0 var(--hx-space-3, 0.75rem);
     border: none;
     border-left: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-date-picker-border-color, var(--hx-color-border-strong, #cbd5e1));
     background: transparent;
-    color: var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-date-picker-trigger-color, var(--hx-color-text-muted, #64748b));
     cursor: pointer;
     flex-shrink: 0;
     transition: color var(--hx-transition-fast, 150ms ease);
@@ -168,7 +168,7 @@ const C = D`
   }
 
   .field__trigger:hover:not(:disabled) {
-    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-text-strong, #334155));
     background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 4%, transparent);
   }
 
@@ -186,9 +186,9 @@ const C = D`
     left: 0;
     z-index: var(--hx-z-index-dropdown, 1000);
     min-width: var(--hx-date-picker-calendar-min-width, 18rem);
-    background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-date-picker-calendar-border-color, var(--hx-color-border-default, #e2e8f0));
     border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));
     box-shadow: var(
       --hx-date-picker-calendar-shadow,
@@ -247,14 +247,14 @@ const C = D`
   }
 
   .calendar__nav-btn {
-    color: var(--hx-color-neutral-600, #475569);
+    color: var(--hx-color-text-secondary, #475569);
     font-size: var(--hx-font-size-lg, 1.125rem);
     line-height: 1;
   }
 
   .calendar__nav-btn:hover {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
-    color: var(--hx-color-neutral-900, #0f172a);
+    background-color: var(--hx-color-surface-sunken, #f1f5f9);
+    color: var(--hx-color-text-primary, #0f172a);
   }
 
   :is(.calendar__nav-btn, .calendar__day):focus-visible {
@@ -275,7 +275,7 @@ const C = D`
   .calendar__month-label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-text-strong, #1e293b);
     flex: 1;
     text-align: center;
   }
@@ -300,7 +300,7 @@ const C = D`
     height: var(--hx-size-8, 2rem);
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
@@ -310,20 +310,20 @@ const C = D`
      ============================================================ */
 
   .calendar__day {
-    color: var(--hx-color-neutral-800, #1e293b);
+    color: var(--hx-color-text-strong, #1e293b);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     position: relative;
   }
 
   .calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected) {
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
-    color: var(--hx-color-neutral-900, #0f172a);
+    background-color: var(--hx-color-surface-sunken, #f1f5f9);
+    color: var(--hx-color-text-primary, #0f172a);
   }
 
   .calendar__day--selected {
     background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));
+    color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);
   }
 
@@ -381,7 +381,7 @@ const C = D`
   }
 
   .field__help-text {
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
   }
 
   .field__error {
@@ -1074,4 +1074,4 @@ s = n([
 export {
   s as H
 };
-//# sourceMappingURL=hx-date-picker-Dq2Nb68_.js.map
+//# sourceMappingURL=hx-date-picker-D7H7CsVH.js.map