@helixui/library 3.1.0 → 3.2.0-next.102

package/dist/css/hx-alert.css

@@ -36,10 +36,10 @@
     gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));
     padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));
     border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid
-      var(--hx-alert-border-color, var(--hx-color-info-200, #bae6fd));
+      var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));
     border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-alert-bg, var(--hx-color-info-50, #f0f9ff));
-    color: var(--hx-alert-color, var(--hx-color-info-800, #0c4a6e));
+    background-color: var(--hx-alert-bg, var(--hx-color-info-50, #eff6fe));
+    color: var(--hx-alert-color, var(--hx-color-info-800, #064172));
     font-family: var(--hx-alert-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -52,7 +52,7 @@
   .alert--accent {
     border-width: 0;
     border-inline-start: var(--hx-alert-accent-width, 4px) solid
-      var(--hx-alert-border-color, var(--hx-color-info-200, #bae6fd));
+      var(--hx-alert-border-color, var(--hx-color-info-200, #bedcfc));
     border-radius: 0;
   }
 
@@ -79,7 +79,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0284c7));
+    color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
   .alert__icon svg {
@@ -139,7 +139,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-alert-color, var(--hx-color-info-800, #0c4a6e));
+    color: var(--hx-alert-color, var(--hx-color-info-800, #064172));
     cursor: pointer;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: 1;
@@ -158,7 +158,7 @@
 
   .alert__close-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-alert-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -179,40 +179,41 @@
 
   :host([variant='info']) .alert,
   :host(:not([variant])) .alert {
-    --hx-alert-bg: var(--hx-color-info-50, #f0f9ff);
-    --hx-alert-border-color: var(--hx-color-info-200, #bae6fd);
-    --hx-alert-color: var(--hx-color-info-800, #0c4a6e);
-    --hx-alert-icon-color: var(--hx-color-info-500, #0284c7);
+    --hx-alert-bg: var(--hx-color-info-50, #eff6fe);
+    --hx-alert-border-color: var(--hx-color-info-200, #bedcfc);
+    --hx-alert-color: var(--hx-color-info-800, #064172);
+    --hx-alert-icon-color: var(--hx-color-info-500, #0c8beb);
   }
 
   /* ─── Variant: success ─── */
 
   :host([variant='success']) .alert {
-    --hx-alert-bg: var(--hx-color-success-50, #f0fdf4);
-    --hx-alert-border-color: var(--hx-color-success-200, #bbf7d0);
-    --hx-alert-color: var(--hx-color-success-800, #14532d);
-    --hx-alert-icon-color: var(--hx-color-success-500, #16a34a);
+    --hx-alert-bg: var(--hx-color-success-50, #eafaec);
+    --hx-alert-border-color: var(--hx-color-success-200, #bae6c2);
+    --hx-alert-color: var(--hx-color-success-800, #0b4d23);
+    --hx-alert-icon-color: var(--hx-color-success-500, #3b9e58);
   }
 
   /* ─── Variant: warning ─── */
 
   :host([variant='warning']) .alert {
-    --hx-alert-bg: var(--hx-color-warning-50, #fffbeb);
-    --hx-alert-border-color: var(--hx-color-warning-200, #fde68a);
-    --hx-alert-color: var(--hx-color-warning-800, #78350f);
-    --hx-alert-icon-color: var(--hx-color-warning-500, #d97706);
+    --hx-alert-bg: var(--hx-color-warning-50, #fff3ea);
+    --hx-alert-border-color: var(--hx-color-warning-200, #facfae);
+    --hx-alert-color: var(--hx-color-warning-800, #603301);
+    --hx-alert-icon-color: var(--hx-color-warning-500, #c2711c);
   }
 
   /* ─── Variant: error ─── */
 
   :host([variant='error']) .alert {
-    --hx-alert-bg: var(--hx-color-error-50, #fef2f2);
-    --hx-alert-border-color: var(--hx-color-error-200, #fecaca);
-    --hx-alert-color: var(--hx-color-error-800, #7f1d1d);
-    --hx-alert-icon-color: var(--hx-color-error-500, #dc2626);
+    --hx-alert-bg: var(--hx-color-error-50, #fff2f0);
+    --hx-alert-border-color: var(--hx-color-error-200, #fccbc4);
+    --hx-alert-color: var(--hx-color-error-800, #7a090a);
+    --hx-alert-icon-color: var(--hx-color-error-500, #e5493e);
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     .alert {

package/dist/css/hx-avatar.css

@@ -21,8 +21,8 @@
     overflow: hidden;
     width: var(--hx-avatar-size);
     height: var(--hx-avatar-size);
-    background-color: var(--hx-avatar-bg, var(--hx-color-primary-100));
-    color: var(--hx-avatar-color, var(--hx-color-primary-700));
+    background-color: var(--hx-avatar-bg, var(--hx-color-primary-100, #dbf0f0));
+    color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));
     border-radius: var(--hx-avatar-border-radius);
     flex-shrink: 0;
   }
@@ -90,7 +90,7 @@
   .avatar__fallback-icon {
     width: 60%;
     height: 60%;
-    color: var(--hx-avatar-color, var(--hx-color-primary-700));
+    color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));
   }
 
   /* ─── Badge Slot ─── */

package/dist/css/hx-badge.css

@@ -9,8 +9,8 @@
     justify-content: center;
     gap: var(--hx-space-1, 0.25rem);
     border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #2563eb));
-    color: var(--hx-badge-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #429797));
+    color: var(--hx-badge-color, var(--hx-color-text-on-primary, #0d1825));
     font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -42,65 +42,65 @@
   /* ─── Style Variants ─── */
 
   .badge--primary {
-    --hx-badge-bg: var(--hx-color-primary-500, #2563eb);
-    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-bg: var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797));
+    --hx-badge-color: var(--hx-badge-primary-color, var(--hx-color-text-on-primary, #0d1825));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-primary-500, #2563eb)
+      var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797))
     );
   }
 
   .badge--secondary {
-    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f1f5f9));
-    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #334155));
+    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #ebeee9));
+    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #313e4b));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f1f5f9))
+      var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #ebeee9))
     );
   }
 
   .badge--success {
-    --hx-badge-bg: var(--hx-color-success-700, #166534);
-    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-bg: var(--hx-badge-success-bg, var(--hx-color-success-700, #146831));
+    --hx-badge-color: var(--hx-badge-success-color, var(--hx-color-neutral-0, #ffffff));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-success-700, #166534)
+      var(--hx-badge-success-bg, var(--hx-color-success-700, #146831))
     );
   }
 
   .badge--warning {
-    --hx-badge-bg: var(--hx-color-warning-500, #d97706);
-    --hx-badge-color: var(--hx-color-neutral-900, #0f172a);
+    --hx-badge-bg: var(--hx-badge-warning-bg, var(--hx-color-warning-500, #c2711c));
+    --hx-badge-color: var(--hx-badge-warning-color, var(--hx-color-neutral-900, #0d1825));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-warning-500, #d97706)
+      var(--hx-badge-warning-bg, var(--hx-color-warning-500, #c2711c))
     );
   }
 
   .badge--error {
-    --hx-badge-bg: var(--hx-color-error-500, #dc2626);
-    --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-badge-bg: var(--hx-badge-error-bg, var(--hx-color-error-500, #e5493e));
+    --hx-badge-color: var(--hx-badge-error-color, var(--hx-color-text-on-error, #0d1825));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-error-500, #dc2626)
+      var(--hx-badge-error-bg, var(--hx-color-error-500, #e5493e))
     );
   }
 
   .badge--neutral {
-    --hx-badge-bg: var(--hx-color-neutral-200, #e2e8f0);
-    --hx-badge-color: var(--hx-color-neutral-700, #334155);
+    --hx-badge-bg: var(--hx-badge-neutral-bg, var(--hx-color-neutral-200, #d6dbd5));
+    --hx-badge-color: var(--hx-badge-neutral-color, var(--hx-color-neutral-700, #313e4b));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-neutral-200, #e2e8f0)
+      var(--hx-badge-neutral-bg, var(--hx-color-neutral-200, #d6dbd5))
     );
   }
 
   .badge--info {
-    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #075985));
+    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0e5997));
     --hx-badge-color: var(--hx-badge-info-color, var(--hx-color-neutral-0, #ffffff));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-badge-info-bg, var(--hx-color-info-700, #075985))
+      var(--hx-badge-info-bg, var(--hx-color-info-700, #0e5997))
     );
   }
 

package/dist/css/hx-banner.css

@@ -40,10 +40,10 @@
     align-items: center;
     gap: var(--hx-banner-gap, var(--hx-space-3, 0.75rem));
     padding: var(--hx-banner-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));
-    background-color: var(--hx-banner-bg, var(--hx-color-info-50, #f0f9ff));
-    color: var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e));
+    background-color: var(--hx-banner-bg, var(--hx-color-info-50, #eff6fe));
+    color: var(--hx-banner-color, var(--hx-color-info-800, #064172));
     border-bottom: var(--hx-banner-border-width, var(--hx-border-width-thin, 1px)) solid
-      var(--hx-banner-border-color, var(--hx-color-info-200, #bae6fd));
+      var(--hx-banner-border-color, var(--hx-color-info-200, #bedcfc));
     font-family: var(--hx-banner-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-font-size-sm, 0.875rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -56,7 +56,7 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0284c7));
+    color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
   .banner__icon svg {
@@ -78,7 +78,7 @@
     display: inline-flex;
     align-items: center;
     flex-shrink: 0;
-    color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e)));
+    color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #064172)));
     font-weight: var(--hx-font-weight-semibold, 600);
     text-decoration: underline;
     text-underline-offset: 2px;
@@ -96,7 +96,7 @@
 
   .banner__action:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-banner-action-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
@@ -118,7 +118,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-banner-color, var(--hx-color-info-800, #0c4a6e));
+    color: var(--hx-banner-color, var(--hx-color-info-800, #064172));
     cursor: pointer;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: 1;
@@ -137,7 +137,7 @@
 
   .banner__close-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa));
+      var(--hx-banner-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -152,37 +152,37 @@
 
   :host([variant='info']) .banner,
   :host(:not([variant])) .banner {
-    --hx-banner-bg: var(--hx-color-info-50, #f0f9ff);
-    --hx-banner-border-color: var(--hx-color-info-200, #bae6fd);
-    --hx-banner-color: var(--hx-color-info-800, #0c4a6e);
-    --hx-banner-icon-color: var(--hx-color-info-500, #0284c7);
+    --hx-banner-bg: var(--hx-color-info-50, #eff6fe);
+    --hx-banner-border-color: var(--hx-color-info-200, #bedcfc);
+    --hx-banner-color: var(--hx-color-info-800, #064172);
+    --hx-banner-icon-color: var(--hx-color-info-500, #0c8beb);
   }
 
   /* ─── Variant: success ─── */
 
   :host([variant='success']) .banner {
-    --hx-banner-bg: var(--hx-color-success-50, #f0fdf4);
-    --hx-banner-border-color: var(--hx-color-success-200, #bbf7d0);
-    --hx-banner-color: var(--hx-color-success-800, #14532d);
-    --hx-banner-icon-color: var(--hx-color-success-500, #16a34a);
+    --hx-banner-bg: var(--hx-color-success-50, #eafaec);
+    --hx-banner-border-color: var(--hx-color-success-200, #bae6c2);
+    --hx-banner-color: var(--hx-color-success-800, #0b4d23);
+    --hx-banner-icon-color: var(--hx-color-success-500, #3b9e58);
   }
 
   /* ─── Variant: warning ─── */
 
   :host([variant='warning']) .banner {
-    --hx-banner-bg: var(--hx-color-warning-50, #fffbeb);
-    --hx-banner-border-color: var(--hx-color-warning-200, #fde68a);
-    --hx-banner-color: var(--hx-color-warning-800, #78350f);
-    --hx-banner-icon-color: var(--hx-color-warning-500, #d97706);
+    --hx-banner-bg: var(--hx-color-warning-50, #fff3ea);
+    --hx-banner-border-color: var(--hx-color-warning-200, #facfae);
+    --hx-banner-color: var(--hx-color-warning-800, #603301);
+    --hx-banner-icon-color: var(--hx-color-warning-500, #c2711c);
   }
 
   /* ─── Variant: error ─── */
 
   :host([variant='error']) .banner {
-    --hx-banner-bg: var(--hx-color-error-50, #fef2f2);
-    --hx-banner-border-color: var(--hx-color-error-200, #fecaca);
-    --hx-banner-color: var(--hx-color-error-800, #7f1d1d);
-    --hx-banner-icon-color: var(--hx-color-error-500, #dc2626);
+    --hx-banner-bg: var(--hx-color-error-50, #fff2f0);
+    --hx-banner-border-color: var(--hx-color-error-200, #fccbc4);
+    --hx-banner-color: var(--hx-color-error-800, #7a090a);
+    --hx-banner-icon-color: var(--hx-color-error-500, #e5493e);
   }
 
   /* ─── Position: fixed ─── */
@@ -203,6 +203,7 @@
   }
 
   /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */
 
   @media (forced-colors: active) {
     .banner {

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

@@ -22,33 +22,43 @@
   /* ─── No Double Borders: Horizontal ─── */
 
   .group--horizontal ::slotted(*:not(:first-child)) {
-    margin-inline-start: calc(-1 * var(--hx-border-width-thin, 1px));
+    margin-inline-start: var(
+      --hx-button-group-divider-offset,
+      calc(-1 * var(--hx-border-width-thin, 1px))
+    );
   }
 
   /* ─── No Double Borders: Vertical ─── */
 
   .group--vertical ::slotted(*:not(:first-child)) {
-    margin-top: calc(-1 * var(--hx-border-width-thin, 1px));
+    margin-top: var(--hx-button-group-divider-offset, calc(-1 * var(--hx-border-width-thin, 1px)));
   }
 
   /* ─── Border Radius: Horizontal — Single child keeps all corners ─── */
 
   .group--horizontal ::slotted(:only-child) {
-    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);
+    --hx-button-border-radius: var(
+      --hx-button-group-border-radius,
+      var(--hx-border-radius-md, 0.375rem)
+    );
   }
 
   /* ─── Border Radius: Horizontal — First child keeps left corners ─── */
 
   .group--horizontal ::slotted(:first-child:not(:only-child)) {
-    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem) 0 0
-      var(--hx-border-radius-md, 0.375rem);
+    --hx-button-border-radius: var(
+        --hx-button-group-border-radius,
+        var(--hx-border-radius-md, 0.375rem)
+      )
+      0 0 var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Border Radius: Horizontal — Last child keeps right corners ─── */
 
   .group--horizontal ::slotted(:last-child:not(:only-child)) {
-    --hx-button-border-radius: 0 var(--hx-border-radius-md, 0.375rem)
-      var(--hx-border-radius-md, 0.375rem) 0;
+    --hx-button-border-radius: 0
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0;
   }
 
   /* ─── Border Radius: Horizontal — Middle children have no radius ─── */
@@ -60,21 +70,28 @@
   /* ─── Border Radius: Vertical — Single child keeps all corners ─── */
 
   .group--vertical ::slotted(:only-child) {
-    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem);
+    --hx-button-border-radius: var(
+      --hx-button-group-border-radius,
+      var(--hx-border-radius-md, 0.375rem)
+    );
   }
 
   /* ─── Border Radius: Vertical — First child keeps top corners ─── */
 
   .group--vertical ::slotted(:first-child:not(:only-child)) {
-    --hx-button-border-radius: var(--hx-border-radius-md, 0.375rem)
-      var(--hx-border-radius-md, 0.375rem) 0 0;
+    --hx-button-border-radius: var(
+        --hx-button-group-border-radius,
+        var(--hx-border-radius-md, 0.375rem)
+      )
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem)) 0 0;
   }
 
   /* ─── Border Radius: Vertical — Last child keeps bottom corners ─── */
 
   .group--vertical ::slotted(:last-child:not(:only-child)) {
-    --hx-button-border-radius: 0 0 var(--hx-border-radius-md, 0.375rem)
-      var(--hx-border-radius-md, 0.375rem);
+    --hx-button-border-radius: 0 0
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem))
+      var(--hx-button-group-border-radius, var(--hx-border-radius-md, 0.375rem));
   }
 
   /* ─── Border Radius: Vertical — Middle children have no radius ─── */
@@ -86,7 +103,7 @@
   /* ─── Z-index: Raise focused child above siblings to show full focus ring ─── */
 
   .group ::slotted(:focus-within) {
-    z-index: 1;
+    z-index: var(--hx-button-group-focus-z-index, 1);
     position: relative;
   }
 
@@ -99,6 +116,6 @@
      * outline from hx-button's own forced-colors block is fully visible.
      */
     .group ::slotted(:focus-within) {
-      z-index: 2;
+      z-index: var(--hx-button-group-focus-z-index-hc, 2);
     }
   }