@helixui/library 1.1.2 → 2.0.0-next.31

package/dist/shared/{hx-textarea-BgX7rxyo.js → hx-textarea-BfSJJtA1.js}

@@ -1,10 +1,10 @@
 import { css as x, LitElement as f, nothing as d, html as o } from "lit";
+import "./document-token-adoption-DuYNKd4k.js";
 import { property as i, query as v, state as u, customElement as _ } from "lit/decorators.js";
 import { classMap as m } from "lit/directives/class-map.js";
 import { ifDefined as h } from "lit/directives/if-defined.js";
 import { live as g } from "lit/directives/live.js";
-import { tokenStyles as b } from "@helixui/tokens/lit";
-const y = x`
+const b = x`
   :host {
     display: block;
   }
@@ -62,14 +62,20 @@ const y = x`
   }
 
   .field__textarea-wrapper:focus-within {
-    border-color: var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+    border-color: var(
+      --hx-input-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+    );
     /* Solid fallback for browsers without color-mix() (Chrome < 111, Safari < 16.2) — WCAG 1.4.11 */
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       rgba(37, 99, 235, var(--hx-focus-ring-opacity, 0.25));
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-input-focus-ring-color, var(--hx-focus-ring-color, #2563eb))
+        var(
+            --hx-input-focus-ring-color,
+            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+          )
           calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
@@ -148,7 +154,7 @@ const y = x`
     font-size: var(--hx-font-size-xs, 0.75rem);
     color: var(--hx-color-neutral-500, #6c757d);
     line-height: var(--hx-line-height-normal, 1.5);
-    text-align: right;
+    text-align: end;
   }
 
   /* --- Visually Hidden (screen reader only) --- */
@@ -179,14 +185,14 @@ const y = x`
     line-height: var(--hx-line-height-normal, 1.5);
   }
 `;
