@helixui/library 0.1.0

package/dist/shared/hx-status-indicator-CiTQuO5V.js

@@ -0,0 +1,149 @@
+import { css as u, LitElement as d, html as h } from "lit";
+import { property as e, customElement as p } from "lit/decorators.js";
+import { t as v } from "./lit-Dpo7RLp4.js";
+const x = u`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex-shrink: 0;
+    --_dot-color: var(--hx-color-neutral-300);
+  }
+
+  .indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: var(--_indicator-size);
+    height: var(--_indicator-size);
+    flex-shrink: 0;
+  }
+
+  .indicator__dot {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: var(--_dot-color);
+    position: relative;
+    z-index: 1; /* dot above pulse ring within shadow root */
+  }
+
+  .indicator__pulse-ring {
+    display: none;
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background-color: var(--hx-status-indicator-pulse-color, var(--_dot-color));
+    opacity: 0.4;
+    animation: hx-status-pulse var(--hx-status-indicator-pulse-duration, 1.5s) ease-out infinite;
+    z-index: 0; /* pulse ring beneath dot within shadow root */
+  }
+
+  :host([pulse]) .indicator__pulse-ring {
+    display: block;
+  }
+
+  @keyframes hx-status-pulse {
+    0% {
+      transform: scale(1);
+      opacity: 0.4;
+    }
+    100% {
+      transform: scale(var(--hx-status-indicator-pulse-scale, 2.5));
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host([pulse]) .indicator__pulse-ring {
+      animation: none;
+      display: none;
+    }
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([size='sm']) {
+    --_indicator-size: var(--hx-status-indicator-size-sm, var(--hx-size-2));
+  }
+
+  :host([size='md']) {
+    --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-size-3));
+  }
+
+  :host([size='lg']) {
+    --_indicator-size: var(--hx-status-indicator-size-lg, var(--hx-size-4));
+  }
+
+  /* ─── Status Colors ─── */
+
+  :host([status='online']) {
+    --_dot-color: var(--hx-status-indicator-color-online, var(--hx-color-success-500));
+  }
+
+  :host([status='offline']) {
+    --_dot-color: var(--hx-status-indicator-color-offline, var(--hx-color-neutral-400));
+  }
+
+  :host([status='away']) {
+    --_dot-color: var(--hx-status-indicator-color-away, var(--hx-color-warning-500));
+  }
+
+  :host([status='busy']) {
+    --_dot-color: var(--hx-status-indicator-color-busy, var(--hx-color-danger-500));
+  }
+
+  :host([status='unknown']) {
+    --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));
+  }
+`;
+var _ = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (a, i, n, r) => {
+  for (var t = r > 1 ? void 0 : r ? f(i, n) : i, l = a.length - 1, c; l >= 0; l--)
+    (c = a[l]) && (t = (r ? c(i, n, t) : c(t)) || t);
+  return r && t && _(i, n, t), t;
+};
+const y = {
+  online: "Online",
+  offline: "Offline",
+  away: "Away",
+  busy: "Busy",
+  unknown: "Unknown"
+};
+let s = class extends d {
+  constructor() {
+    super(...arguments), this.status = "unknown", this.size = "md", this.pulse = !1, this.label = "";
+  }
+  _getLabel() {
+    return this.label ? this.label : `Status: ${y[this.status] ?? "Unknown"}`;
+  }
+  render() {
+    return h`
+      <div class="indicator" role="img" aria-label=${this._getLabel()}>
+        <div class="indicator__pulse-ring" part="pulse-ring"></div>
+        <div class="indicator__dot" part="base"></div>
+      </div>
+    `;
+  }
+};
+s.styles = [v, x];
+o([
+  e({ type: String, reflect: !0 })
+], s.prototype, "status", 2);
+o([
+  e({ type: String, reflect: !0 })
+], s.prototype, "size", 2);
+o([
+  e({ type: Boolean, reflect: !0 })
+], s.prototype, "pulse", 2);
+o([
+  e({ type: String })
+], s.prototype, "label", 2);
+s = o([
+  p("hx-status-indicator")
+], s);
+export {
+  s as H
+};
+//# sourceMappingURL=hx-status-indicator-CiTQuO5V.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-status-indicator-CiTQuO5V.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    position: relative;\n    flex-shrink: 0;\n    --_dot-color: var(--hx-color-neutral-300);\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: 0.4;\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: 0.4;\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  /* ─── Size Variants ─── */\n\n  :host([size='sm']) {\n    --_indicator-size: var(--hx-status-indicator-size-sm, var(--hx-size-2));\n  }\n\n  :host([size='md']) {\n    --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-size-3));\n  }\n\n  :host([size='lg']) {\n    --_indicator-size: var(--hx-status-indicator-size-lg, var(--hx-size-4));\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-danger-500));\n  }\n\n  :host([status='unknown']) {\n    --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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 * Purely visual — no slots. Supports an animated pulse ring.\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 *\n * @cssproperty [--hx-status-indicator-color-online] - Override color for the \"online\" status dot.\n * @cssproperty [--hx-status-indicator-color-offline] - Override color for the \"offline\" status dot.\n * @cssproperty [--hx-status-indicator-color-away] - Override color for the \"away\" status dot.\n * @cssproperty [--hx-status-indicator-color-busy] - Override color for the \"busy\" status dot.\n * @cssproperty [--hx-status-indicator-color-unknown] - Override color for the \"unknown\" status dot.\n * @cssproperty [--hx-status-indicator-size-sm] - Override size for the \"sm\" variant.\n * @cssproperty [--hx-status-indicator-size-md] - Override size for the \"md\" variant.\n * @cssproperty [--hx-status-indicator-size-lg] - Override size for the \"lg\" variant.\n * @cssproperty [--hx-status-indicator-pulse-duration] - Override pulse animation duration.\n * @cssproperty [--hx-status-indicator-pulse-scale] - Override pulse animation max scale.\n * @cssproperty [--hx-status-indicator-pulse-color] - Override pulse ring color independently from dot color.\n */\n@customElement('hx-status-indicator')\nexport class HelixStatusIndicator extends LitElement {\n  static override styles = [tokenStyles, helixStatusIndicatorStyles];\n\n  /**\n   * The status to display.\n   * @attr status\n   */\n  @property({ type: String, reflect: true })\n  status: StatusIndicatorStatus = 'unknown';\n\n  /**\n   * Size of the indicator dot.\n   * @attr size\n   */\n  @property({ type: String, reflect: true })\n  size: StatusIndicatorSize = '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  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  override render() {\n    return html`\n      <div class=\"indicator\" role=\"img\" aria-label=${this._getLabel()}>\n        <div class=\"indicator__pulse-ring\" part=\"pulse-ring\"></div>\n        <div class=\"indicator__dot\" part=\"base\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-status-indicator': HelixStatusIndicator;\n  }\n}\n"],"names":["helixStatusIndicatorStyles","css","STATUS_LABELS","HelixStatusIndicator","LitElement","html","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAA6BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACM1C,MAAMC,IAAuD;AAAA,EAC3D,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;AAsCO,IAAMC,IAAN,cAAmCC,EAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,SAAgC,WAOhC,KAAA,OAA4B,MAW5B,KAAA,QAAQ,IAQR,KAAA,QAAQ;AAAA,EAAA;AAAA,EAEA,YAAoB;AAC1B,WAAI,KAAK,QAAc,KAAK,QAErB,WADYF,EAAc,KAAK,MAAM,KAAK,SACrB;AAAA,EAC9B;AAAA,EAES,SAAS;AAChB,WAAOG;AAAA,qDAC0C,KAAK,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnE;AACF;AAlDaF,EACK,SAAS,CAACG,GAAaN,CAA0B;AAOjEO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BL,EAQX,WAAA,UAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BL,EAeX,WAAA,QAAA,CAAA;AAWAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzB/BL,EA0BX,WAAA,SAAA,CAAA;AAQAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjCfL,EAkCX,WAAA,SAAA,CAAA;AAlCWA,IAANI,EAAA;AAAA,EADNE,EAAc,qBAAqB;AAAA,GACvBN,CAAA;"}

