npm - @helixui/library - Versions diffs - 0.1.0 → 0.1.3 - Mend

@helixui/library 0.1.0 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (238) hide show

package/dist/shared/{hx-status-indicator-CiTQuO5V.js → hx-status-indicator-Mv44COA-.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 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";
+import { tokenStyles as v } from "@helixui/tokens/lit";
 const x = u`
   :host {
     display: inline-flex;
@@ -99,7 +99,7 @@ const x = u`
     --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));
   }
 `;
-var _ = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (a, i, n, r) => {
+var _ = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (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;
@@ -111,7 +111,7 @@ const y = {
   busy: "Busy",
   unknown: "Unknown"
 };
-let s = class extends d {
+let o = class extends d {
   constructor() {
     super(...arguments), this.status = "unknown", this.size = "md", this.pulse = !1, this.label = "";
   }
@@ -127,23 +127,23 @@ let s = class extends d {
     `;
   }
 };
-s.styles = [v, x];
-o([
+o.styles = [v, x];
+s([
   e({ type: String, reflect: !0 })
-], s.prototype, "status", 2);
-o([
+], o.prototype, "status", 2);
+s([
   e({ type: String, reflect: !0 })
-], s.prototype, "size", 2);
-o([
+], o.prototype, "size", 2);
+s([
   e({ type: Boolean, reflect: !0 })
-], s.prototype, "pulse", 2);
-o([
+], o.prototype, "pulse", 2);
+s([
   e({ type: String })
-], s.prototype, "label", 2);
-s = o([
+], o.prototype, "label", 2);
+o = s([
   p("hx-status-indicator")
-], s);
+], o);
 export {
-  s as H
+  o as H
 };
-//# sourceMappingURL=hx-status-indicator-CiTQuO5V.js.map
+//# sourceMappingURL=hx-status-indicator-Mv44COA-.js.map