-var w = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, a = (e, t, l, n) => {
-  for (var s = n > 1 ? void 0 : n ? $(t, l) : t, c = e.length - 1, p; c >= 0; c--)
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (e, t, l, n) => {
+  for (var s = n > 1 ? void 0 : n ? w(t, l) : t, c = e.length - 1, p; c >= 0; c--)
     (p = e[c]) && (s = (n ? p(t, l, s) : p(s)) || s);
-  return n && s && w(t, l, s), s;
+  return n && s && y(t, l, s), s;
 };
-let S = 0, r = class extends f {
+let $ = 0, r = class extends f {
   constructor() {
-    super(), this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.name = "", this.rows = 4, this.readonly = !1, this.resize = "vertical", this.showCount = !1, this.requiredMessage = "This field is required.", this.ariaLabel = null, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpTextSlot = !1, this._liveAnnouncement = "", this._announceTimer = null, this._textareaId = `hx-textarea-${++S}`, this._helpTextId = `${this._textareaId}-help`, this._errorId = `${this._textareaId}-error`, this._counterId = `${this._textareaId}-counter`, this._internals = this.attachInternals();
+    super(), this.label = "", this.placeholder = "", this.value = "", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.name = "", this.rows = 4, this.readonly = !1, this.resize = "vertical", this.showCount = !1, this.requiredMessage = "This field is required.", this.ariaLabel = null, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpTextSlot = !1, this._liveAnnouncement = "", this._announceTimer = null, this._textareaId = `hx-textarea-${++$}`, this._helpTextId = `${this._textareaId}-help`, this._errorId = `${this._textareaId}-error`, this._counterId = `${this._textareaId}-counter`, this._internals = this.attachInternals();
   }
   /** @internal */
   _handleLabelSlotChange(e) {
@@ -255,15 +261,15 @@ let S = 0, r = class extends f {
       e
     ) : this._internals.setValidity({});
   }
-  /** Called by the browser when the owning form is reset. */
+  /** @internal */
   formResetCallback() {
     this.value = "", this._internals.setFormValue("");
   }
-  /** Called by the browser to restore form state (e.g., back/forward navigation). */
+  /** @internal */
   formStateRestoreCallback(e, t) {
     typeof e == "string" && (this.value = e);
   }
-  /** Called when a parent fieldset is disabled/enabled. */
+  /** @internal */
   formDisabledCallback(e) {
     this.disabled = e;
   }
@@ -306,15 +312,9 @@ let S = 0, r = class extends f {
   /** @internal */
   _renderCounter() {
     if (!this.showCount) return d;
-    const e = this.value.length, t = this.maxlength !== void 0 ? `${e} / ${this.maxlength}` : `${e}`;
+    const e = Array.from(this.value ?? "").length, t = this.maxlength !== void 0 ? `${e} / ${this.maxlength}` : `${e}`;
     return o`
-      <div
-        part="counter"
-        class="field__counter"
-        id=${this._counterId}
-        aria-live="polite"
-        aria-atomic="true"
-      >
+      <div part="counter" class="field__counter" id=${this._counterId} aria-hidden="true">
         ${t}
       </div>
     `;
@@ -386,7 +386,7 @@ let S = 0, r = class extends f {
     `;
   }
 };
-r.styles = [b, y];
+r.styles = [b];
 r.formAssociated = !0;
 a([
   i({ type: String })
@@ -457,4 +457,4 @@ r = a([
 export {
   r as H
 };
-//# sourceMappingURL=hx-textarea-BgX7rxyo.js.map
+//# sourceMappingURL=hx-textarea-BfSJJtA1.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-textarea-BfSJJtA1.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(\n      --hx-input-focus-ring-color,\n      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n    );\n    /* Solid fallback for browsers without color-mix() (Chrome < 111, Safari < 16.2) — WCAG 1.4.11 */\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      rgba(37, 99, 235, var(--hx-focus-ring-opacity, 0.25));\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(\n            --hx-input-focus-ring-color,\n            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n          )\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    /* Solid fallback for browsers without color-mix() — WCAG 1.4.11 */\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      rgba(220, 53, 69, var(--hx-focus-ring-opacity, 0.25));\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  @media (prefers-reduced-motion: reduce) {\n    .field__textarea-wrapper {\n      transition: none;\n    }\n  }\n\n  /* --- Resize Variants --- */\n\n  :host([resize='none']) .field__textarea {\n    resize: none;\n  }\n\n  /* resize: vertical is the base default — no override needed for [resize='vertical'] */\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: end;\n  }\n\n  /* --- Visually Hidden (screen reader only) --- */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\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, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\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 { 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 = [helixTextareaStyles];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** ElementInternals instance for form association, validation, and ARIA. */\n  /** @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    /** @internal */\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. Must be a positive integer (minimum 1).\n   * Invalid values are clamped to the nearest valid value.\n   * @attr rows\n   */\n  @property({ type: Number })\n  rows = 4;\n\n  /**\n   * Minimum number of characters required.\n   * @attr minlength\n   */\n  @property({ type: Number, attribute: 'minlength' })\n  minlength: number | undefined;\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   * Whether the textarea is read-only. Read-only fields are visible but\n   * cannot be edited by the user. Common in healthcare for displaying\n   * non-editable patient data inline with editable fields.\n   * @attr readonly\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\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   * Validation message shown when the field is required but empty.\n   * @attr required-message\n   */\n  @property({ attribute: 'required-message' })\n  requiredMessage = 'This field is required.';\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  // ─── Live Announcement ───\n\n  /**\n   * Debounced announcement text for the hidden polite live region.\n   * Only populated when the user is approaching the character limit.\n   * @internal\n   */\n  @state() private _liveAnnouncement = '';\n\n  /** Timer handle for the debounced character-count announcement. @internal */\n  private _announceTimer: ReturnType<typeof setTimeout> | null = null;\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 disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._announceTimer !== null) {\n      clearTimeout(this._announceTimer);\n      this._announceTimer = null;\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('rows')) {\n      const clamped = Math.max(1, Math.round(this.rows));\n      if (clamped !== this.rows) {\n        this.rows = clamped;\n      }\n    }\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    // 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.requiredMessage,\n        anchor,\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 || `Value must be at least ${this.minlength} characters.`,\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  /** @internal */\n  formResetCallback(): void {\n    this.value = '';\n    this._internals.setFormValue('');\n  }\n\n  /** @internal */\n  formStateRestoreCallback(\n    state: string | File | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (typeof state === 'string') {\n      this.value = state;\n    }\n  }\n\n  /** @internal */\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\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    // Debounced character-count announcement (WCAG 4.1.3):\n    // Only announce when near/at the maxlength limit; suppress every-keystroke noise.\n    if (this._announceTimer !== null) {\n      clearTimeout(this._announceTimer);\n    }\n    this._announceTimer = setTimeout(() => {\n      this._announceTimer = null;\n      if (this.maxlength !== undefined && this.value.length >= this.maxlength * 0.8) {\n        this._liveAnnouncement = `${this.value.length} of ${this.maxlength} characters`;\n      } else {\n        this._liveAnnouncement = '';\n      }\n    }, 1000);\n\n    /**\n     * Dispatched on every keystroke as the user types.\n     * @event hx-input\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('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<{ value: string }>('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    // Use Array.from() to count grapheme clusters (handles emoji correctly)\n    const count = Array.from(this.value ?? '').length;\n    const display = this.maxlength !== undefined ? `${count} / ${this.maxlength}` : `${count}`;\n\n    // aria-live=\"polite\" announces counter changes without interrupting the user.\n    // The debounced _liveAnnouncement region provides additional context when nearing the limit.\n    return html`\n      <div part=\"counter\" class=\"field__counter\" id=${this._counterId} aria-hidden=\"true\">\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    // Include counter in aria-describedby so screen readers associate it with the textarea.\n    // The counter also has aria-live=\"polite\" for dynamic updates (WCAG 4.1.3).\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            ?readonly=${this.readonly}\n            rows=${this.rows}\n            minlength=${ifDefined(this.minlength)}\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        <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">${this._liveAnnouncement}</div>\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\n/** Canonical type alias for the hx-textarea component. */\nexport type HxTextarea = HelixTextarea;\n\n/** @deprecated Use {@link HxTextarea} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcTextarea = HelixTextarea;\n"],"names":["helixTextareaStyles","css","_hxTextareaIdCounter","HelixTextarea","LitElement","slot","slottedLabel","changedProperties","clamped","anchor","state","_mode","disabled","target","options","_a","nothing","count","display","html","hasError","fieldClasses","hasHelpText","describedBy","classMap","live","ifDefined","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/shared/hx-theme-pc1V7dyL.js

@@ -0,0 +1,300 @@
+import { css as m, LitElement as p, html as u } from "lit";
+import "./document-token-adoption-DuYNKd4k.js";
+import { property as l, customElement as x } from "lit/decorators.js";
+import { HelixBrandRegistry as f, tokenEntries as y, darkTokenEntries as _ } from "@helixui/tokens";
+const g = m`
+  :host {
+    display: contents;
+  }
+
+  /* display: contents makes this wrapper layout-invisible; exposed as [part="base"]
+     for consumer targeting via CSS parts without affecting layout */
+  .theme-base {
+    display: contents;
+  }
+
+  /* Visually hidden but accessible to screen readers — used for aria-live announcements */
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+function F(e, t) {
+  if (Object.keys(t).length === 0)
+    return e;
+  const r = Object.entries(t).map(([s, i]) => `  ${s}: ${i};`).join(`
+`);
+  return `${e}
+
+/* Brand token overrides */
+:host {
+${r}
+}`;
+}
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (e, t, r, s) => {
+  for (var i = s > 1 ? void 0 : s ? b(t, r) : t, h = e.length - 1, c; h >= 0; h--)
+    (c = e[h]) && (i = (s ? c(t, r, i) : c(i)) || i);
+  return s && i && v(t, r, i), i;
+};
+const w = [
+  ["--hx-color-text-primary", "#FFFFFF"],
+  ["--hx-color-text-secondary", "#FFFFFF"],
+  ["--hx-color-text-muted", "#E0E0E0"],
+  ["--hx-color-text-disabled", "#767676"],
+  ["--hx-color-text-inverse", "#000000"],
+  ["--hx-color-text-link", "#FFFF00"],
+  ["--hx-color-text-link-hover", "#FFFF99"],
+  ["--hx-color-text-link-visited", "#FF80FF"],
+  ["--hx-color-text-link-active", "#FFFFFF"],
+  ["--hx-color-surface-default", "#000000"],
+  ["--hx-color-surface-raised", "#1A1A1A"],
+  ["--hx-color-surface-sunken", "#000000"],
+  ["--hx-color-surface-overlay", "rgba(0, 0, 0, 0.95)"],
+  ["--hx-color-border-default", "#FFFFFF"],
+  ["--hx-color-border-subtle", "#C0C0C0"],
+  ["--hx-color-border-strong", "#FFFFFF"],
+  ["--hx-color-border-focus", "#FFFF00"],
+  ["--hx-color-focus-ring", "#FFFF00"],
+  ["--hx-color-selection-bg", "#1AEBFF"],
+  ["--hx-color-selection-color", "#000000"],
+  ["--hx-body-bg", "#000000"],
+  ["--hx-body-color", "#FFFFFF"],
+  ["--hx-shadow-sm", "0 1px 2px 0 rgb(255 255 255 / 0.2)"],
+  [
+    "--hx-shadow-md",
+    "0 4px 6px -1px rgb(255 255 255 / 0.3), 0 2px 4px -2px rgb(255 255 255 / 0.2)"
+  ],
+  [
+    "--hx-shadow-lg",
+    "0 10px 15px -3px rgb(255 255 255 / 0.3), 0 4px 6px -4px rgb(255 255 255 / 0.2)"
+  ],
+  [
+    "--hx-shadow-xl",
+    "0 20px 25px -5px rgb(255 255 255 / 0.3), 0 8px 10px -6px rgb(255 255 255 / 0.2)"
+  ],
+  ["--hx-shadow-2xl", "0 25px 50px -12px rgb(255 255 255 / 0.4)"]
+], S = [
+  ["--hx-space-1", "0.1875rem"],
+  ["--hx-space-2", "0.375rem"],
+  ["--hx-space-3", "0.5625rem"],
+  ["--hx-space-4", "0.75rem"],
+  ["--hx-space-5", "0.9375rem"],
+  ["--hx-space-6", "1.125rem"],
+  ["--hx-space-7", "1.3125rem"],
+  ["--hx-space-8", "1.5rem"],
+  ["--hx-space-10", "1.875rem"],
+  ["--hx-space-12", "2.25rem"],
+  ["--hx-space-14", "2.625rem"],
+  ["--hx-space-16", "3rem"],
+  ["--hx-space-20", "3.75rem"],
+  ["--hx-space-24", "4.5rem"],
+  ["--hx-space-32", "6rem"],
+  ["--hx-space-40", "7.5rem"],
+  ["--hx-space-48", "9rem"],
+  ["--hx-space-64", "12rem"],
+  // Component heights — one step smaller
+  ["--hx-input-height-sm", "1.75rem"],
+  ["--hx-input-height-md", "2rem"],
+  ["--hx-input-height-lg", "2.25rem"]
+], Q = [
+  ["--hx-space-1", "0.3125rem"],
+  ["--hx-space-2", "0.625rem"],
+  ["--hx-space-3", "0.9375rem"],
+  ["--hx-space-4", "1.25rem"],
+  ["--hx-space-5", "1.5625rem"],
+  ["--hx-space-6", "1.875rem"],
+  ["--hx-space-7", "2.1875rem"],
+  ["--hx-space-8", "2.5rem"],
+  ["--hx-space-10", "3.125rem"],
+  ["--hx-space-12", "3.75rem"],
+  ["--hx-space-14", "4.375rem"],
+  ["--hx-space-16", "5rem"],
+  ["--hx-space-20", "6.25rem"],
+  ["--hx-space-24", "7.5rem"],
+  ["--hx-space-32", "10rem"],
+  ["--hx-space-40", "12.5rem"],
+  ["--hx-space-48", "15rem"],
+  ["--hx-space-64", "20rem"],
+  // Component heights — one step larger
+  ["--hx-input-height-sm", "2.25rem"],
+  ["--hx-input-height-md", "2.75rem"],
+  ["--hx-input-height-lg", "3.5rem"]
+], M = [
+  ["--hx-duration-fast", "0ms"],
+  ["--hx-duration-normal", "0ms"],
+  ["--hx-duration-slow", "0ms"],
+  ["--hx-duration-slower", "0ms"],
+  ["--hx-duration-spinner", "0ms"],
+  ["--hx-transition-fast", "0ms linear"],
+  ["--hx-transition-normal", "0ms linear"],
+  ["--hx-transition-slow", "0ms linear"],
+  ["--hx-easing-default", "linear"],
+  ["--hx-easing-in", "linear"],
+  ["--hx-easing-out", "linear"],
+  ["--hx-easing-in-out", "linear"],
+  ["--hx-easing-decelerate", "linear"],
+  ["--hx-easing-accelerate", "linear"],
+  ["--hx-easing-spring", "linear"]
+];
+function n(e) {
+  return Array.from(e).map(([t, r]) => `  ${t}: ${r};`).join(`
+`);
+}
+const d = /* @__PURE__ */ new Map();
+function T(e) {
+  const t = d.get(e);
+  if (t) return t;
+  const r = new Map(y.map((i) => [i.name, i.value]));
+  let s;
+  if (e === "dark") {
+    const i = new Map(r);
+    for (const h of _)
+      i.set(h.name, h.value);
+    s = `:host {
+${n(i)}
+  color-scheme: dark;
+}`;
+  } else if (e === "high-contrast") {
+    const i = new Map(r);
+    for (const [h, c] of w)
+      i.set(h, c);
+    s = `:host {
+${n(i)}
+  color-scheme: dark;
+}`;
+  } else
+    s = `:host {
+${n(r)}
+  color-scheme: light;
+}`;
+  return d.set(e, s), s;
+}
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.theme = "light", this.system = !1, this.brand = "", this.motion = "full", this.density = "comfortable", this._mediaQuery = null, this._mediaHandler = null, this._themeSheet = null, this._densitySheet = null, this._motionQuery = null, this._motionHandler = null;
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this._initThemeSheet(), (this.system || this.theme === "auto") && this._attachMediaQuery(), this.motion === "full" && this._attachMotionQuery();
+  }
+  updated(e) {
+    super.updated(e);
+    const t = this.system || this.theme === "auto";
+    (e.has("system") || e.has("theme")) && (t ? this._attachMediaQuery() : this._detachMediaQuery(), this._applyEffectiveTheme()), e.has("motion") && (this.motion === "full" ? this._attachMotionQuery() : this._detachMotionQuery(), this._applyEffectiveTheme()), e.has("brand") && this._applyEffectiveTheme(), e.has("density") && this._applyDensity();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._detachMediaQuery(), this._detachMotionQuery();
+  }
+  /**
+   * Returns the currently active theme name.
+   * When `system=true` or `theme="auto"`, reflects the OS preference (`"light"` or `"dark"`).
+   * Otherwise returns the `theme` property value.
+   */
+  get effectiveTheme() {
+    return this.system || this.theme === "auto" ? typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : this.theme;
+  }
+  /**
+   * Returns the resolved motion level after considering the `motion` attribute and OS preference.
+   * When `motion="full"` and the OS reports `prefers-reduced-motion: reduce`, returns `"reduced"`.
+   * Otherwise returns `"full"` or `"reduced"` based on the `motion` attribute.
+   */
+  get effectiveMotion() {
+    return this.motion === "reduced" || this.motion === "none" || typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "reduced" : "full";
+  }
+  /** @internal */
+  _initThemeSheet() {
+    this.shadowRoot && (this._themeSheet = new CSSStyleSheet(), this._densitySheet = new CSSStyleSheet(), this.shadowRoot.adoptedStyleSheets = [
+      ...this.shadowRoot.adoptedStyleSheets,
+      this._themeSheet,
+      this._densitySheet
+    ], this._applyEffectiveTheme(), this._applyDensity());
+  }
+  /** @internal */
+  _attachMediaQuery() {
+    this._mediaQuery || typeof window > "u" || (this._mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"), this._mediaHandler = () => {
+      this._applyEffectiveTheme(), this._announceThemeChange();
+    }, this._mediaQuery.addEventListener("change", this._mediaHandler));
+  }
+  /** @internal */
+  _detachMediaQuery() {
+    this._mediaQuery && this._mediaHandler && this._mediaQuery.removeEventListener("change", this._mediaHandler), this._mediaQuery = null, this._mediaHandler = null;
+  }
+  /** @internal — attach OS prefers-reduced-motion listener when motion="full" */
+  _attachMotionQuery() {
+    this._motionQuery || typeof window > "u" || (this._motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)"), this._motionHandler = () => {
+      this._applyEffectiveTheme();
+    }, this._motionQuery.addEventListener("change", this._motionHandler));
+  }
+  /** @internal */
+  _detachMotionQuery() {
+    this._motionQuery && this._motionHandler && this._motionQuery.removeEventListener("change", this._motionHandler), this._motionQuery = null, this._motionHandler = null;
+  }
+  /** @internal — notifies AT users when system theme changes programmatically */
+  _announceThemeChange() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector('[role="status"]');
+    e && (e.textContent = `Theme changed to ${this.effectiveTheme}`);
+  }
+  /** @internal */
+  _applyEffectiveTheme() {
+    if (!this._themeSheet) return;
+    let e = T(this.effectiveTheme);
+    if (this.brand !== "") {
+      const t = f.getBrandTokens(this.brand);
+      t !== void 0 ? e = F(e, t) : console.warn(
+        `[hx-theme] Brand "${this.brand}" is not registered. Register it via HelixBrandRegistry.register() before use. Applying base theme only.`
+      );
+    }
+    this.effectiveMotion === "reduced" && (e += `
+:host {
+${n(M)}
+}`), this._themeSheet.replace(e);
+  }
+  /** @internal */
+  _applyDensity() {
+    if (!this._densitySheet) return;
+    let e = "";
+    this.density === "compact" ? e = `:host {
+${n(S)}
+}` : this.density === "spacious" && (e = `:host {
+${n(Q)}
+}`), this._densitySheet.replace(e);
+  }
+  render() {
+    return u`
+      <div part="base" class="theme-base">
+        <slot></slot>
+      </div>
+      <span role="status" aria-live="polite" aria-atomic="true" class="visually-hidden"></span>
+    `;
+  }
+};
+o.styles = [g];
+a([
+  l({ type: String, reflect: !0 })
+], o.prototype, "theme", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "system", 2);
+a([
+  l({ type: String, reflect: !0 })
+], o.prototype, "brand", 2);
+a([
+  l({ type: String, reflect: !0 })
+], o.prototype, "motion", 2);
+a([
+  l({ type: String, reflect: !0 })
+], o.prototype, "density", 2);
+o = a([
+  x("hx-theme")
+], o);
+export {
+  o as H
+};
+//# sourceMappingURL=hx-theme-pc1V7dyL.js.map

