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

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

@@ -1,2 +1,438 @@
 /* hx-date-picker — extracted from Shadow DOM styles */
-:host{display:block;position:relative}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.field__label-wrapper{display:contents}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-date-picker-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{display:flex;align-items:stretch;border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-date-picker-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease);overflow:hidden}.field__input-wrapper:focus-within{border-color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__input-wrapper{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__input{flex:1;border:none;outline:none;background:transparent;padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-family:inherit;font-size:var(--hx-font-size-md, 1rem);color:var(--hx-date-picker-color, var(--hx-color-neutral-800, #212529));line-height:var(--hx-line-height-normal, 1.5);min-height:var(--hx-size-10, 2.5rem);width:100%;cursor:default}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input:disabled{cursor:not-allowed}.field__trigger{display:flex;align-items:center;justify-content:center;padding:0 var(--hx-space-3, .75rem);border:none;border-left:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #ced4da));background:transparent;color:var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #6c757d));cursor:pointer;flex-shrink:0;transition:color var(--hx-transition-fast, .15s ease);outline:none}.field__trigger:focus-visible{color:var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));background-color:color-mix(in srgb,var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))) 8%,transparent)}.field__trigger:hover:not(:disabled){color:var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #343a40));background-color:color-mix(in srgb,var(--hx-color-neutral-900, #212529) 4%,transparent)}.field__trigger:disabled{cursor:not-allowed}.calendar{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;z-index:var(--hx-z-index-dropdown, 1000);min-width:var(--hx-date-picker-calendar-min-width, 18rem);background-color:var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e9ecef));border-radius:var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, .5rem));box-shadow:var( --hx-date-picker-calendar-shadow, 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1) );padding:var(--hx-space-3, .75rem);outline:none}@media(prefers-reduced-motion:no-preference){.calendar{animation:calendar-appear var(--hx-transition-fast, .15s ease) forwards}}@keyframes calendar-appear{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}.calendar__nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--hx-space-3, .75rem)}:is(.calendar__nav-btn,.calendar__day,.calendar__day-cell,.calendar__weekday){display:flex;align-items:center;justify-content:center}:is(.calendar__nav-btn,.calendar__day){width:var(--hx-touch-target-min, 2.75rem);height:var(--hx-touch-target-min, 2.75rem);border:none;border-radius:var(--hx-border-radius-sm, .25rem);background:transparent;cursor:pointer;outline:none;transition:background-color var(--hx-transition-fast, .15s ease),color var(--hx-transition-fast, .15s ease)}.calendar__nav-btn{color:var(--hx-color-neutral-600, #495057);font-size:var(--hx-font-size-lg, 1.125rem);line-height:1}.calendar__nav-btn:hover{background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}:is(.calendar__nav-btn,.calendar__day):focus-visible{box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) var(--hx-date-picker-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa)));z-index:1}.calendar__nav-btn:disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__month-label{font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-800, #212529);flex:1;text-align:center}.calendar__grid{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem)}.calendar__row{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--hx-space-1, .25rem)}.calendar__weekday{height:var(--hx-size-8, 2rem);font-size:var(--hx-font-size-xs, .75rem);font-weight:var(--hx-font-weight-semibold, 600);color:var(--hx-color-neutral-500, #6c757d);text-transform:uppercase;letter-spacing:.05em}.calendar__day{color:var(--hx-color-neutral-800, #212529);font-size:var(--hx-font-size-sm, .875rem);font-family:inherit;position:relative}.calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected){background-color:var(--hx-color-neutral-100, #f8f9fa);color:var(--hx-color-neutral-900, #212529)}.calendar__day--selected{background-color:var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));color:var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));font-weight:var(--hx-font-weight-semibold, 600)}.calendar__day--selected:hover{background-color:var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected){font-weight:var(--hx-font-weight-bold, 700);color:var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8))}.calendar__day--today:not(.calendar__day--selected):after{content:"";position:absolute;bottom:.2rem;left:50%;transform:translate(-50%);width:.25rem;height:.25rem;border-radius:50%;background-color:currentColor}.calendar__day--disabled{opacity:var(--hx-opacity-disabled, .4);cursor:not-allowed;pointer-events:none}.calendar__live-region{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__trigger,.calendar__nav-btn,.calendar__day{transition:none}}@media(forced-colors:active){.field__input-wrapper{border:1px solid ButtonText}.field__input-wrapper:focus-within{outline:2px solid Highlight;outline-offset:1px;box-shadow:none}:is(.calendar__day:focus-visible,.calendar__nav-btn:focus-visible){outline:2px solid Highlight;box-shadow:none}.calendar__day--selected{background-color:Highlight;color:HighlightText;border:1px solid Highlight}.calendar__day--today:not(.calendar__day--selected){border:2px solid LinkText}.calendar__day--today:not(.calendar__day--selected):after{display:none}.calendar__day--disabled{color:GrayText}.field--error .field__input-wrapper{border-color:LinkText}}
+/* ============================================================
+     Host
+     ============================================================ */
+
+  :host {
+    display: block;
+    position: relative;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  /* ============================================================
+     Field layout
+     ============================================================ */
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+    font-family: var(--hx-date-picker-font-family, var(--hx-font-family-sans, sans-serif));
+    position: relative;
+  }
+
+  .field__label-wrapper {
+    display: contents;
+  }
+
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    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-date-picker-label-color, var(--hx-color-neutral-700, #334155));
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__required-marker {
+    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold, 700);
+  }
+
+  /* ============================================================
+     Input wrapper
+     ============================================================ */
+
+  .field__input-wrapper {
+    display: flex;
+    align-items: stretch;
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
+    border-radius: var(--hx-date-picker-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--hx-date-picker-bg, var(--hx-color-neutral-0, #ffffff));
+    transition:
+      border-color var(--hx-transition-fast, 150ms ease),
+      box-shadow var(--hx-transition-fast, 150ms ease);
+    overflow: hidden;
+  }
+
+  .field__input-wrapper:focus-within {
+    border-color: var(
+      --hx-date-picker-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+    );
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(
+            --hx-date-picker-focus-ring-color,
+            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+          )
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  .field--error .field__input-wrapper {
+    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
+  }
+
+  .field--error .field__input-wrapper:focus-within {
+    border-color: var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      color-mix(
+        in srgb,
+        var(--hx-date-picker-error-color, var(--hx-color-error-500, #dc2626))
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        transparent
+      );
+  }
+
+  /* ============================================================
+     Input element
+     ============================================================ */
+
+  .field__input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
+    font-family: inherit;
+    font-size: var(--hx-font-size-md, 1rem);
+    color: var(--hx-date-picker-color, var(--hx-color-neutral-800, #1e293b));
+    line-height: var(--hx-line-height-normal, 1.5);
+    min-height: var(--hx-size-10, 2.5rem);
+    width: 100%;
+    cursor: default;
+  }
+
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400, #94a3b8);
+  }
+
+  .field__input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ============================================================
+     Calendar trigger button
+     ============================================================ */
+
+  .field__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--hx-space-3, 0.75rem);
+    border: none;
+    border-left: var(--hx-border-width-thin, 1px) solid
+      var(--hx-date-picker-border-color, var(--hx-color-neutral-300, #cbd5e1));
+    background: transparent;
+    color: var(--hx-date-picker-trigger-color, var(--hx-color-neutral-500, #64748b));
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: color var(--hx-transition-fast, 150ms ease);
+    outline: none;
+  }
+
+  .field__trigger:focus-visible {
+    color: var(
+      --hx-date-picker-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+    );
+    background-color: color-mix(
+      in srgb,
+      var(
+          --hx-date-picker-focus-ring-color,
+          var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+        )
+        8%,
+      transparent
+    );
+  }
+
+  .field__trigger:hover:not(:disabled) {
+    color: var(--hx-date-picker-trigger-hover-color, var(--hx-color-neutral-700, #334155));
+    background-color: color-mix(in srgb, var(--hx-color-neutral-900, #0f172a) 4%, transparent);
+  }
+
+  .field__trigger:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ============================================================
+     Calendar popover
+     ============================================================ */
+
+  .calendar {
+    position: absolute;
+    top: calc(100% + var(--hx-space-1, 0.25rem));
+    left: 0;
+    z-index: var(--hx-z-index-dropdown, 1000);
+    min-width: var(--hx-date-picker-calendar-min-width, 18rem);
+    background-color: var(--hx-date-picker-calendar-bg, var(--hx-color-neutral-0, #ffffff));
+    border: var(--hx-border-width-thin, 1px) solid
+      var(--hx-date-picker-calendar-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    border-radius: var(--hx-date-picker-calendar-border-radius, var(--hx-border-radius-lg, 0.5rem));
+    box-shadow: var(
+      --hx-date-picker-calendar-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))
+    );
+    padding: var(--hx-space-3, 0.75rem);
+    outline: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .calendar {
+      animation: calendar-appear var(--hx-transition-fast, 150ms ease) forwards;
+    }
+  }
+
+  @keyframes calendar-appear {
+    0% {
+      opacity: 0;
+      transform: translateY(-0.25rem);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* ============================================================
+     Calendar navigation
+     ============================================================ */
+
+  .calendar__nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: var(--hx-space-3, 0.75rem);
+  }
+
+  :is(.calendar__nav-btn, .calendar__day, .calendar__day-cell, .calendar__weekday) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :is(.calendar__nav-btn, .calendar__day) {
+    width: var(--hx-touch-target-min, 2.75rem);
+    height: var(--hx-touch-target-min, 2.75rem);
+    border: none;
+    border-radius: var(--hx-border-radius-sm, 0.25rem);
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+    transition:
+      background-color var(--hx-transition-fast, 150ms ease),
+      color var(--hx-transition-fast, 150ms ease);
+  }
+
+  .calendar__nav-btn {
+    color: var(--hx-color-neutral-600, #475569);
+    font-size: var(--hx-font-size-lg, 1.125rem);
+    line-height: 1;
+  }
+
+  .calendar__nav-btn:hover {
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    color: var(--hx-color-neutral-900, #0f172a);
+  }
+
+  :is(.calendar__nav-btn, .calendar__day):focus-visible {
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
+      var(
+        --hx-date-picker-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
+    z-index: 1;
+  }
+
+  .calendar__nav-btn:disabled {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .calendar__month-label {
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-color-neutral-800, #1e293b);
+    flex: 1;
+    text-align: center;
+  }
+
+  /* ============================================================
+     Calendar grid
+     ============================================================ */
+
+  .calendar__grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  .calendar__row {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: var(--hx-space-1, 0.25rem);
+  }
+
+  .calendar__weekday {
+    height: var(--hx-size-8, 2rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-color-neutral-500, #64748b);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  /* ============================================================
+     Calendar day cells
+     ============================================================ */
+
+  .calendar__day {
+    color: var(--hx-color-neutral-800, #1e293b);
+    font-size: var(--hx-font-size-sm, 0.875rem);
+    font-family: inherit;
+    position: relative;
+  }
+
+  .calendar__day:hover:not(.calendar__day--disabled):not(.calendar__day--selected) {
+    background-color: var(--hx-color-neutral-100, #f1f5f9);
+    color: var(--hx-color-neutral-900, #0f172a);
+  }
+
+  .calendar__day--selected {
+    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #2563eb));
+    color: var(--hx-date-picker-selected-color, var(--hx-color-neutral-0, #ffffff));
+    font-weight: var(--hx-font-weight-semibold, 600);
+  }
+
+  .calendar__day--selected:hover {
+    background-color: var(--hx-date-picker-selected-hover-bg, var(--hx-color-primary-600, #1d4ed8));
+  }
+
+  .calendar__day--today:not(.calendar__day--selected) {
+    font-weight: var(--hx-font-weight-bold, 700);
+    color: var(--hx-date-picker-today-color, var(--hx-color-primary-600, #1d4ed8));
+  }
+
+  .calendar__day--today:not(.calendar__day--selected)::after {
+    content: '';
+    position: absolute;
+    bottom: 0.2rem;
+    left: 50%;
+    transform: translate(-50%);
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 50%;
+    background-color: currentColor;
+  }
+
+  .calendar__day--disabled {
+    opacity: var(--hx-opacity-disabled, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ============================================================
+     Live region (screen reader announcements)
+     ============================================================ */
+
+  .calendar__live-region {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ============================================================
+     Help text and error message
+     ============================================================ */
+
+  .field__help-text,
+  .field__error {
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    line-height: var(--hx-line-height-normal, 1.5);
+  }
+
+  .field__help-text {
+    color: var(--hx-color-neutral-500, #64748b);
+  }
+
+  .field__error {
+    color: var(--hx-date-picker-error-color, var(--hx-color-error-text, #b91c1c));
+  }
+
+  /* ============================================================
+     Reduced motion
+     ============================================================ */
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__input-wrapper,
+    .field__trigger,
+    .calendar__nav-btn,
+    .calendar__day {
+      transition: none;
+    }
+  }
+
+  /* ============================================================
+     Forced colors (Windows High Contrast)
+     ============================================================ */
+
+  @media (forced-colors: active) {
+    .field__input-wrapper {
+      border: 1px solid ButtonText;
+    }
+
+    .field__input-wrapper:focus-within {
+      outline: 2px solid Highlight;
+      outline-offset: 1px;
+      box-shadow: none;
+    }
+
+    :is(.calendar__day:focus-visible, .calendar__nav-btn:focus-visible) {
+      outline: 2px solid Highlight;
+      box-shadow: none;
+    }
+
+    .calendar__day--selected {
+      background-color: Highlight;
+      color: HighlightText;
+      border: 1px solid Highlight;
+    }
+
+    .calendar__day--today:not(.calendar__day--selected) {
+      border: 2px solid LinkText;
+    }
+
+    .calendar__day--today:not(.calendar__day--selected)::after {
+      display: none;
+    }
+
+    .calendar__day--disabled {
+      color: GrayText;
+    }
+
+    .field--error .field__input-wrapper {
+      border-color: LinkText;
+    }
+  }

package/dist/css/hx-dialog.css

@@ -101,7 +101,7 @@
 
   .dialog__heading {
     margin: 0;
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-dialog-font-family, var(--hx-font-family-sans));
     font-size: var(--hx-font-size-lg);
     font-weight: var(--hx-font-weight-semibold);
     line-height: var(--hx-line-height-tight);
@@ -127,7 +127,7 @@
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
-    color: var(--hx-color-neutral-500, #6b7280);
+    color: var(--hx-color-neutral-500, #64748b);
     font-size: var(--hx-font-size-xl, 1.25rem);
     line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */
     transition:

package/dist/css/hx-drawer.css

@@ -166,7 +166,7 @@
   .drawer-title {
     margin: 0;
     flex: 1 1 auto;
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-drawer-font-family, var(--hx-font-family-sans));
     font-size: var(--hx-font-size-lg);
     font-weight: var(--hx-font-weight-semibold);
     line-height: var(--hx-line-height-tight);

package/dist/css/hx-dropdown.css

@@ -18,7 +18,7 @@
     z-index: var(--hx-dropdown-panel-z-index, 1000);
     min-width: var(--hx-dropdown-panel-min-width, 160px);
     background: var(--hx-dropdown-panel-bg, var(--hx-color-neutral-0, #ffffff));
-    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-dropdown-panel-shadow,

package/dist/css/hx-field-label.css

@@ -9,7 +9,7 @@
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-label-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-font-label-weight, var(--hx-font-weight-medium, 500));
-    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #374151));
+    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-font-label-line-height, var(--hx-line-height-normal, 1.5));
     font-family: var(--hx-font-label-family, var(--hx-font-family-sans, sans-serif));
   }
@@ -22,7 +22,7 @@
   .optional-indicator {
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-normal, 400);
-    color: var(--hx-color-neutral-500, #6b7280);
+    color: var(--hx-color-neutral-500, #64748b);
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */

package/dist/css/hx-field.css

@@ -46,7 +46,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-field-label-color, var(--hx-color-neutral-700, #374151));
+    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
   }
@@ -96,7 +96,7 @@
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #6b7280));
+    color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #64748b));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -113,7 +113,7 @@
   }
 
   .field--error .field__control {
-    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #ef4444));
+    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #dc2626));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }

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 {
@@ -166,7 +166,7 @@
     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:
@@ -176,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 {
@@ -199,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;
   }

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;
+    }
+  }