actual-css 0.8.0 → 0.9.0

package/src/css/forms/choice.css

@@ -10,7 +10,7 @@
  * geometry and states. switch.css is imported after this file.
  *
  * Public hooks:
- * --choice-control-offset
+ * --choice-control-nudge
  * --choice-border
  * --choice-bg
  * --choice-mark
@@ -42,45 +42,89 @@
   cursor: pointer;
 }
 
-/* Optical alignment: nudge the control down so it sits visually centered with
-   the first line of label text, not flush with the top of the line-box. Every
-   inline choice runs the same formula — center the control's own block size on
-   the first line box, then drop it 0.0625em so it reads level with the
-   cap-height rather than the em-box. A checkbox and a switch therefore stay
-   level with each other under any line-height or --choice-control-size, which
-   a per-control constant cannot do (a taller switch and a shorter checkbox
-   need different offsets to land on the same optical line).
-
-   The constants are what the formula yields at the default 1.5 line-height:
-   0.25em (4px) for a checkbox, 0.1875em (3px) for the taller switch track.
-   They serve browsers without lh units. Multi-line labels still keep the
-   control at the top thanks to align-items: flex-start.
-
-   --choice-control-offset stays fallback-only rather than declared here, so an
-   override placed anywhere up the tree — :root included — reaches the control
-   instead of losing to a component-level declaration. */
+/* Optical alignment: the control reads level with the first line's cap height,
+   not with the top of its line box. Every inline choice runs the same formula
+   over its own block size, so a checkbox and a taller switch stay level with
+   each other under any line-height or --choice-control-size — something a
+   per-control constant cannot do.
+
+   Three tiers, each the best the engine can express:
+
+   - `cap` unit: exact, and the only font-independent answer. Where the cap
+     center sits inside a line box depends on the font's ascent/descent/cap
+     ratios, so no constant can serve both Segoe UI and Roboto — the same rule
+     was a pixel high on Windows and two pixels low on Android. Baseline
+     alignment puts the control's border-box bottom on the text baseline, and
+     one inset drops it by half the difference between its own height and the
+     cap height. Both classed controls synthesize that baseline from their
+     border box because their mark and knob are out of flow.
+   - `lh` only: center the control on the line box, which is within a pixel of
+     the cap center for the usual UI faces.
+   - neither: the constants that formula yields at the default 1.5
+     line-height, 0.1875em for a checkbox and 0.125em for the switch track.
+
+   --choice-control-nudge adds to whichever tier applies, rather than replacing
+   it: the derived value is exact now, so a design has a correction to make,
+   not a formula to restate — and one number cannot stand in for three
+   different references anyway. It stays fallback-only rather than declared
+   here, so an override placed anywhere up the tree — :root included — reaches
+   the control instead of losing to a component-level declaration. */
 .choice > :is(input[type="checkbox"]:not([role="switch"]), input[type="radio"]) {
   flex: 0 0 auto;
-  margin-block-start: var(--choice-control-offset, 0.25em);
+  margin-block-start: calc(0.1875em + var(--choice-control-nudge, 0px));
 }
 
 .choice > .switch {
   flex: 0 0 auto;
-  margin-block-start: var(--choice-control-offset, 0.1875em);
+  margin-block-start: calc(0.125em + var(--choice-control-nudge, 0px));
 }
 
 @supports (margin-block-start: 1lh) {
   .choice > :is(input[type="checkbox"]:not([role="switch"]), input[type="radio"]) {
-    margin-block-start: var(
-      --choice-control-offset,
-      calc((1lh - var(--choice-control-size)) / 2 + 0.0625em)
+    margin-block-start: calc(
+      (1lh - var(--choice-control-size)) /
+      2 +
+      var(--choice-control-nudge, 0px)
+    );
+  }
+
+  .choice > .switch {
+    margin-block-start: calc(
+      (1lh - var(--switch-block-size)) /
+      2 +
+      var(--choice-control-nudge, 0px)
+    );
+  }
+}
+
+@supports (margin-block-start: 1cap) {
+  .choice {
+    align-items: baseline;
+  }
+
+  /* Baseline alignment owns the block position now; the tier above would only
+     grow the row. An unclassed native input keeps the UA's own baseline, which
+     is already tuned for text — the formula below describes the framework's
+     geometry and would not fit it. */
+  .choice > :is(input[type="checkbox"], input[type="radio"]) {
+    margin-block-start: 0;
+  }
+
+  /* inset-block-start rides the `position: relative` these controls already
+     carry for their mark and knob. */
+  .choice > :is(.check, .radio) {
+    inset-block-start: calc(
+      (var(--choice-control-size) - 1cap) /
+      2 +
+      var(--choice-control-nudge, 0px)
     );
   }
 
   .choice > .switch {
-    margin-block-start: var(
-      --choice-control-offset,
-      calc((1lh - var(--switch-block-size)) / 2 + 0.0625em)
+    inset-block-start: calc(
+      (var(--switch-block-size) - 1cap) /
+      2 +
+      var(--choice-control-nudge, 0px)
     );
   }
 }

package/src/css/forms/switch.css

@@ -56,8 +56,6 @@
 
   position: relative;
   display: inline-grid;
-  align-items: center;
-  justify-content: start;
   inline-size: var(--switch-width);
   block-size: var(--switch-block-size);
   margin: 0;
@@ -76,9 +74,17 @@
    against the track is what makes the knob legible. */
 .switch::before {
   content: "";
+  /* Out of flow like the checkbox mark, so the track carries no in-flow item
+     and the switch synthesizes its baseline from its own border box. A knob
+     laid out as a grid item makes the baseline the knob's bottom edge instead,
+     which is what .choice measures its cap-height offset from. The inset is
+     the same --switch-knob-margin on both axes: it resolves against the
+     padding box, so the border is already out of the way. */
+  position: absolute;
+  inset-block-start: var(--switch-knob-margin);
+  inset-inline-start: var(--switch-knob-margin);
   inline-size: var(--switch-knob-size);
   block-size: var(--switch-knob-size);
-  margin-inline: var(--switch-knob-margin);
   border-radius: var(--radius-full);
   background: var(--switch-knob);
   transition: