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

package/dist/css/hx-icon-button.css

@@ -5,23 +5,23 @@
 
   :host([disabled]) {
     pointer-events: none;
-    opacity: var(--hx-opacity-disabled);
+    opacity: var(--hx-opacity-disabled, 0.5);
   }
 
   .button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);
-    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));
-    background-color: var(--hx-icon-button-bg);
-    color: var(--hx-icon-button-color, var(--hx-color-primary-500));
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-icon-button-border-color, transparent);
+    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-icon-button-bg, transparent);
+    color: var(--hx-icon-button-color, var(--hx-color-primary-500, #429797));
     cursor: pointer;
     transition:
-      background-color var(--hx-transition-fast),
-      color var(--hx-transition-fast),
-      border-color var(--hx-transition-fast),
-      box-shadow var(--hx-transition-fast);
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease),
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
     text-decoration: none;
     user-select: none;
     -webkit-user-select: none;
@@ -29,9 +29,12 @@
   }
 
   .button:focus-visible {
-    outline: var(--hx-focus-ring-width) solid
-      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));
-    outline-offset: var(--hx-focus-ring-offset);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-icon-button-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .button:active {
@@ -45,82 +48,90 @@
      the 2.75rem (44px) threshold, preserving the visual icon size via font-size. */
 
   .button--sm {
-    padding: var(--hx-space-1);
-    width: var(--hx-icon-button-size, var(--hx-size-8));
-    height: var(--hx-icon-button-size, var(--hx-size-8));
+    padding: var(--hx-space-1, 0.25rem);
+    width: var(--hx-icon-button-size, var(--hx-size-8, 2rem));
+    height: var(--hx-icon-button-size, var(--hx-size-8, 2rem));
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    font-size: var(--hx-font-size-sm);
+    font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
   .button--md {
-    padding: var(--hx-space-2);
-    width: var(--hx-icon-button-size, var(--hx-size-10));
-    height: var(--hx-icon-button-size, var(--hx-size-10));
+    padding: var(--hx-space-2, 0.5rem);
+    width: var(--hx-icon-button-size, var(--hx-size-10, 2.5rem));
+    height: var(--hx-icon-button-size, var(--hx-size-10, 2.5rem));
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    font-size: var(--hx-font-size-md);
+    font-size: var(--hx-font-size-md, 1rem);
   }
 
   .button--lg {
-    padding: var(--hx-space-3);
-    width: var(--hx-icon-button-size, var(--hx-size-12));
-    height: var(--hx-icon-button-size, var(--hx-size-12));
+    padding: var(--hx-space-3, 0.75rem);
+    width: var(--hx-icon-button-size, var(--hx-size-12, 3rem));
+    height: var(--hx-icon-button-size, var(--hx-size-12, 3rem));
     min-width: var(--hx-touch-target-min, 2.75rem);
     min-height: var(--hx-touch-target-min, 2.75rem);
-    font-size: var(--hx-font-size-lg);
+    font-size: var(--hx-font-size-lg, 1.125rem);
   }
 
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-icon-button-bg: var(--hx-color-primary-500);
-    --hx-icon-button-color: var(--hx-color-text-on-primary);
+    --hx-icon-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-icon-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-icon-button-border-color: transparent;
   }
 
+  /* on-primary tokens are tuned for primary-500. primary-600 + on-primary
+     drops icon contrast to 3.07:1 — fails the 4.5:1 floor for meaningful
+     icons. Pin fg at neutral-0 (5.82:1 on primary-600). Mirrors hx-button. */
   .button--primary:hover {
-    --hx-icon-button-bg: var(--hx-color-primary-600);
+    --hx-icon-button-bg: var(--hx-color-primary-600, #0f7078);
+    --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   .button--secondary {
     --hx-icon-button-bg: transparent;
-    --hx-icon-button-color: var(--hx-color-primary-500);
-    --hx-icon-button-border-color: var(--hx-color-primary-500);
+    --hx-icon-button-color: var(--hx-color-primary-500, #429797);
+    --hx-icon-button-border-color: var(--hx-color-primary-500, #429797);
   }
 
   .button--secondary:hover {
-    --hx-icon-button-bg: var(--hx-color-primary-50);
+    --hx-icon-button-bg: var(--hx-color-primary-50, #ebf8f8);
   }
 
   .button--tertiary {
     --hx-icon-button-bg: transparent;
-    --hx-icon-button-color: var(--hx-color-text-strong);
-    --hx-icon-button-border-color: var(--hx-color-border-strong);
+    --hx-icon-button-color: var(--hx-color-text-strong, #202b39);
+    --hx-icon-button-border-color: var(--hx-color-border-strong, #8e9c98);
   }
 
   .button--tertiary:hover {
-    --hx-icon-button-bg: var(--hx-color-surface-sunken);
+    --hx-icon-button-bg: var(--hx-color-surface-sunken, #ebeee9);
   }
 
   .button--danger {
-    --hx-icon-button-bg: var(--hx-color-error-500);
-    --hx-icon-button-color: var(--hx-color-text-on-error);
+    --hx-icon-button-bg: var(--hx-color-error-500, #e5493e);
+    --hx-icon-button-color: var(--hx-color-text-on-error, #ffffff);
     --hx-icon-button-border-color: transparent;
   }
 
+  /* on-error tokens are tuned for error-500. error-600 + on-error drops
+     icon contrast to 2.25:1 — fails AA. Pin fg at neutral-0
+     (6.47:1 on error-600). Mirrors hx-button danger:hover. */
   .button--danger:hover {
-    --hx-icon-button-bg: var(--hx-color-error-600);
+    --hx-icon-button-bg: var(--hx-color-error-600, #c92a2a);
+    --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);
   }
 
   .button--ghost {
     --hx-icon-button-bg: transparent;
-    --hx-icon-button-color: var(--hx-color-primary-500);
+    --hx-icon-button-color: var(--hx-color-primary-500, #429797);
     --hx-icon-button-border-color: transparent;
   }
 
   .button--ghost:hover {
-    --hx-icon-button-bg: var(--hx-color-surface-raised);
+    --hx-icon-button-bg: var(--hx-color-surface-raised, #f5f8f3);
   }
 
   /* ─── Icon Container ─── */

package/dist/css/hx-image.css

@@ -18,8 +18,8 @@
     align-items: center;
     justify-content: center;
     min-height: var(--hx-image-fallback-min-height, 3rem);
-    background-color: var(--hx-color-neutral-100, #f1f5f9);
-    color: var(--hx-color-neutral-500, #64748b);
+    background-color: var(--hx-image-fallback-bg, var(--hx-color-neutral-100, #ebeee9));
+    color: var(--hx-image-fallback-color, var(--hx-color-neutral-500, #66787b));
   }
 
   .image__img {
@@ -32,7 +32,7 @@
   .image__caption {
     display: none;
     padding: var(--hx-image-caption-padding, 0.5rem 0 0);
-    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #475569));
+    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #4a5362));
     font-size: var(--hx-image-caption-font-size, 0.875rem);
   }
 

package/dist/css/hx-link.css

@@ -13,7 +13,7 @@
     display: inline-flex;
     align-items: center;
     gap: var(--hx-space-1, 0.25rem);
-    color: var(--hx-link-color, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-link-color, var(--hx-color-primary-600, #0f7078));
     font-family: var(--hx-link-font-family, var(--hx-font-family-sans, inherit));
     font-size: inherit;
     line-height: inherit;
@@ -27,19 +27,19 @@
   }
 
   .link:hover {
-    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #0f6363));
     text-decoration: var(--hx-link-text-decoration-hover, underline);
   }
 
   .link:active {
-    color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e3a8a));
+    color: var(--hx-link-color-active, var(--hx-color-primary-800, #07494a));
   }
 
   .link:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-link-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #6ab1b1))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
@@ -48,29 +48,29 @@
   /* --- Variant: subtle --- */
 
   .link--subtle {
-    color: var(--hx-link-color-subtle, var(--hx-color-text-secondary, #475569));
+    color: var(--hx-link-color-subtle, var(--hx-color-text-secondary, #313e4b));
     text-decoration: none;
   }
 
   .link--subtle:hover {
-    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #0f6363));
     text-decoration: underline;
   }
 
   /* --- Variant: danger --- */
 
   .link--danger {
-    color: var(--hx-link-color-danger, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-link-color-danger, var(--hx-color-error-text, #c92a2a));
   }
 
   .link--danger:hover {
-    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #991b1b));
+    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #a21312));
   }
 
   /* --- Disabled --- */
 
   .link--disabled {
-    color: var(--hx-link-color-disabled, var(--hx-color-text-disabled, #94a3b8));
+    color: var(--hx-link-color-disabled, var(--hx-color-text-disabled, #8e9c98));
     text-decoration: none;
     cursor: not-allowed;
   }

package/dist/css/hx-list.css

@@ -44,7 +44,7 @@
 
   :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));
+      var(--hx-list-divider-color, var(--hx-color-neutral-200, #d6dbd5));
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */

package/dist/css/hx-menu.css

@@ -9,7 +9,7 @@
     padding: var(--hx-space-1, 0.25rem);
     background: var(--hx-menu-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-menu-border-color, var(--hx-color-border-default, #e2e8f0));
+      var(--hx-menu-border-color, var(--hx-color-border-default, #d6dbd5));
     border-radius: var(--hx-menu-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-menu-shadow,

package/dist/css/hx-meter.css

@@ -14,14 +14,15 @@
   }
 
   .meter:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #60a5fa);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .meter__label {
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #313e4b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -29,7 +30,7 @@
     position: relative;
     width: 100%;
     height: var(--hx-meter-track-height, var(--hx-space-2, 0.5rem));
-    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e2e8f0));
+    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #d6dbd5));
     border-radius: var(--hx-meter-track-radius, var(--hx-border-radius-full, 9999px));
     overflow: hidden;
   }
@@ -58,21 +59,21 @@
   /* ─── Default (no thresholds configured) ─── */
 
   :host {
-    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #2563eb));
+    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #429797));
   }
 
   /* ─── Semantic state colors ─── */
 
   :host([data-state='optimum']) {
-    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #16a34a));
+    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #3b9e58));
   }
 
   :host([data-state='warning']) {
-    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #d97706));
+    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #c2711c));
   }
 
   :host([data-state='danger']) {
-    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-error-500, #dc2626));
+    --_indicator-color: var(--hx-meter-color-danger, var(--hx-color-error-500, #e5493e));
   }
 
   /* ─── State Label (WCAG 1.4.1) ─── */
@@ -88,15 +89,15 @@
   }
 
   .meter__state-label[data-state='optimum'] {
-    color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #166534));
+    color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #146831));
   }
 
   .meter__state-label[data-state='warning'] {
-    color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #92400e));
+    color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #804605));
   }
 
   .meter__state-label[data-state='danger'] {
-    color: var(--hx-meter-color-danger, var(--hx-color-error-700, #991b1b));
+    color: var(--hx-meter-color-danger, var(--hx-color-error-700, #a21312));
   }
 
   /* ─── Native meter hidden (we use custom rendering) ─── */

package/dist/css/hx-nav.css

@@ -13,8 +13,8 @@
 
   [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));
   }
 
@@ -28,19 +28,22 @@
     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, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -70,7 +73,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, #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;
@@ -87,18 +90,21 @@
   }
 
   .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, var(--hx-color-primary-500, #429797))
+      );
     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));
   }
 
@@ -123,7 +129,7 @@
     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,
@@ -177,7 +183,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, #cbd5e1));
+    color: var(--hx-nav-link-color, var(--hx-color-neutral-300, #b6bfb9));
   }
 
   /* ─── Mobile Responsive ─── */

package/dist/css/hx-number-input.css

@@ -36,7 +36,7 @@
   }
 
   .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);
   }
 
@@ -72,18 +72,18 @@
   /* ─── 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
       );
@@ -229,7 +229,7 @@
 
   .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);
   }
 

package/dist/css/hx-overflow-menu.css

@@ -18,7 +18,7 @@
     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-text-secondary, #475569));
+    color: var(--hx-overflow-menu-button-color, var(--hx-color-text-secondary, #313e4b));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms ease),
@@ -32,17 +32,23 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-overflow-menu-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
       );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .trigger:hover:not([disabled]) {
-    background-color: var(--hx-color-surface-sunken, #f1f5f9);
+    background-color: var(
+      --hx-overflow-menu-trigger-hover-bg,
+      var(--hx-color-surface-sunken, #ebeee9)
+    );
   }
 
   .trigger--open {
-    background-color: var(--hx-color-surface-sunken, #f1f5f9);
+    background-color: var(
+      --hx-overflow-menu-trigger-open-bg,
+      var(--hx-color-surface-sunken, #ebeee9)
+    );
   }
 
   /* ─── Size Variants ─── */
@@ -76,7 +82,7 @@
     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-surface-default, #ffffff));
-    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-border-default, #e2e8f0));
+    border: var(--hx-overflow-menu-panel-border, 1px solid var(--hx-color-border-default, #d6dbd5));
     border-radius: var(
       --hx-overflow-menu-panel-border-radius,
       var(--hx-border-radius-md, 0.375rem)
@@ -101,7 +107,7 @@
     border: none;
     text-align: start;
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-text-primary, #0f172a);
+    color: var(--hx-overflow-menu-item-color, var(--hx-color-text-primary, #0d1825));
     cursor: pointer;
     white-space: nowrap;
     box-sizing: border-box;
@@ -110,7 +116,10 @@
   ::slotted([role='menuitem']:hover),
   ::slotted([role='menuitemcheckbox']:hover),
   ::slotted([role='menuitemradio']:hover) {
-    background-color: var(--hx-color-surface-raised, #f8fafc);
+    background-color: var(
+      --hx-overflow-menu-item-hover-bg,
+      var(--hx-color-surface-raised, #f5f8f3)
+    );
   }
 
   ::slotted([role='menuitem']:focus-visible),
@@ -119,7 +128,7 @@
     outline: var(--hx-focus-ring-width, 2px) solid
       var(
         --hx-overflow-menu-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
       );
     outline-offset: 0;
   }

package/dist/css/hx-pagination.css

@@ -38,10 +38,10 @@
     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-border-strong, #94a3b8));
+      var(--hx-pagination-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
     background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));
-    color: var(--hx-pagination-color, var(--hx-color-text-primary, #0f172a));
+    color: var(--hx-pagination-color, var(--hx-color-text-primary, #0d1825));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;
@@ -54,21 +54,24 @@
   }
 
   .button:hover:not(:disabled) {
-    background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #f1f5f9));
-    border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #2563eb));
+    background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
+    border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #429797));
   }
 
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(
+        --hx-pagination-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   .button[aria-current='page'] {
-    background: var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb));
+    background: var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797));
     border-color: var(
       --hx-pagination-active-border-color,
-      var(--hx-pagination-active-bg, var(--hx-color-primary-500, #2563eb))
+      var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797))
     );
     color: var(--hx-pagination-active-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);
@@ -87,7 +90,7 @@
     justify-content: center;
     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-text-muted, #64748b));
+    color: var(--hx-pagination-ellipsis-color, var(--hx-color-text-muted, #4a5362));
     font-size: var(--hx-font-size-sm, 0.875rem);
     user-select: none;
   }
@@ -108,7 +111,7 @@
     align-items: center;
     gap: var(--hx-space-2, 0.5rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
-    color: var(--hx-color-text-muted, #64748b);
+    color: var(--hx-pagination-page-size-label-color, var(--hx-color-text-muted, #4a5362));
     white-space: nowrap;
   }
 
@@ -116,10 +119,10 @@
     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-border-strong, #94a3b8));
+      var(--hx-pagination-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-pagination-border-radius, var(--hx-border-radius-md, 0.375rem));
     background: var(--hx-pagination-bg, var(--hx-color-surface-default, #ffffff));
-    color: var(--hx-pagination-color, var(--hx-color-text-primary, #0f172a));
+    color: var(--hx-pagination-color, var(--hx-color-text-primary, #0d1825));
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-family: inherit;
     cursor: pointer;
@@ -127,7 +130,10 @@
 
   .page-size-select:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-pagination-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(
+        --hx-pagination-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }