actual-css 0.1.0 → 0.2.0

package/dist/actual.css

@@ -143,7 +143,8 @@ select {
   /* Shape */
   --border-width: 1px;
   --radius-full: 9999px;
-  --shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);
+  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.04);
+  --shadow: 0 1px 3px rgb(0 0 0 / 0.05), 0 4px 12px rgb(0 0 0 / 0.04);
   --shadow-popout: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15);
 
   /* Motion — see reset.css for the prefers-reduced-motion hard reset.
@@ -157,8 +158,10 @@ select {
   --ease: ease;
 
   /* Focus ring — shared by every interactive component's :focus-visible */
-  --focus-outline: calc(var(--border-width) * 2) solid var(--focus);
+  --focus-outline-color: currentColor;
+  --focus-outline: calc(var(--border-width) * 2) solid var(--focus-outline-color);
   --focus-outline-offset: 2px;
+  --focus-ring-width: 3px;
 
   /* Status dot positioning — used by .avatar > .badge:empty. The offset is
      the circle-aware inset (1 - 1/√2) / 2 ≈ 14.65%; the ring surrounds the
@@ -225,7 +228,10 @@ select {
 
 @supports (color: color-mix(in oklch, red, white)) {
   :root {
-    --shadow: 0 0.5rem 1.5rem color-mix(in oklch, var(--shadow-color) 8%, transparent);
+    --shadow-xs: 0 1px 2px color-mix(in oklch, var(--shadow-color) 4%, transparent);
+    --shadow:
+      0 1px 3px color-mix(in oklch, var(--shadow-color) 5%, transparent),
+      0 4px 12px color-mix(in oklch, var(--shadow-color) 4%, transparent);
     --shadow-popout: 0 0.25rem 0.75rem color-mix(in oklch, var(--shadow-color) 15%, transparent);
     --backdrop-fill: color-mix(
       in oklch,
@@ -298,11 +304,11 @@ select {
 
   /* Lines and focus */
   --border: hsl(260 15% 88%);
-  --focus: var(--primary);
+  --focus: var(--neutral);
   /* Pre-color-mix fallback only — superseded below by a derivation from
-     --focus so overriding --primary/--focus never leaves a stale ring. */
-  --focus-ring: hsl(268 32% 33% / 0.22);
-  --focus-ring-shadow: 0 0 0 3px var(--focus-ring);
+     --focus so overriding --neutral/--focus never leaves a stale ring. */
+  --focus-ring: hsl(258 7% 43% / 0.3);
+  --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
   --hover-overlay: hsl(260 20% 10% / 0.04);
 
   /* Radius scale — themes may override the whole scale (e.g. [data-theme="square"]) */
@@ -343,7 +349,7 @@ select {
   :root,
   [data-theme="light"],
   [data-theme="dark"] {
-    --focus-ring: color-mix(in oklch, var(--focus) 22%, transparent);
+    --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent);
   }
 }
 
@@ -383,7 +389,7 @@ select {
     --text-subtle: light-dark(hsl(258 7% 57%), hsl(258 7% 54%));
 
     --border: light-dark(hsl(260 15% 88%), hsl(262 12% 24%));
-    --focus-ring: light-dark(hsl(268 32% 33% / 0.22), hsl(268 42% 76% / 0.28));
+    --focus-ring: light-dark(hsl(258 7% 43% / 0.3), hsl(258 10% 72% / 0.28));
     --hover-overlay: light-dark(hsl(260 20% 10% / 0.04), hsl(0 0% 100% / 0.06));
     --shadow-color: light-dark(hsl(260 25% 10%), hsl(262 40% 2%));
   }