package/dist/shared/hx-step-m5RcyZ61.js

@@ -0,0 +1,496 @@
+import { css as x, LitElement as u, html as h } from "lit";
+import { property as a, customElement as v } from "lit/decorators.js";
+import { t as m } from "./lit-Dpo7RLp4.js";
+const f = x`
+  :host {
+    display: block;
+
+    /* ─── Size defaults (md) ─── */
+    --hx-steps-indicator-size: 2rem;
+    --hx-steps-indicator-font-size: var(--hx-font-size-sm, 0.875rem);
+    --hx-steps-indicator-icon-size: 1rem;
+    --hx-steps-label-font-size: var(--hx-font-size-sm, 0.875rem);
+    --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);
+
+    /* ─── Item layout defaults (horizontal) ─── */
+    --hx-steps-item-flex: 1;
+    --hx-steps-item-width: auto;
+  }
+
+  .steps {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  /* ─── Orientation: vertical ─── */
+
+  :host([orientation='vertical']) {
+    --hx-steps-item-flex: initial;
+    --hx-steps-item-width: 100%;
+  }
+
+  :host([orientation='vertical']) .steps {
+    flex-direction: column;
+  }
+
+  /* ─── Size: sm ─── */
+
+  :host([size='sm']) {
+    --hx-steps-indicator-size: 1.5rem;
+    --hx-steps-indicator-font-size: var(--hx-font-size-xs, 0.75rem);
+    --hx-steps-indicator-icon-size: 0.75rem;
+    --hx-steps-label-font-size: var(--hx-font-size-xs, 0.75rem);
+    --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  /* ─── Size: lg ─── */
+
+  :host([size='lg']) {
+    --hx-steps-indicator-size: 2.5rem;
+    --hx-steps-indicator-font-size: var(--hx-font-size-md, 1rem);
+    --hx-steps-indicator-icon-size: 1.25rem;
+    --hx-steps-label-font-size: var(--hx-font-size-md, 1rem);
+    --hx-steps-description-font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+`;
+var _ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, p = (t, r, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? b(r, o) : r, l = t.length - 1, c; l >= 0; l--)
+    (c = t[l]) && (e = (s ? c(r, o, e) : c(e)) || e);
+  return s && e && _(r, o, e), e;
+};
+let d = class extends u {
+  constructor() {
+    super(...arguments), this.orientation = "horizontal", this.size = "md", this._handleSlotChange = () => {
+      this._syncChildren();
+    }, this._handleStepClickInternal = (t) => {
+      t.stopPropagation();
+      const r = this._getSteps(), o = t.composedPath().find(
+        (e) => e instanceof Element && e.tagName.toLowerCase() === "hx-step"
+      );
+      if (!o) return;
+      const s = r.indexOf(o);
+      this.dispatchEvent(
+        new CustomEvent("hx-step-click", {
+          bubbles: !0,
+          composed: !0,
+          detail: { step: o, index: s }
+        })
+      );
+    };
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "list"), this.addEventListener("hx-step-click-internal", this._handleStepClickInternal);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener(
+      "hx-step-click-internal",
+      this._handleStepClickInternal
+    );
+  }
+  firstUpdated() {
+    this._syncChildren();
+  }
+  updated(t) {
+    super.updated(t), (t.has("orientation") || t.has("size")) && this._syncChildren();
+  }
+  // ─── Child Sync ───
+  /** @internal */
+  _getSteps() {
+    return Array.from(this.querySelectorAll(":scope > hx-step"));
+  }
+  /** @internal */
+  _syncChildren() {
+    this._getSteps().forEach((r, o) => {
+      r.orientation = this.orientation, r.size = this.size, r.index = o;
+    });
+  }
+  // ─── Render ───
+  render() {
+    return h`
+      <div part="base" class="steps">
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+d.styles = [m, f];
+p([
+  a({ type: String, reflect: !0 })
+], d.prototype, "orientation", 2);
+p([
+  a({ type: String, reflect: !0 })
+], d.prototype, "size", 2);
+d = p([
+  v("hx-steps")
+], d);
+const g = x`
+  :host {
+    display: flex;
+    flex: var(--hx-steps-item-flex, 1);
+    width: var(--hx-steps-item-width, auto);
+    min-width: 0;
+  }
+
+  /* ─── Visually Hidden (SR only) ─── */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ─── Step Wrapper ─── */
+
+  .step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  /* ─── Focus ─── */
+
+  :host(:focus-visible) .step__indicator {
+    outline: 2px solid var(--hx-color-primary-500);
+    outline-offset: 2px;
+  }
+
+  /* ─── Track (indicator + connector) ─── */
+
+  .step__track {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+  }
+
+  /* ─── Indicator ─── */
+
+  .step__indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--hx-steps-indicator-size, 2rem);
+    height: var(--hx-steps-indicator-size, 2rem);
+    border-radius: var(--hx-border-radius-full, 9999px);
+    border: 2px solid var(--hx-color-neutral-300);
+    background-color: var(--hx-color-neutral-0);
+    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);
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease);
+    position: relative;
+    z-index: 1;
+  }
+
+  .step__indicator svg {
+    width: var(--hx-steps-indicator-icon-size, 1rem);
+    height: var(--hx-steps-indicator-icon-size, 1rem);
+  }
+
+  /* ─── Connector ─── */
+
+  .step__connector {
+    flex: 1;
+    height: var(--hx-steps-connector-thickness, var(--hx-border-width, 2px));
+    min-width: 0;
+    background-color: var(--hx-steps-connector-color, var(--hx-color-neutral-200));
+    transition: background-color var(--hx-transition-fast, 150ms ease);
+  }
+
+  :host(:last-child) .step__connector {
+    display: none;
+  }
+
+  /* ─── Label Area ─── */
+
+  .step__label-area {
+    text-align: center;
+    margin-top: var(--hx-space-2, 0.5rem);
+    width: 100%;
+    padding: 0 var(--hx-space-1, 0.25rem);
+  }
+
+  .step__label {
+    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));
+    line-height: var(--hx-line-height-tight, 1.25);
+  }
+
+  .step__description {
+    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);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Status: active ─── */
+
+  /* Active: outlined indicator (in-progress) — visually distinct from complete (filled) */
+  :host([status='active']) .step__indicator {
+    border-color: var(--hx-color-primary-500);
+    background-color: var(--hx-color-primary-500);
+    color: var(--hx-color-neutral-0);
+  }
+
+  :host([status='active']) .step__label {
+    color: var(--hx-color-primary-700);
+    font-weight: var(--hx-font-weight-semibold);
+  }
+
+  /* ─── Status: complete ─── */
+
+  /* Complete: filled indicator with darker shade — visually distinct from active */
+  :host([status='complete']) .step__indicator {
+    border-color: var(--hx-color-primary-700);
+    background-color: var(--hx-color-primary-700);
+    color: var(--hx-color-neutral-0);
+  }
+
+  :host([status='complete']) .step__connector {
+    background-color: var(--hx-steps-connector-complete-color, var(--hx-color-primary-500));
+  }
+
+  :host([status='complete']) .step__label {
+    color: var(--hx-color-neutral-700);
+  }
+
+  /* ─── Status: error ─── */
+
+  :host([status='error']) .step__indicator {
+    border-color: var(--hx-color-error-500);
+    background-color: var(--hx-color-error-500);
+    color: var(--hx-color-neutral-0);
+  }
+
+  :host([status='error']) .step__label {
+    color: var(--hx-color-error-700);
+  }
+
+  /* ─── Status: disabled ─── */
+
+  :host([disabled]) .step {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  :host([disabled]) .step__indicator {
+    border-color: var(--hx-color-neutral-300);
+    background-color: var(--hx-color-neutral-100);
+    color: var(--hx-color-neutral-400);
+  }
+
+  /* ─── Vertical Layout ─── */
+
+  :host([orientation='vertical']) {
+    flex: initial;
+    width: 100%;
+  }
+
+  :host([orientation='vertical']) .step {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--hx-space-3, 0.75rem);
+  }
+
+  :host([orientation='vertical']) .step__track {
+    flex-direction: column;
+    align-items: center;
+    width: auto;
+    flex-shrink: 0;
+  }
+
+  :host([orientation='vertical']) .step__connector {
+    width: var(--hx-steps-connector-thickness, var(--hx-border-width, 2px));
+    height: auto;
+    min-height: var(--hx-space-8, 2rem);
+    flex: 1;
+  }
+
+  :host([orientation='vertical']) .step__label-area {
+    text-align: left;
+    margin-top: 0;
+    padding-bottom: var(--hx-space-4, 1rem);
+    padding-inline-start: 0;
+  }
+
+  :host([orientation='vertical']:last-child) .step__label-area {
+    padding-bottom: 0;
+  }
+
+  /* ─── Dark Mode ─── */
+
+  @media (prefers-color-scheme: dark) {
+    .step__indicator {
+      background-color: var(--hx-color-neutral-800);
+      border-color: var(--hx-color-neutral-600);
+      color: var(--hx-color-neutral-300);
+    }
+
+    .step__connector {
+      background-color: var(--hx-color-neutral-700);
+    }
+
+    .step__label {
+      color: var(--hx-color-neutral-300);
+    }
+
+    .step__description {
+      color: var(--hx-color-neutral-400);
+    }
+
+    :host([status='active']) .step__label {
+      color: var(--hx-color-primary-300);
+    }
+
+    :host([status='complete']) .step__label {
+      color: var(--hx-color-neutral-200);
+    }
+
+    :host([status='error']) .step__label {
+      color: var(--hx-color-error-300);
+    }
+
+    :host([disabled]) .step__indicator {
+      background-color: var(--hx-color-neutral-900);
+      border-color: var(--hx-color-neutral-700);
+      color: var(--hx-color-neutral-600);
+    }
+  }
+`;
+var y = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (t, r, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? z(r, o) : r, l = t.length - 1, c; l >= 0; l--)
+    (c = t[l]) && (e = (s ? c(r, o, e) : c(e)) || e);
+  return s && e && y(r, o, e), e;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.label = "", this.status = "pending", this.description = "", this.disabled = !1, this.orientation = "horizontal", this.size = "md", this.index = 0, this._handleKeydown = (t) => {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._handleClick());
+    };
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem"), this.setAttribute("tabindex", this.disabled ? "-1" : "0"), this.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown);
+  }
+  updated(t) {
+    super.updated(t), t.has("status") && (this.status === "active" ? this.setAttribute("aria-current", "step") : this.removeAttribute("aria-current")), t.has("disabled") && (this.disabled ? (this.setAttribute("tabindex", "-1"), this.setAttribute("aria-disabled", "true")) : (this.setAttribute("tabindex", "0"), this.removeAttribute("aria-disabled")));
+  }
+  /** @internal */
+  _handleClick() {
+    this.disabled || this.dispatchEvent(
+      new CustomEvent("hx-step-click-internal", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  // ─── Render Helpers ───
+  /** @internal */
+  _renderCheckmark() {
+    return h`
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M20 6L9 17l-5-5" />
+      </svg>
+      <span class="sr-only">Complete</span>
+    `;
+  }
+  /** @internal */
+  _renderXMark() {
+    return h`
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+      >
+        <path d="M18 6L6 18M6 6l12 12" />
+      </svg>
+      <span class="sr-only">Error</span>
+    `;
+  }
+  /** @internal */
+  _renderIndicatorContent() {
+    return this.status === "complete" ? this._renderCheckmark() : this.status === "error" ? this._renderXMark() : h`<slot name="icon">${this.index + 1}</slot>`;
+  }
+  // ─── Render ───
+  render() {
+    return h`
+      <div part="base" class="step" @click=${this._handleClick}>
+        <div class="step__track">
+          <div part="indicator" class="step__indicator">${this._renderIndicatorContent()}</div>
+          <div part="connector" class="step__connector" aria-hidden="true"></div>
+        </div>
+        <div class="step__label-area">
+          <div part="label" class="step__label">
+            <slot name="label">${this.label}</slot>
+          </div>
+          <div part="description" class="step__description">
+            <slot name="description">${this.description}</slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+i.styles = [m, g];
+n([
+  a({ type: String, reflect: !0 })
+], i.prototype, "label", 2);
+n([
+  a({ type: String, reflect: !0 })
+], i.prototype, "status", 2);
+n([
+  a({ type: String, reflect: !0 })
+], i.prototype, "description", 2);
+n([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+n([
+  a({ type: String, reflect: !0 })
+], i.prototype, "orientation", 2);
+n([
+  a({ type: String, reflect: !0 })
+], i.prototype, "size", 2);
+n([
+  a({ type: Number })
+], i.prototype, "index", 2);
+i = n([
+  v("hx-step")
+], i);
+export {
+  i as H,
+  d as a
+};
+//# sourceMappingURL=hx-step-m5RcyZ61.js.map