@helixui/library 3.1.0 → 3.2.0-next.100

package/dist/shared/{hx-nav-BcYDmjf7.js → hx-nav-ldFM3Fle.js}

@@ -2,8 +2,9 @@ import { css as y, svg as g, html as u, nothing as _ } from "lit";
 import { property as x, state as k, customElement as w } from "lit/decorators.js";
 import { classMap as m } from "lit/directives/class-map.js";
 import { repeat as C } from "lit/directives/repeat.js";
-import { H as $ } from "./helix-element-BNEYeiys.js";
-const I = y`
+import { f as $ } from "./forced-colors-CTEDFRGa.js";
+import { H as I } from "./helix-element-BNEYeiys.js";
+const O = y`
   :host {
     display: block;
     font-family: var(--hx-nav-font-family, var(--hx-font-family-sans, sans-serif));
@@ -18,8 +19,8 @@ const I = y`
 
   [part='nav'] {
     position: relative;
-    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #0f172a));
-    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f1f5f9));
+    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #0d1825));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #ebeee9));
     padding: var(--hx-nav-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));
   }
 
@@ -33,19 +34,19 @@ const I = y`
     background: transparent;
     border: none;
     border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
-    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #ebeee9));
     cursor: pointer;
     transition: background-color var(--hx-transition-fast, 150ms) ease;
     line-height: 0;
   }
 
   [part='toggle']:hover {
-    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #334155));
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #313e4b));
   }
 
   [part='toggle']:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -75,7 +76,7 @@ const I = y`
     align-items: center;
     gap: var(--hx-space-1, 0.25rem);
     padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));
-    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #ebeee9));
     text-decoration: none;
     border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
     border: none;
@@ -92,18 +93,18 @@ const I = y`
   }
 
   .nav__link:hover {
-    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #334155));
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #313e4b));
     color: var(--hx-nav-link-hover-color, var(--hx-color-neutral-0, #ffffff));
   }
 
   .nav__link:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .nav__link--active {
-    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #1d4ed8));
+    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #0f7078));
     color: var(--hx-nav-link-active-color, var(--hx-color-neutral-0, #ffffff));
   }
 
@@ -128,7 +129,7 @@ const I = y`
     list-style: none;
     margin: 0;
     padding: var(--hx-space-1, 0.25rem) 0;
-    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #1e293b));
+    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #202b39));
     border-radius: var(--hx-border-radius-md, 0.375rem);
     box-shadow: var(
       --hx-nav-shadow,
@@ -182,7 +183,7 @@ const I = y`
   :host([orientation='vertical']) .nav__submenu .nav__link {
     padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #cbd5e1));
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #b6bfb9));
   }
 
   /* ─── Mobile Responsive ─── */
@@ -261,12 +262,12 @@ const I = y`
     }
   }
 `;
-var O = Object.defineProperty, A = Object.getOwnPropertyDescriptor, p = (e, n, t, o) => {
-  for (var r = o > 1 ? void 0 : o ? A(n, t) : n, i = e.length - 1, l; i >= 0; i--)
-    (l = e[i]) && (r = (o ? l(n, t, r) : l(r)) || r);
-  return o && r && O(n, t, r), r;
+var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, p = (e, n, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? E(n, r) : n, i = e.length - 1, l; i >= 0; i--)
+    (l = e[i]) && (t = (o ? l(n, r, t) : l(t)) || t);
+  return o && t && A(n, r, t), t;
 };
-let c = class extends $ {
+let c = class extends I {
   constructor() {
     super(...arguments), this.items = [], this.orientation = "horizontal", this.label = "Main navigation", this.labelOpenMenu = "Open navigation menu", this.labelCloseMenu = "Close navigation menu", this._mobileOpen = !1, this._expandedIndex = null, this._boundOutsideClick = this._handleOutsideClick.bind(this), this._boundFocusout = this._handleFocusout.bind(this);
   }
@@ -292,9 +293,9 @@ let c = class extends $ {
     this._mobileOpen = !this._mobileOpen, this._mobileOpen || (this._expandedIndex = null);
   }
   /** @internal */
-  _handleItemClick(e, n, t) {
+  _handleItemClick(e, n, r) {
     var o;
-    t.preventDefault(), (o = e.children) != null && o.length ? this._expandedIndex = this._expandedIndex === n ? null : n : (this._mobileOpen = !1, this._expandedIndex = null, this.dispatchEvent(
+    r.preventDefault(), (o = e.children) != null && o.length ? this._expandedIndex = this._expandedIndex === n ? null : n : (this._mobileOpen = !1, this._expandedIndex = null, this.dispatchEvent(
       new CustomEvent("hx-nav-select", {
         bubbles: !0,
         composed: !0,
@@ -313,17 +314,17 @@ let c = class extends $ {
     );
   }
   /** @internal */
-  _handleKeydown(e, n, t) {
-    var l, d, h, a, f;
+  _handleKeydown(e, n, r) {
+    var l, d, h, a, b;
     const o = (l = this.shadowRoot) == null ? void 0 : l.querySelectorAll(
       '[part="list"] > [part="item"] > [part="link"]'
     );
     if (!o) return;
-    const r = Array.from(o), i = r[n];
+    const t = Array.from(o), i = t[n];
     switch (e.key) {
       case "ArrowRight":
       case "ArrowDown": {
-        if (e.preventDefault(), (d = t.children) != null && d.length && e.key === "ArrowDown" && this.orientation === "horizontal")
+        if (e.preventDefault(), (d = r.children) != null && d.length && e.key === "ArrowDown" && this.orientation === "horizontal")
           this._expandedIndex = n, this.updateComplete.then(() => {
             var v;
             const s = (v = this.shadowRoot) == null ? void 0 : v.querySelector(
@@ -332,7 +333,7 @@ let c = class extends $ {
             s == null || s.focus();
           });
         else {
-          const s = r[n + 1] ?? r[0];
+          const s = t[n + 1] ?? t[0];
           s == null || s.focus();
         }
         break;
@@ -340,16 +341,16 @@ let c = class extends $ {
       case "ArrowLeft":
       case "ArrowUp": {
         e.preventDefault();
-        const s = r[n - 1] ?? r[r.length - 1];
+        const s = t[n - 1] ?? t[t.length - 1];
         s == null || s.focus();
         break;
       }
       case "Home": {
-        e.preventDefault(), (h = r[0]) == null || h.focus();
+        e.preventDefault(), (h = t[0]) == null || h.focus();
         break;
       }
       case "End": {
-        e.preventDefault(), (a = r[r.length - 1]) == null || a.focus();
+        e.preventDefault(), (a = t[t.length - 1]) == null || a.focus();
         break;
       }
       case "Escape": {
@@ -358,12 +359,12 @@ let c = class extends $ {
       }
       case "Enter":
       case " ": {
-        if ((f = t.children) != null && f.length) {
+        if ((b = r.children) != null && b.length) {
           e.preventDefault();
           const s = this._expandedIndex === n;
           this._expandedIndex = s ? null : n, s || this.updateComplete.then(() => {
-            var b;
-            const v = (b = this.shadowRoot) == null ? void 0 : b.querySelector(
+            var f;
+            const v = (f = this.shadowRoot) == null ? void 0 : f.querySelector(
               '.nav__submenu:not([hidden]) [part="link"]'
             );
             v == null || v.focus();
@@ -376,11 +377,11 @@ let c = class extends $ {
   /** @internal */
   _handleSubKeydown(e, n) {
     var l, d, h;
-    const t = (l = this.shadowRoot) == null ? void 0 : l.querySelectorAll(
+    const r = (l = this.shadowRoot) == null ? void 0 : l.querySelectorAll(
       '.nav__submenu:not([hidden]) [part="link"]'
     );
-    if (!t) return;
-    const o = Array.from(t), r = e.currentTarget ?? e.target, i = o.indexOf(r);
+    if (!r) return;
+    const o = Array.from(r), t = e.currentTarget ?? e.target, i = o.indexOf(t);
     switch (e.key) {
       case "ArrowDown": {
         e.preventDefault();
@@ -413,9 +414,9 @@ let c = class extends $ {
    * @internal
    */
   _handleFocusout(e) {
-    var t;
+    var r;
     const n = e.relatedTarget;
-    n && this.contains(n) || n && ((t = this.shadowRoot) != null && t.contains(n)) || (this._expandedIndex = null);
+    n && this.contains(n) || n && ((r = this.shadowRoot) != null && r.contains(n)) || (this._expandedIndex = null);
   }
   // ─── Lifecycle ───
   connectedCallback() {
@@ -464,25 +465,25 @@ let c = class extends $ {
     </svg>`;
   }
   /** @internal */
-  _renderSubMenu(e, n, t) {
+  _renderSubMenu(e, n, r) {
     const o = this._expandedIndex === n;
     return u`
-      <ul class="nav__submenu" aria-label="${t} submenu" ?hidden=${!o}>
+      <ul class="nav__submenu" aria-label="${r} submenu" ?hidden=${!o}>
         ${e.map(
-      (r) => u`
+      (t) => u`
             <li class="nav__submenu-item">
               <a
                 part="link"
-                href=${this._sanitizeHref(r.href)}
+                href=${this._sanitizeHref(t.href)}
                 class=${m({
         nav__link: !0,
-        "nav__link--active": !!r.current
+        "nav__link--active": !!t.current
       })}
-                aria-current=${r.current ? "page" : _}
-                @click=${(i) => this._handleSubItemClick(r, i)}
+                aria-current=${t.current ? "page" : _}
+                @click=${(i) => this._handleSubItemClick(t, i)}
                 @keydown=${(i) => this._handleSubKeydown(i, n)}
               >
-                ${r.label}
+                ${t.label}
               </a>
             </li>
           `
@@ -493,17 +494,17 @@ let c = class extends $ {
   /** @internal */
   _renderItem(e, n) {
     var d, h;
-    const t = !!((d = e.children) != null && d.length), o = this._expandedIndex === n, r = t && !!((h = e.children) != null && h.some((a) => a.current)), i = {
+    const r = !!((d = e.children) != null && d.length), o = this._expandedIndex === n, t = r && !!((h = e.children) != null && h.some((a) => a.current)), i = {
       nav__link: !0,
-      "nav__link--active": !!e.current || r,
-      "nav__link--has-submenu": t,
+      "nav__link--active": !!e.current || t,
+      "nav__link--has-submenu": r,
       "nav__link--expanded": o
-    }, l = t ? u`
+    }, l = r ? u`
           <button
             part="link"
             class=${m(i)}
             aria-expanded=${o ? "true" : "false"}
-            aria-current=${r ? "true" : _}
+            aria-current=${t ? "true" : _}
             @click=${(a) => this._handleItemClick(e, n, a)}
             @keydown=${(a) => this._handleKeydown(a, n, e)}
           >
@@ -546,15 +547,15 @@ let c = class extends $ {
         <ul part="list" id="nav-list" class=${m(e)} role="list">
           ${C(
       this.items,
-      (n, t) => t,
-      (n, t) => this._renderItem(n, t)
+      (n, r) => r,
+      (n, r) => this._renderItem(n, r)
     )}
         </ul>
       </nav>
     `;
   }
 };
-c.styles = [I];
+c.styles = [O, $];
 p([
   x({
     type: Array,
@@ -595,4 +596,4 @@ c = p([
 export {
   c as H
 };
-//# sourceMappingURL=hx-nav-BcYDmjf7.js.map
+//# sourceMappingURL=hx-nav-ldFM3Fle.js.map

package/dist/shared/hx-nav-ldFM3Fle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-nav-ldFM3Fle.js","sources":["../../src/components/hx-nav/hx-nav.styles.ts","../../src/components/hx-nav/hx-nav.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixNavStyles = css`\n  :host {\n    display: block;\n    font-family: var(--hx-nav-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-nav-font-size, var(--hx-font-size-sm, 0.875rem));\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Nav Container ─── */\n\n  [part='nav'] {\n    position: relative;\n    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #0d1825));\n    color: var(--hx-nav-color, var(--hx-color-neutral-100, #ebeee9));\n    padding: var(--hx-nav-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));\n  }\n\n  /* ─── Hamburger Toggle ─── */\n\n  [part='toggle'] {\n    display: none;\n    align-items: center;\n    justify-content: center;\n    padding: var(--hx-space-2, 0.5rem);\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    color: var(--hx-nav-color, var(--hx-color-neutral-100, #ebeee9));\n    cursor: pointer;\n    transition: background-color var(--hx-transition-fast, 150ms) ease;\n    line-height: 0;\n  }\n\n  [part='toggle']:hover {\n    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #313e4b));\n  }\n\n  [part='toggle']:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Navigation List ─── */\n\n  [part='list'] {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    gap: var(--hx-space-1, 0.25rem);\n    align-items: center;\n  }\n\n  /* ─── Nav Item ─── */\n\n  [part='item'] {\n    position: relative;\n  }\n\n  /* ─── Nav Link / Button ─── */\n\n  .nav__link {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));\n    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #ebeee9));\n    text-decoration: none;\n    border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: var(--hx-font-weight-medium, 500);\n    line-height: var(--hx-line-height-normal, 1.5);\n    white-space: nowrap;\n    transition:\n      background-color var(--hx-transition-fast, 150ms) ease,\n      color var(--hx-transition-fast, 150ms) ease;\n  }\n\n  .nav__link:hover {\n    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #313e4b));\n    color: var(--hx-nav-link-hover-color, var(--hx-color-neutral-0, #ffffff));\n  }\n\n  .nav__link:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .nav__link--active {\n    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #0f7078));\n    color: var(--hx-nav-link-active-color, var(--hx-color-neutral-0, #ffffff));\n  }\n\n  /* ─── Chevron Icon ─── */\n\n  .nav__chevron {\n    transition: transform var(--hx-transition-normal, 200ms) ease;\n    flex-shrink: 0;\n  }\n\n  .nav__link--expanded .nav__chevron {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Submenu ─── */\n\n  .nav__submenu {\n    position: absolute;\n    top: calc(100% + var(--hx-space-1, 0.25rem));\n    left: 0;\n    min-width: var(--hx-nav-submenu-min-width, 12rem);\n    list-style: none;\n    margin: 0;\n    padding: var(--hx-space-1, 0.25rem) 0;\n    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #202b39));\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    box-shadow: var(\n      --hx-nav-shadow,\n      var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))\n    );\n    z-index: var(--hx-z-index-dropdown, 1000);\n  }\n\n  .nav__submenu[hidden] {\n    display: none;\n  }\n\n  .nav__submenu .nav__link {\n    display: block;\n    width: 100%;\n    text-align: start;\n    border-radius: 0;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n  }\n\n  /* ─── Vertical / Sidebar Orientation ─── */\n\n  :host([orientation='vertical']) [part='nav'] {\n    padding: var(--hx-space-4, 1rem) var(--hx-space-2, 0.5rem);\n  }\n\n  :host([orientation='vertical']) [part='list'] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--hx-space-1, 0.25rem);\n  }\n\n  :host([orientation='vertical']) .nav__link {\n    width: 100%;\n    justify-content: flex-start;\n  }\n\n  :host([orientation='vertical']) .nav__submenu {\n    position: static;\n    box-shadow: none;\n    border-radius: 0;\n    background-color: transparent;\n    padding: 0;\n    padding-inline-start: var(--hx-space-4, 1rem);\n  }\n\n  :host([orientation='vertical']) .nav__submenu[hidden] {\n    display: none;\n  }\n\n  :host([orientation='vertical']) .nav__submenu .nav__link {\n    padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #b6bfb9));\n  }\n\n  /* ─── Mobile Responsive ─── */\n\n  @media (max-width: 768px) {\n    [part='nav'] {\n      display: flex;\n      flex-direction: column;\n      padding: var(--hx-space-2, 0.5rem);\n    }\n\n    [part='toggle'] {\n      display: inline-flex;\n      align-self: flex-end;\n    }\n\n    [part='list'] {\n      display: none;\n      flex-direction: column;\n      align-items: stretch;\n      width: 100%;\n      margin-top: var(--hx-space-2, 0.5rem);\n      gap: var(--hx-space-1, 0.25rem);\n    }\n\n    [part='list'].nav__list--open {\n      display: flex;\n    }\n\n    [part='item'] {\n      width: 100%;\n    }\n\n    .nav__link {\n      width: 100%;\n      justify-content: flex-start;\n    }\n\n    .nav__submenu {\n      position: static;\n      box-shadow: none;\n      border-radius: 0;\n      padding-inline-start: var(--hx-space-4, 1rem);\n      background-color: transparent;\n    }\n\n    .nav__submenu .nav__link {\n      padding: var(--hx-space-1-5, 0.375rem) var(--hx-space-3, 0.75rem);\n    }\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .nav__link,\n    .nav__chevron,\n    [part='toggle'] {\n      transition: none;\n      animation: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    [part='nav'] {\n      border: 1px solid CanvasText;\n    }\n\n    .nav__link--active {\n      border: 1px solid Highlight;\n    }\n\n    .nav__submenu {\n      border: 1px solid CanvasText;\n    }\n  }\n`;\n","import { html, nothing, svg } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { HelixElement } from '../../base/index.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { helixNavStyles } from './hx-nav.styles.js';\n\n/** A single navigation item, optionally with nested children. */\nexport interface NavItem {\n  /** Display label for the item. */\n  label: string;\n  /** Href for the item link. Required unless children are provided. */\n  href?: string;\n  /** Whether this item represents the current page. */\n  current?: boolean;\n  /** Nested sub-menu items. */\n  children?: NavItem[];\n}\n\n/** Layout orientation for the navigation. */\ntype NavOrientation = 'horizontal' | 'vertical';\n\n/**\n * Primary and secondary navigation component.\n * Supports horizontal menu bar and vertical sidebar patterns.\n * Mobile responsive with hamburger toggle.\n *\n * @summary Navigation bar supporting horizontal and vertical layouts with nested submenus.\n *\n * @tag hx-nav\n *\n * @fires {CustomEvent<{item: NavItem}>} hx-nav-select - Dispatched when a nav item is activated.\n *\n * @csspart nav - The nav landmark element.\n * @csspart list - The top-level list element.\n * @csspart item - Each list item wrapper.\n * @csspart link - The anchor or button element inside each item.\n * @csspart toggle - The mobile hamburger toggle button.\n *\n * @cssprop [--hx-nav-bg=var(--hx-color-neutral-900)] - Navigation background color.\n * @cssprop [--hx-nav-color=var(--hx-color-neutral-100)] - Navigation text color.\n * @cssprop [--hx-nav-font-family=var(--hx-font-family-sans)] - Navigation font family.\n * @cssprop [--hx-nav-link-color=var(--hx-color-neutral-100)] - Link text color.\n * @cssprop [--hx-nav-link-hover-bg=var(--hx-color-neutral-700)] - Link hover background.\n * @cssprop [--hx-nav-link-hover-color=var(--hx-color-white)] - Link hover text color.\n * @cssprop [--hx-nav-link-active-bg=var(--hx-color-primary-600)] - Active link background.\n * @cssprop [--hx-nav-link-active-color=var(--hx-color-white)] - Active link text color.\n * @cssprop [--hx-nav-submenu-bg=var(--hx-color-neutral-800)] - Submenu background color.\n * @cssprop [--hx-nav-submenu-min-width=12rem] - Submenu minimum width.\n * @cssprop [--hx-nav-font-size=var(--hx-font-size-sm)] - Navigation font size.\n * @cssprop [--hx-nav-padding=var(--hx-space-2) var(--hx-space-4)] - Navigation padding.\n * @cssprop [--hx-nav-item-padding=var(--hx-space-2) var(--hx-space-3)] - Item padding.\n * @cssprop [--hx-nav-border-radius=var(--hx-border-radius-sm)] - Item border radius.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-nav-focus-ring-color=var(--hx-focus-ring-color)] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-primary-600] - Color.\n * @cssprop [--hx-transition-normal] - Transition timing.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-nav-shadow] - CSS custom property.\n * @cssprop [--hx-shadow-md] - Box shadow.\n * @cssprop [--hx-z-index-dropdown] - Z-index layer.\n * @cssprop [--hx-space-1-5] - Spacing token.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-300] - Color.\n */\n@customElement('hx-nav')\nexport class HelixNav extends HelixElement {\n  static override styles = [helixNavStyles, forcedColorsInteractive];\n\n  // ─── Properties ───\n\n  /**\n   * Navigation items array.\n   * @attr items\n   */\n  @property({\n    type: Array,\n    converter: {\n      fromAttribute(value: string | null): NavItem[] {\n        if (!value) return [];\n        try {\n          const parsed: unknown = JSON.parse(value);\n          return Array.isArray(parsed) ? (parsed as NavItem[]) : [];\n        } catch {\n          return [];\n        }\n      },\n    },\n  })\n  items: NavItem[] = [];\n\n  /**\n   * Layout orientation: 'horizontal' (menu bar) or 'vertical' (sidebar).\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: NavOrientation = 'horizontal';\n\n  /**\n   * Accessible label for the nav landmark.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Main navigation';\n\n  /** Accessible label for the navigation toggle button when menu is closed. */\n  @property({ type: String, attribute: 'label-open-menu' })\n  labelOpenMenu = 'Open navigation menu';\n\n  /** Accessible label for the navigation toggle button when menu is open. */\n  @property({ type: String, attribute: 'label-close-menu' })\n  labelCloseMenu = 'Close navigation menu';\n\n  // ─── State ───\n\n  /**\n   * Tracks whether the mobile navigation menu is currently expanded.\n   * @internal\n   */\n  @state() private _mobileOpen = false;\n  /**\n   * Index of the currently expanded top-level nav item with a submenu, or null if none is expanded.\n   * @internal\n   */\n  @state() private _expandedIndex: number | null = null;\n\n  // ─── Private: bound event handler reference ───\n\n  /**\n   * Stable bound reference to the outside-click handler, stored for addEventListener/removeEventListener symmetry.\n   * @internal\n   */\n  private _boundOutsideClick: (e: MouseEvent) => void = this._handleOutsideClick.bind(this);\n\n  /**\n   * Stable bound reference to the focusout handler, stored for addEventListener/removeEventListener symmetry.\n   * @internal\n   */\n  private _boundFocusout: (e: FocusEvent) => void = this._handleFocusout.bind(this);\n\n  /**\n   * Sanitizes a URL to prevent XSS via javascript: or data: URIs.\n   * Only allows http:, https:, relative paths, and fragment-only links.\n   */\n  /** @internal */\n  private _sanitizeHref(href: string | undefined): string {\n    if (!href || href === '#') return '#';\n    // Allow relative paths, fragments, and http(s)\n    if (\n      href.startsWith('/') ||\n      href.startsWith('./') ||\n      href.startsWith('../') ||\n      href.startsWith('#')\n    ) {\n      return href;\n    }\n    if (typeof window === 'undefined') return href;\n    try {\n      const url = new URL(href, window.location.href);\n      if (url.protocol === 'http:' || url.protocol === 'https:') {\n        return href;\n      }\n    } catch {\n      // Invalid URL — fall through to safe default\n    }\n    return '#';\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleToggle(): void {\n    this._mobileOpen = !this._mobileOpen;\n    if (!this._mobileOpen) {\n      this._expandedIndex = null;\n    }\n  }\n\n  /** @internal */\n  private _handleItemClick(item: NavItem, index: number, e: Event): void {\n    e.preventDefault();\n    if (item.children?.length) {\n      this._expandedIndex = this._expandedIndex === index ? null : index;\n    } else {\n      this._mobileOpen = false;\n      this._expandedIndex = null;\n      this.dispatchEvent(\n        new CustomEvent<{ item: NavItem }>('hx-nav-select', {\n          bubbles: true,\n          composed: true,\n          detail: { item },\n        }),\n      );\n    }\n  }\n\n  /** @internal */\n  private _handleSubItemClick(item: NavItem, e: Event): void {\n    e.preventDefault();\n    this._mobileOpen = false;\n    this._expandedIndex = null;\n    this.dispatchEvent(\n      new CustomEvent<{ item: NavItem }>('hx-nav-select', {\n        bubbles: true,\n        composed: true,\n        detail: { item },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent, index: number, item: NavItem): void {\n    const items = this.shadowRoot?.querySelectorAll<HTMLElement>(\n      '[part=\"list\"] > [part=\"item\"] > [part=\"link\"]',\n    );\n    if (!items) return;\n    const itemsArr = Array.from(items);\n    const current = itemsArr[index];\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowDown': {\n        e.preventDefault();\n        if (item.children?.length && e.key === 'ArrowDown' && this.orientation === 'horizontal') {\n          // open submenu and focus first item\n          this._expandedIndex = index;\n          void this.updateComplete.then(() => {\n            const firstSub = this.shadowRoot?.querySelector<HTMLElement>(\n              `.nav__submenu [part=\"link\"]`,\n            );\n            firstSub?.focus();\n          });\n        } else {\n          const next = itemsArr[index + 1] ?? itemsArr[0];\n          next?.focus();\n        }\n        break;\n      }\n      case 'ArrowLeft':\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = itemsArr[index - 1] ?? itemsArr[itemsArr.length - 1];\n        prev?.focus();\n        break;\n      }\n      case 'Home': {\n        e.preventDefault();\n        itemsArr[0]?.focus();\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        itemsArr[itemsArr.length - 1]?.focus();\n        break;\n      }\n      case 'Escape': {\n        this._expandedIndex = null;\n        current?.focus();\n        break;\n      }\n      case 'Enter':\n      case ' ': {\n        if (item.children?.length) {\n          e.preventDefault();\n          const wasExpanded = this._expandedIndex === index;\n          this._expandedIndex = wasExpanded ? null : index;\n          if (!wasExpanded) {\n            void this.updateComplete.then(() => {\n              const firstSub = this.shadowRoot?.querySelector<HTMLElement>(\n                `.nav__submenu:not([hidden]) [part=\"link\"]`,\n              );\n              firstSub?.focus();\n            });\n          }\n        }\n        break;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleSubKeydown(e: KeyboardEvent, parentIndex: number): void {\n    const subItems = this.shadowRoot?.querySelectorAll<HTMLElement>(\n      `.nav__submenu:not([hidden]) [part=\"link\"]`,\n    );\n    if (!subItems) return;\n    const arr = Array.from(subItems);\n    const focused = (e.currentTarget ?? e.target) as HTMLElement;\n    const currentIdx = arr.indexOf(focused);\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        const next = arr[currentIdx + 1] ?? arr[0];\n        next?.focus();\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        const prev = arr[currentIdx - 1] ?? arr[arr.length - 1];\n        prev?.focus();\n        break;\n      }\n      case 'Escape': {\n        e.preventDefault();\n        this._expandedIndex = null;\n        const parentLinks = this.shadowRoot?.querySelectorAll<HTMLElement>(\n          '[part=\"list\"] > [part=\"item\"] > [part=\"link\"]',\n        );\n        parentLinks?.[parentIndex]?.focus();\n        break;\n      }\n    }\n  }\n\n  /** @internal */\n  private _handleOutsideClick(e: MouseEvent): void {\n    const path = e.composedPath();\n    if (!path.includes(this)) {\n      this._expandedIndex = null;\n    }\n  }\n\n  /**\n   * hx-nav-008: Close expanded submenu when focus moves outside the component.\n   * @internal\n   */\n  private _handleFocusout(e: FocusEvent): void {\n    const relatedTarget = e.relatedTarget as Node | null;\n    if (relatedTarget && this.contains(relatedTarget)) return;\n    if (relatedTarget && this.shadowRoot?.contains(relatedTarget)) return;\n    this._expandedIndex = null;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    if (typeof document !== 'undefined') {\n      document.addEventListener('click', this._boundOutsideClick);\n    }\n    this.addEventListener('focusout', this._boundFocusout);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._boundOutsideClick);\n    this.removeEventListener('focusout', this._boundFocusout);\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderHamburgerIcon() {\n    return html`<svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      aria-hidden=\"true\"\n    >\n      ${this._mobileOpen\n        ? svg`<line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>`\n        : svg`<line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"></line>\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n            <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"></line>`}\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderChevronIcon() {\n    return html`<svg\n      class=\"nav__chevron\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M4.5 6L8 9.5 11.5 6\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        fill=\"none\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderSubMenu(children: NavItem[], parentIndex: number, parentLabel: string) {\n    const isExpanded = this._expandedIndex === parentIndex;\n    return html`\n      <ul class=\"nav__submenu\" aria-label=\"${parentLabel} submenu\" ?hidden=${!isExpanded}>\n        ${children.map(\n          (child) => html`\n            <li class=\"nav__submenu-item\">\n              <a\n                part=\"link\"\n                href=${this._sanitizeHref(child.href)}\n                class=${classMap({\n                  nav__link: true,\n                  'nav__link--active': !!child.current,\n                })}\n                aria-current=${child.current ? 'page' : nothing}\n                @click=${(e: Event) => this._handleSubItemClick(child, e)}\n                @keydown=${(e: KeyboardEvent) => this._handleSubKeydown(e, parentIndex)}\n              >\n                ${child.label}\n              </a>\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  /** @internal */\n  private _renderItem(item: NavItem, index: number) {\n    const hasChildren = !!item.children?.length;\n    const isExpanded = this._expandedIndex === index;\n    const hasCurrentChild = hasChildren && !!item.children?.some((child) => child.current);\n\n    const linkClasses = {\n      nav__link: true,\n      'nav__link--active': !!item.current || hasCurrentChild,\n      'nav__link--has-submenu': hasChildren,\n      'nav__link--expanded': isExpanded,\n    };\n\n    const content = hasChildren\n      ? html`\n          <button\n            part=\"link\"\n            class=${classMap(linkClasses)}\n            aria-expanded=${isExpanded ? 'true' : 'false'}\n            aria-current=${hasCurrentChild ? 'true' : nothing}\n            @click=${(e: Event) => this._handleItemClick(item, index, e)}\n            @keydown=${(e: KeyboardEvent) => this._handleKeydown(e, index, item)}\n          >\n            ${item.label} ${this._renderChevronIcon()}\n          </button>\n          ${this._renderSubMenu(item.children ?? [], index, item.label)}\n        `\n      : html`\n          <a\n            part=\"link\"\n            href=${this._sanitizeHref(item.href)}\n            class=${classMap(linkClasses)}\n            aria-current=${item.current ? 'page' : nothing}\n            @click=${(e: Event) => this._handleItemClick(item, index, e)}\n            @keydown=${(e: KeyboardEvent) => this._handleKeydown(e, index, item)}\n          >\n            ${item.label}\n          </a>\n        `;\n\n    return html` <li part=\"item\" class=\"nav__item\">${content}</li> `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const listClasses = {\n      nav__list: true,\n      'nav__list--open': this._mobileOpen,\n    };\n\n    return html`\n      <nav part=\"nav\" aria-label=${this.label}>\n        <button\n          part=\"toggle\"\n          class=\"nav__toggle\"\n          aria-expanded=${this._mobileOpen ? 'true' : 'false'}\n          aria-controls=\"nav-list\"\n          aria-label=${this._mobileOpen ? this.labelCloseMenu : this.labelOpenMenu}\n          @click=${this._handleToggle}\n        >\n          ${this._renderHamburgerIcon()}\n        </button>\n\n        <ul part=\"list\" id=\"nav-list\" class=${classMap(listClasses)} role=\"list\">\n          ${repeat(\n            this.items,\n            (_item, i) => i,\n            (item, i) => this._renderItem(item, i),\n          )}\n        </ul>\n      </nav>\n    `;\n  }\n}\n\n/** Canonical type alias for the hx-nav component. */\nexport type HxNav = HelixNav;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-nav': HelixNav;\n  }\n}\n"],"names":["helixNavStyles","css","HelixNav","HelixElement","href","url","item","index","e","_a","items","itemsArr","current","_b","firstSub","next","prev","_c","_d","_e","wasExpanded","parentIndex","subItems","arr","focused","currentIdx","parentLinks","relatedTarget","html","svg","children","parentLabel","isExpanded","child","classMap","nothing","hasChildren","hasCurrentChild","linkClasses","content","listClasses","repeat","_item","i","forcedColorsInteractive","__decorateClass","property","value","parsed","state","customElement"],"mappings":";;;;;;AAEO,MAAMA,IAAiBC;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;AAAA;A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"}

package/dist/shared/{hx-number-input-mOIZ3-46.js → hx-number-input-yUzFOSC1.js}

@@ -1,12 +1,13 @@
 import { css as f, html as a, nothing as h } from "lit";
-import { property as o, query as _, state as c, customElement as b } from "lit/decorators.js";
+import { property as l, query as _, state as c, customElement as b } from "lit/decorators.js";
 import { classMap as m } from "lit/directives/class-map.js";
 import { ifDefined as p } from "lit/directives/if-defined.js";
 import { live as v } from "lit/directives/live.js";
 import { F as x } from "./FormMixin-B8PXk5RQ.js";
-import { H as g } from "./helix-element-BNEYeiys.js";
-import { c as y } from "./id-counter-DuX8vsui.js";
-const w = f`
+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 S = f`
   :host {
     display: block;
   }
@@ -39,12 +40,12 @@ const w = f`
     gap: var(--hx-space-1);
     font-size: var(--hx-font-size-sm);
     font-weight: var(--hx-font-weight-medium);
-    color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));
+    color: var(--hx-number-input-label-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
   }
 
   .field__required-marker {
-    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold);
   }
 
@@ -54,9 +55,9 @@ const w = f`
     display: flex;
     align-items: stretch;
     border: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
     border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));
-    background-color: var(--hx-number-input-bg, var(--hx-color-neutral-0));
+    background-color: var(--hx-number-input-bg, var(--hx-color-surface-default));
     transition:
       border-color var(--hx-transition-fast),
       box-shadow var(--hx-transition-fast);
@@ -80,18 +81,18 @@ const w = f`
   /* ─── Error State ─── */
 
   .field--error .field__input-wrapper {
-    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
   }
 
   .field--error .field__input-wrapper:focus-within {
-    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
     /* Fallback for Safari < 16.2 (no color-mix support) */
     box-shadow: 0 0 0 var(--hx-focus-ring-width)
-      var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+      var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
     box-shadow: 0 0 0 var(--hx-focus-ring-width)
       color-mix(
         in srgb,
-        var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626))
+        var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e))
           calc(var(--hx-focus-ring-opacity) * 100%),
         transparent
       );
@@ -104,7 +105,7 @@ const w = f`
     display: flex;
     align-items: center;
     padding: 0 var(--hx-space-3);
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted);
     flex-shrink: 0;
   }
 
@@ -116,7 +117,7 @@ const w = f`
     outline: none;
     background: transparent;
     font-family: inherit;
-    color: var(--hx-number-input-color, var(--hx-color-neutral-800));
+    color: var(--hx-number-input-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
     width: 100%;
     /* Size: md (default) */
@@ -126,7 +127,7 @@ const w = f`
   }
 
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400);
+    color: var(--hx-color-text-placeholder);
   }
 
   .field__input:disabled {
@@ -165,7 +166,7 @@ const w = f`
     flex-direction: column;
     flex-shrink: 0;
     border-inline-start: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
   }
 
   .field__stepper-btn {
@@ -175,7 +176,7 @@ const w = f`
     background: transparent;
     border: none;
     cursor: pointer;
-    color: var(--hx-color-neutral-600);
+    color: var(--hx-color-text-secondary);
     padding: 0;
     flex: 1;
     min-width: var(--hx-size-8);
@@ -187,12 +188,12 @@ const w = f`
 
   .field__stepper-btn:not(:last-child) {
     border-bottom: var(--hx-border-width-thin) solid
-      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+      var(--hx-number-input-border-color, var(--hx-color-border-strong));
   }
 
   .field__stepper-btn:hover:not(:disabled) {
-    background-color: var(--hx-color-neutral-50);
-    color: var(--hx-color-neutral-800);
+    background-color: var(--hx-color-surface-raised);
+    color: var(--hx-color-text-strong);
   }
 
   /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */
@@ -231,13 +232,13 @@ const w = f`
 
   .field__help-text {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-color-neutral-500);
+    color: var(--hx-color-text-muted);
     line-height: var(--hx-line-height-normal);
   }
 
   .field__error {
     font-size: var(--hx-font-size-xs);
-    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal);
   }
 
@@ -331,15 +332,15 @@ const w = f`
     }
   }
 `;
-var S = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, l = (e, t, r, s) => {
-  for (var n = s > 1 ? void 0 : s ? $(t, r) : t, d = e.length - 1, u; d >= 0; d--)
+var $ = Object.defineProperty, I = Object.getOwnPropertyDescriptor, o = (e, t, r, s) => {
+  for (var n = s > 1 ? void 0 : s ? I(t, r) : t, d = e.length - 1, u; d >= 0; d--)
     (u = e[d]) && (n = (s ? u(t, r, n) : u(n)) || n);
-  return s && n && S(t, r, n), n;
+  return s && n && $(t, r, n), n;
 };
-const I = y("hx-number-input");
-let i = class extends x(g) {
+const T = w("hx-number-input");
+let i = class extends x(y) {
   constructor() {
-    super(...arguments), this.name = "", this.value = null, this.required = !1, this.disabled = !1, this.readonly = !1, this.min = void 0, this.max = void 0, this.step = 1, this.label = "", this.error = "", this.helpText = "", this.size = "md", this.noStepper = !1, this.requiredMessage = "This field is required.", this.incrementLabel = "Increment", this.decrementLabel = "Decrement", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._defaultValue = null, this._longPressTimer = null, this._repeatInterval = null, this._inputId = I(), this._helpTextId = `${this._inputId}-help`, this._errorId = `${this._inputId}-error`;
+    super(...arguments), this.name = "", this.value = null, this.required = !1, this.disabled = !1, this.readonly = !1, this.min = void 0, this.max = void 0, this.step = 1, this.label = "", this.error = "", this.helpText = "", this.size = "md", this.noStepper = !1, this.requiredMessage = "This field is required.", this.incrementLabel = "Increment", this.decrementLabel = "Decrement", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._defaultValue = null, this._longPressTimer = null, this._repeatInterval = null, this._inputId = T(), this._helpTextId = `${this._inputId}-help`, this._errorId = `${this._inputId}-error`;
   }
   // ─── Slot Tracking ───
   /** @internal */
@@ -678,13 +679,13 @@ let i = class extends x(g) {
     `;
   }
 };
-i.styles = [w];
+i.styles = [S, g];
 i.formAssociated = !0;
-l([
-  o({ type: String, reflect: !0 })
+o([
+  l({ type: String, reflect: !0 })
 ], i.prototype, "name", 2);
-l([
-  o({
+o([
+  l({
     type: Number,
     reflect: !0,
     converter: {
@@ -697,64 +698,64 @@ l([
     }
   })
 ], i.prototype, "value", 2);
-l([
-  o({ type: Boolean, reflect: !0 })
+o([
+  l({ type: Boolean, reflect: !0 })
 ], i.prototype, "required", 2);
-l([
-  o({ type: Boolean, reflect: !0 })
+o([
+  l({ type: Boolean, reflect: !0 })
 ], i.prototype, "disabled", 2);
-l([
-  o({ type: Boolean, reflect: !0 })
+o([
+  l({ type: Boolean, reflect: !0 })
 ], i.prototype, "readonly", 2);
-l([
-  o({ type: Number })
+o([
+  l({ type: Number })
 ], i.prototype, "min", 2);
-l([
-  o({ type: Number })
+o([
+  l({ type: Number })
 ], i.prototype, "max", 2);
-l([
-  o({ type: Number })
+o([
+  l({ type: Number })
 ], i.prototype, "step", 2);
-l([
-  o({ type: String })
+o([
+  l({ type: String })
 ], i.prototype, "label", 2);
-l([
-  o({ type: String })
+o([
+  l({ type: String })
 ], i.prototype, "error", 2);
-l([
-  o({ type: String, attribute: "help-text" })
+o([
+  l({ type: String, attribute: "help-text" })
 ], i.prototype, "helpText", 2);
-l([
-  o({ type: String, attribute: "hx-size" })
+o([
+  l({ type: String, attribute: "hx-size" })
 ], i.prototype, "size", 2);
-l([
-  o({ type: Boolean, attribute: "no-stepper" })
+o([
+  l({ type: Boolean, attribute: "no-stepper" })
 ], i.prototype, "noStepper", 2);
-l([
-  o({ attribute: "required-message" })
+o([
+  l({ attribute: "required-message" })
 ], i.prototype, "requiredMessage", 2);
-l([
-  o({ attribute: "increment-label" })
+o([
+  l({ attribute: "increment-label" })
 ], i.prototype, "incrementLabel", 2);
-l([
-  o({ attribute: "decrement-label" })
+o([
+  l({ attribute: "decrement-label" })
 ], i.prototype, "decrementLabel", 2);
-l([
+o([
   _(".field__input")
 ], i.prototype, "_input", 2);
-l([
+o([
   c()
 ], i.prototype, "_hasLabelSlot", 2);
-l([
+o([
   c()
 ], i.prototype, "_hasErrorSlot", 2);
-l([
+o([
   c()
 ], i.prototype, "_hasHelpSlot", 2);
-i = l([
+i = o([
   b("hx-number-input")
 ], i);
 export {
   i as H
 };
-//# sourceMappingURL=hx-number-input-mOIZ3-46.js.map
+//# sourceMappingURL=hx-number-input-yUzFOSC1.js.map