@helixui/library 2.1.2 → 3.0.0-next.65

package/dist/css/hx-file-upload.css

@@ -16,7 +16,7 @@
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-2, 0.5rem);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-file-upload-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* ─── Label ─── */
@@ -27,7 +27,7 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-color-neutral-700, #343a40);
+    color: var(--hx-color-neutral-700, #334155);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -42,9 +42,9 @@
     min-height: var(--hx-space-32, 8rem);
     padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);
     border: var(--hx-border-width-thin, 1px) dashed
-      var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #ced4da));
+      var(--hx-file-upload-dropzone-border-color, var(--hx-color-neutral-300, #cbd5e1));
     border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));
-    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-neutral-50, #f8f9fa));
+    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-neutral-50, #f8fafc));
     cursor: pointer;
     text-align: center;
     transition:
@@ -52,7 +52,7 @@
       background-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
     user-select: none;
-    color: var(--hx-color-neutral-600, #495057);
+    color: var(--hx-color-neutral-600, #475569);
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
@@ -83,7 +83,7 @@
   }
 
   .dropzone--error {
-    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #dc2626));
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -128,7 +128,7 @@
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
-    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e9ecef);
+    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);
     border-radius: var(--hx-border-radius-md, 0.375rem);
     background-color: var(--hx-color-neutral-0, #ffffff);
   }
@@ -143,7 +143,7 @@
     flex: 1;
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-color-neutral-800, #212529);
+    color: var(--hx-color-neutral-800, #1e293b);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -152,7 +152,7 @@
   .file-item__size {
     flex-shrink: 0;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
   }
 
   .file-item__remove {
@@ -160,11 +160,13 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
     padding: var(--hx-space-1, 0.25rem);
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-color-neutral-500, #6c757d);
+    color: var(--hx-color-neutral-500, #64748b);
     cursor: pointer;
     line-height: 1;
     transition:
@@ -174,7 +176,7 @@
 
   .file-item__remove:hover {
     color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
-    background-color: color-mix(in srgb, var(--hx-color-error-500, #dc3545) 8%, transparent);
+    background-color: color-mix(in srgb, var(--hx-color-error-500, #dc2626) 8%, transparent);
   }
 
   .file-item__remove:focus-visible {
@@ -197,7 +199,7 @@
   .progress-track {
     width: 100%;
     height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));
-    background-color: var(--hx-color-neutral-200, #e9ecef);
+    background-color: var(--hx-color-neutral-200, #e2e8f0);
     border-radius: var(--hx-border-radius-full, 9999px);
     overflow: hidden;
   }
@@ -239,3 +241,49 @@
     color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #b91c1c));
     line-height: var(--hx-line-height-normal, 1.5);
   }
+
+  /* ─── Forced colors (Windows High Contrast / Forced Colors Mode) ─── */
+
+  @media (forced-colors: active) {
+    .dropzone {
+      border: 2px dashed ButtonText;
+      background-color: Canvas;
+      color: ButtonText;
+    }
+
+    .dropzone--drag-over {
+      border: 2px solid Highlight;
+      outline: none;
+      background-color: Canvas;
+    }
+
+    .dropzone--error {
+      border: 2px solid LinkText;
+    }
+
+    .dropzone:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .progress-bar {
+      background: Highlight;
+      forced-color-adjust: none;
+    }
+
+    .file-item__remove:hover {
+      outline: 2px solid Highlight;
+      background-color: transparent;
+      color: ButtonText;
+    }
+
+    .file-item__remove:focus-visible {
+      outline: 2px solid Highlight;
+    }
+
+    :host([disabled]) .dropzone {
+      border-color: GrayText;
+      color: GrayText;
+      opacity: 1;
+    }
+  }

package/dist/css/hx-format-date.css

@@ -8,3 +8,14 @@
     font: inherit;
     color: inherit;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-format-date renders text-only content using color: inherit from its parent.
+     forced-color-adjust: auto (default) is sufficient — the browser maps
+     inherited text color to CanvasText automatically in forced-colors mode. */
+  @media (forced-colors: active) {
+    :host {
+      forced-color-adjust: auto;
+    }
+  }

package/dist/css/hx-grid.css

@@ -12,3 +12,13 @@ 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;
+    }
+  }

package/dist/css/hx-help-text.css

@@ -11,7 +11,7 @@
     font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));
     line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));
-    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #6b7280));
+    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #64748b));
     margin: 0;
   }
 
