@helixui/library 1.1.2 → 2.0.0-next.31

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

@@ -1,14 +1,14 @@
-import { css as x, LitElement as u, nothing as f, html as d } from "lit";
-import { property as a, customElement as v } from "lit/decorators.js";
-import { tokenStyles as m } from "@helixui/tokens/lit";
-const b = x`
+import { css as x, LitElement as v, nothing as f, html as d } from "lit";
+import "./document-token-adoption-DuYNKd4k.js";
+import { property as a, customElement as u } from "lit/decorators.js";
+const m = x`
   :host {
     display: block;
 
     /* ─── Size defaults (md) ─── */
-    --hx-steps-indicator-size: 2rem;
+    --hx-steps-indicator-size: var(--hx-size-8, 2rem);
     --hx-steps-indicator-font-size: var(--hx-font-size-sm, 0.875rem);
-    --hx-steps-indicator-icon-size: 1rem;
+    --hx-steps-indicator-icon-size: var(--hx-size-4, 1rem);
     --hx-steps-label-font-size: var(--hx-font-size-sm, 0.875rem);
     --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);
 
@@ -37,9 +37,9 @@ const b = x`
   /* ─── Size: sm ─── */
 
   :host([size='sm']) {
-    --hx-steps-indicator-size: 1.5rem;
+    --hx-steps-indicator-size: var(--hx-size-6, 1.5rem);
     --hx-steps-indicator-font-size: var(--hx-font-size-xs, 0.75rem);
-    --hx-steps-indicator-icon-size: 0.75rem;
+    --hx-steps-indicator-icon-size: var(--hx-space-3, 0.75rem);
     --hx-steps-label-font-size: var(--hx-font-size-xs, 0.75rem);
     --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);
   }
@@ -47,34 +47,34 @@ const b = x`
   /* ─── Size: lg ─── */
 
   :host([size='lg']) {
-    --hx-steps-indicator-size: 2.5rem;
+    --hx-steps-indicator-size: var(--hx-size-10, 2.5rem);
     --hx-steps-indicator-font-size: var(--hx-font-size-md, 1rem);
-    --hx-steps-indicator-icon-size: 1.25rem;
+    --hx-steps-indicator-icon-size: var(--hx-size-5, 1.25rem);
     --hx-steps-label-font-size: var(--hx-font-size-md, 1rem);
     --hx-steps-description-font-size: var(--hx-font-size-sm, 0.875rem);
   }
 `;
-var _ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (t, r, i, s) => {
-  for (var e = s > 1 ? void 0 : s ? y(r, i) : r, l = t.length - 1, c; l >= 0; l--)
-    (c = t[l]) && (e = (s ? c(r, i, e) : c(e)) || e);
-  return s && e && _(r, i, e), e;
+var b = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, p = (t, i, r, s) => {
+  for (var e = s > 1 ? void 0 : s ? _(i, r) : i, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (e = (s ? h(i, r, e) : h(e)) || e);
+  return s && e && b(i, r, e), e;
 };
-let h = class extends u {
+let c = class extends v {
   constructor() {
     super(...arguments), this.orientation = "horizontal", this.size = "md", this.ariaLabel = null, this._handleSlotChange = () => {
       this._syncChildren();
     }, this._handleStepClickInternal = (t) => {
       t.stopPropagation();
-      const r = this._getSteps(), i = t.composedPath().find(
+      const i = this._getSteps(), r = t.composedPath().find(
         (e) => e instanceof Element && e.tagName.toLowerCase() === "hx-step"
       );
-      if (!i) return;
-      const s = r.indexOf(i);
+      if (!r) return;
+      const s = i.indexOf(r);
       this.dispatchEvent(
         new CustomEvent("hx-step-click", {
           bubbles: !0,
           composed: !0,
-          detail: { step: i, index: s }
+          detail: { step: r, index: s }
         })
       );
     };
@@ -83,7 +83,7 @@ let h = class extends u {
   connectedCallback() {
     super.connectedCallback();
     const t = this.getAttribute("size");
-    t !== null && !this.hasAttribute("hx-size") && (this.size = t), this.addEventListener("hx-step-click-internal", this._handleStepClickInternal);
+    t !== null && !this.hasAttribute("hx-size") && (this.size = t), this.ariaLabel, this.hasAttribute("role") || this.setAttribute("role", "none"), this.addEventListener("hx-step-click-internal", this._handleStepClickInternal);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("hx-step-click-internal", this._handleStepClickInternal);
@@ -101,8 +101,8 @@ let h = class extends u {
   }
   /** @internal */
   _syncChildren() {
-    this._getSteps().forEach((r, i) => {
-      r.orientation = this.orientation, r.size = this.size, r.index = i;
+    this._getSteps().forEach((i, r) => {
+      i.orientation = this.orientation, i.size = this.size, i.index = r;
     });
   }
   // ─── Render ───
@@ -114,19 +114,19 @@ let h = class extends u {
     `;
   }
 };
-h.styles = [m, b];
+c.styles = [m];
 p([
   a({ type: String, reflect: !0 })
-], h.prototype, "orientation", 2);
+], c.prototype, "orientation", 2);
 p([
   a({ type: String, reflect: !0, attribute: "hx-size" })
-], h.prototype, "size", 2);
+], c.prototype, "size", 2);
 p([
   a({ type: String, attribute: "aria-label" })
-], h.prototype, "ariaLabel", 2);
-h = p([
-  v("hx-steps")
-], h);
+], c.prototype, "ariaLabel", 2);
+c = p([
+  u("hx-steps")
+], c);
 const g = x`
   :host {
     display: flex;
@@ -162,8 +162,8 @@ const g = x`
   /* ─── Focus ─── */
 
   :host(:focus-visible) .step__indicator {
-    outline: 2px solid var(--hx-color-primary-500);
-    outline-offset: 2px;
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-color-primary-500);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   /* ─── Track (indicator + connector) ─── */
@@ -185,7 +185,7 @@ const g = x`
     width: var(--hx-steps-indicator-size, 2rem);
     height: var(--hx-steps-indicator-size, 2rem);
     border-radius: var(--hx-border-radius-full, 9999px);
-    border: 2px solid var(--hx-color-neutral-300);
+    border: var(--hx-border-width-medium, 2px) solid var(--hx-color-neutral-300);
     background-color: var(--hx-color-neutral-0);
     color: var(--hx-color-neutral-500);
     font-size: var(--hx-steps-indicator-font-size, var(--hx-font-size-sm));
@@ -290,7 +290,7 @@ const g = x`
 
   :host([disabled]) .step {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--hx-opacity-disabled, 0.5);
     pointer-events: none;
   }
 