package/dist/shared/{hx-status-indicator-CiTQuO5V.js.map → hx-status-indicator-Mv44COA-.js.map} RENAMED Viewed

	@@ -1 +1 @@
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;"}
1	+ {"version":3,"file":"hx-status-indicator-Mv44COA-.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 → hx-step-nMT0fHEn.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 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";
+import { tokenStyles as m } from "@helixui/tokens/lit";
 const f = x`
   :host {
     display: block;
@@ -493,4 +493,4 @@ export {
   i as H,
   d as a
 };
-//# sourceMappingURL=hx-step-m5RcyZ61.js.map
+//# sourceMappingURL=hx-step-nMT0fHEn.js.map

package/dist/shared/{hx-step-m5RcyZ61.js.map → hx-step-nMT0fHEn.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-step-m5RcyZ61.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: 2rem;\n --hx-steps-indicator-font-size: var(--hx-font-size-sm, 0.875rem);\n --hx-steps-indicator-icon-size: 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: 1.5rem;\n --hx-steps-indicator-font-size: var(--hx-font-size-xs, 0.75rem);\n --hx-steps-indicator-icon-size: 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: 2.5rem;\n --hx-steps-indicator-font-size: var(--hx-font-size-md, 1rem);\n --hx-steps-indicator-icon-size: 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","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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 LitElement {\n static override styles = [tokenStyles, 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 size\n /\n @property({ type: String, reflect: true })\n size: 'sm' \| 'md' \| 'lg' = 'md';\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'list');\n }\n this.addEventListener('hx-step-click-internal', this._handleStepClickInternal as EventListener);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\n 'hx-step-click-internal',\n this._handleStepClickInternal as EventListener,\n );\n }\n\n override firstUpdated(): void {\n this._syncChildren();\n }\n\n override updated(changedProperties: Map<string, unknown>): 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('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\">\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: 2px solid var(--hx-color-primary-500);\n outline-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: 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-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-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-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: 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: left;\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 / ─── Dark Mode ─── /\n\n @media (prefers-color-scheme: dark) {\n .step__indicator {\n background-color: var(--hx-color-neutral-800);\n border-color: var(--hx-color-neutral-600);\n color: var(--hx-color-neutral-300);\n }\n\n .step__connector {\n background-color: var(--hx-color-neutral-700);\n }\n\n .step__label {\n color: var(--hx-color-neutral-300);\n }\n\n .step__description {\n color: var(--hx-color-neutral-400);\n }\n\n :host([status='active']) .step__label {\n color: var(--hx-color-primary-300);\n }\n\n :host([status='complete']) .step__label {\n color: var(--hx-color-neutral-200);\n }\n\n :host([status='error']) .step__label {\n color: var(--hx-color-error-300);\n }\n\n :host([disabled]) .step__indicator {\n background-color: var(--hx-color-neutral-900);\n border-color: var(--hx-color-neutral-700);\n color: var(--hx-color-neutral-600);\n }\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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 LitElement {\n static override styles = [tokenStyles, 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.\n * @internal\n /\n @property({ type: String, reflect: true })\n orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Size variant. Set by the parent `<hx-steps>` container.\n * @internal\n /\n @property({ type: String, reflect: true })\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 // ─── 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 updated(changedProperties: Map<string, unknown>): 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 }\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('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 `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-step': HelixStep;\n }\n}\n"],"names":["helixStepsStyles","css","HelixSteps","LitElement","e","steps","step","el","index","changedProperties","i","html","tokenStyles","__decorateClass","property","customElement","helixStepStyles","HelixStep","event"],"mappings":"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"}
1	+ {"version":3,"file":"hx-step-nMT0fHEn.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: 2rem;\n --hx-steps-indicator-font-size: var(--hx-font-size-sm, 0.875rem);\n --hx-steps-indicator-icon-size: 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: 1.5rem;\n --hx-steps-indicator-font-size: var(--hx-font-size-xs, 0.75rem);\n --hx-steps-indicator-icon-size: 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: 2.5rem;\n --hx-steps-indicator-font-size: var(--hx-font-size-md, 1rem);\n --hx-steps-indicator-icon-size: 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","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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 LitElement {\n static override styles = [tokenStyles, 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 size\n /\n @property({ type: String, reflect: true })\n size: 'sm' \| 'md' \| 'lg' = 'md';\n\n // ─── Lifecycle ───\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'list');\n }\n this.addEventListener('hx-step-click-internal', this._handleStepClickInternal as EventListener);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener(\n 'hx-step-click-internal',\n this._handleStepClickInternal as EventListener,\n );\n }\n\n override firstUpdated(): void {\n this._syncChildren();\n }\n\n override updated(changedProperties: Map<string, unknown>): 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('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\">\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: 2px solid var(--hx-color-primary-500);\n outline-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: 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-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-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-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: 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: left;\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 / ─── Dark Mode ─── /\n\n @media (prefers-color-scheme: dark) {\n .step__indicator {\n background-color: var(--hx-color-neutral-800);\n border-color: var(--hx-color-neutral-600);\n color: var(--hx-color-neutral-300);\n }\n\n .step__connector {\n background-color: var(--hx-color-neutral-700);\n }\n\n .step__label {\n color: var(--hx-color-neutral-300);\n }\n\n .step__description {\n color: var(--hx-color-neutral-400);\n }\n\n :host([status='active']) .step__label {\n color: var(--hx-color-primary-300);\n }\n\n :host([status='complete']) .step__label {\n color: var(--hx-color-neutral-200);\n }\n\n :host([status='error']) .step__label {\n color: var(--hx-color-error-300);\n }\n\n :host([disabled]) .step__indicator {\n background-color: var(--hx-color-neutral-900);\n border-color: var(--hx-color-neutral-700);\n color: var(--hx-color-neutral-600);\n }\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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 LitElement {\n static override styles = [tokenStyles, 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.\n * @internal\n /\n @property({ type: String, reflect: true })\n orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Size variant. Set by the parent `<hx-steps>` container.\n * @internal\n /\n @property({ type: String, reflect: true })\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 // ─── 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 updated(changedProperties: Map<string, unknown>): 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 }\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('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 `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-step': HelixStep;\n }\n}\n"],"names":["helixStepsStyles","css","HelixSteps","LitElement","e","steps","step","el","index","changedProperties","i","html","tokenStyles","__decorateClass","property","customElement","helixStepStyles","HelixStep","event"],"mappings":"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"}

