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

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

@@ -53,10 +53,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 {
@@ -126,7 +129,7 @@
    * to give clear visual feedback without introducing a new color.
    */
   .button--primary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1d4ed8));
+    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-700, #1e40af));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
       var(--hx-color-neutral-0, #ffffff)
@@ -152,7 +155,7 @@
     --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-primary-700, #1d4ed8)
+      var(--hx-color-primary-700, #1e40af)
     );
     --hx-toggle-button-border-color: var(--hx-color-primary-400, #60a5fa);
     box-shadow: inset 0 0 0 1px var(--hx-color-primary-400, #60a5fa);
@@ -163,7 +166,7 @@
     --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-100, #dbeafe));
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
-      var(--hx-color-primary-700, #1d4ed8)
+      var(--hx-color-primary-700, #1e40af)
     );
     --hx-toggle-button-border-color: transparent;
   }
@@ -205,3 +208,37 @@
       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--pressed {
+      background-color: Highlight;
+      color: HighlightText;
+      border-color: Highlight;
+      box-shadow: none;
+    }
+
+    .button[disabled] {
+      background-color: ButtonFace;
+      color: GrayText;
+      border-color: GrayText;
+      opacity: 1;
+    }
+
+    :host([disabled]) {
+      opacity: 1;
+    }
+  }

package/dist/css/hx-tooltip.css

@@ -12,9 +12,9 @@
     z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));
     max-width: var(--hx-tooltip-max-width, 280px);
     padding: var(--hx-tooltip-padding, var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem));