@@ -328,7 +328,7 @@ const g = x`
   }
 
   :host([orientation='vertical']) .step__label-area {
-    text-align: left;
+    text-align: start;
     margin-top: 0;
     padding-bottom: var(--hx-space-4, 1rem);
     padding-inline-start: 0;
@@ -347,55 +347,15 @@ const g = x`
       transition: none;
     }
   }
-
-  /* ─── Dark Mode ─── */
-
-  @media (prefers-color-scheme: dark) {
-    .step__indicator {
-      background-color: var(--hx-color-neutral-800);
-      border-color: var(--hx-color-neutral-600);
-      color: var(--hx-color-neutral-300);
-    }
-
-    .step__connector {
-      background-color: var(--hx-color-neutral-700);
-    }
-
-    .step__label {
-      color: var(--hx-color-neutral-300);
-    }
-
-    .step__description {
-      color: var(--hx-color-neutral-400);
-    }
-
-    :host([status='active']) .step__label {
-      color: var(--hx-color-primary-300);
-    }
-
-    :host([status='complete']) .step__label {
-      color: var(--hx-color-neutral-200);
-    }
-
-    :host([status='error']) .step__label {
-      color: var(--hx-color-error-300);
-    }
-
-    :host([disabled]) .step__indicator {
-      background-color: var(--hx-color-neutral-900);
-      border-color: var(--hx-color-neutral-700);
-      color: var(--hx-color-neutral-600);
-    }
-  }
 `;
-var z = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (t, r, i, s) => {
-  for (var e = s > 1 ? void 0 : s ? k(r, i) : r, l = t.length - 1, c; l >= 0; l--)
-    (c = t[l]) && (e = (s ? c(r, i, e) : c(e)) || e);
-  return s && e && z(r, i, e), e;
+var y = Object.defineProperty, z = Object.getOwnPropertyDescriptor, n = (t, i, r, s) => {
+  for (var e = s > 1 ? void 0 : s ? z(i, r) : i, l = t.length - 1, h; l >= 0; l--)
+    (h = t[l]) && (e = (s ? h(i, r, e) : h(e)) || e);
+  return s && e && y(i, r, e), e;
 };
-let o = class extends u {
+let o = class extends v {
   constructor() {
-    super(...arguments), this.label = "", this.status = "pending", this.description = "", this.disabled = !1, this.orientation = "horizontal", this.size = "md", this.index = 0, this._handleKeydown = (t) => {
+    super(...arguments), this.label = "", this.status = "pending", this.description = "", this.disabled = !1, this.orientation = "horizontal", this.size = "md", this.index = 0, this._liveMessage = "", this._handleKeydown = (t) => {
       (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._handleClick());
     };
   }
@@ -406,6 +366,9 @@ let o = class extends u {
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeydown);
   }
+  willUpdate(t) {
+    t.has("status") && t.get("status") !== void 0 && (this.status === "complete" ? this._liveMessage = "Complete" : this.status === "error" ? this._liveMessage = "Error" : this._liveMessage = "");
+  }
   updated(t) {
     super.updated(t), t.has("status") && (this.status === "active" ? this.setAttribute("aria-current", "step") : this.removeAttribute("aria-current")), t.has("disabled") && (this.disabled ? (this.setAttribute("tabindex", "-1"), this.setAttribute("aria-disabled", "true")) : (this.setAttribute("tabindex", "0"), this.removeAttribute("aria-disabled"))), t.has("orientation") && this.setAttribute("orientation", this.orientation), t.has("size") && this.setAttribute("size", this.size);
   }
@@ -473,10 +436,11 @@ let o = class extends u {
           </div>
         </div>
       </div>
+      <div aria-live="polite" aria-atomic="true" class="sr-only">${this._liveMessage}</div>
     `;
   }
 };
-o.styles = [m, g];
+o.styles = [g];
 n([
   a({ type: String, reflect: !0 })
 ], o.prototype, "label", 2);
@@ -499,10 +463,10 @@ n([
   a({ type: Number })
 ], o.prototype, "index", 2);
 o = n([
-  v("hx-step")
+  u("hx-step")
 ], o);
 export {
   o as H,
-  h as a
+  c as a
 };