package/dist/shared/hx-theme-pc1V7dyL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-theme-pc1V7dyL.js","sources":["../../src/components/hx-theme/hx-theme.styles.ts","../../src/utils/token-merger.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 type { BrandTokenMap } from '@helixui/tokens';\n\n/**\n * Merges brand token overrides on top of a base theme CSS string.\n *\n * Brand tokens are appended as a `:host` block after the base theme CSS,\n * which gives them higher cascade precedence within the adopted stylesheet.\n * This preserves all primitive and semantic tokens from the base theme while\n * allowing brand-specific values to override selectively.\n *\n * @param baseCSS - The base theme CSS string (from `_buildThemeCss`).\n * @param brandTokens - CSS custom property overrides for the active brand.\n * @returns Combined CSS string with brand overrides applied after the base theme.\n *\n * @example\n * ```ts\n * const merged = mergeBrandTokens(lightCSS, {\n *   '--hx-color-primary-500': '#003DA5',\n *   '--hx-color-primary-600': '#002D8A',\n * });\n * // merged === lightCSS + \"\\n\\n:host {\\n  --hx-color-primary-500: #003DA5;\\n  ...}\\n\"\n * ```\n */\nexport function mergeBrandTokens(baseCSS: string, brandTokens: BrandTokenMap): string {\n  if (Object.keys(brandTokens).length === 0) {\n    return baseCSS;\n  }\n\n  const brandOverrides = Object.entries(brandTokens)\n    .map(([name, value]) => `  ${name}: ${value};`)\n    .join('\\n');\n\n  return `${baseCSS}\\n\\n/* Brand token overrides */\\n:host {\\n${brandOverrides}\\n}`;\n}\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenEntries, darkTokenEntries, HelixBrandRegistry } from '@helixui/tokens';\nimport { helixThemeStyles } from './hx-theme.styles.js';\nimport { mergeBrandTokens } from '../../utils/token-merger.js';\n\nexport type { TokenDefinition, TokenEntry } from '@helixui/tokens';\n\n/**\n * Controls the spacing density for all descendant `hx-*` components.\n * - `\"comfortable\"` (default): Standard spacing tokens.\n * - `\"compact\"`: Reduces `--hx-space-*` tokens ~25%. For data-dense clinical dashboards.\n * - `\"spacious\"`: Increases `--hx-space-*` tokens ~25%. For touch-optimized bedside tablets.\n */\nexport type DensityMode = 'comfortable' | 'compact' | 'spacious';\n\n/**\n * Controls the motion behavior applied to all descendant `hx-*` components.\n * - `\"full\"` (default): Full animations. Respects OS `prefers-reduced-motion`.\n * - `\"reduced\"`: Collapses all animation durations to 0ms and easings to linear.\n * - `\"none\"`: Same as `\"reduced\"` — all motion tokens resolve to instant/linear.\n */\nexport type MotionMode = 'full' | 'reduced' | 'none';\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\n/**\n * Compact density overrides: ~75% of original --hx-space-* values.\n * Fixed tokens (--hx-space-0 and --hx-space-px) are intentionally omitted — they stay fixed.\n * Component height tokens are reduced one step to match the tighter spacing.\n */\nconst _compactDensityOverrides: Array<[string, string]> = [\n  ['--hx-space-1', '0.1875rem'],\n  ['--hx-space-2', '0.375rem'],\n  ['--hx-space-3', '0.5625rem'],\n  ['--hx-space-4', '0.75rem'],\n  ['--hx-space-5', '0.9375rem'],\n  ['--hx-space-6', '1.125rem'],\n  ['--hx-space-7', '1.3125rem'],\n  ['--hx-space-8', '1.5rem'],\n  ['--hx-space-10', '1.875rem'],\n  ['--hx-space-12', '2.25rem'],\n  ['--hx-space-14', '2.625rem'],\n  ['--hx-space-16', '3rem'],\n  ['--hx-space-20', '3.75rem'],\n  ['--hx-space-24', '4.5rem'],\n  ['--hx-space-32', '6rem'],\n  ['--hx-space-40', '7.5rem'],\n  ['--hx-space-48', '9rem'],\n  ['--hx-space-64', '12rem'],\n  // Component heights — one step smaller\n  ['--hx-input-height-sm', '1.75rem'],\n  ['--hx-input-height-md', '2rem'],\n  ['--hx-input-height-lg', '2.25rem'],\n];\n\n/**\n * Spacious density overrides: ~125% of original --hx-space-* values.\n * Fixed tokens (--hx-space-0 and --hx-space-px) are intentionally omitted — they stay fixed.\n * Component height tokens are increased one step to match the looser spacing.\n */\nconst _spaciousDensityOverrides: Array<[string, string]> = [\n  ['--hx-space-1', '0.3125rem'],\n  ['--hx-space-2', '0.625rem'],\n  ['--hx-space-3', '0.9375rem'],\n  ['--hx-space-4', '1.25rem'],\n  ['--hx-space-5', '1.5625rem'],\n  ['--hx-space-6', '1.875rem'],\n  ['--hx-space-7', '2.1875rem'],\n  ['--hx-space-8', '2.5rem'],\n  ['--hx-space-10', '3.125rem'],\n  ['--hx-space-12', '3.75rem'],\n  ['--hx-space-14', '4.375rem'],\n  ['--hx-space-16', '5rem'],\n  ['--hx-space-20', '6.25rem'],\n  ['--hx-space-24', '7.5rem'],\n  ['--hx-space-32', '10rem'],\n  ['--hx-space-40', '12.5rem'],\n  ['--hx-space-48', '15rem'],\n  ['--hx-space-64', '20rem'],\n  // Component heights — one step larger\n  ['--hx-input-height-sm', '2.25rem'],\n  ['--hx-input-height-md', '2.75rem'],\n  ['--hx-input-height-lg', '3.5rem'],\n];\n\n/**\n * Motion token overrides applied when reduced or no motion is requested.\n * All durations collapse to 0ms and all easings become linear so that\n * every animated component goes instantaneous without modifying its own CSS.\n */\nconst _reducedMotionOverrides: Array<[string, string]> = [\n  ['--hx-duration-fast', '0ms'],\n  ['--hx-duration-normal', '0ms'],\n  ['--hx-duration-slow', '0ms'],\n  ['--hx-duration-slower', '0ms'],\n  ['--hx-duration-spinner', '0ms'],\n  ['--hx-transition-fast', '0ms linear'],\n  ['--hx-transition-normal', '0ms linear'],\n  ['--hx-transition-slow', '0ms linear'],\n  ['--hx-easing-default', 'linear'],\n  ['--hx-easing-in', 'linear'],\n  ['--hx-easing-out', 'linear'],\n  ['--hx-easing-in-out', 'linear'],\n  ['--hx-easing-decelerate', 'linear'],\n  ['--hx-easing-accelerate', 'linear'],\n  ['--hx-easing-spring', 'linear'],\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 and controls motion behavior.\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 * @example Compact density for clinical dashboards:\n * ```html\n * <hx-theme theme=\"dark\" density=\"compact\">\n *   <!-- Clinical dashboard content -->\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: 'light' | 'dark' | 'high-contrast' | 'auto' = '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  /**\n   * The registered brand name to apply on top of the base theme.\n   * When set, brand-specific CSS custom property overrides are merged\n   * after the base theme tokens in the adopted stylesheet, enabling\n   * hospital system white-label implementations.\n   *\n   * The brand must first be registered via `HelixBrandRegistry.register()`.\n   * If the brand name is non-empty but not registered, a warning is logged\n   * and the base theme is applied without brand overrides.\n   *\n   * @attr brand\n   * @example\n   * ```html\n   * <hx-theme theme=\"light\" brand=\"mercy-health\">\n   *   <!-- Content inherits Mercy Health brand tokens -->\n   * </hx-theme>\n   * ```\n   */\n  @property({ type: String, reflect: true })\n  brand = '';\n\n  /**\n   * Controls motion behavior for all descendant `hx-*` components.\n   * - `\"full\"` (default): Full animations. Respects OS `prefers-reduced-motion`.\n   * - `\"reduced\"`: Collapses all animation durations to 0ms and easings to linear.\n   *   Use this for devices where OS accessibility settings cannot be relied on\n   *   (e.g. healthcare bedside terminals).\n   * - `\"none\"`: Same as `\"reduced\"` — all motion tokens resolve to instant/linear.\n   *\n   * When `motion=\"full\"` and the OS reports `prefers-reduced-motion: reduce`,\n   * the same token overrides are applied automatically.\n   * @attr motion\n   */\n  @property({ type: String, reflect: true })\n  motion: MotionMode = 'full';\n\n  /**\n   * Controls the spacing density for all descendant `hx-*` components.\n   * - `\"comfortable\"` (default): Standard spacing tokens.\n   * - `\"compact\"`: Reduces `--hx-space-*` tokens ~25%. For data-dense clinical dashboards.\n   * - `\"spacious\"`: Increases `--hx-space-*` tokens ~25%. For touch-optimized bedside tablets.\n   * @attr density\n   */\n  @property({ type: String, reflect: true })\n  density: DensityMode = 'comfortable';\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  /** @internal */\n  private _densitySheet: CSSStyleSheet | null = null;\n  /** @internal — media query for OS prefers-reduced-motion */\n  private _motionQuery: MediaQueryList | null = null;\n  /** @internal */\n  private _motionHandler: (() => void) | null = null;\n\n  override firstUpdated(changed: PropertyValues<this>): void {\n    super.firstUpdated(changed);\n    this._initThemeSheet();\n    if (this.system || this.theme === 'auto') {\n      this._attachMediaQuery();\n    }\n    if (this.motion === 'full') {\n      this._attachMotionQuery();\n    }\n  }\n\n  override updated(changed: PropertyValues<this>): 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    if (changed.has('motion')) {\n      if (this.motion === 'full') {\n        this._attachMotionQuery();\n      } else {\n        this._detachMotionQuery();\n      }\n      this._applyEffectiveTheme();\n    }\n    if (changed.has('brand')) {\n      this._applyEffectiveTheme();\n    }\n    if (changed.has('density')) {\n      this._applyDensity();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._detachMediaQuery();\n    this._detachMotionQuery();\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(): 'light' | 'dark' | 'high-contrast' | 'auto' {\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  /**\n   * Returns the resolved motion level after considering the `motion` attribute and OS preference.\n   * When `motion=\"full\"` and the OS reports `prefers-reduced-motion: reduce`, returns `\"reduced\"`.\n   * Otherwise returns `\"full\"` or `\"reduced\"` based on the `motion` attribute.\n   */\n  get effectiveMotion(): 'full' | 'reduced' {\n    if (this.motion === 'reduced' || this.motion === 'none') return 'reduced';\n    if (\n      typeof window !== 'undefined' &&\n      window.matchMedia('(prefers-reduced-motion: reduce)').matches\n    ) {\n      return 'reduced';\n    }\n    return 'full';\n  }\n\n  /** @internal */\n  private _initThemeSheet(): void {\n    if (this.shadowRoot) {\n      this._themeSheet = new CSSStyleSheet();\n      this._densitySheet = new CSSStyleSheet();\n      this.shadowRoot.adoptedStyleSheets = [\n        ...this.shadowRoot.adoptedStyleSheets,\n        this._themeSheet,\n        this._densitySheet,\n      ];\n      this._applyEffectiveTheme();\n      this._applyDensity();\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 — attach OS prefers-reduced-motion listener when motion=\"full\" */\n  private _attachMotionQuery(): void {\n    if (this._motionQuery || typeof window === 'undefined') return;\n    this._motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n    this._motionHandler = () => {\n      this._applyEffectiveTheme();\n    };\n    this._motionQuery.addEventListener('change', this._motionHandler);\n  }\n\n  /** @internal */\n  private _detachMotionQuery(): void {\n    if (this._motionQuery && this._motionHandler) {\n      this._motionQuery.removeEventListener('change', this._motionHandler);\n    }\n    this._motionQuery = null;\n    this._motionHandler = 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\n    let css = _buildThemeCss(this.effectiveTheme);\n\n    if (this.brand !== '') {\n      const brandTokens = HelixBrandRegistry.getBrandTokens(this.brand);\n      if (brandTokens !== undefined) {\n        css = mergeBrandTokens(css, brandTokens);\n      } else {\n        console.warn(\n          `[hx-theme] Brand \"${this.brand}\" is not registered. ` +\n            `Register it via HelixBrandRegistry.register() before use. ` +\n            `Applying base theme only.`,\n        );\n      }\n    }\n\n    if (this.effectiveMotion === 'reduced') {\n      css += `\\n:host {\\n${_buildProps(_reducedMotionOverrides)}\\n}`;\n    }\n\n    void this._themeSheet.replace(css);\n  }\n\n  /** @internal */\n  private _applyDensity(): void {\n    if (!this._densitySheet) return;\n\n    let css = '';\n    if (this.density === 'compact') {\n      css = `:host {\\n${_buildProps(_compactDensityOverrides)}\\n}`;\n    } else if (this.density === 'spacious') {\n      css = `:host {\\n${_buildProps(_spaciousDensityOverrides)}\\n}`;\n    }\n    // comfortable = no overrides needed (defaults from theme sheet)\n\n    void this._densitySheet.replace(css);\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\n/** Canonical type alias for HelixTheme. Use this when typing hx-theme element references. */\nexport type HxTheme = HelixTheme;\n\n/** @deprecated Use {@link HxTheme} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcTheme = HelixTheme;\n"],"names":["helixThemeStyles","css","mergeBrandTokens","baseCSS","brandTokens","brandOverrides","name","value","_hcOverrides","_compactDensityOverrides","_spaciousDensityOverrides","_reducedMotionOverrides","_buildProps","entries","_cssCache","_buildThemeCss","theme","cached","lightMap","tokenEntries","t","merged","darkTokenEntries","HelixTheme","LitElement","changed","autoMode","announcer","_a","HelixBrandRegistry","html","__decorateClass","property","customElement"],"mappings":"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"}