actual-css 0.7.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)
     );
   }
 }
@@ -115,6 +159,7 @@
   background: var(--choice-bg);
   color: var(--choice-mark);
   appearance: none;
+  -webkit-appearance: none;
   cursor: pointer;
 }
 
@@ -153,9 +198,9 @@
 
 .check:is(:checked, :indeterminate),
 .radio:checked {
-  --choice-border: var(--intent, var(--primary));
-  --choice-bg: var(--intent, var(--primary));
-  --choice-mark: var(--intent-fg, var(--primary-fg));
+  --choice-border: var(--intent, var(--state-selected));
+  --choice-bg: var(--intent, var(--state-selected));
+  --choice-mark: var(--intent-fg, var(--state-selected-fg));
 }
 
 .check:checked::before {
@@ -174,6 +219,8 @@
   transform: scale(1);
 }
 
+/* Progressive: without :not() selector lists, the normal unchecked border
+   remains visible and the control stays usable. */
 .check:hover:not(:checked, :indeterminate, :disabled),
 .radio:hover:not(:checked, :indeterminate, :disabled) {
   --choice-border: var(--text-subtle);

package/src/css/forms/control.css

@@ -32,9 +32,10 @@
   --control-cursor: auto;
 
   appearance: none;
+  -webkit-appearance: none;
   inline-size: 100%;
   min-block-size: var(--control-size);
-  padding-inline: var(--space-30);
+  padding-inline: var(--control-pad-x);
   border: var(--border-width) solid var(--form-invalid-border, var(--control-border));
   border-block-end-color: var(
     --form-invalid-border,

package/src/css/forms/floating-field.css

@@ -14,8 +14,8 @@
  * placeholder=" " to expose a reliable empty state — without it the label
  * only reacts to focus.
  *
- * Density flows through --control-size: .sm/.lg shrink the control geometry
- * and the reserved headroom with it, leaving typography untouched.
+ * Density flows through --control-size: .compact/.spacious change the control
+ * geometry and the reserved headroom with it, leaving typography untouched.
  *
  * Public hooks:
  * --floating-label-top
@@ -46,7 +46,7 @@
   inset-inline-start: calc(var(--space-30) + var(--border-width));
   color: var(--text-muted);
   font-size: var(--control-font-size);
-  font-weight: var(--font-weight);
+  font-weight: var(--font-weight-normal);
   opacity: var(--floating-label-opacity);
   pointer-events: none;
   transition:

package/src/css/forms/form.css

@@ -18,6 +18,7 @@
   display: grid;
   gap: var(--space-10);
   color: var(--text);
+  font-size: var(--control-font-size);
 }
 
 .field-group {
@@ -31,7 +32,7 @@
 .field-label,
 .field-group > legend {
   color: var(--text);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
 }
 
 .field-group > legend {
@@ -42,13 +43,13 @@
 
 .field-help {
   color: var(--text-muted);
-  font-size: var(--font-size-sm);
+  font-size: 0.875em;
 }
 
 .field-error {
   display: none;
   color: var(--danger);
-  font-size: var(--font-size-sm);
+  font-size: 0.875em;
 }
 
 .required-mark {

package/src/css/forms/input-icon.css

@@ -2,18 +2,19 @@
  * Input Icon — decorative icon inside a relative wrapper, leading or trailing.
  *
  * Icon-library agnostic: detects position by DOM order. First child that is
- * not .input = leading icon; icon after .input = trailing. The icon keeps a
- * fixed size; density contexts shrink the control geometry around it, not
- * the pictogram.
+ * not .input = leading icon; icon after .input = trailing. The icon follows
+ * local typography; density contexts shrink the control geometry around it
+ * without changing the pictogram.
  *
  * Public hooks:
  * --input-icon-size
  */
 .input-icon {
-  --input-icon-size: 1.25rem;
+  --input-icon-size: 1.25em;
 
   display: block;
   position: relative;
+  font-size: var(--control-font-size);
 }
 
 /* Icon — shared by leading and trailing */
@@ -28,27 +29,32 @@
 
 /* Leading: icon is the first child */
 .input-icon > :first-child:where(:not(.input)) {
-  inset-inline-start: var(--space-30);
+  inset-inline-start: var(--control-pad-x);
 }
 
-/* Trailing: input is the first child, icon follows */
-.input-icon > .input:first-child ~ :where(:not(.input)) {
-  inset-inline-end: var(--space-30);
+/* Trailing: an icon follows the input, with or without a leading icon. */
+.input-icon > .input ~ :where(:not(.input)) {
+  inset-inline-end: var(--control-pad-x);
 }
 
 /* font-size only sizes text-metric icons (webfont <i>, <span>). An inline
    <svg> with just a viewBox ignores it, so give it explicit dimensions. */
 .input-icon > svg:where(:not(.input)) {
-  inline-size: var(--input-icon-size);
-  block-size: var(--input-icon-size);
+  /* The shared rule already maps --input-icon-size onto font-size. One em is
+     therefore the requested optical size; reusing the em-valued hook here
+     would apply its factor a second time. */
+  inline-size: 1em;
+  block-size: 1em;
 }
 
 /* Leading: input gets start padding to clear the icon */
 .input-icon > :first-child:where(:not(.input)) ~ .input {
-  padding-inline-start: calc(var(--space-30) * 2 + var(--input-icon-size));
+  padding-inline-start: calc(var(--control-pad-x) * 2 + var(--input-icon-size));
 }
 
-/* Trailing: input is first child and has a sibling → end padding */
-.input-icon > .input:first-child:where(:not(:last-child)) {
-  padding-inline-end: calc(var(--space-30) * 2 + var(--input-icon-size));
+/* Trailing: the input has a following sibling → end padding. Not tied to the
+   input being first child, so a leading icon does not disable the trailing
+   icon's reserved space. */
+.input-icon > .input:where(:not(:last-child)) {
+  padding-inline-end: calc(var(--control-pad-x) * 2 + var(--input-icon-size));
 }

package/src/css/forms/native.css

@@ -8,18 +8,23 @@
  */
 .file {
   color: var(--text-muted);
+  font-size: var(--control-font-size);
 }
 
 .file::file-selector-button {
   margin-inline-end: var(--space-30);
+  /* Consume the shared control scale like .btn, so .sm/.lg and density resize
+     the whole control, not just the filename text. */
+  min-block-size: var(--control-size);
   padding-block: var(--space-10);
+  padding-block: max(var(--space-10), calc((var(--control-size) - 1lh) / 2));
   padding-inline: var(--space-20);
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius-sm);
   background: var(--surface-subtle);
   color: var(--text);
   font: inherit;
-  font-size: var(--font-size-sm);
+  font-size: var(--control-font-size);
   font-weight: var(--font-weight-medium);
   cursor: pointer;
   transition:

package/src/css/forms/otp.css

@@ -18,7 +18,7 @@
 .otp {
   --otp-cell-size: var(--control-size);
   --otp-gap: var(--space-10);
-  --otp-font-size: 1.5rem;
+  --otp-font-size: 1.5em;
   --otp-cell-border: var(--border);
   --otp-cell-bg: var(--surface);
   --otp-caret-space: calc((var(--otp-cell-size) - 1ch) / 2 + var(--otp-gap) + 1px);
@@ -31,6 +31,7 @@
   max-inline-size: 100%;
   gap: var(--otp-gap);
   border-radius: var(--radius);
+  font-size: var(--control-font-size);
   /* Unlike hidden, clip cannot become a scroll container when the caret moves
      into the input extension. */
   overflow: clip;
@@ -72,6 +73,7 @@
   letter-spacing: calc(var(--otp-cell-size) + var(--otp-gap) - 1ch);
   text-align: start;
   appearance: none;
+  -webkit-appearance: none;
 }
 
 /* Deliberately no group ring: a box around all the cells reads as a second
@@ -106,6 +108,12 @@
   cursor: not-allowed;
 }
 
+/* biome-ignore lint/style/noDescendingSpecificity: disabled must come last of
+   the cell states, and the reorder the rule asks for would invert that. A
+   disabled input is barred from constraint validation, so `:invalid` and
+   `:focus` cannot reach it at all; the only overlap left is an authored
+   aria-invalid, where equal specificity and source order are what make
+   disabled — not danger — the colour a dead field reads as. */
 .otp > input:disabled ~ span {
   --otp-cell-bg: var(--surface-subtle);
   --otp-cell-border: var(--state-disabled);

package/src/css/forms/range.css

@@ -26,6 +26,7 @@
   --range-track-bg: var(--border);
 
   appearance: none;
+  -webkit-appearance: none;
   inline-size: 100%;
   block-size: var(--range-thumb-size);
   background: transparent;
@@ -46,6 +47,7 @@
 
 .range::-webkit-slider-thumb {
   appearance: none;
+  -webkit-appearance: none;
   inline-size: var(--range-thumb-size);
   block-size: var(--range-thumb-size);
   border-radius: var(--radius-full);

package/src/css/forms/select.css

@@ -7,20 +7,40 @@
  * the CSS chevron, so the picker (appearance: base-select) enhancement in
  * custom-select.css can be opted out independently. Add .native to a specific
  * select to opt out of the enhancement.
+ *
+ * Public hooks:
+ * --select-icon-size
  */
-.select:not([multiple], [size]:not([size="1"])) {
+/* --select-icon-size is typographic (em), so the reserved slot and the
+   pictogram scale with the control's font size, not a fixed rem sliver. */
+.select:not(:is([multiple], [size]:not([size="1"]))) {
+  --select-icon-size: 1em;
+
   appearance: none;
-  padding-inline-end: calc(var(--space-30) + var(--space-60));
+  -webkit-appearance: none;
+  padding-inline-end: calc(var(--control-pad-x) * 2 + var(--select-icon-size));
   background-image: var(--icon-chevron);
-  background-position: center right var(--space-30);
-  background-size: 1rem auto;
+  background-position: center right var(--control-pad-x);
+  background-size: var(--select-icon-size) auto;
   background-repeat: no-repeat;
 }
 
 /* The chevron sits on the inline-end side; flip it in RTL so it follows
-   the padding-inline-end space reserved for it. */
-.select:not([multiple], [size]:not([size="1"])):dir(rtl) {
-  background-position: center left var(--space-30);
+   the padding-inline-end space reserved for it. Safari before 16.4 has no
+   :dir(); the ancestor-attribute path is the Degraded-tier fallback and the
+   :dir() rules are dropped on their own there. :dir() follows inherited
+   directionality, so the explicit ltr rule neutralizes an outer RTL fallback
+   for a nested direction change. */
+[dir="rtl"] .select:not(:is([multiple], [size]:not([size="1"]))) {
+  background-position: center left var(--control-pad-x);
+}
+
+.select:not(:is([multiple], [size]:not([size="1"]))):dir(ltr) {
+  background-position: center right var(--control-pad-x);
+}
+
+.select:not(:is([multiple], [size]:not([size="1"]))):dir(rtl) {
+  background-position: center left var(--control-pad-x);
 }
 
 /* Both forced-colors and prefers-contrast hand the arrow back to the
@@ -28,9 +48,9 @@
    simpler than maintaining contrast variants, and native rendering already
    matches whatever contrast mode the user picked. */
 @media (forced-colors: active), (prefers-contrast: more) {
-  .select:not([multiple], [size]:not([size="1"])) {
+  .select:not(:is([multiple], [size]:not([size="1"]))) {
     appearance: auto;
     background-image: none;
-    padding-inline-end: var(--space-30);
+    padding-inline-end: var(--control-pad-x);
   }
 }

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;
@@ -65,6 +63,7 @@
   border-radius: var(--radius-full);
   background: var(--switch-bg);
   appearance: none;
+  -webkit-appearance: none;
   cursor: pointer;
 }
 
@@ -75,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:
@@ -85,14 +92,17 @@
     background-color var(--duration);
 }
 
-.switch:hover:not(:disabled) {
+/* Hover is not selected: an unchecked switch keeps the brand fallback on hover,
+   so a theme that separates --primary from --state-selected never tints an
+   OFF control with the selection accent before it is checked. */
+.switch:not(:checked):hover:not(:disabled) {
   --switch-border: var(--intent, var(--primary));
 }
 
 .switch:checked {
-  --switch-bg: var(--intent, var(--primary));
-  --switch-border: var(--intent, var(--primary));
-  --switch-knob: var(--intent-fg, var(--primary-fg));
+  --switch-bg: var(--intent, var(--state-selected));
+  --switch-border: var(--intent, var(--state-selected));
+  --switch-knob: var(--intent-fg, var(--state-selected-fg));
 }
 
 .switch:checked::before {
@@ -100,7 +110,17 @@
 }
 
 /* The knob travels toward inline-end; in RTL that is leftward, so the
-    translateX sign flips. translateX is physical, not logical. */
+    translateX sign flips. translateX is physical, not logical. Safari before
+    16.4 has no :dir(); the ancestor-attribute path is the Degraded-tier
+    fallback and the :dir() rules are dropped on their own there. */
+[dir="rtl"] .switch:checked::before {
+  transform: translateX(calc(var(--switch-travel) * -1));
+}
+
+.switch:checked:dir(ltr)::before {
+  transform: translateX(var(--switch-travel));
+}
+
 .switch:checked:dir(rtl)::before {
   transform: translateX(calc(var(--switch-travel) * -1));
 }

package/src/css/layout/app-layout.css

@@ -83,7 +83,7 @@
     text-align: start;
   }
 
-  /* Side navigation no longer occupies the viewport's bottom safe area. */
+  /* In the side layout the FAB owns the viewport's bottom safe-area inset. */
   .app-layout > .fab {
     margin-block-end: max(var(--fab-offset), env(safe-area-inset-bottom));
   }