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

package/dist/css/helix-core.css

@@ -331,6 +331,22 @@
     outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);
     outline-offset: var(--hx-focus-ring-offset, 1px);
   }
+
+  /* ─── 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 {
     display: inline-block;
@@ -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 {
@@ -879,6 +898,18 @@
       var(--hx-card-border-color, var(--hx-color-neutral-200, #dee2e6));
     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 +997,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 +1078,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 +1238,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;
@@ -1232,6 +1306,14 @@
   .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;
@@ -1324,6 +1406,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 +1519,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 +1647,18 @@
       );
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .spinner__track {
+      stroke: GrayText;
+    }
+
+    .spinner__arc {
+      stroke: CanvasText;
+    }
+  }
 /* ── hx-tag ── */
 :host {
     display: inline-block;
@@ -1681,6 +1805,18 @@
     outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, currentColor);
     outline-offset: var(--hx-focus-ring-offset, 1px);
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .tag {
+      border-color: CanvasText;
+    }
+
+    .tag__remove-button {
+      color: ButtonText;
+    }
+  }
 /* ── hx-text ── */
 :host {
     display: inline;

package/dist/css/helix-data.css

@@ -166,6 +166,28 @@
     }
   }
 
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .code-snippet {
+      border: 1px solid CanvasText;
+    }
+
+    .code-snippet--inline {
+      border: 1px solid CanvasText;
+    }
+
+    .code-snippet__copy-button {
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+
+    .code-snippet__expand-button {
+      border-top-color: CanvasText;
+      color: ButtonText;
+    }
+  }
+
   /* ─── Screen-reader only ─── */
 
   .sr-only {
@@ -386,6 +408,29 @@
     color: var(--hx-data-table-empty-color, var(--hx-color-neutral-600, #475569));
     padding: var(--hx-space-8, 2rem) var(--hx-space-4, 1rem);
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    table {
+      border: 1px solid CanvasText;
+    }
+
+    th,
+    td {
+      border-bottom-color: CanvasText;
+    }
+
+    tbody tr[aria-selected='true'] {
+      outline: 2px solid Highlight;
+    }
+
+    .skeleton-cell {
+      animation: none;
+      border: 1px solid GrayText;
+      background: none;
+    }
+  }
 /* ── hx-list ── */
 :host {
     display: block;
@@ -468,6 +513,14 @@
   :host([striped]) ::slotted(hx-structured-list-row:nth-of-type(even)) {
     background: var(--_bg-stripe);
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    :host([bordered]) .list {
+      border-color: CanvasText;
+    }
+  }
 `;
 
 export const helixStructuredListRowStyles = css`
@@ -509,6 +562,14 @@ export const helixStructuredListRowStyles = css`
   .row__actions:empty {
     display: none;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    :host(:not(:last-of-type)) .row {
+      border-bottom-color: CanvasText;
+    }
+  }
 /* ── hx-table ── */
 :host {
     display: block;
@@ -615,6 +676,14 @@ export const helixStructuredListRowStyles = css`
       transition: none !important;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    table {
+      border: 1px solid CanvasText;
+    }
+  }
 `;
 
 /**

package/dist/css/helix-feedback.css

@@ -213,6 +213,27 @@
     --hx-alert-color: var(--hx-color-error-800, #991b1b);
     --hx-alert-icon-color: var(--hx-color-error-500, #ef4444);
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .alert {
+      border-color: CanvasText;
+    }
+
+    .alert--accent {
+      border-inline-start-color: CanvasText;
+    }
+
+    .alert__icon svg {
+      fill: CanvasText;
+    }
+
+    .alert__close-button {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+  }
 /* ── hx-banner ── */
 :host {
     display: block;
@@ -416,6 +437,23 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .banner {
+      border-bottom-color: CanvasText;
+    }
+
+    .banner__icon svg {
+      fill: CanvasText;
+    }
+
+    .banner__close-button {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+  }
 /* ── hx-meter ── */
 :host {
     display: block;
@@ -530,6 +568,19 @@
     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;
+    }
+  }
 /* ── hx-progress-bar ── */
 :host {
     display: block;
@@ -1084,6 +1135,19 @@
   :host([status='unknown']) {
     --_dot-color: var(--hx-status-indicator-color-unknown, var(--hx-color-neutral-300));
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .indicator__dot {
+      forced-color-adjust: none;
+      border: 2px solid CanvasText;
+    }
+
+    .indicator__pulse-ring {
+      display: none;
+    }
+  }
 /* ── hx-toast ── */
 /* ─── hx-toast host ─── */
 
@@ -1239,6 +1303,19 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .toast {
+      border: 1px solid CanvasText;
+    }
+
+    .toast__close {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+  }
 `;
 
 export const helixToastStackStyles = css`