@helixui/library 2.1.2 → 3.0.0-next.65

package/dist/shared/hx-stat-BTpykQAt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-stat-BTpykQAt.js","sources":["../../src/components/hx-stat/hx-stat.styles.ts","../../src/components/hx-stat/hx-stat.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStatStyles = css`\n  :host {\n    display: block;\n  }\n\n  .stat {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-stat-gap, var(--hx-space-1, 0.25rem));\n    font-family: var(--hx-stat-font-family, var(--hx-font-family-sans, sans-serif));\n    color: var(--hx-stat-color, var(--hx-color-neutral-800, #1e293b));\n  }\n\n  /* ─── Size Variants ─── */\n\n  .stat--sm .stat__value {\n    font-size: var(--hx-stat-value-font-size-sm, var(--hx-font-size-xl, 1.25rem));\n    line-height: var(--hx-line-height-tight, 1.25);\n    font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));\n  }\n\n  .stat--sm .stat__label {\n    font-size: var(--hx-stat-label-font-size-sm, var(--hx-font-size-xs, 0.75rem));\n  }\n\n  .stat--md .stat__value {\n    font-size: var(--hx-stat-value-font-size-md, var(--hx-font-size-3xl, 1.875rem));\n    line-height: var(--hx-line-height-tight, 1.25);\n    font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));\n  }\n\n  .stat--md .stat__label {\n    font-size: var(--hx-stat-label-font-size-md, var(--hx-font-size-sm, 0.875rem));\n  }\n\n  .stat--lg .stat__value {\n    font-size: var(--hx-stat-value-font-size-lg, var(--hx-font-size-5xl, 3rem));\n    line-height: var(--hx-line-height-tight, 1.25);\n    font-weight: var(--hx-stat-value-font-weight, var(--hx-font-weight-bold, 700));\n  }\n\n  .stat--lg .stat__label {\n    font-size: var(--hx-stat-label-font-size-lg, var(--hx-font-size-md, 1rem));\n  }\n\n  /* ─── Value ─── */\n\n  .stat__header {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-stat-header-gap, var(--hx-space-2, 0.5rem));\n  }\n\n  .stat__value {\n    color: var(--hx-stat-value-color, var(--hx-color-neutral-900, #0f172a));\n  }\n\n  /* ─── Label ─── */\n\n  .stat__label {\n    color: var(--hx-stat-label-color, var(--hx-color-neutral-500, #64748b));\n    font-weight: var(--hx-font-weight-normal, 400);\n  }\n\n  /* ─── Icon Slot ─── */\n\n  .stat__icon {\n    display: flex;\n    align-items: center;\n    color: var(--hx-stat-icon-color, var(--hx-color-primary-500, #2563eb));\n    flex-shrink: 0;\n  }\n\n  /* ─── Trend Indicator ─── */\n\n  .stat__trend {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    padding: var(--hx-space-0-5, 0.125rem) var(--hx-space-1-5, 0.375rem);\n  }\n\n  .stat__trend--up {\n    color: var(--hx-stat-trend-up-color, var(--hx-color-success-700, #166534));\n    background-color: var(--hx-stat-trend-up-bg, var(--hx-color-success-50, #f0fdf4));\n  }\n\n  .stat__trend--down {\n    color: var(--hx-stat-trend-down-color, var(--hx-color-error-700, #991b1b));\n    background-color: var(--hx-stat-trend-down-bg, var(--hx-color-error-50, #fef2f2));\n  }\n\n  .stat__trend-arrow {\n    width: 0.75em;\n    height: 0.75em;\n    flex-shrink: 0;\n  }\n\n  /* ─── Hidden empty slot wrappers ─── */\n\n  [hidden] {\n    display: none !important;\n  }\n\n  /* ─── Visually-hidden live region ─── */\n\n  .stat__live-region {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n  }\n\n  /* ─── Forced Colors (Windows High Contrast Mode) ─── */\n\n  @media (forced-colors: active) {\n    .stat__trend {\n      forced-color-adjust: none;\n    }\n\n    .stat__value {\n      color: CanvasText;\n    }\n\n    .stat__label {\n      color: CanvasText;\n    }\n\n    .stat__icon {\n      color: CanvasText;\n    }\n\n    .stat__trend--up {\n      background: Highlight;\n      color: HighlightText;\n      border: 1px solid Highlight;\n    }\n\n    .stat__trend--down {\n      background: ButtonText;\n      color: ButtonFace;\n      border: 1px solid ButtonText;\n    }\n\n    .stat__trend-arrow {\n      color: currentColor;\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 { devWarn } from '../../utils/dev-warn.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixStatStyles } from './hx-stat.styles.js';\n\nexport type StatSize = 'sm' | 'md' | 'lg';\nexport type StatTrend = 'up' | 'down' | 'neutral';\n\n/**\n * A static stat display component for presenting key metrics in a healthcare dashboard.\n *\n * @summary Displays a labeled metric value with optional trend indicator and icon slot.\n *\n * @tag hx-stat\n *\n * @slot icon - Optional icon displayed alongside the stat value.\n *\n * @csspart container - The outer stat container element.\n * @csspart header - The row containing the value and optional icon.\n * @csspart value - The stat value element.\n * @csspart label - The stat label element.\n * @csspart trend - The trend indicator element (only rendered when trend is not 'neutral').\n * @csspart icon - The icon slot container.\n *\n * @cssprop [--hx-stat-gap=var(--hx-space-1)] - Gap between value and label.\n * @cssprop [--hx-stat-header-gap=var(--hx-space-2)] - Gap between icon and value in the header row.\n * @cssprop [--hx-stat-color=var(--hx-color-neutral-800)] - Default text color.\n * @cssprop [--hx-stat-value-color=var(--hx-color-neutral-900)] - Value text color.\n * @cssprop [--hx-stat-label-color=var(--hx-color-neutral-500)] - Label text color.\n * @cssprop [--hx-stat-icon-color=var(--hx-color-primary-500)] - Icon color.\n * @cssprop [--hx-stat-value-font-weight=var(--hx-font-weight-bold)] - Value font weight.\n * @cssprop [--hx-stat-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-stat-value-font-size-sm=var(--hx-font-size-xl)] - Value font size at sm.\n * @cssprop [--hx-stat-value-font-size-md=var(--hx-font-size-3xl)] - Value font size at md.\n * @cssprop [--hx-stat-value-font-size-lg=var(--hx-font-size-5xl)] - Value font size at lg.\n * @cssprop [--hx-stat-label-font-size-sm=var(--hx-font-size-xs)] - Label font size at sm.\n * @cssprop [--hx-stat-label-font-size-md=var(--hx-font-size-sm)] - Label font size at md.\n * @cssprop [--hx-stat-label-font-size-lg=var(--hx-font-size-md)] - Label font size at lg.\n * @cssprop [--hx-stat-trend-up-color=var(--hx-color-success-700)] - Trend up text color.\n * @cssprop [--hx-stat-trend-up-bg=var(--hx-color-success-50)] - Trend up background color.\n * @cssprop [--hx-stat-trend-down-color=var(--hx-color-error-700)] - Trend down text color.\n * @cssprop [--hx-stat-trend-down-bg=var(--hx-color-error-50)] - Trend down background color.\n */\n@customElement('hx-stat')\nexport class HelixStat extends HelixElement {\n  static override styles = [helixStatStyles];\n\n  /**\n   * The metric label displayed below the value.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * The metric value displayed prominently.\n   * @attr value\n   */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  /**\n   * Trend direction indicator. 'neutral' hides the indicator.\n   * @attr trend\n   */\n  @property({ type: String, reflect: true })\n  trend: 'up' | 'down' | 'neutral' = 'neutral';\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   * Prefix label for trend indicator. Override for i18n.\n   * @attr label-trend\n   */\n  @property({ attribute: 'label-trend' }) labelTrend = 'Trend';\n\n  /** @internal tracks whether the \"unnamed\" devWarn has already fired this lifecycle */\n  private _hasWarnedUnnamed = false;\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-stat', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as StatSize;\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    const identityChanged = changedProperties.has('value') || changedProperties.has('label');\n    const hasValue = this.value.trim().length > 0;\n    const hasLabel = this.label.trim().length > 0;\n    if (identityChanged && !hasValue && !hasLabel && !this._hasWarnedUnnamed) {\n      this._hasWarnedUnnamed = true;\n      devWarn(\n        'hx-stat',\n        'Rendering an unnamed hx-stat; provide at least value or label for screen reader accessibility.',\n      );\n    }\n    if (hasValue || hasLabel) {\n      this._hasWarnedUnnamed = false;\n    }\n  }\n\n  // ─── Slot Detection ───\n\n  /** @internal */\n  @state() private _hasIcon = false;\n\n  /** @internal */\n  private _onIconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasIcon = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderTrendArrow(trend: 'up' | 'down'): ReturnType<typeof html> {\n    if (trend === 'up') {\n      return html`\n        <svg\n          class=\"stat__trend-arrow\"\n          aria-hidden=\"true\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M6 10V2M6 2L2 6M6 2L10 6\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      `;\n    }\n    return html`\n      <svg\n        class=\"stat__trend-arrow\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 12 12\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M6 2V10M6 10L2 6M6 10L10 6\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        />\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const containerClasses = {\n      stat: true,\n      [`stat--${this.size}`]: true,\n    };\n\n    const hasTrend = this.trend !== 'neutral';\n\n    // WCAG 1.3.1: wrap value and label in a group so screen readers announce them\n    // together with a combined accessible name instead of as disconnected text runs.\n    const groupLabel =\n      this.value && this.label\n        ? `${this.value}: ${this.label}`\n        : this.value || this.label || nothing;\n\n    // Live region text: announces value, label, and trend direction to screen\n    // readers when any of those properties change programmatically.\n    const liveParts: string[] = [];\n    const primary =\n      this.label && this.value ? `${this.label}: ${this.value}` : this.value || this.label || '';\n    if (primary) liveParts.push(primary);\n    if (hasTrend) liveParts.push(`${this.labelTrend}: ${this.trend}`);\n    const liveText = liveParts.join(', ');\n\n    return html`\n      <div\n        part=\"container\"\n        class=${classMap(containerClasses)}\n        role=\"group\"\n        aria-label=${groupLabel}\n      >\n        <span class=\"stat__live-region\" aria-live=\"polite\" aria-atomic=\"true\">${liveText}</span>\n        <div part=\"header\" class=\"stat__header\">\n          <span part=\"icon\" class=\"stat__icon\" ?hidden=${!this._hasIcon}>\n            <slot name=\"icon\" @slotchange=${this._onIconSlotChange}></slot>\n          </span>\n          <span part=\"value\" class=\"stat__value\" aria-hidden=\"true\">${this.value}</span>\n          ${hasTrend\n            ? html`\n                <span\n                  part=\"trend\"\n                  class=\"stat__trend stat__trend--${this.trend}\"\n                  role=\"img\"\n                  aria-label=\"${this.labelTrend}: ${this.trend}\"\n                >\n                  ${this._renderTrendArrow(this.trend as 'up' | 'down')}\n                </span>\n              `\n            : nothing}\n        </div>\n        <span part=\"label\" class=\"stat__label\" aria-hidden=\"true\">${this.label}</span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-stat': HelixStat;\n  }\n}\n"],"names":["helixStatStyles","css","HelixStat","HelixElement","legacySize","changedProperties","identityChanged","hasValue","hasLabel","e","slot","trend","html","containerClasses","hasTrend","groupLabel","nothing","liveParts","primary","liveText","classMap","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-status-indicator-ClWpK6zz.js → hx-status-indicator-X2QEWNFt.js}

@@ -1,7 +1,7 @@
-import { css as d, LitElement as p, nothing as v, html as u } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as s, customElement as x } from "lit/decorators.js";
-const b = d`
+import { css as h, nothing as p, html as u } from "lit";
+import { property as s, customElement as v } from "lit/decorators.js";
+import { H as x } from "./helix-element-BNEYeiys.js";
+const b = h`
   :host {
     display: inline-flex;
     align-items: center;
@@ -9,7 +9,7 @@ const b = d`
     gap: var(--hx-space-2, 0.5rem);
     position: relative;
     flex-shrink: 0;
-    --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #ced4da));
+    --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #cbd5e1));
     /* Default size (md) — always defined so .indicator never collapses to 0x0 */
     --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));
   }
@@ -73,7 +73,7 @@ const b = d`
       --hx-status-indicator-label-font-size,
       var(--hx-font-size-sm, var(--hx-text-sm, 0.875rem))
     );
