actual-css 0.11.1 → 0.13.0

package/src/css/components/steps.css

@@ -25,7 +25,8 @@
  * destinations. Anything else focusable in a step is out of contract.
  *
  * The framework never hides an authored label to solve a layout problem. A
- * labelled row that outgrows its space scrolls. An `actual-container` size
+ * labelled row wraps its labels, then scrolls if its markers or authored item
+ * minimum outgrow the available space. An `actual-container` size
  * context buys it one thing: the wide representation, marker beside label.
  *
  * See docs/design-notes/steps.md for the threshold, the selector shapes, the
@@ -161,10 +162,11 @@
 /* Horizontal ------------------------------------------------------------- */
 
 .steps-horizontal {
-  --step-min: 7rem;
+  --step-min: var(--step-size);
   --step-gap: var(--space-20);
 
   inline-size: 100%;
+  column-gap: var(--step-gap);
   overflow-x: auto;
   /* Stated, never left to `overflow-x` alone: one scrolling axis computes the
      other to `auto`, and a row hugs fractional content closely enough that a
@@ -173,11 +175,22 @@
   overscroll-behavior-inline: contain;
 }
 
+/* A row that loads mid-flow starts scrolled to its current step; engines
+   without the property start at the first. */
+.steps-horizontal > [aria-current="step"] {
+  /* biome-ignore lint/correctness/noUnknownProperty: CSS Scroll Snap 2 property that Biome's list predates; an engine without it drops the declaration. */
+  scroll-initial-target: nearest;
+}
+
 /* A scroll container clips at the padding edge, so a navigable row reserves the
-   focus ring's own width and offset. Only this composition scrolls, and only a
-   link has a ring to protect. */
+   focus ring's own width and offset, and focus scrolls a link in that far from
+   the inline clip. Only this composition scrolls, and only a link has a ring to
+   protect. */
 .steps-horizontal:has(a[href]) {
+  /* Wrapped names can fill their cell right up to either inline clip edge. */
+  padding-inline: calc(var(--focus-outline-offset) + var(--focus-ring-width));
   padding-block: calc(var(--focus-outline-offset) + var(--focus-ring-width));
+  scroll-padding-inline: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 }
 
 /* One explicit row, the marker's: a `.step-label` is auto-placed into an
@@ -189,6 +202,8 @@
 .steps-horizontal > li {
   display: grid;
   flex: 1 0 var(--step-min);
+  /* Bound each label to its share so it cannot change the marker pitch. */
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: var(--step-size);
   gap: var(--step-gap);
   justify-items: center;
@@ -196,9 +211,42 @@
   text-align: center;
 }
 
