@helixui/library 0.3.4 → 1.0.0

package/dist/shared/hx-counter-D-1NXzGs.js

@@ -0,0 +1,138 @@
+import { css as h, LitElement as c, html as m } from "lit";
+import { property as r, state as p, customElement as d } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { tokenStyles as _ } from "@helixui/tokens/lit";
+const y = h`
+  :host {
+    display: inline-block;
+  }
+
+  .counter {
+    display: inline-flex;
+    align-items: baseline;
+    font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));
+    font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));
+    color: var(--hx-counter-color, var(--hx-color-neutral-900, #111827));
+    line-height: var(--hx-line-height-tight, 1.25);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .counter--sm {
+    font-size: var(--hx-counter-font-size-sm, var(--hx-font-size-xl, 1.25rem));
+  }
+
+  .counter--md {
+    font-size: var(--hx-counter-font-size-md, var(--hx-font-size-3xl, 1.875rem));
+  }
+
+  .counter--lg {
+    font-size: var(--hx-counter-font-size-lg, var(--hx-font-size-5xl, 3rem));
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .counter {
+      /* Animation is handled in JS — reduced-motion consumers
+         will see the final value immediately via the component logic */
+    }
+  }
+`;
+var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (e, a, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? x(a, o) : a, l = e.length - 1, u; l >= 0; l--)
+    (u = e[l]) && (i = (n ? u(a, o, i) : u(i)) || i);
+  return n && i && v(a, o, i), i;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.value = 0, this.duration = 1e3, this.easing = "ease-out", this.format = "integer", this.prefix = "", this.suffix = "", this.size = "md", this._displayValue = 0, this._animationId = null, this._startTime = null, this._startValue = 0, this._prefersReducedMotion = !1;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback();
+    const e = window.matchMedia("(prefers-reduced-motion: reduce)");
+    this._prefersReducedMotion = e.matches, this._prefersReducedMotion ? this._displayValue = this.value : this._startAnimation();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._cancelAnimation();
+  }
+  updated(e) {
+    e.has("value") && e.get("value") !== void 0 && (this._prefersReducedMotion ? this._displayValue = this.value : (this._startValue = this._displayValue, this._startTime = null, this._startAnimation()));
+  }
+  // ─── Animation ───
+  _cancelAnimation() {
+    this._animationId !== null && (cancelAnimationFrame(this._animationId), this._animationId = null);
+  }
+  _applyEasing(e) {
+    switch (this.easing) {
+      case "linear":
+        return e;
+      case "ease-in":
+        return e * e;
+      case "ease-out":
+        return e * (2 - e);
+      case "ease-in-out":
+        return e < 0.5 ? 2 * e * e : -1 + (4 - 2 * e) * e;
+    }
+  }
+  _startAnimation() {
+    this._cancelAnimation();
+    const e = (a) => {
+      this._startTime === null && (this._startTime = a);
+      const o = a - this._startTime, n = Math.min(o / this.duration, 1), i = this._applyEasing(n);
+      this._displayValue = this._startValue + (this.value - this._startValue) * i, n < 1 ? this._animationId = requestAnimationFrame(e) : (this._displayValue = this.value, this._animationId = null);
+    };
+    this._animationId = requestAnimationFrame(e);
+  }
+  // ─── Formatting ───
+  _formatValue() {
+    const e = this.format === "integer" ? Math.round(this._displayValue) : parseFloat(this._displayValue.toFixed(2));
+    return `${this.prefix}${e.toLocaleString()}${this.suffix}`;
+  }
+  // ─── Render ───
+  render() {
+    const e = {
+      counter: !0,
+      [`counter--${this.size}`]: !0
+    };
+    return m`
+      <span part="counter" class=${f(e)} aria-live="polite" aria-atomic="true">
+        ${this._formatValue()}
+      </span>
+    `;
+  }
+};
+t.styles = [_, y];
+s([
+  r({ type: Number })
+], t.prototype, "value", 2);
+s([
+  r({ type: Number })
+], t.prototype, "duration", 2);
+s([
+  r({ type: String })
+], t.prototype, "easing", 2);
+s([
+  r({ type: String })
+], t.prototype, "format", 2);
+s([
+  r({ type: String })
+], t.prototype, "prefix", 2);
+s([
+  r({ type: String })
+], t.prototype, "suffix", 2);
+s([
+  r({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+s([
+  p()
+], t.prototype, "_displayValue", 2);
+t = s([
+  d("hx-counter")
+], t);
+export {
+  t as H
+};
+//# sourceMappingURL=hx-counter-D-1NXzGs.js.map

package/dist/shared/hx-counter-D-1NXzGs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-counter-D-1NXzGs.js","sources":["../../src/components/hx-counter/hx-counter.styles.ts","../../src/components/hx-counter/hx-counter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCounterStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  .counter {\n    display: inline-flex;\n    align-items: baseline;\n    font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));\n    color: var(--hx-counter-color, var(--hx-color-neutral-900, #111827));\n    line-height: var(--hx-line-height-tight, 1.25);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .counter--sm {\n    font-size: var(--hx-counter-font-size-sm, var(--hx-font-size-xl, 1.25rem));\n  }\n\n  .counter--md {\n    font-size: var(--hx-counter-font-size-md, var(--hx-font-size-3xl, 1.875rem));\n  }\n\n  .counter--lg {\n    font-size: var(--hx-counter-font-size-lg, var(--hx-font-size-5xl, 3rem));\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .counter {\n      /* Animation is handled in JS — reduced-motion consumers\n         will see the final value immediately via the component logic */\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCounterStyles } from './hx-counter.styles.js';\n\nexport type CounterSize = 'sm' | 'md' | 'lg';\nexport type CounterEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';\nexport type CounterFormat = 'integer' | 'decimal';\n\n/**\n * Animated number counter that counts from 0 (or the previous value) to the\n * target value using requestAnimationFrame. Respects prefers-reduced-motion.\n *\n * @summary Displays an animated numeric counter that transitions to a target value.\n *\n * @tag hx-counter\n *\n * @csspart counter - The outer counter element.\n *\n * @cssprop [--hx-counter-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-counter-font-weight=var(--hx-font-weight-bold)] - Font weight.\n * @cssprop [--hx-counter-color=var(--hx-color-neutral-900)] - Counter text color.\n * @cssprop [--hx-counter-font-size-sm=var(--hx-font-size-xl)] - Font size at sm.\n * @cssprop [--hx-counter-font-size-md=var(--hx-font-size-3xl)] - Font size at md.\n * @cssprop [--hx-counter-font-size-lg=var(--hx-font-size-5xl)] - Font size at lg.\n */\n@customElement('hx-counter')\nexport class HelixCounter extends LitElement {\n  static override styles = [tokenStyles, helixCounterStyles];\n\n  /**\n   * The target numeric value to count to.\n   * @attr value\n   */\n  @property({ type: Number })\n  value = 0;\n\n  /**\n   * Animation duration in milliseconds.\n   * @attr duration\n   */\n  @property({ type: Number })\n  duration = 1000;\n\n  /**\n   * Easing function applied to the animation progress.\n   * @attr easing\n   */\n  @property({ type: String })\n  easing: CounterEasing = 'ease-out';\n\n  /**\n   * Number format. 'integer' rounds to the nearest whole number;\n   * 'decimal' shows two decimal places.\n   * @attr format\n   */\n  @property({ type: String })\n  format: CounterFormat = 'integer';\n\n  /**\n   * String prepended to the formatted value (e.g., '$').\n   * @attr prefix\n   */\n  @property({ type: String })\n  prefix = '';\n\n  /**\n   * String appended to the formatted value (e.g., '%').\n   * @attr suffix\n   */\n  @property({ type: String })\n  suffix = '';\n\n  /**\n   * Size variant controlling font size.\n   * @attr size\n   */\n  @property({ type: String, reflect: true })\n  size: CounterSize = 'md';\n\n  // ─── Internal State ───\n\n  @state() private _displayValue = 0;\n\n  private _animationId: number | null = null;\n  private _startTime: number | null = null;\n  private _startValue = 0;\n  private _prefersReducedMotion = false;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    this._prefersReducedMotion = mq.matches;\n\n    if (this._prefersReducedMotion) {\n      this._displayValue = this.value;\n    } else {\n      this._startAnimation();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._cancelAnimation();\n  }\n\n  override updated(changedProps: Map<string, unknown>): void {\n    if (changedProps.has('value') && changedProps.get('value') !== undefined) {\n      if (this._prefersReducedMotion) {\n        this._displayValue = this.value;\n      } else {\n        this._startValue = this._displayValue;\n        this._startTime = null;\n        this._startAnimation();\n      }\n    }\n  }\n\n  // ─── Animation ───\n\n  private _cancelAnimation(): void {\n    if (this._animationId !== null) {\n      cancelAnimationFrame(this._animationId);\n      this._animationId = null;\n    }\n  }\n\n  private _applyEasing(t: number): number {\n    switch (this.easing) {\n      case 'linear':\n        return t;\n      case 'ease-in':\n        return t * t;\n      case 'ease-out':\n        return t * (2 - t);\n      case 'ease-in-out':\n        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n    }\n  }\n\n  private _startAnimation(): void {\n    this._cancelAnimation();\n\n    const step = (timestamp: number): void => {\n      if (this._startTime === null) {\n        this._startTime = timestamp;\n      }\n\n      const elapsed = timestamp - this._startTime;\n      const rawProgress = Math.min(elapsed / this.duration, 1);\n      const easedProgress = this._applyEasing(rawProgress);\n\n      this._displayValue = this._startValue + (this.value - this._startValue) * easedProgress;\n\n      if (rawProgress < 1) {\n        this._animationId = requestAnimationFrame(step);\n      } else {\n        this._displayValue = this.value;\n        this._animationId = null;\n      }\n    };\n\n    this._animationId = requestAnimationFrame(step);\n  }\n\n  // ─── Formatting ───\n\n  private _formatValue(): string {\n    const num =\n      this.format === 'integer'\n        ? Math.round(this._displayValue)\n        : parseFloat(this._displayValue.toFixed(2));\n\n    return `${this.prefix}${num.toLocaleString()}${this.suffix}`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      counter: true,\n      [`counter--${this.size}`]: true,\n    };\n\n    return html`\n      <span part=\"counter\" class=${classMap(classes)} aria-live=\"polite\" aria-atomic=\"true\">\n        ${this._formatValue()}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-counter': HelixCounter;\n  }\n}\n"],"names":["helixCounterStyles","css","HelixCounter","LitElement","mq","changedProps","t","step","timestamp","elapsed","rawProgress","easedProgress","num","classes","html","classMap","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-data-table-D3NZvc3P.js → hx-data-table-DNiDVWR2.js}

@@ -1,6 +1,6 @@
-import { css as u, LitElement as m, html as i, nothing as p } from "lit";
-import { property as d, state as f, customElement as w } from "lit/decorators.js";
-import { tokenStyles as y } from "@helixui/tokens/lit";
+import { css as u, LitElement as f, html as l, nothing as p } from "lit";
+import { property as d, state as m, customElement as y } from "lit/decorators.js";
+import { tokenStyles as w } from "@helixui/tokens/lit";
 const x = u`
   :host {
     display: block;
@@ -179,7 +179,10 @@ const x = u`
 
   /* ─── Cell Focus ─── */
 
-  td:focus-visible {
+  td:focus-visible,
+  th:focus-visible,
+  [part~='td']:focus-visible,
+  [part~='th']:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
     outline-offset: var(--hx-focus-ring-offset, -2px);
@@ -194,18 +197,18 @@ const x = u`
     padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
   }
 `;
-var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, h = (e, t, r, o) => {
-  for (var s = o > 1 ? void 0 : o ? v(t, r) : t, a = e.length - 1, n; a >= 0; a--)
-    (n = e[a]) && (s = (o ? n(t, r, s) : n(s)) || s);
-  return o && s && g(t, r, s), s;
+var g = Object.defineProperty, v = Object.getOwnPropertyDescriptor, h = (t, e, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? v(e, r) : e, a = t.length - 1, n; a >= 0; a--)
+    (n = t[a]) && (s = (o ? n(e, r, s) : n(s)) || s);
+  return o && s && g(e, r, s), s;
 };
-let l = class extends m {
+let i = class extends f {
   constructor() {
-    super(...arguments), this.columns = [], this.rows = [], this.selectable = !1, this.sortKey = "", this.sortDirection = "asc", this.loading = !1, this.emptyLabel = "No data", this.stickyHeader = !1, this.page = 1, this.pageSize = 0, this._selectedRows = /* @__PURE__ */ new Set();
+    super(...arguments), this.columns = [], this.rows = [], this.selectable = !1, this.sortKey = "", this.sortDirection = "asc", this.loading = !1, this.emptyLabel = "No data", this.label = "", this.stickyHeader = !1, this.page = 1, this.pageSize = 0, this._selectedRows = /* @__PURE__ */ new Set();
   }
   // ─── Lifecycle ───
-  willUpdate(e) {
-    if (e.has("columns"))
+  willUpdate(t) {
+    if (t.has("columns"))
       if (typeof this.columns == "string")
         try {
           this.columns = JSON.parse(this.columns);
@@ -213,7 +216,7 @@ let l = class extends m {
           this.columns = [];
         }
       else Array.isArray(this.columns) || (this.columns = []);
-    if (e.has("rows"))
+    if (t.has("rows"))
       if (typeof this.rows == "string")
         try {
           this.rows = JSON.parse(this.rows);
@@ -221,36 +224,34 @@ let l = class extends m {
           this.rows = [];
         }
       else Array.isArray(this.rows) || (this.rows = []);
-    e.has("rows") && this.rows.length > 500 && console.warn(
-      "[hx-data-table] Rendering more than 500 rows may impact performance. Consider server-side pagination."
-    );
+    t.has("rows") && this.rows.length > 500, (t.has("label") || t.has("columns")) && this.columns.length > 0 && this.label;
   }
   // ─── Event Handlers ───
-  _handleSort(e) {
-    const t = this.sortKey === e && this.sortDirection === "asc" ? "desc" : "asc";
-    this.sortKey = e, this.sortDirection = t, this.dispatchEvent(
+  _handleSort(t) {
+    const e = this.sortKey === t && this.sortDirection === "asc" ? "desc" : "asc";
+    this.sortKey = t, this.sortDirection = e, this.dispatchEvent(
       new CustomEvent("hx-sort", {
         bubbles: !0,
         composed: !0,
-        detail: { key: e, direction: t }
+        detail: { key: t, direction: e }
       })
     );
   }
-  _handleRowClick(e, t) {
+  _handleRowClick(t, e) {
     this.dispatchEvent(
       new CustomEvent("hx-row-click", {
         bubbles: !0,
         composed: !0,
-        detail: { row: e, index: t }
+        detail: { row: t, index: e }
       })
     );
   }
-  _handleSelect(e, t) {
+  _handleSelect(t, e) {
     const r = new Set(this._selectedRows);
-    t ? r.add(e) : r.delete(e), this._selectedRows = r, this._dispatchSelect();
+    e ? r.add(t) : r.delete(t), this._selectedRows = r, this._dispatchSelect();
   }
-  _handleSelectAll(e) {
-    this._selectedRows = e ? new Set(this.rows.map((t, r) => r)) : /* @__PURE__ */ new Set(), this._dispatchSelect();
+  _handleSelectAll(t) {
+    this._selectedRows = t ? new Set(this.rows.map((e, r) => r)) : /* @__PURE__ */ new Set(), this._dispatchSelect();
   }
   _dispatchSelect() {
     this.dispatchEvent(
@@ -258,20 +259,20 @@ let l = class extends m {
         bubbles: !0,
         composed: !0,
         detail: {
-          selectedRows: [...this._selectedRows].map((e) => this.rows[e])
+          selectedRows: [...this._selectedRows].map((t) => this.rows[t])
         }
       })
     );
   }
   // ─── Keyboard Navigation ───
-  _handleKeydown(e) {
+  _handleKeydown(t) {
     var b;
-    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", " "].includes(e.key))
+    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", " "].includes(t.key))
       return;
-    const t = this.shadowRoot;
-    if (!t) return;
-    const r = Array.from(t.querySelectorAll('[part~="td"],[part~="th"]'));
-    let o = t.activeElement;
+    const e = this.shadowRoot;
+    if (!e) return;
+    const r = Array.from(e.querySelectorAll('[part~="td"],[part~="th"]'));
+    let o = e.activeElement;
     if (!o) return;
     if (r.indexOf(o) === -1) {
       let c = o.parentElement;
@@ -286,35 +287,35 @@ let l = class extends m {
     const s = this.columns.length + (this.selectable ? 1 : 0), a = r.indexOf(o);
     if (a === -1) return;
     let n = null;
-    if (e.key === "ArrowRight" && a + 1 < r.length)
+    if (t.key === "ArrowRight" && a + 1 < r.length)
       n = r[a + 1] ?? null;
-    else if (e.key === "ArrowLeft" && a - 1 >= 0)
+    else if (t.key === "ArrowLeft" && a - 1 >= 0)
       n = r[a - 1] ?? null;
-    else if (e.key === "ArrowDown" && a + s < r.length)
+    else if (t.key === "ArrowDown" && a + s < r.length)
       n = r[a + s] ?? null;
-    else if (e.key === "ArrowUp" && a - s >= 0)
+    else if (t.key === "ArrowUp" && a - s >= 0)
       n = r[a - s] ?? null;
-    else if (e.key === "Home") {
+    else if (t.key === "Home") {
       const c = a - a % s;
       n = r[c] ?? null;
-    } else if (e.key === "End") {
+    } else if (t.key === "End") {
       const c = Math.min(a - a % s + s - 1, r.length - 1);
       n = r[c] ?? null;
-    } else if (e.key === " " && ((b = o.getAttribute("part")) != null && b.includes("td"))) {
+    } else if (t.key === " " && ((b = o.getAttribute("part")) != null && b.includes("td"))) {
       const c = Number(o.dataset.rowIndex);
-      this.selectable && !isNaN(c) && (e.preventDefault(), this._handleSelect(c, !this._selectedRows.has(c)));
+      this.selectable && !isNaN(c) && (t.preventDefault(), this._handleSelect(c, !this._selectedRows.has(c)));
       return;
     }
-    n && (e.preventDefault(), n.setAttribute("tabindex", "0"), n.focus(), o.setAttribute("tabindex", "-1"));
+    n && (t.preventDefault(), n.setAttribute("tabindex", "0"), n.focus(), o.setAttribute("tabindex", "-1"));
   }
   // ─── Render Helpers ───
-  _renderSortIcon(e) {
-    const t = this.sortKey === e, r = [
+  _renderSortIcon(t) {
+    const e = this.sortKey === t, r = [
       "sort-icon",
-      t ? "sort-icon--active" : "",
-      t && this.sortDirection === "desc" ? "sort-icon--desc" : ""
+      e ? "sort-icon--active" : "",
+      e && this.sortDirection === "desc" ? "sort-icon--desc" : ""
     ].filter(Boolean).join(" ");
-    return i`
+    return l`
       <span part="sort-icon" class=${r} aria-hidden="true">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -329,9 +330,9 @@ let l = class extends m {
     `;
   }
   _renderHeaderRow() {
-    return i`
+    return l`
       <tr part="tr">
-        ${this.selectable ? i`
+        ${this.selectable ? l`
               <th part="th" class="col-checkbox" tabindex="0">
                 <input
                   type="checkbox"
@@ -339,27 +340,27 @@ let l = class extends m {
                   aria-label="Select all rows"
                   .indeterminate=${this._selectedRows.size > 0 && this._selectedRows.size < this.rows.length}
                   .checked=${this._selectedRows.size === this.rows.length && this.rows.length > 0}
-                  @change=${(e) => this._handleSelectAll(e.target.checked)}
+                  @change=${(t) => this._handleSelectAll(t.target.checked)}
                 />
               </th>
             ` : p}
         ${this.columns.map(
-      (e) => i`
+      (t) => l`
             <th
               part="th"
               tabindex="0"
-              style=${e.width ? `width: ${e.width}` : ""}
-              aria-sort=${e.sortable ? this.sortKey === e.key ? this.sortDirection === "asc" ? "ascending" : "descending" : "none" : p}
+              style=${t.width ? `width: ${t.width}` : ""}
+              aria-sort=${t.sortable ? this.sortKey === t.key ? this.sortDirection === "asc" ? "ascending" : "descending" : "none" : p}
             >
-              ${e.sortable ? i`
+              ${t.sortable ? l`
                     <button
                       class="sort-btn"
-                      @click=${() => this._handleSort(e.key)}
-                      aria-label=${this.sortKey === e.key ? `Sort by ${e.label}, currently sorted ${this.sortDirection === "asc" ? "ascending" : "descending"}` : `Sort by ${e.label}`}
+                      @click=${() => this._handleSort(t.key)}
+                      aria-label=${this.sortKey === t.key ? `Sort by ${t.label}, currently sorted ${this.sortDirection === "asc" ? "ascending" : "descending"}` : `Sort by ${t.label}`}
                     >
-                      ${e.label} ${this._renderSortIcon(e.key)}
+                      ${t.label} ${this._renderSortIcon(t.key)}
                     </button>
-                  ` : e.label}
+                  ` : t.label}
             </th>
           `
     )}
@@ -369,13 +370,13 @@ let l = class extends m {
   _renderSkeletonRows() {
     return Array.from(
       { length: 3 },
-      (e, t) => i`
-        <tr part="tr" aria-hidden="true" key=${t}>
-          ${this.selectable ? i`<td part="td" class="col-checkbox">
+      (t, e) => l`
+        <tr part="tr" aria-hidden="true" key=${e}>
+          ${this.selectable ? l`<td part="td" class="col-checkbox">
                 <span class="skeleton-cell" style="width:1rem;margin:auto"></span>
               </td>` : p}
           ${this.columns.map(
-        () => i`
+        () => l`
               <td part="td">
                 <span class="skeleton-cell"></span>
               </td>
@@ -386,31 +387,31 @@ let l = class extends m {
     );
   }
   _renderEmptyRow() {
-    const e = this.columns.length + (this.selectable ? 1 : 0);
-    return i`
+    const t = this.columns.length + (this.selectable ? 1 : 0);
+    return l`
       <tr part="tr">
-        <td part="td" colspan=${e} class="empty-cell">
+        <td part="td" colspan=${t} class="empty-cell">
           <slot name="empty">${this.emptyLabel}</slot>
         </td>
       </tr>
     `;
   }
   _renderDataRows() {
-    let e = this.rows;
+    let t = this.rows;
     if (this.pageSize > 0) {
-      const t = (this.page - 1) * this.pageSize;
-      e = this.rows.slice(t, t + this.pageSize);
+      const e = (this.page - 1) * this.pageSize;
+      t = this.rows.slice(e, e + this.pageSize);
     }
-    return e.map((t, r) => {
+    return t.map((e, r) => {
       const o = this.pageSize > 0 ? (this.page - 1) * this.pageSize + r : r;
-      return i`
+      return l`
         <tr
           part="tr"
           aria-selected=${this.selectable ? String(this._selectedRows.has(o)) : p}
-          @click=${() => this._handleRowClick(t, o)}
+          @click=${() => this._handleRowClick(e, o)}
         >
-          ${this.selectable ? i`
-                <td part="td" class="col-checkbox">
+          ${this.selectable ? l`
+                <td part="td" class="col-checkbox" tabindex="-1" data-row-index=${o}>
                   <input
                     type="checkbox"
                     part="checkbox"
@@ -422,9 +423,9 @@ let l = class extends m {
                 </td>
               ` : p}
           ${this.columns.map(
-        (s) => i`
+        (s) => l`
               <td part="td" tabindex="-1" data-row-index=${o}>
-                ${t[s.key] != null ? String(t[s.key]) : ""}
+                ${e[s.key] != null ? String(e[s.key]) : ""}
               </td>
             `
       )}
@@ -434,12 +435,13 @@ let l = class extends m {
   }
   // ─── Render ───
   render() {
-    return i`
+    return l`
       <slot name="toolbar"></slot>
       <div class="table-wrapper">
         <table
           part="table"
           role="grid"
+          aria-label=${this.label || p}
           aria-busy=${this.loading ? "true" : p}
           @keydown=${this._handleKeydown}
         >
@@ -447,51 +449,54 @@ let l = class extends m {
             ${this._renderHeaderRow()}
           </thead>
           <tbody part="tbody">
-            ${this.loading ? i`<slot name="loading">${this._renderSkeletonRows()}</slot>` : this.rows.length === 0 ? this._renderEmptyRow() : this._renderDataRows()}
+            ${this.loading ? l`<slot name="loading">${this._renderSkeletonRows()}</slot>` : this.rows.length === 0 ? this._renderEmptyRow() : this._renderDataRows()}
           </tbody>
         </table>
       </div>
     `;
   }
 };
-l.styles = [y, x];
+i.styles = [w, x];
 h([
   d({ type: Array })
-], l.prototype, "columns", 2);
+], i.prototype, "columns", 2);
 h([
   d({ type: Array })
-], l.prototype, "rows", 2);
+], i.prototype, "rows", 2);
 h([
   d({ type: Boolean, reflect: !0 })
-], l.prototype, "selectable", 2);
+], i.prototype, "selectable", 2);
 h([
   d({ type: String, attribute: "sort-key" })
-], l.prototype, "sortKey", 2);
+], i.prototype, "sortKey", 2);
 h([
   d({ type: String, attribute: "sort-direction" })
-], l.prototype, "sortDirection", 2);
+], i.prototype, "sortDirection", 2);
 h([
   d({ type: Boolean, reflect: !0 })
-], l.prototype, "loading", 2);
+], i.prototype, "loading", 2);
 h([
   d({ type: String, attribute: "empty-label" })
-], l.prototype, "emptyLabel", 2);
+], i.prototype, "emptyLabel", 2);
+h([
+  d({ type: String })
+], i.prototype, "label", 2);
 h([
   d({ type: Boolean, reflect: !0, attribute: "sticky-header" })
-], l.prototype, "stickyHeader", 2);
+], i.prototype, "stickyHeader", 2);
 h([
   d({ type: Number })
-], l.prototype, "page", 2);
+], i.prototype, "page", 2);
 h([
   d({ type: Number, attribute: "page-size" })
-], l.prototype, "pageSize", 2);
+], i.prototype, "pageSize", 2);
 h([
-  f()
-], l.prototype, "_selectedRows", 2);
-l = h([
-  w("hx-data-table")
-], l);
+  m()
+], i.prototype, "_selectedRows", 2);
+i = h([
+  y("hx-data-table")
+], i);
 export {
-  l as H
+  i as H
 };
-//# sourceMappingURL=hx-data-table-D3NZvc3P.js.map
+//# sourceMappingURL=hx-data-table-DNiDVWR2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-data-table-DNiDVWR2.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-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-neutral-50, #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-neutral-50, #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: left;\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-data-table-border-color, var(--hx-color-neutral-200, #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-neutral-700, #334155));\n    white-space: nowrap;\n  }\n\n  td {\n    color: var(--hx-data-table-cell-color, var(--hx-color-neutral-900, #0f172a));\n  }\n\n  /* ─── Checkbox Column ─── */\n\n  th.col-checkbox,\n  td.col-checkbox {\n    width: 40px;\n    min-width: 40px;\n    padding-right: 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: 0.4;\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: 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-neutral-50, #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    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 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: 0.6;\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-neutral-600, #475569));\n    padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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/**\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 */\n@customElement('hx-data-table')\nexport class HelixDataTable extends LitElement {\n  static override styles = [tokenStyles, 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({ type: Array })\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({ type: Array })\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   * 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  @state()\n  private _selectedRows: Set<number> = new Set();\n\n  // ─── Lifecycle ───\n\n  override willUpdate(changed: Map<string, unknown>): 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    if (changed.has('columns')) {\n      if (typeof (this.columns as unknown) === 'string') {\n        try {\n          this.columns = JSON.parse(this.columns as unknown as string) as HxDataTableColumn[];\n        } catch {\n          this.columns = [];\n        }\n      } else if (!Array.isArray(this.columns)) {\n        this.columns = [];\n      }\n    }\n    if (changed.has('rows')) {\n      if (typeof (this.rows as unknown) === 'string') {\n        try {\n          this.rows = JSON.parse(this.rows as unknown as string) as Record<string, unknown>[];\n        } catch {\n          this.rows = [];\n        }\n      } else if (!Array.isArray(this.rows)) {\n        this.rows = [];\n      }\n    }\n    // Only warn when rows actually changes to avoid noise on every property update.\n    if (changed.has('rows') && this.rows.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.columns.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  // ─── Event Handlers ───\n\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  private _handleRowClick(row: Record<string, unknown>, index: number): void {\n    this.dispatchEvent(\n      new CustomEvent('hx-row-click', {\n        bubbles: true,\n        composed: true,\n        detail: { row, index },\n      }),\n    );\n  }\n\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  private _handleSelectAll(checked: boolean): void {\n    this._selectedRows = checked ? new Set(this.rows.map((_, i) => i)) : new Set<number>();\n    this._dispatchSelect();\n  }\n\n  private _dispatchSelect(): void {\n    this.dispatchEvent(\n      new CustomEvent('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          selectedRows: [...this._selectedRows].map((i) => this.rows[i]),\n        },\n      }),\n    );\n  }\n\n  // ─── Keyboard Navigation ───\n\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    const cells = Array.from(root.querySelectorAll<HTMLElement>('[part~=\"td\"],[part~=\"th\"]'));\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.columns.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  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  private _renderHeaderRow() {\n    return html`\n      <tr part=\"tr\">\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=\"Select all rows\"\n                  .indeterminate=${this._selectedRows.size > 0 &&\n                  this._selectedRows.size < this.rows.length}\n                  .checked=${this._selectedRows.size === this.rows.length && this.rows.length > 0}\n                  @change=${(e: Event) =>\n                    this._handleSelectAll((e.target as HTMLInputElement).checked)}\n                />\n              </th>\n            `\n          : nothing}\n        ${this.columns.map(\n          (col) => html`\n            <th\n              part=\"th\"\n              tabindex=\"0\"\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            >\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  private _renderSkeletonRows() {\n    return Array.from(\n      { length: 3 },\n      (_, i) => html`\n        <tr part=\"tr\" aria-hidden=\"true\" key=${i}>\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.columns.map(\n            () => html`\n              <td part=\"td\">\n                <span class=\"skeleton-cell\"></span>\n              </td>\n            `,\n          )}\n        </tr>\n      `,\n    );\n  }\n\n  private _renderEmptyRow() {\n    const colSpan = this.columns.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  private _renderDataRows() {\n    let displayRows = this.rows;\n\n    // Client-side pagination when pageSize > 0\n    if (this.pageSize > 0) {\n      const start = (this.page - 1) * this.pageSize;\n      displayRows = this.rows.slice(start, start + this.pageSize);\n    }\n\n    return displayRows.map((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        >\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.columns.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  // ─── 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 || nothing}\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.rows.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","LitElement","changed","key","direction","row","index","checked","next","_","i","e","root","cells","focused","ancestor","colCount","idx","target","rowStart","rowEnd","_a","rowIdx","isActive","iconClass","html","nothing","col","colSpan","displayRows","start","pageIndex","globalIndex","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}