@helixui/library 3.1.0-next.70 → 3.1.0-next.72

package/dist/shared/hx-counter-0zYapFhf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-counter-0zYapFhf.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, #0d1825));\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  /* ─── Screen-reader only (visually hidden live region) ─── */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\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  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    /* Counter is text-only — forced-color-adjust: auto (default) is sufficient.\n       The browser maps the custom color properties to CanvasText automatically. */\n    .counter {\n      forced-color-adjust: auto;\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 { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixCounterStyles } from './hx-counter.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.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 * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-font-size-xl] - Font size.\n * @cssprop [--hx-font-size-3xl] - Font size.\n * @cssprop [--hx-font-size-5xl] - Font size.\n */\n@customElement('hx-counter')\nexport class HelixCounter extends HelixElement {\n  static override styles = [helixCounterStyles, forcedColorsSurface];\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: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' = '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: 'integer' | 'decimal' = '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 hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Accessible label describing the counter's context (e.g. \"Total patients\", \"Active alerts\").\n   * WCAG 4.1.2: a numeric value alone is meaningless without context for screen readers.\n   * When provided, the value is applied as aria-label on the counter element.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state() private _displayValue = 0;\n\n  /**\n   * The final value announced to screen readers once animation completes.\n   * Updated only at animation end so AT users hear the result, not every frame.\n   * @internal\n   */\n  @state() private _announcedValue = '';\n\n  /** @internal */\n  private _animationId: number | null = null;\n  /** @internal */\n  private _startTime: number | null = null;\n  /** @internal */\n  private _startValue = 0;\n  /** @internal */\n  private _prefersReducedMotion = false;\n  /** @internal */\n  private _motionMql: MediaQueryList | null = null;\n  /**\n   * Normalized easing value after validation. Set once per animation start\n   * to avoid repeated devWarn calls on every requestAnimationFrame tick.\n   * @internal\n   */\n  private _resolvedEasing: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' = 'ease-out';\n  /** @internal */\n  private readonly _handleMotionChange = (e: MediaQueryListEvent): void => {\n    this._prefersReducedMotion = e.matches;\n    if (this._prefersReducedMotion) {\n      this._cancelAnimation();\n      this._displayValue = this.value;\n      this._announcedValue = this._buildAnnouncement();\n      this.requestUpdate();\n    }\n  };\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n    // is not set, map the value and emit a deprecation warning.\n    const legacySize = this.getAttribute('size');\n    if (legacySize !== null && !this.hasAttribute('hx-size')) {\n      devWarn('hx-counter', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as CounterSize;\n    }\n\n    // WCAG 4.1.2: a numeric value without context is meaningless to screen readers.\n    // Normalize: whitespace-only labels are treated as empty.\n    if (!(this.label || '').trim()) {\n      devWarn(\n        'hx-counter',\n        'hx-counter requires a label for screen reader accessibility (WCAG 4.1.2). Provide the `label` attribute.',\n      );\n    }\n\n    // Guard for SSR — window.matchMedia and requestAnimationFrame are unavailable server-side\n    if (typeof window === 'undefined') {\n      this._displayValue = this.value;\n      return;\n    }\n\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    this._motionMql = mq;\n    this._prefersReducedMotion = mq.matches;\n    mq.addEventListener('change', this._handleMotionChange);\n\n    if (this._prefersReducedMotion) {\n      this._displayValue = this.value;\n      this._announcedValue = this._buildAnnouncement();\n    } else {\n      this._startAnimation();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._cancelAnimation();\n    this._motionMql?.removeEventListener('change', this._handleMotionChange);\n    this._motionMql = null;\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n    if (changedProps.has('value') && changedProps.get('value') !== undefined) {\n      if (this._prefersReducedMotion) {\n        this._displayValue = this.value;\n        this._announcedValue = this._buildAnnouncement();\n      } else {\n        this._startValue = this._displayValue;\n        this._startTime = null;\n        this._startAnimation();\n      }\n    }\n  }\n\n  // ─── Animation ───\n\n  /** @internal */\n  private _cancelAnimation(): void {\n    if (this._animationId !== null) {\n      cancelAnimationFrame(this._animationId);\n      this._animationId = null;\n    }\n  }\n\n  /**\n   * Validates `this.easing` once per animation start and stores the result in\n   * `_resolvedEasing`. This prevents devWarn from firing on every rAF tick for\n   * an invalid easing value — the warning is emitted at most once per call.\n   * @internal\n   */\n  private _normalizeEasing(): void {\n    const validEasings: Array<'linear' | 'ease-in' | 'ease-out' | 'ease-in-out'> = [\n      'linear',\n      'ease-in',\n      'ease-out',\n      'ease-in-out',\n    ];\n    if (validEasings.includes(this.easing)) {\n      this._resolvedEasing = this.easing;\n    } else {\n      devWarn(\n        'hx-counter',\n        `Unrecognized easing value \"${this.easing as string}\". Falling back to \"linear\". Valid values: ease-in, ease-out, ease-in-out, linear.`,\n      );\n      this._resolvedEasing = 'linear';\n    }\n  }\n\n  /** @internal */\n  private _applyEasing(t: number): number {\n    switch (this._resolvedEasing) {\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  /** @internal */\n  private _startAnimation(): void {\n    this._cancelAnimation();\n    this._normalizeEasing();\n\n    let effectiveDuration: number;\n    if (this.duration <= 0) {\n      devWarn('hx-counter', `duration must be > 0 (received ${this.duration}). Clamping to 1ms.`);\n      effectiveDuration = 1;\n    } else {\n      effectiveDuration = this.duration;\n    }\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 / effectiveDuration, 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        // WCAG 4.1.2: announce the final value only once, at animation end.\n        // _announcedValue feeds the off-screen live region so screen readers\n        // hear a single announcement rather than one per animation frame.\n        this._announcedValue = this._buildAnnouncement();\n      }\n    };\n\n    this._animationId = requestAnimationFrame(step);\n  }\n\n  // ─── Formatting ───\n\n  /** @internal */\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  /**\n   * Builds the string announced to screen readers at animation end.\n   * Includes label context when present so users hear \"Total patients: 1,284\"\n   * rather than a bare number with no semantic context.\n   * @internal\n   */\n  private _buildAnnouncement(): string {\n    const normalizedLabel = (this.label || '').trim();\n    if (!normalizedLabel) {\n      // No label means the number lacks context — return empty to prevent\n      // announcing a context-free number to screen readers.\n      return '';\n    }\n    const formatted = this._formatValue();\n    return `${normalizedLabel}: ${formatted}`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      counter: true,\n      [`counter--${this.size}`]: true,\n    };\n\n    const trimmedLabel = (this.label || '').trim();\n\n    return html`\n      <span\n        part=\"counter\"\n        role=\"status\"\n        aria-live=\"off\"\n        class=${classMap(classes)}\n        aria-label=${trimmedLabel ? `${trimmedLabel}: ${this._formatValue()}` : nothing}\n      >\n        ${this._formatValue()}\n      </span>\n      <!--\n        WCAG 4.1.2: off-screen live region updated only at animation end.\n        Prevents screen readers from announcing every intermediate frame value.\n      -->\n      <span\n        class=\"sr-only\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        aria-hidden=${this._announcedValue ? nothing : 'true'}\n        >${this._announcedValue}</span\n      >\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-counter': HelixCounter;\n  }\n}\n"],"names":["helixCounterStyles","css","HelixCounter","HelixElement","legacySize","mq","_a","changedProps","devWarn","t","effectiveDuration","step","timestamp","elapsed","rawProgress","easedProgress","num","normalizedLabel","formatted","classes","trimmedLabel","html","classMap","nothing","forcedColorsSurface","__decorateClass","property","state","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAqBC;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;;;;;;ACoC3B,IAAMC,IAAN,cAA2BC,EAAa;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,QAAQ,GAOR,KAAA,WAAW,KAOX,KAAA,SAA4D,YAQ5D,KAAA,SAAgC,WAOhC,KAAA,SAAS,IAOT,KAAA,SAAS,IAOT,KAAA,OAA2B,MAS3B,KAAA,QAAQ,IAKC,KAAQ,gBAAgB,GAOxB,KAAQ,kBAAkB,IAGnC,KAAQ,eAA8B,MAEtC,KAAQ,aAA4B,MAEpC,KAAQ,cAAc,GAEtB,KAAQ,wBAAwB,IAEhC,KAAQ,aAAoC,MAM5C,KAAQ,kBAAqE,YAE7E,KAAiB,sBAAsB,CAAC,MAAiC;AACvE,WAAK,wBAAwB,EAAE,SAC3B,KAAK,0BACP,KAAK,iBAAA,GACL,KAAK,gBAAgB,KAAK,OAC1B,KAAK,kBAAkB,KAAK,mBAAA,GAC5B,KAAK,cAAA;AAAA,IAET;AAAA,EAAA;AAAA;AAAA,EAIS,oBAA0B;AACjC,UAAM,kBAAA;AAGN,UAAMC,IAAa,KAAK,aAAa,MAAM;AAgB3C,QAfIA,MAAe,QAAQ,CAAC,KAAK,aAAa,SAAS,MAErD,KAAK,OAAOA,KAKR,KAAK,SAAS,IAAI,QAQpB,OAAO,SAAW,KAAa;AACjC,WAAK,gBAAgB,KAAK;AAC1B;AAAA,IACF;AAEA,UAAMC,IAAK,OAAO,WAAW,kCAAkC;AAC/D,SAAK,aAAaA,GAClB,KAAK,wBAAwBA,EAAG,SAChCA,EAAG,iBAAiB,UAAU,KAAK,mBAAmB,GAElD,KAAK,yBACP,KAAK,gBAAgB,KAAK,OAC1B,KAAK,kBAAkB,KAAK,mBAAA,KAE5B,KAAK,gBAAA;AAAA,EAET;AAAA,EAES,uBAA6B;;AACpC,UAAM,qBAAA,GACN,KAAK,iBAAA,IACLC,IAAA,KAAK,eAAL,QAAAA,EAAiB,oBAAoB,UAAU,KAAK,sBACpD,KAAK,aAAa;AAAA,EACpB;AAAA,EAES,QAAQC,GAA0C;AACzD,UAAM,QAAQA,CAAY,GACtBA,EAAa,IAAI,OAAO,KAAKA,EAAa,IAAI,OAAO,MAAM,WACzD,KAAK,yBACP,KAAK,gBAAgB,KAAK,OAC1B,KAAK,kBAAkB,KAAK,mBAAA,MAE5B,KAAK,cAAc,KAAK,eACxB,KAAK,aAAa,MAClB,KAAK,gBAAA;AAAA,EAGX;AAAA;AAAA;AAAA,EAKQ,mBAAyB;AAC/B,IAAI,KAAK,iBAAiB,SACxB,qBAAqB,KAAK,YAAY,GACtC,KAAK,eAAe;AAAA,EAExB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,mBAAyB;AAO/B,IAN+E;AAAA,MAC7E;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,EAEe,SAAS,KAAK,MAAM,IACnC,KAAK,kBAAkB,KAAK,UAE5BC;AAAA,MACE;AAAA,MACA,8BAA8B,KAAK,MAAgB;AAAA,IAAA,GAErD,KAAK,kBAAkB;AAAA,EAE3B;AAAA;AAAA,EAGQ,aAAaC,GAAmB;AACtC,YAAQ,KAAK,iBAAA;AAAA,MACX,KAAK;AACH,eAAOA;AAAA,MACT,KAAK;AACH,eAAOA,IAAIA;AAAA,MACb,KAAK;AACH,eAAOA,KAAK,IAAIA;AAAA,MAClB,KAAK;AACH,eAAOA,IAAI,MAAM,IAAIA,IAAIA,IAAI,MAAM,IAAI,IAAIA,KAAKA;AAAA,IAAA;AAAA,EAEtD;AAAA;AAAA,EAGQ,kBAAwB;AAC9B,SAAK,iBAAA,GACL,KAAK,iBAAA;AAEL,QAAIC;AACJ,IAAI,KAAK,YAAY,KACnBF,EAAQ,cAAc,kCAAkC,KAAK,QAAQ,qBAAqB,GAC1FE,IAAoB,KAEpBA,IAAoB,KAAK;AAG3B,UAAMC,IAAO,CAACC,MAA4B;AACxC,MAAI,KAAK,eAAe,SACtB,KAAK,aAAaA;AAGpB,YAAMC,IAAUD,IAAY,KAAK,YAC3BE,IAAc,KAAK,IAAID,IAAUH,GAAmB,CAAC,GACrDK,IAAgB,KAAK,aAAaD,CAAW;AAEnD,WAAK,gBAAgB,KAAK,eAAe,KAAK,QAAQ,KAAK,eAAeC,GAEtED,IAAc,IAChB,KAAK,eAAe,sBAAsBH,CAAI,KAE9C,KAAK,gBAAgB,KAAK,OAC1B,KAAK,eAAe,MAIpB,KAAK,kBAAkB,KAAK,mBAAA;AAAA,IAEhC;AAEA,SAAK,eAAe,sBAAsBA,CAAI;AAAA,EAChD;AAAA;AAAA;AAAA,EAKQ,eAAuB;AAC7B,UAAMK,IACJ,KAAK,WAAW,YACZ,KAAK,MAAM,KAAK,aAAa,IAC7B,WAAW,KAAK,cAAc,QAAQ,CAAC,CAAC;AAE9C,WAAO,GAAG,KAAK,MAAM,GAAGA,EAAI,gBAAgB,GAAG,KAAK,MAAM;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,qBAA6B;AACnC,UAAMC,KAAmB,KAAK,SAAS,IAAI,KAAA;AAC3C,QAAI,CAACA;AAGH,aAAO;AAET,UAAMC,IAAY,KAAK,aAAA;AACvB,WAAO,GAAGD,CAAe,KAAKC,CAAS;AAAA,EACzC;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,SAAS;AAAA,MACT,CAAC,YAAY,KAAK,IAAI,EAAE,GAAG;AAAA,IAAA,GAGvBC,KAAgB,KAAK,SAAS,IAAI,KAAA;AAExC,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKKC,EAASH,CAAO,CAAC;AAAA,qBACZC,IAAe,GAAGA,CAAY,KAAK,KAAK,aAAA,CAAc,KAAKG,CAAO;AAAA;AAAA,UAE7E,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUP,KAAK,kBAAkBA,IAAU,MAAM;AAAA,WAClD,KAAK,eAAe;AAAA;AAAA;AAAA,EAG7B;AACF;AAvTarB,EACK,SAAS,CAACF,GAAoBwB,CAAmB;AAOjEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPfxB,EAQX,WAAA,SAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAdfxB,EAeX,WAAA,YAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArBfxB,EAsBX,WAAA,UAAA,CAAA;AAQAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7BfxB,EA8BX,WAAA,UAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApCfxB,EAqCX,WAAA,UAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3CfxB,EA4CX,WAAA,UAAA,CAAA;AAOAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GAlDpDxB,EAmDX,WAAA,QAAA,CAAA;AASAuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3DfxB,EA4DX,WAAA,SAAA,CAAA;AAKiBuB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAjEIzB,EAiEM,WAAA,iBAAA,CAAA;AAOAuB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxEIzB,EAwEM,WAAA,mBAAA,CAAA;AAxENA,IAANuB,EAAA;AAAA,EADNG,EAAc,YAAY;AAAA,GACd1B,CAAA;"}

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