-    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));
-    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f9fafb));
-    font-family: var(--hx-font-family-sans, sans-serif);
+    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-tooltip-color, var(--hx-color-neutral-50, #f8fafc));
+    font-family: var(--hx-tooltip-font-family, var(--hx-font-family-sans, sans-serif));
     font-size: var(--hx-tooltip-font-size, var(--hx-font-size-xs, 0.75rem));
     line-height: var(--hx-line-height-normal, 1.5);
     border-radius: var(--hx-tooltip-border-radius, var(--hx-border-radius-sm, 0.25rem));
@@ -39,7 +39,7 @@
     position: absolute;
     width: var(--hx-tooltip-arrow-size, 8px);
     height: var(--hx-tooltip-arrow-size, 8px);
-    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #111827));
+    background: var(--hx-tooltip-bg, var(--hx-color-neutral-900, #0f172a));
     transform: rotate(45deg);
     pointer-events: none;
   }
@@ -49,3 +49,15 @@
       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/hx-top-nav.css

@@ -26,10 +26,10 @@
 
   .nav {
     background-color: var(--hx-top-nav-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #212529));
+    color: var(--hx-top-nav-color, var(--hx-color-neutral-800, #1e293b));
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
-    font-family: var(--hx-font-family-sans, sans-serif);
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    font-family: var(--hx-top-nav-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   /* ─── Bar row (always visible) ─── */
@@ -62,13 +62,13 @@
     background: transparent;
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
-    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--hx-top-nav-toggle-color, var(--hx-color-neutral-700, #334155));
     cursor: pointer;
     line-height: 0;
   }
 
   .mobile-toggle:hover {
-    background: var(--hx-color-neutral-100, #f1f3f5);
+    background: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   .mobile-toggle:focus-visible {
@@ -90,12 +90,12 @@
     width: 100%;
     padding-block: var(--hx-space-3, 0.75rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
   }
 
   .nav__collapsible--open {
     display: flex;
-    animation: hx-mobile-nav-open var(--hx-duration-fast, 150ms) ease-out;
+    animation: hx-mobile-nav-open var(--hx-duration-fast, 100ms) ease-out;
   }
 
   /* ─── Menu and actions in collapsible (mobile) ─── */
@@ -112,7 +112,7 @@
     margin-top: var(--hx-space-3, 0.75rem);
     padding-top: var(--hx-space-3, 0.75rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #dee2e6));
+      var(--hx-top-nav-border-color, var(--hx-color-neutral-200, #e2e8f0));
   }
 
   /* ─── Desktop breakpoint ─── */
@@ -201,3 +201,24 @@
       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;
+    }
+  }

package/dist/css/hx-tree-view.css

@@ -20,3 +20,12 @@
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .tree:focus-visible {
+      outline: 3px solid Highlight;
+      outline-offset: 2px;
+    }
+  }

package/dist/css/hx-visually-hidden.css

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

package/dist/css/index.css

@@ -1,4 +1,4 @@
-/* index.css — generated 2026-04-15T04:36:12.256Z */
+/* index.css — generated 2026-04-22T22:04:15.740Z */
 /* Imports all per-component CSS files for Drupal asset pipeline */
 
 @import './hx-accordion.css';

package/dist/css/manifest.json

@@ -1,11 +1,12 @@
 {
-  "generated": "2026-04-15T04:36:12.255Z",
+  "generated": "2026-04-22T22:04:15.739Z",
   "components": [
     {
       "name": "hx-accordion",
       "file": "hx-accordion.css",
       "tokens": [
         "--hx-accordion-border-radius",
+        "--hx-accordion-font-family",
         "--hx-border-radius-md",
         "--hx-font-family-sans"
       ]
@@ -95,6 +96,7 @@
         "--hx-avatar-bg",
         "--hx-avatar-border-radius",
         "--hx-avatar-color",
+        "--hx-avatar-font-family",
         "--hx-avatar-font-size",
         "--hx-avatar-size",
         "--hx-border-radius-md",
@@ -256,6 +258,7 @@
         "--hx-color-primary-400",
         "--hx-color-primary-50",
         "--hx-color-primary-500",
+        "--hx-color-primary-600",
         "--hx-duration-spinner",
         "--hx-filter-brightness-active",
         "--hx-filter-brightness-hover",
@@ -277,12 +280,12 @@
         "--hx-overlay-white-70",
         "--hx-size-10",
         "--hx-size-12",
-        "--hx-size-8",
         "--hx-space-1",
         "--hx-space-2",
         "--hx-space-3",
         "--hx-space-4",
         "--hx-space-6",
+        "--hx-touch-target-min",
         "--hx-transition-fast"
       ]
     },
@@ -306,6 +309,7 @@
         "--hx-card-border-radius",
         "--hx-card-color",
         "--hx-card-focus-ring-color",
+        "--hx-card-font-family",
         "--hx-card-gap",
         "--hx-card-image-aspect-ratio",
         "--hx-card-padding",
@@ -321,7 +325,6 @@
         "--hx-font-size-md",
         "--hx-font-size-xl",
         "--hx-font-weight-semibold",
-        "--hx-lift-md",
         "--hx-line-height-normal",
         "--hx-line-height-tight",
         "--hx-shadow-lg",
@@ -331,6 +334,7 @@
         "--hx-space-3",
         "--hx-space-4",
         "--hx-space-6",
+        "--hx-transform-lift-md",
         "--hx-transition-normal"
       ]
     },
@@ -380,6 +384,7 @@
         "--hx-checkbox-checked-border-color",
         "--hx-checkbox-checkmark-color",
         "--hx-checkbox-error-color",
+        "--hx-checkbox-font-family",
         "--hx-checkbox-help-text-color",
         "--hx-checkbox-label-color",
         "--hx-checkbox-size",
@@ -418,10 +423,11 @@
       "file": "hx-checkbox-group.css",
       "tokens": [
         "--hx-checkbox-group-error-color",
+        "--hx-checkbox-group-font-family",
         "--hx-checkbox-group-gap",
         "--hx-checkbox-group-help-text-color",
         "--hx-checkbox-group-label-color",
-        "--hx-color-error-500",
+        "--hx-color-error-text",
         "--hx-color-neutral-500",
         "--hx-color-neutral-700",
         "--hx-font-family-sans",
@@ -679,6 +685,7 @@
         "--hx-copy-button-border-radius",
         "--hx-copy-button-color",
         "--hx-copy-button-focus-ring-color",
+        "--hx-copy-button-font-family",
         "--hx-filter-brightness-active",
         "--hx-filter-brightness-hover",
         "--hx-focus-ring-color",
@@ -692,10 +699,10 @@
         "--hx-opacity-disabled",
         "--hx-size-10",
         "--hx-size-12",
-        "--hx-size-8",
         "--hx-space-1",
         "--hx-space-2",
         "--hx-space-3",
+        "--hx-touch-target-min",
         "--hx-transition-fast"
       ]
     },
@@ -735,6 +742,7 @@
         "--hx-data-table-border-color",
         "--hx-data-table-cell-color",
         "--hx-data-table-empty-color",
+        "--hx-data-table-font-family",
         "--hx-data-table-header-bg",
         "--hx-data-table-header-color",
         "--hx-data-table-min-width",
@@ -791,7 +799,6 @@
         "--hx-date-picker-calendar-min-width",
         "--hx-date-picker-color",
         "--hx-date-picker-error-color",
-        "--hx-date-picker-focus-ring-color",
         "--hx-date-picker-font-family",
         "--hx-date-picker-label-color",
         "--hx-date-picker-selected-bg",
@@ -813,6 +820,7 @@
         "--hx-font-weight-semibold",
         "--hx-line-height-normal",
         "--hx-opacity-disabled",
+        "--hx-shadow-md",
         "--hx-size-10",
         "--hx-size-8",
         "--hx-space-1",
@@ -843,6 +851,7 @@
         "--hx-dialog-body-padding",
         "--hx-dialog-border-radius",
         "--hx-dialog-color",
+        "--hx-dialog-font-family",
         "--hx-dialog-footer-border-color",
         "--hx-dialog-footer-padding",
         "--hx-dialog-header-border-color",
@@ -908,6 +917,7 @@
         "--hx-drawer-bg",
         "--hx-drawer-body-padding",
         "--hx-drawer-color",
+        "--hx-drawer-font-family",
         "--hx-drawer-footer-border-color",
         "--hx-drawer-footer-padding",
         "--hx-drawer-header-border-color",
@@ -1026,6 +1036,7 @@
         "--hx-file-upload-dropzone-border-color",
         "--hx-file-upload-dropzone-border-radius",
         "--hx-file-upload-error-color",
+        "--hx-file-upload-font-family",
         "--hx-file-upload-progress-color",
         "--hx-file-upload-progress-height",
         "--hx-focus-ring-color",
@@ -1205,6 +1216,7 @@
         "--hx-menu-border-radius",
         "--hx-menu-max-height",
         "--hx-menu-min-width",
+        "--hx-shadow-md",
         "--hx-space-1"
       ]
     },
@@ -1235,6 +1247,7 @@
         "--hx-meter-color-danger",
         "--hx-meter-color-optimum",
         "--hx-meter-color-warning",
+        "--hx-meter-font-family",
         "--hx-meter-indicator-color",
         "--hx-meter-label-color",
         "--hx-meter-track-color",
@@ -1281,6 +1294,7 @@
         "--hx-nav-padding",
         "--hx-nav-submenu-bg",
         "--hx-nav-submenu-min-width",
+        "--hx-shadow-md",
         "--hx-space-1",
         "--hx-space-1-5",
         "--hx-space-2",
@@ -1403,12 +1417,14 @@
         "--hx-pagination-color",
         "--hx-pagination-ellipsis-color",
         "--hx-pagination-focus-ring-color",
+        "--hx-pagination-font-family",
         "--hx-pagination-gap",
         "--hx-pagination-hover-bg",
         "--hx-pagination-hover-border-color",
         "--hx-space-1",
         "--hx-space-2",
         "--hx-space-4",
+        "--hx-touch-target-min",
         "--hx-transition-fast"
       ]
     },
@@ -1447,7 +1463,8 @@
         "--hx-space-1",
         "--hx-space-10",
         "--hx-space-3",
-        "--hx-space-4"
+        "--hx-space-4",
+        "--hx-touch-target-size"
       ]
     },
     {
@@ -1471,7 +1488,8 @@
         "--hx-phi-field-toggle-color",
         "--hx-phi-field-value-color",
         "--hx-space-1",
-        "--hx-space-2"
+        "--hx-space-2",
+        "--hx-touch-target-min"
       ]
     },
     {
@@ -1496,6 +1514,7 @@
         "--hx-popover-border-radius",
         "--hx-popover-color",
         "--hx-popover-focus-ring-color",
+        "--hx-popover-font-family",
         "--hx-popover-font-size",
         "--hx-popover-max-width",
         "--hx-popover-padding",
@@ -1563,6 +1582,7 @@
         "--hx-font-family-sans",
         "--hx-font-size-xs",
         "--hx-font-weight-semibold",
+        "--hx-progress-ring-font-family",
         "--hx-progress-ring-indicator-color",
         "--hx-progress-ring-label-color",
         "--hx-progress-ring-track-color",
@@ -1592,6 +1612,7 @@
         "--hx-line-height-normal",
         "--hx-opacity-disabled",
         "--hx-radio-group-error-color",
+        "--hx-radio-group-font-family",
         "--hx-radio-group-gap",
         "--hx-radio-group-help-text-color",
         "--hx-radio-group-label-color",
@@ -1620,6 +1641,7 @@
         "--hx-rating-hover-color",
         "--hx-rating-size",
         "--hx-space-1",
+        "--hx-touch-target-min",
         "--hx-transition-fast"
       ]
     },
