@helixui/library 3.1.0-next.70 → 3.1.0-next.72

package/dist/shared/{hx-text-DMC2CPlL.js → hx-text-Bz_9fJ3J.js}

@@ -4,8 +4,9 @@ import { classMap as m } from "lit/directives/class-map.js";
 import { styleMap as v } from "lit/directives/style-map.js";
 import { ifDefined as p } from "lit/directives/if-defined.js";
 import { css as d } from "lit";
-import { H as w } from "./helix-element-BNEYeiys.js";
-const u = d`
+import { a as w } from "./forced-colors-CTEDFRGa.js";
+import { H as u } from "./helix-element-BNEYeiys.js";
+const y = d`
   :host {
     display: inline;
   }
@@ -87,31 +88,33 @@ const u = d`
   /* ─── Colors ─── */
 
   .text--color-default {
-    --hx-text-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-text-color: var(--hx-text-default-color, var(--hx-color-neutral-900, #0d1825));
   }
 
   .text--color-subtle {
-    --hx-text-color: var(--hx-color-neutral-500, #64748b);
+    --hx-text-color: var(--hx-text-subtle-color, var(--hx-color-neutral-500, #66787b));
   }
 
   .text--color-disabled {
-    --hx-text-color: var(--hx-color-neutral-400, #94a3b8);
+    --hx-text-color: var(--hx-text-disabled-color, var(--hx-color-neutral-400, #8e9c98));
   }
 
   .text--color-inverse {
-    --hx-text-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-text-color: var(--hx-text-inverse-color, var(--hx-color-neutral-0, #ffffff));
   }
 
   .text--color-danger {
-    --hx-text-color: var(--hx-color-error-600, #b91c1c);
+    --hx-text-color: var(--hx-text-danger-color, var(--hx-color-error-600, #c92a2a));
   }
 
   .text--color-success {
-    --hx-text-color: var(--hx-color-success-600, #15803d);
+    --hx-text-color: var(--hx-text-success-color, var(--hx-color-success-700, #146831));
   }
 
   .text--color-warning {
-    --hx-text-color: var(--hx-color-warning-600, #b45309);
+    /* warning-600 (#B8650E) on white = 4.28:1 — fails AA body text in the
+       precision-cool palette. warning-700 (#804605) on white = 7.06:1 — AA pass. */
+    --hx-text-color: var(--hx-text-warning-color, var(--hx-color-warning-700, #804605));
   }
 
   /* ─── Weight Overrides ─── */
@@ -188,12 +191,12 @@ const u = d`
     }
   }
 `;
-var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (o, r, i, a) => {
-  for (var t = a > 1 ? void 0 : a ? b(r, i) : r, l = o.length - 1, x; l >= 0; l--)
-    (x = o[l]) && (t = (a ? x(r, i, t) : x(t)) || t);
-  return a && t && y(r, i, t), t;
+var b = Object.defineProperty, z = Object.getOwnPropertyDescriptor, a = (o, r, i, n) => {
+  for (var t = n > 1 ? void 0 : n ? z(r, i) : r, l = o.length - 1, x; l >= 0; l--)
+    (x = o[l]) && (t = (n ? x(r, i, t) : x(t)) || t);
+  return n && t && b(r, i, t), t;
 };
-let e = class extends w {
+let e = class extends u {
   constructor() {
     super(...arguments), this.variant = "body", this.weight = void 0, this.color = "default", this.truncate = !1, this.lines = 0, this.as = "span";
   }
@@ -204,7 +207,7 @@ let e = class extends w {
   }
   render() {
     var s;
-    const o = Math.max(0, this.lines), r = this.truncate && o === 0, i = o > 0, a = {
+    const o = Math.max(0, this.lines), r = this.truncate && o === 0, i = o > 0, n = {
       text: !0,
       [`text--${this.variant}`]: !0,
       [`text--color-${this.color}`]: !0,
@@ -215,7 +218,7 @@ let e = class extends w {
     return g`
       <${x}
         part="base"
-        class=${m(a)}
+        class=${m(n)}
         style=${v(t)}
         title=${p(l || void 0)}
       >