@@ -28,23 +28,43 @@
   /* ─── Variant: default ─── */
 
   .help-text--default {
-    --hx-help-text-color: var(--hx-color-neutral-500, #6b7280);
+    --hx-help-text-color: var(--hx-color-neutral-500, #64748b);
   }
 
   /* ─── Variant: error ─── */
 
   .help-text--error {
-    --hx-help-text-color: var(--hx-color-error-600, #dc2626);
+    --hx-help-text-color: var(--hx-color-error-600, #b91c1c);
   }
 
   /* ─── Variant: warning ─── */
 
   .help-text--warning {
-    --hx-help-text-color: var(--hx-color-warning-700, #b45309);
+    --hx-help-text-color: var(--hx-color-warning-700, #92400e);
   }
 
   /* ─── Variant: success ─── */
 
   .help-text--success {
-    --hx-help-text-color: var(--hx-color-success-700, #15803d);
+    --hx-help-text-color: var(--hx-color-success-700, #166534);
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .help-text {
+      color: GrayText;
+    }
+
+    .help-text--error {
+      color: LinkText;
+    }
+
+    .help-text--warning {
+      color: CanvasText;
+    }
+
+    .help-text--success {
+      color: CanvasText;
+    }
   }

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

@@ -150,3 +150,30 @@
       transition: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .button {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      color: ButtonText;
+      border: 2px solid ButtonText;
+    }
+
+    .button:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .button[disabled] {
+      background-color: ButtonFace;
+      color: GrayText;
+      border-color: GrayText;
+      opacity: 1;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+  }

package/dist/css/hx-icon.css

@@ -71,3 +71,11 @@
     fill: currentColor;
     display: block;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    :host {
+      color: CanvasText;
+    }
+  }

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, #f3f4f6);
-    color: var(--hx-color-neutral-500, #6b7280);
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    color: var(--hx-color-neutral-500, #64748b);
   }
 
   .image__img {
@@ -32,10 +32,18 @@
   .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, #4b5563));
+    color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #475569));
     font-size: var(--hx-image-caption-font-size, 0.875rem);
   }
 
   .image__caption--visible {
     display: block;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .image__container--error {
+      border: 1px solid GrayText;
+    }
+  }

package/dist/css/hx-link.css

@@ -27,12 +27,12 @@
   }
 
   .link:hover {
-    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));
     text-decoration: var(--hx-link-text-decoration-hover, underline);
   }
 
   .link:active {
-    color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e40af));
+    color: var(--hx-link-color-active, var(--hx-color-primary-800, #1e3a8a));
   }
 
   .link:focus-visible {
@@ -42,7 +42,7 @@
         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.125rem);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
 
   /* --- Variant: subtle --- */
@@ -53,7 +53,7 @@
   }
 
   .link--subtle:hover {
-    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));
+    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1e40af));
     text-decoration: underline;
   }
 
@@ -64,7 +64,7 @@
   }
 
   .link--danger:hover {
-    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #b91c1c));
+    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #991b1b));
   }
 
   /* --- Disabled --- */
@@ -72,7 +72,7 @@
   .link--disabled {
     color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));
     text-decoration: none;
-    pointer-events: none;
+    cursor: not-allowed;
   }
 
   /* --- External link icon --- */
@@ -90,6 +90,24 @@
     }
   }
 
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .link {
+      forced-color-adjust: none;
+      color: LinkText;
+    }
+
+    .link:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .link--disabled {
+      color: GrayText;
+    }
+  }
+
   /* --- Visually hidden (sr-only) --- */
 
   .sr-only {

package/dist/css/hx-list.css

@@ -46,3 +46,13 @@
     border-bottom: var(--hx-border-width-thin, 1px) solid
       var(--hx-list-divider-color, var(--hx-color-neutral-200, #e2e8f0));
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    /* Divider borders are already using a border property, which forced-colors respects.
+       Ensure the system color is used for divider borders. */
+    :host([divided]) .list > ::slotted(hx-list-item:not(:last-child)) {
+      border-bottom-color: CanvasText;
+    }
+  }

package/dist/css/hx-menu.css

@@ -13,11 +13,19 @@
     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);
     overflow-y: auto;
     outline: none;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .menu {
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+    }
+  }

package/dist/css/hx-meter.css

@@ -9,12 +9,19 @@
     flex-direction: column;
     gap: var(--hx-space-2, 0.5rem);
     width: 100%;
+    outline: none;
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+  }
+
+  .meter:focus-visible {
+    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #60a5fa);
+    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, #374151));
+    color: var(--hx-meter-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -22,7 +29,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, #e5e7eb));
+    background-color: var(--hx-meter-track-color, var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(--hx-meter-track-radius, var(--hx-border-radius-full, 9999px));
     overflow: hidden;
   }
@@ -51,17 +58,17 @@
   /* ─── Default (no thresholds configured) ─── */
 
   :host {
-    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #3b82f6));
+    --_indicator-color: var(--hx-meter-indicator-color, var(--hx-color-primary-500, #2563eb));
   }
 
   /* ─── Semantic state colors ─── */
 
   :host([data-state='optimum']) {
-    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #22c55e));
+    --_indicator-color: var(--hx-meter-color-optimum, var(--hx-color-success-500, #16a34a));
   }
 
   :host([data-state='warning']) {
-    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #f59e0b));
+    --_indicator-color: var(--hx-meter-color-warning, var(--hx-color-warning-500, #d97706));
   }
 
   :host([data-state='danger']) {
@@ -77,27 +84,21 @@
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-medium, 500);
     line-height: var(--hx-line-height-tight, 1.25);
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-meter-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   .meter__state-label[data-state='optimum'] {
-    color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #15803d));
+    color: var(--hx-meter-color-optimum, var(--hx-color-success-700, #166534));
   }
 
   .meter__state-label[data-state='warning'] {
-    color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #b45309));
+    color: var(--hx-meter-color-warning, var(--hx-color-warning-700, #92400e));
   }
 
   .meter__state-label[data-state='danger'] {
     color: var(--hx-meter-color-danger, var(--hx-color-error-700, #991b1b));
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .meter__indicator {
-      transition: none;
-    }
-  }
-
   /* ─── Native meter hidden (we use custom rendering) ─── */
 
   .meter__native {
@@ -111,3 +112,16 @@
     white-space: nowrap;
     border: 0;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .meter__track {
+      border: 1px solid CanvasText;
+    }
+
+    .meter__indicator {
+      forced-color-adjust: none;
+      background-color: Highlight;
+    }
+  }

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, #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));
   }
 
@@ -28,14 +28,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 {
@@ -70,7 +70,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;
@@ -87,7 +87,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));
   }
 
@@ -98,7 +98,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));
   }
 
@@ -123,12 +123,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);
   }
@@ -178,7 +177,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 ─── */
@@ -240,3 +239,19 @@
       animation: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    [part='nav'] {
+      border: 1px solid CanvasText;
+    }
+
+    .nav__link--active {
+      border: 1px solid Highlight;
+    }
+
+    .nav__submenu {
+      border: 1px solid CanvasText;
+    }
+  }