@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/shared/{hx-text-NjKoQATI.js → hx-text-DoEVOf47.js}

@@ -1,11 +1,11 @@
-import { css as g, LitElement as c } from "lit";
-import { unsafeStatic as f, html as p } from "lit/static-html.js";
-import { property as a, customElement as m } from "lit/decorators.js";
+import { css as c, LitElement as g } from "lit";
+import { unsafeStatic as f, html as m } from "lit/static-html.js";
+import { property as a, customElement as p } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
 import { styleMap as w } from "lit/directives/style-map.js";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { tokenStyles as d } from "@helixui/tokens/lit";
-const y = g`
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { tokenStyles as u } from "@helixui/tokens/lit";
+const y = c`
   :host {
     display: inline;
   }
@@ -28,21 +28,21 @@ const y = g`
 
   .text--body {
     --hx-text-font-size: var(--hx-font-size-md, 1rem);
-    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+    --hx-text-font-weight: var(--hx-font-weight-normal, 400);
     --hx-text-line-height: var(--hx-line-height-normal, 1.5);
     --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
   }
 
   .text--body-sm {
     --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);
-    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+    --hx-text-font-weight: var(--hx-font-weight-normal, 400);
     --hx-text-line-height: var(--hx-line-height-normal, 1.5);
     --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
   }
 
   .text--body-lg {
     --hx-text-font-size: var(--hx-font-size-lg, 1.125rem);
-    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+    --hx-text-font-weight: var(--hx-font-weight-normal, 400);
     --hx-text-line-height: var(--hx-line-height-normal, 1.5);
     --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
   }
@@ -63,14 +63,14 @@ const y = g`
 
   .text--caption {
     --hx-text-font-size: var(--hx-font-size-xs, 0.75rem);
-    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+    --hx-text-font-weight: var(--hx-font-weight-normal, 400);
     --hx-text-line-height: var(--hx-line-height-normal, 1.5);
     --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
   }
 
   .text--code {
     --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);
-    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+    --hx-text-font-weight: var(--hx-font-weight-normal, 400);
     --hx-text-line-height: var(--hx-line-height-normal, 1.5);
     --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);
     font-family: var(--hx-font-family-mono, monospace);
@@ -117,7 +117,7 @@ const y = g`
   /* ─── Weight Overrides ─── */
 
   .text--weight-regular {
-    --hx-text-font-weight: var(--hx-font-weight-regular, 400);
+    --hx-text-font-weight: var(--hx-font-weight-normal, 400);
   }
 
   .text--weight-medium {
@@ -155,42 +155,43 @@ const y = g`
     display: block;
   }
 `;
-var b = Object.defineProperty, z = Object.getOwnPropertyDescriptor, h = (r, i, o, x) => {
-  for (var t = x > 1 ? void 0 : x ? z(i, o) : i, l = r.length - 1, n; l >= 0; l--)
-    (n = r[l]) && (t = (x ? n(i, o, t) : n(t)) || t);
-  return x && t && b(i, o, t), t;
+var b = Object.defineProperty, z = Object.getOwnPropertyDescriptor, h = (r, o, i, n) => {
+  for (var t = n > 1 ? void 0 : n ? z(o, i) : o, l = r.length - 1, x; l >= 0; l--)
+    (x = r[l]) && (t = (n ? x(o, i, t) : x(t)) || t);
+  return n && t && b(o, i, t), t;
 };
-let e = class extends c {
+let e = class extends g {
   constructor() {
     super(...arguments), this.variant = "body", this.weight = void 0, this.color = "default", this.truncate = !1, this.lines = 0, this.as = "span";
   }
   /** Validates `as` against the allowed element list to prevent injection. */
+  /** @internal */
   get _safeTag() {
     return (/* @__PURE__ */ new Set(["span", "p", "strong", "em", "div"])).has(this.as) ? this.as : "span";
   }
   render() {
     var s;
-    const r = Math.max(0, this.lines), i = this.truncate && r === 0, o = r > 0, x = {
+    const r = Math.max(0, this.lines), o = this.truncate && r === 0, i = r > 0, n = {
       text: !0,
       [`text--${this.variant}`]: !0,
       [`text--color-${this.color}`]: !0,
       [`text--weight-${this.weight}`]: this.weight !== void 0,
-      "text--truncate": i,
-      "text--clamp": o
-    }, t = o ? { "-webkit-line-clamp": String(r) } : {}, l = i || o ? (s = this.textContent) == null ? void 0 : s.trim() : void 0, n = f(this._safeTag);
-    return p`
-      <${n}
+      "text--truncate": o,
+      "text--clamp": i
+    }, t = i ? { "-webkit-line-clamp": String(r) } : {}, l = o || i ? (s = this.textContent) == null ? void 0 : s.trim() : void 0, x = f(this._safeTag);
+    return m`
+      <${x}
         part="base"
-        class=${v(x)}
+        class=${v(n)}
         style=${w(t)}
-        title=${u(l || void 0)}
+        title=${d(l || void 0)}
       >
         <slot></slot>
-      </${n}>
+      </${x}>
     `;
   }
 };
