@helixui/library 3.3.1 → 3.4.0-next.123

package/dist/css/helix-all.css

@@ -258,6 +258,15 @@
     min-width: 0;
   }
 
+  /* (group-6 5.1) Wrapper around the default slot. Carries aria-hidden=true
+     so the visible message text is not double-announced alongside the
+     sr-only announcer. display:contents keeps the wrapper visually
+     transparent so children participate in the parent flex layout as if
+     the wrapper were not there. */
+  .alert__default-slot {
+    display: contents;
+  }
+
   /* ─── Actions ─── */
   /* Hidden by default; shown via JS slotchange detection to avoid invisible  */
   /* margin-top spacing when no actions are slotted.                          */
@@ -721,6 +730,9 @@
   @media (forced-colors: active) {
     .badge {
       border: 1px solid CanvasText;
+      forced-color-adjust: none;
+      background-color: Canvas;
+      color: CanvasText;
     }
 
     .badge--pulse {
@@ -730,6 +742,31 @@
     .badge__remove-button {
       color: ButtonText;
     }
+
+    /* Per-semantic-variant forced-colors fallbacks. The visually-hidden
+       semantic variant label (.badge__variant-label) keeps AT users
+       informed; these blocks restore visual semantic distinction for
+       sighted users in HCM where bg/color collapse to system defaults.
+       Pattern: distinct border-style per variant. */
+    .badge--success {
+      border-style: solid;
+      border-width: 2px;
+    }
+
+    .badge--warning {
+      border-style: dashed;
+      border-width: 2px;
+    }
+
+    .badge--error {
+      border-style: double;
+      border-width: 3px;
+    }
+
+    .badge--info {
+      border-style: dotted;
+      border-width: 2px;
+    }
   }
 /* ── hx-banner ── */
 :host {
@@ -1669,7 +1706,8 @@
     transform: translateY(var(--hx-transform-lift-md, -2px));
   }
 
-  .card--interactive:focus-visible {
+  .card--interactive:focus-visible,
+  :host(:focus-visible) .card--interactive {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
@@ -1768,6 +1806,18 @@
     .card__actions {
       border-top-color: CanvasText;
     }
+
+    /*
+     * Force a system-color focus ring on the interactive card under
+     * Windows High Contrast Mode — the token-driven outline above
+     * collapses to system colors but the explicit Highlight color is
+     * stricter for AT contrast and reaches the host on the modern
+     * host-canonical path (the host is the focused surface).
+     */
+    .card--interactive:focus-visible,
+    :host(:focus-visible) .card--interactive {
+      outline-color: Highlight;
+    }
   }
 /* ── hx-carousel ── */
 :host {
@@ -2080,6 +2130,23 @@
 
   /* ─── Focus Ring ─── */
 
+  /*
+   * Host-focus path: on the modern (IDL element-references) render branch the
+   * host is the tabbable surface (tabindex=0) and the inner input is demoted
+   * to tabindex=-1. Drive the focus ring from ':host(:focus-visible)' so
+   * keyboard users still get a visible affordance. Codex round-11 P1.
+   */
+  :host(:focus-visible) .checkbox__box {
+    outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
+      var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));
+  }
+
+  /*
+   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner
+   * input is the tab target. The native :focus-visible on the input drives
+   * the same visual ring, scoped via the inner-state class.
+   */
   .checkbox__input:focus-visible ~ .checkbox__box {
     outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid
       var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
@@ -2234,6 +2301,7 @@
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .checkbox__box,
     .checkbox__input:focus-visible ~ .checkbox__box {
       outline: 3px solid Highlight;
       outline-offset: 2px;
@@ -2900,6 +2968,31 @@
     pointer-events: none;
     opacity: var(--hx-opacity-disabled, 0.5);
   }
+  /* Slotted label / help / error blocks for cross-shadow naming. */
+  .hx-color-picker__label {
+    display: block;
+    margin-bottom: var(--hx-space-1, 0.25rem);
+    font-weight: var(--hx-font-weight-semibold, 600);
+    color: var(--hx-color-neutral-900, #1a1a1a);
+  }
+  .hx-color-picker__label:empty {
+    display: none;
+  }
+  .hx-color-picker__help {
+    display: block;
+    margin-top: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-neutral-600, #525252);
+  }
+  .hx-color-picker__error {
+    display: block;
+    margin-top: var(--hx-space-1, 0.25rem);
+    font-size: var(--hx-font-size-xs, 0.75rem);
+    color: var(--hx-color-danger-700, #c43e3e);
+  }
+  [hidden] {
+    display: none !important;
+  }
   .trigger {
     display: inline-flex;
     align-items: center;
@@ -4426,7 +4519,8 @@
      Live region (screen reader announcements)
      ============================================================ */
 
-  .calendar__live-region {
+  .calendar__live-region,
+  .field__sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -5062,6 +5156,23 @@
     margin: 0;
   }
 
+  /* ─── Synthesized consumer-description span ─── */
+  /* Visually hidden mirror of consumer-resolved aria-describedby text used by */
+  /* the host-canonical ARIA pipeline. Always present in the shadow tree so AT */
+  /* can resolve the same-root id even when the description is currently empty. */
+
+  .drawer-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
   /* ─── Body ─── */
 
   .drawer-body {
@@ -5997,12 +6108,37 @@ export const helixGridItemStyles = css`
        multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. */
   }
 
+  /* ─── Loading State ─── */
+
+  .button--loading {
+    position: relative;
+    cursor: wait;
+  }
+
+  .button__spinner {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    animation: hx-icon-button-spin var(--hx-duration-spinner, 750ms) linear infinite;
+  }
+
+  @keyframes hx-icon-button-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
   /* ─── Reduced Motion ─── */
 
   @media (prefers-reduced-motion: reduce) {
     .button {
       transition: none;
     }
+
+    .button__spinner {
+      animation: none;
+      opacity: var(--hx-opacity-muted, 0.6);
+    }
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */
@@ -6030,6 +6166,11 @@ export const helixGridItemStyles = css`
     :host([disabled]) {
       opacity: 1;
     }
+
+    .button--loading .button__spinner {
+      stroke: ButtonText;
+      forced-color-adjust: none;
+    }
   }
 /* ── hx-image ── */
 :host {
@@ -6407,6 +6548,11 @@ export const helixGridItemStyles = css`
   /* ─── Forced Colors (Windows High Contrast) ─── */
 
   @media (forced-colors: active) {
+    .meter:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: var(--hx-focus-ring-offset, 2px);
+    }
+
     .meter__track {
       border: 1px solid CanvasText;
     }
@@ -8298,6 +8444,11 @@ export const helixGridItemStyles = css`
 /* ─── 3-tier token cascade: component → semantic → hardcoded fallback ─── */
   :host {
     display: block;
+    /* Round-3 finding 1: host is the canonical combobox surface, so it owns
+       keyboard focus. Suppress the UA default outline; the custom focus ring
+       is painted on the inner trigger via :host(:focus-visible)
+       .field__trigger so visual feedback follows the host's focus state. */
+    outline: none;
 
     /* Background & foreground */
     --_bg: var(--hx-select-bg, var(--hx-color-surface-default, #ffffff));
@@ -8374,6 +8525,12 @@ export const helixGridItemStyles = css`
   }
 
   .field__trigger {
+    /* Round-3 finding 1 / CodeRabbit F1: trigger is a <button type="button">
+       (labelable) so native <label for> click activation works for mouse
+       users. Reset native button chrome before applying field styles. */
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -8384,6 +8541,7 @@ export const helixGridItemStyles = css`
     border-radius: var(--_border-radius);
     background-color: var(--_bg);
     color: var(--_color);
+    font: inherit;
     font-family: inherit;
     font-size: var(--hx-font-size-md, 1rem);
     line-height: var(--hx-line-height-normal, 1.5);
@@ -8396,6 +8554,11 @@ export const helixGridItemStyles = css`
     outline: none;
   }
 
+  /* Round-3 finding 1: host is the canonical focusable surface. Both the
+     :host(:focus-visible) descendant selector AND the legacy
+     .field__trigger:focus-visible (kept for forced-colors regression test
+     parity) paint the focus ring on the visual trigger. */
+  :host(:focus-visible) .field__trigger,
   .field__trigger:focus-visible {
     border-color: var(--_focus-ring-color);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
@@ -8464,6 +8627,7 @@ export const helixGridItemStyles = css`
     border-color: var(--_error-color);
   }
 
+  :host(:focus-visible) .field--error .field__trigger,
   .field--error .field__trigger:focus-visible {
     border-color: var(--_error-color);
     box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
@@ -8597,6 +8761,7 @@ export const helixGridItemStyles = css`
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .field__trigger,
     .field__trigger:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;
@@ -10544,6 +10709,22 @@ export const helixStructuredListRowStyles = css`
     appearance: none;
   }
 
+  /*
+   * Host-focus path: on the modern (IDL element-references) render branch the
+   * host is the tabbable surface (tabindex=0) and the inner track button is
+   * demoted to tabindex=-1. Drive the focus ring from ':host(:focus-visible)'
+   * so keyboard users still see a visible affordance. Codex round-11 P1.
+   */
+  :host(:focus-visible) .switch__track {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /*
+   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner
+   * track button is the tab target. Native :focus-visible drives the ring.
+   */
   .switch__track:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
@@ -10681,6 +10862,7 @@ export const helixStructuredListRowStyles = css`
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .switch__track,
     .switch__track:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;
@@ -11104,11 +11286,34 @@ export const helixTableSectionBaseStyles = css`
   @media (forced-colors: active) {
     .tag {
       border-color: CanvasText;
+      forced-color-adjust: none;
+      background-color: Canvas;
+      color: CanvasText;
     }
 
     .tag__remove-button {
       color: ButtonText;
     }
+
+    /* Per-semantic-variant forced-colors fallbacks. The visually-hidden
+       semantic variant label (.tag__variant-label) keeps AT users
+       informed; these blocks restore visual semantic distinction for
+       sighted users in HCM where bg/color collapse to system defaults.
+       Pattern: distinct border-style per variant (matches hx-badge). */
+    .tag--success {
+      border-style: solid;
+      border-width: 2px;
+    }
+
+    .tag--warning {
+      border-style: dashed;
+      border-width: 2px;
+    }
+
+    .tag--danger {
+      border-style: double;
+      border-width: 3px;
+    }
   }
 /* ── hx-text ── */
 :host {
@@ -12138,6 +12343,17 @@ export const helixTableSectionBaseStyles = css`
   .field__error {
     color: var(--hx-time-picker-error-color, var(--hx-color-error-text, #c92a2a));
   }
+  .field__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
   @media (forced-colors: active) {
     .field__combobox {
       border-color: ButtonText;
@@ -12483,6 +12699,22 @@ export const helixToastStackStyles = css`
     -webkit-user-select: none;
   }
 
+  /*
+   * Host-focus path: on the modern (IDL element-references) render branch the
+   * host is the tabbable surface (tabindex=0) and the inner <button> is
+   * demoted to tabindex=-1. Drive the focus ring from ':host(:focus-visible)'
+   * so keyboard users still see a visible affordance. Codex round-11 P1.
+   */
+  :host(:focus-visible) .button {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
+  /*
+   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner
+   * <button> is the tab target. Native :focus-visible drives the ring.
+   */
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-toggle-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
@@ -12681,6 +12913,7 @@ export const helixToastStackStyles = css`
       border: 2px solid ButtonText;
     }
 
+    :host(:focus-visible) .button,
     .button:focus-visible {
       outline: 3px solid Highlight;
       outline-offset: 2px;

package/dist/css/helix-core.css

@@ -337,6 +337,9 @@
   @media (forced-colors: active) {
     .badge {
       border: 1px solid CanvasText;
+      forced-color-adjust: none;
+      background-color: Canvas;
+      color: CanvasText;
     }
 
     .badge--pulse {
@@ -346,6 +349,31 @@
     .badge__remove-button {
       color: ButtonText;
     }
+
+    /* Per-semantic-variant forced-colors fallbacks. The visually-hidden
+       semantic variant label (.badge__variant-label) keeps AT users
+       informed; these blocks restore visual semantic distinction for
+       sighted users in HCM where bg/color collapse to system defaults.
+       Pattern: distinct border-style per variant. */
+    .badge--success {
+      border-style: solid;
+      border-width: 2px;
+    }
+
+    .badge--warning {
+      border-style: dashed;
+      border-width: 2px;
+    }
+
+    .badge--error {
+      border-style: double;
+      border-width: 3px;
+    }
+
+    .badge--info {
+      border-style: dotted;
+      border-width: 2px;
+    }
   }
 /* ── hx-button ── */
 :host {
@@ -1001,7 +1029,8 @@
     transform: translateY(var(--hx-transform-lift-md, -2px));
   }
 
-  .card--interactive:focus-visible {
+  .card--interactive:focus-visible,
+  :host(:focus-visible) .card--interactive {
     outline: var(--hx-focus-ring-width, 2px) solid
       var(--hx-card-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
@@ -1100,6 +1129,18 @@
     .card__actions {
       border-top-color: CanvasText;
     }
+
+    /*
+     * Force a system-color focus ring on the interactive card under
+     * Windows High Contrast Mode — the token-driven outline above
+     * collapses to system colors but the explicit Highlight color is
+     * stricter for AT contrast and reaches the host on the modern
+     * host-canonical path (the host is the focused surface).
+     */
+    .card--interactive:focus-visible,
+    :host(:focus-visible) .card--interactive {
+      outline-color: Highlight;
+    }
   }
 /* ── hx-divider ── */
 :host {
@@ -1430,12 +1471,37 @@
        multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. */
   }
 
+  /* ─── Loading State ─── */
+
+  .button--loading {
+    position: relative;
+    cursor: wait;
+  }
+
+  .button__spinner {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    animation: hx-icon-button-spin var(--hx-duration-spinner, 750ms) linear infinite;
+  }
+
+  @keyframes hx-icon-button-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
   /* ─── Reduced Motion ─── */
 
   @media (prefers-reduced-motion: reduce) {
     .button {
       transition: none;
     }
+
+    .button__spinner {
+      animation: none;
+      opacity: var(--hx-opacity-muted, 0.6);
+    }
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */
@@ -1463,6 +1529,11 @@
     :host([disabled]) {
       opacity: 1;
     }
+
+    .button--loading .button__spinner {
+      stroke: ButtonText;
+      forced-color-adjust: none;
+    }
   }
 /* ── hx-image ── */
 :host {
@@ -2007,11 +2078,34 @@
   @media (forced-colors: active) {
     .tag {
       border-color: CanvasText;
+      forced-color-adjust: none;
+      background-color: Canvas;
+      color: CanvasText;
     }
 
     .tag__remove-button {
       color: ButtonText;
     }
+
+    /* Per-semantic-variant forced-colors fallbacks. The visually-hidden
+       semantic variant label (.tag__variant-label) keeps AT users
+       informed; these blocks restore visual semantic distinction for
+       sighted users in HCM where bg/color collapse to system defaults.
+       Pattern: distinct border-style per variant (matches hx-badge). */
+    .tag--success {
+      border-style: solid;
+      border-width: 2px;
+    }
+
+    .tag--warning {
+      border-style: dashed;
+      border-width: 2px;
+    }
+
+    .tag--danger {
+      border-style: double;
+      border-width: 3px;
+    }
   }
 /* ── hx-text ── */
 :host {

package/dist/css/helix-feedback.css

@@ -109,6 +109,15 @@
     min-width: 0;
   }
 
+  /* (group-6 5.1) Wrapper around the default slot. Carries aria-hidden=true
+     so the visible message text is not double-announced alongside the
+     sr-only announcer. display:contents keeps the wrapper visually
+     transparent so children participate in the parent flex layout as if
+     the wrapper were not there. */
+  .alert__default-slot {
+    display: contents;
+  }
+
   /* ─── Actions ─── */
   /* Hidden by default; shown via JS slotchange detection to avoid invisible  */
   /* margin-top spacing when no actions are slotted.                          */
@@ -574,6 +583,11 @@
   /* ─── Forced Colors (Windows High Contrast) ─── */
 
   @media (forced-colors: active) {
+    .meter:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: var(--hx-focus-ring-offset, 2px);
+    }
+
     .meter__track {
       border: 1px solid CanvasText;
     }