@@ -393,7 +399,7 @@ select {
   :root,
   [data-theme="light"] {
     --focus-ring: light-dark(
-      color-mix(in oklch, var(--focus) 22%, transparent),
+      color-mix(in oklch, var(--focus) 30%, transparent),
       color-mix(in oklch, var(--focus) 28%, transparent)
     );
   }
@@ -403,7 +409,7 @@ select {
   :root,
   [data-theme="light"],
   [data-theme="dark"] {
-    --focus-outline: calc(var(--border-width) * 2) solid Highlight;
+    --focus-outline-color: Highlight;
     --focus-ring-shadow: none;
 
     --backdrop-fill: Canvas;
@@ -416,7 +422,7 @@ select {
   [data-theme="dark"] {
     --border-width: 2px;
     --focus-outline-offset: 3px;
-    --focus-ring-shadow: 0 0 0 4px var(--focus-ring);
+    --focus-ring-width: 4px;
     --text-muted: var(--text);
     --text-subtle: var(--text);
   }
@@ -441,10 +447,6 @@ a {
   text-underline-offset: 0.18em;
 }
 
-a:focus-visible {
-  box-shadow: var(--focus-ring-shadow);
-}
-
 @media (hover: hover) {
   a:hover {
     text-decoration-thickness: 0.12em;
@@ -1047,7 +1049,6 @@ small {
   --btn-border: var(--ui-border, var(--btn-default-border, transparent));
   --btn-radius: var(--radius);
   --btn-focus-color: var(--intent, var(--focus));
-  --btn-focus-outline-width: calc(var(--border-width) * 2);
   --btn-hover-bg: var(--ui-hover-bg, var(--btn-bg));
   --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08));
 
@@ -1055,7 +1056,7 @@ small {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5em;
+  gap: 0.375em;
   min-block-size: var(--btn-min-size);
   padding-block: var(--space-2);
   padding-block: max(var(--space-1), calc((var(--btn-min-size) - 1lh) / 2));
@@ -1071,7 +1072,7 @@ small {
   color: var(--btn-fg);
   font: inherit;
   font-size: var(--btn-font-size);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-medium);
   line-height: 1;
   text-decoration: none;
   cursor: pointer;
@@ -1147,14 +1148,14 @@ small {
 }
 
 .btn:focus-visible {
-  outline: var(--btn-focus-outline-width) solid var(--btn-focus-color);
-  outline-offset: var(--focus-outline-offset);
-  box-shadow: 0 0 0 3px var(--btn-focus-ring-color, var(--focus-ring));
+  outline: none;
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--btn-focus-ring-color, var(--focus-ring));
 }
 
 .btn.link:focus-visible {
-  outline-color: currentColor;
+  outline: var(--focus-outline);
   outline-offset: 0.2em;
+  box-shadow: none;
 }
 
 .btn:disabled {
@@ -1178,7 +1179,6 @@ a.btn[aria-disabled="true"] {
 }
 
 .btn[aria-busy="true"] > .spinner {
-  --spinner-size: 1em;
   --spinner-width: 0.15em;
 }
 
@@ -1232,8 +1232,9 @@ a.btn[aria-disabled="true"] {
 /*
  * Badges for compact labels, counts, and state hints.
  *
- * Solid by default. Shared .soft/.outline variants stay available for quieter
- * tags without adding a badge-specific color API.
+ * Soft by default. .solid for counters and notification badges. The dot
+ * (.badge:empty) stays solid regardless — a soft dot is pointless.
+ * Shared .outline variant stays available.
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
@@ -1253,9 +1254,9 @@ a.btn[aria-disabled="true"] {
   --badge-pad-x: 0.55em;
   --badge-font-size: var(--variant-compact-font-size, 0.8125rem);
   --badge-dot-size: 0.5rem;
-  --badge-bg: var(--ui-bg, var(--intent, var(--neutral)));
-  --badge-fg: var(--ui-fg, var(--intent-fg, var(--neutral-fg)));
-  --badge-border: var(--ui-border, transparent);
+  --badge-bg: var(--ui-bg, transparent);
+  --badge-fg: var(--ui-fg, var(--intent, var(--text)));
+  --badge-border: var(--ui-border, var(--intent, var(--border)));
   --badge-radius: 999px;
 
   display: inline-flex;
@@ -1280,8 +1281,31 @@ a.btn[aria-disabled="true"] {
     box-shadow var(--duration);
 }
 
+/* Soft by default — duplicated here with @sync markers for check-sync.js
+   to guard, the same way alert.css guards its own soft recipe. */
+@supports (color: color-mix(in oklch, red, white)) {
+  .badge:where(:not(.solid, .outline)) {
+    /* @sync soft-recipe */
+    --badge-bg: color-mix(
+      in oklch,
+      var(--surface) var(--soft-bg-mix),
+      var(--intent, var(--neutral))
+    );
+    --badge-fg: var(--intent, var(--text));
+    --badge-border: color-mix(
+      in oklch,
+      var(--surface) var(--soft-border-mix),
+      var(--intent, var(--neutral))
+    );
+    /* @sync soft-recipe */
+  }
+}
+
 .badge:empty {
   --badge-size: var(--badge-dot-size);
+  --badge-bg: var(--intent, var(--neutral));
+  --badge-fg: var(--intent-fg, var(--neutral-fg));
+  --badge-border: transparent;
   padding: 0;
   border: 0;
   inline-size: var(--badge-size);
@@ -1314,8 +1338,7 @@ a.btn[aria-disabled="true"] {
 }
 
 /* .solid/.soft/.outline are shared via variants.css, including the
-   .soft/.outline hover recipe (--ui-hover-bg). The --badge-* fallbacks make
-   .badge solid by default. */
+   .soft/.outline hover recipe (--ui-hover-bg). */
 @media (hover: hover) {
   :where(a.badge, button.badge):not(:where(:disabled, [aria-disabled="true"])):hover {
     background: var(--ui-hover-bg, var(--badge-bg));
@@ -1397,7 +1420,7 @@ a.badge[aria-disabled="true"] {
 }
 
 .alert {
-  --alert-pad-block: var(--variant-pad-block, var(--space-4));
+  --alert-pad-block: var(--variant-pad-block, var(--space-3));
   --alert-pad-inline: var(--space-4);
   --alert-font-size: var(--variant-font-size, var(--font-size-md));
   --alert-icon-size: var(--variant-icon-size, 1.25rem);
@@ -1447,7 +1470,7 @@ a.badge[aria-disabled="true"] {
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
-  .alert:where(:not(.solid, .outline)) {
+  .alert:where(:not(.solid, .outline, .callout)) {
     /* @sync soft-recipe */
     --ui-bg: color-mix(in oklch, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
     --ui-border: color-mix(
@@ -1511,6 +1534,92 @@ a.badge[aria-disabled="true"] {
    Canvas backplate (unreadable) — so .solid intentionally falls back to the
    default look. */
 
+/* Callout — neutral surface with an inset accent band on the leading edge.
+   The ::before pseudo is absolutely positioned and inset to respect the
+   outer border-radius, so it never needs its own radius. */
+.alert.callout {
+  --alert-bg: var(--surface-subtle);
+  --ui-bg: var(--alert-bg);
+  --ui-fg: var(--text);
+  --ui-border: var(--border);
+  position: relative;
+  padding-inline-start: calc(var(--alert-pad-inline) + var(--space-3));
+}
+
+.alert.callout::before {
+  content: "";
+  position: absolute;
+  inset-block: var(--space-2);
+  inset-inline-start: var(--space-2);
+  inline-size: 0.25rem;
+  border-radius: var(--radius-full);
+  background: var(--intent, var(--neutral));
+}
+
+/* Admonition — structured title/body anatomy with a tinted title band.
+   The root is layout-neutralized: no padding, no gap, no icon grid. */
+.alert.admonition {
+  padding: 0;
+  gap: 0;
+  display: block;
+  overflow: clip;
+}
+
+.alert-title {
+  padding-block: var(--alert-pad-block);
+  padding-inline: var(--alert-pad-inline);
+
+  @supports (color: color-mix(in oklch, red, white)) {
+    background: color-mix(
+      in oklch,
+      var(--surface) var(--soft-bg-mix),
+      var(--intent, var(--neutral))
+    );
+  }
+
+  @supports not (color: color-mix(in oklch, red, white)) {
+    background: var(--intent, var(--neutral));
+  }
+
+  border-start-start-radius: calc(var(--radius-lg) - var(--border-width));
+  border-start-end-radius: calc(var(--radius-lg) - var(--border-width));
+}
+
+.alert-title:where(summary) {
+  cursor: pointer;
+  user-select: none;
+  list-style: none;
+}
+
+.alert-title:where(summary)::-webkit-details-marker {
+  display: none;
+}
+
+.alert-title[aria-hidden] {
+  display: inline-flex;
+  gap: var(--space-2);
+  align-items: center;
+}
+
+.alert-body {
+  padding-block: var(--alert-pad-block);
+  padding-inline: var(--alert-pad-inline);
+  color: var(--text);
+}
+
+.alert-body > :first-child {
+  margin-block-start: 0;
+}
+
+.alert-body > :last-child {
+  margin-block-end: 0;
+}
+
+details.alert.admonition[open] .alert-title {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
 /*
  * Actions — a horizontal action-button cluster.
  *
@@ -2201,7 +2310,6 @@ dialog.drawer nav {
   background: var(--surface-subtle);
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);
-  box-shadow: var(--focus-ring-shadow);
 }
 
 :is(.flyout, .flyout :where(li))
@@ -2487,8 +2595,8 @@ dialog.drawer nav {
 }
 
 .spinner {
-  --spinner-size: 1.5rem;
-  --spinner-width: 2px;
+  --spinner-size: 1em;
+  --spinner-width: 0.125em;
   --spinner-track: currentColor;
   --spinner-value: transparent;
 
@@ -2514,11 +2622,11 @@ dialog.drawer nav {
 }
 
 .spinner.sm {
-  --spinner-size: 1rem;
+  --spinner-size: 0.75em;
 }
 
 .spinner.lg {
-  --spinner-size: 3rem;
+  --spinner-size: 2rem;
   --spinner-width: 3px;
 }
 
@@ -2626,6 +2734,7 @@ dialog.drawer nav {
   }
 
   [aria-busy="true"]:not(.btn) > .spinner:last-child {
+    --spinner-size: 2rem;
     position: absolute;
     inset: 0;
     z-index: 2;
@@ -2780,10 +2889,9 @@ dialog.drawer nav {
  * the coloring via --intent / --intent-fg. status.js applies these as plain
  * classes on the target; it does not know their names or that they exist.
  *
- * Public API: .status-bar + [data-status], both required — status.js reads
- * the class name from js/selectors.js rather than hardcoding it, but still
- * needs it to scope its document-wide lookup away from unrelated elements
- * that carry their own generic `data-status`.
+ * CSS API:            .status-bar
+ * JS target contract:  [data-status][role="status"]
+ * Normally combined, but they describe separate concerns.
  */
 
 /* Intent boundary — inherited intents do not tint this component.
@@ -3392,6 +3500,7 @@ a.avatar[aria-disabled="true"] {
 
 .tab:focus-visible {
   outline: var(--focus-outline);
+  outline-color: var(--focus);
   outline-offset: -2px;
   border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 }
@@ -3460,8 +3569,8 @@ a.avatar[aria-disabled="true"] {
  * Progressive enhancement: on browsers that support :target-current,
  * this file enables the native target group and marks the active link.
  *
- * Falls back gracefully: links still work when IntersectionObserver or
- * :target-current is unavailable.
+ * Falls back gracefully: links still work when :target-current is unavailable
+ * and when the JavaScript enhancer is not loaded at all.
  */
 
 @supports selector(.scrollspy a:target-current) {
@@ -3759,8 +3868,7 @@ a.avatar[aria-disabled="true"] {
 .textarea:focus-visible,
 .select:focus-visible {
   --control-border: var(--focus);
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
+  outline: none;
   box-shadow: var(--focus-ring-shadow);
 }
 
@@ -3785,14 +3893,6 @@ a.avatar[aria-disabled="true"] {
   color: var(--text-muted);
 }
 
-@media (forced-colors: active) {
-  .input:focus-visible,
-  .textarea:focus-visible,
-  .select:focus-visible {
-    box-shadow: none;
-  }
-}
-
 /*
  * Input Icon — leading decorative icon inside a relative wrapper.
  *
@@ -3988,8 +4088,7 @@ a.avatar[aria-disabled="true"] {
 .check:focus-visible,
 .radio:focus-visible {
   --choice-border: var(--focus);
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
+  outline: none;
   box-shadow: var(--focus-ring-shadow);
 }
 
@@ -4030,9 +4129,15 @@ a.avatar[aria-disabled="true"] {
 /*
  * Choice cards — card-style radio and checkbox labels.
  *
- * Each .choice-card is a <label> with a hidden native input. Both radio and
- * checkbox show a checkmark badge on selection: round for radio, rounded
- * square for checkbox. Pair with grid or flex utilities for group layout.
+ * Each .choice-card is a <label> wrapping a native radio or checkbox. When
+ * :has() is supported the input is visually hidden and the card mirrors its
+ * state: checked border and tint, checkmark badge (round for radio, rounded
+ * square for checkbox), focus ring, disabled dimming. Without :has() the
+ * native input stays visible so selection state never disappears.
+ *
+ * The badge overhangs the top-right corner by 0.375em; ancestors with
+ * overflow: hidden will clip it. Pair with grid or flex utilities for group
+ * layout.
  */
 :where(.choice-card) {
   /* @sync intent-boundary */
@@ -4055,7 +4160,7 @@ a.avatar[aria-disabled="true"] {
   position: relative;
   display: block;
   padding: var(--choice-card-pad);
-  border: var(--border-width) solid var(--choice-card-border);
+  border: var(--border-width) solid var(--form-invalid-border, var(--choice-card-border));
   border-radius: var(--choice-card-radius);
   background: var(--choice-card-bg);
   color: var(--text);
@@ -4067,23 +4172,26 @@ a.avatar[aria-disabled="true"] {
 }
 
 /* The native input is visually hidden but stays focusable and participates in
-   form submission and keyboard navigation (sr-only pattern). */
-.choice-card > input {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+   form submission and keyboard navigation (sr-only pattern). Guarded: without
+   :has() the card cannot mirror the input's state, so the visible native
+   control is the fallback affordance. */
+@supports selector(:has(*)) {
+  .choice-card > :is(input[type="radio"], input[type="checkbox"]) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
 }
 
 /* Focus ring on the label follows the hidden input's focus. */
 .choice-card:has(:focus-visible) {
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
+  outline: none;
   box-shadow: var(--focus-ring-shadow);
 }
 
@@ -4110,40 +4218,48 @@ a.avatar[aria-disabled="true"] {
   }
 }
 
-/* Checkmark badge — circle for radio, rounded square for checkbox */
-.choice-card:has(:checked)::before {
+/* Checkmark badge — always rendered at scale(0) and scaled in on check, so
+   the entrance can transition (a pseudo created on :checked could not). */
+.choice-card::before,
+.choice-card::after {
   content: "";
   position: absolute;
   inset-inline-end: -0.375em;
   inset-block-start: -0.375em;
   inline-size: var(--choice-card-check-size);
   block-size: var(--choice-card-check-size);
+  transform: scale(0);
+  transition: transform var(--duration);
+}
+
+/* Badge disc — circle for radio, rounded square for checkbox */
+.choice-card::before {
   background: var(--intent, var(--primary));
-  z-index: 1;
   box-shadow: 0 0 0 2px var(--surface);
+  z-index: 1;
 }
 
-.choice-card:has(input[type="radio"]:checked)::before {
+.choice-card:has(input[type="radio"])::before {
   border-radius: var(--radius-full);
 }
 
-.choice-card:has(input[type="checkbox"]:checked)::before {
+.choice-card:has(input[type="checkbox"])::before {
   border-radius: var(--radius-sm);
 }
 
-.choice-card:has(:checked)::after {
-  content: "";
-  position: absolute;
-  inset-inline-end: -0.375em;
-  inset-block-start: -0.375em;
-  inline-size: var(--choice-card-check-size);
-  block-size: var(--choice-card-check-size);
+/* Check mark */
+.choice-card::after {
   background: var(--intent-fg, var(--primary-fg));
-  mask: var(--icon-check-mask) center / 60% no-repeat;
   -webkit-mask: var(--icon-check-mask) center / 60% no-repeat;
+  mask: var(--icon-check-mask) center / 60% no-repeat;
   z-index: 2;
 }
 
+.choice-card:has(:checked)::before,
+.choice-card:has(:checked)::after {
+  transform: scale(1);
+}
+
 @media (forced-colors: active) {
   .choice-card {
     --choice-card-border: ButtonText;
@@ -4152,6 +4268,9 @@ a.avatar[aria-disabled="true"] {
 
   .choice-card:has(:checked) {
     --choice-card-border: Highlight;
+    /* Pin the background: with forced-color-adjust: none the color-mix tint
+       above would actually render, uncontrolled in high-contrast themes. */
+    --choice-card-bg: Canvas;
     forced-color-adjust: none;
   }
 
@@ -4160,14 +4279,6 @@ a.avatar[aria-disabled="true"] {
     box-shadow: 0 0 0 2px Canvas;
   }
 
-  .choice-card:has(input[type="radio"]:checked)::before {
-    border-radius: var(--radius-full);
-  }
-
-  .choice-card:has(input[type="checkbox"]:checked)::before {
-    border-radius: var(--radius-sm);
-  }
-
   .choice-card:has(:checked)::after {
     background: HighlightText;
   }
@@ -4305,23 +4416,13 @@ a.avatar[aria-disabled="true"] {
 }
 
 /*
- * Native-only control polish: file and range inputs that defeat most custom
- * styling, so the framework stays out of their way and just keeps them readable
- * and theme-aware.
+ * Native-only control polish: file input that mostly defeats custom styling,
+ * so the framework stays out of the way and just keeps it readable and
+ * theme-aware.
+ *
+ * Range has its own custom-styled file (range.css) so the focus ring can
+ * target the thumb pseudo-element rather than the rectangular CSS box.
  */
-/* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
-:where(.range) {
-  /* @sync intent-boundary */
-  --intent: initial;
-  --intent-fg: initial;
-  --ui-bg: initial;
-  --ui-fg: initial;
-  --ui-border: initial;
-  --ui-hover-bg: initial;
-  /* @sync intent-boundary */
-}
-
 .file {
   color: var(--text-muted);
 }
@@ -4354,23 +4455,105 @@ a.avatar[aria-disabled="true"] {
   }
 }
 
+.file:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-shadow);
+}
+
+/*
+ * Range slider — custom-styled so the focus ring always targets the
+ * user-manipulated surface (the thumb) rather than the CSS box.
+ *
+ * appearance: none gives us full control over track and thumb; without it,
+ * pseudo-element rules for ::-webkit-slider-thumb and ::-moz-range-thumb
+ * are not reliably applied across browsers.
+ */
+
+/* Intent boundary — inherited intents do not tint this component.
+   Local intent classes still win because :where() has zero specificity. */
+:where(.range) {
+  /* @sync intent-boundary */
+  --intent: initial;
+  --intent-fg: initial;
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+  --ui-hover-bg: initial;
+  /* @sync intent-boundary */
+}
+
 .range {
+  --range-thumb-size: 1.25rem;
+  --range-track-height: 0.25rem;
+  --range-thumb-bg: var(--intent, var(--primary));
+  --range-track-bg: var(--border);
+
+  appearance: none;
   inline-size: 100%;
-  accent-color: var(--intent, var(--primary));
+  block-size: var(--range-thumb-size);
+  background: transparent;
+  cursor: pointer;
+}
+
+.range::-webkit-slider-runnable-track {
+  block-size: var(--range-track-height);
+  border-radius: var(--radius-full);
+  background: var(--range-track-bg);
+}
+
+.range::-moz-range-track {
+  block-size: var(--range-track-height);
+  border-radius: var(--radius-full);
+  background: var(--range-track-bg);
+}
+
+.range::-webkit-slider-thumb {
+  appearance: none;
+  inline-size: var(--range-thumb-size);
+  block-size: var(--range-thumb-size);
+  border-radius: var(--radius-full);
+  border: 0;
+  background: var(--range-thumb-bg);
+  margin-block-start: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
+  cursor: inherit;
+  transition: box-shadow var(--duration);
+}
+
+.range::-moz-range-thumb {
+  inline-size: var(--range-thumb-size);
+  block-size: var(--range-thumb-size);
+  border-radius: var(--radius-full);
+  border: 0;
+  background: var(--range-thumb-bg);
+  cursor: inherit;
+  transition: box-shadow var(--duration);
 }
 
-.file:focus-visible,
 .range:focus-visible {
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
-  box-shadow: var(--focus-ring-shadow);
+  outline: none;
 }
 
-@media (forced-colors: active) {
-  .file:focus-visible,
-  .range:focus-visible {
-    box-shadow: none;
-  }
+/*
+ * The 1px surface-coloured separator keeps the ring visually distinct from
+ * the small, coloured thumb — unlike a full-size input where the same gap
+ * would read as an unwanted void.
+ */
+.range:focus-visible::-webkit-slider-thumb {
+  box-shadow:
+    0 0 0 1px var(--surface),
+    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus-ring);
+}
+
+.range:focus-visible::-moz-range-thumb {
+  box-shadow:
+    0 0 0 1px var(--surface),
+    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus-ring);
+}
+
+.range:disabled {
+  --range-thumb-bg: var(--text-subtle);
+  cursor: not-allowed;
+  opacity: var(--disabled-opacity);
 }
 
 /*
@@ -4461,8 +4644,7 @@ a.avatar[aria-disabled="true"] {
 
 .switch:focus-visible {
   --switch-border: var(--focus);
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
+  outline: none;
   box-shadow: var(--focus-ring-shadow);
 }
 
@@ -4539,6 +4721,16 @@ a.avatar[aria-disabled="true"] {
   --switch-bg: var(--danger);
 }
 
+/* Choice cards hide their native input, so invalid state must surface on the
+   card itself. Sets the same --form-invalid-border hook the card's border
+   consumes. */
+@supports selector(:has(*)) {
+  .choice-card:has([aria-invalid="true"]),
+  .needs-validation.was-validated .choice-card:has(:invalid) {
+    --form-invalid-border: var(--danger);
+  }
+}
+
 @supports selector(:user-invalid) {
   .needs-validation :is(.input, .textarea, .select, .check, .radio, .switch):user-invalid {
     --form-invalid-border: var(--danger);
@@ -4549,6 +4741,10 @@ a.avatar[aria-disabled="true"] {
   .needs-validation .field:has(:user-invalid) > .field-error {
     display: block;
   }
+
+  .needs-validation .choice-card:has(:user-invalid) {
+    --form-invalid-border: var(--danger);
+  }
 }
 
 /*
@@ -4856,8 +5052,7 @@ a.avatar[aria-disabled="true"] {
    focus, and unsupported :has() browsers retain the control's normal ring. */
 .join:has(> :is(.input, .textarea, .select):focus-visible) {
   border-radius: var(--join-radius);
-  outline: var(--focus-outline);
-  outline-offset: var(--focus-outline-offset);
+  outline: none;
   box-shadow: var(--focus-ring-shadow);
 }
 
@@ -4880,6 +5075,43 @@ a.avatar[aria-disabled="true"] {
   }
 }
 
+/*
+ * Forced-colors focus — centralised so individual components do not need
+ * their own fallback.  The double :focus keeps specificity high enough
+ * (0,0,2,0) to beat a single :focus-visible; against a class selector like
+ * .input:focus-visible it ties, but this file loads last so it wins on
+ * source order.
+ *
+ * .choice-card and .join receive focus indirectly (:has on a wrapper that
+ * never matches :focus), so they are listed explicitly.
+ *
+ * .range is excluded from the rectangular fallback: its focus is drawn on
+ * the thumb pseudo-element, which is the manipulated surface.
+ *
+ * box-shadow: none is redundant when forced-color-adjust is auto, but safe
+ * when a component uses forced-color-adjust: none (e.g. checked switches /
+ * checkboxes).
+ */
+@media (forced-colors: active) {
+  :focus:focus-visible:not(.range),
+  .choice-card:has(:focus-visible),
+  .join:has(> :is(.input, .textarea, .select):focus-visible) {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+    box-shadow: none;
+  }
+
+  .range:focus-visible::-webkit-slider-thumb {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+
+  .range:focus-visible::-moz-range-thumb {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+}
+
 @media print {
   :root,
   body {