-//# sourceMappingURL=hx-step-BIVWSPxd.js.map
+//# sourceMappingURL=hx-step-C2Jk4mHa.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-step-C2Jk4mHa.js","sources":["../../src/components/hx-steps/hx-steps.styles.ts","../../src/components/hx-steps/hx-steps.ts","../../src/components/hx-steps/hx-step.styles.ts","../../src/components/hx-steps/hx-step.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixStepsStyles = css`\n  :host {\n    display: block;\n\n    /* ─── Size defaults (md) ─── */\n    --hx-steps-indicator-size: var(--hx-size-8, 2rem);\n    --hx-steps-indicator-font-size: var(--hx-font-size-sm, 0.875rem);\n    --hx-steps-indicator-icon-size: var(--hx-size-4, 1rem);\n    --hx-steps-label-font-size: var(--hx-font-size-sm, 0.875rem);\n    --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);\n\n    /* ─── Item layout defaults (horizontal) ─── */\n    --hx-steps-item-flex: 1;\n    --hx-steps-item-width: auto;\n  }\n\n  .steps {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  /* ─── Orientation: vertical ─── */\n\n  :host([orientation='vertical']) {\n    --hx-steps-item-flex: initial;\n    --hx-steps-item-width: 100%;\n  }\n\n  :host([orientation='vertical']) .steps {\n    flex-direction: column;\n  }\n\n  /* ─── Size: sm ─── */\n\n  :host([size='sm']) {\n    --hx-steps-indicator-size: var(--hx-size-6, 1.5rem);\n    --hx-steps-indicator-font-size: var(--hx-font-size-xs, 0.75rem);\n    --hx-steps-indicator-icon-size: var(--hx-space-3, 0.75rem);\n    --hx-steps-label-font-size: var(--hx-font-size-xs, 0.75rem);\n    --hx-steps-description-font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  /* ─── Size: lg ─── */\n\n  :host([size='lg']) {\n    --hx-steps-indicator-size: var(--hx-size-10, 2.5rem);\n    --hx-steps-indicator-font-size: var(--hx-font-size-md, 1rem);\n    --hx-steps-indicator-icon-size: var(--hx-size-5, 1.25rem);\n    --hx-steps-label-font-size: var(--hx-font-size-md, 1rem);\n    --hx-steps-description-font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { 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 = [helixStepsStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Layout orientation of the steps.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Size variant of the steps.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Accessible label for the list. Forwarded to the inner list element.\n   * @attr aria-label\n   */\n  @property({ type: String, attribute: 'aria-label' })\n  ariaLabel: string | null = null;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n    // is not set, map the value and emit a deprecation warning.\n    const legacySize = this.getAttribute('size');\n    if (legacySize !== null && !this.hasAttribute('hx-size')) {\n      devWarn('hx-steps', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as 'sm' | 'md' | 'lg';\n    }\n    // STEPS-002: WCAG 2.1 SC 4.1.2 — the inner list must have an accessible name.\n    // Warn developers when aria-label is missing so the list is not anonymous.\n    if (!this.ariaLabel) {\n      devWarn(\n        'hx-steps',\n        'An \"aria-label\" attribute is required to provide an accessible name for the steps list (WCAG 2.1 SC 4.1.2).',\n      );\n    }\n    // WCAG 4.1.2: suppress the host element's implicit ARIA role so only the\n    // inner div[role=\"list\"] is announced. Mirrors the hx-action-bar pattern.\n    // Without this, the consumer's aria-label attribute on the host causes dual\n    // announcement — once for the host element and once for the inner list.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'none');\n    }\n    this.addEventListener('hx-step-click-internal', this._handleStepClickInternal);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('hx-step-click-internal', this._handleStepClickInternal);\n  }\n\n  override firstUpdated(): void {\n    this._syncChildren();\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('orientation') || changedProperties.has('size')) {\n      this._syncChildren();\n    }\n  }\n\n  // ─── Child Sync ───\n\n  /** @internal */\n  private _getSteps(): HelixStep[] {\n    return Array.from(this.querySelectorAll(':scope > hx-step')) as HelixStep[];\n  }\n\n  /** @internal */\n  private _syncChildren(): void {\n    const steps = this._getSteps();\n    steps.forEach((step, i) => {\n      step.orientation = this.orientation;\n      step.size = this.size;\n      step.index = i;\n    });\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleSlotChange = (): void => {\n    this._syncChildren();\n  };\n\n  /** @internal */\n  private _handleStepClickInternal = (e: Event): void => {\n    e.stopPropagation();\n    const steps = this._getSteps();\n    const step = e\n      .composedPath()\n      .find(\n        (el): el is HelixStep => el instanceof Element && el.tagName.toLowerCase() === 'hx-step',\n      );\n    if (!step) return;\n    const index = steps.indexOf(step);\n\n    /**\n     * Dispatched when a step is clicked.\n     * @event hx-step-click\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ step: HelixStep; index: number }>('hx-step-click', {\n        bubbles: true,\n        composed: true,\n        detail: { step, index },\n      }),\n    );\n  };\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"steps\" role=\"list\" aria-label=${this.ariaLabel ?? nothing}>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-steps': HelixSteps;\n  }\n}\n","import { css } from 'lit';\n\nexport const helixStepStyles = css`\n  :host {\n    display: flex;\n    flex: var(--hx-steps-item-flex, 1);\n    width: var(--hx-steps-item-width, auto);\n    min-width: 0;\n  }\n\n  /* ─── Visually Hidden (SR only) ─── */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* ─── Step Wrapper ─── */\n\n  .step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100%;\n    cursor: pointer;\n  }\n\n  /* ─── Focus ─── */\n\n  :host(:focus-visible) .step__indicator {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-color-primary-500);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Track (indicator + connector) ─── */\n\n  .step__track {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    width: 100%;\n  }\n\n  /* ─── Indicator ─── */\n\n  .step__indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--hx-steps-indicator-size, 2rem);\n    height: var(--hx-steps-indicator-size, 2rem);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    border: var(--hx-border-width-medium, 2px) solid var(--hx-color-neutral-300);\n    background-color: var(--hx-color-neutral-0);\n    color: var(--hx-color-neutral-500);\n    font-size: var(--hx-steps-indicator-font-size, var(--hx-font-size-sm));\n    font-weight: var(--hx-font-weight-semibold);\n    font-family: var(--hx-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: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  :host([disabled]) .step__indicator {\n    border-color: var(--hx-color-neutral-300);\n    background-color: var(--hx-color-neutral-100);\n    color: var(--hx-color-neutral-400);\n  }\n\n  /* ─── Vertical Layout ─── */\n\n  :host([orientation='vertical']) {\n    flex: initial;\n    width: 100%;\n  }\n\n  :host([orientation='vertical']) .step {\n    flex-direction: row;\n    align-items: flex-start;\n    gap: var(--hx-space-3, 0.75rem);\n  }\n\n  :host([orientation='vertical']) .step__track {\n    flex-direction: column;\n    align-items: center;\n    width: auto;\n    flex-shrink: 0;\n  }\n\n  :host([orientation='vertical']) .step__connector {\n    width: var(--hx-steps-connector-thickness, var(--hx-border-width, 2px));\n    height: auto;\n    min-height: var(--hx-space-8, 2rem);\n    flex: 1;\n  }\n\n  :host([orientation='vertical']) .step__label-area {\n    text-align: start;\n    margin-top: 0;\n    padding-bottom: var(--hx-space-4, 1rem);\n    padding-inline-start: 0;\n  }\n\n  :host([orientation='vertical']:last-child) .step__label-area {\n    padding-bottom: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .step__indicator {\n      transition: none;\n    }\n\n    .step__connector {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { helixStepStyles } from './hx-step.styles.js';\n\n/**\n * An individual step, designed to be used inside an `<hx-steps>` container.\n * Represents a single step in a multi-step wizard or progress indicator.\n *\n * @summary Individual step item within an `<hx-steps>` progress indicator.\n *\n * @tag hx-step\n *\n * @slot icon - Custom icon for the step indicator. Shown when status is `pending` or `active`.\n * @slot label - Step label text. Falls back to the `label` property.\n * @slot description - Step description text. Falls back to the `description` property.\n *\n * @csspart base - The outermost wrapper element.\n * @csspart indicator - The circular step indicator.\n * @csspart connector - The line connecting this step to the next.\n * @csspart label - The step label element.\n * @csspart description - The step description element.\n *\n * @cssprop [--hx-steps-indicator-size=2rem] - Indicator circle diameter.\n * @cssprop [--hx-steps-indicator-font-size=var(--hx-font-size-sm)] - Indicator text size.\n * @cssprop [--hx-steps-indicator-icon-size=1rem] - Indicator icon size.\n * @cssprop [--hx-steps-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-steps-description-font-size=var(--hx-font-size-xs)] - Description font size.\n * @cssprop [--hx-steps-connector-color=var(--hx-color-neutral-200)] - Connector line color.\n * @cssprop [--hx-steps-connector-complete-color=var(--hx-color-primary-500)] - Connector color when step is complete.\n * @cssprop [--hx-steps-connector-thickness=var(--hx-border-width,2px)] - Connector line thickness.\n * @cssprop [--hx-steps-label-color=var(--hx-color-neutral-600)] - Label text color.\n * @cssprop [--hx-steps-description-color=var(--hx-color-neutral-500)] - Description text color.\n */\n@customElement('hx-step')\nexport class HelixStep extends LitElement {\n  static override styles = [helixStepStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * The step label text.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label = '';\n\n  /**\n   * Current status of the step.\n   * @attr status\n   */\n  @property({ type: String, reflect: true })\n  status: 'pending' | 'active' | 'complete' | 'error' = 'pending';\n\n  /**\n   * Optional description text shown below the label.\n   * @attr description\n   */\n  @property({ type: String, reflect: true })\n  description = '';\n\n  /**\n   * Whether the step is disabled and non-interactive.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  // ─── Internal Properties (set by parent hx-steps) ───\n\n  /**\n   * Layout orientation. Set by the parent `<hx-steps>` container via JS property.\n   * Do not set this attribute directly on `<hx-step>` — use the `orientation`\n   * property on the parent `<hx-steps>` container instead. The parent will\n   * propagate the value to all child steps via `_syncChildren()`.\n   * @internal\n   */\n  @property({ attribute: false })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Size variant. Set by the parent `<hx-steps>` container via JS property.\n   * Do not set this attribute directly on `<hx-step>` — use the `size` property\n   * on the parent `<hx-steps>` container instead. The parent will propagate the\n   * value to all child steps via `_syncChildren()`.\n   * @internal\n   */\n  @property({ attribute: false })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Zero-based index of this step. Set by the parent `<hx-steps>` container.\n   * @internal\n   */\n  @property({ type: Number })\n  index = 0;\n\n  // ─── Internal State ───\n\n  /**\n   * Text for the aria-live region, updated on status transitions.\n   * Non-reactive: computed in willUpdate() to avoid an extra render cycle.\n   * @internal\n   */\n  private _liveMessage = '';\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    this.setAttribute('tabindex', this.disabled ? '-1' : '0');\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n  }\n\n  override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('status')) {\n      // STEPS-003: announce status transitions to screen readers via aria-live region.\n      // Only announce on transitions (not initial render) by checking the previous value.\n      // Using a non-reactive field here avoids scheduling an extra render cycle.\n      const prev = changedProperties.get('status');\n      if (prev !== undefined) {\n        if (this.status === 'complete') {\n          this._liveMessage = 'Complete';\n        } else if (this.status === 'error') {\n          this._liveMessage = 'Error';\n        } else {\n          this._liveMessage = '';\n        }\n      }\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('status')) {\n      if (this.status === 'active') {\n        this.setAttribute('aria-current', 'step');\n      } else {\n        this.removeAttribute('aria-current');\n      }\n    }\n    if (changedProperties.has('disabled')) {\n      if (this.disabled) {\n        this.setAttribute('tabindex', '-1');\n        this.setAttribute('aria-disabled', 'true');\n      } else {\n        this.setAttribute('tabindex', '0');\n        this.removeAttribute('aria-disabled');\n      }\n    }\n    if (changedProperties.has('orientation')) {\n      this.setAttribute('orientation', this.orientation);\n    }\n    if (changedProperties.has('size')) {\n      this.setAttribute('size', this.size);\n    }\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this._handleClick();\n    }\n  };\n\n  /** @internal */\n  private _handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    /**\n     * Internal event dispatched to signal step click to the parent container.\n     * @internal\n     */\n    this.dispatchEvent(\n      new CustomEvent<void>('hx-step-click-internal', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderCheckmark() {\n    return html`\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path d=\"M20 6L9 17l-5-5\" />\n      </svg>\n      <span class=\"sr-only\">Complete</span>\n    `;\n  }\n\n  /** @internal */\n  private _renderXMark() {\n    return html`\n      <svg\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2.5\"\n        stroke-linecap=\"round\"\n      >\n        <path d=\"M18 6L6 18M6 6l12 12\" />\n      </svg>\n      <span class=\"sr-only\">Error</span>\n    `;\n  }\n\n  /** @internal */\n  private _renderIndicatorContent() {\n    if (this.status === 'complete') {\n      return this._renderCheckmark();\n    }\n    if (this.status === 'error') {\n      return this._renderXMark();\n    }\n    return html`<slot name=\"icon\">${this.index + 1}</slot>`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"step\" @click=${this._handleClick}>\n        <div class=\"step__track\">\n          <div part=\"indicator\" class=\"step__indicator\">${this._renderIndicatorContent()}</div>\n          <div part=\"connector\" class=\"step__connector\" aria-hidden=\"true\"></div>\n        </div>\n        <div class=\"step__label-area\">\n          <div part=\"label\" class=\"step__label\">\n            <slot name=\"label\">${this.label}</slot>\n          </div>\n          <div part=\"description\" class=\"step__description\">\n            <slot name=\"description\">${this.description}</slot>\n          </div>\n        </div>\n      </div>\n      <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">${this._liveMessage}</div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-step': HelixStep;\n  }\n}\n"],"names":["helixStepsStyles","css","HelixSteps","LitElement","e","steps","step","el","index","legacySize","changedProperties","i","html","nothing","__decorateClass","property","customElement","helixStepStyles","HelixStep","event"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import { css as p, LitElement as u, html as h } from "lit";
-import { property as n, customElement as v } from "lit/decorators.js";
-import { tokenStyles as b } from "@helixui/tokens/lit";
+import { css as p, LitElement as h, nothing as b, html as u } from "lit";
+import "./document-token-adoption-DuYNKd4k.js";
+import { property as l, customElement as v } from "lit/decorators.js";
 const x = p`
   :host {
     display: block;
@@ -75,45 +75,48 @@ const x = p`
     display: none;
   }
 `;
-var _ = Object.defineProperty, f = Object.getOwnPropertyDescriptor, t = (c, s, l, o) => {
-  for (var r = o > 1 ? void 0 : o ? f(s, l) : s, a = c.length - 1, i; a >= 0; a--)
-    (i = c[a]) && (r = (o ? i(s, l, r) : i(r)) || r);
-  return o && r && _(s, l, r), r;
+var _ = Object.defineProperty, f = Object.getOwnPropertyDescriptor, t = (c, s, a, o) => {
+  for (var r = o > 1 ? void 0 : o ? f(s, a) : s, i = c.length - 1, d; i >= 0; i--)
+    (d = c[i]) && (r = (o ? d(s, a, r) : d(r)) || r);
+  return o && r && _(s, a, r), r;
 };
-let e = class extends u {
+let e = class extends h {
   constructor() {
-    super(...arguments), this.bordered = !1, this.condensed = !1, this.striped = !1;
+    super(...arguments), this.label = "", this.bordered = !1, this.condensed = !1, this.striped = !1;
   }
   connectedCallback() {
     super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "list");
   }
   render() {
-    return h`
-      <div part="base" class="list">
+    return u`
+      <div part="base" class="list" aria-label=${this.label || b}>
         <slot></slot>
       </div>
     `;
   }
 };
