@ponchia/ui 0.5.0 → 0.6.3

package/css/forms.css

@@ -77,12 +77,99 @@
   opacity: 0.5;
 }
 
+/* Read-only is editable-looking but not editable; give it a distinct, quieter
+   cue (muted fill + default cursor) so it doesn't read as a live field. Not
+   disabled — value still submits and the field stays focusable/selectable.
+   (component audit C28.) */
+.ui-input:read-only:not(:disabled),
+.ui-textarea:read-only:not(:disabled) {
+  background: var(--panel-soft);
+  cursor: default;
+}
+
+/* Disabled affordance parity. The text inputs above style :disabled directly;
+   the controls that WRAP a native input (switch/check/segmented) showed no
+   disabled cue and their label kept cursor:pointer — a lie. Mirror the cue via
+   :has(input:disabled); the native-element controls (range/file) take :disabled
+   directly. (a11y/forms review C4.) */
+.ui-range:disabled,
+.ui-file:disabled,
+.ui-switch:has(input:disabled),
+.ui-check:has(input:disabled),
+.ui-segmented__option:has(input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Keep autofilled fields on-theme — the UA's yellow fill otherwise paints over
+   the monochrome surface and breaks the contrast story. (forms review C24.) */
+.ui-input:autofill,
+.ui-select:autofill,
+.ui-textarea:autofill,
+.ui-search input:autofill {
+  -webkit-text-fill-color: var(--text);
+  box-shadow: inset 0 0 0 100rem var(--bg-elevated);
+  caret-color: var(--text);
+}
+
 .ui-input[aria-invalid='true'],
 .ui-select[aria-invalid='true'],
 .ui-textarea[aria-invalid='true'] {
   border-color: var(--danger);
 }
 
+/* Wrapper controls (switch / check / segmented) hide their native <input>, so
+   the `[aria-invalid]` the validator sets on it paints nothing — a sighted,
+   non-AT user couldn't see the error (WCAG 1.4.1). Mirror the invalid cue onto
+   the visible surface via :has(), the same way the disabled cue is mirrored.
+   (component audit C7.) */
+.ui-check:has(input[aria-invalid='true']) input {
+  outline: 2px solid var(--danger);
+  outline-offset: 1px;
+}
+
+.ui-switch:has(input[aria-invalid='true']) .ui-switch__track {
+  border-color: var(--danger);
+}
+
+.ui-segmented:has(input[aria-invalid='true']) {
+  border-color: var(--danger);
+}
+
+/* Forced colours flatten `var(--danger)` to a system colour identical to the
+   resting border, so the invalid border becomes indistinguishable from a valid
+   one and sighted HCM users lose the only error cue (WCAG 1.4.1). The switch got
+   a forced-colors block; the error family did not. Re-assert the state on a
+   NON-colour channel — a thicker, doubled border — that survives HCM, and prefix
+   the error hint with a glyph so the message itself carries the error.
+   (component audit C5.) */
+@media (forced-colors: active) {
+  .ui-input[aria-invalid='true'],
+  .ui-select[aria-invalid='true'],
+  .ui-textarea[aria-invalid='true'] {
+    border-style: double;
+    border-width: 3px;
+  }
+
+  /* Same NON-colour re-assertion for the wrapper controls (C7): a thicker,
+     doubled outline/border survives the HCM colour flattening. */
+  .ui-check:has(input[aria-invalid='true']) input {
+    outline-width: 3px;
+    outline-style: double;
+  }
+
+  .ui-switch:has(input[aria-invalid='true']) .ui-switch__track,
+  .ui-segmented:has(input[aria-invalid='true']) {
+    border-style: double;
+    border-width: 3px;
+  }
+
+  .ui-hint--error::before,
+  .ui-error-summary__title::before {
+    content: '⚠ ';
+  }
+}
+
 .ui-hint {
   color: var(--text-dim);
   font-size: var(--text-2xs);
@@ -116,14 +203,18 @@
   border-end-end-radius: var(--radius-md);
 }
 
-.ui-input-group > .ui-input:focus-visible {
-  z-index: 1; /* keep the focus ring above the adjacent addon border */
+.ui-input-group > .ui-input:focus-visible,
+.ui-input-group > .ui-select:focus-visible {
+  z-index: 1; /* keep the focus ring above the adjacent addon border (select too — audit C29) */
 }
 
 .ui-input-group__addon {
   align-items: center;
   background: var(--panel-soft);
-  border: 1px solid var(--line);
+
+  /* Match the wrapped control's `--line-strong` border so the prefix/suffix seam
+     isn't a fainter cap than the field it abuts. (component audit C33.) */
+  border: 1px solid var(--line-strong);
   color: var(--text-dim);
   display: flex;
   font-size: var(--text-sm);
@@ -221,7 +312,10 @@
 
 .ui-error-summary__title {
   color: var(--danger);
-  font-family: var(--display);
+
+  /* The must-be-read failure heading uses the legible sans, not the low-legibility
+     Doto display face — reserve --display for decorative numerals. (forms C27.) */
+  font-family: var(--sans);
   font-size: var(--text-sm);
   font-weight: 700;
   letter-spacing: var(--tracking-wide);
@@ -262,6 +356,14 @@
   border-color: var(--accent);
 }
 
+/* Keyboard focus ring to match every sibling input (which use a 2px ring); the
+   border-colour shift alone read markedly fainter on this one control. Keyed to
+   :focus-visible on the inner input so it stays keyboard-only. (a11y review C12.) */
+.ui-search:has(input:focus-visible) {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 1px;
+}
+
 .ui-search:focus-within::before {
   background: var(--accent);
 }
@@ -384,6 +486,13 @@
     min-block-size: 2.9rem;
   }
 
+  /* The whole label is the toggle target — float it to the ~44px floor so the
+     small track/box isn't a sub-target on touch (WCAG 2.5.8 — C24). */
+  .ui-switch,
+  .ui-check {
+    min-block-size: 2.9rem;
+  }
+
   .ui-check input {
     block-size: 1.15rem;
     inline-size: 1.15rem;

package/css/legend.css

@@ -1,10 +1,10 @@
 /* ==========================================================================
    legend — opt-in data keys for charts, reports, and analytical figures.
 
-   A standalone, portable successor to the report kit's inline chart legend:
-   `.ui-legend` reads the Tier-4 `--chart-*` tokens and pairs with any chart
-   (Bronto's own `.ui-chart` bars, an SVG/canvas figure, or an external chart
-   engine). Not imported by core.css — import it beside css/dataviz.css.
+   A standalone, portable data key: `.ui-legend` reads the Tier-4 `--chart-*`
+   tokens and pairs with any chart (a token-themed inline SVG/canvas figure, or
+   an external engine like Vega-Lite — see docs/vega.md). Not imported by
+   core.css — import it beside css/dataviz.css.
 
    Bronto paints and positions; it owns no scales, data mapping, or series
    state. Colour is never the sole channel: a swatch mirrors its chart mark
@@ -90,10 +90,13 @@
   inline-size: 1.1rem;
 }
 
-/* Glyph/symbol swatch — fill an `.ui-icon` mask with the series colour. */
+/* Glyph/symbol swatch — fill an `.ui-icon` mask with the series colour. Match the
+   __swatch fallback chain exactly (--chart-color → --chart-1 → --accent): without
+   the --chart-1 layer, a symbol and a swatch for the SAME series diverge to two
+   colours whenever a theme overrides --chart-1. (audit C22.) */
 .ui-legend__symbol {
   block-size: 0.95rem;
-  color: var(--chart-color, var(--accent));
+  color: var(--chart-color, var(--chart-1, var(--accent)));
   flex: 0 0 auto;
   inline-size: 0.95rem;
 }
@@ -205,12 +208,16 @@
 
 .ui-legend--with-values .ui-legend__value {
   margin-inline-start: 0;
+  text-align: end;
 }
 
 /* Interactive entries are real <button aria-pressed> controls. Bronto styles
    the control + the inactive state; behaviors/legend.js (optional) flips
-   aria-pressed and emits an event. The host hides the series and announces it. */
-.ui-legend--interactive .ui-legend__item {
+   aria-pressed and emits an event. The host hides the series and announces it.
+   Scoped to button/role=button so a non-button entry never gets cursor:pointer
+   — a pointer-only affordance with no keyboard path is a lie (WCAG 2.1.1 — C11;
+   the behavior ignores and warns about non-button entries to match). */
+.ui-legend--interactive .ui-legend__item:is(button, [role='button']) {
   background: none;
   border: 0;
   border-radius: var(--radius-sm);
@@ -222,7 +229,7 @@
   text-align: start;
 }
 
-.ui-legend--interactive .ui-legend__item:focus-visible {
+.ui-legend--interactive .ui-legend__item:is(button, [role='button']):focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
 }

package/css/marks.css

@@ -12,12 +12,20 @@
    ========================================================================== */
 
 .ui-mark {
-  --mark-color: var(--line-strong);
-
+  /* No base `--mark-color`: each draw style supplies its own fallback default
+     (highlight/box keep the subtle `--line-strong`; the full-opacity
+     `--underline`/`--strike` decorations default to the darker `--text-dim` so
+     they read on a light surface — C33). A tone modifier SETS `--mark-color`,
+     so it still wins everywhere the fallback would otherwise apply. */
+
+  /* A bare `<mark>` carries the UA `background-color: yellow`; the translucent
+     highlight gradient sits on top of it, so without this reset the UA yellow
+     bleeds through (an author declaration always beats the UA origin). */
+  background-color: transparent;
   background-image: linear-gradient(
     90deg,
-    color-mix(in srgb, var(--mark-color) 30%, transparent),
-    color-mix(in srgb, var(--mark-color) 30%, transparent)
+    color-mix(in srgb, var(--mark-color, var(--line-strong)) 30%, transparent),
+    color-mix(in srgb, var(--mark-color, var(--line-strong)) 30%, transparent)
   );
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -59,7 +67,7 @@
 .ui-mark--underline {
   background: none;
   padding: 0;
-  text-decoration-color: var(--mark-color);
+  text-decoration-color: var(--mark-color, var(--text-dim));
   text-decoration-line: underline;
   text-decoration-thickness: 0.12em;
   text-underline-offset: 0.18em;
@@ -67,21 +75,24 @@
 
 .ui-mark--box {
   background: none;
-  border: 1px solid var(--mark-color);
+  border: 1px solid var(--mark-color, var(--line-strong));
   border-radius: var(--radius-sm);
 }
 
 .ui-mark--strike {
   background: none;
   padding: 0;
-  text-decoration-color: var(--mark-color);
+  text-decoration-color: var(--mark-color, var(--text-dim));
   text-decoration-line: line-through;
 }
 
 /* Draw-on highlight sweep. Only the highlight fill animates, and only when
    motion is welcome — reduced-motion keeps the resting full highlight. */
 @media (prefers-reduced-motion: no-preference) {
-  .ui-mark--draw {
+  /* The sweep animates `background-size`, i.e. the highlight FILL — so it is
+     inert on the no-fill styles (underline/box/strike). Scope it out rather
+     than let `--draw` look applied but do nothing. (content review C14.) */
+  .ui-mark--draw:not(.ui-mark--underline, .ui-mark--box, .ui-mark--strike) {
     animation: ui-mark-draw 0.6s var(--ease, ease) both;
   }
 }
@@ -120,6 +131,10 @@
   --mark-color: var(--accent);
 }
 
+.ui-bracket-note--success {
+  --mark-color: var(--success);
+}
+
 .ui-bracket-note--warning {
   --mark-color: var(--warning);
 }
@@ -142,3 +157,18 @@
     text-decoration-line: underline;
   }
 }
+
+/* Print: the highlight is a painted background, so force it through the print
+   "economy" default that would otherwise drop it. Settle the draw sweep to its
+   resting full highlight in case it is mid-animation when the page is printed. */
+@media print {
+  .ui-mark {
+    -webkit-print-color-adjust: exact;
+    background-size: 100% 100%;
+    print-color-adjust: exact;
+  }
+
+  .ui-mark--draw {
+    animation: none;
+  }
+}

package/css/motion.css

@@ -1,8 +1,6 @@
 /* ==========================================================================
    motion — keyframes + animation utilities
    Restrained, dot-flavoured. Everything collapses under reduced-motion.
-   Keyframes from the legacy responsive layer live here so consumers that
-   import only core.css keep their existing animations.
    ========================================================================== */
 
 @keyframes pulseDot {
@@ -18,45 +16,6 @@
   }
 }
 
-@keyframes scan {
-  0% {
-    transform: translateY(-120%);
-  }
-
-  100% {
-    transform: translateY(320%);
-  }
-}
-
-@keyframes growBar {
-  to {
-    transform: scaleX(1);
-  }
-}
-
-@keyframes drawLine {
-  from {
-    opacity: 0;
-    stroke-dasharray: 0 999;
-  }
-
-  to {
-    opacity: 1;
-    stroke-dasharray: 999 0;
-  }
-}
-
-@keyframes pulseNode {
-  0%,
-  100% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.08);
-  }
-}
-
 @keyframes pulseRing {
   0% {
     opacity: 0.7;
@@ -93,6 +52,28 @@
   }
 }
 
+/* Scroll-driven reveal (`.ui-scroll-reveal`). Unlike the time-based uiRise, a
+   scroll timeline can FREEZE part-way: an element near the document bottom can't
+   scroll far enough to finish its range, so a fade-to-opacity-1 would strand the
+   content permanently transparent. Reach full opacity early (35%) and hold it,
+   so even a partially-driven reveal is fully legible — only the last few px of
+   the rise are left unfinished. (component audit C9.) */
+@keyframes uiScrollReveal {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  35% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 @keyframes uiDotIn {
   0% {
     opacity: 0;
@@ -199,10 +180,13 @@
   animation: uiMatrixReveal var(--duration-slow) var(--ease-out) both;
 }
 
-/* Stagger children: set --i on each child (or use nth-child cap). */
+/* Stagger children: set --i on each child (or use nth-child cap). Cap the manual
+   --i path at index 6 (360ms) to match the .ui-stagger--auto ceiling — a long
+   list with --i:30 would otherwise hold the last child at opacity:0 for 1.8s
+   before popping in. (audit C32.) */
 .ui-stagger > * {
   animation: uiRise var(--duration-slow) var(--ease-spring) both;
-  animation-delay: calc(var(--i, 0) * 60ms);
+  animation-delay: calc(min(var(--i, 0), 6) * 60ms);
 }
 
 .ui-stagger--auto > *:nth-child(1) {
@@ -233,9 +217,19 @@
   animation-delay: 360ms;
 }
 
-/* Reveal-on-scroll: add .ui-reveal, toggle .is-visible via IntersectionObserver.
-   Degrades to visible with no JS. */
-@media (prefers-reduced-motion: no-preference) {
+/* Reveal-on-scroll: add .ui-reveal, then toggle .is-visible (e.g. from an
+   IntersectionObserver you own) to play it in.
+
+   ⚠ `.ui-reveal` requires you to wire that observer. The hidden initial state is
+   gated only on `scripting: enabled` — it can't detect whether an observer is
+   actually attached, so merely loading bronto.js (or any script) hides every
+   `.ui-reveal` until YOUR code adds `.is-visible`. If you add the class and never
+   wire the toggle, the content stays invisible. For an LLM-authored or no-build
+   report, DON'T use `.ui-reveal` — use `.ui-scroll-reveal` below (scroll-driven,
+   CSS-only, no observer, and it can never strand content invisible). With
+   scripting OFF, `.ui-reveal` content is fully visible and never silently hidden
+   behind a script that will never run. */
+@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
   .ui-reveal {
     opacity: 0;
     transform: translateY(14px);
@@ -283,10 +277,12 @@
 
 /* --- Scroll-driven (progressive enhancement) — the scroll/view timeline
    IS the engine, no JS. Everything is gated on `@supports
-   (animation-timeline: …)` so engines without it (today, Firefox/Safari)
-   keep the static end state, and on `prefers-reduced-motion: no-preference`
-   (a scroll timeline ignores animation-duration, so the global reduced-motion
-   reset below can't neutralise it — it must be gated here). --- */
+   (animation-timeline: …)` so an engine without it keeps the static end state
+   (as of 2026 Chrome 115+ and Safari 18.4+ drive scroll()/view(); Firefox is
+   the remaining holdout, still graceful via the @supports gate), and on
+   `prefers-reduced-motion: no-preference` (a scroll timeline ignores
+   animation-duration, so the global reduced-motion reset below can't neutralise
+   it — it must be gated here). --- */
 
 /* Reading-progress bar. Fixed hairline that fills with document scroll;
    unsupported → a static, empty (scaleX(0)) bar. Pair with role="progressbar"
@@ -307,6 +303,30 @@
   transform-origin: 100% 50%;
 }
 
+/* Forced colours (HCM) flatten the spinner's accent top-border and its --line
+   rest to one system colour, so the ring looks uniform with no visible sweep,
+   and the scroll-progress bar can vanish into the canvas. Re-assert distinct
+   system colours so each keeps a visible channel; AT is already covered via
+   aria-busy / role="status" / role="progressbar". (component audit C35.) */
+@media (forced-colors: active) {
+  .ui-spinner {
+    border-color: CanvasText;
+    border-block-start-color: Highlight;
+  }
+
+  .ui-scroll-progress {
+    background: Highlight;
+  }
+
+  /* HCM strips the shimmer gradient, leaving an invisible box where a loading
+     placeholder should be. Give it a system-colour border so the skeleton
+     still reads as present. Same decorative-loading family as the spinner +
+     scroll-progress above. (audit C15.) */
+  .ui-skeleton {
+    border: 1px solid CanvasText;
+  }
+}
+
 @supports (animation-timeline: scroll()) {
   @media (prefers-reduced-motion: no-preference) {
     .ui-scroll-progress {
@@ -321,13 +341,21 @@
 
 /* Reveal-on-scroll with no JS and no IntersectionObserver: the element
    rises + fades as it scrolls into view. Unsupported → fully visible
-   (the `uiRise` end state), same graceful default as `.ui-reveal`. */
+   (the keyframe end state), same graceful default as `.ui-reveal`.
+
+   The range is `entry 0% entry 100%`, NOT the old `cover 40%`: `cover` only
+   completes once the element has scrolled most of the way THROUGH the viewport,
+   which an element near the document bottom can never do — it froze part-way,
+   leaving a conclusion section permanently semi-transparent (C9). `entry`
+   completes the moment the element is fully in view, which any scroll-to-bottom
+   reaches. Paired with the early-opacity uiScrollReveal keyframe, an element
+   taller than the viewport is legible even if its range never fully completes. */
 @supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
     .ui-scroll-reveal {
-      animation: uiRise linear both;
+      animation: uiScrollReveal linear both;
       animation-timeline: view();
-      animation-range: entry 0% cover 40%;
+      animation-range: entry 0% entry 100%;
     }
   }
 }
@@ -365,14 +393,31 @@
     scroll-behavior: auto;
   }
 
+  /* !important is required: inside @layer bronto, layered rules lose to
+     unlayered author rules at equal specificity — only a layered !important
+     stays authoritative over unlayered declarations (CSS cascade §6.2). */
   *,
   *::before,
   *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
+
+    /* Zero the delay too: `.ui-stagger` children animate `uiRise` with
+       `fill-mode: both`, so a non-zero `animation-delay` holds them at the
+       `opacity: 0` from-state for the full delay and then pops them in — the
+       exact late flash a reduced-motion user asked to avoid (C4). */
+    animation-delay: 0s !important;
     transition-duration: 0.01ms !important;
   }
 
+  /* Freeze the shimmer gradient mid-sweep would expose a diagonal band.
+     Flatten the skeleton to its base panel colour instead. */
+  .ui-skeleton {
+    animation: none;
+    background: var(--panel-soft);
+    background-size: auto;
+  }
+
   .ui-reveal {
     opacity: 1 !important;
     transform: none !important;

package/css/navigation.css

@@ -80,3 +80,10 @@
     transform: translateY(1px);
   }
 }
+
+@media (pointer: coarse) {
+  .ui-themetoggle__button {
+    min-block-size: 2.9rem;
+    padding-inline: 0.9rem;
+  }
+}

package/css/overlay.css

@@ -78,14 +78,25 @@ dialog.ui-modal[open]::backdrop {
 
 /* Controlled (non-<dialog>) usage. A portal/React modal that can't be a
    native <dialog> wears the same skin + open layout via `.is-open`.
-   Backdrop, top-layer stacking and focus-trapping are then the
-   consumer's responsibility (the native <dialog> path gets them free). */
+   Backdrop and top-layer stacking are then the consumer's responsibility
+   (the native <dialog> path gets them free); focus-trapping no longer is —
+   mark the overlay `data-bronto-modal` and run `initModal` for an
+   inert-based trap + focus-return + Escape signal. */
 .ui-modal.is-open {
   animation: uiToastIn var(--duration-base) var(--ease-spring) both;
   display: grid;
   grid-template-rows: auto 1fr auto;
 }
 
+/* Background scroll-lock. A native <dialog> top layer does NOT stop the page
+   behind it scrolling, and the no-JS native path can't lock it in script — so
+   lock it in CSS, for both the native [open] dialog and the controlled .is-open
+   overlay (incl. the drawer modifier, same base). (component audit C13.) */
+html:has(dialog.ui-modal[open]),
+html:has(.ui-modal.is-open) {
+  overflow: hidden;
+}
+
 .ui-modal__head {
   align-items: flex-start;
   border-block-end: 1px solid var(--line);
@@ -150,6 +161,21 @@ dialog.ui-modal[open]::backdrop {
   }
 }
 
+/* Comfortable hit target on coarse pointers — this bespoke close button measured
+   ~26px on touch, below the 2.9rem floor the rest of the button family meets
+   (WCAG 2.5.8). Scoped to coarse so the fine-pointer (mouse) rendering, which
+   already clears 24×24, is unchanged; centre the glyph in the enlarged box.
+   (audit C3.) */
+@media (pointer: coarse) {
+  .ui-modal__close {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    min-block-size: 2.9rem;
+    min-inline-size: 2.9rem;
+  }
+}
+
 /* --- Lightbox — a full-viewport <dialog> wrapping a .ui-carousel. The
    native <dialog> brings the top layer, focus-trap and Escape; initDialog
    adds open (`data-bronto-open`) + focus-return; initCarousel drives the
@@ -249,7 +275,7 @@ dialog.ui-modal[open]::backdrop {
 }
 
 .ui-menu__item::before {
-  background: currentColor;
+  background: currentcolor;
   border-radius: 50%;
   content: '';
   block-size: 0.3rem;
@@ -275,6 +301,34 @@ dialog.ui-modal[open]::backdrop {
   }
 }
 
+.ui-menu__item:focus-visible {
+  background: var(--bg-accent);
+  color: var(--text);
+}
+
+.ui-menu__item:focus-visible::before {
+  opacity: 1;
+}
+
+/* Menu hover/focus paints var(--bg-accent), which HCM strips, so the hovered row
+   is indistinguishable from its siblings (focus keeps the UA ring; hover has no
+   such fallback). Re-assert a system Highlight like the combobox/command rows,
+   for parity with those sibling surfaces. (component audit C22.) */
+@media (forced-colors: active) {
+  .ui-menu__item:hover,
+  .ui-menu__item:focus-visible {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  .ui-menu__item:hover::before,
+  .ui-menu__item:focus-visible::before {
+    background: HighlightText;
+    opacity: 1;
+  }
+}
+
 /* --- Combobox: an input with a filtered listbox popup (APG pattern,
    wired by initCombobox). Reuses the menu surface tokens. --- */
 .ui-combobox {
@@ -328,6 +382,18 @@ dialog.ui-modal[open]::backdrop {
   color: var(--text);
 }
 
+/* The active option is tracked by aria-activedescendant — it is NEVER DOM-focused,
+   so it gets no UA focus ring under HCM, and its only cue (--bg-accent) is stripped.
+   Re-assert a system Highlight like the command palette does. (audit C2.) */
+@media (forced-colors: active) {
+  .ui-combobox__option.is-active,
+  .ui-combobox__option[aria-selected='true'] {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+  }
+}
+
 .ui-combobox__empty {
   color: var(--text-dim);
   font-size: var(--text-2xs);
@@ -363,6 +429,14 @@ dialog.ui-modal[open]::backdrop {
     inset-inline: 0;
     min-inline-size: 0;
   }
+
+  /* Let the combobox shed its 14rem floor and span the viewport so the input
+     (and its full-width listbox) can't overflow a narrow screen. */
+  .ui-combobox {
+    display: block;
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -376,3 +450,16 @@ dialog.ui-modal[open]::backdrop {
     transition: none;
   }
 }
+
+/* Forced-colors drops both `backdrop-filter: blur()` and the `color-mix()`
+   scrim, so the dialog/lightbox would float over an undimmed page with no
+   separation. Re-assert a translucent scrim with `forced-color-adjust: none`
+   so the layering reads in High Contrast, matching the meter/dot precedent
+   (C28). */
+@media (forced-colors: active) {
+  .ui-modal::backdrop,
+  .ui-lightbox::backdrop {
+    background: color-mix(in srgb, #000 50%, transparent);
+    forced-color-adjust: none;
+  }
+}