@@ -1,8 +1,9 @@
-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 { css as f, html as c, nothing as p } from "lit";
+import { property as h, 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`
+import { a as y } from "./forced-colors-CTEDFRGa.js";
+import { H as v } from "./helix-element-BNEYeiys.js";
+const w = f`
   :host {
     display: block;
     overflow-x: auto;
@@ -29,14 +30,14 @@ const v = f`
   /* ─── Head ─── */
 
   thead {
-    background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   :host([sticky-header]) thead th {
     position: sticky;
     top: 0;
     z-index: 1;
-    background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f8fafc));
+    background-color: var(--hx-data-table-header-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   /* ─── Cells ─── */
@@ -46,18 +47,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-border-default, #e2e8f0));
+      var(--hx-data-table-border-color, var(--hx-color-border-default, #d6dbd5));
     vertical-align: middle;
   }
 
   th {
     font-weight: var(--hx-font-weight-semibold, 600);
-    color: var(--hx-data-table-header-color, var(--hx-color-text-strong, #334155));
+    color: var(--hx-data-table-header-color, var(--hx-color-text-strong, #202b39));
     white-space: nowrap;
   }
 
   td {
-    color: var(--hx-data-table-cell-color, var(--hx-color-text-primary, #0f172a));
+    color: var(--hx-data-table-cell-color, var(--hx-color-text-primary, #0d1825));
   }
 
   /* ─── Checkbox Column ─── */
@@ -96,7 +97,10 @@ const v = f`
 
   .sort-btn:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+      var(
+        --hx-data-table-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 2px);
   }
@@ -117,7 +121,7 @@ const v = f`
 
   .sort-icon--active {
     opacity: var(--hx-opacity-100, 1);
-    color: var(--hx-color-primary-500, #2563eb);
+    color: var(--hx-data-table-sort-icon-active-color, var(--hx-color-primary-500, #429797));
   }
 
   .sort-icon--desc {
@@ -131,11 +135,11 @@ const v = f`
   }
 
   tbody tr:hover {
-    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-surface-raised, #f8fafc));
+    background-color: var(--hx-data-table-row-hover-bg, var(--hx-color-surface-raised, #f5f8f3));
   }
 
   tbody tr[aria-selected='true'] {
-    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #eff6ff));
+    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #ebf8f8));
   }
 
   /* ─── Checkbox Input ─── */
@@ -144,7 +148,7 @@ const v = f`
     width: var(--hx-size-4, 1rem);
     height: var(--hx-size-4, 1rem);
     cursor: pointer;
-    accent-color: var(--hx-color-primary-500, #2563eb);
+    accent-color: var(--hx-data-table-checkbox-accent-color, var(--hx-color-primary-500, #429797));
   }
 
   /* ─── Loading Skeleton ─── */
@@ -156,9 +160,9 @@ const v = f`
     /* Skeleton shimmer: intentionally primitive so the animation reads the same across all modes. */
     background: linear-gradient(
       90deg,
-      var(--hx-color-neutral-200, #e2e8f0) 25%,
-      var(--hx-color-neutral-100, #f1f5f9) 50%,
-      var(--hx-color-neutral-200, #e2e8f0) 75%
+      var(--hx-color-neutral-200, #d6dbd5) 25%,
+      var(--hx-color-neutral-100, #ebeee9) 50%,
+      var(--hx-color-neutral-200, #d6dbd5) 75%
     );
     background-size: 200% 100%;
     animation: hx-shimmer var(--hx-data-table-shimmer-duration, 1.5s) infinite;
@@ -198,7 +202,10 @@ const v = f`
   [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));
+      var(
+        --hx-data-table-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, -2px);
     border-radius: var(--hx-border-radius-sm, 2px);
   }
@@ -207,7 +214,7 @@ const v = f`
 
   .empty-cell {
     text-align: center;
-    color: var(--hx-data-table-empty-color, var(--hx-color-text-secondary, #475569));
+    color: var(--hx-data-table-empty-color, var(--hx-color-text-secondary, #313e4b));
     padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
   }
 
@@ -234,12 +241,12 @@ const v = f`
     }
   }
 `;
-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;
+var g = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (e, r, t, o) => {
+  for (var s = o > 1 ? void 0 : o ? _(r, t) : r, a = e.length - 1, d; a >= 0; a--)
+    (d = e[a]) && (s = (o ? d(r, t, s) : d(s)) || s);
+  return o && s && g(r, t, s), s;
 };
-let i = class extends y {
+let i = class extends v {
   constructor() {
     super(...arguments), this.columns = [], this.rows = [], this.selectable = !1, this.sortKey = "", this.sortDirection = "asc", this.loading = !1, this.emptyLabel = "No data", this.label = "", this.selectAllLabel = "Select all rows", this.stickyHeader = !1, this.page = 1, this.pageSize = 0, this._selectedRows = /* @__PURE__ */ new Set(), this._cachedCells = null, this._focusedHeaderIndex = -1, this._resolvedColumns = [], this._resolvedRows = [];
   }
@@ -328,41 +335,41 @@ let i = class extends y {
       r.querySelectorAll('[part~="td"],[part~="th"]')
     ));
     const t = this._cachedCells;
-    let s = r.activeElement;
-    if (!s) return;
-    if (t.indexOf(s) === -1) {
-      let l = s.parentElement;
+    let o = r.activeElement;
+    if (!o) return;
+    if (t.indexOf(o) === -1) {
+      let l = o.parentElement;
       for (; l; ) {
         if (t.includes(l)) {
-          s = l;
+          o = l;
           break;
         }
         l = l.parentElement;
       }
     }
-    const o = this._resolvedColumns.length + (this.selectable ? 1 : 0), a = t.indexOf(s);
+    const s = this._resolvedColumns.length + (this.selectable ? 1 : 0), a = t.indexOf(o);
     if (a === -1) return;
-    let h = null;
+    let d = null;
     if (e.key === "ArrowRight" && a + 1 < t.length)
-      h = t[a + 1] ?? null;
+      d = t[a + 1] ?? null;
     else if (e.key === "ArrowLeft" && a - 1 >= 0)
-      h = t[a - 1] ?? 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;
+      d = t[a - 1] ?? null;
+    else if (e.key === "ArrowDown" && a + s < t.length)
+      d = t[a + s] ?? null;
+    else if (e.key === "ArrowUp" && a - s >= 0)
+      d = t[a - s] ?? null;
     else if (e.key === "Home") {
-      const l = a - a % o;
-      h = t[l] ?? null;
+      const l = a - a % s;
+      d = t[l] ?? null;
     } else if (e.key === "End") {
-      const l = Math.min(a - a % o + o - 1, t.length - 1);
-      h = t[l] ?? null;
-    } else if (e.key === " " && ((u = s.getAttribute("part")) != null && u.includes("td"))) {
-      const l = Number(s.dataset.rowIndex);
+      const l = Math.min(a - a % s + s - 1, t.length - 1);
+      d = t[l] ?? null;
+    } else if (e.key === " " && ((u = o.getAttribute("part")) != null && u.includes("td"))) {
+      const l = Number(o.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(), s.setAttribute("tabindex", "-1"));
+    d && (e.preventDefault(), d.setAttribute("tabindex", "0"), d.focus(), o.setAttribute("tabindex", "-1"));
   }
   // ─── Render Helpers ───
   /** @internal */
@@ -372,7 +379,7 @@ let i = class extends y {
       r ? "sort-icon--active" : "",
       r && this.sortDirection === "desc" ? "sort-icon--desc" : ""
     ].filter(Boolean).join(" ");
-    return d`
+    return c`
       <span part="sort-icon" class=${t} aria-hidden="true">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -412,20 +419,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 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();
+    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]"), d = (a == null ? void 0 : a[s]) ?? null;
+    d && d.focus();
   }
   /** @internal */
   _renderHeaderRow() {
     const e = this._sortableIndices, r = this._focusedHeaderIndex >= 0 ? this._focusedHeaderIndex : e[0] ?? -1;
-    return d`
+    return c`
       <tr part="tr" @keydown=${this._handleHeaderKeydown}>
-        ${this.selectable ? d`
+        ${this.selectable ? c`
               <th part="th" class="col-checkbox" tabindex="0">
                 <input
                   type="checkbox"
@@ -438,18 +445,18 @@ let i = class extends y {
               </th>
             ` : p}
         ${this._resolvedColumns.map(
-      (t, s) => d`
+      (t, o) => c`
             <th
               part="th"
-              data-col-index=${s}
-              tabindex=${t.sortable && s === r ? "0" : "-1"}
+              data-col-index=${o}
+              tabindex=${t.sortable && o === r ? "0" : "-1"}
               style=${t.width ? `width: ${t.width}` : ""}
               aria-sort=${t.sortable ? this.sortKey === t.key ? this.sortDirection === "asc" ? "ascending" : "descending" : "none" : p}
               @focus=${t.sortable ? () => {
-        this._focusedHeaderIndex = s;
+        this._focusedHeaderIndex = o;
       } : p}
             >
-              ${t.sortable ? d`
+              ${t.sortable ? c`
                     <button
                       class="sort-btn"
                       @click=${() => this._handleSort(t.key)}
@@ -468,13 +475,13 @@ let i = class extends y {
   _renderSkeletonRows() {
     return Array.from(
       { length: 3 },
-      (e) => d`
+      (e) => c`
         <tr part="tr" aria-hidden="true">
-          ${this.selectable ? d`<td part="td" class="col-checkbox">
+          ${this.selectable ? c`<td part="td" class="col-checkbox">
                 <span class="skeleton-cell" style="width:1rem;margin:auto"></span>
               </td>` : p}
           ${this._resolvedColumns.map(
-        () => d`
+        () => c`
               <td part="td">
                 <span class="skeleton-cell"></span>
               </td>
@@ -487,7 +494,7 @@ let i = class extends y {
   /** @internal */
   _renderEmptyRow() {
     const e = this._resolvedColumns.length + (this.selectable ? 1 : 0);
-    return d`
+    return c`
       <tr part="tr">
         <td part="td" colspan=${e} class="empty-cell">
           <slot name="empty">${this.emptyLabel}</slot>
@@ -506,32 +513,32 @@ let i = class extends y {
       e,
       (r, t) => this.pageSize > 0 ? (this.page - 1) * this.pageSize + t : t,
       (r, t) => {
-        const s = this.pageSize > 0 ? (this.page - 1) * this.pageSize + t : t;
-        return d`
+        const o = this.pageSize > 0 ? (this.page - 1) * this.pageSize + t : t;
+        return c`
           <tr
             part="tr"
-            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));
+            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));
         }}
           >
-            ${this.selectable ? d`
-                  <td part="td" class="col-checkbox" tabindex="-1" data-row-index=${s}>
+            ${this.selectable ? c`
+                  <td part="td" class="col-checkbox" tabindex="-1" data-row-index=${o}>
                     <input
                       type="checkbox"
                       part="checkbox"
-                      aria-label=${`Select row ${s + 1}`}
-                      .checked=${this._selectedRows.has(s)}
-                      @click=${(o) => o.stopPropagation()}
-                      @change=${(o) => this._handleSelect(s, o.target.checked)}
+                      aria-label=${`Select row ${o + 1}`}
+                      .checked=${this._selectedRows.has(o)}
+                      @click=${(s) => s.stopPropagation()}
+                      @change=${(s) => this._handleSelect(o, s.target.checked)}
                     />
                   </td>
                 ` : p}
             ${this._resolvedColumns.map(
-          (o) => d`
-                <td part="td" tabindex="-1" data-row-index=${s}>
-                  ${r[o.key] != null ? String(r[o.key]) : ""}
+          (s) => c`
+                <td part="td" tabindex="-1" data-row-index=${o}>
+                  ${r[s.key] != null ? String(r[s.key]) : ""}
                 </td>
               `
         )}
@@ -542,7 +549,7 @@ let i = class extends y {
   }
   // ─── Render ───
   render() {
-    return d`
+    return c`
       <slot name="toolbar"></slot>
       <div class="table-wrapper">
         <table
@@ -556,16 +563,16 @@ let i = class extends y {
             ${this._renderHeaderRow()}
           </thead>
           <tbody part="tbody">
-            ${this.loading ? d`<slot name="loading">${this._renderSkeletonRows()}</slot>` : this._resolvedRows.length === 0 ? this._renderEmptyRow() : this._renderDataRows()}
+            ${this.loading ? c`<slot name="loading">${this._renderSkeletonRows()}</slot>` : this._resolvedRows.length === 0 ? this._renderEmptyRow() : this._renderDataRows()}
           </tbody>
         </table>
       </div>
     `;
   }
 };
-i.styles = [v];
+i.styles = [w, y];
 n([
-  c({
+  h({
     type: Array,
     converter: {
       fromAttribute(e) {
@@ -580,7 +587,7 @@ n([
   })
 ], i.prototype, "columns", 2);
 n([
-  c({
+  h({
     type: Array,
     converter: {
       fromAttribute(e) {
@@ -595,34 +602,34 @@ n([
   })
 ], i.prototype, "rows", 2);
 n([
-  c({ type: Boolean, reflect: !0 })
+  h({ type: Boolean, reflect: !0 })
 ], i.prototype, "selectable", 2);
 n([
-  c({ type: String, attribute: "sort-key" })
+  h({ type: String, attribute: "sort-key" })
 ], i.prototype, "sortKey", 2);
 n([
-  c({ type: String, attribute: "sort-direction" })
+  h({ type: String, attribute: "sort-direction" })
 ], i.prototype, "sortDirection", 2);
 n([
-  c({ type: Boolean, reflect: !0 })
+  h({ type: Boolean, reflect: !0 })
 ], i.prototype, "loading", 2);
 n([
-  c({ type: String, attribute: "empty-label" })
+  h({ type: String, attribute: "empty-label" })
 ], i.prototype, "emptyLabel", 2);
 n([
-  c({ type: String })
+  h({ type: String })
 ], i.prototype, "label", 2);
 n([
-  c({ attribute: "select-all-label" })
+  h({ attribute: "select-all-label" })
 ], i.prototype, "selectAllLabel", 2);
 n([
-  c({ type: Boolean, reflect: !0, attribute: "sticky-header" })
+  h({ type: Boolean, reflect: !0, attribute: "sticky-header" })
 ], i.prototype, "stickyHeader", 2);
 n([
-  c({ type: Number })
+  h({ type: Number })
 ], i.prototype, "page", 2);
 n([
-  c({ type: Number, attribute: "page-size" })
+  h({ type: Number, attribute: "page-size" })
 ], i.prototype, "pageSize", 2);
 n([
   b()
@@ -642,4 +649,4 @@ i = n([
 export {
   i as H
 };
-//# sourceMappingURL=hx-data-table-CnLxo9PH.js.map
+//# sourceMappingURL=hx-data-table-Cq3t86Ic.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-data-table-Cq3t86Ic.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, #f5f8f3));\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, #f5f8f3));\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, #d6dbd5));\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, #202b39));\n    white-space: nowrap;\n  }\n\n  td {\n    color: var(--hx-data-table-cell-color, var(--hx-color-text-primary, #0d1825));\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(\n        --hx-data-table-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))\n      );\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-data-table-sort-icon-active-color, var(--hx-color-primary-500, #429797));\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, #f5f8f3));\n  }\n\n  tbody tr[aria-selected='true'] {\n    background-color: var(--hx-data-table-row-selected-bg, var(--hx-color-primary-50, #ebf8f8));\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-data-table-checkbox-accent-color, var(--hx-color-primary-500, #429797));\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, #d6dbd5) 25%,\n      var(--hx-color-neutral-100, #ebeee9) 50%,\n      var(--hx-color-neutral-200, #d6dbd5) 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(\n        --hx-data-table-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))\n      );\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, #313e4b));\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 { forcedColorsSurface } from '../../styles/forced-colors.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, forcedColorsSurface];\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","forcedColorsSurface","__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;AAAA;AAAA;AAAA;AAAA;AA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"}