-e.styles = [b, x];
+e.styles = [x];
 t([
-  n({ type: Boolean, reflect: !0 })
+  l({ type: String })
+], e.prototype, "label", 2);
+t([
+  l({ type: Boolean, reflect: !0 })
 ], e.prototype, "bordered", 2);
 t([
-  n({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], e.prototype, "condensed", 2);
 t([
-  n({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], e.prototype, "striped", 2);
 e = t([
   v("hx-structured-list")
 ], e);
-let d = class extends u {
+let n = class extends h {
   connectedCallback() {
     super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem");
   }
   render() {
-    return h`
+    return u`
       <div part="base" class="row">
         <div part="label" class="row__label">
           <slot name="label"></slot>
@@ -128,12 +131,12 @@ let d = class extends u {
     `;
   }
 };
-d.styles = [b, m];
-d = t([
+n.styles = [m];
+n = t([
   v("hx-structured-list-row")
-], d);
+], n);
 export {
   e as H,
-  d as a
+  n as a
 };
-//# sourceMappingURL=hx-structured-list-CMWllxGg.js.map
+//# sourceMappingURL=hx-structured-list-DKlrv7kS.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-structured-list-DKlrv7kS.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, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n  helixStructuredListStyles,\n  helixStructuredListRowStyles,\n} from './hx-structured-list.styles.js';\n\n/**\n * Container for structured key-value data display. Renders as a list with\n * `role=\"list\"` on the host and `role=\"listitem\"` on each `hx-structured-list-row`,\n * preserving the list/listitem relationship across shadow DOM boundaries.\n * Use `hx-structured-list-row` as direct children.\n *\n * @summary Key-value data display container for detail and summary views.\n *\n * @tag hx-structured-list\n *\n * @slot - One or more `hx-structured-list-row` elements.\n *\n * @csspart base - The root list element.\n *\n * @cssprop [--hx-structured-list-border-color=var(--hx-color-neutral-200)] - Border color when bordered.\n * @cssprop [--hx-structured-list-border-width=var(--hx-border-width-thin)] - Border width when bordered.\n * @cssprop [--hx-structured-list-stripe-bg=var(--hx-color-neutral-50)] - Stripe background color.\n * @cssprop [--hx-structured-list-padding-block=var(--hx-space-4)] - Row block padding.\n * @cssprop [--hx-structured-list-padding-inline=var(--hx-space-4)] - Row inline padding.\n * @cssprop [--hx-structured-list-condensed-padding-block=var(--hx-space-2)] - Row block padding (condensed).\n * @cssprop [--hx-structured-list-condensed-padding-inline=var(--hx-space-3)] - Row inline padding (condensed).\n */\n@customElement('hx-structured-list')\nexport class HelixStructuredList extends LitElement {\n  static override styles = [helixStructuredListStyles];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Set role on the host element so the list/listitem relationship is\n    // preserved in the light DOM tree, crossing shadow boundaries correctly.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'list');\n    }\n  }\n\n  /**\n   * Accessible label for the list container. Use when multiple structured lists appear\n   * on the same page so screen readers can distinguish them (WCAG 4.1.2).\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Renders a border around the entire list.\n   * @attr bordered\n   */\n  @property({ type: Boolean, reflect: true })\n  bordered = false;\n\n  /**\n   * Reduces row padding for denser layouts.\n   * @attr condensed\n   */\n  @property({ type: Boolean, reflect: true })\n  condensed = false;\n\n  /**\n   * Alternates row background colors for easier scanning.\n   * @attr striped\n   */\n  @property({ type: Boolean, reflect: true })\n  striped = false;\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"list\" aria-label=${this.label || nothing}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n/**\n * A single row within an `hx-structured-list`. Renders a label/value pair\n * with an optional actions area.\n *\n * @summary A label-value row for use inside `hx-structured-list`.\n *\n * @tag hx-structured-list-row\n *\n * @slot label - The term or key label (`<dt>` semantics).\n * @slot - The value or definition (`<dd>` semantics).\n * @slot actions - Optional action controls (edit button, etc.).\n *\n * @csspart base - The root row element.\n * @csspart label - The label (`dt`) cell.\n * @csspart value - The value (`dd`) cell.\n * @csspart actions - The actions cell.\n *\n * @cssprop [--hx-structured-list-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-structured-list-value-color=var(--hx-color-neutral-900)] - Value text color.\n */\n@customElement('hx-structured-list-row')\nexport class HelixStructuredListRow extends LitElement {\n  static override styles = [helixStructuredListRowStyles];\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Set role on the host element so screen readers see listitem as a direct\n    // child of the hx-structured-list host (which carries role=\"list\"),\n    // preserving the list/listitem relationship across shadow boundaries.\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n  }\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"row\">\n        <div part=\"label\" class=\"row__label\">\n          <slot name=\"label\"></slot>\n        </div>\n        <div part=\"value\" class=\"row__value\">\n          <slot></slot>\n          <div part=\"actions\" class=\"row__actions\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-structured-list': HelixStructuredList;\n    'hx-structured-list-row': HelixStructuredListRow;\n  }\n}\n"],"names":["helixStructuredListStyles","css","helixStructuredListRowStyles","HelixStructuredList","LitElement","html","nothing","__decorateClass","property","customElement","HelixStructuredListRow"],"mappings":";;;AAEO,MAAMA,IAA4BC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,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;;;;;;ACPrC,IAAME,IAAN,cAAkCC,EAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GAkBL,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,YAAY,IAOZ,KAAA,UAAU;AAAA,EAAA;AAAA,EApCD,oBAA0B;AACjC,UAAM,kBAAA,GAGD,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,MAAM;AAAA,EAEpC;AAAA,EA+BS,SAAS;AAChB,WAAOC;AAAA,iDACsC,KAAK,SAASC,CAAO;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AAhDaH,EACK,SAAS,CAACH,CAAyB;AAiBnDO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjBfL,EAkBX,WAAA,SAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAxB/BL,EAyBX,WAAA,YAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/B/BL,EAgCX,WAAA,aAAA,CAAA;AAOAI,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtC/BL,EAuCX,WAAA,WAAA,CAAA;AAvCWA,IAANI,EAAA;AAAA,EADNE,EAAc,oBAAoB;AAAA,GACtBN,CAAA;AAuEN,IAAMO,IAAN,cAAqCN,EAAW;AAAA,EAG5C,oBAA0B;AACjC,UAAM,kBAAA,GAID,KAAK,aAAa,MAAM,KAC3B,KAAK,aAAa,QAAQ,UAAU;AAAA,EAExC;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaT;AACF;AA5BaK,EACK,SAAS,CAACR,CAA4B;AAD3CQ,IAANH,EAAA;AAAA,EADNE,EAAc,wBAAwB;AAAA,GAC1BC,CAAA;"}

package/dist/shared/hx-style-scope-CsQ2Phf_.js

@@ -0,0 +1,126 @@
+import { css as b, LitElement as x, html as C } from "lit";
+import "./document-token-adoption-DuYNKd4k.js";
+import { property as f, customElement as $ } from "lit/decorators.js";
+const _ = b`
+  :host {
+    display: contents;
+  }
+`, a = /* @__PURE__ */ new Map();
+function w(t) {
+  return a.has(t);
+}
+function E(t, r) {
+  a.set(t, r);
+}
+function O(t, r) {
+  const n = `[data-hx-styled="${t}"]`;
+  return y(r, n);
+}
+function l(t, r) {
+  return t[r] ?? "";
+}
+function y(t, r) {
+  const n = [];
+  let e = 0;
+  const i = t.length;
+  for (; e < i; ) {
+    for (; e < i && /\s/.test(l(t, e)); )
+      n.push(l(t, e)), e++;
+    if (e >= i) break;
+    if (l(t, e) === "@") {
+      const d = A(t, e);
+      n.push(j(d.text, r)), e = d.end;
+      continue;
+    }
+    const o = t.indexOf("{", e);
+    if (o === -1) break;
+    const s = t.slice(e, o), h = o + 1, p = m(t, o);
+    if (p === -1) break;
+    const g = t.slice(h, p), S = v(s, r);
+    n.push(`${S}{${g}}`), e = p + 1;
+  }
+  return n.join("");
+}
+function v(t, r) {
+  return t.split(",").map((n) => {
+    const e = n.trim();
+    if (e.startsWith("::slotted(") && e.endsWith(")")) {
+      const i = e.slice(10, -1).trim();
+      return `${r} ${i}`;
+    }
+    return e === ":host" || e.startsWith(":host(") || e.startsWith(":host ") ? e.replace(/^:host(\([^)]*\))?/, r) : `${r} ${e}`;
+  }).join(", ");
+}
+function j(t, r) {
+  const n = /^@(media|supports|layer|container|document)\b/, e = t.indexOf("{");
+  if (e === -1 || !n.test(t.trim()))
+    return t;
+  const i = t.slice(0, e + 1), o = t.lastIndexOf("}"), s = t.slice(e + 1, o), h = t.slice(o);
+  return `${i}${y(s, r)}${h}`;
+}
+function A(t, r) {
+  let n = r;
+  for (; n < t.length && l(t, n) !== "{" && l(t, n) !== ";"; )
+    n++;
+  if (n >= t.length)
+    return { text: t.slice(r), end: t.length };
+  if (l(t, n) === ";")
+    return { text: t.slice(r, n + 1), end: n + 1 };
+  const e = m(t, n);
+  return e === -1 ? { text: t.slice(r), end: t.length } : { text: t.slice(r, e + 1), end: e + 1 };
+}
+function m(t, r) {
+  let n = 0;
+  for (let e = r; e < t.length; e++) {
+    const i = l(t, e);
+    if (i === "{") n++;
+    else if (i === "}" && (n--, n === 0))
+      return e;
+  }
+  return -1;
+}
+function P(t, r) {
+  if (typeof document > "u" || w(t)) return;
+  const n = O(t, r), e = document.createElement("style");
+  e.setAttribute("data-hx-light-styles", t), e.textContent = n, document.head.appendChild(e), E(t, e);
+}
+var W = Object.defineProperty, B = Object.getOwnPropertyDescriptor, u = (t, r, n, e) => {
+  for (var i = e > 1 ? void 0 : e ? B(r, n) : r, o = t.length - 1, s; o >= 0; o--)
+    (s = t[o]) && (i = (e ? s(r, n, i) : s(i)) || i);
+  return e && i && W(r, n, i), i;
+};
+let c = class extends x {
+  constructor() {
+    super(...arguments), this.component = "", this.lightCss = "";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._applyScope();
+  }
+  updated(t) {
+    (t.has("component") || t.has("lightCss")) && this._applyScope();
+  }
+  /**
+   * Applies the `data-hx-styled` attribute and triggers style injection.
+   * Called on connect and whenever `component` or `lightCss` changes.
+   */
+  _applyScope() {
+    this.component && (this.setAttribute("data-hx-styled", this.component), this.lightCss && P(this.component, this.lightCss));
+  }
+  render() {
+    return C`<slot></slot>`;
+  }
+};
+c.styles = [_];
+u([
+  f({ type: String, reflect: !0 })
+], c.prototype, "component", 2);
+u([
+  f({ type: String, attribute: "light-css" })
+], c.prototype, "lightCss", 2);
+c = u([
+  $("hx-style-scope")
+], c);
+export {
+  c as H
+};
+//# sourceMappingURL=hx-style-scope-CsQ2Phf_.js.map

package/dist/shared/hx-style-scope-CsQ2Phf_.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-style-scope-CsQ2Phf_.js","sources":["../../src/components/hx-style-scope/hx-style-scope.styles.ts","../../src/utilities/lightStyleRegistry.ts","../../src/utilities/generateScopedSelectors.ts","../../src/utilities/injectLightStyles.ts","../../src/components/hx-style-scope/hx-style-scope.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Styles for hx-style-scope.\n *\n * The element acts as a transparent wrapper — `display: contents` removes it\n * from the layout box model so slotted children lay out as if the wrapper\n * were absent. This prevents hx-style-scope from introducing unexpected\n * layout shifts or block-formatting-context changes.\n */\nexport const hxStyleScopeStyles = css`\n  :host {\n    display: contents;\n  }\n`;\n","/**\n * @module lightStyleRegistry\n *\n * A Map-based registry that tracks which component stylesheets have been\n * injected into the document's light DOM. Used by injectLightStyles to\n * deduplicate style injection — each component type is injected at most once\n * per page load.\n *\n * @example\n * ```ts\n * import { isStyleRegistered, registerStyle } from './lightStyleRegistry.js';\n *\n * if (!isStyleRegistered('hx-card')) {\n *   const el = document.createElement('style');\n *   el.textContent = css;\n *   document.head.appendChild(el);\n *   registerStyle('hx-card', el);\n * }\n * ```\n */\n\n/**\n * Primary registry mapping component names to their injected HTMLStyleElement.\n * Keyed by component tag name (e.g. `'hx-card'`).\n */\nexport const lightStyleRegistry: Map<string, HTMLStyleElement> = new Map();\n\n/**\n * Returns true if a stylesheet for the given component has already been\n * injected into the document.\n *\n * @param componentName - The component tag name (e.g. `'hx-card'`).\n */\nexport function isStyleRegistered(componentName: string): boolean {\n  return lightStyleRegistry.has(componentName);\n}\n\n/**\n * Records a stylesheet element in the registry for the given component.\n * Called after the element has been appended to the document.\n *\n * @param componentName - The component tag name (e.g. `'hx-card'`).\n * @param el - The HTMLStyleElement that was injected.\n */\nexport function registerStyle(componentName: string, el: HTMLStyleElement): void {\n  lightStyleRegistry.set(componentName, el);\n}\n","/**\n * @module generateScopedSelectors\n *\n * Generates CSS with all selectors scoped under a `[data-hx-styled=\"componentName\"]`\n * attribute selector. This ensures injected light DOM styles only apply to content\n * wrapped in `<hx-style-scope component=\"...\">` and do not leak to the rest of the page.\n *\n * @example\n * ```ts\n * import { generateScopedSelectors } from './generateScopedSelectors.js';\n *\n * const scoped = generateScopedSelectors('hx-card', 'p { color: red; }');\n * // '[data-hx-styled=\"hx-card\"] p { color: red; }'\n * ```\n */\n\n/**\n * Wraps all CSS selectors to be scoped under `[data-hx-styled=\"componentName\"]`.\n *\n * Handles:\n * - Standard selectors: `p { ... }` → `[data-hx-styled=\"hx-card\"] p { ... }`\n * - `::slotted(*)` patterns: `::slotted(p) { ... }` → `[data-hx-styled=\"hx-card\"] p { ... }`\n * - At-rules (`@media`, `@supports`, etc.) are preserved with their inner rules scoped\n * - `:host` selectors are replaced with the scope attribute selector\n *\n * @param componentName - The component tag name used as the scope identifier.\n * @param css - The CSS string to transform.\n * @returns The transformed CSS with all selectors scoped.\n */\nexport function generateScopedSelectors(componentName: string, css: string): string {\n  const scopeAttr = `[data-hx-styled=\"${componentName}\"]`;\n  return transformCss(css, scopeAttr);\n}\n\n/**\n * Returns the character at position `i` in `str`, or an empty string if out of bounds.\n * Avoids the `string | undefined` issue from `noUncheckedIndexedAccess`.\n */\nfunction charAt(str: string, i: number): string {\n  return str[i] ?? '';\n}\n\n/**\n * Recursively transforms CSS text, scoping all selectors under the given\n * attribute selector prefix.\n *\n * @param css - The CSS text to transform.\n * @param scopeAttr - The attribute selector to prepend (e.g. `[data-hx-styled=\"hx-card\"]`).\n * @returns The scoped CSS string.\n */\nfunction transformCss(css: string, scopeAttr: string): string {\n  const result: string[] = [];\n  let i = 0;\n  const len = css.length;\n\n  while (i < len) {\n    // Skip whitespace\n    while (i < len && /\\s/.test(charAt(css, i))) {\n      result.push(charAt(css, i));\n      i++;\n    }\n\n    if (i >= len) break;\n\n    // Check for at-rule (e.g. @media, @supports, @keyframes)\n    if (charAt(css, i) === '@') {\n      const atBlock = extractAtRule(css, i);\n      result.push(transformAtRule(atBlock.text, scopeAttr));\n      i = atBlock.end;\n      continue;\n    }\n\n    // Extract a selector block up to the opening brace\n    const selectorEnd = css.indexOf('{', i);\n    if (selectorEnd === -1) break;\n\n    const selectorRaw = css.slice(i, selectorEnd);\n    const bodyStart = selectorEnd + 1;\n    const bodyEnd = findMatchingBrace(css, selectorEnd);\n\n    if (bodyEnd === -1) break;\n\n    const body = css.slice(bodyStart, bodyEnd);\n    const scopedSelector = scopeSelector(selectorRaw, scopeAttr);\n    result.push(`${scopedSelector}{${body}}`);\n    i = bodyEnd + 1;\n  }\n\n  return result.join('');\n}\n\n/**\n * Scopes a raw selector string under the given attribute selector.\n * Handles comma-separated selectors, `::slotted()`, and `:host`.\n *\n * @param selectorRaw - The raw selector string (may be comma-separated).\n * @param scopeAttr - The attribute selector prefix.\n * @returns The scoped selector string.\n */\nfunction scopeSelector(selectorRaw: string, scopeAttr: string): string {\n  return selectorRaw\n    .split(',')\n    .map((part) => {\n      const trimmed = part.trim();\n\n      // Replace ::slotted(*) with a direct descendant selector\n      if (trimmed.startsWith('::slotted(') && trimmed.endsWith(')')) {\n        const inner = trimmed.slice('::slotted('.length, -1).trim();\n        return `${scopeAttr} ${inner}`;\n      }\n\n      // Replace :host with the scope attribute selector\n      if (trimmed === ':host' || trimmed.startsWith(':host(') || trimmed.startsWith(':host ')) {\n        return trimmed.replace(/^:host(\\([^)]*\\))?/, scopeAttr);\n      }\n\n      // Standard selector — prepend scope\n      return `${scopeAttr} ${trimmed}`;\n    })\n    .join(', ');\n}\n\n/**\n * Handles transformation of an at-rule block. For container at-rules\n * (`@media`, `@supports`, `@layer`, `@container`) the inner rules are scoped.\n * Non-container at-rules (e.g. `@keyframes`, `@charset`) are passed through unchanged.\n *\n * @param atRuleText - The full at-rule text including its block.\n * @param scopeAttr - The attribute selector prefix.\n * @returns The transformed at-rule text.\n */\nfunction transformAtRule(atRuleText: string, scopeAttr: string): string {\n  const containerAtRules = /^@(media|supports|layer|container|document)\\b/;\n  const braceIndex = atRuleText.indexOf('{');\n\n  if (braceIndex === -1 || !containerAtRules.test(atRuleText.trim())) {\n    return atRuleText;\n  }\n\n  const head = atRuleText.slice(0, braceIndex + 1);\n  const innerEnd = atRuleText.lastIndexOf('}');\n  const inner = atRuleText.slice(braceIndex + 1, innerEnd);\n  const tail = atRuleText.slice(innerEnd);\n\n  return `${head}${transformCss(inner, scopeAttr)}${tail}`;\n}\n\n/**\n * Extracts a complete at-rule (potentially with a block) starting at index `start`.\n * Returns the text and the end index.\n */\nfunction extractAtRule(css: string, start: number): { text: string; end: number } {\n  // Find either ';' (simple at-rule) or the matching '{...}' (block at-rule)\n  let i = start;\n  while (i < css.length && charAt(css, i) !== '{' && charAt(css, i) !== ';') {\n    i++;\n  }\n\n  if (i >= css.length) {\n    return { text: css.slice(start), end: css.length };\n  }\n\n  if (charAt(css, i) === ';') {\n    return { text: css.slice(start, i + 1), end: i + 1 };\n  }\n\n  // Block at-rule — find matching closing brace\n  const end = findMatchingBrace(css, i);\n  if (end === -1) {\n    return { text: css.slice(start), end: css.length };\n  }\n\n  return { text: css.slice(start, end + 1), end: end + 1 };\n}\n\n/**\n * Finds the index of the closing `}` that matches the `{` at `openIndex`.\n * Returns -1 if no matching brace is found.\n */\nfunction findMatchingBrace(css: string, openIndex: number): number {\n  let depth = 0;\n  for (let i = openIndex; i < css.length; i++) {\n    const ch = charAt(css, i);\n    if (ch === '{') depth++;\n    else if (ch === '}') {\n      depth--;\n      if (depth === 0) return i;\n    }\n  }\n  return -1;\n}\n","/**\n * @module injectLightStyles\n *\n * Core utility for injecting scoped `<style>` elements into `document.head`\n * to style light DOM slotted content in HELiX components. Uses the\n * `lightStyleRegistry` to deduplicate — each component type is injected at\n * most once per page lifetime.\n *\n * This is the primary mechanism for ensuring Drupal-slotted content inherits\n * proper typography and spacing when rendered into HELiX components.\n *\n * @example\n * ```ts\n * import { injectLightStyles } from '../../utilities/injectLightStyles.js';\n *\n * // In connectedCallback:\n * injectLightStyles('hx-card', 'p { font-size: var(--hx-font-size-md); }');\n * ```\n */\n\nimport { isStyleRegistered, registerStyle } from './lightStyleRegistry.js';\nimport { generateScopedSelectors } from './generateScopedSelectors.js';\n\n/**\n * Injects a scoped `<style>` element into `document.head` for light DOM content\n * belonging to `componentName`. The CSS is automatically scoped via\n * `generateScopedSelectors` so styles only apply inside\n * `[data-hx-styled=\"componentName\"]` wrappers.\n *\n * Safe to call multiple times — subsequent calls for the same `componentName`\n * are no-ops (deduplication via `lightStyleRegistry`).\n *\n * No-op in SSR environments where `document` is not defined.\n *\n * @param componentName - The component tag name used as the scope identifier\n *   (e.g. `'hx-card'`). Must be unique per component type.\n * @param css - The raw CSS to scope and inject. Selectors will be prefixed with\n *   `[data-hx-styled=\"componentName\"]`.\n */\nexport function injectLightStyles(componentName: string, css: string): void {\n  if (typeof document === 'undefined') return;\n\n  if (isStyleRegistered(componentName)) return;\n\n  const scopedCss = generateScopedSelectors(componentName, css);\n\n  const styleEl = document.createElement('style');\n  styleEl.setAttribute('data-hx-light-styles', componentName);\n  styleEl.textContent = scopedCss;\n\n  document.head.appendChild(styleEl);\n  registerStyle(componentName, styleEl);\n}\n","import { LitElement, html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hxStyleScopeStyles } from './hx-style-scope.styles.js';\nimport { injectLightStyles } from '../../utilities/injectLightStyles.js';\n\n/**\n * A transparent wrapper component that injects scoped light DOM styles for its\n * slotted children. Designed for use in Drupal Twig templates where slotted\n * content lives in the light DOM and cannot inherit Shadow DOM styles.\n *\n * On connection, the component:\n * 1. Sets `data-hx-styled` on itself so scoped CSS selectors resolve correctly.\n * 2. Calls `injectLightStyles` to inject a `<style>` into `document.head` — once\n *    per component type, deduplicated via `lightStyleRegistry`.\n *\n * The element renders as `display: contents` so it does not affect layout.\n *\n * @summary Scoped light DOM style injection wrapper for Drupal-slotted content.\n *\n * @tag hx-style-scope\n *\n * @slot - Default slot for any light DOM content that should receive scoped styles.\n *\n * @example\n * ```html\n * <hx-style-scope component=\"hx-card\">\n *   <p>This paragraph will receive hx-card light DOM styles.</p>\n * </hx-style-scope>\n * ```\n *\n * @example Drupal Twig usage via macro\n * ```twig\n * {% import '@helix/hx-style-scope.macro.twig' as hx %}\n * {{ hx.scope('hx-card', content) }}\n * ```\n */\n@customElement('hx-style-scope')\nexport class HxStyleScope extends LitElement {\n  static override styles = [hxStyleScopeStyles];\n\n  /**\n   * The component tag name whose light DOM styles should be injected.\n   * Must match a registered component name (e.g. `'hx-card'`).\n   *\n   * When set, the element also applies `data-hx-styled` to itself so that\n   * scoped CSS selectors generated by `generateScopedSelectors` resolve\n   * correctly against slotted child elements.\n   *\n   * @attr component\n   */\n  @property({ type: String, reflect: true })\n  component: string = '';\n\n  /**\n   * The CSS to inject as scoped light DOM styles. When provided alongside\n   * `component`, this CSS will be scoped under `[data-hx-styled=\"component\"]`\n   * and injected into `document.head` (once per component type).\n   *\n   * If omitted, `injectLightStyles` is still called but with an empty string,\n   * which is a no-op for actual style injection.\n   *\n   * @attr light-css\n   */\n  @property({ type: String, attribute: 'light-css' })\n  lightCss: string = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._applyScope();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('component') || changed.has('lightCss')) {\n      this._applyScope();\n    }\n  }\n\n  /**\n   * Applies the `data-hx-styled` attribute and triggers style injection.\n   * Called on connect and whenever `component` or `lightCss` changes.\n   */\n  private _applyScope(): void {\n    if (!this.component) return;\n\n    // Set the scoping attribute so CSS selectors from generateScopedSelectors work.\n    this.setAttribute('data-hx-styled', this.component);\n\n    if (this.lightCss) {\n      injectLightStyles(this.component, this.lightCss);\n    }\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-style-scope': HxStyleScope;\n  }\n}\n"],"names":["hxStyleScopeStyles","css","lightStyleRegistry","isStyleRegistered","componentName","registerStyle","el","generateScopedSelectors","scopeAttr","transformCss","charAt","str","i","result","len","atBlock","extractAtRule","transformAtRule","selectorEnd","selectorRaw","bodyStart","bodyEnd","findMatchingBrace","body","scopedSelector","scopeSelector","part","trimmed","inner","atRuleText","containerAtRules","braceIndex","head","innerEnd","tail","start","end","openIndex","depth","ch","injectLightStyles","scopedCss","styleEl","HxStyleScope","LitElement","changed","html","__decorateClass","property","customElement"],"mappings":"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"}