-e.styles = [d, y];
+e.styles = [u, y];
 h([
   a({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
@@ -210,9 +211,9 @@ h([
   a({ type: String, reflect: !0 })
 ], e.prototype, "as", 2);
 e = h([
-  m("hx-text")
+  p("hx-text")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-text-NjKoQATI.js.map
+//# sourceMappingURL=hx-text-DoEVOf47.js.map

package/dist/shared/hx-text-DoEVOf47.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-text-DoEVOf47.js","sources":["../../src/components/hx-text/hx-text.styles.ts","../../src/components/hx-text/hx-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixTextStyles = css`\n  :host {\n    display: inline;\n  }\n\n  /* ─── Base ─── */\n\n  .text {\n    display: inline;\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-text-font-size);\n    font-weight: var(--hx-text-font-weight);\n    line-height: var(--hx-text-line-height);\n    letter-spacing: var(--hx-text-letter-spacing);\n    color: var(--hx-text-color);\n    margin: 0;\n    padding: 0;\n  }\n\n  /* ─── Variants ─── */\n\n  .text--body {\n    --hx-text-font-size: var(--hx-font-size-md, 1rem);\n    --hx-text-font-weight: var(--hx-font-weight-normal, 400);\n    --hx-text-line-height: var(--hx-line-height-normal, 1.5);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n  }\n\n  .text--body-sm {\n    --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);\n    --hx-text-font-weight: var(--hx-font-weight-normal, 400);\n    --hx-text-line-height: var(--hx-line-height-normal, 1.5);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n  }\n\n  .text--body-lg {\n    --hx-text-font-size: var(--hx-font-size-lg, 1.125rem);\n    --hx-text-font-weight: var(--hx-font-weight-normal, 400);\n    --hx-text-line-height: var(--hx-line-height-normal, 1.5);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n  }\n\n  .text--label {\n    --hx-text-font-size: var(--hx-font-size-md, 1rem);\n    --hx-text-font-weight: var(--hx-font-weight-medium, 500);\n    --hx-text-line-height: var(--hx-line-height-tight, 1.25);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n  }\n\n  .text--label-sm {\n    --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);\n    --hx-text-font-weight: var(--hx-font-weight-medium, 500);\n    --hx-text-line-height: var(--hx-line-height-tight, 1.25);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n  }\n\n  .text--caption {\n    --hx-text-font-size: var(--hx-font-size-xs, 0.75rem);\n    --hx-text-font-weight: var(--hx-font-weight-normal, 400);\n    --hx-text-line-height: var(--hx-line-height-normal, 1.5);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n  }\n\n  .text--code {\n    --hx-text-font-size: var(--hx-font-size-sm, 0.875rem);\n    --hx-text-font-weight: var(--hx-font-weight-normal, 400);\n    --hx-text-line-height: var(--hx-line-height-normal, 1.5);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-normal, 0);\n    font-family: var(--hx-font-family-mono, monospace);\n  }\n\n  .text--overline {\n    --hx-text-font-size: var(--hx-font-size-xs, 0.75rem);\n    --hx-text-font-weight: var(--hx-font-weight-semibold, 600);\n    --hx-text-line-height: var(--hx-line-height-tight, 1.25);\n    --hx-text-letter-spacing: var(--hx-letter-spacing-wide, 0.05em);\n    text-transform: uppercase;\n  }\n\n  /* ─── Colors ─── */\n\n  .text--color-default {\n    --hx-text-color: var(--hx-color-neutral-900, #0f172a);\n  }\n\n  .text--color-subtle {\n    --hx-text-color: var(--hx-color-neutral-500, #64748b);\n  }\n\n  .text--color-disabled {\n    --hx-text-color: var(--hx-color-neutral-400, #94a3b8);\n  }\n\n  .text--color-inverse {\n    --hx-text-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .text--color-danger {\n    --hx-text-color: var(--hx-color-error-600, #dc2626);\n  }\n\n  .text--color-success {\n    --hx-text-color: var(--hx-color-success-600, #16a34a);\n  }\n\n  .text--color-warning {\n    --hx-text-color: var(--hx-color-warning-600, #d97706);\n  }\n\n  /* ─── Weight Overrides ─── */\n\n  .text--weight-regular {\n    --hx-text-font-weight: var(--hx-font-weight-normal, 400);\n  }\n\n  .text--weight-medium {\n    --hx-text-font-weight: var(--hx-font-weight-medium, 500);\n  }\n\n  .text--weight-semibold {\n    --hx-text-font-weight: var(--hx-font-weight-semibold, 600);\n  }\n\n  .text--weight-bold {\n    --hx-text-font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Truncation ─── */\n\n  .text--truncate {\n    display: block;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .text--clamp {\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n  }\n\n  :host([truncate]) {\n    display: block;\n  }\n\n  :host([lines]:not([lines='0'])) {\n    display: block;\n  }\n`;\n","import { LitElement } from 'lit';\nimport { html as staticHtml, unsafeStatic } from 'lit/static-html.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixTextStyles } from './hx-text.styles.js';\n\n/**\n * A semantic typography wrapper that applies consistent text styles using design tokens.\n *\n * @summary Presentational text wrapper for consistent typography across variants, weights, and colors.\n *\n * @tag hx-text\n *\n * @slot - Default slot for text content.\n *\n * @csspart base - The inner element (tag determined by the `as` property).\n *\n * @cssprop [--hx-text-font-size] - Font size (set per variant).\n * @cssprop [--hx-text-font-weight] - Font weight (overridden by weight prop).\n * @cssprop [--hx-text-line-height] - Line height (set per variant).\n * @cssprop [--hx-text-letter-spacing] - Letter spacing (set per variant).\n * @cssprop [--hx-text-color] - Text color (set per color prop).\n *\n * @example\n * <!-- Drupal/Twig usage (CDN):\n *   <hx-text variant=\"body\" color=\"default\">Patient name here</hx-text>\n *   <hx-text variant=\"label\" weight=\"semibold\">Date of Birth</hx-text>\n *   <hx-text variant=\"caption\" color=\"subtle\">Last reviewed on 2026-03-05</hx-text>\n *   <!-- Truncate (boolean attr — omit to disable, include to enable): -->\n *   <hx-text truncate>Long patient note that gets clipped</hx-text>\n *   <!-- Multi-line clamp (numeric attr): -->\n *   <hx-text lines=\"3\">Paragraph of clinical notes...</hx-text>\n *   <!-- Semantic element override: -->\n *   <hx-text as=\"p\" variant=\"body\">Paragraph-level content.</hx-text>\n *   <hx-text as=\"strong\" variant=\"label\">Bold label</hx-text>\n * -->\n */\n@customElement('hx-text')\nexport class HelixText extends LitElement {\n  static override styles = [tokenStyles, helixTextStyles];\n\n  /**\n   * Typography variant controlling font size, line height, and letter spacing.\n   *\n   * Note: The public variant set (body / body-sm / body-lg / label / label-sm / caption / code /\n   * overline) intentionally extends the original audit spec (body / lead / small / caption /\n   * overline). `lead` and `small` were replaced with the more granular `body-lg`, `body-sm`,\n   * `label`, `label-sm`, and `code` variants to better serve healthcare UI density requirements.\n   * There are no `lead` or `small` variants — consumers must use `body-lg` and `body-sm`\n   * respectively.\n   *\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'body' | 'body-sm' | 'body-lg' | 'label' | 'label-sm' | 'caption' | 'code' | 'overline' =\n    'body';\n\n  /**\n   * Font weight override. When unset, the variant's default weight is used.\n   * @attr weight\n   */\n  @property({ type: String, reflect: true })\n  weight: 'regular' | 'medium' | 'semibold' | 'bold' | undefined = undefined;\n\n  /**\n   * Semantic color intent.\n   * @attr color\n   */\n  @property({ type: String, reflect: true })\n  color: 'default' | 'subtle' | 'disabled' | 'inverse' | 'danger' | 'success' | 'warning' =\n    'default';\n\n  /**\n   * When true, clips text to a single line with an ellipsis overflow.\n   * @attr truncate\n   */\n  @property({ type: Boolean, reflect: true })\n  truncate = false;\n\n  /**\n   * Maximum number of lines to display before clamping with ellipsis.\n   * When set, overrides `truncate`. Set to 0 to disable.\n   * @attr lines\n   */\n  @property({ type: Number, reflect: true })\n  lines = 0;\n\n  /**\n   * The HTML element to render as the inner base element.\n   * Use to produce semantically appropriate markup (e.g., `p`, `strong`, `em`).\n   * Defaults to `span` for inline usage.\n   *\n   * In Drupal Twig: `<hx-text as=\"p\" variant=\"body\">...</hx-text>`\n   *\n   * @attr as\n   */\n  @property({ type: String, reflect: true })\n  as: 'span' | 'p' | 'strong' | 'em' | 'div' = 'span';\n\n  /** Validates `as` against the allowed element list to prevent injection. */\n  /** @internal */\n  private get _safeTag(): string {\n    const allowed = new Set(['span', 'p', 'strong', 'em', 'div']);\n    return allowed.has(this.as) ? this.as : 'span';\n  }\n\n  override render() {\n    const effectiveLines = Math.max(0, this.lines);\n    const isTruncated = this.truncate && effectiveLines === 0;\n    const isClamped = effectiveLines > 0;\n    const classes = {\n      text: true,\n      [`text--${this.variant}`]: true,\n      [`text--color-${this.color}`]: true,\n      [`text--weight-${this.weight}`]: this.weight !== undefined,\n      'text--truncate': isTruncated,\n      'text--clamp': isClamped,\n    };\n\n    const inlineStyles = isClamped ? { '-webkit-line-clamp': String(effectiveLines) } : {};\n\n    const titleText = isTruncated || isClamped ? this.textContent?.trim() : undefined;\n\n    const tag = unsafeStatic(this._safeTag);\n\n    return staticHtml`\n      <${tag}\n        part=\"base\"\n        class=${classMap(classes)}\n        style=${styleMap(inlineStyles)}\n        title=${ifDefined(titleText || undefined)}\n      >\n        <slot></slot>\n      </${tag}>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-text': HelixText;\n  }\n}\n"],"names":["helixTextStyles","css","HelixText","LitElement","effectiveLines","isTruncated","isClamped","classes","inlineStyles","titleText","_a","tag","unsafeStatic","staticHtml","classMap","styleMap","ifDefined","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-text-input-CCZZbWQ9.js → hx-text-input-DTKWPVdy.js}

@@ -1,10 +1,70 @@
-import { css as c, LitElement as x, nothing as u, html as n } from "lit";
-import { property as l, query as _, customElement as v } from "lit/decorators.js";
+import { css as _, nothing as c, html as h } from "lit";
+import { property as s, query as v, state as u, customElement as m } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
-import { ifDefined as s } from "lit/directives/if-defined.js";
-import { live as m } from "lit/directives/live.js";
-import { tokenStyles as g } from "@helixui/tokens/lit";
-const b = c`
+import { ifDefined as n } from "lit/directives/if-defined.js";
+import { live as g } from "lit/directives/live.js";
+import { tokenStyles as b } from "@helixui/tokens/lit";
+import { F as y } from "./FormMixin-Bjvw20G5.js";
+import { d as S } from "./dev-warn-YlwPHjtX.js";
+import { c as w, H as $ } from "./id-counter-JhvVCnjh.js";
+var I = Object.defineProperty, x = (e, t, a, l) => {
+  for (var o = void 0, d = e.length - 1, p; d >= 0; d--)
+    (p = e[d]) && (o = p(t, a, o) || o);
+  return o && I(t, a, o), o;
+};
+const E = (e) => {
+  class t extends e {
+    constructor() {
+      super(...arguments), this.focused = !1, this.focusedVisible = !1, this._focusPending = !1, this._lastInteractionWasPointer = !1, this._handleFocusIn = () => {
+        this.focused = !0, this.focusedVisible = !this._lastInteractionWasPointer;
+      }, this._handleFocusOut = () => {
+        this.focused = !1, this.focusedVisible = !1, this._lastInteractionWasPointer = !1;
+      }, this._handlePointerDown = () => {
+        this._lastInteractionWasPointer = !0;
+      }, this._handleKeyDown = () => {
+        this._lastInteractionWasPointer = !1;
+      };
+    }
+    /**
+     * Returns the inner focusable element that `focus()` and `blur()` will
+     * delegate to. Subclasses MUST override this getter.
+     *
+     * @returns The inner focusable element, or `null` if not yet rendered.
+     * @internal
+     */
+    get _focusableNode() {
+      return null;
+    }
+    /**
+     * Delegates focus to the inner focusable element.
+     * If the element has not yet rendered, queues the focus call for
+     * `firstUpdated`.
+     */
+    focus(l) {
+      const o = this._focusableNode;
+      o !== null ? o.focus(l) : this._focusPending = !0;
+    }
+    /** Delegates blur to the inner focusable element. */
+    blur() {
+      var l;
+      (l = this._focusableNode) == null || l.blur();
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.addEventListener("focusin", this._handleFocusIn), this.addEventListener("focusout", this._handleFocusOut), this.addEventListener("pointerdown", this._handlePointerDown), this.addEventListener("keydown", this._handleKeyDown);
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this.removeEventListener("focusin", this._handleFocusIn), this.removeEventListener("focusout", this._handleFocusOut), this.removeEventListener("pointerdown", this._handlePointerDown), this.removeEventListener("keydown", this._handleKeyDown);
+    }
+    firstUpdated(l) {
+      super.firstUpdated(l), this.hasAttribute("autofocus") && this.focus(), this._focusPending && (this._focusPending = !1, this.focus());
+    }
+  }
+  return x([
+    s({ type: Boolean, reflect: !0 })
+  ], t.prototype, "focused"), x([
+    s({ type: Boolean, reflect: !0, attribute: "focused-visible" })
+  ], t.prototype, "focusedVisible"), t;
+}, C = _`
   :host {
     display: block;
   }
@@ -14,6 +74,47 @@ const b = c`
     pointer-events: none;
   }
 
+  /*
+   * Attribute-based focus hooks set by FocusMixin.
+   * :host([focused]) — fires whenever the component or any descendant has focus.
+   * :host([focused-visible]) — fires only for keyboard-initiated focus.
+   * These complement the :focus-within rules on .field__input-wrapper and are
+   * exposed as theming hooks for consumers who target the host element.
+   */
+  :host([focused]) .field__input-wrapper {
+    border-color: var(
+      --hx-input-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+    );
+    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, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  :host([focused-visible]) .field__input-wrapper {
+    border-color: var(
+      --hx-input-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+    );
+    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, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
   * {
     box-sizing: border-box;
   }
@@ -62,11 +163,17 @@ const b = c`
   }
 
   .field__input-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))
+    );
     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
       );
@@ -172,14 +279,23 @@ const b = c`
     }
   }
 `;
-var y = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (e, t, a, h) => {
-  for (var o = h > 1 ? void 0 : h ? S(t, a) : t, d = e.length - 1, p; d >= 0; d--)
-    (p = e[d]) && (o = (h ? p(t, a, o) : p(o)) || o);
-  return h && o && y(t, a, o), o;
+var z = Object.defineProperty, T = Object.getOwnPropertyDescriptor, i = (e, t, a, l) => {
+  for (var o = l > 1 ? void 0 : l ? T(t, a) : t, d = e.length - 1, p; d >= 0; d--)
+    (p = e[d]) && (o = (l ? p(t, a, o) : p(o)) || o);
+  return l && o && z(t, a, o), o;
 };
-let $ = 0, r = class extends x {
+const P = w("hx-text-input");
+let r = class extends E(y($)) {
   constructor() {
-    super(), this.label = "", this.placeholder = "", this.value = "", this.type = "text", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.name = "", this.ariaLabel = null, this.readonly = !1, this.minlength = void 0, this.maxlength = void 0, this.pattern = "", this.autocomplete = "", this.size = "md", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasPrefixSlot = !1, this._hasSuffixSlot = !1, this._hasHelpTextSlot = !1, this._inputId = `hx-text-input-${++$}`, this._helpTextId = `${this._inputId}-help`, this._errorId = `${this._inputId}-error`, this._internals = this.attachInternals();
+    super(...arguments), this.label = "", this.placeholder = "", this.value = "", this.type = "text", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.name = "", this.ariaLabel = null, this.readonly = !1, this.minlength = void 0, this.maxlength = void 0, this.pattern = "", this.autocomplete = "", this.requiredMessage = "This field is required.", this.size = "md", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasPrefixSlot = !1, this._hasSuffixSlot = !1, this._hasHelpTextSlot = !1, this._inputId = P(), this._helpTextId = `${this._inputId}-help`, this._errorId = `${this._inputId}-error`;
+  }
+  // ─── FocusMixin integration ───
+  /**
+   * Declares the inner focusable element for FocusMixin delegation.
+   * @internal
+   */
+  get _focusableNode() {
+    return this._input ?? null;
   }
   /** @internal */
   _handleLabelSlotChange(e) {
@@ -188,31 +304,33 @@ let $ = 0, r = class extends x {
       const a = t.assignedElements()[0];
       a && !a.id && (a.id = `${this._inputId}-slotted-label`);
     }
-    this.requestUpdate();
   }
   /** @internal */
   _handleErrorSlotChange(e) {
     const t = e.target;
-    this._hasErrorSlot = t.assignedElements().length > 0, this.requestUpdate();
+    this._hasErrorSlot = t.assignedElements().length > 0;
   }
   /** @internal */
   _handlePrefixSlotChange(e) {
     const t = e.target;
-    this._hasPrefixSlot = t.assignedElements().length > 0, this.requestUpdate();
+    this._hasPrefixSlot = t.assignedElements().length > 0;
   }
   /** @internal */
   _handleSuffixSlotChange(e) {
     const t = e.target;
-    this._hasSuffixSlot = t.assignedElements().length > 0, this.requestUpdate();
+    this._hasSuffixSlot = t.assignedElements().length > 0;
   }
   /** @internal */
   _handleHelpTextSlotChange(e) {
     const t = e.target;
-    this._hasHelpTextSlot = t.assignedElements().length > 0, this.requestUpdate();
+    this._hasHelpTextSlot = t.assignedElements().length > 0;
   }
   // ─── Lifecycle ───
   updated(e) {
-    super.updated(e), e.has("value") && this._internals.setFormValue(this.value), (e.has("value") || e.has("required") || e.has("minlength") || e.has("maxlength")) && this._updateValidity();
+    super.updated(e), e.has("value") && this._internals.setFormValue(this.value), (e.has("value") || e.has("type")) && this.type === "number" && this.value !== "" && isNaN(Number(this.value)) && S(
+      "hx-text-input",
+      `type="number" received non-numeric value "${this.value}". Browser will display empty input.`
+    );
   }
   // ─── Form Integration ───
   /** Returns the associated form element, if any. */
@@ -227,19 +345,11 @@ let $ = 0, r = class extends x {
   get validity() {
     return this._internals.validity;
   }
-  /** Checks whether the input satisfies its constraints. */
-  checkValidity() {
-    return this._internals.checkValidity();
-  }
-  /** Reports validity and shows the browser's constraint validation UI. */
-  reportValidity() {
-    return this._internals.reportValidity();
-  }
   /** @internal */
   _updateValidity() {
     this.required && !this.value ? this._internals.setValidity(
       { valueMissing: !0 },
-      this.error || "This field is required.",
+      this.error || this.requiredMessage,
       this._input
     ) : this.minlength !== void 0 && this.value.length > 0 && this.value.length < this.minlength ? this._internals.setValidity(
       { tooShort: !0 },
@@ -251,23 +361,21 @@ let $ = 0, r = class extends x {
       this._input
     ) : this._internals.setValidity({});
   }
-  // Called by the form when it resets
-  formResetCallback() {
-    this.value = "", this._internals.setFormValue("");
+  // ─── Form Lifecycle Hooks ───
+  _onFormReset() {
+    this.value = "", this._internals.setFormValue(""), this._resetInteractionState();
   }
-  // Called when the form restores state (e.g., back/forward navigation)
-  formStateRestoreCallback(e) {
-    this.value = e;
+  _onFormStateRestore(e, t) {
+    typeof e == "string" && (this.value = e);
   }
-  // Called when a parent fieldset is disabled/enabled
-  formDisabledCallback(e) {
+  _onFormDisabled(e) {
     this.disabled = e;
   }
   // ─── Event Handling ───
   /** @internal */
   _handleInput(e) {
     const t = e.target;
-    this.value = t.value, this._internals.setFormValue(this.value), this.dispatchEvent(
+    this.value = t.value, this._internals.setFormValue(this.value), this._handleInteractionInput(), this.dispatchEvent(
       new CustomEvent("hx-input", {
         bubbles: !0,
         composed: !0,
@@ -278,7 +386,7 @@ let $ = 0, r = class extends x {
   /** @internal */
   _handleChange(e) {
     const t = e.target;
-    this.value = t.value, this._internals.setFormValue(this.value), this._updateValidity(), this.dispatchEvent(
+    this.value = t.value, this._internals.setFormValue(this.value), this._handleInteractionBlur(), this.dispatchEvent(
       new CustomEvent("hx-change", {
         bubbles: !0,
         composed: !0,
@@ -287,11 +395,6 @@ let $ = 0, r = class extends x {
     );
   }
   // ─── Public Methods ───
-  /** Moves focus to the input element. */
-  focus(e) {
-    var t;
-    (t = this._input) == null || t.focus(e);
-  }
   /** Selects all text in the input. */
   select() {
     var e;
@@ -308,16 +411,16 @@ let $ = 0, r = class extends x {
       e ? this._errorId : null,
       this.helpText || this._hasHelpTextSlot ? this._helpTextId : null
     ].filter(Boolean).join(" ") || void 0;
-    return n`
+    return h`
       <div part="field" class=${f(t)}>
         <div class="field__label-wrapper">
           <slot name="label" @slotchange=${this._handleLabelSlotChange}>
-            ${this.label ? n`
+            ${this.label ? h`
                   <label part="label" class="field__label" for=${this._inputId}>
                     ${this.label}
-                    ${this.required ? n`<span class="field__required-marker" aria-hidden="true">*</span>` : u}
+                    ${this.required ? h`<span class="field__required-marker" aria-hidden="true">*</span>` : c}
                   </label>
-                ` : u}
+                ` : c}
           </slot>
         </div>
 
@@ -336,22 +439,22 @@ let $ = 0, r = class extends x {
             class="field__input"
             id=${this._inputId}
             type=${this.type}
-            .value=${m(this.value)}
-            placeholder=${s(this.placeholder || void 0)}
+            .value=${g(this.value)}
+            placeholder=${n(this.placeholder || void 0)}
             ?required=${this.required}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
-            name=${s(this.name || void 0)}
-            minlength=${s(this.minlength)}
-            maxlength=${s(this.maxlength)}
-            pattern=${s(this.pattern || void 0)}
-            autocomplete=${s(this.autocomplete || void 0)}
-            aria-label=${s(this.ariaLabel || void 0)}
-            aria-labelledby=${s(
+            name=${n(this.name || void 0)}
+            minlength=${n(this.minlength)}
+            maxlength=${n(this.maxlength)}
+            pattern=${n(this.pattern || void 0)}
+            autocomplete=${n(this.autocomplete || void 0)}
+            aria-label=${n(this.ariaLabel || void 0)}
+            aria-labelledby=${n(
       this._hasLabelSlot ? `${this._inputId}-slotted-label` : void 0
     )}
-            aria-invalid=${e ? "true" : u}
-            aria-describedby=${s(a)}
+            aria-invalid=${e ? "true" : c}
+            aria-describedby=${n(a)}
             @input=${this._handleInput}
             @change=${this._handleChange}
           />
@@ -366,79 +469,108 @@ let $ = 0, r = class extends x {
           </span>
         </div>
 
-        <div part="error" class="field__error" id=${this._errorId} role="alert" aria-atomic="true">
-          ${e ? n`<slot name="error" @slotchange=${this._handleErrorSlotChange}
-                >${this.error}</slot
-              >` : n`<slot name="error" @slotchange=${this._handleErrorSlotChange}></slot>`}
-        </div>
-        ${(this.helpText || this._hasHelpTextSlot) && !e ? n`
+        ${e ? h`<div
+              part="error"
+              class="field__error"
+              id=${this._errorId}
+              role="alert"
+              aria-atomic="true"
+            >
+              <slot name="error" @slotchange=${this._handleErrorSlotChange}>${this.error}</slot>
+            </div>` : h`<slot name="error" @slotchange=${this._handleErrorSlotChange}></slot>`}
+        ${this._hasHelpTextSlot ? h`
               <div part="help-text" class="field__help-text" id=${this._helpTextId}>
                 <slot name="help-text" @slotchange=${this._handleHelpTextSlotChange}>
                   ${this.helpText}
                 </slot>
               </div>
-            ` : n`<slot name="help-text" @slotchange=${this._handleHelpTextSlotChange}></slot>`}
+            ` : this.helpText && !e ? h`
+                <div part="help-text" class="field__help-text" id=${this._helpTextId}>
+                  <slot name="help-text" @slotchange=${this._handleHelpTextSlotChange}>
+                    ${this.helpText}
+                  </slot>
+                </div>
+              ` : h`<slot name="help-text" @slotchange=${this._handleHelpTextSlotChange}></slot>`}
       </div>
     `;
   }
 };
-r.styles = [g, b];
+r.styles = [b, C];
 r.formAssociated = !0;
 i([
-  l({ type: String })
+  s({ type: String })
 ], r.prototype, "label", 2);
 i([
-  l({ type: String })
+  s({ type: String })
 ], r.prototype, "placeholder", 2);
 i([
-  l({ type: String })
+  s({ type: String })
 ], r.prototype, "value", 2);
 i([
-  l({ type: String })
+  s({ type: String })
 ], r.prototype, "type", 2);
 i([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], r.prototype, "required", 2);
 i([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], r.prototype, "disabled", 2);
 i([
-  l({ type: String })
+  s({ type: String })
 ], r.prototype, "error", 2);
 i([
-  l({ type: String, attribute: "help-text" })
+  s({ type: String, attribute: "help-text" })
 ], r.prototype, "helpText", 2);
 i([
-  l({ type: String })
+  s({ type: String })
 ], r.prototype, "name", 2);
 i([
-  l({ type: String, attribute: "aria-label" })
+  s({ type: String, attribute: "aria-label" })
 ], r.prototype, "ariaLabel", 2);
 i([
-  l({ type: Boolean, reflect: !0 })
+  s({ type: Boolean, reflect: !0 })
 ], r.prototype, "readonly", 2);
 i([
-  l({ type: Number })
+  s({ type: Number })
 ], r.prototype, "minlength", 2);
 i([
-  l({ type: Number })
+  s({ type: Number })
 ], r.prototype, "maxlength", 2);
 i([
-  l({ type: String })
+  s({ type: String })
 ], r.prototype, "pattern", 2);
 i([
-  l({ type: String })
+  s({ type: String })
 ], r.prototype, "autocomplete", 2);
 i([
-  l({ type: String, attribute: "hx-size", reflect: !0 })
+  s({ attribute: "required-message" })
+], r.prototype, "requiredMessage", 2);
+i([
+  s({ type: String, attribute: "hx-size", reflect: !0 })
 ], r.prototype, "size", 2);
 i([
-  _(".field__input")
+  v(".field__input")
 ], r.prototype, "_input", 2);
+i([
+  u()
+], r.prototype, "_hasLabelSlot", 2);
+i([
+  u()
+], r.prototype, "_hasErrorSlot", 2);
+i([
+  u()
+], r.prototype, "_hasPrefixSlot", 2);
+i([
+  u()
+], r.prototype, "_hasSuffixSlot", 2);
+i([
+  u()
+], r.prototype, "_hasHelpTextSlot", 2);
 r = i([
-  v("hx-text-input")
+  m("hx-text-input")
 ], r);
 export {
+  E as F,
   r as H
 };
-//# sourceMappingURL=hx-text-input-CCZZbWQ9.js.map
+//# sourceMappingURL=hx-text-input-DTKWPVdy.js.map