actual-css 0.6.0 → 0.8.0

package/src/css/core/base.css

@@ -6,6 +6,7 @@
  *
  * Public hooks:
  * --link
+ * --hr-space
  */
 
 body {
@@ -47,10 +48,23 @@ hgroup > * {
   margin-block: 0;
 }
 
+/* Section break.
+
+   margin-inline: 0 overrides the UA's `margin: 0.5em auto`. In block flow the
+   auto margins resolve to zero and nothing changes, but as a flex or grid item
+   an inline auto margin replaces the stretch — an <hr> in a .stack computed to
+   width 0 and vanished. .stack deliberately leaves the inline axis free, so
+   the reset belongs here.
+
+   --hr-space tunes the block rhythm on the instance: a rule closing a page
+   section and a rule separating two rows in a panel are the same element at
+   very different scales. It applies to an hr in document flow; inside .stack
+   or .prose the parent owns the spacing between siblings and wins. */
 hr {
   border: 0;
   border-block-start: var(--border-width) solid var(--border);
-  margin-block: var(--space-60);
+  margin-block: var(--hr-space, var(--space-60));
+  margin-inline: 0;
 }
 
 code,
@@ -60,6 +74,14 @@ pre {
   font-family: var(--font-mono);
 }
 
+/* Overflow containment only. One unbreakable line — a URL, a minified token, a
+   wide ASCII table — otherwise widens the whole page, and an author cannot see
+   it coming from the markup. Background, padding and radius stay out: those
+   belong to .prose or to an application code-block component. */
+pre {
+  overflow-x: auto;
+}
+
 small {
   font-size: 0.875em;
 }

package/src/css/core/intents.css

@@ -1,35 +1,46 @@
 /*
  * Intent classes do not style elements directly.
- * They only expose --intent and --intent-fg.
- * Components and variants decide how to consume them. Each component that
- * consumes --intent or --ui-* opens a local intent boundary in a :where()
- * block that resets exactly the tokens it consumes to initial. Parent intents
- * do not leak into nested components. Local intent classes (.primary, .danger,
- * etc.) still apply because they have higher specificity than :where().
+ * They only expose --intent, --intent-fg, and the optional per-intent soft
+ * foreground --intent-soft-fg, relayed from the per-role --*-soft-fg hooks.
+ * The default theme declares those hooks for its soft ink (see theme.css);
+ * a theme without them lets the relay resolve to an invalid value, so the soft
+ * recipe falls back to its --soft-fg-mix derivation and a theme opts in one
+ * role at a time (docs/pages/foundations/tokens.md). Components and variants
+ * decide how to consume them. Each component that consumes --intent,
+ * --intent-soft-fg or --ui-* opens a local intent boundary in a :where() block
+ * that resets exactly the tokens it consumes to initial. Parent intents do not
+ * leak into nested components. Local intent classes (.primary, .danger, etc.)
+ * still apply because they have higher specificity than :where().
  */
 .primary {
   --intent: var(--primary);
   --intent-fg: var(--primary-fg);
+  --intent-soft-fg: var(--primary-soft-fg);
 }
 .secondary {
   --intent: var(--secondary);
   --intent-fg: var(--secondary-fg);
+  --intent-soft-fg: var(--secondary-soft-fg);
 }
 .success {
   --intent: var(--success);
   --intent-fg: var(--success-fg);
+  --intent-soft-fg: var(--success-soft-fg);
 }
 .warning {
   --intent: var(--warning);
   --intent-fg: var(--warning-fg);
+  --intent-soft-fg: var(--warning-soft-fg);
 }
 .danger {
   --intent: var(--danger);
   --intent-fg: var(--danger-fg);
+  --intent-soft-fg: var(--danger-soft-fg);
 }
 .neutral {
   --intent: var(--neutral);
   --intent-fg: var(--neutral-fg);
+  --intent-soft-fg: var(--neutral-soft-fg);
 }
 
 /* Paint an inherited or local intent on a simple foreground element without

package/src/css/core/theme.css

@@ -101,6 +101,33 @@
   --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
 }
 
+/* Soft foreground hooks — the soft ink is the intent rebated toward the local
+   text so it keeps 4.5:1 against the soft hover fill (the resting fill carries
+   the extra margin; variants.css soft recipe). Deliberately scoped to the
+   default theme: a custom property bakes its var() references where it is
+   declared, so these resolve against root/light/dark tokens on every boundary.
+   Presets and custom islands keep their --soft-fg-mix / raw-intent ink unless
+   they declare hooks themselves — :where() keeps this reset from outranking a
+   theme's own declaration (e.g. brutalist's 45% soft-fg-mix). */
+:where([data-theme]:not([data-theme="light"]):not([data-theme="dark"])) {
+  --primary-soft-fg: initial;
+  --secondary-soft-fg: initial;
+  --success-soft-fg: initial;
+  --warning-soft-fg: initial;
+  --danger-soft-fg: initial;
+  --neutral-soft-fg: initial;
+}
+
+:root,
+[data-theme="light"],
+[data-theme="dark"] {
+  --secondary-soft-fg: color-mix(in oklab, var(--text) 10%, var(--secondary) 90%);
+  --success-soft-fg: color-mix(in oklab, var(--text) 15%, var(--success) 85%);
+  --warning-soft-fg: color-mix(in oklab, var(--text) 25%, var(--warning) 75%);
+  --danger-soft-fg: color-mix(in oklab, var(--text) 15%, var(--danger) 85%);
+  --neutral-soft-fg: color-mix(in oklab, var(--text) 20%, var(--neutral) 80%);
+}
+
 /* Native platform controls (checkbox, radio, range, progress) that are not
    restyled by a component class still follow the theme accent. Declared on
    every island: accent-color inherits as a computed value, so islands must

package/src/css/core/tokens.css

@@ -22,9 +22,9 @@
   --line-height: 1.5;
   --line-height-tight: 1.25;
   --line-height-relaxed: 1.75;
-  --font-weight: 400;
+  --font-weight-normal: 400;
   --font-weight-medium: 500;
-  --font-weight-strong: 650;
+  --font-weight-semibold: 600;
   --font-weight-bold: 700;
 
   /* Typography scale */
@@ -39,7 +39,6 @@
      applications, and no future framework step can collide with them. */
   --gap: 0.75rem;
   --density-space: var(--space-40);
-  --density-compact-size: 1.5rem;
   --space-10: 0.25rem;
   --space-20: 0.5rem;
   --space-30: 0.75rem;
@@ -65,7 +64,10 @@
      beyond this vocabulary. Toggles that share one transition list at
      --duration-fast (flyout, tooltip) and pure-opacity backdrops stay on
      `ease`: at 100ms the curve has almost no resolving time, and a scrim is
-     not traveling anywhere. */
+     not traveling anywhere. Animation policy: reset.css is the global safety
+     net; every meaningful @keyframes is explicitly gated behind
+     prefers-reduced-motion: no-preference; ordinary transitions rely on the
+     reset alone. */
   --duration: 150ms;
   --duration-fast: 100ms;
   --duration-slow: 200ms;
@@ -96,20 +98,29 @@
   --bar-height: 0.65rem;
 
   /* Controls — inputs and buttons share --control-size so heights always match.
-     .sm/.lg (variants.css) switch --control-size; --control-font-size stays
-     at its baseline because density does not change typography.
+     .compact/.spacious (variants.css) switch geometry 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
      --choice-control-size instead of --control-size. Being an em value in
      :root is deliberate — an unregistered custom property resolves its units
      at the element that consumes it, so one declaration tracks whatever font
-     size the choice actually renders at. */
+     size the choice actually renders at.
+
+     --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. */
   --control-size-sm: 2rem;
   --control-size-md: 2.375rem;
   --control-size-lg: 2.75rem;
   --control-size: var(--control-size-md);
-  --control-pad-x: 1em;
+  --control-pad-x: var(--font-size-md);
   --control-font-size: var(--font-size-md);
   --choice-control-size: 1.125em;
   --disabled-opacity: 0.65;
@@ -142,7 +153,10 @@
   --soft-hover-alpha: 12%;
   /* Soft foreground: the share of raw intent in soft text. 100% keeps the
      pure intent color; lower values rebate it toward --text, which vivid or
-     light intent palettes need to stay legible on their own soft surface. */
+     light intent palettes need to stay legible on their own soft surface.
+     The default palette ships per-role --*-soft-fg hooks calibrated against
+     the hovered soft fill instead (theme.css); this mix is the fallback a
+     theme without hooks falls back to. */
   --soft-fg-mix: 100%;
 
   /* Shared icon assets. Override these URLs when a strict CSP disallows data:. */
@@ -158,13 +172,14 @@
   --viewport-block: 100vh;
   --viewport-inline: 100vw;
 
-  /* Z-index scale — used ONLY by non-dialog overlays (see the layering
-     note below for the full model). Actual CSS reserves multiples of 10 for
-     framework layers; applications may use intermediate values for local
-     layering. */
+  /* Z-index scale — orders document-layer components only. Native top-layer
+     elements, dialogs and popovers alike, do not participate in this ordering:
+     they always paint above the document, and their order among themselves is
+     their top-layer promotion order. No z-index value here can reach them.
+     Actual CSS reserves multiples of 10 for framework layers; applications may
+     use intermediate values for local layering. */
   --z-sticky: 10;
   --z-menu: 20;
-  --z-tooltip: 50;
   --z-status: 60;
 }
 
