@helixui/library 0.1.0 → 0.1.3

package/dist/shared/{hx-text-input-Dv458950.js.map → hx-text-input-BUMgOQHX.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-text-input-Dv458950.js","sources":["../../src/components/hx-text-input/hx-text-input.styles.ts","../../src/components/hx-text-input/hx-text-input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTextInputStyles = 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-space-1, 0.25rem);\n    font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\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-input-label-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__required-marker {\n    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Input Wrapper ─── */\n\n  .field__input-wrapper {\n    display: flex;\n    align-items: center;\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));\n    border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    overflow: hidden;\n  }\n\n  .field__input-wrapper:focus-within {\n    border-color: var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb))\n          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  /* ─── Error State ─── */\n\n  .field--error .field__input-wrapper {\n    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  .field--error .field__input-wrapper:focus-within {\n    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))\n          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  /* ─── Slots (Prefix / Suffix) ─── */\n\n  .field__prefix,\n  .field__suffix {\n    display: flex;\n    align-items: center;\n    color: var(--hx-color-neutral-500, #6c757d);\n    flex-shrink: 0;\n  }\n\n  /* Only add padding when slot has content — avoids phantom space on empty slots */\n  .field__prefix--filled {\n    padding: 0 var(--hx-space-3, 0.75rem);\n  }\n\n  .field__suffix--filled {\n    padding: 0 var(--hx-space-3, 0.75rem);\n  }\n\n  /* ─── Native Input ─── */\n\n  .field__input {\n    flex: 1;\n    border: none;\n    outline: none;\n    background: transparent;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    font-family: inherit;\n    font-size: var(--hx-font-size-md, 1rem);\n    color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));\n    line-height: var(--hx-line-height-normal, 1.5);\n    min-height: var(--hx-size-10, 2.5rem);\n    width: 100%;\n  }\n\n  .field__input::placeholder {\n    color: var(--hx-color-neutral-400, #adb5bd);\n  }\n\n  .field__input:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .field--size-sm .field__input {\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-size-8, 2rem);\n    font-size: var(--hx-input-sm-font-size, 0.875rem);\n  }\n\n  .field--size-md .field__input {\n    /* md is the default — no overrides needed */\n  }\n\n  .field--size-lg .field__input {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n    min-height: var(--hx-size-12, 3rem);\n    font-size: var(--hx-input-lg-font-size, 1.125rem);\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-color-neutral-500, #6c757d);\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-input-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .field__input-wrapper {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTextInputStyles } from './hx-text-input.styles.js';\n\n// Module-level counter for stable, SSR-compatible IDs (avoids Math.random() hydration mismatch)\nlet _hxTextInputIdCounter = 0;\n\n/**\n * A text input component with label, validation, and form association.\n * Supports accessible labeling via `label` property, `aria-label` attribute, or the `label` slot.\n * Uses `aria-invalid`, `aria-describedby`, and `aria-required` on the native input for screen reader support.\n * Error messages are announced via `role=\"alert\"`. Keyboard navigation follows native input behavior.\n *\n * @summary Form-associated text input with built-in label, error, and help text.\n *\n * @tag hx-text-input\n *\n * @slot label - Custom label content (overrides the label property). Use for Drupal Form API rendered labels.\n * @slot prefix - Content rendered before the input (e.g., icon).\n * @slot suffix - Content rendered after the input (e.g., icon or button).\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property). Use for Drupal Form API rendered errors.\n *\n * @fires {CustomEvent<{value: string}>} hx-input - Dispatched on every keystroke as the user types.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the input loses focus after its value changed.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart input-wrapper - The wrapper around prefix, input, and suffix.\n * @csspart input - The native input element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-input-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-input-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-input-border-color=var(--hx-color-neutral-300)] - Input border color.\n * @cssprop [--hx-input-border-radius=var(--hx-border-radius-md)] - Input border radius.\n * @cssprop [--hx-input-font-family=var(--hx-font-family-sans)] - Input font family.\n * @cssprop [--hx-input-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-input-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-input-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-input-sm-font-size=0.875rem] - Font size for the sm size variant.\n * @cssprop [--hx-input-lg-font-size=1.125rem] - Font size for the lg size variant.\n */\n@customElement('hx-text-input')\nexport class HelixTextInput extends LitElement {\n  static override styles = [tokenStyles, helixTextInputStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The visible label text for the input.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Placeholder text shown when the input is empty.\n   * @attr placeholder\n   */\n  @property({ type: String })\n  placeholder = '';\n\n  /**\n   * The current value of the input.\n   * @attr value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * The type of the native input element.\n   * @attr type\n   */\n  @property({ type: String })\n  type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' | 'date' = 'text';\n\n  /**\n   * Whether the input is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the input is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message to display. When set, the input enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the input for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * The name of the input, used for form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Accessible name for screen readers, if different from the visible label.\n   * @attr aria-label\n   */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel: string | null = null;\n\n  /**\n   * Whether the input is read-only.\n   * @attr readonly\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Minimum number of characters allowed.\n   * @attr minlength\n   */\n  @property({ type: Number })\n  minlength: number | undefined = undefined;\n\n  /**\n   * Maximum number of characters allowed.\n   * @attr maxlength\n   */\n  @property({ type: Number })\n  maxlength: number | undefined = undefined;\n\n  /**\n   * A regular expression pattern the value must match for form validation.\n   * @attr pattern\n   */\n  @property({ type: String })\n  pattern = '';\n\n  /**\n   * Hint for the browser's autocomplete feature. Accepts standard HTML autocomplete values.\n   * @attr autocomplete\n   */\n  @property({ type: String })\n  autocomplete = '';\n\n  /**\n   * Visual size of the input field.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size', reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  // ─── Internal References ───\n\n  /** @internal */\n  @query('.field__input')\n  private _input!: HTMLInputElement;\n\n  // ─── Slot Tracking ───\n\n  /** @internal */\n  private _hasLabelSlot = false;\n  /** @internal */\n  private _hasErrorSlot = false;\n  /** @internal */\n  private _hasPrefixSlot = false;\n  /** @internal */\n  private _hasSuffixSlot = false;\n  /** @internal */\n  private _hasHelpTextSlot = false;\n\n  /** @internal */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedElements().length > 0;\n    if (this._hasLabelSlot) {\n      const slottedLabel = slot.assignedElements()[0];\n      if (slottedLabel && !slottedLabel.id) {\n        slottedLabel.id = `${this._inputId}-slotted-label`;\n      }\n    }\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedElements().length > 0;\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  private _handlePrefixSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasPrefixSlot = slot.assignedElements().length > 0;\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  private _handleSuffixSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSuffixSlot = slot.assignedElements().length > 0;\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  private _handleHelpTextSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpTextSlot = slot.assignedElements().length > 0;\n    this.requestUpdate();\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('value')) {\n      this._internals.setFormValue(this.value);\n    }\n    if (\n      changedProperties.has('value') ||\n      changedProperties.has('required') ||\n      changedProperties.has('minlength') ||\n      changedProperties.has('maxlength')\n    ) {\n      this._updateValidity();\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the input satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** @internal */\n  private _updateValidity(): void {\n    if (this.required && !this.value) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'This field is required.',\n        this._input,\n      );\n    } else if (\n      this.minlength !== undefined &&\n      this.value.length > 0 &&\n      this.value.length < this.minlength\n    ) {\n      this._internals.setValidity(\n        { tooShort: true },\n        this.error || `Please lengthen this text to ${this.minlength} characters or more.`,\n        this._input,\n      );\n    } else if (this.maxlength !== undefined && this.value.length > this.maxlength) {\n      this._internals.setValidity(\n        { tooLong: true },\n        this.error || `Please shorten this text to ${this.maxlength} characters or fewer.`,\n        this._input,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  // Called by the form when it resets\n  formResetCallback(): void {\n    this.value = '';\n    this._internals.setFormValue('');\n  }\n\n  // Called when the form restores state (e.g., back/forward navigation)\n  formStateRestoreCallback(state: string): void {\n    this.value = state;\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleInput(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    this._internals.setFormValue(this.value);\n\n    /**\n     * Dispatched on every keystroke as the user types.\n     * @event hx-input\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-input', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    this._internals.setFormValue(this.value);\n    this._updateValidity();\n\n    /**\n     * Dispatched when the input loses focus after its value changed.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the input element. */\n  override focus(options?: FocusOptions): void {\n    this._input?.focus(options);\n  }\n\n  /** Selects all text in the input. */\n  select(): void {\n    this._input?.select();\n  }\n\n  // ─── Render ───\n\n  /** @internal */\n  private _inputId = `hx-text-input-${++_hxTextInputIdCounter}`;\n  /** @internal */\n  private _helpTextId = `${this._inputId}-help`;\n  /** @internal */\n  private _errorId = `${this._inputId}-error`;\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const fieldClasses = {\n      field: true,\n      'field--error': hasError,\n      'field--disabled': this.disabled,\n      'field--required': this.required,\n      [`field--size-${this.size}`]: true,\n    };\n\n    const describedBy =\n      [\n        hasError ? this._errorId : null,\n        this.helpText || this._hasHelpTextSlot ? this._helpTextId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <div part=\"field\" class=${classMap(fieldClasses)}>\n        <div class=\"field__label-wrapper\">\n          <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n            ${this.label\n              ? html`\n                  <label part=\"label\" class=\"field__label\" for=${this._inputId}>\n                    ${this.label}\n                    ${this.required\n                      ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n                      : nothing}\n                  </label>\n                `\n              : nothing}\n          </slot>\n        </div>\n\n        <div part=\"input-wrapper\" class=\"field__input-wrapper\">\n          <span\n            class=${classMap({\n              field__prefix: true,\n              'field__prefix--filled': this._hasPrefixSlot,\n            })}\n          >\n            <slot name=\"prefix\" @slotchange=${this._handlePrefixSlotChange}></slot>\n          </span>\n\n          <input\n            part=\"input\"\n            class=\"field__input\"\n            id=${this._inputId}\n            type=${this.type}\n            .value=${live(this.value)}\n            placeholder=${ifDefined(this.placeholder || undefined)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            name=${ifDefined(this.name || undefined)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            pattern=${ifDefined(this.pattern || undefined)}\n            autocomplete=${ifDefined(this.autocomplete || undefined)}\n            aria-label=${ifDefined(this.ariaLabel || undefined)}\n            aria-labelledby=${ifDefined(\n              this._hasLabelSlot ? `${this._inputId}-slotted-label` : undefined,\n            )}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            @input=${this._handleInput}\n            @change=${this._handleChange}\n          />\n\n          <span\n            class=${classMap({\n              field__suffix: true,\n              'field__suffix--filled': this._hasSuffixSlot,\n            })}\n          >\n            <slot name=\"suffix\" @slotchange=${this._handleSuffixSlotChange}></slot>\n          </span>\n        </div>\n\n        ${hasError\n          ? html`\n              <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>\n              </div>\n            `\n          : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n        ${(this.helpText || this._hasHelpTextSlot) && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}>\n                  ${this.helpText}\n                </slot>\n              </div>\n            `\n          : html`<slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}></slot>`}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-text-input': HelixTextInput;\n  }\n}\n\n/** Primary type alias for hx-text-input */\nexport type HxTextInput = HelixTextInput;\n\n/** @deprecated Use HxTextInput instead */\nexport type WcTextInput = HelixTextInput;\n"],"names":["helixTextInputStyles","css","_hxTextInputIdCounter","HelixTextInput","LitElement","slot","slottedLabel","changedProperties","state","target","options","_a","hasError","fieldClasses","describedBy","html","classMap","nothing","live","ifDefined","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}
+{"version":3,"file":"hx-text-input-BUMgOQHX.js","sources":["../../src/components/hx-text-input/hx-text-input.styles.ts","../../src/components/hx-text-input/hx-text-input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTextInputStyles = 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-space-1, 0.25rem);\n    font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\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-input-label-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__required-marker {\n    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Input Wrapper ─── */\n\n  .field__input-wrapper {\n    display: flex;\n    align-items: center;\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));\n    border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    overflow: hidden;\n  }\n\n  .field__input-wrapper:focus-within {\n    border-color: var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb))\n          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  /* ─── Error State ─── */\n\n  .field--error .field__input-wrapper {\n    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  .field--error .field__input-wrapper:focus-within {\n    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))\n          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  /* ─── Slots (Prefix / Suffix) ─── */\n\n  .field__prefix,\n  .field__suffix {\n    display: flex;\n    align-items: center;\n    color: var(--hx-color-neutral-500, #6c757d);\n    flex-shrink: 0;\n  }\n\n  /* Only add padding when slot has content — avoids phantom space on empty slots */\n  .field__prefix--filled {\n    padding: 0 var(--hx-space-3, 0.75rem);\n  }\n\n  .field__suffix--filled {\n    padding: 0 var(--hx-space-3, 0.75rem);\n  }\n\n  /* ─── Native Input ─── */\n\n  .field__input {\n    flex: 1;\n    border: none;\n    outline: none;\n    background: transparent;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    font-family: inherit;\n    font-size: var(--hx-font-size-md, 1rem);\n    color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));\n    line-height: var(--hx-line-height-normal, 1.5);\n    min-height: var(--hx-size-10, 2.5rem);\n    width: 100%;\n  }\n\n  .field__input::placeholder {\n    color: var(--hx-color-neutral-400, #adb5bd);\n  }\n\n  .field__input:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .field--size-sm .field__input {\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-size-8, 2rem);\n    font-size: var(--hx-input-sm-font-size, 0.875rem);\n  }\n\n  .field--size-md .field__input {\n    /* md is the default — no overrides needed */\n  }\n\n  .field--size-lg .field__input {\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n    min-height: var(--hx-size-12, 3rem);\n    font-size: var(--hx-input-lg-font-size, 1.125rem);\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-color-neutral-500, #6c757d);\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-input-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .field__input-wrapper {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTextInputStyles } from './hx-text-input.styles.js';\n\n// Module-level counter for stable, SSR-compatible IDs (avoids Math.random() hydration mismatch)\nlet _hxTextInputIdCounter = 0;\n\n/**\n * A text input component with label, validation, and form association.\n * Supports accessible labeling via `label` property, `aria-label` attribute, or the `label` slot.\n * Uses `aria-invalid`, `aria-describedby`, and `aria-required` on the native input for screen reader support.\n * Error messages are announced via `role=\"alert\"`. Keyboard navigation follows native input behavior.\n *\n * @summary Form-associated text input with built-in label, error, and help text.\n *\n * @tag hx-text-input\n *\n * @slot label - Custom label content (overrides the label property). Use for Drupal Form API rendered labels.\n * @slot prefix - Content rendered before the input (e.g., icon).\n * @slot suffix - Content rendered after the input (e.g., icon or button).\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property). Use for Drupal Form API rendered errors.\n *\n * @fires {CustomEvent<{value: string}>} hx-input - Dispatched on every keystroke as the user types.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the input loses focus after its value changed.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart input-wrapper - The wrapper around prefix, input, and suffix.\n * @csspart input - The native input element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-input-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-input-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-input-border-color=var(--hx-color-neutral-300)] - Input border color.\n * @cssprop [--hx-input-border-radius=var(--hx-border-radius-md)] - Input border radius.\n * @cssprop [--hx-input-font-family=var(--hx-font-family-sans)] - Input font family.\n * @cssprop [--hx-input-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-input-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-input-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-input-sm-font-size=0.875rem] - Font size for the sm size variant.\n * @cssprop [--hx-input-lg-font-size=1.125rem] - Font size for the lg size variant.\n */\n@customElement('hx-text-input')\nexport class HelixTextInput extends LitElement {\n  static override styles = [tokenStyles, helixTextInputStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The visible label text for the input.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Placeholder text shown when the input is empty.\n   * @attr placeholder\n   */\n  @property({ type: String })\n  placeholder = '';\n\n  /**\n   * The current value of the input.\n   * @attr value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * The type of the native input element.\n   * @attr type\n   */\n  @property({ type: String })\n  type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' | 'date' = 'text';\n\n  /**\n   * Whether the input is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the input is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message to display. When set, the input enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the input for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * The name of the input, used for form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Accessible name for screen readers, if different from the visible label.\n   * @attr aria-label\n   */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel: string | null = null;\n\n  /**\n   * Whether the input is read-only.\n   * @attr readonly\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Minimum number of characters allowed.\n   * @attr minlength\n   */\n  @property({ type: Number })\n  minlength: number | undefined = undefined;\n\n  /**\n   * Maximum number of characters allowed.\n   * @attr maxlength\n   */\n  @property({ type: Number })\n  maxlength: number | undefined = undefined;\n\n  /**\n   * A regular expression pattern the value must match for form validation.\n   * @attr pattern\n   */\n  @property({ type: String })\n  pattern = '';\n\n  /**\n   * Hint for the browser's autocomplete feature. Accepts standard HTML autocomplete values.\n   * @attr autocomplete\n   */\n  @property({ type: String })\n  autocomplete = '';\n\n  /**\n   * Visual size of the input field.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size', reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  // ─── Internal References ───\n\n  /** @internal */\n  @query('.field__input')\n  private _input!: HTMLInputElement;\n\n  // ─── Slot Tracking ───\n\n  /** @internal */\n  private _hasLabelSlot = false;\n  /** @internal */\n  private _hasErrorSlot = false;\n  /** @internal */\n  private _hasPrefixSlot = false;\n  /** @internal */\n  private _hasSuffixSlot = false;\n  /** @internal */\n  private _hasHelpTextSlot = false;\n\n  /** @internal */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedElements().length > 0;\n    if (this._hasLabelSlot) {\n      const slottedLabel = slot.assignedElements()[0];\n      if (slottedLabel && !slottedLabel.id) {\n        slottedLabel.id = `${this._inputId}-slotted-label`;\n      }\n    }\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedElements().length > 0;\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  private _handlePrefixSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasPrefixSlot = slot.assignedElements().length > 0;\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  private _handleSuffixSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasSuffixSlot = slot.assignedElements().length > 0;\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  private _handleHelpTextSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpTextSlot = slot.assignedElements().length > 0;\n    this.requestUpdate();\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('value')) {\n      this._internals.setFormValue(this.value);\n    }\n    if (\n      changedProperties.has('value') ||\n      changedProperties.has('required') ||\n      changedProperties.has('minlength') ||\n      changedProperties.has('maxlength')\n    ) {\n      this._updateValidity();\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the input satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** @internal */\n  private _updateValidity(): void {\n    if (this.required && !this.value) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'This field is required.',\n        this._input,\n      );\n    } else if (\n      this.minlength !== undefined &&\n      this.value.length > 0 &&\n      this.value.length < this.minlength\n    ) {\n      this._internals.setValidity(\n        { tooShort: true },\n        this.error || `Please lengthen this text to ${this.minlength} characters or more.`,\n        this._input,\n      );\n    } else if (this.maxlength !== undefined && this.value.length > this.maxlength) {\n      this._internals.setValidity(\n        { tooLong: true },\n        this.error || `Please shorten this text to ${this.maxlength} characters or fewer.`,\n        this._input,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  // Called by the form when it resets\n  formResetCallback(): void {\n    this.value = '';\n    this._internals.setFormValue('');\n  }\n\n  // Called when the form restores state (e.g., back/forward navigation)\n  formStateRestoreCallback(state: string): void {\n    this.value = state;\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleInput(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    this._internals.setFormValue(this.value);\n\n    /**\n     * Dispatched on every keystroke as the user types.\n     * @event hx-input\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-input', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleChange(e: Event): void {\n    const target = e.target as HTMLInputElement;\n    this.value = target.value;\n    this._internals.setFormValue(this.value);\n    this._updateValidity();\n\n    /**\n     * Dispatched when the input loses focus after its value changed.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the input element. */\n  override focus(options?: FocusOptions): void {\n    this._input?.focus(options);\n  }\n\n  /** Selects all text in the input. */\n  select(): void {\n    this._input?.select();\n  }\n\n  // ─── Render ───\n\n  /** @internal */\n  private _inputId = `hx-text-input-${++_hxTextInputIdCounter}`;\n  /** @internal */\n  private _helpTextId = `${this._inputId}-help`;\n  /** @internal */\n  private _errorId = `${this._inputId}-error`;\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const fieldClasses = {\n      field: true,\n      'field--error': hasError,\n      'field--disabled': this.disabled,\n      'field--required': this.required,\n      [`field--size-${this.size}`]: true,\n    };\n\n    const describedBy =\n      [\n        hasError ? this._errorId : null,\n        this.helpText || this._hasHelpTextSlot ? this._helpTextId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <div part=\"field\" class=${classMap(fieldClasses)}>\n        <div class=\"field__label-wrapper\">\n          <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n            ${this.label\n              ? html`\n                  <label part=\"label\" class=\"field__label\" for=${this._inputId}>\n                    ${this.label}\n                    ${this.required\n                      ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n                      : nothing}\n                  </label>\n                `\n              : nothing}\n          </slot>\n        </div>\n\n        <div part=\"input-wrapper\" class=\"field__input-wrapper\">\n          <span\n            class=${classMap({\n              field__prefix: true,\n              'field__prefix--filled': this._hasPrefixSlot,\n            })}\n          >\n            <slot name=\"prefix\" @slotchange=${this._handlePrefixSlotChange}></slot>\n          </span>\n\n          <input\n            part=\"input\"\n            class=\"field__input\"\n            id=${this._inputId}\n            type=${this.type}\n            .value=${live(this.value)}\n            placeholder=${ifDefined(this.placeholder || undefined)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            name=${ifDefined(this.name || undefined)}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            pattern=${ifDefined(this.pattern || undefined)}\n            autocomplete=${ifDefined(this.autocomplete || undefined)}\n            aria-label=${ifDefined(this.ariaLabel || undefined)}\n            aria-labelledby=${ifDefined(\n              this._hasLabelSlot ? `${this._inputId}-slotted-label` : undefined,\n            )}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            @input=${this._handleInput}\n            @change=${this._handleChange}\n          />\n\n          <span\n            class=${classMap({\n              field__suffix: true,\n              'field__suffix--filled': this._hasSuffixSlot,\n            })}\n          >\n            <slot name=\"suffix\" @slotchange=${this._handleSuffixSlotChange}></slot>\n          </span>\n        </div>\n\n        ${hasError\n          ? html`\n              <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>\n              </div>\n            `\n          : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n        ${(this.helpText || this._hasHelpTextSlot) && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}>\n                  ${this.helpText}\n                </slot>\n              </div>\n            `\n          : html`<slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}></slot>`}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-text-input': HelixTextInput;\n  }\n}\n\n/** Primary type alias for hx-text-input */\nexport type HxTextInput = HelixTextInput;\n\n/** @deprecated Use HxTextInput instead */\nexport type WcTextInput = HelixTextInput;\n"],"names":["helixTextInputStyles","css","_hxTextInputIdCounter","HelixTextInput","LitElement","slot","slottedLabel","changedProperties","state","target","options","_a","hasError","fieldClasses","describedBy","html","classMap","nothing","live","ifDefined","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-textarea-BX8nCfDJ.js → hx-textarea-Bsq5aJf8.js}

@@ -1,9 +1,9 @@
-import { css as u, LitElement as f, nothing as d, html as o } from "lit";
-import { property as i, query as v, state as x, customElement as _ } from "lit/decorators.js";
+import { css as u, LitElement as _, nothing as d, html as o } from "lit";
+import { property as i, query as f, state as c, customElement as v } from "lit/decorators.js";
 import { classMap as g } from "lit/directives/class-map.js";
 import { ifDefined as n } from "lit/directives/if-defined.js";
 import { live as b } from "lit/directives/live.js";
-import { t as m } from "./lit-Dpo7RLp4.js";
+import { tokenStyles as m } from "@helixui/tokens/lit";
 const y = u`
   :host {
     display: block;
@@ -156,11 +156,11 @@ const y = u`
   }
 `;
 var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (e, t, l, h) => {
-  for (var s = h > 1 ? void 0 : h ? w(t, l) : t, p = e.length - 1, c; p >= 0; p--)
-    (c = e[p]) && (s = (h ? c(t, l, s) : c(s)) || s);
+  for (var s = h > 1 ? void 0 : h ? w(t, l) : t, p = e.length - 1, x; p >= 0; p--)
+    (x = e[p]) && (s = (h ? x(t, l, s) : x(s)) || s);
   return h && s && $(t, l, s), s;
 };
-let S = 0, r = class extends f {
+let S = 0, r = class extends _ {
   constructor() {
     super(), this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.name = "", this.rows = 4, this.resize = "vertical", this.showCount = !1, this.ariaLabel = null, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpTextSlot = !1, this._textareaId = `hx-textarea-${++S}`, this._helpTextId = `${this._textareaId}-help`, this._errorId = `${this._textareaId}-error`, this._counterId = `${this._textareaId}-counter`, this._internals = this.attachInternals();
   }
@@ -184,7 +184,7 @@ let S = 0, r = class extends f {
   }
   // ─── Lifecycle ───
   updated(e) {
-    super.updated(e), e.has("value") && this._internals.setFormValue(this.value), (e.has("value") || e.has("required") || e.has("maxlength")) && this._updateValidity();
+    super.updated(e), e.has("value") && this._internals.setFormValue(this.value), (e.has("value") || e.has("required") || e.has("maxlength")) && this._updateValidity(), e.has("value") && this.resize === "auto" && this._textarea && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
   }
   // ─── Form Integration ───
   /** Returns the associated form element, if any. */
@@ -322,7 +322,7 @@ let S = 0, r = class extends f {
         ${this._renderCounter()}
         ${e ? o`
               <div part="error" class="field__error" id=${this._errorId} role="alert">
-                <slot name="error" @slotchange=${this._handleErrorSlotChange}> ${this.error} </slot>
+                <slot name="error" @slotchange=${this._handleErrorSlotChange}>${this.error}</slot>
               </div>
             ` : o`<slot name="error" @slotchange=${this._handleErrorSlotChange}></slot>`}
         ${l ? o`
@@ -378,21 +378,21 @@ a([
   i({ type: String, attribute: "aria-label" })
 ], r.prototype, "ariaLabel", 2);
 a([
-  v(".field__textarea")
+  f(".field__textarea")
 ], r.prototype, "_textarea", 2);
 a([
-  x()
+  c()
 ], r.prototype, "_hasLabelSlot", 2);
 a([
-  x()
+  c()
 ], r.prototype, "_hasErrorSlot", 2);
 a([
-  x()
+  c()
 ], r.prototype, "_hasHelpTextSlot", 2);
 r = a([
-  _("hx-textarea")
+  v("hx-textarea")
 ], r);
 export {
   r as H
 };
-//# sourceMappingURL=hx-textarea-BX8nCfDJ.js.map
+//# sourceMappingURL=hx-textarea-Bsq5aJf8.js.map

package/dist/shared/hx-textarea-Bsq5aJf8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-textarea-Bsq5aJf8.js","sources":["../../src/components/hx-textarea/hx-textarea.styles.ts","../../src/components/hx-textarea/hx-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTextareaStyles = 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-space-1, 0.25rem);\n    font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));\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-input-label-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__required-marker {\n    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* --- Textarea Wrapper --- */\n\n  .field__textarea-wrapper {\n    display: flex;\n    flex-direction: column;\n    border: var(--hx-border-width-thin, 1px) solid\n      var(--hx-input-border-color, var(--hx-color-neutral-300, #ced4da));\n    border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    overflow: hidden;\n  }\n\n  .field__textarea-wrapper:focus-within {\n    border-color: var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb))\n          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  /* --- Error State --- */\n\n  .field--error .field__textarea-wrapper {\n    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n  }\n\n  .field--error .field__textarea-wrapper:focus-within {\n    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc3545));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--hx-input-error-color, var(--hx-color-error-500, #dc3545))\n          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),\n        transparent\n      );\n  }\n\n  /* --- Native Textarea --- */\n\n  .field__textarea {\n    border: none;\n    outline: none;\n    background: transparent;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    font-family: inherit;\n    font-size: var(--hx-font-size-md, 1rem);\n    color: var(--hx-input-color, var(--hx-color-neutral-800, #212529));\n    line-height: var(--hx-line-height-normal, 1.5);\n    min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));\n    width: 100%;\n    resize: vertical;\n  }\n\n  .field__textarea::placeholder {\n    color: var(--hx-color-neutral-400, #adb5bd);\n  }\n\n  .field__textarea:disabled {\n    cursor: not-allowed;\n  }\n\n  /* --- Resize Variants --- */\n\n  :host([resize='none']) .field__textarea {\n    resize: none;\n  }\n\n  :host([resize='vertical']) .field__textarea {\n    resize: vertical;\n  }\n\n  :host([resize='both']) .field__textarea {\n    resize: both;\n  }\n\n  :host([resize='auto']) .field__textarea {\n    resize: none;\n    overflow: hidden;\n  }\n\n  /* --- Character Counter --- */\n\n  .field__counter {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-color-neutral-500, #6c757d);\n    line-height: var(--hx-line-height-normal, 1.5);\n    text-align: right;\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-color-neutral-500, #6c757d);\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-input-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTextareaStyles } from './hx-textarea.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxTextareaIdCounter = 0;\n\n/**\n * A multi-line text area component with label, validation, and form association.\n *\n * Uses `aria-invalid` to convey error state and `aria-describedby` to link\n * error/help text to the textarea. Label association is handled through\n * `aria-labelledby` (for slotted labels) or the standard `<label for>` pattern.\n * Supports `aria-label` for cases where a visible label is not present.\n * Validation errors are announced via `role=\"alert\"` (assertive live region).\n *\n * @summary Form-associated textarea with built-in label, error, help text, character counter, and auto-resize.\n *\n * @tag hx-textarea\n *\n * @slot label - Custom label content (overrides the label property). Use for Drupal Form API rendered labels.\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property). Use for Drupal Form API rendered errors.\n *\n * @fires {CustomEvent<{value: string}>} hx-input - Dispatched on every keystroke as the user types.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when the textarea loses focus after its value changed.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart textarea-wrapper - The wrapper around the textarea.\n * @csspart textarea - The native textarea element.\n * @csspart counter - The character count display.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-input-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-input-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-input-border-color=var(--hx-color-neutral-300)] - Input border color.\n * @cssprop [--hx-input-border-radius=var(--hx-border-radius-md)] - Input border radius.\n * @cssprop [--hx-input-font-family=var(--hx-font-family-sans)] - Input font family.\n * @cssprop [--hx-input-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-input-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-input-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-textarea-min-height=var(--hx-size-20, 5rem)] - Minimum textarea height.\n */\n@customElement('hx-textarea')\nexport class HelixTextarea extends LitElement {\n  static override styles = [tokenStyles, helixTextareaStyles];\n\n  // ─── Form Association ───\n\n  /** Enables the element to participate in form submission and validation. */\n  static formAssociated = true;\n\n  /** ElementInternals instance for form association, validation, and ARIA. */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * The visible label text for the textarea.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Placeholder text shown when the textarea is empty.\n   * @attr placeholder\n   */\n  @property({ type: String })\n  placeholder = '';\n\n  /**\n   * The current value of the textarea.\n   * @attr value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Whether the textarea is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the textarea is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message to display. When set, the textarea enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the textarea for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * The name of the textarea, used for form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The number of visible text rows.\n   * @attr rows\n   */\n  @property({ type: Number })\n  rows = 4;\n\n  /**\n   * Maximum number of characters allowed.\n   * @attr maxlength\n   */\n  @property({ type: Number, attribute: 'maxlength' })\n  maxlength: number | undefined;\n\n  /**\n   * Controls how the textarea can be resized. Use 'auto' for auto-grow behavior.\n   * @attr resize\n   */\n  @property({ type: String, reflect: true })\n  resize: 'none' | 'vertical' | 'both' | 'auto' = 'vertical';\n\n  /**\n   * Whether to show a character count below the textarea.\n   * @attr show-count\n   */\n  @property({ type: Boolean, attribute: 'show-count' })\n  showCount = false;\n\n  /**\n   * Accessible name for screen readers, if different from the visible label.\n   * @attr aria-label\n   */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel: string | null = null;\n\n  // ─── Internal References ───\n\n  /** @internal */\n  @query('.field__textarea')\n  private _textarea: HTMLTextAreaElement | undefined;\n\n  // ─── Slot Tracking ───\n\n  /** @internal */\n  @state() private _hasLabelSlot = false;\n  /** @internal */\n  @state() private _hasErrorSlot = false;\n  /** @internal */\n  @state() private _hasHelpTextSlot = false;\n\n  /** @internal */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedElements().length > 0;\n    if (this._hasLabelSlot) {\n      const slottedLabel = slot.assignedElements()[0];\n      if (slottedLabel && !slottedLabel.id) {\n        slottedLabel.id = `${this._textareaId}-slotted-label`;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedElements().length > 0;\n  }\n\n  /** @internal */\n  private _handleHelpTextSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpTextSlot = slot.assignedElements().length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('value')) {\n      this._internals.setFormValue(this.value);\n    }\n    if (\n      changedProperties.has('value') ||\n      changedProperties.has('required') ||\n      changedProperties.has('maxlength')\n    ) {\n      this._updateValidity();\n    }\n    // Auto-grow: respond to programmatic value changes\n    if (changedProperties.has('value') && this.resize === 'auto' && this._textarea) {\n      this._textarea.style.height = 'auto';\n      this._textarea.style.height = `${this._textarea.scrollHeight}px`;\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the textarea satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** @internal */\n  private _updateValidity(): void {\n    const anchor = this._textarea ?? undefined;\n    if (this.required && !this.value) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || 'This field is required.',\n        anchor,\n      );\n    } else if (this.maxlength !== undefined && this.value.length > this.maxlength) {\n      this._internals.setValidity(\n        { tooLong: true },\n        this.error || `Value must be ${this.maxlength} characters or fewer.`,\n        anchor,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** Called by the browser when the owning form is reset. */\n  formResetCallback(): void {\n    this.value = '';\n    this._internals.setFormValue('');\n  }\n\n  /** Called by the browser to restore form state (e.g., back/forward navigation). */\n  formStateRestoreCallback(state: string): void {\n    this.value = state;\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleInput(e: Event): void {\n    const target = e.target as HTMLTextAreaElement;\n    this.value = target.value;\n    // Note: setFormValue is called in updated() via the value change — no double-call here (P1-06 fix)\n\n    // Auto-grow: reset height then set to scrollHeight\n    if (this.resize === 'auto') {\n      target.style.height = 'auto';\n      target.style.height = `${target.scrollHeight}px`;\n    }\n\n    /**\n     * Dispatched on every keystroke as the user types.\n     * @event hx-input\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-input', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleChange(e: Event): void {\n    const target = e.target as HTMLTextAreaElement;\n    this.value = target.value;\n    this._internals.setFormValue(this.value);\n    this._updateValidity();\n\n    /**\n     * Dispatched when the textarea loses focus after its value changed.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the textarea element. */\n  override focus(options?: FocusOptions): void {\n    this._textarea?.focus(options);\n  }\n\n  /** Selects all text in the textarea. */\n  select(): void {\n    this._textarea?.select();\n  }\n\n  // ─── Render ───\n\n  /** @internal */\n  private _textareaId = `hx-textarea-${++_hxTextareaIdCounter}`;\n  /** @internal */\n  private _helpTextId = `${this._textareaId}-help`;\n  /** @internal */\n  private _errorId = `${this._textareaId}-error`;\n  /** @internal */\n  private _counterId = `${this._textareaId}-counter`;\n\n  /** @internal */\n  private _renderCounter() {\n    if (!this.showCount) return nothing;\n\n    const count = this.value.length;\n    const display = this.maxlength !== undefined ? `${count} / ${this.maxlength}` : `${count}`;\n\n    return html`\n      <div part=\"counter\" class=\"field__counter\" id=${this._counterId} aria-live=\"polite\">\n        ${display}\n      </div>\n    `;\n  }\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n\n    const fieldClasses = {\n      field: true,\n      'field--error': hasError,\n      'field--disabled': this.disabled,\n      'field--required': this.required,\n    };\n\n    // P0-02 fix: help text container renders when slot is used OR property is set\n    const hasHelpText = (!!this.helpText || this._hasHelpTextSlot) && !hasError;\n\n    const describedBy =\n      [\n        hasError ? this._errorId : null,\n        hasHelpText ? this._helpTextId : null,\n        this.showCount ? this._counterId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <div part=\"field\" class=${classMap(fieldClasses)}>\n        <div class=\"field__label-wrapper\">\n          <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n            ${this.label\n              ? html`\n                  <label part=\"label\" class=\"field__label\" for=${this._textareaId}>\n                    ${this.label}\n                    ${this.required\n                      ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n                      : nothing}\n                  </label>\n                `\n              : nothing}\n          </slot>\n        </div>\n\n        <div part=\"textarea-wrapper\" class=\"field__textarea-wrapper\">\n          <textarea\n            part=\"textarea\"\n            class=\"field__textarea\"\n            id=${this._textareaId}\n            .value=${live(this.value)}\n            placeholder=${ifDefined(this.placeholder || undefined)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            rows=${this.rows}\n            maxlength=${ifDefined(this.maxlength)}\n            name=${ifDefined(this.name || undefined)}\n            aria-label=${ifDefined(this.ariaLabel ?? undefined)}\n            aria-labelledby=${ifDefined(\n              this._hasLabelSlot ? `${this._textareaId}-slotted-label` : undefined,\n            )}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            @input=${this._handleInput}\n            @change=${this._handleChange}\n          ></textarea>\n        </div>\n\n        ${this._renderCounter()}\n        ${hasError\n          ? html`\n              <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>${this.error}</slot>\n              </div>\n            `\n          : html`<slot name=\"error\" @slotchange=${this._handleErrorSlotChange}></slot>`}\n        ${hasHelpText\n          ? html`\n              <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}>\n                  ${this.helpText}\n                </slot>\n              </div>\n            `\n          : html`<slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}></slot>`}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-textarea': HelixTextarea;\n  }\n}\n\nexport type WcTextarea = HelixTextarea;\n"],"names":["helixTextareaStyles","css","_hxTextareaIdCounter","HelixTextarea","LitElement","slot","slottedLabel","changedProperties","anchor","state","target","options","_a","nothing","count","display","html","hasError","fieldClasses","hasHelpText","describedBy","classMap","live","ifDefined","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-theme-Dc0nKH7V.js → hx-theme-6GDoUG8j.js}

@@ -1,6 +1,6 @@
 import { css as p, LitElement as m, html as u } from "lit";
-import { property as c, customElement as x } from "lit/decorators.js";
-import { t as f, d as F } from "./index-nHBAh0Cr.js";
+import { property as d, customElement as x } from "lit/decorators.js";
+import { tokenEntries as f, darkTokenEntries as F } from "@helixui/tokens";
 const y = p`
   :host {
     display: contents;
@@ -26,8 +26,8 @@ const y = p`
   }
 `;
 var _ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (e, s, o, r) => {
-  for (var t = r > 1 ? void 0 : r ? g(s, o) : s, i = e.length - 1, a; i >= 0; i--)
-    (a = e[i]) && (t = (r ? a(s, o, t) : a(t)) || t);
+  for (var t = r > 1 ? void 0 : r ? g(s, o) : s, i = e.length - 1, h; i >= 0; i--)
+    (h = e[i]) && (t = (r ? h(s, o, t) : h(t)) || t);
   return r && t && _(s, o, t), t;
 };
 const v = [
@@ -72,9 +72,9 @@ function n(e) {
   return Array.from(e).map(([s, o]) => `  ${s}: ${o};`).join(`
 `);
 }
-const d = /* @__PURE__ */ new Map();
+const c = /* @__PURE__ */ new Map();
 function b(e) {
-  const s = d.get(e);
+  const s = c.get(e);
   if (s) return s;
   const o = new Map(f.map((t) => [t.name, t.value]));
   let r;
@@ -88,8 +88,8 @@ ${n(t)}
 }`;
   } else if (e === "high-contrast") {
     const t = new Map(o);
-    for (const [i, a] of v)
-      t.set(i, a);
+    for (const [i, h] of v)
+      t.set(i, h);
     r = `:host {
 ${n(t)}
   color-scheme: dark;
@@ -99,9 +99,9 @@ ${n(t)}
 ${n(o)}
   color-scheme: light;
 }`;
-  return d.set(e, r), r;
+  return c.set(e, r), r;
 }
-let h = class extends m {
+let a = class extends m {
   constructor() {
     super(...arguments), this.theme = "light", this.system = !1, this._mediaQuery = null, this._mediaHandler = null, this._themeSheet = null;
   }
@@ -160,17 +160,17 @@ let h = class extends m {
     `;
   }
 };
-h.styles = [y];
+a.styles = [y];
 l([
-  c({ type: String, reflect: !0 })
-], h.prototype, "theme", 2);
+  d({ type: String, reflect: !0 })
+], a.prototype, "theme", 2);
 l([
-  c({ type: Boolean, reflect: !0 })
-], h.prototype, "system", 2);
-h = l([
+  d({ type: Boolean, reflect: !0 })
+], a.prototype, "system", 2);
+a = l([
   x("hx-theme")
-], h);
+], a);
 export {
-  h as H
+  a as H
 };
-//# sourceMappingURL=hx-theme-Dc0nKH7V.js.map
+//# sourceMappingURL=hx-theme-6GDoUG8j.js.map

package/dist/shared/{hx-theme-Dc0nKH7V.js.map → hx-theme-6GDoUG8j.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-theme-Dc0nKH7V.js","sources":["../../src/components/hx-theme/hx-theme.styles.ts","../../src/components/hx-theme/hx-theme.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixThemeStyles = css`\n  :host {\n    display: contents;\n  }\n\n  /* display: contents makes this wrapper layout-invisible; exposed as [part=\"base\"]\n     for consumer targeting via CSS parts without affecting layout */\n  .theme-base {\n    display: contents;\n  }\n\n  /* Visually hidden but accessible to screen readers — used for aria-live announcements */\n  .visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenEntries, darkTokenEntries } from '@helixui/tokens';\nimport { helixThemeStyles } from './hx-theme.styles.js';\n\nexport type { TokenDefinition, TokenEntry } from '@helixui/tokens';\n\n/**\n * Supported theme names.\n *\n * Three-tier token cascade applied by this component:\n * - **Primitive tier** (`--hx-color-primary-500`, `--hx-space-4`, etc.) — raw values, always injected\n * - **Semantic tier** (`--hx-color-text-primary`, `--hx-color-surface-default`, etc.) — theme-sensitive,\n *   override primitives for dark / high-contrast themes\n * - **Component tier** (`--hx-button-bg`, `--hx-card-padding`, etc.) — set by individual components,\n *   consumed via semantic fallbacks; not managed by `hx-theme` directly\n *\n * Consumers should override at the semantic tier to respect theme scoping.\n */\nexport type ThemeName = 'light' | 'dark' | 'high-contrast' | 'auto';\n\n/**\n * High-contrast token overrides. Targets WCAG 7:1+ contrast ratios for low-vision users.\n * These are injected on top of the light primitives when theme=\"high-contrast\".\n * Values here mirror the `high-contrast` section of tokens.json; kept in sync manually\n * until HC tokens are promoted to the published @helixui/tokens package.\n */\nconst _hcOverrides: Array<[string, string]> = [\n  ['--hx-color-text-primary', '#FFFFFF'],\n  ['--hx-color-text-secondary', '#FFFFFF'],\n  ['--hx-color-text-muted', '#E0E0E0'],\n  ['--hx-color-text-disabled', '#767676'],\n  ['--hx-color-text-inverse', '#000000'],\n  ['--hx-color-text-link', '#FFFF00'],\n  ['--hx-color-text-link-hover', '#FFFF99'],\n  ['--hx-color-text-link-visited', '#FF80FF'],\n  ['--hx-color-text-link-active', '#FFFFFF'],\n  ['--hx-color-surface-default', '#000000'],\n  ['--hx-color-surface-raised', '#1A1A1A'],\n  ['--hx-color-surface-sunken', '#000000'],\n  ['--hx-color-surface-overlay', 'rgba(0, 0, 0, 0.95)'],\n  ['--hx-color-border-default', '#FFFFFF'],\n  ['--hx-color-border-subtle', '#C0C0C0'],\n  ['--hx-color-border-strong', '#FFFFFF'],\n  ['--hx-color-border-focus', '#FFFF00'],\n  ['--hx-color-focus-ring', '#FFFF00'],\n  ['--hx-color-selection-bg', '#1AEBFF'],\n  ['--hx-color-selection-color', '#000000'],\n  ['--hx-body-bg', '#000000'],\n  ['--hx-body-color', '#FFFFFF'],\n  ['--hx-shadow-sm', '0 1px 2px 0 rgb(255 255 255 / 0.2)'],\n  [\n    '--hx-shadow-md',\n    '0 4px 6px -1px rgb(255 255 255 / 0.3), 0 2px 4px -2px rgb(255 255 255 / 0.2)',\n  ],\n  [\n    '--hx-shadow-lg',\n    '0 10px 15px -3px rgb(255 255 255 / 0.3), 0 4px 6px -4px rgb(255 255 255 / 0.2)',\n  ],\n  [\n    '--hx-shadow-xl',\n    '0 20px 25px -5px rgb(255 255 255 / 0.3), 0 8px 10px -6px rgb(255 255 255 / 0.2)',\n  ],\n  ['--hx-shadow-2xl', '0 25px 50px -12px rgb(255 255 255 / 0.4)'],\n];\n\nfunction _buildProps(entries: Iterable<[string, string]>): string {\n  return Array.from(entries)\n    .map(([name, value]) => `  ${name}: ${value};`)\n    .join('\\n');\n}\n\n/** Module-level CSS cache: one string per ThemeName — avoids re-building on every theme change */\nconst _cssCache = new Map<ThemeName, string>();\n\nfunction _buildThemeCss(theme: ThemeName): string {\n  const cached = _cssCache.get(theme);\n  if (cached) return cached;\n\n  // Build light token base map from the @helixui/tokens package\n  const lightMap = new Map(tokenEntries.map((t) => [t.name, t.value]));\n\n  let css: string;\n  if (theme === 'dark') {\n    // Apply dark semantic overrides on top of light primitives\n    const merged = new Map(lightMap);\n    for (const t of darkTokenEntries) {\n      merged.set(t.name, t.value);\n    }\n    css = `:host {\\n${_buildProps(merged)}\\n  color-scheme: dark;\\n}`;\n  } else if (theme === 'high-contrast') {\n    // Apply HC overrides on top of light primitives — distinct WCAG 7:1+ token set\n    const merged = new Map(lightMap);\n    for (const [name, value] of _hcOverrides) {\n      merged.set(name, value);\n    }\n    css = `:host {\\n${_buildProps(merged)}\\n  color-scheme: dark;\\n}`;\n  } else {\n    // 'light' — 'auto' resolves to 'light' or 'dark' at runtime via effectiveTheme\n    css = `:host {\\n${_buildProps(lightMap)}\\n  color-scheme: light;\\n}`;\n  }\n\n  _cssCache.set(theme, css);\n  return css;\n}\n\n/**\n * A theme provider that injects CSS custom property tokens for a named theme\n * onto a scoped root element. Wrapping content with this component scopes\n * all `--hx-*` design tokens to the selected theme.\n *\n * This is a pure infrastructure component with `display: contents` — it does\n * not affect layout. Use it to apply a theme to a subtree of components.\n *\n * Supported themes:\n * - `\"light\"` — standard light-mode token set (default)\n * - `\"dark\"` — dark-mode semantic overrides applied on top of light primitives\n * - `\"high-contrast\"` — WCAG 7:1+ contrast token set for low-vision accessibility\n * - `\"auto\"` — follows the OS `prefers-color-scheme` media query (light or dark)\n *\n * @summary Injects --hx-* design tokens for the specified theme scope.\n *\n * @tag hx-theme\n *\n * @slot - Default slot for themed content.\n *\n * @csspart base - The inner slot wrapper element. `display: contents` — no layout effect.\n *\n * @cssprop [--hx-*] - All design tokens for the selected theme are injected\n *   as CSS custom properties on the host element.\n *\n * @example Drupal Twig — wrap a region with a dark theme:\n * ```twig\n * <hx-theme theme=\"dark\">\n *   {{ content }}\n * </hx-theme>\n * ```\n *\n * @example Nested scoping — dark sidebar inside a light page:\n * ```html\n * <hx-theme theme=\"light\">\n *   <main>...</main>\n *   <hx-theme theme=\"dark\">\n *     <aside>...</aside>\n *   </hx-theme>\n * </hx-theme>\n * ```\n */\n@customElement('hx-theme')\nexport class HelixTheme extends LitElement {\n  static override styles = [helixThemeStyles];\n\n  /**\n   * The theme to apply. Determines which set of --hx-* tokens are injected.\n   * - `\"light\"` (default): standard light-mode tokens\n   * - `\"dark\"`: dark-mode semantic overrides applied on top of light primitives\n   * - `\"high-contrast\"`: WCAG 7:1+ contrast tokens for low-vision users\n   * - `\"auto\"`: follows OS `prefers-color-scheme`; resolves to `\"light\"` or `\"dark\"` at runtime\n   * @attr theme\n   */\n  @property({ type: String, reflect: true })\n  theme: ThemeName = 'light';\n\n  /**\n   * @deprecated Use `theme=\"auto\"` instead.\n   * When true, auto-detects the preferred color scheme via the\n   * `prefers-color-scheme` media query, overriding the `theme` prop.\n   * @attr system\n   */\n  @property({ type: Boolean, reflect: true })\n  system = false;\n\n  /** @internal */\n  private _mediaQuery: MediaQueryList | null = null;\n  /** @internal */\n  private _mediaHandler: (() => void) | null = null;\n  /** @internal */\n  private _themeSheet: CSSStyleSheet | null = null;\n\n  override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n    this._initThemeSheet();\n    if (this.system || this.theme === 'auto') {\n      this._attachMediaQuery();\n    }\n  }\n\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n    const autoMode = this.system || this.theme === 'auto';\n    if (changed.has('system') || changed.has('theme')) {\n      if (autoMode) {\n        this._attachMediaQuery();\n      } else {\n        this._detachMediaQuery();\n      }\n      this._applyEffectiveTheme();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._detachMediaQuery();\n  }\n\n  /**\n   * Returns the currently active theme name.\n   * When `system=true` or `theme=\"auto\"`, reflects the OS preference (`\"light\"` or `\"dark\"`).\n   * Otherwise returns the `theme` property value.\n   */\n  get effectiveTheme(): ThemeName {\n    if (this.system || this.theme === 'auto') {\n      if (typeof window === 'undefined') return 'light';\n      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    return this.theme;\n  }\n\n  /** @internal */\n  private _initThemeSheet(): void {\n    if (this.shadowRoot) {\n      this._themeSheet = new CSSStyleSheet();\n      this.shadowRoot.adoptedStyleSheets = [\n        ...this.shadowRoot.adoptedStyleSheets,\n        this._themeSheet,\n      ];\n      this._applyEffectiveTheme();\n    }\n  }\n\n  /** @internal */\n  private _attachMediaQuery(): void {\n    if (this._mediaQuery || typeof window === 'undefined') return;\n    this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    this._mediaHandler = () => {\n      this._applyEffectiveTheme();\n      this._announceThemeChange();\n    };\n    this._mediaQuery.addEventListener('change', this._mediaHandler);\n  }\n\n  /** @internal */\n  private _detachMediaQuery(): void {\n    if (this._mediaQuery && this._mediaHandler) {\n      this._mediaQuery.removeEventListener('change', this._mediaHandler);\n    }\n    this._mediaQuery = null;\n    this._mediaHandler = null;\n  }\n\n  /** @internal — notifies AT users when system theme changes programmatically */\n  private _announceThemeChange(): void {\n    const announcer = this.shadowRoot?.querySelector('[role=\"status\"]');\n    if (announcer) {\n      announcer.textContent = `Theme changed to ${this.effectiveTheme}`;\n    }\n  }\n\n  /** @internal */\n  private _applyEffectiveTheme(): void {\n    if (!this._themeSheet) return;\n    void this._themeSheet.replace(_buildThemeCss(this.effectiveTheme));\n  }\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"theme-base\">\n        <slot></slot>\n      </div>\n      <span role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"visually-hidden\"></span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-theme': HelixTheme;\n  }\n}\n"],"names":["helixThemeStyles","css","_hcOverrides","_buildProps","entries","name","value","_cssCache","_buildThemeCss","theme","cached","lightMap","tokenEntries","merged","t","darkTokenEntries","HelixTheme","LitElement","changed","autoMode","announcer","_a","html","__decorateClass","property","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;;;;;;ACyBhC,MAAMC,IAAwC;AAAA,EAC5C,CAAC,2BAA2B,SAAS;AAAA,EACrC,CAAC,6BAA6B,SAAS;AAAA,EACvC,CAAC,yBAAyB,SAAS;AAAA,EACnC,CAAC,4BAA4B,SAAS;AAAA,EACtC,CAAC,2BAA2B,SAAS;AAAA,EACrC,CAAC,wBAAwB,SAAS;AAAA,EAClC,CAAC,8BAA8B,SAAS;AAAA,EACxC,CAAC,gCAAgC,SAAS;AAAA,EAC1C,CAAC,+BAA+B,SAAS;AAAA,EACzC,CAAC,8BAA8B,SAAS;AAAA,EACxC,CAAC,6BAA6B,SAAS;AAAA,EACvC,CAAC,6BAA6B,SAAS;AAAA,EACvC,CAAC,8BAA8B,qBAAqB;AAAA,EACpD,CAAC,6BAA6B,SAAS;AAAA,EACvC,CAAC,4BAA4B,SAAS;AAAA,EACtC,CAAC,4BAA4B,SAAS;AAAA,EACtC,CAAC,2BAA2B,SAAS;AAAA,EACrC,CAAC,yBAAyB,SAAS;AAAA,EACnC,CAAC,2BAA2B,SAAS;AAAA,EACrC,CAAC,8BAA8B,SAAS;AAAA,EACxC,CAAC,gBAAgB,SAAS;AAAA,EAC1B,CAAC,mBAAmB,SAAS;AAAA,EAC7B,CAAC,kBAAkB,oCAAoC;AAAA,EACvD;AAAA,IACE;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,CAAC,mBAAmB,0CAA0C;AAChE;AAEA,SAASC,EAAYC,GAA6C;AAChE,SAAO,MAAM,KAAKA,CAAO,EACtB,IAAI,CAAC,CAACC,GAAMC,CAAK,MAAM,KAAKD,CAAI,KAAKC,CAAK,GAAG,EAC7C,KAAK;AAAA,CAAI;AACd;AAGA,MAAMC,wBAAgB,IAAA;AAEtB,SAASC,EAAeC,GAA0B;AAChD,QAAMC,IAASH,EAAU,IAAIE,CAAK;AAClC,MAAIC,EAAQ,QAAOA;AAGnB,QAAMC,IAAW,IAAI,IAAIC,EAAa,IAAI,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;AAEnE,MAAIX;AACJ,MAAIQ,MAAU,QAAQ;AAEpB,UAAMI,IAAS,IAAI,IAAIF,CAAQ;AAC/B,eAAWG,KAAKC;AACd,MAAAF,EAAO,IAAIC,EAAE,MAAMA,EAAE,KAAK;AAE5B,IAAAb,IAAM;AAAA,EAAYE,EAAYU,CAAM,CAAC;AAAA;AAAA;AAAA,EACvC,WAAWJ,MAAU,iBAAiB;AAEpC,UAAMI,IAAS,IAAI,IAAIF,CAAQ;AAC/B,eAAW,CAACN,GAAMC,CAAK,KAAKJ;AAC1B,MAAAW,EAAO,IAAIR,GAAMC,CAAK;AAExB,IAAAL,IAAM;AAAA,EAAYE,EAAYU,CAAM,CAAC;AAAA;AAAA;AAAA,EACvC;AAEE,IAAAZ,IAAM;AAAA,EAAYE,EAAYQ,CAAQ,CAAC;AAAA;AAAA;AAGzC,SAAAJ,EAAU,IAAIE,GAAOR,CAAG,GACjBA;AACT;AA6CO,IAAMe,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAYL,KAAA,QAAmB,SASnB,KAAA,SAAS,IAGT,KAAQ,cAAqC,MAE7C,KAAQ,gBAAqC,MAE7C,KAAQ,cAAoC;AAAA,EAAA;AAAA,EAEnC,aAAaC,GAA+B;AACnD,UAAM,aAAaA,CAAO,GAC1B,KAAK,gBAAA,IACD,KAAK,UAAU,KAAK,UAAU,WAChC,KAAK,kBAAA;AAAA,EAET;AAAA,EAES,QAAQA,GAA+B;AAC9C,UAAM,QAAQA,CAAO;AACrB,UAAMC,IAAW,KAAK,UAAU,KAAK,UAAU;AAC/C,KAAID,EAAQ,IAAI,QAAQ,KAAKA,EAAQ,IAAI,OAAO,OAC1CC,IACF,KAAK,kBAAA,IAEL,KAAK,kBAAA,GAEP,KAAK,qBAAA;AAAA,EAET;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,kBAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,IAAI,iBAA4B;AAC9B,WAAI,KAAK,UAAU,KAAK,UAAU,SAC5B,OAAO,SAAW,MAAoB,UACnC,OAAO,WAAW,8BAA8B,EAAE,UAAU,SAAS,UAEvE,KAAK;AAAA,EACd;AAAA;AAAA,EAGQ,kBAAwB;AAC9B,IAAI,KAAK,eACP,KAAK,cAAc,IAAI,cAAA,GACvB,KAAK,WAAW,qBAAqB;AAAA,MACnC,GAAG,KAAK,WAAW;AAAA,MACnB,KAAK;AAAA,IAAA,GAEP,KAAK,qBAAA;AAAA,EAET;AAAA;AAAA,EAGQ,oBAA0B;AAChC,IAAI,KAAK,eAAe,OAAO,SAAW,QAC1C,KAAK,cAAc,OAAO,WAAW,8BAA8B,GACnE,KAAK,gBAAgB,MAAM;AACzB,WAAK,qBAAA,GACL,KAAK,qBAAA;AAAA,IACP,GACA,KAAK,YAAY,iBAAiB,UAAU,KAAK,aAAa;AAAA,EAChE;AAAA;AAAA,EAGQ,oBAA0B;AAChC,IAAI,KAAK,eAAe,KAAK,iBAC3B,KAAK,YAAY,oBAAoB,UAAU,KAAK,aAAa,GAEnE,KAAK,cAAc,MACnB,KAAK,gBAAgB;AAAA,EACvB;AAAA;AAAA,EAGQ,uBAA6B;;AACnC,UAAMC,KAAYC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc;AACjD,IAAID,MACFA,EAAU,cAAc,oBAAoB,KAAK,cAAc;AAAA,EAEnE;AAAA;AAAA,EAGQ,uBAA6B;AACnC,IAAK,KAAK,eACL,KAAK,YAAY,QAAQZ,EAAe,KAAK,cAAc,CAAC;AAAA,EACnE;AAAA,EAES,SAAS;AAChB,WAAOc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMT;AACF;AA3HaN,EACK,SAAS,CAAChB,CAAgB;AAW1CuB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAX9BR,EAYX,WAAA,SAAA,CAAA;AASAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApB/BR,EAqBX,WAAA,UAAA,CAAA;AArBWA,IAANO,EAAA;AAAA,EADNE,EAAc,UAAU;AAAA,GACZT,CAAA;"}
+{"version":3,"file":"hx-theme-6GDoUG8j.js","sources":["../../src/components/hx-theme/hx-theme.styles.ts","../../src/components/hx-theme/hx-theme.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixThemeStyles = css`\n  :host {\n    display: contents;\n  }\n\n  /* display: contents makes this wrapper layout-invisible; exposed as [part=\"base\"]\n     for consumer targeting via CSS parts without affecting layout */\n  .theme-base {\n    display: contents;\n  }\n\n  /* Visually hidden but accessible to screen readers — used for aria-live announcements */\n  .visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenEntries, darkTokenEntries } from '@helixui/tokens';\nimport { helixThemeStyles } from './hx-theme.styles.js';\n\nexport type { TokenDefinition, TokenEntry } from '@helixui/tokens';\n\n/**\n * Supported theme names.\n *\n * Three-tier token cascade applied by this component:\n * - **Primitive tier** (`--hx-color-primary-500`, `--hx-space-4`, etc.) — raw values, always injected\n * - **Semantic tier** (`--hx-color-text-primary`, `--hx-color-surface-default`, etc.) — theme-sensitive,\n *   override primitives for dark / high-contrast themes\n * - **Component tier** (`--hx-button-bg`, `--hx-card-padding`, etc.) — set by individual components,\n *   consumed via semantic fallbacks; not managed by `hx-theme` directly\n *\n * Consumers should override at the semantic tier to respect theme scoping.\n */\nexport type ThemeName = 'light' | 'dark' | 'high-contrast' | 'auto';\n\n/**\n * High-contrast token overrides. Targets WCAG 7:1+ contrast ratios for low-vision users.\n * These are injected on top of the light primitives when theme=\"high-contrast\".\n * Values here mirror the `high-contrast` section of tokens.json; kept in sync manually\n * until HC tokens are promoted to the published @helixui/tokens package.\n */\nconst _hcOverrides: Array<[string, string]> = [\n  ['--hx-color-text-primary', '#FFFFFF'],\n  ['--hx-color-text-secondary', '#FFFFFF'],\n  ['--hx-color-text-muted', '#E0E0E0'],\n  ['--hx-color-text-disabled', '#767676'],\n  ['--hx-color-text-inverse', '#000000'],\n  ['--hx-color-text-link', '#FFFF00'],\n  ['--hx-color-text-link-hover', '#FFFF99'],\n  ['--hx-color-text-link-visited', '#FF80FF'],\n  ['--hx-color-text-link-active', '#FFFFFF'],\n  ['--hx-color-surface-default', '#000000'],\n  ['--hx-color-surface-raised', '#1A1A1A'],\n  ['--hx-color-surface-sunken', '#000000'],\n  ['--hx-color-surface-overlay', 'rgba(0, 0, 0, 0.95)'],\n  ['--hx-color-border-default', '#FFFFFF'],\n  ['--hx-color-border-subtle', '#C0C0C0'],\n  ['--hx-color-border-strong', '#FFFFFF'],\n  ['--hx-color-border-focus', '#FFFF00'],\n  ['--hx-color-focus-ring', '#FFFF00'],\n  ['--hx-color-selection-bg', '#1AEBFF'],\n  ['--hx-color-selection-color', '#000000'],\n  ['--hx-body-bg', '#000000'],\n  ['--hx-body-color', '#FFFFFF'],\n  ['--hx-shadow-sm', '0 1px 2px 0 rgb(255 255 255 / 0.2)'],\n  [\n    '--hx-shadow-md',\n    '0 4px 6px -1px rgb(255 255 255 / 0.3), 0 2px 4px -2px rgb(255 255 255 / 0.2)',\n  ],\n  [\n    '--hx-shadow-lg',\n    '0 10px 15px -3px rgb(255 255 255 / 0.3), 0 4px 6px -4px rgb(255 255 255 / 0.2)',\n  ],\n  [\n    '--hx-shadow-xl',\n    '0 20px 25px -5px rgb(255 255 255 / 0.3), 0 8px 10px -6px rgb(255 255 255 / 0.2)',\n  ],\n  ['--hx-shadow-2xl', '0 25px 50px -12px rgb(255 255 255 / 0.4)'],\n];\n\nfunction _buildProps(entries: Iterable<[string, string]>): string {\n  return Array.from(entries)\n    .map(([name, value]) => `  ${name}: ${value};`)\n    .join('\\n');\n}\n\n/** Module-level CSS cache: one string per ThemeName — avoids re-building on every theme change */\nconst _cssCache = new Map<ThemeName, string>();\n\nfunction _buildThemeCss(theme: ThemeName): string {\n  const cached = _cssCache.get(theme);\n  if (cached) return cached;\n\n  // Build light token base map from the @helixui/tokens package\n  const lightMap = new Map(tokenEntries.map((t) => [t.name, t.value]));\n\n  let css: string;\n  if (theme === 'dark') {\n    // Apply dark semantic overrides on top of light primitives\n    const merged = new Map(lightMap);\n    for (const t of darkTokenEntries) {\n      merged.set(t.name, t.value);\n    }\n    css = `:host {\\n${_buildProps(merged)}\\n  color-scheme: dark;\\n}`;\n  } else if (theme === 'high-contrast') {\n    // Apply HC overrides on top of light primitives — distinct WCAG 7:1+ token set\n    const merged = new Map(lightMap);\n    for (const [name, value] of _hcOverrides) {\n      merged.set(name, value);\n    }\n    css = `:host {\\n${_buildProps(merged)}\\n  color-scheme: dark;\\n}`;\n  } else {\n    // 'light' — 'auto' resolves to 'light' or 'dark' at runtime via effectiveTheme\n    css = `:host {\\n${_buildProps(lightMap)}\\n  color-scheme: light;\\n}`;\n  }\n\n  _cssCache.set(theme, css);\n  return css;\n}\n\n/**\n * A theme provider that injects CSS custom property tokens for a named theme\n * onto a scoped root element. Wrapping content with this component scopes\n * all `--hx-*` design tokens to the selected theme.\n *\n * This is a pure infrastructure component with `display: contents` — it does\n * not affect layout. Use it to apply a theme to a subtree of components.\n *\n * Supported themes:\n * - `\"light\"` — standard light-mode token set (default)\n * - `\"dark\"` — dark-mode semantic overrides applied on top of light primitives\n * - `\"high-contrast\"` — WCAG 7:1+ contrast token set for low-vision accessibility\n * - `\"auto\"` — follows the OS `prefers-color-scheme` media query (light or dark)\n *\n * @summary Injects --hx-* design tokens for the specified theme scope.\n *\n * @tag hx-theme\n *\n * @slot - Default slot for themed content.\n *\n * @csspart base - The inner slot wrapper element. `display: contents` — no layout effect.\n *\n * @cssprop [--hx-*] - All design tokens for the selected theme are injected\n *   as CSS custom properties on the host element.\n *\n * @example Drupal Twig — wrap a region with a dark theme:\n * ```twig\n * <hx-theme theme=\"dark\">\n *   {{ content }}\n * </hx-theme>\n * ```\n *\n * @example Nested scoping — dark sidebar inside a light page:\n * ```html\n * <hx-theme theme=\"light\">\n *   <main>...</main>\n *   <hx-theme theme=\"dark\">\n *     <aside>...</aside>\n *   </hx-theme>\n * </hx-theme>\n * ```\n */\n@customElement('hx-theme')\nexport class HelixTheme extends LitElement {\n  static override styles = [helixThemeStyles];\n\n  /**\n   * The theme to apply. Determines which set of --hx-* tokens are injected.\n   * - `\"light\"` (default): standard light-mode tokens\n   * - `\"dark\"`: dark-mode semantic overrides applied on top of light primitives\n   * - `\"high-contrast\"`: WCAG 7:1+ contrast tokens for low-vision users\n   * - `\"auto\"`: follows OS `prefers-color-scheme`; resolves to `\"light\"` or `\"dark\"` at runtime\n   * @attr theme\n   */\n  @property({ type: String, reflect: true })\n  theme: ThemeName = 'light';\n\n  /**\n   * @deprecated Use `theme=\"auto\"` instead.\n   * When true, auto-detects the preferred color scheme via the\n   * `prefers-color-scheme` media query, overriding the `theme` prop.\n   * @attr system\n   */\n  @property({ type: Boolean, reflect: true })\n  system = false;\n\n  /** @internal */\n  private _mediaQuery: MediaQueryList | null = null;\n  /** @internal */\n  private _mediaHandler: (() => void) | null = null;\n  /** @internal */\n  private _themeSheet: CSSStyleSheet | null = null;\n\n  override firstUpdated(changed: PropertyValues): void {\n    super.firstUpdated(changed);\n    this._initThemeSheet();\n    if (this.system || this.theme === 'auto') {\n      this._attachMediaQuery();\n    }\n  }\n\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n    const autoMode = this.system || this.theme === 'auto';\n    if (changed.has('system') || changed.has('theme')) {\n      if (autoMode) {\n        this._attachMediaQuery();\n      } else {\n        this._detachMediaQuery();\n      }\n      this._applyEffectiveTheme();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._detachMediaQuery();\n  }\n\n  /**\n   * Returns the currently active theme name.\n   * When `system=true` or `theme=\"auto\"`, reflects the OS preference (`\"light\"` or `\"dark\"`).\n   * Otherwise returns the `theme` property value.\n   */\n  get effectiveTheme(): ThemeName {\n    if (this.system || this.theme === 'auto') {\n      if (typeof window === 'undefined') return 'light';\n      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    return this.theme;\n  }\n\n  /** @internal */\n  private _initThemeSheet(): void {\n    if (this.shadowRoot) {\n      this._themeSheet = new CSSStyleSheet();\n      this.shadowRoot.adoptedStyleSheets = [\n        ...this.shadowRoot.adoptedStyleSheets,\n        this._themeSheet,\n      ];\n      this._applyEffectiveTheme();\n    }\n  }\n\n  /** @internal */\n  private _attachMediaQuery(): void {\n    if (this._mediaQuery || typeof window === 'undefined') return;\n    this._mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    this._mediaHandler = () => {\n      this._applyEffectiveTheme();\n      this._announceThemeChange();\n    };\n    this._mediaQuery.addEventListener('change', this._mediaHandler);\n  }\n\n  /** @internal */\n  private _detachMediaQuery(): void {\n    if (this._mediaQuery && this._mediaHandler) {\n      this._mediaQuery.removeEventListener('change', this._mediaHandler);\n    }\n    this._mediaQuery = null;\n    this._mediaHandler = null;\n  }\n\n  /** @internal — notifies AT users when system theme changes programmatically */\n  private _announceThemeChange(): void {\n    const announcer = this.shadowRoot?.querySelector('[role=\"status\"]');\n    if (announcer) {\n      announcer.textContent = `Theme changed to ${this.effectiveTheme}`;\n    }\n  }\n\n  /** @internal */\n  private _applyEffectiveTheme(): void {\n    if (!this._themeSheet) return;\n    void this._themeSheet.replace(_buildThemeCss(this.effectiveTheme));\n  }\n\n  override render() {\n    return html`\n      <div part=\"base\" class=\"theme-base\">\n        <slot></slot>\n      </div>\n      <span role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" class=\"visually-hidden\"></span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-theme': HelixTheme;\n  }\n}\n"],"names":["helixThemeStyles","css","_hcOverrides","_buildProps","entries","name","value","_cssCache","_buildThemeCss","theme","cached","lightMap","tokenEntries","merged","t","darkTokenEntries","HelixTheme","LitElement","changed","autoMode","announcer","_a","html","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-time-picker-CA58UCqx.js → hx-time-picker-a-BCkecJ.js}

@@ -4,7 +4,7 @@ import { classMap as w } from "lit/directives/class-map.js";
 import { ifDefined as f } from "lit/directives/if-defined.js";
 import { live as V } from "lit/directives/live.js";
 import { repeat as D } from "lit/directives/repeat.js";
-import { t as M } from "./lit-Dpo7RLp4.js";
+import { tokenStyles as M } from "@helixui/tokens/lit";
 const O = C`
   :host {
     display: block;
@@ -648,4 +648,4 @@ s = l([
 export {
   s as H
 };
-//# sourceMappingURL=hx-time-picker-CA58UCqx.js.map
+//# sourceMappingURL=hx-time-picker-a-BCkecJ.js.map