package/dist/shared/{hx-structured-list-ClvSFleR.js → hx-structured-list-DKborM60.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { css as p, LitElement as u, html as v } from "lit";
 import { property as n, customElement as h } from "lit/decorators.js";
-import { t as x } from "./lit-Dpo7RLp4.js";
+import { tokenStyles as x } from "@helixui/tokens/lit";
 const b = p`
   :host {
     display: block;
@@ -130,4 +130,4 @@ export {
   e as H,
   d as a
 };
-//# sourceMappingURL=hx-structured-list-ClvSFleR.js.map
+//# sourceMappingURL=hx-structured-list-DKborM60.js.map

package/dist/shared/{hx-structured-list-ClvSFleR.js.map → hx-structured-list-DKborM60.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-structured-list-~~ClvSFleR~~.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\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, #374151));\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, #111827));\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","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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 description\n * list for accessible term/definition semantics. Use `hx-structured-list-row`\n * 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 LitElement {\n static override styles = [tokenStyles, helixStructuredListStyles];\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\">\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 LitElement {\n static override styles = [tokenStyles, helixStructuredListRowStyles];\n\n override render() {\n return html`\n <div part=\"base\" class=\"row\">\n <div part=\"label\" class=\"row__label\" role=\"term\">\n <slot name=\"label\"></slot>\n </div>\n <div part=\"value\" class=\"row__value\" role=\"definition\">\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","LitElement","html","tokenStyles","__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,GAoC5BC,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;;;;;;ACRrC,IAAME,IAAN,cAAkCC,EAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,WAAW,IAOX,KAAA,YAAY,IAOZ,KAAA,UAAU;AAAA,EAAA;AAAA,EAED,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AA/BaF,EACK,SAAS,CAACG,GAAaN,CAAyB;AAOhEO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAP/BL,EAQX,WAAA,YAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAd/BL,EAeX,WAAA,aAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArB/BL,EAsBX,WAAA,WAAA,CAAA;AAtBWA,IAANI,EAAA;AAAA,EADNE,EAAc,oBAAoB;AAAA,GACtBN,CAAA;AAsDN,IAAMO,IAAN,cAAqCN,EAAW;AAAA,EAG5C,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaT;AACF;AAlBaK,EACK,SAAS,CAACJ,GAAaJ,CAA4B;AADxDQ,IAANH,EAAA;AAAA,EADNE,EAAc,wBAAwB;AAAA,GAC1BC,CAAA;"}
1	+ {"version":3,"file":"hx-structured-list-DKborM60.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\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, #374151));\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, #111827));\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","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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 description\n * list for accessible term/definition semantics. Use `hx-structured-list-row`\n * 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 LitElement {\n static override styles = [tokenStyles, helixStructuredListStyles];\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\">\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 LitElement {\n static override styles = [tokenStyles, helixStructuredListRowStyles];\n\n override render() {\n return html`\n <div part=\"base\" class=\"row\">\n <div part=\"label\" class=\"row__label\" role=\"term\">\n <slot name=\"label\"></slot>\n </div>\n <div part=\"value\" class=\"row__value\" role=\"definition\">\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","LitElement","html","tokenStyles","__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,GAoC5BC,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;;;;;;ACRrC,IAAME,IAAN,cAAkCC,EAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,WAAW,IAOX,KAAA,YAAY,IAOZ,KAAA,UAAU;AAAA,EAAA;AAAA,EAED,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AA/BaF,EACK,SAAS,CAACG,GAAaN,CAAyB;AAOhEO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAP/BL,EAQX,WAAA,YAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAd/BL,EAeX,WAAA,aAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArB/BL,EAsBX,WAAA,WAAA,CAAA;AAtBWA,IAANI,EAAA;AAAA,EADNE,EAAc,oBAAoB;AAAA,GACtBN,CAAA;AAsDN,IAAMO,IAAN,cAAqCN,EAAW;AAAA,EAG5C,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaT;AACF;AAlBaK,EACK,SAAS,CAACJ,GAAaJ,CAA4B;AADxDQ,IAANH,EAAA;AAAA,EADNE,EAAc,wBAAwB;AAAA,GAC1BC,CAAA;"}

package/dist/shared/{hx-switch-BFxgxal8.js → hx-switch-BPvIcDpM.js} RENAMED Viewed

@@ -2,7 +2,7 @@ import { css as p, LitElement as x, nothing as o, html as c } from "lit";
 import { property as s, query as _, state as m, customElement as w } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