-/* An empty step is a marker and nothing else, so it needs a marker's width
-   rather than a reading width. That is what lets five of them fit a phone with
-   no size context and no variant class.
+.steps-horizontal .step-label {
+  /* Even an unbroken name must fit its share instead of overlapping a peer.
+     Hyphenation, when `lang` allows it, is tried before an arbitrary break. */
+  overflow-wrap: anywhere;
+  hyphens: auto;
+}
+
+/* Half end cells put the outer markers on the row's edges without changing
+   their pitch, so the track lines up with the text around it, as the compact
+   and inline forms do. The marker's half-width keeps the first connector equal
+   to its peers.
+
+   Source order is load-bearing: these tie the `:empty` rules below and the
+   inline query on specificity, and both must win over them. */
+.steps-horizontal > li:is(:first-child, :last-child) {
+  flex: 0.5 0 calc((var(--step-min) + var(--step-size)) / 2);
+  min-inline-size: max(var(--step-size), calc((var(--step-min) + var(--step-size)) / 2));
+}
+
+.steps-horizontal > li:first-child {
+  justify-items: start;
+  text-align: start;
+}
+
+.steps-horizontal > li:first-child::after {
+  inset-inline-start: var(--step-size);
+  inline-size: calc(200% - var(--step-size) * 2 + var(--step-gap));
+}
+
+.steps-horizontal > li:last-child {
+  justify-items: end;
+  text-align: end;
+}
+
+/* An empty step ignores any authored reading-width floor and needs only its
+   marker. That lets five of them fit a phone without a size context.
 
    `justify-items` is not an override of the row's centring: the marker is
    centred because a label sits under it and the two share a centre, and with no
@@ -208,9 +256,8 @@
    the text around it, the way the inline representation does.
 
    `:empty` says exactly what the markup says, the way `.badge:empty` does, and
-   it reads the item's own content: bare text in an `<li>` keeps a reading width
-   like its wrapped peers, where `> li:has(.step-label)` would give it a marker
-   floor and skew the row. `:empty` also keeps the compact form reachable on the
+   it reads the item's own content: bare text keeps the same authored floor as
+   its wrapped peers. `:empty` also keeps the compact form reachable on the
    Degraded tier, where only the inline bonus needs `:has()`. */
 .steps-horizontal > li:empty {
   flex: 1 1 0;
@@ -220,6 +267,8 @@
 
 .steps-horizontal > li:empty::after {
   inset-inline-start: var(--step-size);
+  /* Marker-only end cells keep full shares, unlike labelled end cells. */
+  inline-size: calc(100% - var(--step-size) + var(--step-gap));
 }
 
 .steps-horizontal > li:empty:last-child {
@@ -227,12 +276,12 @@
 }
 
 /* The pseudo-element is marker-height so --step-connector may be any complete
-   background value. */
+   background value; its length also crosses the gap to the next equal track. */
 .steps-horizontal > li::after {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: calc(50% + var(--step-size) / 2);
-  inline-size: calc(100% - var(--step-size));
+  inline-size: calc(100% - var(--step-size) + var(--step-gap));
   block-size: var(--step-size);
   background: var(
     --step-connector,
@@ -251,6 +300,11 @@
  * written — a row out of contract is not owed a curated fallback.
  */
 @container actual-container (inline-size >= 60rem) {
+  .steps-horizontal:has(.step-label) {
+    /* Inline connectors already own the spacing between marker-label groups. */
+    column-gap: 0;
+  }
+
   .steps-horizontal:has(.step-label) > li {
     display: flex;
     flex: 1 1 auto;

package/src/css/components/tab.css

@@ -12,8 +12,18 @@
  * author class can then adjust a vertical strip without restating the
  * attribute to reach its specificity.
  *
+ * A horizontal strip is one axis of navigation, so it never wraps: a second
+ * line no longer matches the Left/Right model and reads as a nested level.
+ * When the tabs do not fit, the strip scrolls without a scrollbar; focus
+ * scrolls the active tab into view.
+ *
  * Public hooks:
+ * --tab-flex
  * --tab-gap
+ *
+ * Internal:
+ * --tab-edge
+ * --tab-fade-dir (read inside @keyframes, so it resolves per element)
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
@@ -24,27 +34,129 @@
 .tabs {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: var(--space-10);
   margin: 0;
   padding: 0;
+  /* Block overflow is hidden, not auto: overflow-x: auto alone computes the
+     block axis to auto, so a sub-pixel line box would add a vertical
+     scrollbar inside the strip. Nothing paints outside it: the focus outline
+     is inset and the indicator sits inside the tab. */
+  overflow: auto hidden;
+  overscroll-behavior-inline: contain;
+  /* why: a visible bar sits on the indicator and the hairline and reads as a
+     second underline. The strip has its own scroll controls: selecting the
+     clipped tab, or focusing it, brings it into view with the next one
+     hinted by scroll-padding; arrow keys and swipes do the same. */
+  scrollbar-width: none;
+  /* Focus scrolls a tab in with room to spare, hinting at the next one; the
+     edge fade below spans the same inset, so a revealed tab stays clear of it. */
+  --tab-edge: var(--space-60);
+
+  scroll-padding-inline: var(--tab-edge);
   border-block-end: var(--border-width) solid var(--border);
   list-style: none;
 }
 
+/* The landmark around link tabs is not a scroll container, so as a flex or
+   grid item it would keep the strip's full width and push the page into
+   scrolling. Letting it shrink hands the overflow back to the strip.
+   Without :has() the landmark keeps its width; min-inline-size: 0 on the
+   wrapper is the fallback. */
+:where(nav:has(> .tabs)) {
+  min-inline-size: 0;
+}
+
+/* Items keep their size and the strip scrolls instead. Covers both
+   anatomies: .tab directly in a tablist, or <li> in a navigation list.
+   --tab-flex: 1 1 0 shares the width equally; an item still never shrinks
+   below its label (flex items keep min-content), so a strip that cannot fit
+   scrolls as before. */
+.tabs > * {
+  flex: var(--tab-flex, none);
+}
+
 .tabs:where([aria-orientation="vertical"]) {
   display: grid;
+  overflow: visible;
   align-content: start;
   justify-items: stretch;
   border-block-end: 0;
   border-inline-end: var(--border-width) solid var(--border);
 }
 
+/* Edge fade: with no scrollbar, the strip fades the edges it can still scroll
+   toward. It runs on the strip's own inline timeline, which is inactive on a
+   strip that fits or a vertical rail, so those stay unmasked. Keep the
+   @supports: without scroll timelines the animation would end at once and pin
+   its last mask. It follows scroll, not time, so reduced motion keeps it. */
+@supports (animation-timeline: scroll()) {
+  .tabs {
+    --tab-fade-dir: to right;
+
+    animation: actual-tabs-fade linear both;
+    animation-timeline: scroll(self inline);
+  }
+
+  /* Gradient keywords are physical; :dir() follows the strip's own
+     direction, so an LTR island in an RTL page keeps its fade on the right. */
+  .tabs:dir(rtl) {
+    --tab-fade-dir: to left;
+  }
+}
+
+/* A strip that loads on a current link tab starts scrolled to it. Horizontal
+   only: the strip is then its nearest scroll container, while a vertical
+   rail would hand the target to the page. Engines without the property start
+   at the first tab, and the fade says there is more. */
+:where(.tabs:not([aria-orientation="vertical"]))
+.tab:is([aria-current="page"], [aria-current="true"]) {
+  /* biome-ignore lint/correctness/noUnknownProperty: CSS Scroll Snap 2 property that Biome's list predates; an engine without it drops the declaration. */
+  scroll-initial-target: nearest;
+}
+
+/* Forced colors keep every label at full contrast. */
+@media (forced-colors: active) {
+  .tabs {
+    animation: none;
+  }
+}
+
+/* mask-image does not interpolate, so each mask holds until halfway to the
+   next keyframe: the start fade appears within the first pixels of scroll and
+   the end fade drops at the very end. */
+@keyframes actual-tabs-fade {
+  0% {
+    mask-image: linear-gradient(
+      var(--tab-fade-dir),
+      #000 calc(100% - var(--tab-edge)),
+      transparent
+    );
+  }
+
+  1%,
+  99% {
+    mask-image: linear-gradient(
+      var(--tab-fade-dir),
+      transparent,
+      #000 var(--tab-edge) calc(100% - var(--tab-edge)),
+      transparent
+    );
+  }
+
+  100% {
+    mask-image: linear-gradient(var(--tab-fade-dir), transparent, #000 var(--tab-edge));
+  }
+}
+
 .tab {
   /* Positioning context for the selected indicator pseudo. */
   position: relative;
   display: inline-flex;
   align-items: center;
+  /* A tab wider than its label (--tab-flex) centers it; at natural width this
+     changes nothing, and a vertical rail resets it to the start below. */
+  justify-content: center;
   gap: var(--tab-gap, 0.375em);
   min-block-size: var(--control-size);
   padding-inline: var(--space-30);
@@ -58,12 +170,18 @@
      the strip. The active state is carried by color and the indicator line. */
   font-weight: var(--font-weight-semibold);
   text-decoration: none;
+  /* A label breaking inside a one-line strip is the same defect as the strip
+     wrapping. */
+  white-space: nowrap;
   cursor: pointer;
 }
 
+/* A vertical strip has no inline axis to protect: long labels wrap within the
+   rail instead of overflowing it. */
 .tabs:where([aria-orientation="vertical"]) .tab {
   justify-content: flex-start;
   padding-inline-end: var(--space-40);
+  white-space: normal;
 }
 
 .tab:is(:disabled, [aria-disabled="true"]) {
@@ -94,8 +212,13 @@
   border-end-end-radius: 0;
 }
 
+/* A link tab is current on aria-current="page". "true" is for the one place
+   where no page token fits: a navigation flyout trigger whose panel holds the
+   current page. State selectors name their values, never the attribute's
+   presence, so "false" (what React and Vue serialize for a false binding)
+   stays inert. */
 .tab[aria-selected="true"],
-.tab[aria-current="page"] {
+.tab:is([aria-current="page"], [aria-current="true"]) {
   color: var(--intent, var(--state-selected));
 }
 
@@ -104,7 +227,7 @@
    forced colors and erase the distinction. currentColor follows the palette the
    UA forces, so no forced-colors block is needed. */
 .tab[aria-selected="true"]::after,
-.tab[aria-current="page"]::after {
+.tab:is([aria-current="page"], [aria-current="true"])::after {
   content: "";
   position: absolute;
   inset-inline: 0;
@@ -113,9 +236,16 @@
 }
 
 .tabs:where([aria-orientation="vertical"]) .tab[aria-selected="true"]::after,
-.tabs:where([aria-orientation="vertical"]) .tab[aria-current="page"]::after {
+.tabs:where([aria-orientation="vertical"])
+  .tab:is([aria-current="page"], [aria-current="true"])::after {
   inset-block: 0;
   inset-inline: auto 0;
   border-block-end: 0;
   border-inline-end: 2px solid currentColor;
 }
+
+/* A shared width (--tab-flex) lands on the <li> of a link tab; the tab fills
+   it, so the indicator and the hit area span the whole share. */
+.tabs > li > .tab {
+  inline-size: 100%;
+}

package/src/css/core/base.css

@@ -7,7 +7,7 @@
  * Public hooks:
  * --link
  * --hr-space
- * --font-width / --font-width-dense (see variants.css for the dense application)
+ * --font-width (the document's font-stretch; a theme typography choice)
  */
 
 body {

package/src/css/core/focus.css

@@ -21,14 +21,16 @@
    Documented exception: an invalid field focuses in --form-invalid-border
    (danger), so the error stays visible at the point of correction. The border
    carries the same hook; report:theme-contrast measures that line at 3:1
-   against the field's background alongside --focus. */
+   against the field's background alongside --focus.
+
+   Public hooks:
+   --focus-outline (fallback-only: replaces the whole generic line)
+*/
 :focus {
-  outline: var(--focus-outline);
+  outline: var(--focus-outline, var(--focus-ring-width) solid var(--focus-outline-color));
   outline-offset: var(--focus-outline-offset);
 }
 
-@supports selector(:focus-visible) {
-  :focus:not(:focus-visible) {
-    outline: none;
-  }
+:focus:not(:focus-visible) {
+  outline: none;
 }

package/src/css/core/reset.css

@@ -36,7 +36,8 @@ select {
 
   *,
   *::before,
-  *::after {
+  *::after,
+  ::backdrop {
     animation-duration: 0.01ms !important;
     animation-delay: 0s !important;
     animation-iteration-count: 1 !important;

package/src/css/core/theme.css

@@ -8,7 +8,9 @@
  * Derived: "Theme-derived aliases", Tone subsystem, Backdrop fill — reference
  * other tokens; hard-coded overrides on a custom theme will break the intent.
  * Exception: --surface-opaque and --surface-solid-fg are public; a theme with
- * translucent surfaces overrides them with opaque values.
+ * translucent surfaces overrides them with opaque values. --border-control is
+ * public too: the resting edge of a neutral control, apart from structural
+ * separators.
  * Internal: --hgroup-gap.
  */
 :root {
@@ -79,6 +81,10 @@
      fields, a solid band), which rules out the primary itself. */
   --focus: hsl(268 30% 55%);
   --hover-overlay: hsl(260 20% 10% / 0.04);
+  /* Solid fills take a stronger wash than the subtle shared overlay. Black in
+     both schemes on purpose: a solid button darkens on hover even in dark mode
+     (see themes/gradient.css), unlike the neutral washes. */
+  --hover-overlay-solid: rgb(0 0 0 / 0.14);
 
   /* Radius scale — themes may override the whole scale (e.g. [data-theme="square"]) */
   --radius: 0.5rem;
@@ -106,6 +112,9 @@
      never a fill. --surface-solid-fg is the ink on --surface-solid. */
   --surface-opaque: var(--surface);
   --surface-solid-fg: var(--surface);
+  /* The edge that tells a control apart from the surface, where --border only
+     separates surfaces: fields, choices, switch, OTP cells, choice cards. */
+  --border-control: var(--border);
 }
 
 /* Soft foreground hooks — the soft ink is the intent rebated toward the local

package/src/css/core/tokens.css

@@ -20,7 +20,6 @@
   --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --font-width: 100%;
-  --font-width-dense: 95%;
   --line-height: 1.5;
   --line-height-tight: 1.25;
   --line-height-relaxed: 1.75;
@@ -82,9 +81,11 @@
      without a component ring (links, summary, plain items). Components draw
      the themed ring instead: --focus-ring-width solid --focus. See focus.css
      for the two contracts. Both share --focus-ring-width: they differ in
-     color only. */
+     color only. No --focus-outline alias here: declared on :root it would be
+     inherited already computed, so a theme island or a region setting
+     --focus-ring-width would not reach it. focus.css composes the line on the
+     focused element instead. */
   --focus-outline-color: currentColor;
-  --focus-outline: var(--focus-ring-width) solid var(--focus-outline-color);
   --focus-outline-offset: 2px;
   --focus-ring-width: 2px;
 
@@ -104,8 +105,9 @@
   --bar-height: 0.65rem;
 
   /* Controls — inputs and buttons share --control-size so heights always match.
-     .compact/.spacious (variants.css) switch geometry without changing
-     --control-font-size. Local .sm/.lg component sizes switch all three.
+     .compact/.spacious (variants.css) switch geometry (--control-size,
+     --control-pad-x) without changing --control-font-size. Local .sm/.lg
+     component sizes switch all three.
 
      Inline choices (checkbox, radio, switch) are typographic, not field-sized:
      they sit on a line of text, so they follow --control-font-size through
@@ -116,17 +118,35 @@
 
      --control-pad-x is the opposite kind of token: a resolved geometry length,
      not an em ratio. Every part of one control must see the same horizontal
-     distance, so it is stated in the typographic tokens rather than an em
-     whose value would change on a descendant with its own font size (the
-     input-icon glyph, made larger by --input-icon-size). It mirrors
-     --control-font-size and is rebound beside it at the .sm/.lg boundaries
-     (variants.css); declaring it only in :root would freeze the md value,
-     because a var() inside a custom property resolves where it is declared. */
+     distance, so it is stated in lengths rather than an em whose value would
+     change on a descendant with its own font size (the input-icon glyph, made
+     larger by --input-icon-size).
+
+     Like --control-size, it is a scale plus a selection: themes set the
+     -sm/-md/-lg steps, and :root, .sm/.lg and .compact/.spacious (variants.css)
+     pick one. A theme that wrote --control-pad-x itself would be overwritten
+     by every size and density boundary — bootstrap-v6's 12px became a wider
+     13px inside .compact. The selection is rebound at each boundary because a
+     var() inside a custom property resolves where it is declared.
+
+     The boundaries also write --control-step-sm/-md/-lg: which step is
+     selected, as 0/1 weights that mean the same under every theme. A theme
+     that sets its own steps rebuilds the selection from them in its own block
+     (bootstrap-v6.css), so a nested island of it reads its steps without
+     resetting the density it sits in. Never rebind on every [data-theme]: a
+     palette-only island then became a geometry boundary that an inherited
+     --control-size or --control-pad-x no longer crossed. */
   --control-size-sm: 2rem;
   --control-size-md: 2.375rem;
   --control-size-lg: 2.75rem;
   --control-size: var(--control-size-md);
-  --control-pad-x: var(--font-size-md);
+  --control-pad-x-sm: var(--font-size-xs);
+  --control-pad-x-md: var(--font-size-md);
+  --control-pad-x-lg: var(--font-size-lg);
+  --control-pad-x: var(--control-pad-x-md);
+  --control-step-sm: 0;
+  --control-step-md: 1;
+  --control-step-lg: 0;
   --control-font-size: var(--font-size-md);
   --choice-control-size: 1.125em;
   --disabled-opacity: 0.65;

package/src/css/core/variants.css

@@ -11,17 +11,21 @@
  *   components/badge.css   — .badge default soft behind explicit --ui-*
  *   components/alert.css   — .alert default soft behind explicit --ui-*
  *
- * .compact/.spacious set inherited density tokens: spacing rhythm and geometry
- * only, plus a slight typographic width bonus. Density never changes font size
- * or icon size. Controls consume --control-size; non-control components may
+ * Three axes, each predictable on its own:
+ *   .sm/.lg            size    — typography + geometry, local to a component
+ *   .compact/.spacious density — rhythm + geometry, inherited by a region
+ *   .tight/.loose      rhythm  — --gap only, inherited by a region
+ *
+ * Density never touches typography: no font size, icon size or font width.
+ * A width bonus through font-stretch only showed on typefaces with a wdth axis,
+ * so .compact meant something different per OS and font; a condensed table is
+ * a typographic decision for the application. Controls consume --control-size
+ * and --control-pad-x, so a compact control is shorter and narrower (a height
+ * change alone read as the same control squashed); non-control components may
  * consume --density-* when the context should affect their local rhythm.
- * .compact applies --font-width-dense through font-stretch (a variable wdth
- * axis when available, otherwise normal width-face matching); layout must
- * never depend on the narrowing being available. .spacious restores
- * --font-width, so a spacious island inside a compact context returns to the
- * normal width exactly as it restores its own gap, spacing, and control size.
- * Themes whose typeface has no useful width axis opt out with
- * --font-width-dense: 100%.
+ *
+ * .tight/.loose reuse the density --gap steps, so a tight row and a compact
+ * one share one rhythm.
  *
  * .sm/.lg are local size roles, not shared measurements. Shared control
  * participants below map both typography and geometry; components with
@@ -60,18 +64,35 @@
   --ui-border: var(--border);
 }
 
+/* Each boundary selects a control step twice: the values, resolved here, and
+   the 0/1 step weights a nested [data-theme] island rebuilds them from
+   (tokens.css). */
 .compact {
   --gap: var(--space-20);
   --density-space: var(--space-20);
   --control-size: var(--control-size-sm);
-  font-stretch: var(--font-width-dense);
+  --control-pad-x: var(--control-pad-x-sm);
+  --control-step-sm: 1;
+  --control-step-md: 0;
+  --control-step-lg: 0;
 }
 
 .spacious {
   --gap: var(--space-50);
   --density-space: var(--space-50);
   --control-size: var(--control-size-lg);
-  font-stretch: var(--font-width);
+  --control-pad-x: var(--control-pad-x-lg);
+  --control-step-sm: 0;
+  --control-step-md: 0;
+  --control-step-lg: 1;
+}
+
+.tight {
+  --gap: var(--space-20);
+}
+
+.loose {
+  --gap: var(--space-50);
 }
 
 /* Shared control scale. Wrappers are listed when their descendants form one
@@ -100,7 +121,10 @@
 ).sm {
   --control-size: var(--control-size-sm);
   --control-font-size: var(--font-size-sm);
-  --control-pad-x: var(--font-size-sm);
+  --control-pad-x: var(--control-pad-x-sm);
+  --control-step-sm: 1;
+  --control-step-md: 0;
+  --control-step-lg: 0;
 }
 
 :where(
@@ -124,7 +148,10 @@
 ).lg {
   --control-size: var(--control-size-lg);
   --control-font-size: var(--font-size-lg);
-  --control-pad-x: var(--font-size-lg);
+  --control-pad-x: var(--control-pad-x-lg);
+  --control-step-sm: 0;
+  --control-step-md: 0;
+  --control-step-lg: 1;
 }
 
 /* Modern color enhancement. Baseline variant values above remain usable

package/src/css/forms/choice-card.css

@@ -38,7 +38,7 @@
   --choice-card-pad: var(--density-space, var(--space-40));
   --choice-card-gap: var(--space-30);
   --choice-card-radius: var(--radius);
-  --choice-card-border: var(--border);
+  --choice-card-border: var(--border-control);
   --choice-card-bg: var(--surface);
   --choice-card-check-size: 1.25em;
 

package/src/css/forms/choice.css

@@ -144,7 +144,7 @@
 /* Control geometry. --choice-* are the per-state tokens. */
 .check,
 .radio {
-  --choice-border: var(--border);
+  --choice-border: var(--border-control);
   --choice-bg: var(--surface);
   --choice-mark: var(--primary-fg);
 

package/src/css/forms/control.css

@@ -30,7 +30,7 @@
 .input,
 .textarea,
 .select {
-  --control-border: var(--border);
+  --control-border: var(--border-control);
   --control-bg: var(--surface);
   --control-fg: var(--text);
   --control-cursor: auto;