@@ -224,29 +227,29 @@ let e = class extends w {
     `;
   }
 };
-e.styles = [u];
-n([
+e.styles = [y, w];
+a([
   h({ type: String, reflect: !0 })
 ], e.prototype, "variant", 2);
-n([
+a([
   h({ type: String, reflect: !0 })
 ], e.prototype, "weight", 2);
-n([
+a([
   h({ type: String, reflect: !0 })
 ], e.prototype, "color", 2);
-n([
+a([
   h({ type: Boolean, reflect: !0 })
 ], e.prototype, "truncate", 2);
-n([
+a([
   h({ type: Number, reflect: !0 })
 ], e.prototype, "lines", 2);
-n([
+a([
   h({ type: String, reflect: !0 })
 ], e.prototype, "as", 2);
-e = n([
+e = a([
   f("hx-text")
 ], e);
 export {
   e as H
 };
-//# sourceMappingURL=hx-text-DMC2CPlL.js.map
+//# sourceMappingURL=hx-text-Bz_9fJ3J.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-text-Bz_9fJ3J.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-text-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.025em);\n    text-transform: uppercase;\n  }\n\n  /* ─── Colors ─── */\n\n  .text--color-default {\n    --hx-text-color: var(--hx-text-default-color, var(--hx-color-neutral-900, #0d1825));\n  }\n\n  .text--color-subtle {\n    --hx-text-color: var(--hx-text-subtle-color, var(--hx-color-neutral-500, #66787b));\n  }\n\n  .text--color-disabled {\n    --hx-text-color: var(--hx-text-disabled-color, var(--hx-color-neutral-400, #8e9c98));\n  }\n\n  .text--color-inverse {\n    --hx-text-color: var(--hx-text-inverse-color, var(--hx-color-neutral-0, #ffffff));\n  }\n\n  .text--color-danger {\n    --hx-text-color: var(--hx-text-danger-color, var(--hx-color-error-600, #c92a2a));\n  }\n\n  .text--color-success {\n    --hx-text-color: var(--hx-text-success-color, var(--hx-color-success-700, #146831));\n  }\n\n  .text--color-warning {\n    /* warning-600 (#B8650E) on white = 4.28:1 — fails AA body text in the\n       precision-cool palette. warning-700 (#804605) on white = 7.06:1 — AA pass. */\n    --hx-text-color: var(--hx-text-warning-color, var(--hx-color-warning-700, #804605));\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  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    /*\n     * Semantic color variants (danger, success, warning) communicate state via color\n     * alone. In forced-colors mode the browser overrides custom colors, so we must\n     * use system color keywords to preserve the semantic distinction.\n     */\n    .text--color-danger {\n      color: LinkText;\n    }\n\n    .text--color-success {\n      color: CanvasText;\n    }\n\n    .text--color-warning {\n      color: CanvasText;\n    }\n\n    .text--color-disabled {\n      color: GrayText;\n    }\n\n    .text--color-inverse {\n      color: CanvasText;\n    }\n\n    .text--color-subtle {\n      color: CanvasText;\n    }\n  }\n`;\n","import '../../utilities/document-token-adoption.js';\nimport { html as staticHtml, unsafeStatic } from 'lit/static-html.js';\nimport { HelixElement } from '../../base/index.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 { helixTextStyles } from './hx-text.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.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 * @cssprop [--hx-text-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-font-weight-normal] - Font weight.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-letter-spacing-normal] - CSS custom property.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-font-family-mono] - Font family.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-letter-spacing-wide] - CSS custom property.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-color-neutral-400] - Color.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-error-600] - Color.\n * @cssprop [--hx-color-success-600] - Color.\n * @cssprop [--hx-color-warning-600] - Color.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n */\n@customElement('hx-text')\nexport class HelixText extends HelixElement {\n  static override styles = [helixTextStyles, forcedColorsSurface];\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","HelixElement","effectiveLines","isTruncated","isClamped","classes","inlineStyles","titleText","_a","tag","unsafeStatic","staticHtml","classMap","styleMap","ifDefined","forcedColorsSurface","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-text-input-eSPVURd5.js → hx-text-input-B-caO5fI.js}