@@ -1764,6 +1786,7 @@
         "--hx-size-5",
         "--hx-size-8",
         "--hx-slider-fill-bg",
+        "--hx-slider-font-family",
         "--hx-slider-help-text-color",
         "--hx-slider-input-padding-block",
         "--hx-slider-label-color",
@@ -1784,6 +1807,7 @@
         "--hx-space-0-5",
         "--hx-space-1",
         "--hx-space-2",
+        "--hx-touch-target-min",
         "--hx-transition-fast"
       ]
     },
@@ -2051,6 +2075,7 @@
         "--hx-space-1",
         "--hx-space-2",
         "--hx-switch-error-color",
+        "--hx-switch-font-family",
         "--hx-switch-help-text-color",
         "--hx-switch-label-color",
         "--hx-switch-thumb-bg",
@@ -2067,6 +2092,7 @@
         "--hx-switch-track-width-lg",
         "--hx-switch-track-width-md",
         "--hx-switch-track-width-sm",
+        "--hx-touch-target-min",
         "--hx-transition-fast"
       ]
     },
@@ -2087,6 +2113,7 @@
         "--hx-space-2",
         "--hx-space-3",
         "--hx-space-4",
+        "--hx-table-font-family",
         "--hx-table-header-bg",
         "--hx-table-header-color",
         "--hx-table-row-hover-bg",
