@helixui/library 2.1.2-next.53 → 2.1.2-next.54

package/dist/css/helix-layout.css

@@ -3,7 +3,7 @@
 /* ── hx-accordion ── */
 :host {
     display: block;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-accordion-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   .accordion {
@@ -94,6 +94,16 @@
   .container__inner--xl {
     max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-container is a layout wrapper with no state communicated via color.
+     forced-color-adjust: auto (default) is sufficient. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 /* ── hx-grid ── */
 :host {
     display: block;
@@ -108,6 +118,16 @@ export const helixGridItemStyles = css`
     min-width: 0;
     min-height: 0;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-grid and hx-grid-item are layout wrappers with no state communicated
+     via color. forced-color-adjust: auto (default) is sufficient. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 /* ── hx-split-panel ── */
 :host {
     display: flex;
@@ -393,4 +413,14 @@ export const helixGridItemStyles = css`
 
   :host([gap='xl']) [part='base'] {
     gap: var(--hx-space-8, 2rem);
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-stack is a layout wrapper with no state communicated via color.
+     forced-color-adjust: auto (default) is sufficient. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
   }

package/dist/css/helix-media.css

@@ -40,22 +40,22 @@
     /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
     border-radius: var(--hx-border-radius-full, 9999px);
-    background: var(--hx-color-neutral-0, #fff);
-    color: var(--hx-color-neutral-700, #374151);
+    background: var(--hx-color-neutral-0, #ffffff);
+    color: var(--hx-color-neutral-700, #334155);
     cursor: pointer;
     padding: 0;
     transition:
-      background-color var(--hx-transition-fast, 0.15s ease),
-      color var(--hx-transition-fast, 0.15s ease),
-      border-color var(--hx-transition-fast, 0.15s ease);
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease);
     flex-shrink: 0;
   }
 
   .nav-btn:hover:not([disabled]) {
-    background: var(--hx-color-neutral-50, #f9fafb);
-    border-color: var(--hx-color-neutral-400, #9ca3af);
+    background: var(--hx-color-neutral-50, #f8fafc);
+    border-color: var(--hx-color-neutral-400, #94a3b8);
   }
 
   .nav-btn:focus-visible {
@@ -65,7 +65,7 @@
   }
 
   .nav-btn[disabled] {
-    opacity: var(--hx-opacity-disabled, 0.4);
+    opacity: var(--hx-opacity-disabled, 0.5);
     cursor: not-allowed;
   }
 
@@ -88,16 +88,16 @@
     border: var(--hx-border-width-thin, 1px) solid transparent;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background: transparent;
-    color: var(--hx-color-neutral-500, #6b7280);
+    color: var(--hx-color-neutral-500, #64748b);
     cursor: pointer;
     padding: 0;
     font-size: var(--hx-font-size-sm, 0.875rem);
-    transition: background-color var(--hx-transition-fast, 0.15s ease);
+    transition: background-color var(--hx-transition-fast, 150ms ease);
     flex-shrink: 0;
   }
 
   .play-pause-btn:hover {
-    background: var(--hx-color-neutral-100, #f3f4f6);
+    background: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   .play-pause-btn:focus-visible {
@@ -160,15 +160,15 @@
     width: var(--hx-carousel-pagination-dot-size, 0.5rem);
     height: var(--hx-carousel-pagination-dot-size, 0.5rem);
     border-radius: var(--hx-border-radius-full, 9999px);
-    background: var(--hx-color-neutral-300, #d1d5db);
+    background: var(--hx-color-neutral-300, #cbd5e1);
     transition:
-      background-color var(--hx-transition-fast, 0.15s ease),
-      transform var(--hx-transition-fast, 0.15s ease);
+      background-color var(--hx-transition-fast, 150ms ease),
+      transform var(--hx-transition-fast, 150ms ease);
   }
 
   .pagination-item[aria-current='true'] .pagination-dot,
   .pagination-item.is-active .pagination-dot {
-    background: var(--hx-color-primary-600, #2563eb);
+    background: var(--hx-color-primary-600, #1d4ed8);
     transform: scale(1.25);
   }
 

package/dist/css/helix-navigation.css

@@ -29,6 +29,20 @@
     display: none;
   }
 
+  /*
+   * Ellipsis ordering when collapsed (FS-014 fix):
+   * The ellipsis <hx-breadcrumb-item> lives in shadow DOM to avoid mutating
+   * the consumer's light DOM. CSS order places it between the first item
+   * (order: 0, default) and the last item (order: 2) in the flex <ol>.
+   */
+  .hx-bc-ellipsis {
+    order: 1;
+  }
+
+  ::slotted([data-bc-last]) {
+    order: 2;
+  }
+
   /* Visually hide the separator slot — used only to read text content.
    * display:none is intentional: the slot contains no interactive or focusable
    * content. If a future change adds focusable elements to this slot, switch to
@@ -36,6 +50,19 @@
   .separator-slot {
     display: none;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /*
+   * hx-breadcrumb is a nav container. Link colors and separators are handled
+   * by hx-breadcrumb-item's own forced-colors block. No additional overrides needed
+   * at the container level.
+   */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 /* ── hx-menu ── */
 :host {
     display: block;
@@ -51,8 +78,7 @@
     border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-menu-shadow,
-      0 4px 6px -1px rgb(0 0 0 / 0.1),
-      0 2px 4px -2px rgb(0 0 0 / 0.1)
+      var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))
     );
     min-width: var(--hx-menu-min-width, 10rem);
     max-height: var(--hx-menu-max-height, 20rem);
@@ -83,8 +109,8 @@
 
   [part='nav'] {
     position: relative;
-    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #111827));
-    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f3f4f6));
+    background-color: var(--hx-nav-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f1f5f9));
     padding: var(--hx-nav-padding, var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem));
   }
 
@@ -98,14 +124,14 @@
     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, #f3f4f6));
+    color: var(--hx-nav-color, var(--hx-color-neutral-100, #f1f5f9));
     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, #374151));
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #334155));
   }
 
   [part='toggle']:focus-visible {
@@ -140,7 +166,7 @@
     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, #f3f4f6));
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #f1f5f9));
     text-decoration: none;
     border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
     border: none;
@@ -157,7 +183,7 @@
   }
 
   .nav__link:hover {
-    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #374151));
+    background-color: var(--hx-nav-link-hover-bg, var(--hx-color-neutral-700, #334155));
     color: var(--hx-nav-link-hover-color, var(--hx-color-neutral-0, #ffffff));
   }
 
@@ -168,7 +194,7 @@
   }
 
   .nav__link--active {
-    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #2563eb));
+    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #1d4ed8));
     color: var(--hx-nav-link-active-color, var(--hx-color-neutral-0, #ffffff));
   }
 
@@ -193,12 +219,11 @@
     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, #1f2937));
+    background-color: var(--hx-nav-submenu-bg, var(--hx-color-neutral-800, #1e293b));
     border-radius: var(--hx-border-radius-md, 0.375rem);
     box-shadow: var(
-      --hx-shadow-md,
-      0 4px 6px -1px rgb(0 0 0 / 0.1),
-      0 2px 4px -2px rgb(0 0 0 / 0.1)
+      --hx-nav-shadow,
+      var(--hx-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))
     );
     z-index: var(--hx-z-index-dropdown, 1000);
   }
@@ -248,7 +273,7 @@
   :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, #d1d5db));
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #cbd5e1));
   }
 
   /* ─── Mobile Responsive ─── */
@@ -334,7 +359,7 @@
 
   :host([disabled]) {
     pointer-events: none;
-    opacity: var(--hx-opacity-disabled, 0.4);
+    opacity: var(--hx-opacity-disabled, 0.5);
   }
 
   /* ─── Trigger Button ─── */
@@ -346,11 +371,11 @@
     border: var(--hx-border-width-thin, 1px) solid transparent;
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background-color: transparent;
-    color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #4b5563));
+    color: var(--hx-overflow-menu-button-color, var(--hx-color-neutral-600, #475569));
     cursor: pointer;
     transition:
-      background-color var(--hx-transition-fast, 0.15s ease),
-      color var(--hx-transition-fast, 0.15s ease);
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease);
     flex-shrink: 0;
     padding: 0;
     line-height: 1;
@@ -366,11 +391,11 @@
   }
 
   .trigger:hover:not([disabled]) {
-    background-color: var(--hx-color-neutral-100, #f3f4f6);
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   .trigger--open {
-    background-color: var(--hx-color-neutral-100, #f3f4f6);
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   /* ─── Size Variants ─── */
@@ -403,8 +428,8 @@
     position: fixed;
     z-index: var(--hx-overflow-menu-panel-z-index, 1000);
     min-width: var(--hx-overflow-menu-panel-min-width, 160px);
-    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #fff));
-    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e5e7eb));
+    background: var(--hx-overflow-menu-panel-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(
       --hx-overflow-menu-panel-border-radius,
       var(--hx-border-radius-md, 0.375rem)
@@ -429,7 +454,7 @@
     border: none;
     text-align: start;
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-900, #111827);
+    color: var(--hx-color-neutral-900, #0f172a);
     cursor: pointer;
     white-space: nowrap;
     box-sizing: border-box;
@@ -438,7 +463,7 @@
   ::slotted([role='menuitem']:hover),
   ::slotted([role='menuitemcheckbox']:hover),
   ::slotted([role='menuitemradio']:hover) {
-    background-color: var(--hx-color-neutral-50, #f9fafb);
+    background-color: var(--hx-color-neutral-50, #f8fafc);
   }
 
   ::slotted([role='menuitem']:focus-visible),
@@ -493,7 +518,7 @@
 /* ── hx-pagination ── */
 :host {
     display: block;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-pagination-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   .pagination-root {
@@ -526,14 +551,14 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: var(--hx-pagination-button-size, 2.25rem);
-    height: var(--hx-pagination-button-size, 2.25rem);
+    min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
+    min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
     padding: 0 var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #d1d5db));
+      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
     background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #0f172a));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;
@@ -546,7 +571,7 @@
   }
 
   .button:hover:not(:disabled) {
-    background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f3f4f6));
+    background: var(--hx-pagination-hover-bg, var(--hx-color-neutral-100, #f1f5f9));
     border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));
   }
 
@@ -577,9 +602,9 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: var(--hx-pagination-button-size, 2.25rem);
-    height: var(--hx-pagination-button-size, 2.25rem);
-    color: var(--hx-pagination-ellipsis-color, var(--hx-color-neutral-500, #6b7280));
+    min-width: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
+    min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
+    color: var(--hx-pagination-ellipsis-color, var(--hx-color-neutral-500, #64748b));
     font-size: var(--hx-font-size-sm, 0.875rem);
     user-select: none;
   }
@@ -600,18 +625,18 @@
     align-items: center;
     gap: var(--hx-space-2, 0.5rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-neutral-500, #6b7280);
+    color: var(--hx-color-neutral-500, #64748b);
     white-space: nowrap;
   }
 
   .page-size-select {
-    height: var(--hx-pagination-button-size, 2.25rem);
+    min-height: var(--hx-pagination-button-size, var(--hx-touch-target-min, 2.75rem));
     padding: 0 var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #d1d5db));
+      var(--hx-pagination-border-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
     background: var(--hx-pagination-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #111827));
+    color: var(--hx-pagination-color, var(--hx-color-neutral-900, #0f172a));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;
@@ -852,6 +877,11 @@
       color: ButtonText;
       border: 1px solid ButtonText;
     }
+
+    .side-nav__toggle:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
   }
 /* ── hx-steps ── */
 :host {
@@ -905,10 +935,22 @@
     --hx-steps-label-font-size: var(--hx-font-size-md, 1rem);
     --hx-steps-description-font-size: var(--hx-font-size-sm, 0.875rem);
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /*
+   * hx-steps is a layout container — forced-colors state is handled
+   * by each hx-step child element's own forced-colors block.
+   */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }
 /* ── hx-tabs ── */
 :host {
     display: block;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-tabs-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   * {
@@ -935,7 +977,7 @@
     flex-wrap: nowrap;
     gap: 0;
     border-bottom: var(--hx-tabs-border-width, 1px) solid
-      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
     overflow-x: auto;
     scrollbar-width: none;
   }
@@ -960,7 +1002,7 @@
     flex-direction: column;
     border-bottom: none;
     border-inline-end: var(--hx-tabs-border-width, 1px) solid
-      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e9ecef));
+      var(--hx-tabs-border-color, var(--hx-color-neutral-200, #e2e8f0));
     overflow-x: visible;
     overflow-y: auto;
     min-width: var(--hx-tabs-vertical-width, 12rem);
@@ -1021,10 +1063,10 @@
 
   .nav {
     background-color: var(--hx-top-nav-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #1e293b));
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
-    font-family: var(--hx-font-family-sans, sans-serif);
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    font-family: var(--hx-top-nav-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* ─── Bar row (always visible) ─── */
@@ -1057,13 +1099,13 @@
     background: transparent;
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
-    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #334155));
     cursor: pointer;
     line-height: 0;
   }
 
   .mobile-toggle:hover {
-    background: var(--hx-color-neutral-100, #f1f3f5);
+    background: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   .mobile-toggle:focus-visible {
@@ -1085,12 +1127,12 @@
     width: 100%;
     padding-block: var(--hx-space-3, 0.75rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
   }
 
   .nav__collapsible--open {
     display: flex;
-    animation: hx-mobile-nav-open var(--hx-duration-fast, 150ms) ease-out;
+    animation: hx-mobile-nav-open var(--hx-duration-fast, 100ms) ease-out;
   }
 
   /* ─── Menu and actions in collapsible (mobile) ─── */
@@ -1107,7 +1149,7 @@
     margin-top: var(--hx-space-3, 0.75rem);
     padding-top: var(--hx-space-3, 0.75rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
   }
 
   /* ─── Desktop breakpoint ─── */
@@ -1238,4 +1280,13 @@
       var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .tree:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
   }

package/dist/css/helix-overlay.css

@@ -103,7 +103,7 @@
 
   .dialog__heading {
     margin: 0;
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-dialog-font-family, var(--hx-font-family-sans));
     font-size: var(--hx-font-size-lg);
     font-weight: var(--hx-font-weight-semibold);
     line-height: var(--hx-line-height-tight);
@@ -129,7 +129,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
-    color: var(--hx-color-neutral-500, #6b7280);
+    color: var(--hx-color-neutral-500, #64748b);
     font-size: var(--hx-font-size-xl, 1.25rem);
     line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */
     transition:
@@ -379,7 +379,7 @@
   .drawer-title {
     margin: 0;
     flex: 1 1 auto;
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-drawer-font-family, var(--hx-font-family-sans));
     font-size: var(--hx-font-size-lg);
     font-weight: var(--hx-font-weight-semibold);
     line-height: var(--hx-line-height-tight);
@@ -514,7 +514,7 @@
     z-index: var(--hx-dropdown-panel-z-index, 1000);
     min-width: var(--hx-dropdown-panel-min-width, 160px);
     background: var(--hx-dropdown-panel-bg, var(--hx-color-neutral-0, #ffffff));
-    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-dropdown-panel-shadow,
@@ -566,11 +566,11 @@
     max-width: var(--hx-popover-max-width, 320px);
     padding: var(--hx-popover-padding, var(--hx-space-3, 0.75rem));
     background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-popover-color, var(--hx-color-neutral-900, #111827));
-    font-family: var(--hx-font-family-sans, sans-serif);
+    color: var(--hx-popover-color, var(--hx-color-neutral-900, #0f172a));
+    font-family: var(--hx-popover-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-popover-font-size, var(--hx-font-size-sm, 0.875rem));
     line-height: var(--hx-line-height-normal, 1.5);
-    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(--hx-popover-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-popover-shadow,
@@ -600,7 +600,7 @@
     width: var(--hx-popover-arrow-size, 10px);
     height: var(--hx-popover-arrow-size, 10px);
     background: var(--hx-popover-bg, var(--hx-color-neutral-0, #ffffff));
-    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    border: 1px solid var(--hx-popover-border-color, var(--hx-color-neutral-200, #e2e8f0));
     transform: rotate(45deg);
     pointer-events: none;
   }
@@ -679,9 +679,9 @@
     z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));
     max-width: var(--hx-tooltip-max-width, 280px);
     padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));
-    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));
-    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f9fafb));
-    font-family: var(--hx-font-family-sans, sans-serif);
+    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f8fafc));
+    font-family: var(--hx-tooltip-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));
     line-height: var(--hx-line-height-normal, 1.5);
     border-radius: var(--hx-tooltip-border-radius, var(--hx-border-radius-sm, 0.25rem));
@@ -706,7 +706,7 @@
     position: absolute;
     width: var(--hx-tooltip-arrow-size, 8px);
     height: var(--hx-tooltip-arrow-size, 8px);
-    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));
+    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
     transform: rotate(45deg);
     pointer-events: none;
   }