@helixui/library 0.1.0

package/dist/shared/hx-field-vWiKgWIy.js

@@ -0,0 +1,308 @@
+import { css as f, LitElement as _, nothing as c, html as h } from "lit";
+import { property as o, state as p, customElement as x } from "lit/decorators.js";
+import { classMap as u } from "lit/directives/class-map.js";
+import { t as b } from "./lit-Dpo7RLp4.js";
+const m = f`
+  :host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-field-gap, var(--hx-space-1, 0.25rem));
+    font-family: var(--hx-field-font-family, var(--hx-font-family-sans, sans-serif));
+  }
+
+  /* ─── Inline Layout ─── */
+
+  .field--layout-inline {
+    flex-direction: row;
+    align-items: baseline;
+    flex-wrap: wrap;
+  }
+
+  .field--layout-inline .field__label-wrapper {
+    display: flex;
+    align-items: baseline;
+    flex-shrink: 0;
+    min-width: 8rem;
+  }
+
+  /* ─── Label ─── */
+
+  .field__label-wrapper {
+    display: contents;
+  }
+
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    gap: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-medium, 500);
+    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #374151));
+    line-height: var(--hx-line-height-normal, 1.5);
+    cursor: pointer;
+  }
+
+  .field__required-marker {
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ─── Control Wrapper ─── */
+
+  .field__control {
+    display: block;
+  }
+
+  /* ─── Error Slot Announcer (visually hidden live region) ─── */
+
+  .field__error-slot-announcer {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ─── Size Variants ─── */
+
+  :host([hx-size='sm']) .field__label {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  :host([hx-size='lg']) .field__label {
+    font-size: var(--hx-font-size-md, 1rem);
+  }
+
+  :host([hx-size='sm']) .field__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+  }
+
+  :host([hx-size='lg']) .field__help-text {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .field__help-text {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #6b7280));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  /* ─── Error State ─── */
+
+  .field--error .field__label {
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+
+  .field--error .field__control {
+    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #ef4444));
+    outline-offset: 2px;
+    border-radius: 0.25rem;
+  }
+`;
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (e, t, i, a) => {
+  for (var s = a > 1 ? void 0 : a ? y(t, i) : t, n = e.length - 1, d; n >= 0; n--)
+    (d = e[n]) && (s = (a ? d(t, i, s) : d(s)) || s);
+  return a && s && v(t, i, s), s;
+};
+const g = /* @__PURE__ */ new Set(["INPUT", "SELECT", "TEXTAREA", "BUTTON"]);
+function S(e) {
+  return g.has(e.tagName) || e.tagName.includes("-");
+}
+let r = class extends _ {
+  constructor() {
+    super(...arguments), this.label = "", this.required = !1, this.error = "", this.helpText = "", this.disabled = !1, this.hxSize = "md", this.layout = "column", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._fieldId = `hx-field-${crypto.randomUUID().slice(0, 8)}`, this._helpTextId = `${this._fieldId}-help`, this._errorId = `${this._fieldId}-error`, this._a11yDescId = `${this._fieldId}-desc`, this._slottedControl = null, this._a11yDescEl = null;
+  }
+  _handleLabelSlotChange(e) {
+    const t = e.target;
+    this._hasLabelSlot = t.assignedElements().length > 0;
+  }
+  _handleErrorSlotChange(e) {
+    const t = e.target;
+    this._hasErrorSlot = t.assignedElements().length > 0;
+  }
+  _handleHelpSlotChange(e) {
+    const t = e.target;
+    this._hasHelpSlot = t.assignedElements().length > 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._ensureA11yDescEl();
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), (e = this._a11yDescEl) == null || e.remove(), this._a11yDescEl = null, this._slottedControl && (this._slottedControl.removeAttribute("aria-label"), this._slottedControl.removeAttribute("aria-required"), this._slottedControl.removeAttribute("aria-invalid"), this._slottedControl.removeAttribute("aria-describedby"), this._slottedControl = null);
+  }
+  updated(e) {
+    super.updated(e), e.has("hxSize") && (["sm", "md", "lg"].includes(this.hxSize) || console.warn(
+      `[hx-field] Invalid hx-size value: "${this.hxSize}". Expected "sm" | "md" | "lg". Defaulting to "md".`
+    )), this._syncA11yDescEl(), this._syncSlottedControl();
+  }
+  /** Creates a visually-hidden span in light DOM used as the ARIA description anchor. */
+  _ensureA11yDescEl() {
+    if (this._a11yDescEl) return;
+    const e = document.createElement("span");
+    e.id = this._a11yDescId, e.style.cssText = "position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0", this.appendChild(e), this._a11yDescEl = e;
+  }
+  /** Keeps the light-DOM description span in sync with the current error/help text. */
+  _syncA11yDescEl() {
+    if (!this._a11yDescEl) return;
+    (!!this.error || this._hasErrorSlot) && this.error ? this._a11yDescEl.textContent = this.error : this.helpText ? this._a11yDescEl.textContent = this.helpText : this._a11yDescEl.textContent = "";
+  }
+  /** Tracks the first form control assigned to the default slot. */
+  _handleDefaultSlotChange(e) {
+    const i = e.target.assignedElements();
+    this._slottedControl = i.find(S) ?? null, this._syncSlottedControl();
+  }
+  /**
+   * Focuses the slotted form control when the shadow DOM label is clicked.
+   * The shadow `<label>` cannot use `for`/`id` to link to a slotted input
+   * across the shadow boundary, so we handle focus programmatically.
+   */
+  _handleLabelClick(e) {
+    var t;
+    (t = this._slottedControl) == null || t.focus();
+  }
+  /**
+   * Applies ARIA attributes to the slotted form control, bridging the
+   * shadow DOM accessibility boundary.
+   *
+   * - aria-label: associates the field label with the control
+   * - aria-required: communicates required state to AT
+   * - aria-invalid: communicates error state to AT
+   * - aria-describedby: points to the light-DOM description span
+   *
+   * **Skip conditions:**
+   * - `HX-*` elements manage their own ARIA attributes; bridging is skipped.
+   * - Elements with `data-aria-managed` attribute opt out of ARIA mutation;
+   *   bridging is skipped entirely for those elements.
+   */
+  _syncSlottedControl() {
+    const e = this._slottedControl;
+    if (!e || e.tagName.startsWith("HX-") || e.hasAttribute("data-aria-managed")) return;
+    const t = !!this.error || this._hasErrorSlot, i = !!(this.error || this.helpText || this._hasErrorSlot || this._hasHelpSlot);
+    this.label && !this._hasLabelSlot ? e.setAttribute("aria-label", this.label) : e.removeAttribute("aria-label"), this.required ? e.setAttribute("aria-required", "true") : e.removeAttribute("aria-required"), t ? e.setAttribute("aria-invalid", "true") : e.removeAttribute("aria-invalid"), i ? e.setAttribute("aria-describedby", this._a11yDescId) : e.removeAttribute("aria-describedby");
+  }
+  // ─── Render ───
+  render() {
+    const e = !!this.error || this._hasErrorSlot, t = !!this.helpText || this._hasHelpSlot, i = {
+      field: !0,
+      "field--error": e,
+      "field--disabled": this.disabled,
+      "field--required": this.required,
+      "field--size-sm": this.hxSize === "sm",
+      "field--size-md": this.hxSize === "md",
+      "field--size-lg": this.hxSize === "lg",
+      "field--layout-inline": this.layout === "inline"
+    };
+    return h`
+      <div part="field" class=${u(i)}>
+        <!-- Label -->
+        <div class="field__label-wrapper">
+          <slot name="label" @slotchange=${this._handleLabelSlotChange}>
+            ${this.label && !this._hasLabelSlot ? h`
+                  <label part="label" class="field__label" @click=${this._handleLabelClick}>
+                    ${this.label}
+                    ${this.required ? h`<span
+                          part="required-indicator"
+                          class="field__required-marker"
+                          aria-hidden="true"
+                          >*</span
+                        >` : c}
+                  </label>
+                ` : c}
+          </slot>
+        </div>
+
+        <!-- Description -->
+        <slot name="description"></slot>
+
+        <!-- Control (default slot) -->
+        <div part="control" class="field__control">
+          <slot @slotchange=${this._handleDefaultSlotChange}></slot>
+        </div>
+
+        <!-- Error -->
+        <slot name="error" @slotchange=${this._handleErrorSlotChange}>
+          ${this.error ? h`
+                <div part="error-message" class="field__error" id=${this._errorId} role="alert">
+                  ${this.error}
+                </div>
+              ` : c}
+        </slot>
+
+        <!-- Slotted error live region — ensures slotted error content is announced -->
+        <div aria-live="assertive" class="field__error-slot-announcer"></div>
+
+        <!-- Help text (always in DOM so slot detection works; hidden when no help or error is shown) -->
+        <div
+          part="help-text"
+          class="field__help-text"
+          id=${this._helpTextId}
+          ?hidden=${!t || e}
+        >
+          <slot name="help" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = [b, m];
+l([
+  o({ type: String })
+], r.prototype, "label", 2);
+l([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "required", 2);
+l([
+  o({ type: String })
+], r.prototype, "error", 2);
+l([
+  o({ type: String, attribute: "help-text" })
+], r.prototype, "helpText", 2);
+l([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+l([
+  o({ type: String, attribute: "hx-size", reflect: !0 })
+], r.prototype, "hxSize", 2);
+l([
+  o({ type: String, reflect: !0 })
+], r.prototype, "layout", 2);
+l([
+  p()
+], r.prototype, "_hasLabelSlot", 2);
+l([
+  p()
+], r.prototype, "_hasErrorSlot", 2);
+l([
+  p()
+], r.prototype, "_hasHelpSlot", 2);
+r = l([
+  x("hx-field")
+], r);
+export {
+  r as H
+};
+//# sourceMappingURL=hx-field-vWiKgWIy.js.map

package/dist/shared/hx-field-vWiKgWIy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-field-vWiKgWIy.js","sources":["../../src/components/hx-field/hx-field.styles.ts","../../src/components/hx-field/hx-field.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFieldStyles = 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  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-field-gap, var(--hx-space-1, 0.25rem));\n    font-family: var(--hx-field-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  /* ─── Inline Layout ─── */\n\n  .field--layout-inline {\n    flex-direction: row;\n    align-items: baseline;\n    flex-wrap: wrap;\n  }\n\n  .field--layout-inline .field__label-wrapper {\n    display: flex;\n    align-items: baseline;\n    flex-shrink: 0;\n    min-width: 8rem;\n  }\n\n  /* ─── Label ─── */\n\n  .field__label-wrapper {\n    display: contents;\n  }\n\n  .field__label {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #374151));\n    line-height: var(--hx-line-height-normal, 1.5);\n    cursor: pointer;\n  }\n\n  .field__required-marker {\n    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Control Wrapper ─── */\n\n  .field__control {\n    display: block;\n  }\n\n  /* ─── Error Slot Announcer (visually hidden live region) ─── */\n\n  .field__error-slot-announcer {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Size Variants ─── */\n\n  :host([hx-size='sm']) .field__label {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  :host([hx-size='lg']) .field__label {\n    font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  :host([hx-size='sm']) .field__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  :host([hx-size='lg']) .field__help-text {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .field__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #6b7280));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Error State ─── */\n\n  .field--error .field__label {\n    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));\n  }\n\n  .field--error .field__control {\n    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #ef4444));\n    outline-offset: 2px;\n    border-radius: 0.25rem;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixFieldStyles } from './hx-field.styles.js';\n\n/** Native form control tag names that can receive ARIA attributes. */\nconst FORM_CONTROL_TAGS = new Set(['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON']);\n\n/** Returns true if the element is a native form control or a custom element. */\nfunction isFormControl(el: Element): el is HTMLElement {\n  return FORM_CONTROL_TAGS.has(el.tagName) || el.tagName.includes('-');\n}\n\n/**\n * Layout wrapper providing consistent label + input + help text + validation\n * message structure for any form control. Use this when wrapping non-HELiX\n * form controls or native HTML elements in the HELiX form field pattern.\n *\n * This component is NOT form-associated — it is a pure visual layout wrapper.\n *\n * **Light DOM side effect:** This component injects a visually-hidden `<span>`\n * into its light DOM children for ARIA describedby linkage across the shadow\n * DOM boundary. This span has `id=\"${fieldId}-desc\"` and is removed on\n * `disconnectedCallback`. This is an intentional, documented accessibility\n * mechanism.\n *\n * @summary Layout wrapper for label, control, help text, and error message.\n *\n * @tag hx-field\n *\n * @slot - The form control element (native or custom).\n * @slot label - Custom label content (overrides the label property).\n * @slot help - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property).\n * @slot description - Additional descriptive content above the control.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart control - The wrapper around slotted content.\n * @csspart help-text - The help text container.\n * @csspart error-message - The error message container.\n * @csspart required-indicator - The required asterisk span.\n *\n * @cssprop [--hx-field-label-color=var(--hx-color-neutral-700)] - Label color.\n * @cssprop [--hx-field-error-color=var(--hx-color-error-500)] - Error color.\n * @cssprop [--hx-field-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-field-gap=var(--hx-space-1, 0.25rem)] - Gap between field segments.\n * @cssprop [--hx-field-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n */\n@customElement('hx-field')\nexport class HelixField extends LitElement {\n  static override styles = [tokenStyles, helixFieldStyles];\n\n  // ─── Properties ───\n\n  /**\n   * The visible label text for the field.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether the field is required. Shows a required indicator on the label.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Error message to display. When set, the field enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the control for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Visual disabled state applied via opacity. Does not affect slotted control\n   * interactivity — set disabled on the slotted control directly.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Size variant controlling label and help text font sizes.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size', reflect: true })\n  hxSize: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Layout variant. 'column' stacks label above control; 'inline' places them side-by-side.\n   * @attr layout\n   */\n  @property({ type: String, reflect: true })\n  layout: 'column' | 'inline' = 'column';\n\n  // ─── Slot Tracking ───\n\n  @state() private _hasLabelSlot = false;\n  @state() private _hasErrorSlot = false;\n  @state() private _hasHelpSlot = false;\n\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedElements().length > 0;\n  }\n\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedElements().length > 0;\n  }\n\n  private _handleHelpSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpSlot = slot.assignedElements().length > 0;\n  }\n\n  // ─── Unique IDs for Accessibility ───\n\n  private _fieldId = `hx-field-${crypto.randomUUID().slice(0, 8)}`;\n  private _helpTextId = `${this._fieldId}-help`;\n  private _errorId = `${this._fieldId}-error`;\n  private _a11yDescId = `${this._fieldId}-desc`;\n\n  // ─── A11y: Slotted control tracking + light-DOM description element ───\n\n  /**\n   * The first form control in the default slot. We set aria attributes on this\n   * element to bridge the shadow DOM accessibility boundary.\n   */\n  private _slottedControl: HTMLElement | null = null;\n\n  /**\n   * A visually-hidden span injected into the host's light DOM (assigned to the\n   * default slot). Because it lives in the same document as the slotted input,\n   * `aria-describedby` can reference its ID without cross-shadow-root IDREF\n   * limitations.\n   *\n   * **Documented side effect:** This element is intentionally injected into the\n   * component's light DOM children. It is invisible to users but present in the\n   * accessibility tree. It is removed in `disconnectedCallback`. Consumers\n   * should not remove or modify this span (identifiable by its `id` ending in\n   * `-desc`).\n   */\n  private _a11yDescEl: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._ensureA11yDescEl();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._a11yDescEl?.remove();\n    this._a11yDescEl = null;\n    // Remove aria attributes we set on the slotted control\n    if (this._slottedControl) {\n      this._slottedControl.removeAttribute('aria-label');\n      this._slottedControl.removeAttribute('aria-required');\n      this._slottedControl.removeAttribute('aria-invalid');\n      this._slottedControl.removeAttribute('aria-describedby');\n      this._slottedControl = null;\n    }\n  }\n\n  override updated(changedProps: Map<string, unknown>): void {\n    super.updated(changedProps);\n\n    // P2-01: Warn on invalid hxSize values\n    if (changedProps.has('hxSize')) {\n      const validSizes = ['sm', 'md', 'lg'];\n      if (!validSizes.includes(this.hxSize)) {\n        console.warn(\n          `[hx-field] Invalid hx-size value: \"${this.hxSize}\". Expected \"sm\" | \"md\" | \"lg\". Defaulting to \"md\".`,\n        );\n      }\n    }\n\n    this._syncA11yDescEl();\n    this._syncSlottedControl();\n  }\n\n  /** Creates a visually-hidden span in light DOM used as the ARIA description anchor. */\n  private _ensureA11yDescEl(): void {\n    if (this._a11yDescEl) return;\n    const span = document.createElement('span');\n    span.id = this._a11yDescId;\n    // Visually hidden but present in the accessibility tree\n    span.style.cssText =\n      'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';\n    this.appendChild(span);\n    this._a11yDescEl = span;\n  }\n\n  /** Keeps the light-DOM description span in sync with the current error/help text. */\n  private _syncA11yDescEl(): void {\n    if (!this._a11yDescEl) return;\n    const hasError = !!this.error || this._hasErrorSlot;\n    if (hasError && this.error) {\n      this._a11yDescEl.textContent = this.error;\n    } else if (this.helpText) {\n      this._a11yDescEl.textContent = this.helpText;\n    } else {\n      this._a11yDescEl.textContent = '';\n    }\n  }\n\n  /** Tracks the first form control assigned to the default slot. */\n  private _handleDefaultSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const assigned = slot.assignedElements();\n    this._slottedControl = assigned.find(isFormControl) ?? null;\n    this._syncSlottedControl();\n  }\n\n  /**\n   * Focuses the slotted form control when the shadow DOM label is clicked.\n   * The shadow `<label>` cannot use `for`/`id` to link to a slotted input\n   * across the shadow boundary, so we handle focus programmatically.\n   */\n  private _handleLabelClick(_e: Event): void {\n    this._slottedControl?.focus();\n  }\n\n  /**\n   * Applies ARIA attributes to the slotted form control, bridging the\n   * shadow DOM accessibility boundary.\n   *\n   * - aria-label: associates the field label with the control\n   * - aria-required: communicates required state to AT\n   * - aria-invalid: communicates error state to AT\n   * - aria-describedby: points to the light-DOM description span\n   *\n   * **Skip conditions:**\n   * - `HX-*` elements manage their own ARIA attributes; bridging is skipped.\n   * - Elements with `data-aria-managed` attribute opt out of ARIA mutation;\n   *   bridging is skipped entirely for those elements.\n   */\n  private _syncSlottedControl(): void {\n    const control = this._slottedControl;\n    if (!control) return;\n\n    // hx-* elements manage their own ARIA attributes; skip bridging for them\n    if (control.tagName.startsWith('HX-')) return;\n\n    // Elements that declare data-aria-managed opt out of ARIA mutation\n    if (control.hasAttribute('data-aria-managed')) return;\n\n    const hasError = !!this.error || this._hasErrorSlot;\n    const hasDesc = !!(this.error || this.helpText || this._hasErrorSlot || this._hasHelpSlot);\n\n    // Label association: aria-label bridges the shadow DOM boundary\n    if (this.label && !this._hasLabelSlot) {\n      control.setAttribute('aria-label', this.label);\n    } else {\n      control.removeAttribute('aria-label');\n    }\n\n    // Required state\n    if (this.required) {\n      control.setAttribute('aria-required', 'true');\n    } else {\n      control.removeAttribute('aria-required');\n    }\n\n    // Invalid state\n    if (hasError) {\n      control.setAttribute('aria-invalid', 'true');\n    } else {\n      control.removeAttribute('aria-invalid');\n    }\n\n    // Description (error or help text) via light-DOM span\n    if (hasDesc) {\n      control.setAttribute('aria-describedby', this._a11yDescId);\n    } else {\n      control.removeAttribute('aria-describedby');\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n    const hasHelp = !!this.helpText || this._hasHelpSlot;\n\n    const fieldClasses = {\n      field: true,\n      'field--error': hasError,\n      'field--disabled': this.disabled,\n      'field--required': this.required,\n      'field--size-sm': this.hxSize === 'sm',\n      'field--size-md': this.hxSize === 'md',\n      'field--size-lg': this.hxSize === 'lg',\n      'field--layout-inline': this.layout === 'inline',\n    };\n\n    return html`\n      <div part=\"field\" class=${classMap(fieldClasses)}>\n        <!-- Label -->\n        <div class=\"field__label-wrapper\">\n          <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n            ${this.label && !this._hasLabelSlot\n              ? html`\n                  <label part=\"label\" class=\"field__label\" @click=${this._handleLabelClick}>\n                    ${this.label}\n                    ${this.required\n                      ? html`<span\n                          part=\"required-indicator\"\n                          class=\"field__required-marker\"\n                          aria-hidden=\"true\"\n                          >*</span\n                        >`\n                      : nothing}\n                  </label>\n                `\n              : nothing}\n          </slot>\n        </div>\n\n        <!-- Description -->\n        <slot name=\"description\"></slot>\n\n        <!-- Control (default slot) -->\n        <div part=\"control\" class=\"field__control\">\n          <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n        </div>\n\n        <!-- Error -->\n        <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n          ${this.error\n            ? html`\n                <div part=\"error-message\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                  ${this.error}\n                </div>\n              `\n            : nothing}\n        </slot>\n\n        <!-- Slotted error live region — ensures slotted error content is announced -->\n        <div aria-live=\"assertive\" class=\"field__error-slot-announcer\"></div>\n\n        <!-- Help text (always in DOM so slot detection works; hidden when no help or error is shown) -->\n        <div\n          part=\"help-text\"\n          class=\"field__help-text\"\n          id=${this._helpTextId}\n          ?hidden=${!hasHelp || hasError}\n        >\n          <slot name=\"help\" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-field': HelixField;\n  }\n}\n"],"names":["helixFieldStyles","css","FORM_CONTROL_TAGS","isFormControl","el","HelixField","LitElement","slot","_a","changedProps","span","assigned","_e","control","hasError","hasDesc","hasHelp","fieldClasses","html","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":";;;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACKhC,MAAMC,wBAAwB,IAAI,CAAC,SAAS,UAAU,YAAY,QAAQ,CAAC;AAG3E,SAASC,EAAcC,GAAgC;AACrD,SAAOF,EAAkB,IAAIE,EAAG,OAAO,KAAKA,EAAG,QAAQ,SAAS,GAAG;AACrE;AAuCO,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAUL,KAAA,QAAQ,IAOR,KAAA,WAAW,IAOX,KAAA,QAAQ,IAOR,KAAA,WAAW,IAQX,KAAA,WAAW,IAOX,KAAA,SAA6B,MAO7B,KAAA,SAA8B,UAIrB,KAAQ,gBAAgB,IACxB,KAAQ,gBAAgB,IACxB,KAAQ,eAAe,IAmBhC,KAAQ,WAAW,YAAY,OAAO,WAAA,EAAa,MAAM,GAAG,CAAC,CAAC,IAC9D,KAAQ,cAAc,GAAG,KAAK,QAAQ,SACtC,KAAQ,WAAW,GAAG,KAAK,QAAQ,UACnC,KAAQ,cAAc,GAAG,KAAK,QAAQ,SAQtC,KAAQ,kBAAsC,MAc9C,KAAQ,cAAkC;AAAA,EAAA;AAAA,EA1ClC,uBAAuB,GAAgB;AAC7C,UAAMC,IAAO,EAAE;AACf,SAAK,gBAAgBA,EAAK,iBAAA,EAAmB,SAAS;AAAA,EACxD;AAAA,EAEQ,uBAAuB,GAAgB;AAC7C,UAAMA,IAAO,EAAE;AACf,SAAK,gBAAgBA,EAAK,iBAAA,EAAmB,SAAS;AAAA,EACxD;AAAA,EAEQ,sBAAsB,GAAgB;AAC5C,UAAMA,IAAO,EAAE;AACf,SAAK,eAAeA,EAAK,iBAAA,EAAmB,SAAS;AAAA,EACvD;AAAA,EA+BS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,kBAAA;AAAA,EACP;AAAA,EAES,uBAA6B;;AACpC,UAAM,qBAAA,IACNC,IAAA,KAAK,gBAAL,QAAAA,EAAkB,UAClB,KAAK,cAAc,MAEf,KAAK,oBACP,KAAK,gBAAgB,gBAAgB,YAAY,GACjD,KAAK,gBAAgB,gBAAgB,eAAe,GACpD,KAAK,gBAAgB,gBAAgB,cAAc,GACnD,KAAK,gBAAgB,gBAAgB,kBAAkB,GACvD,KAAK,kBAAkB;AAAA,EAE3B;AAAA,EAES,QAAQC,GAA0C;AACzD,UAAM,QAAQA,CAAY,GAGtBA,EAAa,IAAI,QAAQ,MACR,CAAC,MAAM,MAAM,IAAI,EACpB,SAAS,KAAK,MAAM,KAClC,QAAQ;AAAA,MACN,sCAAsC,KAAK,MAAM;AAAA,IAAA,IAKvD,KAAK,gBAAA,GACL,KAAK,oBAAA;AAAA,EACP;AAAA;AAAA,EAGQ,oBAA0B;AAChC,QAAI,KAAK,YAAa;AACtB,UAAMC,IAAO,SAAS,cAAc,MAAM;AAC1C,IAAAA,EAAK,KAAK,KAAK,aAEfA,EAAK,MAAM,UACT,yGACF,KAAK,YAAYA,CAAI,GACrB,KAAK,cAAcA;AAAA,EACrB;AAAA;AAAA,EAGQ,kBAAwB;AAC9B,QAAI,CAAC,KAAK,YAAa;AAEvB,KADiB,CAAC,CAAC,KAAK,SAAS,KAAK,kBACtB,KAAK,QACnB,KAAK,YAAY,cAAc,KAAK,QAC3B,KAAK,WACd,KAAK,YAAY,cAAc,KAAK,WAEpC,KAAK,YAAY,cAAc;AAAA,EAEnC;AAAA;AAAA,EAGQ,yBAAyB,GAAgB;AAE/C,UAAMC,IADO,EAAE,OACO,iBAAA;AACtB,SAAK,kBAAkBA,EAAS,KAAKR,CAAa,KAAK,MACvD,KAAK,oBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,kBAAkBS,GAAiB;;AACzC,KAAAJ,IAAA,KAAK,oBAAL,QAAAA,EAAsB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBQ,sBAA4B;AAClC,UAAMK,IAAU,KAAK;AAOrB,QANI,CAACA,KAGDA,EAAQ,QAAQ,WAAW,KAAK,KAGhCA,EAAQ,aAAa,mBAAmB,EAAG;AAE/C,UAAMC,IAAW,CAAC,CAAC,KAAK,SAAS,KAAK,eAChCC,IAAU,CAAC,EAAE,KAAK,SAAS,KAAK,YAAY,KAAK,iBAAiB,KAAK;AAG7E,IAAI,KAAK,SAAS,CAAC,KAAK,gBACtBF,EAAQ,aAAa,cAAc,KAAK,KAAK,IAE7CA,EAAQ,gBAAgB,YAAY,GAIlC,KAAK,WACPA,EAAQ,aAAa,iBAAiB,MAAM,IAE5CA,EAAQ,gBAAgB,eAAe,GAIrCC,IACFD,EAAQ,aAAa,gBAAgB,MAAM,IAE3CA,EAAQ,gBAAgB,cAAc,GAIpCE,IACFF,EAAQ,aAAa,oBAAoB,KAAK,WAAW,IAEzDA,EAAQ,gBAAgB,kBAAkB;AAAA,EAE9C;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAW,CAAC,CAAC,KAAK,SAAS,KAAK,eAChCE,IAAU,CAAC,CAAC,KAAK,YAAY,KAAK,cAElCC,IAAe;AAAA,MACnB,OAAO;AAAA,MACP,gBAAgBH;AAAA,MAChB,mBAAmB,KAAK;AAAA,MACxB,mBAAmB,KAAK;AAAA,MACxB,kBAAkB,KAAK,WAAW;AAAA,MAClC,kBAAkB,KAAK,WAAW;AAAA,MAClC,kBAAkB,KAAK,WAAW;AAAA,MAClC,wBAAwB,KAAK,WAAW;AAAA,IAAA;AAG1C,WAAOI;AAAA,gCACqBC,EAASF,CAAY,CAAC;AAAA;AAAA;AAAA,2CAGX,KAAK,sBAAsB;AAAA,cACxD,KAAK,SAAS,CAAC,KAAK,gBAClBC;AAAA,oEACoD,KAAK,iBAAiB;AAAA,sBACpE,KAAK,KAAK;AAAA,sBACV,KAAK,WACHA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAMAE,CAAO;AAAA;AAAA,oBAGfA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BASO,KAAK,wBAAwB;AAAA;AAAA;AAAA;AAAA,yCAIlB,KAAK,sBAAsB;AAAA,YACxD,KAAK,QACHF;AAAA,oEACsD,KAAK,QAAQ;AAAA,oBAC7D,KAAK,KAAK;AAAA;AAAA,kBAGhBE,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAUN,KAAK,WAAW;AAAA,oBACX,CAACJ,KAAWF,CAAQ;AAAA;AAAA,0CAEE,KAAK,qBAAqB,IAAI,KAAK,QAAQ;AAAA;AAAA;AAAA;AAAA,EAInF;AACF;AAzTaT,EACK,SAAS,CAACgB,GAAarB,CAAgB;AASvDsB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATflB,EAUX,WAAA,SAAA,CAAA;AAOAiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhB/BlB,EAiBX,WAAA,YAAA,CAAA;AAOAiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvBflB,EAwBX,WAAA,SAAA,CAAA;AAOAiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GA9BvClB,EA+BX,WAAA,YAAA,CAAA;AAQAiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtC/BlB,EAuCX,WAAA,YAAA,CAAA;AAOAiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,WAAW,SAAS,IAAM;AAAA,GA7CpDlB,EA8CX,WAAA,UAAA,CAAA;AAOAiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GApD9BlB,EAqDX,WAAA,UAAA,CAAA;AAIiBiB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAzDInB,EAyDM,WAAA,iBAAA,CAAA;AACAiB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA1DInB,EA0DM,WAAA,iBAAA,CAAA;AACAiB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA3DInB,EA2DM,WAAA,gBAAA,CAAA;AA3DNA,IAANiB,EAAA;AAAA,EADNG,EAAc,UAAU;AAAA,GACZpB,CAAA;"}