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

package/dist/css/helix-core.css

@@ -78,7 +78,7 @@
   /* ─── Initials ─── */
 
   .avatar__initials {
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-avatar-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-avatar-font-size);
     font-weight: var(--hx-font-weight-semibold, 600);
     line-height: 1;
@@ -187,29 +187,29 @@
   }
 
   .badge--secondary {
-    --hx-badge-bg: var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6));
-    --hx-badge-color: var(--hx-badge-secondary-color, var(--hx-color-neutral-700, #374151));
+    --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-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f3f4f6))
+      var(--hx-badge-secondary-bg, var(--hx-color-neutral-100, #f1f5f9))
     );
   }
 
   .badge--success {
-    --hx-badge-bg: var(--hx-color-success-700, #15803d);
+    --hx-badge-bg: var(--hx-color-success-700, #166534);
     --hx-badge-color: var(--hx-color-neutral-0, #ffffff);
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-success-700, #15803d)
+      var(--hx-color-success-700, #166534)
     );
   }
 
   .badge--warning {
-    --hx-badge-bg: var(--hx-color-warning-500, #eab308);
-    --hx-badge-color: var(--hx-color-neutral-900, #1a1a1a);
+    --hx-badge-bg: var(--hx-color-warning-500, #d97706);
+    --hx-badge-color: var(--hx-color-neutral-900, #0f172a);
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-warning-500, #eab308)
+      var(--hx-color-warning-500, #d97706)
     );
   }
 
@@ -223,20 +223,20 @@
   }
 
   .badge--neutral {
-    --hx-badge-bg: var(--hx-color-neutral-200, #e5e7eb);
-    --hx-badge-color: var(--hx-color-neutral-700, #374151);
+    --hx-badge-bg: var(--hx-color-neutral-200, #e2e8f0);
+    --hx-badge-color: var(--hx-color-neutral-700, #334155);
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-color-neutral-200, #e5e7eb)
+      var(--hx-color-neutral-200, #e2e8f0)
     );
   }
 
   .badge--info {
-    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #0369a1));
+    --hx-badge-bg: var(--hx-badge-info-bg, var(--hx-color-info-700, #075985));
     --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, #0369a1))
+      var(--hx-badge-info-bg, var(--hx-color-info-700, #075985))
     );
   }
 
@@ -316,7 +316,7 @@
     cursor: pointer;
     color: inherit;
     opacity: var(--hx-opacity-75, 0.75);
-    border-radius: var(--hx-border-radius-sm, 0.125rem);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
     line-height: 0;
     /* WCAG 2.5.5: minimum 44×44px touch target */
     min-width: var(--hx-touch-target-min, 2.75rem);
@@ -329,7 +329,23 @@
 
   .badge__remove-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);
-    outline-offset: var(--hx-focus-ring-offset, 1px);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .badge {
+      border: 1px solid CanvasText;
+    }
+
+    .badge--pulse {
+      animation: none;
+    }
+
+    .badge__remove-button {
+      color: ButtonText;
+    }
   }
 /* ── hx-button ── */
 :host {
@@ -393,10 +409,13 @@
 
   /* ─── Size Variants ─── */
 
+  /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target for sm variant.
+     min-height uses --hx-touch-target-min to guarantee the interactive area
+     meets the threshold even though the visual size token is smaller. */
   .button--sm {
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-3, 0.75rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
-    min-height: var(--hx-size-8, 2rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
 
   .button--md {
@@ -470,7 +489,7 @@
   }
 
   .button--primary:hover {
-    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-500));
+    --hx-button-bg: var(--hx-button-hover-bg, var(--hx-color-primary-600));
   }
 
   /* ─── Disabled ─── */
@@ -537,7 +556,7 @@
 
   /* Primary inverted — slight transparent white overlay on hover */
   :host([inverted]) .button--primary:hover {
-    --hx-button-bg: var(--hx-color-primary-400, #3b82f6);
+    --hx-button-bg: var(--hx-color-primary-400, #60a5fa);
   }
 
   /* Secondary inverted — white border and text */
@@ -718,6 +737,19 @@
     z-index: 1;
     position: relative;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    /*
+     * In forced-colors mode, negative margins that collapse borders between grouped
+     * buttons can obscure focus rings. Raise focused children so the Highlight
+     * outline from hx-button's own forced-colors block is fully visible.
+     */
+    .group ::slotted(:focus-within) {
+      z-index: 2;
+    }
+  }
 /* ── hx-card ── */
 :host {
     display: block;
@@ -730,12 +762,12 @@
     flex-direction: column;
     gap: var(--hx-card-gap, var(--hx-space-4, 1rem));
     background-color: var(--hx-card-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-card-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-card-color, var(--hx-color-neutral-800, #1e293b));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(--hx-card-border-radius, var(--hx-border-radius-lg, 0.5rem));
     overflow: hidden;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-card-font-family, var(--hx-font-family-sans, sans-serif));
     transition:
       box-shadow var(--hx-transition-normal, 250ms ease),
       transform var(--hx-transition-normal, 250ms ease);
@@ -796,7 +828,7 @@
 
   .card--interactive:hover {
     box-shadow: var(--hx-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-    transform: translateY(var(--hx-lift-md, -2px));
+    transform: translateY(var(--hx-transform-lift-md, -2px));
   }
 
   .card--interactive:focus-visible {
@@ -858,7 +890,7 @@
     flex: 1;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
-    color: var(--hx-card-color, var(--hx-color-neutral-600, #495057));
+    color: var(--hx-card-color, var(--hx-color-neutral-600, #475569));
   }
 
   .card__footer {
@@ -876,9 +908,21 @@
     padding-bottom: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     padding-inline-start: var(--hx-card-padding, var(--hx-space-6, 1.5rem));
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-card-border-color, var(--hx-color-neutral-200, #e2e8f0));
     margin-top: auto;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .card {
+      border-color: CanvasText;
+    }
+
+    .card__actions {
+      border-top-color: CanvasText;
+    }
+  }
 /* ── hx-divider ── */
 :host {
     display: block;
@@ -966,6 +1010,14 @@
     line-height: var(--hx-line-height-tight, 1.25);
     white-space: nowrap;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .divider__line {
+      background-color: CanvasText;
+    }
+  }
 /* ── hx-icon ── */
 :host {
     display: inline-flex;
@@ -1039,6 +1091,14 @@
     fill: currentColor;
     display: block;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    :host {
+      color: CanvasText;
+    }
+  }
 /* ── hx-icon-button ── */
 :host {
     display: inline-block;
@@ -1191,6 +1251,33 @@
       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;
+    }
+  }
 /* ── hx-image ── */
 :host {
     display: block;
@@ -1211,8 +1298,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 {
@@ -1225,13 +1312,21 @@
   .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;
+    }
+  }
 /* ── hx-link ── */
 :host {
     display: inline;
@@ -1261,12 +1356,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 {
@@ -1276,7 +1371,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 --- */
@@ -1287,7 +1382,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;
   }
 
@@ -1298,7 +1393,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 --- */
@@ -1324,6 +1419,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 {
@@ -1419,6 +1532,18 @@
       display: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .skeleton {
+      border: 1px solid GrayText;
+    }
+
+    .skeleton--animated::after {
+      display: none;
+    }
+  }
 /* ── hx-spinner ── */
 :host {
     display: inline-flex;
@@ -1535,6 +1660,18 @@
       );
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .spinner__track {
+      stroke: GrayText;
+    }
+
+    .spinner__arc {
+      stroke: CanvasText;
+    }
+  }
 /* ── hx-tag ── */
 :host {
     display: inline-block;
@@ -1551,15 +1688,15 @@
     align-items: center;
     gap: var(--hx-space-1, 0.25rem);
     border-radius: var(--hx-tag-border-radius, var(--hx-border-radius-sm, 0.25rem));
-    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #f3f4f6));
-    color: var(--hx-tag-color, var(--hx-color-neutral-700, #374151));
+    background-color: var(--hx-tag-bg, var(--hx-color-neutral-100, #f1f5f9));
+    color: var(--hx-tag-color, var(--hx-color-neutral-700, #334155));
     font-family: var(--hx-tag-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-tag-font-weight, var(--hx-font-weight-medium, 500));
     line-height: var(--hx-line-height-tight, 1.25);
     white-space: nowrap;
     vertical-align: middle;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-tag-border-color, var(--hx-color-neutral-200, #e5e7eb));
+      var(--hx-tag-border-color, var(--hx-color-neutral-200, #e2e8f0));
   }
 
   /* ─── Size Variants ─── */
@@ -1585,32 +1722,32 @@
   /* ─── Color Variants ─── */
 
   .tag--default {
-    --hx-tag-bg: var(--hx-color-neutral-100, #f3f4f6);
-    --hx-tag-color: var(--hx-color-neutral-700, #374151);
-    --hx-tag-border-color: var(--hx-color-neutral-200, #e5e7eb);
+    --hx-tag-bg: var(--hx-color-neutral-100, #f1f5f9);
+    --hx-tag-color: var(--hx-color-neutral-700, #334155);
+    --hx-tag-border-color: var(--hx-color-neutral-200, #e2e8f0);
   }
 
   .tag--primary {
     --hx-tag-bg: var(--hx-color-primary-50, #eff6ff);
-    --hx-tag-color: var(--hx-color-primary-700, #1d4ed8);
+    --hx-tag-color: var(--hx-color-primary-700, #1e40af);
     --hx-tag-border-color: var(--hx-color-primary-200, #bfdbfe);
   }
 
   .tag--success {
     --hx-tag-bg: var(--hx-color-success-50, #f0fdf4);
-    --hx-tag-color: var(--hx-color-success-700, #15803d);
+    --hx-tag-color: var(--hx-color-success-700, #166534);
     --hx-tag-border-color: var(--hx-color-success-200, #bbf7d0);
   }
 
   .tag--warning {
     --hx-tag-bg: var(--hx-color-warning-50, #fffbeb);
-    --hx-tag-color: var(--hx-color-warning-700, #b45309);
+    --hx-tag-color: var(--hx-color-warning-700, #92400e);
     --hx-tag-border-color: var(--hx-color-warning-200, #fde68a);
   }
 
   .tag--danger {
     --hx-tag-bg: var(--hx-color-error-50, #fef2f2);
-    --hx-tag-color: var(--hx-color-error-700, #b91c1c);
+    --hx-tag-color: var(--hx-color-error-700, #991b1b);
     --hx-tag-border-color: var(--hx-color-error-200, #fecaca);
   }
 
@@ -1669,7 +1806,7 @@
     cursor: pointer;
     color: inherit;
     opacity: var(--hx-opacity-75, 0.75);
-    border-radius: var(--hx-border-radius-sm, 0.125rem);
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
     line-height: 0;
   }
 
@@ -1679,7 +1816,19 @@
 
   .tag__remove-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);
-    outline-offset: var(--hx-focus-ring-offset, 1px);
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .tag {
+      border-color: CanvasText;
+    }
+
+    .tag__remove-button {
+      color: ButtonText;
+    }
   }
 /* ── hx-text ── */
 :host {
@@ -1690,7 +1839,7 @@
 
   .text {
     display: inline;
-    font-family: var(--hx-font-family-sans, sans-serif);
+    font-family: var(--hx-text-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-text-font-size);
     font-weight: var(--hx-text-font-weight);
     line-height: var(--hx-text-line-height);
@@ -1756,7 +1905,7 @@
     --hx-text-font-size: var(--hx-font-size-xs, 0.75rem);
     --hx-text-font-weight: var(--hx-font-weight-semibold, 600);
     --hx-text-line-height: var(--hx-line-height-tight, 1.25);
-    --hx-text-letter-spacing: var(--hx-letter-spacing-wide, 0.05em);
+    --hx-text-letter-spacing: var(--hx-letter-spacing-wide, 0.025em);
     text-transform: uppercase;
   }
 
@@ -1779,15 +1928,15 @@
   }
 
   .text--color-danger {
-    --hx-text-color: var(--hx-color-error-600, #dc2626);
+    --hx-text-color: var(--hx-color-error-600, #b91c1c);
   }
 
   .text--color-success {
-    --hx-text-color: var(--hx-color-success-600, #16a34a);
+    --hx-text-color: var(--hx-color-success-600, #15803d);
   }
 
   .text--color-warning {
-    --hx-text-color: var(--hx-color-warning-600, #d97706);
+    --hx-text-color: var(--hx-color-warning-600, #b45309);
   }
 
   /* ─── Weight Overrides ─── */
@@ -1830,6 +1979,39 @@
   :host([lines]:not([lines='0'])) {
     display: block;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    /*
+     * Semantic color variants (danger, success, warning) communicate state via color
+     * alone. In forced-colors mode the browser overrides custom colors, so we must
+     * use system color keywords to preserve the semantic distinction.
+     */
+    .text--color-danger {
+      color: LinkText;
+    }
+
+    .text--color-success {
+      color: CanvasText;
+    }
+
+    .text--color-warning {
+      color: CanvasText;
+    }
+
+    .text--color-disabled {
+      color: GrayText;
+    }
+
+    .text--color-inverse {
+      color: CanvasText;
+    }
+
+    .text--color-subtle {
+      color: CanvasText;
+    }
+  }
 /* ── hx-visually-hidden ── */
 :host {
     position: absolute !important;
@@ -1855,4 +2037,16 @@
     clip-path: none !important;
     white-space: normal !important;
     border: 0 !important;
+  }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  /* hx-visually-hidden clips content off-screen for sighted users; in forced-colors
+     mode this behavior is intentional. When the focusable variant becomes visible
+     on focus, the browser's forced-colors mapping handles text/background colors
+     correctly via the default forced-color-adjust: auto. */
+  @media (forced-colors: active) {
+    :host([focusable]:focus-within) {
+      forced-color-adjust: auto;
+    }
   }