-    color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #374151));
+    color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #334155));
     line-height: 1;
     white-space: nowrap;
   }
@@ -127,30 +127,43 @@ const b = d`
   :host([status='unknown']) {
     --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .indicator__dot {
+      forced-color-adjust: none;
+      border: 2px solid CanvasText;
+    }
+
+    .indicator__pulse-ring {
+      display: none;
+    }
+  }
 `;
-var _ = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (t, r, n, o) => {
-  for (var a = o > 1 ? void 0 : o ? f(r, n) : r, l = t.length - 1, c; l >= 0; l--)
-    (c = t[l]) && (a = (o ? c(r, n, a) : c(a)) || a);
-  return o && a && _(r, n, a), a;
+var _ = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (t, o, n, r) => {
+  for (var i = r > 1 ? void 0 : r ? f(o, n) : o, l = t.length - 1, c; l >= 0; l--)
+    (c = t[l]) && (i = (r ? c(o, n, i) : c(i)) || i);
+  return r && i && _(o, n, i), i;
 };
-const h = {
+const d = {
   online: "Online",
   offline: "Offline",
   away: "Away",
   busy: "Busy",
   unknown: "Unknown"
 };
-let e = class extends p {
+let e = class extends x {
   constructor() {
     super(...arguments), this.status = "unknown", this.size = "md", this.pulse = !1, this.label = "", this.showLabel = !1;
   }
   /** @internal */
   _getLabel() {
-    return this.label ? this.label : `Status: ${h[this.status] ?? "Unknown"}`;
+    return this.label ? this.label : `Status: ${d[this.status] ?? "Unknown"}`;
   }
   /** @internal */
   _getStatusText() {
-    return h[this.status] ?? "Unknown";
+    return d[this.status] ?? "Unknown";
   }
   // ─── Lifecycle ───
   connectedCallback() {
@@ -167,7 +180,7 @@ let e = class extends p {
         <div class="indicator__pulse-ring" part="pulse-ring"></div>
         <div class="indicator__dot" part="base"></div>
       </div>
-      ${this.showLabel ? u`<span class="indicator__label" part="label">${this._getStatusText()}</span>` : v}
+      ${this.showLabel ? u`<span class="indicator__label" part="label">${this._getStatusText()}</span>` : p}
       <!-- aria-live region announces dynamic status changes to screen readers -->
       <span class="indicator__live-region" aria-live="polite" aria-atomic="true"
         >${this._getLabel()}</span
@@ -176,25 +189,25 @@ let e = class extends p {
   }
 };
 e.styles = [b];
-i([
+a([
   s({ type: String, reflect: !0 })
 ], e.prototype, "status", 2);
-i([
+a([
   s({ type: String, reflect: !0, attribute: "hx-size" })
 ], e.prototype, "size", 2);
-i([
+a([
   s({ type: Boolean, reflect: !0 })
 ], e.prototype, "pulse", 2);
-i([
+a([
   s({ type: String })
 ], e.prototype, "label", 2);
-i([
+a([
   s({ type: Boolean, reflect: !0, attribute: "show-label" })
 ], e.prototype, "showLabel", 2);
-e = i([
-  x("hx-status-indicator")
+e = a([
+  v("hx-status-indicator")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-status-indicator-ClWpK6zz.js.map
+//# sourceMappingURL=hx-status-indicator-X2QEWNFt.js.map

package/dist/shared/hx-status-indicator-X2QEWNFt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-status-indicator-X2QEWNFt.js","sources":["../../src/components/hx-status-indicator/hx-status-indicator.styles.ts","../../src/components/hx-status-indicator/hx-status-indicator.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStatusIndicatorStyles = css`\n  :host {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n    position: relative;\n    flex-shrink: 0;\n    --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #cbd5e1));\n    /* Default size (md) — always defined so .indicator never collapses to 0x0 */\n    --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));\n  }\n\n  .indicator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    width: var(--_indicator-size);\n    height: var(--_indicator-size);\n    flex-shrink: 0;\n  }\n\n  .indicator__dot {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background-color: var(--_dot-color);\n    position: relative;\n    z-index: 1; /* dot above pulse ring within shadow root */\n  }\n\n  .indicator__pulse-ring {\n    display: none;\n    position: absolute;\n    inset: 0;\n    border-radius: 50%;\n    background-color: var(--hx-status-indicator-pulse-color, var(--_dot-color));\n    opacity: var(--hx-state-focus-opacity, 0.12); /* intentional: pulse ring start opacity */\n    animation: hx-status-pulse var(--hx-status-indicator-pulse-duration, 1.5s) ease-out infinite;\n    z-index: 0; /* pulse ring beneath dot within shadow root */\n  }\n\n  :host([pulse]) .indicator__pulse-ring {\n    display: block;\n  }\n\n  @keyframes hx-status-pulse {\n    0% {\n      transform: scale(1);\n      opacity: var(--hx-state-focus-opacity, 0.12); /* intentional: pulse ring start opacity */\n    }\n    100% {\n      transform: scale(var(--hx-status-indicator-pulse-scale, 2.5));\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host([pulse]) .indicator__pulse-ring {\n      animation: none;\n      display: none;\n    }\n  }\n\n  /* ─── Visible label (part=\"label\") ─── */\n\n  .indicator__label {\n    font-size: var(\n      --hx-status-indicator-label-font-size,\n      var(--hx-font-size-sm, var(--hx-text-sm, 0.875rem))\n    );\n    color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #334155));\n    line-height: 1;\n    white-space: nowrap;\n  }\n\n  /* ─── aria-live announcement region (visually hidden) ─── */\n\n  .indicator__live-region {\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  /* ─── Size Variants ─── */\n\n  :host([hx-size='sm']) {\n    --_indicator-size: var(--hx-status-indicator-size-sm, var(--hx-space-2, 0.5rem));\n  }\n\n  :host([hx-size='md']) {\n    --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));\n  }\n\n  :host([hx-size='lg']) {\n    --_indicator-size: var(--hx-status-indicator-size-lg, var(--hx-space-4, 1rem));\n  }\n\n  /* ─── Status Colors ─── */\n\n  :host([status='online']) {\n    --_dot-color: var(--hx-status-indicator-color-online, var(--hx-color-success-500));\n  }\n\n  :host([status='offline']) {\n    --_dot-color: var(--hx-status-indicator-color-offline, var(--hx-color-neutral-400));\n  }\n\n  :host([status='away']) {\n    --_dot-color: var(--hx-status-indicator-color-away, var(--hx-color-warning-500));\n  }\n\n  :host([status='busy']) {\n    --_dot-color: var(--hx-status-indicator-color-busy, var(--hx-color-error-500));\n  }\n\n  :host([status='unknown']) {\n    --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .indicator__dot {\n      forced-color-adjust: none;\n      border: 2px solid CanvasText;\n    }\n\n    .indicator__pulse-ring {\n      display: none;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixStatusIndicatorStyles } from './hx-status-indicator.styles.js';\n\nexport type StatusIndicatorStatus = 'online' | 'offline' | 'away' | 'busy' | 'unknown';\nexport type StatusIndicatorSize = 'sm' | 'md' | 'lg';\n\nconst STATUS_LABELS: Record<StatusIndicatorStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  away: 'Away',\n  busy: 'Busy',\n  unknown: 'Unknown',\n};\n\n/**\n * A colored dot/badge indicating system or entity health status.\n * Supports an animated pulse ring and an optional visible text label.\n *\n * Status is conveyed through color AND an `aria-label` on the host element.\n * When `show-label` is set, a visible text label is rendered inside the component,\n * ensuring status is not communicated by color alone (WCAG 1.4.1 — Use of Color).\n *\n * Uses `role=\"img\"` with an auto-generated `aria-label` (e.g. \"Status: Online\").\n * When used decoratively alongside visible text that conveys the same status information\n * (e.g. \"Provider is available\"), set `aria-hidden=\"true\"` on the host element to prevent\n * duplicate announcements to screen reader users. This is the recommended composition\n * pattern in healthcare dashboards.\n *\n * @remarks\n * The status vocabulary (`online`, `offline`, `away`, `busy`, `unknown`) is the intentional\n * implementation canonical form for this component. Although a prior spec draft used\n * `active/inactive/error/warning`, the current vocabulary was approved as a deliberate\n * design decision for flexibility and UX clarity in healthcare dashboard contexts.\n *\n * @summary Status indicator dot component.\n *\n * @tag hx-status-indicator\n *\n * @csspart base - The dot element.\n * @csspart pulse-ring - The animated pulse ring element.\n * @csspart label - The visible status label text element (visible when show-label is set).\n *\n * @cssprop [--hx-status-indicator-color-online] - Override color for the \"online\" status dot.\n * @cssprop [--hx-status-indicator-color-offline] - Override color for the \"offline\" status dot.\n * @cssprop [--hx-status-indicator-color-away] - Override color for the \"away\" status dot.\n * @cssprop [--hx-status-indicator-color-busy] - Override color for the \"busy\" status dot.\n * @cssprop [--hx-status-indicator-color-unknown] - Override color for the \"unknown\" status dot.\n * @cssprop [--hx-status-indicator-size-sm] - Override size for the \"sm\" variant.\n * @cssprop [--hx-status-indicator-size-md] - Override size for the \"md\" variant.\n * @cssprop [--hx-status-indicator-size-lg] - Override size for the \"lg\" variant.\n * @cssprop [--hx-status-indicator-pulse-duration] - Override pulse animation duration.\n * @cssprop [--hx-status-indicator-pulse-scale] - Override pulse animation max scale.\n * @cssprop [--hx-status-indicator-pulse-color] - Override pulse ring color independently from dot color.\n * @cssprop [--hx-status-indicator-label-color] - Override label text color.\n * @cssprop [--hx-status-indicator-label-font-size] - Override label font size.\n */\n@customElement('hx-status-indicator')\nexport class HelixStatusIndicator extends HelixElement {\n  static override styles = [helixStatusIndicatorStyles];\n\n  /**\n   * The status to display.\n   * @attr status\n   */\n  @property({ type: String, reflect: true })\n  status: 'online' | 'offline' | 'away' | 'busy' | 'unknown' = 'unknown';\n\n  /**\n   * Size of the indicator dot.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether to show an animated pulse ring around the dot.\n   * Animation is suppressed when prefers-reduced-motion is active.\n   * @attr pulse\n   * @remarks\n   * In Twig (Drupal) templates, render as a bare attribute: `pulse` — NOT `pulse=\"true\"`.\n   * The value is ignored; only attribute presence matters.\n   */\n  @property({ type: Boolean, reflect: true })\n  pulse = false;\n\n  /**\n   * Accessible label for the indicator. Defaults to \"Status: {Status}\".\n   * Set aria-hidden=\"true\" on the host when status is conveyed by adjacent text.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * When true, renders a visible text label next to the dot conveying the status.\n   * Use this to satisfy WCAG 1.4.1 (Use of Color) when the indicator is not\n   * accompanied by other visible text that conveys the same status information.\n   * @attr show-label\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-label' })\n  showLabel = false;\n\n  /** @internal */\n  private _getLabel(): string {\n    if (this.label) return this.label;\n    const statusText = STATUS_LABELS[this.status] ?? 'Unknown';\n    return `Status: ${statusText}`;\n  }\n\n  /** @internal */\n  private _getStatusText(): string {\n    return STATUS_LABELS[this.status] ?? 'Unknown';\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-status-indicator', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as StatusIndicatorSize;\n    }\n    // T3-01-4: Place role=\"img\" on the host element for robust AT traversal.\n    // Some screen reader + browser combinations skip shadow children; host-level\n    // ARIA attributes are more reliable across the flat accessibility tree.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'img');\n    }\n    this.setAttribute('aria-label', this._getLabel());\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    // Keep host aria-label in sync when status or label properties change.\n    if (changedProperties.has('status') || changedProperties.has('label')) {\n      this.setAttribute('aria-label', this._getLabel());\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"indicator\">\n        <div class=\"indicator__pulse-ring\" part=\"pulse-ring\"></div>\n        <div class=\"indicator__dot\" part=\"base\"></div>\n      </div>\n      ${this.showLabel\n        ? html`<span class=\"indicator__label\" part=\"label\">${this._getStatusText()}</span>`\n        : nothing}\n      <!-- aria-live region announces dynamic status changes to screen readers -->\n      <span class=\"indicator__live-region\" aria-live=\"polite\" aria-atomic=\"true\"\n        >${this._getLabel()}</span\n      >\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-status-indicator': HelixStatusIndicator;\n  }\n}\n"],"names":["helixStatusIndicatorStyles","css","STATUS_LABELS","HelixStatusIndicator","HelixElement","legacySize","changedProperties","html","nothing","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-step-C2Jk4mHa.js → hx-step-CRNQlmSo.js}

@@ -1,6 +1,6 @@
-import { css as x, LitElement as v, nothing as f, html as d } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
+import { css as x, nothing as f, html as d } from "lit";
 import { property as a, customElement as u } from "lit/decorators.js";
+import { H as v } from "./helix-element-BNEYeiys.js";
 const m = x`
   :host {
     display: block;
@@ -53,28 +53,40 @@ const m = x`
     --hx-steps-label-font-size: var(--hx-font-size-md, 1rem);
     --hx-steps-description-font-size: var(--hx-font-size-sm, 0.875rem);
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /*
+   * hx-steps is a layout container — forced-colors state is handled
+   * by each hx-step child element's own forced-colors block.
+   */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 `;
-var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (t, i, r, s) => {
-  for (var e = s > 1 ? void 0 : s ? _(i, r) : i, l = t.length - 1, h; l >= 0; l--)
-    (h = t[l]) && (e = (s ? h(i, r, e) : h(e)) || e);
-  return s && e && b(i, r, e), e;
+var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (t, i, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? _(i, s) : i, l = t.length - 1, c; l >= 0; l--)
+    (c = t[l]) && (e = (r ? c(i, s, e) : c(e)) || e);
+  return r && e && b(i, s, e), e;
 };
-let c = class extends v {
+let h = class extends v {
   constructor() {
-    super(...arguments), this.orientation = "horizontal", this.size = "md", this.ariaLabel = null, this._handleSlotChange = () => {
+    super(...arguments), this.orientation = "horizontal", this.size = "md", this.accessibleLabel = null, this._handleSlotChange = () => {
       this._syncChildren();
     }, this._handleStepClickInternal = (t) => {
       t.stopPropagation();
-      const i = this._getSteps(), r = t.composedPath().find(
+      const i = this._getSteps(), s = t.composedPath().find(
         (e) => e instanceof Element && e.tagName.toLowerCase() === "hx-step"
       );
-      if (!r) return;
-      const s = i.indexOf(r);
+      if (!s) return;
+      const r = i.indexOf(s);
       this.dispatchEvent(
         new CustomEvent("hx-step-click", {
           bubbles: !0,
           composed: !0,
-          detail: { step: r, index: s }
+          detail: { step: s, index: r }
         })
       );
     };
@@ -83,7 +95,7 @@ let c = class extends v {
   connectedCallback() {
     super.connectedCallback();
     const t = this.getAttribute("size");
-    t !== null && !this.hasAttribute("hx-size") && (this.size = t), this.ariaLabel, this.hasAttribute("role") || this.setAttribute("role", "none"), this.addEventListener("hx-step-click-internal", this._handleStepClickInternal);
+    t !== null && !this.hasAttribute("hx-size") && (this.size = t), this.accessibleLabel, this.hasAttribute("role") || this.setAttribute("role", "none"), this.addEventListener("hx-step-click-internal", this._handleStepClickInternal);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("hx-step-click-internal", this._handleStepClickInternal);
@@ -101,32 +113,32 @@ let c = class extends v {
   }
   /** @internal */
   _syncChildren() {
-    this._getSteps().forEach((i, r) => {
-      i.orientation = this.orientation, i.size = this.size, i.index = r;
+    this._getSteps().forEach((i, s) => {
+      i.orientation = this.orientation, i.size = this.size, i.index = s;
     });
   }
   // ─── Render ───
   render() {
     return d`
-      <div part="base" class="steps" role="list" aria-label=${this.ariaLabel ?? f}>
+      <div part="base" class="steps" role="list" aria-label=${this.accessibleLabel ?? f}>
         <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
     `;
   }
 };
-c.styles = [m];
+h.styles = [m];
 p([
   a({ type: String, reflect: !0 })
-], c.prototype, "orientation", 2);
+], h.prototype, "orientation", 2);
 p([
   a({ type: String, reflect: !0, attribute: "hx-size" })
-], c.prototype, "size", 2);
+], h.prototype, "size", 2);
 p([
-  a({ type: String, attribute: "aria-label" })
-], c.prototype, "ariaLabel", 2);
-c = p([
+  a({ type: String, attribute: "accessible-label" })
+], h.prototype, "accessibleLabel", 2);
+h = p([
   u("hx-steps")
-], c);
+], h);
 const g = x`
   :host {
     display: flex;
@@ -190,7 +202,7 @@ const g = x`
     color: var(--hx-color-neutral-500);
     font-size: var(--hx-steps-indicator-font-size, var(--hx-font-size-sm));
     font-weight: var(--hx-font-weight-semibold);
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-steps-font-family, var(--hx-font-family-sans));
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
       border-color var(--hx-transition-fast, 150ms ease),
@@ -228,7 +240,7 @@ const g = x`
   }
 
   .step__label {
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-steps-font-family, var(--hx-font-family-sans));
     font-size: var(--hx-steps-label-font-size, var(--hx-font-size-sm));
     font-weight: var(--hx-font-weight-medium);
     color: var(--hx-steps-label-color, var(--hx-color-neutral-600));
@@ -236,7 +248,7 @@ const g = x`
   }
 
   .step__description {
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-steps-font-family, var(--hx-font-family-sans));
     font-size: var(--hx-steps-description-font-size, var(--hx-font-size-xs));
     color: var(--hx-steps-description-color, var(--hx-color-neutral-500));
     margin-top: var(--hx-space-1, 0.25rem);
@@ -347,11 +359,50 @@ const g = x`
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .step__indicator {
+      border-color: CanvasText;
+    }
+
+    :host([status='active']) .step__indicator {
+      border-color: Highlight;
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    :host([status='complete']) .step__indicator {
+      border-color: Highlight;
+      background-color: Highlight;
+      color: HighlightText;
+    }
+
+    :host([status='error']) .step__indicator {
+      border-color: LinkText;
+      background-color: LinkText;
+      color: HighlightText;
+    }
+
+    .step__connector {
+      background-color: CanvasText;
+    }
+
+    :host([status='complete']) .step__connector {
+      background-color: Highlight;
+    }
+
+    :host(:focus-visible) .step__indicator {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
 `;
-var y = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (t, i, r, s) => {
-  for (var e = s > 1 ? void 0 : s ? z(i, r) : i, l = t.length - 1, h; l >= 0; l--)
-    (h = t[l]) && (e = (s ? h(i, r, e) : h(e)) || e);
-  return s && e && y(i, r, e), e;
+var y = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (t, i, s, r) => {
+  for (var e = r > 1 ? void 0 : r ? z(i, s) : i, l = t.length - 1, c; l >= 0; l--)
+    (c = t[l]) && (e = (r ? c(i, s, e) : c(e)) || e);
+  return r && e && y(i, s, e), e;
 };
 let o = class extends v {
   constructor() {
@@ -467,6 +518,6 @@ o = n([
 ], o);
 export {
   o as H,
-  c as a
+  h as a
 };
-//# sourceMappingURL=hx-step-C2Jk4mHa.js.map
+//# sourceMappingURL=hx-step-CRNQlmSo.js.map

package/dist/shared/hx-step-CRNQlmSo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-step-CRNQlmSo.js","sources":["../../src/components/hx-steps/hx-steps.styles.ts","../../src/components/hx-steps/hx-steps.ts","../../src/components/hx-steps/hx-step.styles.ts","../../src/components/hx-steps/hx-step.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStepsStyles = css`\n  :host {\n    display: block;\n\n    /* ─── Size defaults (md) ─── */\n    --hx-steps-indicator-size: var(--hx-size-8, 2rem);\n    --hx-steps-indicator-font-size: var(--hx-font-size-sm, 0.875rem);\n    --hx-steps-indicator-icon-size: var(--hx-size-4, 1rem);\n    --hx-steps-label-font-size: var(--hx-font-size-sm, 0.875rem);\n    --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);\n\n    /* ─── Item layout defaults (horizontal) ─── */\n    --hx-steps-item-flex: 1;\n    --hx-steps-item-width: auto;\n  }\n\n  .steps {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  /* ─── Orientation: vertical ─── */\n\n  :host([orientation='vertical']) {\n    --hx-steps-item-flex: initial;\n    --hx-steps-item-width: 100%;\n  }\n\n  :host([orientation='vertical']) .steps {\n    flex-direction: column;\n  }\n\n  /* ─── Size: sm ─── */\n\n  :host([size='sm']) {\n    --hx-steps-indicator-size: var(--hx-size-6, 1.5rem);\n    --hx-steps-indicator-font-size: var(--hx-font-size-xs, 0.75rem);\n    --hx-steps-indicator-icon-size: var(--hx-space-3, 0.75rem);\n    --hx-steps-label-font-size: var(--hx-font-size-xs, 0.75rem);\n    --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  /* ─── Size: lg ─── */\n\n  :host([size='lg']) {\n    --hx-steps-indicator-size: var(--hx-size-10, 2.5rem);\n    --hx-steps-indicator-font-size: var(--hx-font-size-md, 1rem);\n    --hx-steps-indicator-icon-size: var(--hx-size-5, 1.25rem);\n    --hx-steps-label-font-size: var(--hx-font-size-md, 1rem);\n    --hx-steps-description-font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  /*\n   * hx-steps is a layout container — forced-colors state is handled\n   * by each hx-step child element's own forced-colors block.\n   */\n  @media (forced-colors: active) {\n    :host {\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 } from 'lit/decorators.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixStepsStyles } from './hx-steps.styles.js';\nimport type { HelixStep } from './hx-step.js';\n\n/**\n * A multi-step wizard / stepper progress indicator. Renders a sequence of\n * `<hx-step>` children as a horizontal or vertical step tracker with connector\n * lines and status-based styling.\n *\n * Provide an `aria-label` on `<hx-steps>` to describe the step process for assistive technology.\n *\n * @summary Multi-step progress indicator container.\n *\n * @tag hx-steps\n *\n * @slot - Default slot for `<hx-step>` elements.\n *\n * @fires {CustomEvent<{step: HelixStep, index: number}>} hx-step-click - Dispatched when\n *   a step is clicked. Detail contains the clicked `step` element and its zero-based `index`.\n *\n * @csspart base - The inner wrapper element.\n *\n * @cssprop [--hx-steps-indicator-size=2rem] - Step indicator circle diameter.\n * @cssprop [--hx-steps-connector-color=var(--hx-color-neutral-200)] - Connector line color.\n * @cssprop [--hx-steps-label-color=var(--hx-color-neutral-600)] - Step label text color.\n * @cssprop [--hx-steps-description-color=var(--hx-color-neutral-500)] - Step description color.\n */\n@customElement('hx-steps')\nexport class HelixSteps extends HelixElement {\n  static override styles = [helixStepsStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Layout orientation of the steps.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Size variant of the steps.\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 for the list. Forwarded to the inner list element.\n   * Uses `accessible-label` attribute instead of `aria-label` to avoid\n   * ARIAMixin shadowing on the host element.\n   *\n   * Note: `mixinDelegatesAria` is not applied to this component because the\n   * `accessible-label` attribute approach avoids the ARIAMixin property conflict\n   * without requiring mixin overhead.\n   * @attr accessible-label\n   */\n  @property({ type: String, attribute: 'accessible-label' })\n  accessibleLabel: string | null = null;\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-steps', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as 'sm' | 'md' | 'lg';\n    }\n    // STEPS-002: WCAG 2.1 SC 4.1.2 — the inner list must have an accessible name.\n    // Warn developers when aria-label is missing so the list is not anonymous.\n    if (!this.accessibleLabel) {\n      devWarn(\n        'hx-steps',\n        'An \"aria-label\" attribute is required to provide an accessible name for the steps list (WCAG 2.1 SC 4.1.2).',\n      );\n    }\n    // WCAG 4.1.2: suppress the host element's implicit ARIA role so only the\n    // inner div[role=\"list\"] is announced. Mirrors the hx-action-bar pattern.\n    // Without this, the consumer's aria-label attribute on the host causes dual\n    // announcement — once for the host element and once for the inner list.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'none');\n    }\n    this.addEventListener('hx-step-click-internal', this._handleStepClickInternal);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('hx-step-click-internal', this._handleStepClickInternal);\n  }\n\n  override firstUpdated(): void {\n    this._syncChildren();\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('orientation') || changedProperties.has('size')) {\n      this._syncChildren();\n    }\n  }\n\n  // ─── Child Sync ───\n\n  /** @internal */\n  private _getSteps(): HelixStep[] {\n    return Array.from(this.querySelectorAll(':scope > hx-step')) as HelixStep[];\n  }\n\n  /** @internal */\n  private _syncChildren(): void {\n    const steps = this._getSteps();\n    steps.forEach((step, i) => {\n      step.orientation = this.orientation;\n      step.size = this.size;\n      step.index = i;\n    });\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleSlotChange = (): void => {\n    this._syncChildren();\n  };\n\n  /** @internal */\n  private _handleStepClickInternal = (e: Event): void => {\n    e.stopPropagation();\n    const steps = this._getSteps();\n    const step = e\n      .composedPath()\n      .find(\n        (el): el is HelixStep => el instanceof Element && el.tagName.toLowerCase() === 'hx-step',\n      );\n    if (!step) return;\n    const index = steps.indexOf(step);\n\n    /**\n     * Dispatched when a step is clicked.\n     * @event hx-step-click\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ step: HelixStep; index: number }>('hx-step-click', {\n        bubbles: true,\n        composed: true,\n        detail: { step, index },\n      }),\n    );\n  };\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"steps\" role=\"list\" aria-label=${this.accessibleLabel ?? nothing}>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-steps': HelixSteps;\n  }\n}\n","import { css } from 'lit';\n\nexport const helixStepStyles = css`\n  :host {\n    display: flex;\n    flex: var(--hx-steps-item-flex, 1);\n    width: var(--hx-steps-item-width, auto);\n    min-width: 0;\n  }\n\n  /* ─── Visually Hidden (SR only) ─── */\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-width: 0;\n  }\n\n  /* ─── Step Wrapper ─── */\n\n  .step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n    cursor: pointer;\n  }\n\n  /* ─── Focus ─── */\n\n  :host(:focus-visible) .step__indicator {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-color-primary-500);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Track (indicator + connector) ─── */\n\n  .step__track {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    width: 100%;\n  }\n\n  /* ─── Indicator ─── */\n\n  .step__indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--hx-steps-indicator-size, 2rem);\n    height: var(--hx-steps-indicator-size, 2rem);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    border: var(--hx-border-width-medium, 2px) solid var(--hx-color-neutral-300);\n    background-color: var(--hx-color-neutral-0);\n    color: var(--hx-color-neutral-500);\n    font-size: var(--hx-steps-indicator-font-size, var(--hx-font-size-sm));\n    font-weight: var(--hx-font-weight-semibold);\n    font-family: var(--hx-steps-font-family, var(--hx-font-family-sans));\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      color var(--hx-transition-fast, 150ms ease);\n    position: relative;\n    z-index: 1;\n  }\n\n  .step__indicator svg {\n    width: var(--hx-steps-indicator-icon-size, 1rem);\n    height: var(--hx-steps-indicator-icon-size, 1rem);\n  }\n\n  /* ─── Connector ─── */\n\n  .step__connector {\n    flex: 1;\n    height: var(--hx-steps-connector-thickness, var(--hx-border-width, 2px));\n    min-width: 0;\n    background-color: var(--hx-steps-connector-color, var(--hx-color-neutral-200));\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  :host(:last-child) .step__connector {\n    display: none;\n  }\n\n  /* ─── Label Area ─── */\n\n  .step__label-area {\n    text-align: center;\n    margin-top: var(--hx-space-2, 0.5rem);\n    width: 100%;\n    padding: 0 var(--hx-space-1, 0.25rem);\n  }\n\n  .step__label {\n    font-family: var(--hx-steps-font-family, var(--hx-font-family-sans));\n    font-size: var(--hx-steps-label-font-size, var(--hx-font-size-sm));\n    font-weight: var(--hx-font-weight-medium);\n    color: var(--hx-steps-label-color, var(--hx-color-neutral-600));\n    line-height: var(--hx-line-height-tight, 1.25);\n  }\n\n  .step__description {\n    font-family: var(--hx-steps-font-family, var(--hx-font-family-sans));\n    font-size: var(--hx-steps-description-font-size, var(--hx-font-size-xs));\n    color: var(--hx-steps-description-color, var(--hx-color-neutral-500));\n    margin-top: var(--hx-space-1, 0.25rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Status: active ─── */\n\n  /* Active: outlined indicator (in-progress) — visually distinct from complete (filled) */\n  :host([status='active']) .step__indicator {\n    border-color: var(--hx-color-primary-500);\n    background-color: var(--hx-color-primary-500);\n    color: var(--hx-color-neutral-0);\n  }\n\n  :host([status='active']) .step__label {\n    color: var(--hx-color-primary-700);\n    font-weight: var(--hx-font-weight-semibold);\n  }\n\n  /* ─── Status: complete ─── */\n\n  /* Complete: filled indicator with darker shade — visually distinct from active */\n  :host([status='complete']) .step__indicator {\n    border-color: var(--hx-color-primary-700);\n    background-color: var(--hx-color-primary-700);\n    color: var(--hx-color-neutral-0);\n  }\n\n  :host([status='complete']) .step__connector {\n    background-color: var(--hx-steps-connector-complete-color, var(--hx-color-primary-500));\n  }\n\n  :host([status='complete']) .step__label {\n    color: var(--hx-color-neutral-700);\n  }\n\n  /* ─── Status: error ─── */\n\n  :host([status='error']) .step__indicator {\n    border-color: var(--hx-color-error-500);\n    background-color: var(--hx-color-error-500);\n    color: var(--hx-color-neutral-0);\n  }\n\n  :host([status='error']) .step__label {\n    color: var(--hx-color-error-700);\n  }\n\n  /* ─── Status: disabled ─── */\n\n  :host([disabled]) .step {\n    cursor: not-allowed;\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  :host([disabled]) .step__indicator {\n    border-color: var(--hx-color-neutral-300);\n    background-color: var(--hx-color-neutral-100);\n    color: var(--hx-color-neutral-400);\n  }\n\n  /* ─── Vertical Layout ─── */\n\n  :host([orientation='vertical']) {\n    flex: initial;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    flex-direction: row;\n    align-items: flex-start;\n    gap: var(--hx-space-3, 0.75rem);\n  }\n\n  :host([orientation='vertical']) .step__track {\n    flex-direction: column;\n    align-items: center;\n    width: auto;\n    flex-shrink: 0;\n  }\n\n  :host([orientation='vertical']) .step__connector {\n    width: var(--hx-steps-connector-thickness, var(--hx-border-width, 2px));\n    height: auto;\n    min-height: var(--hx-space-8, 2rem);\n    flex: 1;\n  }\n\n  :host([orientation='vertical']) .step__label-area {\n    text-align: start;\n    margin-top: 0;\n    padding-bottom: var(--hx-space-4, 1rem);\n    padding-inline-start: 0;\n  }\n\n  :host([orientation='vertical']:last-child) .step__label-area {\n    padding-bottom: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .step__indicator {\n      transition: none;\n    }\n\n    .step__connector {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .step__indicator {\n      border-color: CanvasText;\n    }\n\n    :host([status='active']) .step__indicator {\n      border-color: Highlight;\n      background-color: Highlight;\n      color: HighlightText;\n    }\n\n    :host([status='complete']) .step__indicator {\n      border-color: Highlight;\n      background-color: Highlight;\n      color: HighlightText;\n    }\n\n    :host([status='error']) .step__indicator {\n      border-color: LinkText;\n      background-color: LinkText;\n      color: HighlightText;\n    }\n\n    .step__connector {\n      background-color: CanvasText;\n    }\n\n    :host([status='complete']) .step__connector {\n      background-color: Highlight;\n    }\n\n    :host(:focus-visible) .step__indicator {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n`;\n","import { html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixStepStyles } from './hx-step.styles.js';\n\n/**\n * An individual step, designed to be used inside an `<hx-steps>` container.\n * Represents a single step in a multi-step wizard or progress indicator.\n *\n * @summary Individual step item within an `<hx-steps>` progress indicator.\n *\n * @tag hx-step\n *\n * @slot icon - Custom icon for the step indicator. Shown when status is `pending` or `active`.\n * @slot label - Step label text. Falls back to the `label` property.\n * @slot description - Step description text. Falls back to the `description` property.\n *\n * @csspart base - The outermost wrapper element.\n * @csspart indicator - The circular step indicator.\n * @csspart connector - The line connecting this step to the next.\n * @csspart label - The step label element.\n * @csspart description - The step description element.\n *\n * @cssprop [--hx-steps-indicator-size=2rem] - Indicator circle diameter.\n * @cssprop [--hx-steps-indicator-font-size=var(--hx-font-size-sm)] - Indicator text size.\n * @cssprop [--hx-steps-indicator-icon-size=1rem] - Indicator icon size.\n * @cssprop [--hx-steps-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-steps-description-font-size=var(--hx-font-size-xs)] - Description font size.\n * @cssprop [--hx-steps-connector-color=var(--hx-color-neutral-200)] - Connector line color.\n * @cssprop [--hx-steps-connector-complete-color=var(--hx-color-primary-500)] - Connector color when step is complete.\n * @cssprop [--hx-steps-connector-thickness=var(--hx-border-width,2px)] - Connector line thickness.\n * @cssprop [--hx-steps-label-color=var(--hx-color-neutral-600)] - Label text color.\n * @cssprop [--hx-steps-description-color=var(--hx-color-neutral-500)] - Description text color.\n */\n@customElement('hx-step')\nexport class HelixStep extends HelixElement {\n  static override styles = [helixStepStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * The step label text.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * Current status of the step.\n   * @attr status\n   */\n  @property({ type: String, reflect: true })\n  status: 'pending' | 'active' | 'complete' | 'error' = 'pending';\n\n  /**\n   * Optional description text shown below the label.\n   * @attr description\n   */\n  @property({ type: String, reflect: true })\n  description = '';\n\n  /**\n   * Whether the step is disabled and non-interactive.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  // ─── Internal Properties (set by parent hx-steps) ───\n\n  /**\n   * Layout orientation. Set by the parent `<hx-steps>` container via JS property.\n   * Do not set this attribute directly on `<hx-step>` — use the `orientation`\n   * property on the parent `<hx-steps>` container instead. The parent will\n   * propagate the value to all child steps via `_syncChildren()`.\n   * @internal\n   */\n  @property({ attribute: false })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Size variant. Set by the parent `<hx-steps>` container via JS property.\n   * Do not set this attribute directly on `<hx-step>` — use the `size` property\n   * on the parent `<hx-steps>` container instead. The parent will propagate the\n   * value to all child steps via `_syncChildren()`.\n   * @internal\n   */\n  @property({ attribute: false })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Zero-based index of this step. Set by the parent `<hx-steps>` container.\n   * @internal\n   */\n  @property({ type: Number })\n  index = 0;\n\n  // ─── Internal State ───\n\n  /**\n   * Text for the aria-live region, updated on status transitions.\n   * Non-reactive: computed in willUpdate() to avoid an extra render cycle.\n   * @internal\n   */\n  private _liveMessage = '';\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    this.setAttribute('tabindex', this.disabled ? '-1' : '0');\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('status')) {\n      // STEPS-003: announce status transitions to screen readers via aria-live region.\n      // Only announce on transitions (not initial render) by checking the previous value.\n      // Using a non-reactive field here avoids scheduling an extra render cycle.\n      const prev = changedProperties.get('status');\n      if (prev !== undefined) {\n        if (this.status === 'complete') {\n          this._liveMessage = 'Complete';\n        } else if (this.status === 'error') {\n          this._liveMessage = 'Error';\n        } else {\n          this._liveMessage = '';\n        }\n      }\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('status')) {\n      if (this.status === 'active') {\n        this.setAttribute('aria-current', 'step');\n      } else {\n        this.removeAttribute('aria-current');\n      }\n    }\n    if (changedProperties.has('disabled')) {\n      if (this.disabled) {\n        this.setAttribute('tabindex', '-1');\n        this.setAttribute('aria-disabled', 'true');\n      } else {\n        this.setAttribute('tabindex', '0');\n        this.removeAttribute('aria-disabled');\n      }\n    }\n    if (changedProperties.has('orientation')) {\n      this.setAttribute('orientation', this.orientation);\n    }\n    if (changedProperties.has('size')) {\n      this.setAttribute('size', this.size);\n    }\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this._handleClick();\n    }\n  };\n\n  /** @internal */\n  private _handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    /**\n     * Internal event dispatched to signal step click to the parent container.\n     * @internal\n     */\n    this.dispatchEvent(\n      new CustomEvent<void>('hx-step-click-internal', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderCheckmark() {\n    return html`\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path d=\"M20 6L9 17l-5-5\" />\n      </svg>\n      <span class=\"sr-only\">Complete</span>\n    `;\n  }\n\n  /** @internal */\n  private _renderXMark() {\n    return html`\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2.5\"\n        stroke-linecap=\"round\"\n      >\n        <path d=\"M18 6L6 18M6 6l12 12\" />\n      </svg>\n      <span class=\"sr-only\">Error</span>\n    `;\n  }\n\n  /** @internal */\n  private _renderIndicatorContent() {\n    if (this.status === 'complete') {\n      return this._renderCheckmark();\n    }\n    if (this.status === 'error') {\n      return this._renderXMark();\n    }\n    return html`<slot name=\"icon\">${this.index + 1}</slot>`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"step\" @click=${this._handleClick}>\n        <div class=\"step__track\">\n          <div part=\"indicator\" class=\"step__indicator\">${this._renderIndicatorContent()}</div>\n          <div part=\"connector\" class=\"step__connector\" aria-hidden=\"true\"></div>\n        </div>\n        <div class=\"step__label-area\">\n          <div part=\"label\" class=\"step__label\">\n            <slot name=\"label\">${this.label}</slot>\n          </div>\n          <div part=\"description\" class=\"step__description\">\n            <slot name=\"description\">${this.description}</slot>\n          </div>\n        </div>\n      </div>\n      <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">${this._liveMessage}</div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-step': HelixStep;\n  }\n}\n"],"names":["helixStepsStyles","css","HelixSteps","HelixElement","e","steps","step","el","index","legacySize","changedProperties","i","html","nothing","__decorateClass","property","customElement","helixStepStyles","HelixStep","event"],"mappings":";;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC8BzB,IAAMC,IAAN,cAAyBC,EAAa;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAA,cAAyC,cAOzC,KAAA,OAA2B,MAa3B,KAAA,kBAAiC,MAmEjC,KAAQ,oBAAoB,MAAY;AACtC,WAAK,cAAA;AAAA,IACP,GAGA,KAAQ,2BAA2B,CAACC,MAAmB;AACrD,MAAAA,EAAE,gBAAA;AACF,YAAMC,IAAQ,KAAK,UAAA,GACbC,IAAOF,EACV,aAAA,EACA;AAAA,QACC,CAACG,MAAwBA,aAAc,WAAWA,EAAG,QAAQ,kBAAkB;AAAA,MAAA;AAEnF,UAAI,CAACD,EAAM;AACX,YAAME,IAAQH,EAAM,QAAQC,CAAI;AAMhC,WAAK;AAAA,QACH,IAAI,YAAgD,iBAAiB;AAAA,UACnE,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ,EAAE,MAAAA,GAAM,OAAAE,EAAA;AAAA,QAAM,CACvB;AAAA,MAAA;AAAA,IAEL;AAAA,EAAA;AAAA;AAAA,EA1FS,oBAA0B;AACjC,UAAM,kBAAA;AAGN,UAAMC,IAAa,KAAK,aAAa,MAAM;AAC3C,IAAIA,MAAe,QAAQ,CAAC,KAAK,aAAa,SAAS,MAErD,KAAK,OAAOA,IAIT,KAAK,iBAUL,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,MAAM,GAElC,KAAK,iBAAiB,0BAA0B,KAAK,wBAAwB;AAAA,EAC/E;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,oBAAoB,0BAA0B,KAAK,wBAAwB;AAAA,EAClF;AAAA,EAES,eAAqB;AAC5B,SAAK,cAAA;AAAA,EACP;AAAA,EAES,QAAQC,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,IAC3BA,EAAkB,IAAI,aAAa,KAAKA,EAAkB,IAAI,MAAM,MACtE,KAAK,cAAA;AAAA,EAET;AAAA;AAAA;AAAA,EAKQ,YAAyB;AAC/B,WAAO,MAAM,KAAK,KAAK,iBAAiB,kBAAkB,CAAC;AAAA,EAC7D;AAAA;AAAA,EAGQ,gBAAsB;AAE5B,IADc,KAAK,UAAA,EACb,QAAQ,CAACJ,GAAMK,MAAM;AACzB,MAAAL,EAAK,cAAc,KAAK,aACxBA,EAAK,OAAO,KAAK,MACjBA,EAAK,QAAQK;AAAA,IACf,CAAC;AAAA,EACH;AAAA;AAAA,EAoCS,SAAS;AAChB,WAAOC;AAAA,8DACmD,KAAK,mBAAmBC,CAAO;AAAA,4BACjE,KAAK,iBAAiB;AAAA;AAAA;AAAA,EAGhD;AACF;AAvIaX,EACK,SAAS,CAACF,CAAgB;AAS1Cc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAT9Bb,EAUX,WAAA,eAAA,CAAA;AAOAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,WAAW;AAAA,GAhBpDb,EAiBX,WAAA,QAAA,CAAA;AAaAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,oBAAoB;AAAA,GA7B9Cb,EA8BX,WAAA,mBAAA,CAAA;AA9BWA,IAANY,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZd,CAAA;AC9BN,MAAMe,IAAkBhB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACkCxB,IAAMiB,IAAN,cAAwBf,EAAa;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAA,QAAQ,IAOR,KAAA,SAAsD,WAOtD,KAAA,cAAc,IAOd,KAAA,WAAW,IAYX,KAAA,cAAyC,cAUzC,KAAA,OAA2B,MAO3B,KAAA,QAAQ,GASR,KAAQ,eAAe,IAiEvB,KAAQ,iBAAiB,CAACgB,MAA+B;AACvD,OAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzCA,EAAM,eAAA,GACN,KAAK,aAAA;AAAA,IAET;AAAA,EAAA;AAAA;AAAA,EAlES,oBAA0B;AACjC,UAAM,kBAAA,GACD,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,UAAU,GAEtC,KAAK,aAAa,YAAY,KAAK,WAAW,OAAO,GAAG,GACxD,KAAK,iBAAiB,WAAW,KAAK,cAAc;AAAA,EACtD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,oBAAoB,WAAW,KAAK,cAAc;AAAA,EACzD;AAAA,EAES,WAAWT,GAA+C;AACjE,IAAIA,EAAkB,IAAI,QAAQ,KAInBA,EAAkB,IAAI,QAAQ,MAC9B,WACP,KAAK,WAAW,aAClB,KAAK,eAAe,aACX,KAAK,WAAW,UACzB,KAAK,eAAe,UAEpB,KAAK,eAAe;AAAA,EAI5B;AAAA,EAES,QAAQA,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,GAC3BA,EAAkB,IAAI,QAAQ,MAC5B,KAAK,WAAW,WAClB,KAAK,aAAa,gBAAgB,MAAM,IAExC,KAAK,gBAAgB,cAAc,IAGnCA,EAAkB,IAAI,UAAU,MAC9B,KAAK,YACP,KAAK,aAAa,YAAY,IAAI,GAClC,KAAK,aAAa,iBAAiB,MAAM,MAEzC,KAAK,aAAa,YAAY,GAAG,GACjC,KAAK,gBAAgB,eAAe,KAGpCA,EAAkB,IAAI,aAAa,KACrC,KAAK,aAAa,eAAe,KAAK,WAAW,GAE/CA,EAAkB,IAAI,MAAM,KAC9B,KAAK,aAAa,QAAQ,KAAK,IAAI;AAAA,EAEvC;AAAA;AAAA,EAaQ,eAAqB;AAC3B,IAAI,KAAK,YAQT,KAAK;AAAA,MACH,IAAI,YAAkB,0BAA0B;AAAA,QAC9C,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA;AAAA,EAKQ,mBAAmB;AACzB,WAAOE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcT;AAAA;AAAA,EAGQ,eAAe;AACrB,WAAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaT;AAAA;AAAA,EAGQ,0BAA0B;AAChC,WAAI,KAAK,WAAW,aACX,KAAK,iBAAA,IAEV,KAAK,WAAW,UACX,KAAK,aAAA,IAEPA,sBAAyB,KAAK,QAAQ,CAAC;AAAA,EAChD;AAAA;AAAA,EAIS,SAAS;AAChB,WAAOA;AAAA,6CACkC,KAAK,YAAY;AAAA;AAAA,0DAEJ,KAAK,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKvD,KAAK,KAAK;AAAA;AAAA;AAAA,uCAGJ,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA,mEAIY,KAAK,YAAY;AAAA;AAAA,EAElF;AACF;AApOaM,EACK,SAAS,CAACD,CAAe;AASzCH,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAT9BG,EAUX,WAAA,SAAA,CAAA;AAOAJ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhB9BG,EAiBX,WAAA,UAAA,CAAA;AAOAJ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvB9BG,EAwBX,WAAA,eAAA,CAAA;AAOAJ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9B/BG,EA+BX,WAAA,YAAA,CAAA;AAYAJ,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GA1CnBG,EA2CX,WAAA,eAAA,CAAA;AAUAJ,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GApDnBG,EAqDX,WAAA,QAAA,CAAA;AAOAJ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3DfG,EA4DX,WAAA,SAAA,CAAA;AA5DWA,IAANJ,EAAA;AAAA,EADNE,EAAc,SAAS;AAAA,GACXE,CAAA;"}

package/dist/shared/{hx-structured-list-DKlrv7kS.js → hx-structured-list-CqNbaEXg.js}

@@ -1,6 +1,6 @@
-import { css as p, LitElement as h, nothing as b, html as u } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as l, customElement as v } from "lit/decorators.js";
+import { css as p, nothing as b, html as h } from "lit";
+import { property as l, customElement as u } from "lit/decorators.js";
+import { H as v } from "./helix-element-BNEYeiys.js";
 const x = p`
   :host {
     display: block;
@@ -35,6 +35,14 @@ const x = p`
   :host([striped]) ::slotted(hx-structured-list-row:nth-of-type(even)) {
     background: var(--_bg-stripe);
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    :host([bordered]) .list {
+      border-color: CanvasText;
+    }
+  }
 `, m = p`
   :host {
     display: block;
@@ -56,12 +64,12 @@ const x = p`
 
   .row__label {
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #374151));
+    color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #334155));
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
   .row__value {
-    color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #0f172a));
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
@@ -74,13 +82,21 @@ const x = p`
   .row__actions:empty {
     display: none;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    :host(:not(:last-of-type)) .row {
+      border-bottom-color: CanvasText;
+    }
+  }
 `;
-var _ = Object.defineProperty, f = Object.getOwnPropertyDescriptor, t = (c, s, a, o) => {
-  for (var r = o > 1 ? void 0 : o ? f(s, a) : s, i = c.length - 1, d; i >= 0; i--)
-    (d = c[i]) && (r = (o ? d(s, a, r) : d(r)) || r);
-  return o && r && _(s, a, r), r;
+var f = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (c, o, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? _(o, a) : o, i = c.length - 1, d; i >= 0; i--)
+    (d = c[i]) && (r = (s ? d(o, a, r) : d(r)) || r);
+  return s && r && f(o, a, r), r;
 };
-let e = class extends h {
+let e = class extends v {
   constructor() {
     super(...arguments), this.label = "", this.bordered = !1, this.condensed = !1, this.striped = !1;
   }
@@ -88,7 +104,7 @@ let e = class extends h {
     super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "list");
   }
   render() {
-    return u`
+    return h`
       <div part="base" class="list" aria-label=${this.label || b}>
         <slot></slot>
       </div>
@@ -109,14 +125,14 @@ t([
   l({ type: Boolean, reflect: !0 })
 ], e.prototype, "striped", 2);
 e = t([
-  v("hx-structured-list")
+  u("hx-structured-list")
 ], e);
-let n = class extends h {
+let n = class extends v {
   connectedCallback() {
     super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem");
   }
   render() {
-    return u`
+    return h`
       <div part="base" class="row">
         <div part="label" class="row__label">
           <slot name="label"></slot>
@@ -133,10 +149,10 @@ let n = class extends h {
 };
 n.styles = [m];
 n = t([
-  v("hx-structured-list-row")
+  u("hx-structured-list-row")
 ], n);
 export {
   e as H,
   n as a
 };
-//# sourceMappingURL=hx-structured-list-DKlrv7kS.js.map
+//# sourceMappingURL=hx-structured-list-CqNbaEXg.js.map

package/dist/shared/hx-structured-list-CqNbaEXg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-structured-list-CqNbaEXg.js","sources":["../../src/components/hx-structured-list/hx-structured-list.styles.ts","../../src/components/hx-structured-list/hx-structured-list.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStructuredListStyles = css`\n  :host {\n    display: block;\n    --_border-color: var(--hx-structured-list-border-color, var(--hx-color-neutral-200, #e2e8f0));\n    --_border-width: var(--hx-structured-list-border-width, var(--hx-border-width-thin, 1px));\n    --_bg-stripe: var(--hx-structured-list-stripe-bg, var(--hx-color-neutral-50, #f8fafc));\n    --_padding-block: var(--hx-structured-list-padding-block, var(--hx-space-4, 1rem));\n    --_padding-inline: var(--hx-structured-list-padding-inline, var(--hx-space-4, 1rem));\n  }\n\n  :host([condensed]) {\n    --_padding-block: var(--hx-structured-list-condensed-padding-block, var(--hx-space-2, 0.5rem));\n    --_padding-inline: var(\n      --hx-structured-list-condensed-padding-inline,\n      var(--hx-space-3, 0.75rem)\n    );\n  }\n\n  .list {\n    display: block;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  :host([bordered]) .list {\n    border: var(--_border-width) solid var(--_border-color);\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    overflow: hidden;\n  }\n\n  :host([striped]) ::slotted(hx-structured-list-row:nth-of-type(even)) {\n    background: var(--_bg-stripe);\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    :host([bordered]) .list {\n      border-color: CanvasText;\n    }\n  }\n`;\n\nexport const helixStructuredListRowStyles = css`\n  :host {\n    display: block;\n  }\n\n  .row {\n    display: grid;\n    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);\n    align-items: baseline;\n    padding-block: var(--_padding-block, var(--hx-space-4, 1rem));\n    padding-inline: var(--_padding-inline, var(--hx-space-4, 1rem));\n    gap: var(--hx-space-4, 1rem);\n  }\n\n  :host(:not(:last-of-type)) .row {\n    border-bottom: var(--_border-width, var(--hx-border-width-thin, 1px)) solid\n      var(--_border-color, var(--hx-color-neutral-200, #e2e8f0));\n  }\n\n  .row__label {\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-structured-list-label-color, var(--hx-color-neutral-700, #334155));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .row__value {\n    color: var(--hx-structured-list-value-color, var(--hx-color-neutral-900, #0f172a));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .row__actions {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  .row__actions:empty {\n    display: none;\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    :host(:not(:last-of-type)) .row {\n      border-bottom-color: CanvasText;\n    }\n  }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport {\n  helixStructuredListStyles,\n  helixStructuredListRowStyles,\n} from './hx-structured-list.styles.js';\n\n/**\n * Container for structured key-value data display. Renders as a list with\n * `role=\"list\"` on the host and `role=\"listitem\"` on each `hx-structured-list-row`,\n * preserving the list/listitem relationship across shadow DOM boundaries.\n * Use `hx-structured-list-row` as direct children.\n *\n * @summary Key-value data display container for detail and summary views.\n *\n * @tag hx-structured-list\n *\n * @slot - One or more `hx-structured-list-row` elements.\n *\n * @csspart base - The root list element.\n *\n * @cssprop [--hx-structured-list-border-color=var(--hx-color-neutral-200)] - Border color when bordered.\n * @cssprop [--hx-structured-list-border-width=var(--hx-border-width-thin)] - Border width when bordered.\n * @cssprop [--hx-structured-list-stripe-bg=var(--hx-color-neutral-50)] - Stripe background color.\n * @cssprop [--hx-structured-list-padding-block=var(--hx-space-4)] - Row block padding.\n * @cssprop [--hx-structured-list-padding-inline=var(--hx-space-4)] - Row inline padding.\n * @cssprop [--hx-structured-list-condensed-padding-block=var(--hx-space-2)] - Row block padding (condensed).\n * @cssprop [--hx-structured-list-condensed-padding-inline=var(--hx-space-3)] - Row inline padding (condensed).\n */\n@customElement('hx-structured-list')\nexport class HelixStructuredList extends HelixElement {\n  static override styles = [helixStructuredListStyles];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Set role on the host element so the list/listitem relationship is\n    // preserved in the light DOM tree, crossing shadow boundaries correctly.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'list');\n    }\n  }\n\n  /**\n   * Accessible label for the list container. Use when multiple structured lists appear\n   * on the same page so screen readers can distinguish them (WCAG 4.1.2).\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Renders a border around the entire list.\n   * @attr bordered\n   */\n  @property({ type: Boolean, reflect: true })\n  bordered = false;\n\n  /**\n   * Reduces row padding for denser layouts.\n   * @attr condensed\n   */\n  @property({ type: Boolean, reflect: true })\n  condensed = false;\n\n  /**\n   * Alternates row background colors for easier scanning.\n   * @attr striped\n   */\n  @property({ type: Boolean, reflect: true })\n  striped = false;\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"list\" aria-label=${this.label || nothing}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n/**\n * A single row within an `hx-structured-list`. Renders a label/value pair\n * with an optional actions area.\n *\n * @summary A label-value row for use inside `hx-structured-list`.\n *\n * @tag hx-structured-list-row\n *\n * @slot label - The term or key label (`<dt>` semantics).\n * @slot - The value or definition (`<dd>` semantics).\n * @slot actions - Optional action controls (edit button, etc.).\n *\n * @csspart base - The root row element.\n * @csspart label - The label (`dt`) cell.\n * @csspart value - The value (`dd`) cell.\n * @csspart actions - The actions cell.\n *\n * @cssprop [--hx-structured-list-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-structured-list-value-color=var(--hx-color-neutral-900)] - Value text color.\n */\n@customElement('hx-structured-list-row')\nexport class HelixStructuredListRow extends HelixElement {\n  static override styles = [helixStructuredListRowStyles];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Set role on the host element so screen readers see listitem as a direct\n    // child of the hx-structured-list host (which carries role=\"list\"),\n    // preserving the list/listitem relationship across shadow boundaries.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n  }\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"row\">\n        <div part=\"label\" class=\"row__label\">\n          <slot name=\"label\"></slot>\n        </div>\n        <div part=\"value\" class=\"row__value\">\n          <slot></slot>\n          <div part=\"actions\" class=\"row__actions\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-structured-list': HelixStructuredList;\n    'hx-structured-list-row': HelixStructuredListRow;\n  }\n}\n"],"names":["helixStructuredListStyles","css","helixStructuredListRowStyles","HelixStructuredList","HelixElement","html","nothing","__decorateClass","property","customElement","HelixStructuredListRow"],"mappings":";;;AAEO,MAAMA,IAA4BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA4C5BC,IAA+BD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACdrC,IAAME,IAAN,cAAkCC,EAAa;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA,GAkBL,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,YAAY,IAOZ,KAAA,UAAU;AAAA,EAAA;AAAA,EApCD,oBAA0B;AACjC,UAAM,kBAAA,GAGD,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,MAAM;AAAA,EAEpC;AAAA,EA+BS,SAAS;AAChB,WAAOC;AAAA,iDACsC,KAAK,SAASC,CAAO;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AAhDaH,EACK,SAAS,CAACH,CAAyB;AAiBnDO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjBfL,EAkBX,WAAA,SAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAxB/BL,EAyBX,WAAA,YAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/B/BL,EAgCX,WAAA,aAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtC/BL,EAuCX,WAAA,WAAA,CAAA;AAvCWA,IAANI,EAAA;AAAA,EADNE,EAAc,oBAAoB;AAAA,GACtBN,CAAA;AAuEN,IAAMO,IAAN,cAAqCN,EAAa;AAAA,EAG9C,oBAA0B;AACjC,UAAM,kBAAA,GAID,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,UAAU;AAAA,EAExC;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaT;AACF;AA5BaK,EACK,SAAS,CAACR,CAA4B;AAD3CQ,IAANH,EAAA;AAAA,EADNE,EAAc,wBAAwB;AAAA,GAC1BC,CAAA;"}