@helixui/library 3.1.0 → 3.2.0-next.76

package/dist/shared/{hx-textarea-CK621vSL.js → hx-textarea-D9O4U8cb.js}

@@ -1,14 +1,51 @@
-import { css as x, nothing as d, html as l } from "lit";
-import { property as i, query as f, state as c, customElement as _ } from "lit/decorators.js";
+import { css as u, nothing as d, html as l } from "lit";
+import { property as o, query as _, state as x, customElement as f } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
 import { ifDefined as n } from "lit/directives/if-defined.js";
-import { live as m } from "lit/directives/live.js";
-import { F as g } from "./FormMixin-B8PXk5RQ.js";
-import { H as b } from "./helix-element-BNEYeiys.js";
-import { c as y } from "./id-counter-DuX8vsui.js";
-const w = x`
+import { live as b } from "lit/directives/live.js";
+import { F as m } from "./FormMixin-B8PXk5RQ.js";
+import { b as g } from "./forced-colors-CTEDFRGa.js";
+import { H as y } from "./helix-element-BNEYeiys.js";
+import { c as w } from "./id-counter-DuX8vsui.js";
+const $ = u`
   :host {
     display: block;
+
+    /* ─── Component tokens (3.2.0) ──────────────────────────────────── */
+    --_textarea-bg: var(
+      --hx-textarea-bg,
+      var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))
+    );
+    --_textarea-color: var(
+      --hx-textarea-color,
+      var(--hx-input-color, var(--hx-color-text-strong, #202b39))
+    );
+    --_textarea-border-color: var(
+      --hx-textarea-border-color,
+      var(--hx-input-border-color, var(--hx-color-border-strong, #8e9c98))
+    );
+    --_textarea-border-color-focus: var(
+      --hx-textarea-border-color-focus,
+      var(
+        --hx-input-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
+      )
+    );
+    --_textarea-border-color-invalid: var(
+      --hx-textarea-border-color-invalid,
+      var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))
+    );
+    --_textarea-border-radius: var(
+      --hx-textarea-border-radius,
+      var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))
+    );
+    --_textarea-padding-x: var(--hx-textarea-padding-x, var(--hx-space-3, 0.75rem));
+    --_textarea-padding-y: var(--hx-textarea-padding-y, var(--hx-space-2, 0.5rem));
+    --_textarea-font-size: var(--hx-textarea-font-size, var(--hx-font-size-md, 1rem));
+    --_textarea-placeholder-color: var(
+      --hx-textarea-placeholder-color,
+      var(--hx-color-text-placeholder, #66787b)
+    );
   }
 
   :host([disabled]) {
@@ -24,7 +61,10 @@ const w = x`
     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(
+      --hx-textarea-font-family,
+      var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))
+    );
   }
 
   /* --- Label --- */
@@ -39,12 +79,18 @@ const w = x`
     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-neutral-700, #334155));
+    color: var(
+      --hx-textarea-label-color,
+      var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))
+    );
     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(
+      --hx-textarea-error-color,
+      var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
+    );
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -53,10 +99,9 @@ const w = x`
   .field__textarea-wrapper {
     display: flex;
     flex-direction: column;
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-input-border-color, var(--hx-color-neutral-300, #cbd5e1));
-    border-radius: var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-input-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid var(--_textarea-border-color);
+    border-radius: var(--_textarea-border-radius);
+    background-color: var(--_textarea-bg);
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -64,18 +109,11 @@ const w = x`
   }
 
   .field__textarea-wrapper:focus-within {
-    border-color: var(
-      --hx-input-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
+    border-color: var(--_textarea-border-color-focus);
     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%),
+        var(--_textarea-border-color-focus) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -83,16 +121,15 @@ const w = x`
   /* --- Error State --- */
 
   .field--error .field__textarea-wrapper {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--_textarea-border-color-invalid);
   }
 
   .field--error .field__textarea-wrapper:focus-within {
-    border-color: var(--hx-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--_textarea-border-color-invalid);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       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(--_textarea-border-color-invalid) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -103,10 +140,10 @@ const w = x`
     border: none;
     outline: none;
     background: transparent;
-    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    padding: var(--_textarea-padding-y) var(--_textarea-padding-x);
     font-family: inherit;
-    font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-input-color, var(--hx-color-neutral-800, #1e293b));
+    font-size: var(--_textarea-font-size);
+    color: var(--_textarea-color);
     line-height: var(--hx-line-height-normal, 1.5);
     min-height: var(--hx-textarea-min-height, var(--hx-size-20, 5rem));
     width: 100%;
@@ -114,7 +151,7 @@ const w = x`
   }
 
   .field__textarea::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--_textarea-placeholder-color);
   }
 
   .field__textarea:focus-visible {
@@ -152,7 +189,7 @@ const w = x`
 
   .field__counter {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-textarea-counter-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
     text-align: end;
   }
@@ -175,13 +212,16 @@ const w = x`
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-textarea-help-text-color, var(--hx-color-text-muted, #4a5362));
     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(
+      --hx-textarea-error-color,
+      var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))
+    );
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -243,22 +283,22 @@ const w = x`
     }
   }
 `;
-var $ = Object.defineProperty, T = Object.getOwnPropertyDescriptor, a = (e, t, o, h) => {
-  for (var s = h > 1 ? void 0 : h ? T(t, o) : t, p = e.length - 1, u; p >= 0; p--)
-    (u = e[p]) && (s = (h ? u(t, o, s) : u(s)) || s);
-  return h && s && $(t, o, s), s;
+var T = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (e, t, i, h) => {
+  for (var s = h > 1 ? void 0 : h ? S(t, i) : t, c = e.length - 1, p; c >= 0; c--)
+    (p = e[c]) && (s = (h ? p(t, i, s) : p(s)) || s);
+  return h && s && T(t, i, s), s;
 };
-const S = y("hx-textarea");
-let r = class extends g(b) {
+const z = w("hx-textarea");
+let r = class extends m(y) {
   constructor() {
-    super(...arguments), 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.accessibleLabel = null, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpTextSlot = !1, this._liveAnnouncement = "", this._announceTimer = null, this._textareaId = S(), this._helpTextId = `${this._textareaId}-help`, this._errorId = `${this._textareaId}-error`, this._counterId = `${this._textareaId}-counter`;
+    super(...arguments), 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.accessibleLabel = null, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpTextSlot = !1, this._liveAnnouncement = "", this._announceTimer = null, this._textareaId = z(), this._helpTextId = `${this._textareaId}-help`, this._errorId = `${this._textareaId}-error`, this._counterId = `${this._textareaId}-counter`;
   }
   /** @internal */
   _handleLabelSlotChange(e) {
     const t = e.target;
     if (this._hasLabelSlot = t.assignedElements().length > 0, this._hasLabelSlot) {
-      const o = t.assignedElements()[0];
-      o && !o.id && (o.id = `${this._textareaId}-slotted-label`);
+      const i = t.assignedElements()[0];
+      i && !i.id && (i.id = `${this._textareaId}-slotted-label`);
     }
   }
   /** @internal */
@@ -364,7 +404,7 @@ let r = class extends g(b) {
       "field--error": e,
       "field--disabled": this.disabled,
       "field--required": this.required
-    }, o = (!!this.helpText || this._hasHelpTextSlot) && !e, h = [e ? this._errorId : null, o ? this._helpTextId : null].filter(Boolean).join(" ") || void 0;
+    }, i = (!!this.helpText || this._hasHelpTextSlot) && !e, h = [e ? this._errorId : null, i ? this._helpTextId : null].filter(Boolean).join(" ") || void 0;
     return l`
       <div part="field" class=${v(t)}>
         <div class="field__label-wrapper">