@@ -2102,6 +2129,7 @@
         "--hx-font-family-sans",
         "--hx-tabs-border-color",
         "--hx-tabs-border-width",
+        "--hx-tabs-font-family",
         "--hx-tabs-gap",
         "--hx-tabs-indicator-size",
         "--hx-tabs-vertical-width"
@@ -2185,6 +2213,7 @@
         "--hx-line-height-normal",
         "--hx-line-height-tight",
         "--hx-text-color",
+        "--hx-text-font-family",
         "--hx-text-font-size",
         "--hx-text-font-weight",
         "--hx-text-letter-spacing",
@@ -2354,6 +2383,7 @@
         "--hx-font-size-sm",
         "--hx-line-height-normal",
         "--hx-opacity-75",
+        "--hx-shadow-md",
         "--hx-space-1",
         "--hx-space-2",
         "--hx-space-3",
@@ -2362,6 +2392,7 @@
         "--hx-toast-border-radius",
         "--hx-toast-color",
         "--hx-toast-enter-translate",
+        "--hx-toast-font-family",
         "--hx-toast-width",
         "--hx-touch-target-min",
         "--hx-transition-fast",
@@ -2401,7 +2432,6 @@
         "--hx-opacity-disabled",
         "--hx-size-10",
         "--hx-size-12",