@@ -199,7 +214,12 @@
     --shadow-popout: 0 0.25rem 0.75rem color-mix(in oklch, var(--shadow-color) 15%, transparent);
   }
 
-  :root {
+  /* Theme-derived like the shadows above, so it is declared on the same
+     boundaries: an alias resolved only on :root is inherited already composed,
+     and a [data-theme] island overriding --backdrop-color or
+     --backdrop-opacity would not change the scrim of a dialog inside it. */
+  :root,
+  [data-theme] {
     --backdrop-fill: color-mix(
       in oklch,
       var(--backdrop-color) calc(var(--backdrop-opacity) * 100%),

package/src/css/core/variants.css

@@ -15,16 +15,15 @@
  *   components/badge.css   — .badge default soft behind explicit --ui-*
  *   components/alert.css   — .alert default soft behind explicit --ui-*
  *
- * .sm/.lg set shared density tokens: spacing rhythm and geometry only.
- * Density never changes typography — controls keep their font-size and
- * content components keep theirs. Controls consume --control-size; non-control
- * components may consume --density-* when the density context should affect
- * their local rhythm. Compact components may consume --density-compact-size.
- * Components with bespoke sizing (spinner, avatar) define local .sm/.lg;
- * applying .sm/.lg to card, dialog, accordion, navbar, table, progress, meter
- * is a no-op. Progress and meter are deliberate: a bar keeps its inline size
- * and only changes thickness, which --bar-height expresses better than a
- * three-step scale.
+ * .compact/.spacious set inherited density tokens: spacing rhythm and geometry
+ * only. Density never changes typography or icon size. Controls consume
+ * --control-size; non-control components may consume --density-* when the
+ * context should affect their local rhythm.
+ *
+ * .sm/.lg are local size roles, not shared measurements. Shared control
+ * participants below map both typography and geometry; components with
+ * bespoke geometry (badge, spinner, avatar, rating, key, prose) own those
+ * mappings locally. Components without an explicit mapping do not participate.
  *
  * Intent list source of truth: intents.css. Components consume --intent* tokens
  * instead of re-listing intent classes.
@@ -80,17 +79,64 @@
   border-color: var(--ui-border);
 }
 
-.sm {
+.compact {
   --gap: var(--space-20);
   --density-space: var(--space-20);
   --control-size: var(--control-size-sm);
-  --density-compact-size: 1.25rem;
 }
-.lg {
+
+.spacious {
   --gap: var(--space-50);
   --density-space: var(--space-50);
   --control-size: var(--control-size-lg);
-  --density-compact-size: 1.875rem;
+}
+
+/* Shared control scale. Wrappers are listed when their descendants form one
+   component (field, input-icon, join, pagination, tabs, flyout). A local size
+   declaration beats inherited density because it is declared on the sized
+   component itself. */
+:where(
+  .btn,
+  .input,
+  .textarea,
+  .select,
+  .color,
+  .file,
+  .field,
+  .choice,
+  .input-icon,
+  .otp,
+  .join,
+  .pagination,
+  .tabs,
+  .tab,
+  .flyout
+).sm {
+  --control-size: var(--control-size-sm);
+  --control-font-size: var(--font-size-sm);
+  --control-pad-x: var(--font-size-sm);
+}
+
+:where(
+  .btn,
+  .input,
+  .textarea,
+  .select,
+  .color,
+  .file,
+  .field,
+  .choice,
+  .input-icon,
+  .otp,
+  .join,
+  .pagination,
+  .tabs,
+  .tab,
+  .flyout
+).lg {
+  --control-size: var(--control-size-lg);
+  --control-font-size: var(--font-size-lg);
+  --control-pad-x: var(--font-size-lg);
 }
 
 /* Modern color enhancement. Baseline variant values above remain usable
@@ -104,7 +150,10 @@
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
     );
-    --ui-fg: color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix));
+    --ui-fg: var(
+      --intent-soft-fg,
+      color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
+    );
     /* @sync soft-recipe */
   }
 

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

@@ -79,13 +79,13 @@
 
 /* Checked border — shared by radio and checkbox */
 .choice-card:has(:checked) {
-  --choice-card-border: var(--intent, var(--primary));
+  --choice-card-border: var(--intent, var(--state-selected));
 }
 
 /* Subtle background tint on checked — modern browsers only */
 @supports (color: color-mix(in oklch, red, white)) {
   .choice-card:has(:checked) {
-    --choice-card-bg: color-mix(in oklab, var(--surface) 96%, var(--intent, var(--primary)));
+    --choice-card-bg: color-mix(in oklab, var(--surface) 96%, var(--intent, var(--state-selected)));
   }
 }
 
@@ -105,7 +105,7 @@
 
 /* Badge disc — circle for radio, rounded square for checkbox */
 .choice-card::before {
-  background: var(--intent, var(--primary));
+  background: var(--intent, var(--state-selected));
   box-shadow: 0 0 0 2px var(--surface);
   z-index: 1;
 }
@@ -120,7 +120,7 @@
 
 /* Check mark */
 .choice-card::after {
-  background: var(--intent-fg, var(--primary-fg));
+  background: var(--intent-fg, var(--state-selected-fg));
   -webkit-mask: var(--icon-check) center / 60% no-repeat;
   mask: var(--icon-check) center / 60% no-repeat;
   z-index: 2;

package/src/css/forms/choice.css

@@ -115,6 +115,7 @@
   background: var(--choice-bg);
   color: var(--choice-mark);
   appearance: none;
+  -webkit-appearance: none;
   cursor: pointer;
 }
 
@@ -153,9 +154,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 +175,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);