@@ -1,18 +1,19 @@
 import { css as _, nothing as c, html as h } from "lit";
-import { property as o, query as v, state as u, customElement as m } from "lit/decorators.js";
+import { property as o, query as v, state as u, customElement as b } from "lit/decorators.js";
 import { classMap as f } from "lit/directives/class-map.js";
 import { ifDefined as n } from "lit/directives/if-defined.js";
 import { live as g } from "lit/directives/live.js";
-import { F as b } from "./FormMixin-B8PXk5RQ.js";
-import { d as y } from "./dev-warn-YlwPHjtX.js";
+import { F as m } from "./FormMixin-B8PXk5RQ.js";
+import { b as y } from "./forced-colors-CTEDFRGa.js";
+import { d as w } from "./dev-warn-YlwPHjtX.js";
 import { H as S } from "./helix-element-BNEYeiys.js";
-import { c as w } from "./id-counter-DuX8vsui.js";
-var $ = Object.defineProperty, x = (e, t, l, a) => {
+import { c as $ } from "./id-counter-DuX8vsui.js";
+var T = Object.defineProperty, x = (e, t, l, a) => {
   for (var s = void 0, d = e.length - 1, p; d >= 0; d--)
     (p = e[d]) && (s = p(t, l, s) || s);
-  return s && $(t, l, s), s;
+  return s && T(t, l, s), s;
 };
-const T = (e) => {
+const I = (e) => {
   class t extends e {
     constructor() {
       super(...arguments), this.focused = !1, this.focusedVisible = !1, this._focusPending = !1, this._lastInteractionWasPointer = !1, this._handleFocusIn = () => {
@@ -64,9 +65,103 @@ const T = (e) => {
   ], t.prototype, "focused"), x([
     o({ type: Boolean, reflect: !0, attribute: "focused-visible" })
   ], t.prototype, "focusedVisible"), t;
-}, I = _`
+}, C = _`
   :host {
     display: block;
+
+    /* ─── Component tokens (3.2.0) ──────────────────────────────────── */
+
+    /* Surface */
+    --_text-input-bg: var(
+      --hx-text-input-bg,
+      var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))
+    );
+    --_text-input-color: var(
+      --hx-text-input-color,
+      var(--hx-input-color, var(--hx-color-text-strong, #202b39))
+    );
+    --_text-input-placeholder-color: var(
+      --hx-text-input-placeholder-color,
+      var(--hx-color-text-placeholder, #66787b)
+    );
+
+    /* Border */
+    --_text-input-border-color: var(
+      --hx-text-input-border-color,
+      var(--hx-input-border-color, var(--hx-color-border-strong, #8e9c98))
+    );
+    --_text-input-border-color-hover: var(
+      --hx-text-input-border-color-hover,
+      var(--hx-color-border-strong, #8e9c98)
+    );
+    --_text-input-border-color-focus: var(
+      --hx-text-input-border-color-focus,
+      var(
+        --hx-input-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+      )
+    );
+    --_text-input-border-color-invalid: var(
+      --hx-text-input-border-color-invalid,
+      var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))
+    );
+    --_text-input-border-width: var(--hx-text-input-border-width, var(--hx-border-width-thin, 1px));
+    --_text-input-border-radius: var(
+      --hx-text-input-border-radius,
+      var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))
+    );
+
+    /* Spacing */
+    --_text-input-padding-x: var(--hx-text-input-padding-x, var(--hx-space-3, 0.75rem));
+    --_text-input-padding-y: var(--hx-text-input-padding-y, var(--hx-space-2, 0.5rem));
+
+    /* Typography */
+    --_text-input-font-family: var(
+      --hx-text-input-font-family,
+      var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))
+    );
+    --_text-input-font-size: var(--hx-text-input-font-size, var(--hx-font-size-md, 1rem));
+
+    /* Focus ring */
+    --_text-input-focus-ring-color: var(
+      --hx-text-input-focus-ring-color,
+      var(
+        --hx-input-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+      )
+    );
+    --_text-input-focus-ring-width: var(
+      --hx-text-input-focus-ring-width,
+      var(--hx-focus-ring-width, 2px)
+    );
+    --_text-input-focus-ring-offset: var(
+      --hx-text-input-focus-ring-offset,
+      var(--hx-focus-ring-offset, 0px)
+    );
+
+    /* Disabled */
+    --_text-input-disabled-bg: var(
+      --hx-text-input-disabled-bg,
+      var(--hx-color-surface-sunken, #ebeee9)
+    );
+    --_text-input-disabled-color: var(
+      --hx-text-input-disabled-color,
+      var(--hx-color-text-disabled, #8e9c98)
+    );
+
+    /* Label / help / error */
+    --_text-input-label-color: var(
+      --hx-text-input-label-color,
+      var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))
+    );
+    --_text-input-help-text-color: var(
+      --hx-text-input-help-text-color,
+      var(--hx-color-text-muted, #4a5362)
+    );
+    --_text-input-error-color: var(
+      --hx-text-input-error-color,
+      var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
+    );
   }
 
   :host([disabled]) {
@@ -81,36 +176,13 @@ const T = (e) => {
    * 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]) .field__input-wrapper,
   :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)
+    border-color: var(--_text-input-border-color-focus);
+    box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
       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%),
+        var(--_text-input-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -123,7 +195,7 @@ const T = (e) => {
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif));
+    font-family: var(--_text-input-font-family);
   }
 
   /* ─── Label ─── */