@@ -383,7 +423,7 @@ let r = class extends g(b) {
             part="textarea"
             class="field__textarea"
             id=${this._textareaId}
-            .value=${m(this.value)}
+            .value=${b(this.value)}
             placeholder=${n(this.placeholder || void 0)}
             ?required=${this.required}
             ?disabled=${this.disabled}
@@ -410,7 +450,7 @@ let r = class extends g(b) {
                 <slot name="error" @slotchange=${this._handleErrorSlotChange}>${this.error}</slot>
               </div>
             ` : l`<slot name="error" @slotchange=${this._handleErrorSlotChange}></slot>`}
-        ${o ? l`
+        ${i ? l`
               <div part="help-text" class="field__help-text" id=${this._helpTextId}>
                 <slot name="help-text" @slotchange=${this._handleHelpTextSlotChange}>
                   ${this.helpText}
@@ -421,75 +461,75 @@ let r = class extends g(b) {
     `;
   }
 };
-r.styles = [w];
+r.styles = [$, g];
 r.formAssociated = !0;
 a([
-  i({ type: String })
+  o({ type: String })
 ], r.prototype, "label", 2);
 a([
-  i({ type: String })
+  o({ type: String })
 ], r.prototype, "placeholder", 2);
 a([
-  i({ type: String })
+  o({ type: String })
 ], r.prototype, "value", 2);
 a([
-  i({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], r.prototype, "required", 2);
 a([
-  i({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], r.prototype, "disabled", 2);
 a([
-  i({ type: String })
+  o({ type: String })
 ], r.prototype, "error", 2);
 a([
-  i({ type: String, attribute: "help-text" })
+  o({ type: String, attribute: "help-text" })
 ], r.prototype, "helpText", 2);
 a([
-  i({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], r.prototype, "name", 2);
 a([
-  i({ type: Number })
+  o({ type: Number })
 ], r.prototype, "rows", 2);
 a([
-  i({ type: Number, attribute: "minlength" })
+  o({ type: Number, attribute: "minlength" })
 ], r.prototype, "minlength", 2);
 a([
-  i({ type: Number, attribute: "maxlength" })
+  o({ type: Number, attribute: "maxlength" })
 ], r.prototype, "maxlength", 2);
 a([
-  i({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], r.prototype, "readonly", 2);
 a([
-  i({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], r.prototype, "resize", 2);
 a([
-  i({ type: Boolean, attribute: "show-count" })
+  o({ type: Boolean, attribute: "show-count" })
 ], r.prototype, "showCount", 2);
 a([
-  i({ attribute: "required-message" })
+  o({ attribute: "required-message" })
 ], r.prototype, "requiredMessage", 2);
 a([
-  i({ type: String, attribute: "accessible-label" })
+  o({ type: String, attribute: "accessible-label" })
 ], r.prototype, "accessibleLabel", 2);
 a([
-  f(".field__textarea")
+  _(".field__textarea")
 ], r.prototype, "_textarea", 2);
 a([
-  c()
+  x()
 ], r.prototype, "_hasLabelSlot", 2);
 a([
-  c()
+  x()
 ], r.prototype, "_hasErrorSlot", 2);
 a([
-  c()
+  x()
 ], r.prototype, "_hasHelpTextSlot", 2);
 a([
-  c()
+  x()
 ], r.prototype, "_liveAnnouncement", 2);
 r = a([
-  _("hx-textarea")
+  f("hx-textarea")
 ], r);
 export {
   r as H
 };
-//# sourceMappingURL=hx-textarea-CK621vSL.js.map
+//# sourceMappingURL=hx-textarea-D9O4U8cb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-textarea-D9O4U8cb.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    /* ─── Component tokens (3.2.0) ──────────────────────────────────── */\n    --_textarea-bg: var(\n      --hx-textarea-bg,\n      var(--hx-input-bg, var(--hx-color-surface-default, #ffffff))\n    );\n    --_textarea-color: var(\n      --hx-textarea-color,\n      var(--hx-input-color, var(--hx-color-text-strong, #202b39))\n    );\n    --_textarea-border-color: var(\n      --hx-textarea-border-color,\n      var(--hx-input-border-color, var(--hx-color-border-strong, #8e9c98))\n    );\n    --_textarea-border-color-focus: var(\n      --hx-textarea-border-color-focus,\n      var(\n        --hx-input-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))\n      )\n    );\n    --_textarea-border-color-invalid: var(\n      --hx-textarea-border-color-invalid,\n      var(--hx-input-error-color, var(--hx-color-error-600, #c92a2a))\n    );\n    --_textarea-border-radius: var(\n      --hx-textarea-border-radius,\n      var(--hx-input-border-radius, var(--hx-border-radius-md, 0.375rem))\n    );\n    --_textarea-padding-x: var(--hx-textarea-padding-x, var(--hx-space-3, 0.75rem));\n    --_textarea-padding-y: var(--hx-textarea-padding-y, var(--hx-space-2, 0.5rem));\n    --_textarea-font-size: var(--hx-textarea-font-size, var(--hx-font-size-md, 1rem));\n    --_textarea-placeholder-color: var(\n      --hx-textarea-placeholder-color,\n      var(--hx-color-text-placeholder, #66787b)\n    );\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(\n      --hx-textarea-font-family,\n      var(--hx-input-font-family, var(--hx-font-family-sans, sans-serif))\n    );\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(\n      --hx-textarea-label-color,\n      var(--hx-input-label-color, var(--hx-color-text-strong, #202b39))\n    );\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__required-marker {\n    color: var(\n      --hx-textarea-error-color,\n      var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))\n    );\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 var(--_textarea-border-color);\n    border-radius: var(--_textarea-border-radius);\n    background-color: var(--_textarea-bg);\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(--_textarea-border-color-focus);\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--_textarea-border-color-focus) 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(--_textarea-border-color-invalid);\n  }\n\n  .field--error .field__textarea-wrapper:focus-within {\n    border-color: var(--_textarea-border-color-invalid);\n    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)\n      color-mix(\n        in srgb,\n        var(--_textarea-border-color-invalid) 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(--_textarea-padding-y) var(--_textarea-padding-x);\n    font-family: inherit;\n    font-size: var(--_textarea-font-size);\n    color: var(--_textarea-color);\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(--_textarea-placeholder-color);\n  }\n\n  .field__textarea:focus-visible {\n    outline: none; /* wrapper ring handles keyboard focus indication */\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-textarea-counter-color, var(--hx-color-text-muted, #4a5362));\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-textarea-help-text-color, var(--hx-color-text-muted, #4a5362));\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(\n      --hx-textarea-error-color,\n      var(--hx-input-error-color, var(--hx-color-error-text, #c92a2a))\n    );\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .field__textarea-wrapper {\n      forced-color-adjust: none;\n      background-color: Field;\n      color: FieldText;\n      border: 2px solid ButtonText;\n    }\n\n    .field__textarea {\n      color: FieldText;\n    }\n\n    .field__textarea::placeholder {\n      color: GrayText;\n    }\n\n    .field__textarea-wrapper:focus-within {\n      border-color: Highlight;\n      box-shadow: none;\n    }\n\n    .field__textarea:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: -3px;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    :host([disabled]) .field__textarea-wrapper {\n      border-color: GrayText;\n      color: GrayText;\n    }\n\n    :host([disabled]) .field__textarea {\n      color: GrayText;\n    }\n\n    .field--error .field__textarea-wrapper {\n      border-color: LinkText;\n    }\n\n    .field__label {\n      color: CanvasText;\n    }\n\n    .field__help-text {\n      color: GrayText;\n    }\n\n    .field__error {\n      color: LinkText;\n    }\n  }\n`;\n","import { 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 { HelixElement, createIdCounter } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixTextareaStyles } from './hx-textarea.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\n\nconst _nextTextareaId = createIdCounter('hx-textarea');\n\n/** Detail for hx-input and hx-change events dispatched by hx-textarea. */\nexport interface HxTextareaDetail {\n  value: string;\n}\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 * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-opacity] - CSS custom property.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-size-20] - Size token.\n * @cssprop [--hx-color-neutral-400] - Color.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-500] - Color.\n */\n@customElement('hx-textarea')\nexport class HelixTextarea extends FormMixin(HelixElement) {\n  static override styles = [helixTextareaStyles, forcedColorsField];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static override formAssociated = true;\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, reflect: true })\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   * Uses `accessible-label` attribute instead of `aria-label` to avoid\n   * ARIAMixin shadowing on the host element.\n   *\n   * Note: `mixinDelegatesAria` is not applied to this component because form\n   * inputs with associated labels delegate accessible naming via `<label>`\n   * association and `aria-labelledby`, not host-level ARIA delegation. The\n   * `accessible-label` attribute is a fallback for label-free usage. The value is forwarded to the\n   * internal native textarea's `aria-label`.\n   * @attr accessible-label\n   */\n  @property({ type: String, attribute: 'accessible-label' })\n  accessibleLabel: 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    // 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  /** @internal */\n  override _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  protected override _onFormReset(): void {\n    this.value = '';\n    this._internals.setFormValue('');\n    this._resetInteractionState();\n  }\n\n  /** @internal */\n  protected override _onFormStateRestore(\n    state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (typeof state === 'string') {\n      this.value = state;\n    }\n  }\n\n  /** @internal */\n  protected override _onFormDisabled(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    this._handleInteractionInput();\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._handleInteractionBlur();\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 = _nextTextareaId();\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    // Do NOT include the counter in aria-describedby: the counter element has\n    // aria-hidden=\"true\" (it is a visual-only display), and referencing an\n    // aria-hidden element from aria-describedby is a WCAG conflict.\n    // Screen reader users receive character-count announcements via the\n    // debounced aria-live=\"polite\" region (_liveAnnouncement) instead.\n    const describedBy =\n      [hasError ? this._errorId : null, hasHelpText ? this._helpTextId : null]\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.accessibleLabel ?? 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\n/**\n * Per-component event map for type-safe addEventListener on hx-textarea.\n * The `hx-change` detail is `{ value: string }` only — no `checked` property.\n */\nexport interface HxTextareaEventMap {\n  'hx-input': CustomEvent<{ value: string }>;\n  'hx-change': CustomEvent<{ value: string }>;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-textarea': HelixTextarea;\n  }\n  interface HTMLElementEventMap {\n    'hx-input': CustomEvent<{ value: string }>;\n  }\n}\n\n/** Canonical type alias for the hx-textarea component. */\nexport type HxTextarea = HelixTextarea;\n"],"names":["helixTextareaStyles","css","_nextTextareaId","createIdCounter","HelixTextarea","FormMixin","HelixElement","slot","slottedLabel","changedProperties","clamped","anchor","state","_mode","disabled","target","options","_a","nothing","count","display","html","hasError","fieldClasses","hasHelpText","describedBy","classMap","live","ifDefined","forcedColorsField","__decorateClass","property","query","customElement"],"mappings":";;;;;;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}

package/dist/shared/{hx-theme-DfEy-SJA.js → hx-theme-BiyQ7UUK.js}

@@ -1,8 +1,8 @@
 import { css as m, html as p } from "lit";
-import { property as d, customElement as u } from "lit/decorators.js";
+import { property as l, customElement as u } from "lit/decorators.js";
 import { HelixBrandRegistry as x, tokenEntries as f, darkTokenEntries as y } from "@helixui/tokens";
 import { H as _ } from "./helix-element-BNEYeiys.js";
-const g = m`
+const F = m`
   :host {
     display: contents;
   }
@@ -37,10 +37,10 @@ const g = m`
     }
   }
 `;
-function F(e, t) {
+function g(e, t) {
   if (Object.keys(t).length === 0)
     return e;
-  const s = Object.entries(t).map(([r, i]) => `  ${r}: ${i};`).join(`
+  const s = Object.entries(t).map(([i, r]) => `  ${i}: ${r};`).join(`
 `);
   return `${e}
 
@@ -49,17 +49,27 @@ function F(e, t) {
 ${s}
 }`;
 }
-var v = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (e, t, s, r) => {
-  for (var i = r > 1 ? void 0 : r ? w(t, s) : t, o = e.length - 1, n; o >= 0; o--)
-    (n = e[o]) && (i = (r ? n(t, s, i) : n(i)) || i);
-  return r && i && v(t, s, i), i;
+var v = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (e, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? w(t, s) : t, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (r = (i ? a(t, s, r) : a(r)) || r);
+  return i && r && v(t, s, r), r;
 };
 const b = [
   ["--hx-color-text-primary", "#FFFFFF"],
   ["--hx-color-text-secondary", "#FFFFFF"],
   ["--hx-color-text-muted", "#E0E0E0"],
+  ["--hx-color-text-strong", "#FFFFFF"],
+  ["--hx-color-text-placeholder", "#B0B0B0"],
   ["--hx-color-text-disabled", "#767676"],
   ["--hx-color-text-inverse", "#000000"],
+  ["--hx-color-text-on-primary", "#000000"],
+  ["--hx-color-text-on-secondary", "#000000"],
+  ["--hx-color-text-on-error", "#000000"],
+  ["--hx-color-text-on-success", "#000000"],
+  ["--hx-color-text-on-warning", "#000000"],
+  ["--hx-color-text-on-info", "#000000"],
+  ["--hx-color-error-text", "#FCA5A5"],
+  ["--hx-color-success-text", "#86EFAC"],
   ["--hx-color-text-link", "#FFFF00"],
   ["--hx-color-text-link-hover", "#FFFF99"],
   ["--hx-color-text-link-visited", "#FF80FF"],
@@ -67,6 +77,7 @@ const b = [
   ["--hx-color-surface-default", "#000000"],
   ["--hx-color-surface-raised", "#1A1A1A"],
   ["--hx-color-surface-sunken", "#000000"],
+  ["--hx-color-surface-inverse", "#FFFFFF"],
   ["--hx-color-surface-overlay", "rgba(0, 0, 0, 0.95)"],
   ["--hx-color-border-default", "#FFFFFF"],
   ["--hx-color-border-subtle", "#C0C0C0"],
@@ -154,38 +165,38 @@ const b = [
   ["--hx-easing-accelerate", "linear"],
   ["--hx-easing-spring", "linear"]
 ];
-function a(e) {
+function n(e) {
   return Array.from(e).map(([t, s]) => `  ${t}: ${s};`).join(`
 `);
 }
-const l = /* @__PURE__ */ new Map();
+const d = /* @__PURE__ */ new Map();
 function T(e) {
-  const t = l.get(e);
+  const t = d.get(e);
   if (t) return t;
-  const s = new Map(f.map((i) => [i.name, i.value]));
-  let r;
+  const s = new Map(f.map((r) => [r.name, r.value]));
+  let i;
   if (e === "dark") {
-    const i = new Map(s);
+    const r = new Map(s);
     for (const o of y)
-      i.set(o.name, o.value);
-    r = `:host {
-${a(i)}
+      r.set(o.name, o.value);
+    i = `:host {
+${n(r)}
   color-scheme: dark;
 }`;
   } else if (e === "high-contrast") {
-    const i = new Map(s);
-    for (const [o, n] of b)
-      i.set(o, n);
-    r = `:host {
-${a(i)}
+    const r = new Map(s);
+    for (const [o, a] of b)
+      r.set(o, a);
+    i = `:host {
+${n(r)}
   color-scheme: dark;
 }`;
   } else
-    r = `:host {
-${a(s)}
+    i = `:host {
+${n(s)}
   color-scheme: light;
 }`;
-  return l.set(e, r), r;
+  return d.set(e, i), i;
 }
 let h = class extends _ {
   constructor() {
@@ -258,13 +269,13 @@ let h = class extends _ {
     let e = T(this.effectiveTheme);
     if (this.brand !== "") {
       const t = x.getBrandTokens(this.brand);
-      t !== void 0 ? e = F(e, t) : console.warn(
+      t !== void 0 ? e = g(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 {
-${a(Q)}
+${n(Q)}
 }`), this._themeSheet.replace(e);
   }
   /** @internal */
@@ -272,9 +283,9 @@ ${a(Q)}
     if (!this._densitySheet) return;
     let e = "";
     this.density === "compact" ? e = `:host {
-${a(S)}
+${n(S)}
 }` : this.density === "spacious" && (e = `:host {
-${a(M)}
+${n(M)}
 }`), this._densitySheet.replace(e);
   }
   render() {
@@ -286,18 +297,18 @@ ${a(M)}
     `;
   }
 };
-h.styles = [g];
+h.styles = [F];
 c([
-  d({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], h.prototype, "theme", 2);
 c([
-  d({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], h.prototype, "brand", 2);
 c([
-  d({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], h.prototype, "motion", 2);
 c([
-  d({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], h.prototype, "density", 2);
 h = c([
   u("hx-theme")
@@ -305,4 +316,4 @@ h = c([
 export {
   h as H
 };
-//# sourceMappingURL=hx-theme-DfEy-SJA.js.map
+//# sourceMappingURL=hx-theme-BiyQ7UUK.js.map