-import { t as f } from "./lit-Dpo7RLp4.js";
+import { tokenStyles as f } from "@helixui/tokens/lit";
 const b = p`
   :host {
     display: block;
@@ -353,4 +353,4 @@ e = i([
 export {
   e as H
 };
-//# sourceMappingURL=hx-switch-BFxgxal8.js.map
+//# sourceMappingURL=hx-switch-BPvIcDpM.js.map

package/dist/shared/{hx-switch-BFxgxal8.js.map → hx-switch-BPvIcDpM.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-switch-BFxgxal8.js","sources":["../../src/components/hx-switch/hx-switch.styles.ts","../../src/components/hx-switch/hx-switch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSwitchStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* --- Layout --- /\n\n .switch {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--hx-font-family-sans, sans-serif);\n }\n\n .switch__control-row {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n }\n\n / --- Track --- /\n\n .switch__track {\n position: relative;\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n border: none;\n padding: 0;\n border-radius: var(--hx-border-radius-full, 9999px);\n background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));\n cursor: pointer;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n outline: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .switch__track:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .switch--checked .switch__track {\n background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));\n }\n\n / --- Thumb --- /\n\n .switch__thumb {\n position: absolute;\n border-radius: var(--hx-border-radius-full, 9999px);\n background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));\n box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));\n transition: transform var(--hx-transition-fast, 150ms ease);\n }\n\n / --- Size: sm (track 32x18, thumb 14px) --- /\n\n .switch--sm .switch__track {\n width: var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));\n height: var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem));\n }\n\n .switch--sm .switch__thumb {\n width: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\n height: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\n top: 50%;\n left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n transform: translateY(-50%);\n }\n\n .switch--sm.switch--checked .switch__thumb {\n transform: translateY(-50%)\n translateX(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem)));\n }\n\n / --- Size: md (track 40x22, thumb 18px) --- /\n\n .switch--md .switch__track {\n width: var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));\n height: var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));\n }\n\n .switch--md .switch__thumb {\n width: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\n height: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\n top: 50%;\n left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n transform: translateY(-50%);\n }\n\n .switch--md.switch--checked .switch__thumb {\n transform: translateY(-50%)\n translateX(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)));\n }\n\n / --- Size: lg (track 48x26, thumb 22px) --- /\n\n .switch--lg .switch__track {\n width: var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));\n height: var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem));\n }\n\n .switch--lg .switch__thumb {\n width: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\n height: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\n top: 50%;\n left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n transform: translateY(-50%);\n }\n\n .switch--lg.switch--checked .switch__thumb {\n transform: translateY(-50%)\n translateX(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)));\n }\n\n / --- Label --- /\n\n .switch__label {\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));\n line-height: var(--hx-line-height-normal, 1.5);\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .switch__required-marker {\n color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n / --- Help Text & Error --- /\n\n .switch__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #6c757d));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .switch__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n / --- Reduced Motion --- /\n\n @media (prefers-reduced-motion: reduce) {\n .switch__track,\n .switch__thumb {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSwitchStyles } from './hx-switch.styles.js';\n\n/\n A toggle switch component for on/off states.\n \n Uses `role=\"switch\"` with `aria-checked` to convey toggle state.\n * Supports keyboard activation via Space key (per ARIA APG switch pattern).\n * Label association is handled through `aria-labelledby`, and\n * error/help text are linked via `aria-describedby`.\n \n @summary Form-associated toggle switch with label, error, and help text.\n \n @tag hx-switch\n \n @slot - Custom label content (overrides the label property).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n \n @fires {CustomEvent<{checked: boolean, value: string}>} hx-change - Dispatched when the switch is toggled.\n \n @csspart switch - The switch container (track + thumb wrapper).\n * @csspart track - The track background element.\n * @csspart thumb - The sliding thumb element.\n * @csspart label - The label text element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n \n @cssprop [--hx-switch-track-bg=var(--hx-color-neutral-300)] - Track background color.\n * @cssprop [--hx-switch-track-checked-bg=var(--hx-color-primary-500)] - Track background when checked.\n * @cssprop [--hx-switch-thumb-bg=var(--hx-color-neutral-0)] - Thumb background color.\n * @cssprop [--hx-switch-thumb-shadow=var(--hx-shadow-sm)] - Thumb box shadow.\n * @cssprop [--hx-switch-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-switch-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-switch-error-color=var(--hx-color-error-500)] - Error message color.\n * @cssprop [--hx-switch-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n /\n@customElement('hx-switch')\nexport class HelixSwitch extends LitElement {\n static override styles = [tokenStyles, helixSwitchStyles];\n\n /* Monotonic counter for deterministic, unique IDs across instances. /\n private static _instanceCounter = 0;\n\n // ─── Form Association ───\n\n /* Enables the element to participate in form submission and validation. /\n static formAssociated = true;\n\n /* ElementInternals instance for form association, validation, and ARIA. /\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // ─── Properties ───\n\n /\n Whether the switch is toggled on.\n * @attr checked\n /\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /\n Whether the switch is disabled.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Whether the switch is required for form submission.\n * @attr required\n /\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /\n The name of the switch, used for form submission.\n * @attr name\n /\n @property({ type: String })\n name = '';\n\n /\n The value submitted when the switch is checked.\n * @attr value\n /\n @property({ type: String })\n value = 'on';\n\n /\n The visible label text for the switch.\n * @attr label\n /\n @property({ type: String })\n label = '';\n\n /\n Size variant of the switch.\n * @attr hx-size\n /\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' \| 'md' \| 'lg' = 'md';\n\n /\n Error message to display. When set, the switch enters an error state.\n * @attr error\n /\n @property({ type: String })\n error = '';\n\n /\n Help text displayed below the switch for guidance.\n * @attr help-text\n /\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has('checked') \|\| changedProperties.has('value')) {\n this._internals.setFormValue(this.checked ? this.value : null);\n this._updateValidity();\n }\n if (changedProperties.has('required')) {\n this._updateValidity();\n }\n }\n\n // ─── Form Integration ───\n\n /* Returns the associated form element, if any. /\n get form(): HTMLFormElement \| null {\n return this._internals.form;\n }\n\n /* Returns the validation message. /\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /* Returns the ValidityState object. /\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /* Checks whether the switch satisfies its constraints. /\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /* Reports validity and shows the browser's constraint validation UI. /\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n /* Recalculates and sets the validity state based on required and checked. /\n private _updateValidity(): void {\n if (this.required && !this.checked) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error \|\| 'This field is required.',\n this._trackEl ?? undefined,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /* Called by the form when it resets. /\n formResetCallback(): void {\n this.checked = false;\n this._internals.setFormValue(null);\n }\n\n /* Called when the form restores state (e.g., back/forward navigation). /\n formStateRestoreCallback(state: File \| string \| null, _mode: 'restore' \| 'autocomplete'): void {\n if (typeof state === 'string') {\n this.checked = state === this.value;\n }\n }\n\n /* Reference to the native button element acting as the switch track. /\n @query('.switch__track')\n private _trackEl!: HTMLButtonElement;\n\n /* Whether the error slot has assigned content. /\n @state() private _hasErrorSlot = false;\n\n /* Whether the default slot has assigned content (slotted label). /\n @state() private _hasDefaultSlot = false;\n\n // ─── Slot Handlers ───\n\n /* Updates _hasErrorSlot when error slot content changes. /\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n /* Updates _hasDefaultSlot when default slot content changes. /\n private _handleDefaultSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasDefaultSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Event Handling ───\n\n /* Toggles checked state and dispatches hx-change event. /\n private _toggle(): void {\n if (this.disabled) return;\n this.checked = !this.checked;\n\n this.dispatchEvent(\n new CustomEvent('hx-change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.checked, value: this.value },\n }),\n );\n }\n\n /* Handles click events on the track. /\n private _handleClick(): void {\n this._toggle();\n }\n\n /* Handles keydown events — Space toggles the switch per ARIA APG. /\n private _handleKeyDown(e: KeyboardEvent): void {\n if (e.key === ' ') {\n e.preventDefault();\n this._toggle();\n }\n }\n\n // ─── Public Methods ───\n\n /* Moves focus to the switch track element. /\n override focus(options?: FocusOptions): void {\n this._trackEl?.focus(options);\n }\n\n // ─── Render ───\n\n /* Unique ID for this switch instance, used for ARIA associations. /\n private _switchId = `hx-switch-${++HelixSwitch._instanceCounter}`;\n /* ID for the label element, referenced by aria-labelledby. /\n private _labelId = `${this._switchId}-label`;\n /* ID for the help text element, referenced by aria-describedby. /\n private _helpTextId = `${this._switchId}-help`;\n /* ID for the error element, referenced by aria-describedby. /\n private _errorId = `${this._switchId}-error`;\n\n override render() {\n const hasError = !!this.error;\n const hasLabel = !!this.label \|\| this._hasDefaultSlot;\n\n const containerClasses = {\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--required': this.required,\n 'switch--error': hasError,\n [`switch--${this.size}`]: true,\n };\n\n const describedBy =\n [\n hasError \|\| this._hasErrorSlot ? this._errorId : null,\n this.helpText && !hasError ? this._helpTextId : null,\n ]\n .filter(Boolean)\n .join(' ') \|\| undefined;\n\n return html`\n <div part=\"switch\" class=${classMap(containerClasses)}>\n <div class=\"switch__control-row\">\n <button\n part=\"track\"\n class=\"switch__track\"\n type=\"button\"\n role=\"switch\"\n aria-checked=${this.checked ? 'true' : 'false'}\n aria-labelledby=${ifDefined(hasLabel ? this._labelId : undefined)}\n aria-describedby=${ifDefined(describedBy)}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-required=${this.required ? 'true' : nothing}\n ?disabled=${this.disabled}\n @click=${this._handleClick}\n @keydown=${this._handleKeyDown}\n >\n <span part=\"thumb\" class=\"switch__thumb\"></span>\n </button>\n\n <span part=\"label\" class=\"switch__label\" id=${this._labelId} @click=${this._handleClick}>\n <slot @slotchange=${this._handleDefaultSlotChange}>${this.label}</slot>${this.required\n ? html`<span class=\"switch__required-marker\" aria-hidden=\"true\"></span>`\n : nothing}\n </span>\n </div>\n\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${hasError\n ? html`<div part=\"error\" class=\"switch__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>`\n : nothing}\n </slot>\n\n ${this.helpText && !hasError\n ? html`\n <div part=\"help-text\" class=\"switch__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-switch': HelixSwitch;\n }\n}\n\n/** @deprecated Use HxSwitch instead. */\nexport type WcSwitch = HelixSwitch;\nexport type HxSwitch = HelixSwitch;\n"],"names":["helixSwitchStyles","css","HelixSwitch","LitElement","changedProperties","state","_mode","e","slot","options","_a","hasError","hasLabel","containerClasses","describedBy","html","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"hx-switch-BPvIcDpM.js","sources":["../../src/components/hx-switch/hx-switch.styles.ts","../../src/components/hx-switch/hx-switch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSwitchStyles = css`\n :host {\n display: block;\n }\n\n :host([disabled]) {\n opacity: var(--hx-opacity-disabled, 0.5);\n pointer-events: none;\n }\n\n * {\n box-sizing: border-box;\n }\n\n /* --- Layout --- /\n\n .switch {\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-1, 0.25rem);\n font-family: var(--hx-font-family-sans, sans-serif);\n }\n\n .switch__control-row {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n }\n\n / --- Track --- /\n\n .switch__track {\n position: relative;\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n border: none;\n padding: 0;\n border-radius: var(--hx-border-radius-full, 9999px);\n background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));\n cursor: pointer;\n transition: background-color var(--hx-transition-fast, 150ms ease);\n outline: none;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .switch__track:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .switch--checked .switch__track {\n background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));\n }\n\n / --- Thumb --- /\n\n .switch__thumb {\n position: absolute;\n border-radius: var(--hx-border-radius-full, 9999px);\n background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));\n box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));\n transition: transform var(--hx-transition-fast, 150ms ease);\n }\n\n / --- Size: sm (track 32x18, thumb 14px) --- /\n\n .switch--sm .switch__track {\n width: var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));\n height: var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem));\n }\n\n .switch--sm .switch__thumb {\n width: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\n height: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\n top: 50%;\n left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n transform: translateY(-50%);\n }\n\n .switch--sm.switch--checked .switch__thumb {\n transform: translateY(-50%)\n translateX(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem)));\n }\n\n / --- Size: md (track 40x22, thumb 18px) --- /\n\n .switch--md .switch__track {\n width: var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));\n height: var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));\n }\n\n .switch--md .switch__thumb {\n width: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\n height: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\n top: 50%;\n left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n transform: translateY(-50%);\n }\n\n .switch--md.switch--checked .switch__thumb {\n transform: translateY(-50%)\n translateX(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)));\n }\n\n / --- Size: lg (track 48x26, thumb 22px) --- /\n\n .switch--lg .switch__track {\n width: var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));\n height: var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem));\n }\n\n .switch--lg .switch__thumb {\n width: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\n height: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\n top: 50%;\n left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n transform: translateY(-50%);\n }\n\n .switch--lg.switch--checked .switch__thumb {\n transform: translateY(-50%)\n translateX(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)));\n }\n\n / --- Label --- /\n\n .switch__label {\n font-size: var(--hx-font-size-sm, 0.875rem);\n font-weight: var(--hx-font-weight-medium, 500);\n color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));\n line-height: var(--hx-line-height-normal, 1.5);\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .switch__required-marker {\n color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));\n font-weight: var(--hx-font-weight-bold, 700);\n }\n\n / --- Help Text & Error --- /\n\n .switch__help-text {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #6c757d));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n .switch__error {\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));\n line-height: var(--hx-line-height-normal, 1.5);\n }\n\n / --- Reduced Motion --- /\n\n @media (prefers-reduced-motion: reduce) {\n .switch__track,\n .switch__thumb {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSwitchStyles } from './hx-switch.styles.js';\n\n/\n A toggle switch component for on/off states.\n \n Uses `role=\"switch\"` with `aria-checked` to convey toggle state.\n * Supports keyboard activation via Space key (per ARIA APG switch pattern).\n * Label association is handled through `aria-labelledby`, and\n * error/help text are linked via `aria-describedby`.\n \n @summary Form-associated toggle switch with label, error, and help text.\n \n @tag hx-switch\n \n @slot - Custom label content (overrides the label property).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n \n @fires {CustomEvent<{checked: boolean, value: string}>} hx-change - Dispatched when the switch is toggled.\n \n @csspart switch - The switch container (track + thumb wrapper).\n * @csspart track - The track background element.\n * @csspart thumb - The sliding thumb element.\n * @csspart label - The label text element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n \n @cssprop [--hx-switch-track-bg=var(--hx-color-neutral-300)] - Track background color.\n * @cssprop [--hx-switch-track-checked-bg=var(--hx-color-primary-500)] - Track background when checked.\n * @cssprop [--hx-switch-thumb-bg=var(--hx-color-neutral-0)] - Thumb background color.\n * @cssprop [--hx-switch-thumb-shadow=var(--hx-shadow-sm)] - Thumb box shadow.\n * @cssprop [--hx-switch-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-switch-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-switch-error-color=var(--hx-color-error-500)] - Error message color.\n * @cssprop [--hx-switch-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n /\n@customElement('hx-switch')\nexport class HelixSwitch extends LitElement {\n static override styles = [tokenStyles, helixSwitchStyles];\n\n /* Monotonic counter for deterministic, unique IDs across instances. /\n private static _instanceCounter = 0;\n\n // ─── Form Association ───\n\n /* Enables the element to participate in form submission and validation. /\n static formAssociated = true;\n\n /* ElementInternals instance for form association, validation, and ARIA. /\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // ─── Properties ───\n\n /\n Whether the switch is toggled on.\n * @attr checked\n /\n @property({ type: Boolean, reflect: true })\n checked = false;\n\n /\n Whether the switch is disabled.\n * @attr disabled\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n Whether the switch is required for form submission.\n * @attr required\n /\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /\n The name of the switch, used for form submission.\n * @attr name\n /\n @property({ type: String })\n name = '';\n\n /\n The value submitted when the switch is checked.\n * @attr value\n /\n @property({ type: String })\n value = 'on';\n\n /\n The visible label text for the switch.\n * @attr label\n /\n @property({ type: String })\n label = '';\n\n /\n Size variant of the switch.\n * @attr hx-size\n /\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'sm' \| 'md' \| 'lg' = 'md';\n\n /\n Error message to display. When set, the switch enters an error state.\n * @attr error\n /\n @property({ type: String })\n error = '';\n\n /\n Help text displayed below the switch for guidance.\n * @attr help-text\n /\n @property({ type: String, attribute: 'help-text' })\n helpText = '';\n\n // ─── Lifecycle ───\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n if (changedProperties.has('checked') \|\| changedProperties.has('value')) {\n this._internals.setFormValue(this.checked ? this.value : null);\n this._updateValidity();\n }\n if (changedProperties.has('required')) {\n this._updateValidity();\n }\n }\n\n // ─── Form Integration ───\n\n /* Returns the associated form element, if any. /\n get form(): HTMLFormElement \| null {\n return this._internals.form;\n }\n\n /* Returns the validation message. /\n get validationMessage(): string {\n return this._internals.validationMessage;\n }\n\n /* Returns the ValidityState object. /\n get validity(): ValidityState {\n return this._internals.validity;\n }\n\n /* Checks whether the switch satisfies its constraints. /\n checkValidity(): boolean {\n return this._internals.checkValidity();\n }\n\n /* Reports validity and shows the browser's constraint validation UI. /\n reportValidity(): boolean {\n return this._internals.reportValidity();\n }\n\n /* Recalculates and sets the validity state based on required and checked. /\n private _updateValidity(): void {\n if (this.required && !this.checked) {\n this._internals.setValidity(\n { valueMissing: true },\n this.error \|\| 'This field is required.',\n this._trackEl ?? undefined,\n );\n } else {\n this._internals.setValidity({});\n }\n }\n\n /* Called by the form when it resets. /\n formResetCallback(): void {\n this.checked = false;\n this._internals.setFormValue(null);\n }\n\n /* Called when the form restores state (e.g., back/forward navigation). /\n formStateRestoreCallback(state: File \| string \| null, _mode: 'restore' \| 'autocomplete'): void {\n if (typeof state === 'string') {\n this.checked = state === this.value;\n }\n }\n\n /* Reference to the native button element acting as the switch track. /\n @query('.switch__track')\n private _trackEl!: HTMLButtonElement;\n\n /* Whether the error slot has assigned content. /\n @state() private _hasErrorSlot = false;\n\n /* Whether the default slot has assigned content (slotted label). /\n @state() private _hasDefaultSlot = false;\n\n // ─── Slot Handlers ───\n\n /* Updates _hasErrorSlot when error slot content changes. /\n private _handleErrorSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n /* Updates _hasDefaultSlot when default slot content changes. /\n private _handleDefaultSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasDefaultSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Event Handling ───\n\n /* Toggles checked state and dispatches hx-change event. /\n private _toggle(): void {\n if (this.disabled) return;\n this.checked = !this.checked;\n\n this.dispatchEvent(\n new CustomEvent('hx-change', {\n bubbles: true,\n composed: true,\n detail: { checked: this.checked, value: this.value },\n }),\n );\n }\n\n /* Handles click events on the track. /\n private _handleClick(): void {\n this._toggle();\n }\n\n /* Handles keydown events — Space toggles the switch per ARIA APG. /\n private _handleKeyDown(e: KeyboardEvent): void {\n if (e.key === ' ') {\n e.preventDefault();\n this._toggle();\n }\n }\n\n // ─── Public Methods ───\n\n /* Moves focus to the switch track element. /\n override focus(options?: FocusOptions): void {\n this._trackEl?.focus(options);\n }\n\n // ─── Render ───\n\n /* Unique ID for this switch instance, used for ARIA associations. /\n private _switchId = `hx-switch-${++HelixSwitch._instanceCounter}`;\n /* ID for the label element, referenced by aria-labelledby. /\n private _labelId = `${this._switchId}-label`;\n /* ID for the help text element, referenced by aria-describedby. /\n private _helpTextId = `${this._switchId}-help`;\n /* ID for the error element, referenced by aria-describedby. /\n private _errorId = `${this._switchId}-error`;\n\n override render() {\n const hasError = !!this.error;\n const hasLabel = !!this.label \|\| this._hasDefaultSlot;\n\n const containerClasses = {\n switch: true,\n 'switch--checked': this.checked,\n 'switch--disabled': this.disabled,\n 'switch--required': this.required,\n 'switch--error': hasError,\n [`switch--${this.size}`]: true,\n };\n\n const describedBy =\n [\n hasError \|\| this._hasErrorSlot ? this._errorId : null,\n this.helpText && !hasError ? this._helpTextId : null,\n ]\n .filter(Boolean)\n .join(' ') \|\| undefined;\n\n return html`\n <div part=\"switch\" class=${classMap(containerClasses)}>\n <div class=\"switch__control-row\">\n <button\n part=\"track\"\n class=\"switch__track\"\n type=\"button\"\n role=\"switch\"\n aria-checked=${this.checked ? 'true' : 'false'}\n aria-labelledby=${ifDefined(hasLabel ? this._labelId : undefined)}\n aria-describedby=${ifDefined(describedBy)}\n aria-invalid=${hasError ? 'true' : nothing}\n aria-required=${this.required ? 'true' : nothing}\n ?disabled=${this.disabled}\n @click=${this._handleClick}\n @keydown=${this._handleKeyDown}\n >\n <span part=\"thumb\" class=\"switch__thumb\"></span>\n </button>\n\n <span part=\"label\" class=\"switch__label\" id=${this._labelId} @click=${this._handleClick}>\n <slot @slotchange=${this._handleDefaultSlotChange}>${this.label}</slot>${this.required\n ? html`<span class=\"switch__required-marker\" aria-hidden=\"true\"></span>`\n : nothing}\n </span>\n </div>\n\n <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n ${hasError\n ? html`<div part=\"error\" class=\"switch__error\" id=${this._errorId} role=\"alert\">\n ${this.error}\n </div>`\n : nothing}\n </slot>\n\n ${this.helpText && !hasError\n ? html`\n <div part=\"help-text\" class=\"switch__help-text\" id=${this._helpTextId}>\n <slot name=\"help-text\">${this.helpText}</slot>\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-switch': HelixSwitch;\n }\n}\n\n/** @deprecated Use HxSwitch instead. */\nexport type WcSwitch = HelixSwitch;\nexport type HxSwitch = HelixSwitch;\n"],"names":["helixSwitchStyles","css","HelixSwitch","LitElement","changedProperties","state","_mode","e","slot","options","_a","hasError","hasLabel","containerClasses","describedBy","html","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}