-        "--hx-size-8",
         "--hx-space-1",
         "--hx-space-2",
         "--hx-space-3",
@@ -2414,6 +2444,7 @@
         "--hx-toggle-button-font-family",
         "--hx-toggle-button-font-weight",
         "--hx-toggle-button-pressed-bg",
+        "--hx-touch-target-min",
         "--hx-transition-fast"
       ]
     },
@@ -2435,6 +2466,7 @@
         "--hx-tooltip-bg",
         "--hx-tooltip-border-radius",
         "--hx-tooltip-color",
+        "--hx-tooltip-font-family",
         "--hx-tooltip-font-size",
         "--hx-tooltip-max-width",
         "--hx-tooltip-padding",
@@ -2470,6 +2502,7 @@
         "--hx-top-nav-bg",
         "--hx-top-nav-border-color",
         "--hx-top-nav-color",
+        "--hx-top-nav-font-family",
         "--hx-top-nav-height",
         "--hx-top-nav-padding-x",
         "--hx-top-nav-toggle-color",

package/dist/form-test-utils.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Form integration test utilities for HELiX ElementInternals lifecycle tests.
+ *
+ * These helpers create real <form> elements in the live DOM so that
+ * FormData construction, form reset, and constraint validation all run
+ * through the real browser form-association machinery — not mocks.
+ *
+ * Designed for Vitest browser mode (real Chromium DOM).
+ */
+/**
+ * Appends a <form> containing the component to the shared fixture container,
+ * waits for the component's first Lit update, and returns both references.
+ *
+ * Attributes in `attrs` are applied to the component element before it is
+ * inserted, allowing declarative configuration without inner HTML string
+ * concatenation.
+ *
+ * @param tag - The custom element tag name (e.g. "hx-text-input")
+ * @param attrs - Optional attribute map applied to the component element
+ * @param innerHtml - Optional inner HTML inserted inside the component (slots)
+ * @returns Object with `el` (the component) and `form` (the wrapping form)
+ */
+export declare function formFixture<T extends HTMLElement>(tag: string, attrs?: Record<string, string>, innerHtml?: string): Promise<{
+    el: T;
+    form: HTMLFormElement;
+}>;
+/**
+ * Returns the FormData built from the given form.
+ *
+ * Uses the standard `new FormData(form)` constructor which invokes the real
+ * browser form-data collection path — including ElementInternals.setFormValue()
+ * contributions from form-associated custom elements.
+ *
+ * @param form - The form element to collect data from
+ */
+export declare function getFormData(form: HTMLFormElement): FormData;
+/**
+ * Programmatically resets the form, then waits for any pending microtasks so
+ * that Lit reactive property updates triggered by `formResetCallback` have
+ * time to flush before the caller's assertions run.
+ *
+ * @param form - The form element to reset
+ */
+export declare function resetForm(form: HTMLFormElement): Promise<void>;
+//# sourceMappingURL=form-test-utils.d.ts.map

package/dist/form-test-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-test-utils.d.ts","sourceRoot":"","sources":["../src/form-test-utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;;;;;;;;;;GAYG;AACH,wBAAsB,WAAW,CAAC,CAAC,SAAS,WAAW,EACrD,GAAG,EAAE,MAAM,EACX,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC9B,SAAS,CAAC,EAAE,MAAM,GACjB,OAAO,CAAC;IAAE,EAAE,EAAE,CAAC,CAAC;IAAC,IAAI,EAAE,eAAe,CAAA;CAAE,CAAC,CAgC3C;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,eAAe,GAAG,QAAQ,CAE3D;AAED;;;;;;GAMG;AACH,wBAAsB,SAAS,CAAC,IAAI,EAAE,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,CAKpE"}