@helixui/library 3.6.0 → 3.8.0-next.145

package/dist/css/helix-all.css

@@ -136,6 +136,18 @@
     flex-shrink: 0;
   }
 
+  /*
+   * AAA 2.4.13 Focus Appearance — enforce a ≥2px focus ring on slotted
+   * natives (e.g. bare <button>, <a>) so consumers who slot non-HELiX
+   * controls inherit the same indicator as the HELiX components do.
+   * Token-driven: --hx-focus-ring-width resolves to 2px (default).
+   */
+  ::slotted(:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-action-bar-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   /* ─── High Contrast Mode (forced-colors) ─── */
 
   @media (forced-colors: active) {
@@ -233,10 +245,8 @@
     color: var(--hx-alert-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
-  .alert__icon svg {
-    width: var(--hx-space-5, 1.25rem);
-    height: var(--hx-space-5, 1.25rem);
-    fill: currentColor;
+  .alert__icon .alert__glyph {
+    --hx-icon-size: var(--hx-space-5, 1.25rem);
   }
 
   /* ─── Title ─── */
@@ -323,10 +333,8 @@
     opacity: 1;
   }
 
-  .alert__close-button svg {
-    width: var(--hx-space-4, 1rem);
-    height: var(--hx-space-4, 1rem);
-    fill: currentColor;
+  .alert__close-button .alert__glyph {
+    --hx-icon-size: var(--hx-space-4, 1rem);
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -483,8 +491,7 @@
   /* ─── Fallback Icon ─── */
 
   .avatar__fallback-icon {
-    width: 60%;
-    height: 60%;
+    --hx-icon-size: 60%;
     color: var(--hx-avatar-color, var(--hx-color-primary-700, #0f6363));
   }
 
@@ -538,8 +545,8 @@
     justify-content: center;
     gap: var(--hx-space-1, 0.25rem);
     border-radius: var(--hx-badge-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-badge-bg, var(--hx-color-primary-500, #429797));
-    color: var(--hx-badge-color, var(--hx-color-text-on-primary, #0d1825));
+    background-color: var(--hx-badge-bg, var(--hx-color-action-primary-bg, #0f7078));
+    color: var(--hx-badge-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-badge-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-badge-font-weight, var(--hx-font-weight-semibold, 600));
     line-height: var(--hx-line-height-tight, 1.25);
@@ -571,11 +578,11 @@
   /* ─── Style Variants ─── */
 
   .badge--primary {
-    --hx-badge-bg: var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797));
-    --hx-badge-color: var(--hx-badge-primary-color, var(--hx-color-text-on-primary, #0d1825));
+    --hx-badge-bg: var(--hx-badge-primary-bg, var(--hx-color-action-primary-bg, #0f7078));
+    --hx-badge-color: var(--hx-badge-primary-color, var(--hx-color-text-on-primary, #ffffff));
     --hx-badge-pulse-color-internal: var(
       --hx-badge-pulse-color,
-      var(--hx-badge-primary-bg, var(--hx-color-primary-500, #429797))
+      var(--hx-badge-primary-bg, var(--hx-color-action-primary-bg, #0f7078))
     );
   }
 
@@ -768,6 +775,11 @@
       border-width: 2px;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated remove-button SVG. */
+  .badge__remove-glyph {
+    --hx-icon-size: 10px;
+  }
 /* ── hx-banner ── */
 :host {
     display: block;
@@ -829,10 +841,8 @@
     color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
-  .banner__icon svg {
-    width: var(--hx-space-5, 1.25rem);
-    height: var(--hx-space-5, 1.25rem);
-    fill: currentColor;
+  .banner__icon .banner__glyph {
+    --hx-icon-size: var(--hx-space-5, 1.25rem);
   }
 
   /* ─── Message ─── */
@@ -912,10 +922,8 @@
     opacity: 1;
   }
 
-  .banner__close-button svg {
-    width: var(--hx-space-4, 1rem);
-    height: var(--hx-space-4, 1rem);
-    fill: currentColor;
+  .banner__close-button .banner__glyph {
+    --hx-icon-size: var(--hx-space-4, 1rem);
   }
 
   /* ─── Variant: info ─── */
@@ -1126,7 +1134,10 @@
   .button--md {
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     font-size: var(--hx-font-size-md, 1rem);
-    min-height: var(--hx-size-10, 2.5rem);
+    /* WCAG 2.5.5 AAA Target Size (Enhanced): 44×44 minimum.
+       Bound to --hx-touch-target-min so the default md variant clears the
+       AAA-strict floor without requiring consumers to opt into sm or lg. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
 
   .button--lg {
@@ -1344,9 +1355,16 @@
      (primary-400, light teal). The base :host([inverted]) .button rule binds
      color to text.inverse, which flips by mode (neutral-0 in light, neutral-900
      in dark). On a permanent light-teal fill, white text drops to 2.4:1 in
-     light mode (AA fail). Pin color to text.on-primary (neutral-900, no
-     dark-mode flip) for both hover and active so the foreground is dark in
-     both modes — neutral-900 on primary-400 = 7.27:1 (AA pass).
+     light mode (AA fail). Pin color to neutral-900 directly (the primitive,
+     not text.primary which flips to neutral-100 in dark mode and would regress
+     the pair to ~2.10:1) so the foreground is dark in both modes —
+     neutral-900 on primary-400 = 7.27:1 AAA in Apex; AAA across all 6 brands.
+     Decoupled from text.on-primary in 3.3.x because text.on-primary now
+     resolves to neutral-0 (white) for the AAA-large coordinated pair on
+     primary-600; using it here would regress this pair to ~2.45:1 (Apex)
+     since primary-400 is light teal. neutral-900 is the correct anchor — it
+     is the primitive that both light/dark text.primary used to resolve to,
+     never flipped by mode/brand.
      Pressed === hover visually in inverted mode is acceptable UX (the
      transient absence of pointer over the button signals release).
      The fallback chain wraps --hx-button-active-bg (highest precedence) and
@@ -1361,7 +1379,7 @@
     );
     color: var(
       --hx-button-inverted-primary-interactive-color,
-      var(--hx-color-text-on-primary, #0d1825)
+      var(--hx-color-neutral-900, #0d1825)
     );
   }
 
@@ -1892,9 +1910,12 @@
     cursor: not-allowed;
   }
 
-  .nav-btn svg {
-    width: 1.25em;
-    height: 1.25em;
+  .nav-btn .carousel__nav-glyph {
+    --hx-icon-size: 1.25em;
+  }
+
+  .play-pause-btn .carousel__autoplay-glyph {
+    --hx-icon-size: 1em;
   }
 
   /* ─── Play/Pause ─── */
@@ -2130,6 +2151,16 @@
 
   /* ─── Focus Ring ─── */
 
+  /*
+   * Suppress the browser default ~1px host outline. Without this, the formal
+   * AAA audit harness (which measures computed outline-width on the focused
+   * host) records a sub-2px outline and reports WCAG 2.4.13 Partially Supports.
+   * The visual focus indicator is rendered on the inner .checkbox__box below.
+   */
+  :host {
+    outline: none;
+  }
+
   /*
    * 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
@@ -2156,15 +2187,21 @@
   /* ─── Checked State ─── */
 
   .checkbox--checked .checkbox__box {
-    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
-    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-action-primary-bg, #0f7078));
+    border-color: var(
+      --hx-checkbox-checked-border-color,
+      var(--hx-color-action-primary-bg, #0f7078)
+    );
   }
 
   /* ─── Indeterminate State ─── */
 
   .checkbox--indeterminate .checkbox__box {
-    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));
-    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-action-primary-bg, #0f7078));
+    border-color: var(
+      --hx-checkbox-checked-border-color,
+      var(--hx-color-action-primary-bg, #0f7078)
+    );
   }
 
   /* ─── Error State ─── */
@@ -2197,17 +2234,12 @@
     border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));
   }
 
-  /* ─── Checkmark Icon ─── */
+  /* ─── Checkmark Icon (hx-icon library="helix") ─── */
 
   .checkbox__icon {
     display: none;
-    width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
-    height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
-    fill: none;
-    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));
-    stroke-width: 2.5;
-    stroke-linecap: round;
-    stroke-linejoin: round;
+    --hx-icon-size: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);
+    --hx-icon-color: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));
   }
 
   .checkbox--checked .checkbox__icon--check {
@@ -2314,7 +2346,7 @@
     }
 
     .checkbox__icon {
-      stroke: HighlightText;
+      --hx-icon-color: HighlightText;
     }
 
     .checkbox--error .checkbox__box {
@@ -2368,6 +2400,17 @@
     cursor: not-allowed;
   }
 
+  /*
+   * AAA 2.4.13 Focus Appearance — host-level focus ring (group is focusable
+   * via roving tabindex in Tier-2). Token-driven: --hx-focus-ring-width
+   * resolves to ≥2px.
+   */
+  :host(:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-checkbox-group-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   * {
     box-sizing: border-box;
   }
@@ -2577,15 +2620,12 @@
     color: var(--hx-clinical-status-icon-color, var(--hx-color-info-500, #0c8beb));
   }
 
-  .clinical-status__icon svg {
-    width: var(--hx-space-5, 1.25rem);
-    height: var(--hx-space-5, 1.25rem);
-    fill: currentColor;
+  .clinical-status__glyph {
+    --hx-icon-size: var(--hx-space-5, 1.25rem);
   }
 
-  .clinical-status--compact .clinical-status__icon svg {
-    width: var(--hx-space-4, 1rem);
-    height: var(--hx-space-4, 1rem);
+  .clinical-status--compact .clinical-status__glyph {
+    --hx-icon-size: var(--hx-space-4, 1rem);
   }
 
   /* ─── Message ─── */
@@ -3003,6 +3043,10 @@
     background: var(--hx-color-neutral-0, #ffffff);
     cursor: pointer;
     transition: border-color var(--hx-transition-fast, 150ms ease);
+    /* WCAG 2.5.5 AAA Target Size (Enhanced): 44×44 minimum.
+       Bound to --hx-touch-target-min so the trigger clears the AAA-strict
+       floor at default sizing. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
   .trigger:hover:not([disabled]) {
     border-color: var(
@@ -3163,13 +3207,20 @@
   }
   .format-btn {
     flex-shrink: 0;
+    /* WCAG 2.5.5 (Enhanced) AAA — interactive panel controls must clear
+       44×44. Without min-width/min-height the format toggle collapses to
+       its label box (~44×24 in default rendering, sub-44 on the y-axis). */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
     background: var(--hx-color-neutral-100, #ebeee9);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-color-neutral-600, #4a5362);
+    /* AAA 1.4.6: 12px label vs neutral-100 must be ≥7:1; neutral-700 = 9.34:1
+       (neutral-600 was 6.63:1, a tight AAA miss). */
+    color: var(--hx-color-neutral-700, #313e4b);
     text-transform: uppercase;
     font-weight: var(--hx-font-weight-semibold, 600);
     letter-spacing: 0.05em;
@@ -3177,6 +3228,8 @@
   .color-input {
     flex: 1;
     min-width: 0;
+    /* WCAG 2.5.5 (Enhanced) AAA — text input must clear 44×44. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #b6bfb9);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
@@ -3652,6 +3705,14 @@
     outline-offset: var(--hx-focus-ring-offset, 2px);
     opacity: 1;
   }
+
+  /* hx-icon glyph sizing for migrated inline SVGs (library="helix"). */
+  .field__chip-remove-glyph {
+    --hx-icon-size: 8px;
+  }
+  .field__clear-button-glyph {
+    --hx-icon-size: 12px;
+  }
 /* ── hx-container ── */
 :host {
     display: block;
@@ -3795,10 +3856,13 @@
     font-size: var(--hx-font-size-sm);
   }
 
+  /* md — WCAG 2.5.5 AAA Target Size (Enhanced): 44×44 minimum.
+     Bound to --hx-touch-target-min so the default md variant clears the
+     AAA-strict floor without requiring consumers to opt into sm or lg. */
   .button--md {
     padding: var(--hx-space-2);
-    min-width: var(--hx-size-10);
-    height: var(--hx-size-10);
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     font-size: var(--hx-font-size-md);
   }
 
@@ -4289,7 +4353,8 @@
     font-size: var(--hx-font-size-md, 1rem);
     color: var(--hx-date-picker-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
-    min-height: var(--hx-size-10, 2.5rem);
+    /* WCAG 2.5.5 (Enhanced) AAA — primary input surface must meet 44×44. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
     width: 100%;
     cursor: default;
   }
@@ -4310,6 +4375,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    /* WCAG 2.5.5 (Enhanced) AAA — calendar trigger must clear 44×44.
+       Without min-width the icon button collapses to ~41 px wide. */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     padding: 0 var(--hx-space-3, 0.75rem);
     border: none;
     border-left: var(--hx-border-width-thin, 1px) solid
@@ -4483,13 +4552,16 @@
   }
 
   .calendar__day--selected {
-    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-date-picker-selected-bg, var(--hx-color-action-primary-bg, #0f7078));
     color: var(--hx-date-picker-selected-color, var(--hx-color-text-on-primary, #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, #0f7078));
+    background-color: var(
+      --hx-date-picker-selected-hover-bg,
+      var(--hx-color-action-primary-bg-hover, #0f6363)
+    );
   }
 
   .calendar__day--today:not(.calendar__day--selected) {
@@ -4605,6 +4677,11 @@
       border-color: LinkText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated calendar trigger SVG. */
+  .field__trigger-glyph {
+    --hx-icon-size: 16px;
+  }
 /* ── hx-dialog ── */
 :host {
     display: contents;
@@ -5215,6 +5292,11 @@
       border: 1px solid ButtonText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated close-button SVG. */
+  .drawer-close-button-glyph {
+    --hx-icon-size: 16px;
+  }
 /* ── hx-dropdown ── */
 :host {
     display: inline-block;
@@ -5230,11 +5312,29 @@
     display: inline-block;
   }
 
+  /*
+   * AAA 2.4.13 Focus Appearance — enforce a ≥2px focus ring on the slotted
+   * trigger (typically <hx-button>, <button>, or <hx-icon-button>). The host
+   * is a popover-container; the interactive surface is the slotted trigger.
+   */
+  ::slotted([slot='trigger']:focus-visible),
+  ::slotted(button:focus-visible),
+  ::slotted(a:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-dropdown-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   [part='panel'] {
     position: fixed;
     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-surface-default, #ffffff));
+    /* Anchor slotted text color to the design-system primary text token so
+       slotted <li>'s and other native consumer markup don't inherit a
+       foreign color cascade (e.g. brand toolbar setting body { color: #fff }
+       and rendering Edit/Duplicate as white-on-white). */
+    color: var(--hx-dropdown-panel-color, var(--hx-color-text-primary, #1a1a1a));
     border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-border-default, #d6dbd5));
     border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
@@ -5660,6 +5760,10 @@
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
+  .file-item__remove-glyph {
+    --hx-icon-size: 14px;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .file-item__remove {
       transition: none;
@@ -5827,6 +5931,11 @@ export const helixGridItemStyles = css`
     align-items: center;
   }
 
+  /* Render the migrated hx-icon glyph at 1em (matches the previous inline SVG sizing). */
+  .help-text__glyph {
+    --hx-icon-size: 1em;
+  }
+
   .help-text__text {
     min-width: 0;
   }
@@ -5925,6 +6034,12 @@ export const helixGridItemStyles = css`
     width: 100%;
     height: 100%;
     fill: currentColor;
+    /* stroke-width is consumed by stroke-paint and mixed-paint icon libraries
+       (Lucide, Heroicons-outline, Phosphor). Built-in helix + fa-free
+       libraries declare paintMode: 'fill' and ignore this property; setting
+       it here makes the token universally available without per-library
+       branching in the resolver. */
+    stroke-width: var(--hx-icon-stroke-width, 2);
     display: block;
     overflow: visible;
   }
@@ -5945,6 +6060,7 @@ export const helixGridItemStyles = css`
     width: 100%;
     height: 100%;
     fill: currentColor;
+    stroke-width: var(--hx-icon-stroke-width, 2);
     display: block;
   }
 
@@ -6031,16 +6147,15 @@ export const helixGridItemStyles = css`
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-icon-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-icon-button-bg: var(--hx-color-action-primary-bg, #0f7078);
     --hx-icon-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-icon-button-border-color: transparent;
   }
 
-  /* on-primary tokens are tuned for primary-500. primary-600 + on-primary
-     drops icon contrast to 3.07:1 — fails the 4.5:1 floor for meaningful
-     icons. Pin fg at neutral-0 (5.82:1 on primary-600). Mirrors hx-button. */
+  /* Hover deepens to action.primary.bg-hover (primary-700) + neutral-0 = 7.03:1 AA.
+     Mirrors hx-button. */
   .button--primary:hover {
-    --hx-icon-button-bg: var(--hx-color-primary-600, #0f7078);
+    --hx-icon-button-bg: var(--hx-color-action-primary-bg-hover, #0f6363);
     --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);
   }
 
@@ -6299,8 +6414,7 @@ export const helixGridItemStyles = css`
 
   .link__external-icon {
     display: inline-flex;
-    width: 0.75em;
-    height: 0.75em;
+    --hx-icon-size: 0.75em;
     flex-shrink: 0;
   }
 
@@ -6634,6 +6748,16 @@ export const helixGridItemStyles = css`
     align-items: center;
     gap: var(--hx-space-1, 0.25rem);
     padding: var(--hx-nav-item-padding, var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem));
+    /*
+     * WCAG 2.5.5 (Enhanced) AAA — nav links rendered with default padding
+     * land at ~37 px tall (8 px + 1.5 line-height + 8 px). The link
+     * content is first-party (rendered via consumer-supplied props on
+     * <hx-nav-item>), so the slotted-content carve-out does not apply —
+     * this is a real component obligation. Bind --hx-nav-link-min-height
+     * to --hx-touch-target-min (2.75rem / 44 px) to grow the interactive
+     * area without enlarging the visible label.
+     */
+    min-height: var(--hx-nav-link-min-height, var(--hx-touch-target-min, 2.75rem));
     color: var(--hx-nav-link-color, var(--hx-color-neutral-100, #ebeee9));
     text-decoration: none;
     border-radius: var(--hx-nav-border-radius, var(--hx-border-radius-sm, 0.25rem));
@@ -6662,13 +6786,26 @@ export const helixGridItemStyles = css`
   }
 
   .nav__link--active {
-    background-color: var(--hx-nav-link-active-bg, var(--hx-color-primary-600, #0f7078));
-    color: var(--hx-nav-link-active-color, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-nav-link-active-bg, var(--hx-color-action-primary-bg, #0f6363));
+    /* Use --hx-color-text-on-primary so the active-link text inherits the
+     * action-surface AAA-strict pairing (white on primary-700 in default
+     * themes; black on lighter primary-700 in the high-contrast theme).
+     * Pre-3.4.0 this consumed --hx-color-primary-600 directly which
+     * resolved to Apex #0F7078 + white = 5.82:1 — AAA-large only, AAA
+     * normal fail under WCAG 1.4.6 for body-text-sized link labels. The
+     * Phase 4 Tier 3 chain shift moved action.primary.bg to primary-700
+     * (Apex 7.03:1 with white) and consuming the action semantic here
+     * picks up the AAA-strict pairing across the full 6-brand matrix.
+     * Hardcoding white previously failed AAA-large in high-contrast
+     * (ratio 2.54 vs. 4.5 floor); the on-primary token resolves correctly
+     * in HC mode. */
+    color: var(--hx-nav-link-active-color, var(--hx-color-text-on-primary, #ffffff));
   }
 
   /* ─── Chevron Icon ─── */
 
   .nav__chevron {
+    --hx-icon-size: 16px;
     transition: transform var(--hx-transition-normal, 200ms) ease;
     flex-shrink: 0;
   }
@@ -6677,6 +6814,12 @@ export const helixGridItemStyles = css`
     transform: rotate(180deg);
   }
 
+  /* ─── Hamburger Icon (mobile menu trigger) ─── */
+
+  .nav__hamburger-glyph {
+    --hx-icon-size: 24px;
+  }
+
   /* ─── Submenu ─── */
 
   .nav__submenu {
@@ -6879,13 +7022,13 @@ export const helixGridItemStyles = css`
   .field__input-wrapper:focus-within {
     border-color: var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));
     /* Fallback for Safari < 16.2 (no color-mix support) */
-    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));
-    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
         var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color))
-          calc(var(--hx-focus-ring-opacity) * 100%),
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -6899,13 +7042,13 @@ export const helixGridItemStyles = css`
   .field--error .field__input-wrapper:focus-within {
     border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
     /* Fallback for Safari < 16.2 (no color-mix support) */
-    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e));
-    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+    box-shadow: 0 0 0 var(--hx-focus-ring-width, 2px)
       color-mix(
         in srgb,
         var(--hx-number-input-error-color, var(--hx-color-error-500, #e5493e))
-          calc(var(--hx-focus-ring-opacity) * 100%),
+          calc(var(--hx-focus-ring-opacity, 0.25) * 100%),
         transparent
       );
   }
@@ -6932,10 +7075,10 @@ export const helixGridItemStyles = css`
     color: var(--hx-number-input-color, var(--hx-color-text-strong));
     line-height: var(--hx-line-height-normal);
     width: 100%;
-    /* Size: md (default) */
+    /* Size: md (default) — WCAG 2.5.5 (Enhanced) AAA touch target. */
     padding: var(--hx-space-2) var(--hx-space-3);
     font-size: var(--hx-font-size-md);
-    min-height: var(--hx-size-10);
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
 
   .field__input::placeholder {
@@ -7024,10 +7167,9 @@ export const helixGridItemStyles = css`
     cursor: not-allowed;
   }
 
-  .field__stepper-btn svg {
+  .field__stepper-glyph {
     pointer-events: none;
-    width: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
-    height: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
+    --hx-icon-size: var(--hx-number-input-icon-size, var(--hx-space-3, 0.75rem));
   }
 
   /* Size sm adjustments for stepper */
@@ -7310,6 +7452,11 @@ export const helixGridItemStyles = css`
       border: 2px solid CanvasText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated trigger icons (1em parity). */
+  .trigger__glyph {
+    --hx-icon-size: 1em;
+  }
 /* ── hx-pagination ── */
 :host {
     display: block;
@@ -7367,7 +7514,10 @@ export const helixGridItemStyles = css`
 
   .button:hover:not(:disabled) {
     background: var(--hx-pagination-hover-bg, var(--hx-color-surface-sunken, #ebeee9));
-    border-color: var(--hx-pagination-hover-border-color, var(--hx-color-primary-500, #429797));
+    border-color: var(
+      --hx-pagination-hover-border-color,
+      var(--hx-color-action-primary-bg, #0f7078)
+    );
   }
 
   .button:focus-visible {
@@ -7377,10 +7527,10 @@ export const helixGridItemStyles = css`
   }
 
   .button[aria-current='page'] {
-    background: var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797));
+    background: var(--hx-pagination-active-bg, var(--hx-color-action-primary-bg, #0f7078));
     border-color: var(
       --hx-pagination-active-border-color,
-      var(--hx-pagination-active-bg, var(--hx-color-primary-500, #429797))
+      var(--hx-pagination-active-bg, var(--hx-color-action-primary-bg, #0f7078))
     );
     color: var(--hx-pagination-active-color, var(--hx-color-text-on-primary, #ffffff));
     font-weight: var(--hx-font-weight-semibold, 600);
@@ -7742,9 +7892,8 @@ export const helixGridItemStyles = css`
     opacity: var(--hx-opacity-50, 0.5);
   }
 
-  .phi-field__toggle svg {
-    width: 1em;
-    height: 1em;
+  .phi-field__glyph {
+    --hx-icon-size: 1em;
     pointer-events: none;
   }
 
@@ -7792,6 +7941,19 @@ export const helixGridItemStyles = css`
     display: inline-block;
   }
 
+  /*
+   * AAA 2.4.13 Focus Appearance — enforce a ≥2px focus ring on the slotted
+   * trigger so consumers who slot bare HTML controls inherit the same ring
+   * width as <hx-button>. Token-driven: --hx-focus-ring-width (default 2px).
+   */
+  ::slotted([slot='trigger']:focus-visible),
+  ::slotted(button:focus-visible),
+  ::slotted(a:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-popover-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   [part='body'] {
     position: fixed;
     z-index: var(--hx-popover-z-index, 9999);
@@ -7860,6 +8022,20 @@ export const helixGridItemStyles = css`
     display: inline-block;
   }
 
+  /*
+   * AAA 2.4.13 Focus Appearance — enforce a ≥2px focus ring on slotted
+   * trigger / anchor controls. hx-popup is a positioning primitive: it
+   * paints no surface itself, but slotted natives (<button>, <a>) must
+   * still meet the AAA ring threshold. Token-driven.
+   */
+  ::slotted([slot='anchor']:focus-visible),
+  ::slotted(button:focus-visible),
+  ::slotted(a:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-popup-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   [part='popup'] {
     position: fixed;
     z-index: var(--hx-popup-z-index, 9000);
@@ -8205,6 +8381,16 @@ export const helixGridItemStyles = css`
     pointer-events: none;
   }
 
+  /*
+   * AAA 2.4.13 Focus Appearance — host-level focus ring for the group host
+   * when it carries focus via roving tabindex. Token-driven: ≥2px width.
+   */
+  :host(:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-radio-group-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   * {
     box-sizing: border-box;
   }
@@ -8366,6 +8552,12 @@ export const helixGridItemStyles = css`
     color: var(--hx-rating-hover-color, var(--hx-color-warning-300, #eeb383));
   }
 
+  /* ─── Star Glyph (hx-icon) Sizing ─── */
+
+  .star-glyph {
+    --hx-icon-size: 1em;
+  }
+
   /* ─── Half-Star Layout ─── */
 
   .star-half {
@@ -8931,8 +9123,15 @@ export const helixGridItemStyles = css`
     display: flex;
     align-items: center;
     justify-content: center;
+    /* Visual icon area stays 2rem (32px) — preserves the side-nav header
+       silhouette while the wrapping touch target grows to 44×44 to meet
+       WCAG 2.5.5 (Enhanced) AAA. min-width/min-height own the hit area;
+       width/height drive the visual painted area, but the button's
+       intrinsic size always matches the hit-area floor. */
     width: var(--hx-space-8, 2rem);
     height: var(--hx-space-8, 2rem);
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     margin-inline-start: auto;
     flex-shrink: 0;
     padding: 0;
@@ -8978,15 +9177,13 @@ export const helixGridItemStyles = css`
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
-  .side-nav__toggle svg {
-    width: var(--hx-space-5, 1.25rem);
-    height: var(--hx-space-5, 1.25rem);
-    fill: currentColor;
+  .side-nav__toggle .side-nav__toggle-glyph {
+    --hx-icon-size: var(--hx-space-5, 1.25rem);
     flex-shrink: 0;
     transition: transform var(--hx-transition-normal, 300ms) ease;
   }
 
-  :host([collapsed]) .side-nav__toggle svg {
+  :host([collapsed]) .side-nav__toggle .side-nav__toggle-glyph {
     transform: rotate(180deg);
   }
 
@@ -9674,6 +9871,11 @@ export const helixGridItemStyles = css`
     transform: rotate(180deg);
   }
 
+  /* hx-icon glyph sizing for the migrated chevron (12x8 → 12px). */
+  .split-button__chevron-glyph {
+    --hx-icon-size: 12px;
+  }
+
   /* ─── Size Variants ─── */
 
   /* sm */
@@ -9688,16 +9890,22 @@ export const helixGridItemStyles = css`
     min-height: var(--hx-size-8, 2rem);
   }
 
-  /* md */
+  /* md — WCAG 2.5.5 AAA Target Size (Enhanced): 44×44 minimum.
+     Bound to --hx-touch-target-min so the default md variant clears the
+     AAA-strict floor without requiring consumers to opt into sm or lg. */
   .split-button--md .split-button__primary {
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     font-size: var(--hx-font-size-md, 1rem);
-    min-height: var(--hx-size-10, 2.5rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
 
   .split-button--md .split-button__trigger {
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
-    min-height: var(--hx-size-10, 2.5rem);
+    /* WCAG 2.5.5 (Enhanced) AAA — chevron trigger must clear 44×44 in
+       BOTH dimensions. Without min-width, the trigger collapses to its
+       icon width (~38 px) and fails the brand-theme matrix audit. */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
 
   /* lg */
@@ -9714,21 +9922,27 @@ export const helixGridItemStyles = css`
 
   /* ─── Variant: primary ─── */
 
+  /* Primary resting — bind through action.primary.bg (resolves to primary-600
+     across all 6 brands) coordinated with text.on-primary. Inline fallback
+     #0d1825 matches text.on-primary's resolved primitive (neutral-900) so a
+     cold-start without semantic tokens paints AA-tuned dark-on-teal (5.20:1)
+     rather than white-on-teal (3.43:1 fail). Mirrors hx-button precedent
+     (hx-button.styles.ts ~line 88) and Phase C structural fix. */
   .split-button--primary .split-button__primary,
   .split-button--primary .split-button__trigger {
-    --hx-split-button-bg: var(--hx-color-primary-500, #429797);
-    --hx-split-button-color: var(--hx-color-text-on-primary, #ffffff);
+    --hx-split-button-bg: var(--hx-color-action-primary-bg, #429797);
+    --hx-split-button-color: var(--hx-color-text-on-primary, #0d1825);
     --hx-split-button-border-color: transparent;
     --hx-split-button-divider-color: var(--hx-color-primary-900, #0b3232);
   }
 
-  /* primary:hover — replace the universal brightness(0.9) filter (which would
-     drop primary-500 + on-primary contrast to ~4.4:1) with an explicit swap
-     to primary-600 and a neutral-0 foreground. Mirrors hx-button precedent. */
+  /* primary:hover — lift to action.primary.bg-hover (primary-700) with
+     text.on-primary-strong (neutral-0). Replaces the universal brightness(0.9)
+     filter which would degrade contrast on the resting pair. */
   .split-button--primary .split-button__primary:hover,
   .split-button--primary .split-button__trigger:hover {
-    --hx-split-button-bg: var(--hx-color-primary-600, #0f7078);
-    --hx-split-button-color: var(--hx-color-neutral-0, #ffffff);
+    --hx-split-button-bg: var(--hx-color-action-primary-bg-hover, #0f7078);
+    --hx-split-button-color: var(--hx-color-text-on-primary-strong, #ffffff);
     filter: none;
   }
 
@@ -10292,8 +10506,7 @@ export const helixGridItemStyles = css`
   }
 
   .stat__trend-arrow {
-    width: 0.75em;
-    height: 0.75em;
+    --hx-icon-size: 0.75em;
     flex-shrink: 0;
   }
 
@@ -10661,6 +10874,13 @@ export const helixStructuredListRowStyles = css`
 /* ── hx-switch ── */
 :host {
     display: block;
+    /*
+     * Suppress the browser default ~1px host outline. Without this the formal
+     * AAA audit harness (which measures computed outline-width on the focused
+     * host) records a sub-2px outline and reports WCAG 2.4.13 Partially Supports.
+     * The visual focus indicator is rendered on the inner .switch__track below.
+     */
+    outline: none;
   }
 
   :host([disabled]) {
@@ -10732,7 +10952,18 @@ export const helixStructuredListRowStyles = css`
   }
 
   .switch--checked .switch__track {
-    background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #429797));
+    /* WCAG 1.4.6 AAA-strict 7:1: consume action.primary.bg (primary-700 since
+       3.4.0) so the checked track inherits the elevated AAA-strict action
+       surface contract used by every other primary interactive surface
+       (hx-button, hx-checkbox checked-bg, hx-radio checked-bg, etc.). The
+       prior primary-500 fallback (#429797 in Apex) clears AA (5.20:1) but
+       only resolves to ~6.11:1 in the formal harness's contrast probe —
+       below the 7:1 AAA-strict floor. action.primary.bg = primary-700
+       (#0F6363 in Apex) clears 7.03:1 across all 6 brands. */
+    background-color: var(
+      --hx-switch-track-checked-bg,
+      var(--hx-color-action-primary-bg, var(--hx-color-primary-700, #0f7078))
+    );
   }
 
   .switch:not(.switch--checked) .switch__track:hover {
@@ -11315,6 +11546,11 @@ export const helixTableSectionBaseStyles = css`
       border-width: 3px;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated remove-button SVG. */
+  .tag__remove-glyph {
+    --hx-icon-size: 10px;
+  }
 /* ── hx-text ── */
 :host {
     display: inline;
@@ -11722,7 +11958,10 @@ export const helixTableSectionBaseStyles = css`
     font-size: var(--_text-input-font-size);
     color: var(--_text-input-color);
     line-height: var(--hx-line-height-normal, 1.5);
-    min-height: var(--hx-size-10, 2.5rem);
+    /* WCAG 2.5.5 (Enhanced) AAA — primary input surface must meet 44×44.
+       --hx-touch-target-min resolves to 2.75rem (44px); --hx-size-10 alone
+       resolves to 2.5rem (40px) and fails AAA on the inner input. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
     width: 100%;
   }
 
@@ -12230,7 +12469,8 @@ export const helixTableSectionBaseStyles = css`
     font-size: var(--hx-font-size-md, 1rem);
     color: var(--hx-time-picker-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
-    min-height: var(--hx-size-10, 2.5rem);
+    /* WCAG 2.5.5 (Enhanced) AAA — primary input surface must meet 44×44. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
     width: 100%;
     cursor: text;
   }
@@ -12250,7 +12490,11 @@ export const helixTableSectionBaseStyles = css`
     color: var(--hx-time-picker-chevron-color, var(--hx-color-text-muted, #4a5362));
     cursor: pointer;
     height: 100%;
-    min-height: var(--hx-size-10, 2.5rem);
+    /* WCAG 2.5.5 (Enhanced) AAA — toggle button must meet 44×44 in
+       BOTH dimensions; without min-width the icon button collapses to
+       ~41 px wide and fails the matrix audit. */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     flex-shrink: 0;
     border-inline-start: var(--hx-border-width-thin, 1px) solid
       var(--hx-time-picker-border-color, var(--hx-color-border-strong, #66787b));
@@ -12395,6 +12639,11 @@ export const helixTableSectionBaseStyles = css`
       color: LinkText;
     }
   }
+
+  /* hx-icon glyph sizing for the migrated clock toggle icon. */
+  .field__toggle-glyph {
+    --hx-icon-size: 16px;
+  }
 /* ── hx-toast ── */
 /* ─── hx-toast host ─── */
 
@@ -12509,6 +12758,12 @@ export const helixTableSectionBaseStyles = css`
     display: none;
   }
 
+  /* Match the previous inline 16x16 SVG sizing for both the variant icon and
+     the close-button glyph migrated to hx-icon (library="helix"). */
+  .toast__glyph {
+    --hx-icon-size: 16px;
+  }
+
   /* ─── Message ─── */
 
   .toast__message {
@@ -12666,6 +12921,13 @@ export const helixToastStackStyles = css`
 /* ── hx-toggle-button ── */
 :host {
     display: inline-block;
+    /*
+     * Suppress the browser default ~1px host outline. Without this the formal
+     * AAA audit harness (which measures computed outline-width on the focused
+     * host) records a sub-2px outline and reports WCAG 2.4.13 Partially Supports.
+     * The visual focus indicator is rendered on the inner .button below.
+     */
+    outline: none;
   }
 
   :host([disabled]) {
@@ -12682,7 +12944,7 @@ export const helixToastStackStyles = css`
     gap: var(--hx-space-2, 0.5rem);
     border: var(--hx-border-width-thin, 1px) solid var(--hx-toggle-button-border-color, transparent);
     border-radius: var(--hx-toggle-button-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-toggle-button-bg, var(--hx-color-primary-500, #429797));
+    background-color: var(--hx-toggle-button-bg, var(--hx-color-action-primary-bg, #0f7078));
     color: var(--hx-toggle-button-color, var(--hx-color-text-on-primary, #ffffff));
     font-family: var(--hx-toggle-button-font-family, var(--hx-font-family-sans, sans-serif));
     font-weight: var(--hx-toggle-button-font-weight, var(--hx-font-weight-semibold, 600));
@@ -12743,7 +13005,10 @@ export const helixToastStackStyles = css`
   .button--md {
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);
     font-size: var(--hx-font-size-md, 1rem);
-    min-height: var(--hx-size-10, 2.5rem);
+    /* WCAG 2.5.5 AAA Target Size (Enhanced): 44×44 minimum.
+       Bound to --hx-touch-target-min so the default md variant clears the
+       AAA-strict floor without requiring consumers to opt into sm or lg. */
+    min-height: var(--hx-touch-target-min, 2.75rem);
   }
 
   .button--lg {
@@ -12755,7 +13020,7 @@ export const helixToastStackStyles = css`
   /* ─── Style Variants ─── */
 
   .button--primary {
-    --hx-toggle-button-bg: var(--hx-color-primary-500, #429797);
+    --hx-toggle-button-bg: var(--hx-color-action-primary-bg, #0f7078);
     --hx-toggle-button-color: var(--hx-color-text-on-primary, #ffffff);
     --hx-toggle-button-border-color: transparent;
   }
@@ -12833,12 +13098,15 @@ export const helixToastStackStyles = css`
    * so the state change is immediately legible.
    */
   .button--secondary.button--pressed {
-    --hx-toggle-button-bg: var(--hx-toggle-button-pressed-bg, var(--hx-color-primary-500, #429797));
+    --hx-toggle-button-bg: var(
+      --hx-toggle-button-pressed-bg,
+      var(--hx-color-action-primary-bg, #0f7078)
+    );
     --hx-toggle-button-color: var(
       --hx-toggle-button-pressed-color,
       var(--hx-color-text-on-primary, #ffffff)
     );
-    --hx-toggle-button-border-color: var(--hx-color-primary-500, #429797);
+    --hx-toggle-button-border-color: var(--hx-color-action-primary-bg, #0f7078);
   }
 
   /* Tertiary pressed: use primary-100 bg + primary-700 text + border for WCAG 3:1 non-text contrast. */
@@ -12849,7 +13117,8 @@ export const helixToastStackStyles = css`
       var(--hx-color-primary-700, #0f6363)
     );
     --hx-toggle-button-border-color: var(--hx-color-primary-600, #0f7078);
-    box-shadow: inset 0 0 0 1px var(--hx-color-primary-600, #0f7078);
+    box-shadow: inset 0 0 0 var(--hx-toggle-button-pressed-ring-width, 1px)
+      var(--hx-color-primary-600, #0f7078);
   }
 
   /* Ghost pressed: subtle neutral fill, matching hover behavior as a baseline. */
@@ -12873,7 +13142,8 @@ export const helixToastStackStyles = css`
       var(--hx-color-text-primary, #0d1825)
     );
     --hx-toggle-button-border-color: var(--hx-color-text-muted, #4a5362);
-    box-shadow: inset 0 0 0 1px var(--hx-color-neutral-500, #66787b);
+    box-shadow: inset 0 0 0 var(--hx-toggle-button-pressed-ring-width, 1px)
+      var(--hx-color-neutral-500, #66787b);
   }
 
   /* ─── Disabled ─── */
@@ -12908,15 +13178,17 @@ export const helixToastStackStyles = css`
   @media (forced-colors: active) {
     .button {
       forced-color-adjust: none;
-      background-color: ButtonFace;
-      color: ButtonText;
-      border: 2px solid ButtonText;
+      background-color: var(--hx-toggle-button-fc-bg, ButtonFace);
+      color: var(--hx-toggle-button-fc-color, ButtonText);
+      border: var(--hx-toggle-button-fc-border-width, 2px) solid
+        var(--hx-toggle-button-fc-border-color, ButtonText);
     }
 
     :host(:focus-visible) .button,
     .button:focus-visible {
-      outline: 3px solid Highlight;
-      outline-offset: 2px;
+      outline: var(--hx-toggle-button-fc-focus-ring-width, 3px) solid
+        var(--hx-toggle-button-fc-focus-ring-color, Highlight);
+      outline-offset: var(--hx-toggle-button-fc-focus-ring-offset, 2px);
     }
 
     .button--pressed {
@@ -12946,6 +13218,19 @@ export const helixToastStackStyles = css`
     display: inline-block;
   }
 
+  /*
+   * AAA 2.4.13 Focus Appearance — enforce a ≥2px focus ring on the slotted
+   * trigger. APG forbids the tooltip body from holding focus, so the
+   * trigger is the only AAA-relevant focus surface. Token-driven.
+   */
+  ::slotted([slot='trigger']:focus-visible),
+  ::slotted(button:focus-visible),
+  ::slotted(a:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-tooltip-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   [part='tooltip'] {
     position: fixed;
     z-index: var(--hx-tooltip-z-index, var(--hx-z-index-tooltip, 1600));
@@ -13080,9 +13365,20 @@ export const helixToastStackStyles = css`
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
+  /*
+   * AAA 2.4.13 Focus Appearance — enforce a ≥2px ring on slotted nav
+   * controls (links, buttons, hx-link, hx-button). Slotted bare anchors
+   * otherwise fall back to the 1px browser default.
+   */
+  ::slotted(a:focus-visible),
+  ::slotted(button:focus-visible) {
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(--hx-top-nav-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
+    outline-offset: var(--hx-focus-ring-offset, 2px);
+  }
+
   .mobile-toggle__icon {
-    width: var(--hx-space-6, 1.5rem);
-    height: var(--hx-space-6, 1.5rem);
+    --hx-icon-size: var(--hx-space-6, 1.5rem);
   }
 
   /* ─── Collapsible panel (mobile) ─── */