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

package/dist/css/helix-layout.css

@@ -10,6 +10,14 @@
     border-radius: var(--hx-accordion-border-radius, var(--hx-border-radius-md, 0.375rem));
     overflow: hidden;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .accordion {
+      border: 2px solid CanvasText;
+    }
+  }
 /* ── hx-container ── */
 :host {
     display: block;
@@ -268,6 +276,20 @@ export const helixGridItemStyles = css`
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .divider {
+      background-color: CanvasText;
+    }
+
+    .collapse-btn {
+      border-color: ButtonText;
+      color: ButtonText;
+      background: Canvas;
+    }
+  }
 /* ── hx-stack ── */
 :host {
     display: block;

package/dist/css/helix-media.css

@@ -210,4 +210,28 @@
     .play-pause-btn {
       transition: none;
     }
+  }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .nav-btn {
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+
+    .play-pause-btn {
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+
+    .pagination-dot {
+      border: 1px solid CanvasText;
+    }
+
+    .pagination-item[aria-current='true'] .pagination-dot,
+    .pagination-item.is-active .pagination-dot {
+      background: Highlight;
+      border-color: Highlight;
+    }
   }

package/dist/css/helix-navigation.css

@@ -59,6 +59,15 @@
     overflow-y: auto;
     outline: none;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .menu {
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+    }
+  }
 /* ── hx-nav ── */
 :host {
     display: block;
@@ -301,6 +310,22 @@
       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;
+    }
+  }
 /* ── hx-overflow-menu ── */
 :host {
     display: inline-block;
@@ -434,6 +459,37 @@
       transition: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .trigger {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      color: ButtonText;
+      border: 2px solid ButtonText;
+    }
+
+    .trigger:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .trigger[disabled] {
+      color: GrayText;
+      border-color: GrayText;
+      opacity: 1;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    .panel {
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+    }
+  }
 /* ── hx-pagination ── */
 :host {
     display: block;
@@ -776,6 +832,27 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .side-nav {
+      border-inline-end-color: CanvasText;
+    }
+
+    .side-nav__header {
+      border-bottom-color: CanvasText;
+    }
+
+    .side-nav__footer {
+      border-top-color: CanvasText;
+    }
+
+    .side-nav__toggle {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+  }
 /* ── hx-steps ── */
 :host {
     display: block;
@@ -904,6 +981,18 @@
       scroll-behavior: auto;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .tablist {
+      border-bottom-color: CanvasText;
+    }
+
+    :host([orientation='vertical']) .tablist {
+      border-inline-end-color: CanvasText;
+    }
+  }
 /* ── hx-top-nav ── */
 /* ─── Host ─── */
 
@@ -1107,6 +1196,27 @@
       animation: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .nav {
+      border-bottom-color: CanvasText;
+    }
+
+    .mobile-toggle {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+
+    .nav__collapsible {
+      border-top-color: CanvasText;
+    }
+
+    .nav__actions {
+      border-top-color: CanvasText;
+    }
+  }
 /* ── hx-tree-view ── */
 :host {
     display: block;

package/dist/css/helix-overlay.css

@@ -190,6 +190,27 @@
     white-space: nowrap;
     border: 0;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .dialog {
+      border: 1px solid CanvasText;
+    }
+
+    .dialog__header {
+      border-bottom-color: CanvasText;
+    }
+
+    .dialog__footer {
+      border-top-color: CanvasText;
+    }
+
+    .dialog__close-btn {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+  }
 /* ── hx-drawer ── */
 /* P2-03: Explicit [hidden] rule to survive CSS resets that may override the UA stylesheet. */
   [hidden] {
@@ -452,6 +473,27 @@
       var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));
     flex-shrink: 0;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .drawer-panel {
+      border: 1px solid CanvasText;
+    }
+
+    .drawer-header {
+      border-bottom-color: CanvasText;
+    }
+
+    .drawer-footer {
+      border-top-color: CanvasText;
+    }
+
+    .drawer-close-button {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+  }
 /* ── hx-dropdown ── */
 :host {
     display: inline-block;
@@ -498,6 +540,15 @@
       transition: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    [part='panel'] {
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+    }
+  }
 /* ── hx-popover ── */
 :host {
     /* P2-05: display:contents lets the trigger-wrapper control layout inline;
@@ -559,6 +610,18 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    [part='body'] {
+      border-color: CanvasText;
+    }
+
+    [part='arrow'] {
+      border-color: CanvasText;
+    }
+  }
 /* ── hx-popup ── */
 :host {
     display: inline-block;
@@ -590,6 +653,18 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    [part='popup'] {
+      border: 1px solid CanvasText;
+    }
+
+    [part='arrow'] {
+      border: 1px solid CanvasText;
+    }
+  }
 /* ── hx-tooltip ── */
 :host {
     display: inline-block;
@@ -640,4 +715,16 @@
     [part='tooltip'] {
       transition: none;
     }
+  }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    [part='tooltip'] {
+      border: 1px solid CanvasText;
+    }
+
+    [part='arrow'] {
+      border: 1px solid CanvasText;
+    }
   }

package/dist/css/helix-utility.css

@@ -238,6 +238,34 @@
       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;
+    }
+
+    .button--copied {
+      border-color: Highlight;
+      color: Highlight;
+    }
+  }
 /* ── hx-counter ── */
 :host {
     display: inline-block;
@@ -289,6 +317,9 @@
          will see the final value immediately via the component logic */
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+  /* Counter is text-only — forced-color-adjust: auto (default) is sufficient. */
 /* ── hx-format-date ── */
 :host {
     display: inline;
@@ -608,6 +639,41 @@
       animation: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .split-button__primary,
+    .split-button__trigger {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      color: ButtonText;
+      border: 2px solid ButtonText;
+    }
+
+    .split-button__primary:focus-visible,
+    .split-button__trigger:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .split-button__primary[disabled],
+    .split-button__trigger[disabled] {
+      background-color: ButtonFace;
+      color: GrayText;
+      border-color: GrayText;
+      opacity: 1;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    .split-button__menu {
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+    }
+  }
 /* ── hx-theme ── */
 :host {
     display: contents;

package/dist/css/hx-accordion.css

@@ -8,3 +8,11 @@
     border-radius: var(--hx-accordion-border-radius, var(--hx-border-radius-md, 0.375rem));
     overflow: hidden;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .accordion {
+      border: 2px solid CanvasText;
+    }
+  }

package/dist/css/hx-alert.css

@@ -211,3 +211,24 @@
     --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;
+    }
+  }

package/dist/css/hx-badge.css

@@ -195,3 +195,19 @@
     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;
+    }
+  }

package/dist/css/hx-banner.css

@@ -201,3 +201,20 @@
       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;
+    }
+  }

package/dist/css/hx-button.css

@@ -60,10 +60,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 {

package/dist/css/hx-card.css

@@ -159,3 +159,15 @@
       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;
+    }
+  }

package/dist/css/hx-carousel.css

@@ -209,3 +209,27 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .nav-btn {
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+
+    .play-pause-btn {
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+
+    .pagination-dot {
+      border: 1px solid CanvasText;
+    }
+
+    .pagination-item[aria-current='true'] .pagination-dot,
+    .pagination-item.is-active .pagination-dot {
+      background: Highlight;
+      border-color: Highlight;
+    }
+  }

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

@@ -75,3 +75,35 @@
     color: var(--hx-checkbox-group-error-color, var(--hx-color-error-500, #dc3545));
     line-height: var(--hx-line-height-normal);
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .fieldset {
+      border: none;
+    }
+
+    .fieldset__legend {
+      color: CanvasText;
+    }
+
+    .fieldset--error .fieldset__legend {
+      color: LinkText;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    :host([disabled]) .fieldset__legend {
+      color: GrayText;
+    }
+
+    .fieldset__help-text {
+      color: GrayText;
+    }
+
+    .fieldset__error {
+      color: LinkText;
+    }
+  }

package/dist/css/hx-checkbox.css

@@ -217,3 +217,69 @@
       transition: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .checkbox__box {
+      forced-color-adjust: none;
+      background-color: ButtonFace;
+      border: 2px solid ButtonText;
+    }
+
+    .checkbox__input:focus-visible ~ .checkbox__box {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+
+    .checkbox--checked .checkbox__box,
+    .checkbox--indeterminate .checkbox__box {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+
+    .checkbox__icon {
+      stroke: HighlightText;
+    }
+
+    .checkbox--error .checkbox__box {
+      border-color: LinkText;
+    }
+
+    .checkbox--error.checkbox--checked .checkbox__box,
+    .checkbox--error.checkbox--indeterminate .checkbox__box {
+      background-color: LinkText;
+      border-color: LinkText;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+
+    :host([disabled]) .checkbox__box {
+      border-color: GrayText;
+      background-color: ButtonFace;
+    }
+
+    :host([disabled]) .checkbox--checked .checkbox__box,
+    :host([disabled]) .checkbox--indeterminate .checkbox__box {
+      background-color: GrayText;
+      border-color: GrayText;
+    }
+
+    :host([disabled]) .checkbox__label {
+      color: GrayText;
+    }
+
+    .checkbox__label {
+      color: CanvasText;
+    }
+
+    .checkbox__help-text {
+      color: GrayText;
+    }
+
+    .checkbox__error {
+      color: LinkText;
+    }
+  }

package/dist/css/hx-clinical-status.css

@@ -246,3 +246,26 @@
       transition: none;
     }
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .clinical-status {
+      border-color: CanvasText;
+      border-inline-start-color: CanvasText;
+    }
+
+    .clinical-status__icon svg {
+      fill: CanvasText;
+    }
+
+    .clinical-status__dismiss-button {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+
+    .clinical-status__acknowledge-button {
+      border-color: ButtonText;
+      color: ButtonText;
+    }
+  }