@@ -138,12 +210,12 @@ const T = (e) => {
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-input-label-color, var(--hx-color-text-strong, #334155));
+    color: var(--_text-input-label-color);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__required-marker {
-    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--_text-input-error-color);
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -152,29 +224,25 @@ const T = (e) => {
   .field__input-wrapper {
     display: flex;
     align-items: center;
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-input-border-color, var(--hx-color-border-strong, #cbd5e1));
-    border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-input-bg, var(--hx-color-surface-default, #ffffff));
+    border: var(--_text-input-border-width) solid var(--_text-input-border-color);
+    border-radius: var(--_text-input-border-radius);
+    background-color: var(--_text-input-bg);
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
     overflow: hidden;
   }
 
+  .field__input-wrapper:hover {
+    border-color: var(--_text-input-border-color-hover);
+  }
+
   .field__input-wrapper:focus-within {
-    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)
+    border-color: var(--_text-input-border-color-focus);
+    box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
       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%),
+        var(--_text-input-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -182,16 +250,15 @@ const T = (e) => {
   /* ─── Error State ─── */
 
   .field--error .field__input-wrapper {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--_text-input-border-color-invalid);
   }
 
   .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
-    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+    border-color: var(--_text-input-border-color-invalid);
+    box-shadow: 0 0 0 var(--_text-input-focus-ring-width)
       color-mix(
         in srgb,
-        var(--hx-input-error-color, var(--hx-color-error-500, #dc2626))
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        var(--_text-input-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -202,17 +269,17 @@ const T = (e) => {
   .field__suffix {
     display: flex;
     align-items: center;
-    color: var(--hx-color-text-muted, #64748b);
+    color: var(--hx-color-text-muted, #4a5362);
     flex-shrink: 0;
   }
 
   /* Only add padding when slot has content — avoids phantom space on empty slots */
   .field__prefix--filled {
-    padding: 0 var(--hx-space-3, 0.75rem);
+    padding: 0 var(--_text-input-padding-x);
   }
 
   .field__suffix--filled {
-    padding: 0 var(--hx-space-3, 0.75rem);
+    padding: 0 var(--_text-input-padding-x);
   }
 
   /* ─── Native Input ─── */
@@ -222,17 +289,17 @@ const T = (e) => {
     border: none;
     outline: none;
     background: transparent;
-    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    padding: var(--_text-input-padding-y) var(--_text-input-padding-x);
     font-family: inherit;
-    font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-input-color, var(--hx-color-text-strong, #1e293b));
+    font-size: var(--_text-input-font-size);
+    color: var(--_text-input-color);
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-size-10, 2.5rem);
     width: 100%;
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-text-placeholder, #94a3b8);
+    color: var(--_text-input-placeholder-color);
   }
 
   .field__input:focus-visible {
@@ -241,6 +308,12 @@ const T = (e) => {
 
   .field__input:disabled {
     cursor: not-allowed;
+    background-color: var(--_text-input-disabled-bg);
+    color: var(--_text-input-disabled-color);
+  }
+
+  :host([disabled]) .field__input-wrapper {
+    background-color: var(--_text-input-disabled-bg);
   }
 
   /* ─── Size Variants ─── */
@@ -248,7 +321,7 @@ const T = (e) => {
   .field--size-sm .field__input {
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
     min-height: var(--hx-size-8, 2rem);
-    font-size: var(--hx-input-sm-font-size, 0.875rem);
+    font-size: var(--hx-text-input-sm-font-size, var(--hx-input-sm-font-size, 0.875rem));
   }
 
   .field--size-md .field__input {
@@ -258,20 +331,20 @@ const T = (e) => {
   .field--size-lg .field__input {
     padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
     min-height: var(--hx-size-12, 3rem);
-    font-size: var(--hx-input-lg-font-size, 1.125rem);
+    font-size: var(--hx-text-input-lg-font-size, var(--hx-input-lg-font-size, 1.125rem));
   }
 
   /* ─── Help Text & Error Messages ─── */
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-text-muted, #64748b);
+    color: var(--_text-input-help-text-color);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--_text-input-error-color);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -283,7 +356,13 @@ const T = (e) => {
     }
   }
 
-  /* ─── High Contrast Mode (forced-colors) ─── */
+  /* ─── High Contrast Mode (forced-colors) ───
+   *
+   * Component-specific overrides that complement the shared forcedColorsField
+   * mixin (composed in static styles). The mixin handles the input/wrapper
+   * core; the rules below extend it to the label / error / help-text /
+   * disabled-host surfaces unique to hx-text-input.
+   */
 
   @media (forced-colors: active) {
     .field__input-wrapper {
@@ -341,15 +420,15 @@ const T = (e) => {
     }
   }
 `;
-var E = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (e, t, l, a) => {
-  for (var s = a > 1 ? void 0 : a ? C(t, l) : t, d = e.length - 1, p; d >= 0; d--)
+var z = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (e, t, l, a) => {
+  for (var s = a > 1 ? void 0 : a ? E(t, l) : t, d = e.length - 1, p; d >= 0; d--)
     (p = e[d]) && (s = (a ? p(t, l, s) : p(s)) || s);
-  return a && s && E(t, l, s), s;
+  return a && s && z(t, l, s), s;
 };
-const z = w("hx-text-input");
-let r = class extends T(b(S)) {
+const F = $("hx-text-input");
+let r = class extends I(m(S)) {
   constructor() {
-    super(...arguments), this.label = "", this.placeholder = "", this.value = "", this.type = "text", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.name = "", this.accessibleLabel = 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 = z(), this._helpTextId = `${this._inputId}-help`, this._errorId = `${this._inputId}-error`;
+    super(...arguments), this.label = "", this.placeholder = "", this.value = "", this.type = "text", this.required = !1, this.disabled = !1, this.error = "", this.helpText = "", this.name = "", this.accessibleLabel = 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 = F(), this._helpTextId = `${this._inputId}-help`, this._errorId = `${this._inputId}-error`;
   }
   // ─── FocusMixin integration ───
   /**
@@ -389,7 +468,7 @@ let r = class extends T(b(S)) {
   }
   // ─── Lifecycle ───
   updated(e) {
-    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)) && y(
+    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)) && w(
       "hx-text-input",
       `type="number" received non-numeric value "${this.value}". Browser will display empty input.`
     );
@@ -557,7 +636,7 @@ let r = class extends T(b(S)) {
     `;
   }
 };
-r.styles = [I];
+r.styles = [C, y];
 r.formAssociated = !0;
 i([
   o({ type: String })
@@ -629,10 +708,10 @@ i([
   u()
 ], r.prototype, "_hasHelpTextSlot", 2);
 r = i([
-  m("hx-text-input")
+  b("hx-text-input")
 ], r);
 export {
-  T as F,
+  I as F,
   r as H
 };
-//# sourceMappingURL=hx-text-input-eSPVURd5.js.map
+//# sourceMappingURL=hx-text-input-B-caO5fI.js.map