@helixui/library 1.1.2-next.1 → 1.1.2-next.11

package/dist/css/helix-all.css

@@ -450,11 +450,28 @@
   }
 
   /* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,
-     leaving no visual boundary. Add a border so the avatar remains perceivable.
+     leaving no visual boundary. Restore a visible border, explicit foreground, and
+     background so the avatar container, initials, and fallback icon all remain
+     perceivable at any contrast level.
      WCAG 1.4.11 Non-text Contrast (Level AA). */
   @media (forced-colors: active) {
     .avatar {
+      forced-color-adjust: none;
       border: 2px solid ButtonText;
+      background-color: Canvas;
+      color: CanvasText;
+    }
+
+    .avatar__initials {
+      color: CanvasText;
+    }
+
+    .avatar__fallback-icon {
+      color: CanvasText;
+    }
+
+    .avatar__image {
+      forced-color-adjust: auto;
     }
   }
 /* ── hx-badge ── */
@@ -578,17 +595,21 @@
     display: none;
   }
 
+  .badge--dot slot[name='prefix'] {
+    display: none;
+  }
+
   /* ─── Pulse Animation ─── */
 
   @keyframes hx-badge-pulse {
     0%,
     100% {
       opacity: 1;
-      box-shadow: 0 0 0 0 var(--hx-badge-pulse-color, currentColor);
+      box-shadow: 0 0 0 2px var(--hx-badge-pulse-color, currentColor);
     }
     50% {
       opacity: var(--hx-opacity-75, 0.75);
-      box-shadow: 0 0 0 4px transparent;
+      box-shadow: 0 0 0 6px transparent;
     }
   }
 
@@ -1132,6 +1153,40 @@
   .button__label {
     flex: 1 1 auto;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .button {
+      /* Ensure button outline is visible in Windows High Contrast mode.
+         ButtonText/ButtonFace are system colors recognized by the browser. */
+      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;
+    }
+
+    .button--loading .button__spinner {
+      /* Ensure spinner is visible in HCM */
+      forced-color-adjust: auto;
+    }
+  }
 /* ── hx-button-group ── */
 :host {
     display: inline-flex;
@@ -2077,7 +2132,8 @@
   }
 
   .clinical-status__dismiss-button:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
@@ -2122,7 +2178,8 @@
   }
 
   .clinical-status__acknowledge-button:focus-visible {
-    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-focus-ring-color, var(--hx-color-focus, #2563eb));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -4278,6 +4335,8 @@ export const helixGridItemStyles = css`
       0 2px 4px -2px rgb(0 0 0 / 0.1)
     );
     min-width: var(--hx-menu-min-width, 10rem);
+    max-height: var(--hx-menu-max-height, 20rem);
+    overflow-y: auto;
     outline: none;
   }
 /* ── hx-meter ── */
@@ -5226,6 +5285,7 @@ export const helixGridItemStyles = css`
     --_value-color: var(--hx-patient-banner-value-color, var(--hx-color-neutral-900, #111827));
     --_value-font-size: var(--hx-patient-banner-value-font-size, var(--hx-font-size-sm, 0.875rem));
     --_photo-size: var(--hx-patient-banner-photo-size, var(--hx-space-10, 2.5rem));
+    --_photo-bg: var(--hx-patient-banner-photo-bg, var(--hx-color-neutral-200, #e5e7eb));
   }
 
   * {
@@ -5243,6 +5303,7 @@ export const helixGridItemStyles = css`
     border-bottom: var(--hx-border-width-thin, 1px) solid var(--_border-color);
     font-family: var(--_font-family);
     width: 100%;
+    position: relative;
   }
 
   /* ─── Photo Area ─── */
@@ -5251,12 +5312,15 @@ export const helixGridItemStyles = css`
     flex-shrink: 0;
     width: var(--_photo-size);
     height: var(--_photo-size);
+    /* Minimum 44x44px touch target for interactive photo content. */
+    min-width: 44px;
+    min-height: 44px;
     border-radius: var(--hx-border-radius-full, 9999px);
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: var(--hx-color-neutral-200, #e5e7eb);
+    background-color: var(--_photo-bg);
   }
 
   /* ─── Fields Grid ─── */
@@ -5302,9 +5366,8 @@ export const helixGridItemStyles = css`
   :host([aria-invalid='true']) .banner {
     border-bottom-color: var(--hx-color-error-400, #f87171);
     background-color: var(--hx-color-error-50, #fef2f2);
-    /* Darken label color to maintain 4.5:1 contrast on error-50 background */
+    /* Darken label color to maintain 4.5:1 contrast on error-50 background. */
     --_label-color: var(--hx-patient-banner-label-color, var(--hx-color-neutral-700, #374151));
-    position: relative;
   }
 
   :host([aria-invalid='true']) .banner::before {
@@ -5318,6 +5381,30 @@ export const helixGridItemStyles = css`
     background-color: var(--hx-color-error-500, #ef4444);
     border-radius: 0;
   }
+
+  /* ─── Visually-hidden violation live region ─── */
+  /* Announces identifier rule violations to screen readers without visible text. */
+
+  .violation-message {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  /* ─── Motion reduction ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
 /* ── hx-phi-field ── */
 :host {
     display: inline-flex;
@@ -5396,6 +5483,18 @@ export const helixGridItemStyles = css`
     pointer-events: none;
   }
 
+  /* ─── Disabled State ─── */
+
+  :host([disabled]) {
+    opacity: var(--hx-phi-field-disabled-opacity, var(--hx-opacity-50, 0.5));
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  .phi-field--disabled .phi-field__toggle {
+    cursor: not-allowed;
+  }
+
   /* ─── Reduced Motion ─── */
 
   @media (prefers-reduced-motion: reduce) {
@@ -5944,8 +6043,45 @@ export const helixGridItemStyles = css`
     }
   }
 /* ── hx-select ── */
-:host {
+/* ─── 3-tier token cascade: component → semantic → hardcoded fallback ─── */
+  :host {
     display: block;
+
+    /* Background & foreground */
+    --_bg: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
+    --_color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));
+    --_placeholder-color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #adb5bd));
+
+    /* Label */
+    --_label-color: var(--hx-select-label-color, var(--hx-color-neutral-700, #343a40));
+
+    /* Border */
+    --_border-color: var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
+    --_border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
+
+    /* Focus ring */
+    --_focus-ring-color: var(
+      --hx-select-focus-ring-color,
+      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+    );
+
+    /* Error */
+    --_error-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
+
+    /* Chevron */
+    --_chevron-color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #6c757d));
+    --_chevron-size: var(--hx-select-chevron-size, 0.5rem);
+
+    /* Listbox */
+    --_listbox-bg: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));
+    --_option-hover-bg: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+    --_option-selected-bg: var(
+      --hx-select-option-selected-bg,
+      var(--hx-color-primary-100, #dbeafe)
+    );
+
+    /* Typography */
+    --_font-family: var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));
   }
 
   :host([disabled]) {
@@ -5961,7 +6097,7 @@ export const helixGridItemStyles = css`
     display: flex;
     flex-direction: column;
     gap: var(--hx-space-1, 0.25rem);
-    font-family: var(--hx-select-font-family, var(--hx-font-family-sans, sans-serif));
+    font-family: var(--_font-family);
     position: relative;
   }
 
@@ -5971,7 +6107,7 @@ export const helixGridItemStyles = css`
     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-select-label-color, var(--hx-color-neutral-700, #343a40));
+    color: var(--_label-color);
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
@@ -5992,11 +6128,10 @@ export const helixGridItemStyles = css`
     gap: var(--hx-space-2, 0.5rem);
     width: 100%;
     min-height: var(--hx-input-height-md, var(--hx-size-10, 2.5rem));
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
-    border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-select-bg, var(--hx-color-neutral-0, #ffffff));
-    color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));
+    border: var(--hx-border-width-thin, 1px) solid var(--_border-color);
+    border-radius: var(--_border-radius);
+    background-color: var(--_bg);
+    color: var(--_color);
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -6011,18 +6146,11 @@ export const helixGridItemStyles = css`
 
   .field__trigger:focus,
   .field__trigger:focus-visible {
-    border-color: var(
-      --hx-select-focus-ring-color,
-      var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-    );
+    border-color: var(--_focus-ring-color);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(
-            --hx-select-focus-ring-color,
-            var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
-          )
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        var(--_focus-ring-color) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -6052,15 +6180,15 @@ export const helixGridItemStyles = css`
   }
 
   .field__trigger--placeholder .field__trigger-value {
-    color: var(--hx-select-placeholder-color, var(--hx-color-neutral-400, #adb5bd));
+    color: var(--_placeholder-color);
   }
 
   .field__chevron {
     flex-shrink: 0;
-    width: 12px;
-    height: 8px;
+    width: calc(var(--_chevron-size) * 1.5);
+    height: var(--_chevron-size);
     position: relative;
-    color: var(--hx-select-chevron-color, var(--hx-color-neutral-500, #6c757d));
+    color: var(--_chevron-color);
     pointer-events: none;
     transition: transform var(--hx-transition-fast, 150ms ease);
   }
@@ -6069,11 +6197,11 @@ export const helixGridItemStyles = css`
     content: '';
     position: absolute;
     top: 0;
-    left: 2px;
-    width: 7px;
-    height: 7px;
-    border-inline-end: 1.5px solid currentColor;
-    border-bottom: 1.5px solid currentColor;
+    left: var(--hx-space-px, 2px);
+    width: var(--_chevron-size);
+    height: var(--_chevron-size);
+    border-inline-end: var(--hx-border-width-thin, 1.5px) solid currentColor;
+    border-bottom: var(--hx-border-width-thin, 1.5px) solid currentColor;
     transform: rotate(45deg);
   }
 
@@ -6082,17 +6210,16 @@ export const helixGridItemStyles = css`
   }
 
   .field--error .field__trigger {
-    border-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--_error-color);
   }
 
   .field--error .field__trigger:focus,
   .field--error .field__trigger:focus-visible {
-    border-color: var(--hx-select-error-color, var(--hx-color-error-500, #dc3545));
+    border-color: var(--_error-color);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
-        var(--hx-select-error-color, var(--hx-color-error-500, #dc3545))
-          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
+        var(--_error-color) calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -6103,10 +6230,9 @@ export const helixGridItemStyles = css`
     left: 0;
     right: 0;
     z-index: var(--hx-z-index-dropdown, 1000);
-    background-color: var(--hx-select-listbox-bg, var(--hx-color-neutral-0, #ffffff));
-    border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-select-border-color, var(--hx-color-neutral-300, #ced4da));
-    border-radius: var(--hx-select-border-radius, var(--hx-border-radius-md, 0.375rem));
+    background-color: var(--_listbox-bg);
+    border: var(--hx-border-width-thin, 1px) solid var(--_border-color);
+    border-radius: var(--_border-radius);
     box-shadow: var(
       --hx-select-listbox-shadow,
       0 4px 16px var(--hx-overlay-neutral-12, rgba(13, 17, 23, 0.12))
@@ -6133,7 +6259,7 @@ export const helixGridItemStyles = css`
     gap: var(--hx-space-2, 0.5rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-select-color, var(--hx-color-neutral-800, #212529));
+    color: var(--_color);
     cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
@@ -6141,23 +6267,23 @@ export const helixGridItemStyles = css`
   }
 
   .field__option:hover {
-    background-color: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+    background-color: var(--_option-hover-bg);
   }
 
   .field__option--selected {
-    background-color: var(--hx-select-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
+    background-color: var(--_option-selected-bg);
     font-weight: var(--hx-font-weight-medium, 500);
   }
 
   .field__option--focused {
-    background-color: var(--hx-select-option-hover-bg, var(--hx-color-primary-50, #eff6ff));
+    background-color: var(--_option-hover-bg);
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-select-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));
+      var(--_focus-ring-color, var(--hx-color-primary-500));
     outline-offset: var(--hx-select-option-focus-ring-offset, -2px);
   }
 
   .field__option--focused.field__option--selected {
-    background-color: var(--hx-select-option-selected-bg, var(--hx-color-primary-100, #dbeafe));
+    background-color: var(--_option-selected-bg);
   }
 
   .field__option--disabled {
@@ -6176,7 +6302,7 @@ export const helixGridItemStyles = css`
   .field__no-options {
     padding: var(--hx-space-3, 0.75rem);
     text-align: center;
-    color: var(--hx-color-neutral-400, #adb5bd);
+    color: var(--_placeholder-color);
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
 
@@ -6215,6 +6341,13 @@ export const helixGridItemStyles = css`
 :host {
     display: block;
     height: 100%;
+    /* Mirror the nav background and text on the host so slotted light-DOM
+       content (header, footer slots) inherits the correct dark surface color.
+       Without this, axe-core cannot resolve the background for slotted nodes
+       and evaluates their text against the page white background, producing
+       false-positive color-contrast violations (WCAG 2.1 AA). */
+    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
   }
 
   * {
@@ -6228,12 +6361,12 @@ export const helixGridItemStyles = css`
     flex-direction: column;
     height: 100%;
     width: var(--hx-side-nav-width, 16rem);
-    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #111827));
-    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f3f4f6));
+    background-color: var(--hx-side-nav-bg, var(--hx-color-neutral-900, #0f172a));
+    color: var(--hx-side-nav-color, var(--hx-color-neutral-100, #f1f5f9));
     transition: width var(--hx-transition-normal, 300ms) ease;
     overflow: hidden;
     border-inline-end: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #374151));
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
   }
 
   /* ─── Collapsed State ─── */
@@ -6251,7 +6384,7 @@ export const helixGridItemStyles = css`
     flex-shrink: 0;
     min-height: var(--hx-space-14, 3.5rem);
     border-bottom: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #374151));
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
     overflow: hidden;
   }
 
@@ -6278,7 +6411,7 @@ export const helixGridItemStyles = css`
     flex-shrink: 0;
     min-height: var(--hx-space-14, 3.5rem);
     border-top: var(--hx-border-width-thin, 1px) solid
-      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #374151));
+      var(--hx-side-nav-border-color, var(--hx-color-neutral-700, #334155));
     overflow: hidden;
   }
 
@@ -6301,7 +6434,7 @@ export const helixGridItemStyles = css`
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     background: transparent;
-    color: var(--hx-side-nav-toggle-color, var(--hx-color-neutral-400, #9ca3af));
+    color: var(--hx-side-nav-toggle-color, var(--hx-color-neutral-400, #94a3b8));
     cursor: pointer;
     transition:
       background-color var(--hx-transition-fast, 150ms) ease,
@@ -6313,7 +6446,7 @@ export const helixGridItemStyles = css`
       --hx-overlay-white-10,
       rgba(255, 255, 255, 0.1)
     ); /* fallback for browsers without color-mix() */
-    color: var(--hx-color-neutral-100, #f3f4f6);
+    color: var(--hx-color-neutral-100, #f1f5f9);
   }
 
   @supports (color: color-mix(in srgb, red 50%, blue)) {
@@ -7530,9 +7663,12 @@ export const helixGridItemStyles = css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    gap: var(--hx-space-2, 0.5rem);
     position: relative;
     flex-shrink: 0;
     --_dot-color: var(--hx-status-indicator-color-default, var(--hx-color-neutral-300, #ced4da));
+    /* Default size (md) — always defined so .indicator never collapses to 0x0 */
+    --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));
   }
 
   .indicator {
@@ -7587,18 +7723,44 @@ export const helixGridItemStyles = css`
     }
   }
 
+  /* ─── Visible label (part="label") ─── */
+
+  .indicator__label {
+    font-size: var(
+      --hx-status-indicator-label-font-size,
+      var(--hx-font-size-sm, var(--hx-text-sm, 0.875rem))
+    );
+    color: var(--hx-status-indicator-label-color, var(--hx-color-neutral-700, #374151));
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  /* ─── aria-live announcement region (visually hidden) ─── */
+
+  .indicator__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;
+  }
+
   /* ─── Size Variants ─── */
 
-  :host([size='sm']) {
+  :host([hx-size='sm']) {
     --_indicator-size: var(--hx-status-indicator-size-sm, var(--hx-space-2, 0.5rem));
   }
 
-  :host([size='md']) {
+  :host([hx-size='md']) {
     --_indicator-size: var(--hx-status-indicator-size-md, var(--hx-space-3, 0.75rem));
   }
 
-  :host([size='lg']) {
-    --_indicator-size: var(--hx-status-indicator-size-lg, var(--hx-size-4));
+  :host([hx-size='lg']) {
+    --_indicator-size: var(--hx-status-indicator-size-lg, var(--hx-space-4, 1rem));
   }
 
   /* ─── Status Colors ─── */

package/dist/css/helix-core.css

@@ -110,11 +110,28 @@
   }
 
   /* P1-B: Windows High Contrast Mode — avatar background is stripped by the system,
-     leaving no visual boundary. Add a border so the avatar remains perceivable.
+     leaving no visual boundary. Restore a visible border, explicit foreground, and
+     background so the avatar container, initials, and fallback icon all remain
+     perceivable at any contrast level.
      WCAG 1.4.11 Non-text Contrast (Level AA). */
   @media (forced-colors: active) {
     .avatar {
+      forced-color-adjust: none;
       border: 2px solid ButtonText;
+      background-color: Canvas;
+      color: CanvasText;
+    }
+
+    .avatar__initials {
+      color: CanvasText;
+    }
+
+    .avatar__fallback-icon {
+      color: CanvasText;
+    }
+
+    .avatar__image {
+      forced-color-adjust: auto;
     }
   }
 /* ── hx-badge ── */
@@ -238,17 +255,21 @@
     display: none;
   }
 
+  .badge--dot slot[name='prefix'] {
+    display: none;
+  }
+
   /* ─── Pulse Animation ─── */
 
   @keyframes hx-badge-pulse {
     0%,
     100% {
       opacity: 1;
-      box-shadow: 0 0 0 0 var(--hx-badge-pulse-color, currentColor);
+      box-shadow: 0 0 0 2px var(--hx-badge-pulse-color, currentColor);
     }
     50% {
       opacity: var(--hx-opacity-75, 0.75);
-      box-shadow: 0 0 0 4px transparent;
+      box-shadow: 0 0 0 6px transparent;
     }
   }
 
@@ -553,6 +574,40 @@
   .button__label {
     flex: 1 1 auto;
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    .button {
+      /* Ensure button outline is visible in Windows High Contrast mode.
+         ButtonText/ButtonFace are system colors recognized by the browser. */
+      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;
+    }
+
+    .button--loading .button__spinner {
+      /* Ensure spinner is visible in HCM */
+      forced-color-adjust: auto;
+    }
+  }
 /* ── hx-button-group ── */
 :host {
     display: inline-flex;