actual-css 0.3.0 → 0.4.0

package/src/css/core/index.css

@@ -0,0 +1,9 @@
+/* Core — the minimal Actual language. Every module depends on this order. */
+@import "./reset.css";
+@import "./tokens.css";
+@import "./theme.css";
+@import "./base.css";
+@import "./intents.css";
+@import "./variants.css";
+@import "./focus.css";
+@import "./print.css";

package/src/css/core/print.css

@@ -0,0 +1,18 @@
+@media print {
+  :root,
+  body {
+    /* Save some ink in dark mode */
+    color-scheme: light;
+    background: #fff;
+    color: #000;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    break-after: avoid;
+  }
+}

package/src/css/{theme.css → core/theme.css}

@@ -101,6 +101,16 @@
   --focus-ring-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring);
 }
 
+/* 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
+   recompute it from their own --primary (same resolution rule as above).
+   Unsupported browsers ignore it; forced-colors keeps browser control. */
+:root,
+[data-theme] {
+  accent-color: var(--primary);
+}
+
 /* Tone subsystem — fixed-backdrop foreground for components placed over media
    or other surfaces outside the theme token stack. Use data-theme islands for
    full dark/light subtree inversion. */
@@ -115,13 +125,13 @@
 /* Focus ring derivation — color-mix tier. Runs whether or not light-dark()
    is also supported, so it covers the color-mix-without-light-dark browser
    tier on its own; the light-dark block below refines it further with the
-   light/dark alpha split once both features are available. Deriving from
-   --focus (not a literal) means overriding --primary/--focus, in the
-   default theme or any custom one, keeps the ring in sync automatically. */
+   light/dark alpha split once both features are available. Declared on every
+   [data-theme] island (not just the built-in light/dark pair) so custom
+   islands recolor the ring for free; a preset that re-declares --focus-ring
+   later in source order intentionally pins its own ring instead. */
 @supports (color: color-mix(in oklch, red, white)) {
   :root,
-  [data-theme="light"],
-  [data-theme="dark"] {
+  [data-theme] {
     --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent);
   }
 }
@@ -170,7 +180,7 @@
 
 @supports (color: color-mix(in oklch, red, white)) and (color: light-dark(red, blue)) {
   :root,
-  [data-theme="light"] {
+  [data-theme] {
     --focus-ring: light-dark(
       color-mix(in oklch, var(--focus) 30%, transparent),
       color-mix(in oklch, var(--focus) 28%, transparent)
@@ -180,8 +190,7 @@
 
 @media (forced-colors: active) {
   :root,
-  [data-theme="light"],
-  [data-theme="dark"] {
+  [data-theme] {
     --focus-outline-color: Highlight;
     --focus-ring-shadow: none;
 
@@ -191,8 +200,9 @@
 
 @media (prefers-contrast: more) {
   :root,
-  [data-theme="light"],
-  [data-theme="dark"] {
+  /* The repeated attribute intentionally outranks single-attribute preset
+     palettes, including a preset stylesheet loaded after the core. */
+  [data-theme][data-theme] {
     --border-width: 2px;
     --focus-outline-offset: 3px;
     --focus-ring-width: 4px;

package/src/css/{tokens.css → core/tokens.css}

@@ -83,13 +83,21 @@
 
   /* 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. */
+     at its baseline because density does not change typography.
+
+     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. */
   --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-font-size: var(--font-size-md);
+  --choice-control-size: 1.125em;
   --disabled-opacity: 0.65;
 }
 
@@ -118,6 +126,10 @@
   --soft-bg-mix: 88%;
   --soft-border-mix: 65%;
   --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. */
+  --soft-fg-mix: 100%;
 
   /* Shared icon assets. Override these URLs when a strict CSP disallows data:. */
   --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
@@ -142,7 +154,8 @@
 }
 
 @media (forced-colors: active) {
-  :root {
+  :root,
+  [data-theme] {
     --state-selected: Highlight;
     --state-selected-fg: HighlightText;
     --state-disabled: GrayText;

package/src/css/{variants.css → core/variants.css}

@@ -2,14 +2,18 @@
  * Cross-cutting variant token mapping.
  *
  * Variant scope: .solid/.soft/.outline set --ui-* for components that opt into
- * shared variants. .inverted is a surface modifier, not a variant: it also
- * paints the element directly (background/color/border-color) so it works on
- * any block, competing with component surface treatments (.card.subtle).
+ * shared variants. .inverted is a surface modifier, not a variant: it paints
+ * the element directly (background/color/border-color) so it works on any bare
+ * block, and remaps the shared --ui-* tokens so participating components
+ * (.card, .navbar, .alert, .badge) invert through their own rules. Loaded
+ * before components, so a component with its own explicit surface (e.g.
+ * .accordion) naturally keeps that surface — .inverted never forces a
+ * non-participant.
  * Component-specific defaults (.btn solid-by-default, .badge
  * soft-by-default, .alert soft-by-default) live with their components:
  *   components/button.css — .btn default solid + .btn.ghost + .btn.link
- *   components/badge.css   — .badge default soft
- *   components/alert.css   — .alert default soft (consumes --ui-* directly)
+ *   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
@@ -37,18 +41,23 @@
 
 .outline {
   --ui-bg: transparent;
-  --ui-fg: var(--intent, var(--text));
-  --ui-border: var(--intent, var(--border));
+  --ui-fg: var(--intent, currentColor);
+  --ui-border: var(--intent, currentColor);
 }
 
-/* Inverse surface treatment. Components (e.g. .card) compose through --ui-*;
-   the direct background/color/border-color also make .inverted useful on a
-   generic element. --heading is set so global headings (var(--heading, inherit))
-   do not inherit an outside heading color onto the dark surface. */
+/* Inverse surface treatment. Paints the element directly (so it works on any
+   bare block) and remaps the shared --ui-* tokens so opt-in components
+   (.card, .navbar) invert through their own rules. Because this loads before
+   component base surfaces, components with their own explicit surface
+   (e.g. .accordion) keep it — participation is opt-in, never forced. --heading
+   is set so global headings (var(--heading, inherit)) do not inherit an outside
+   heading color onto the dark surface; surface-owning descendants derive
+   their contextual aliases from their own local surface. */
 .inverted {
   --ui-bg: var(--surface-solid);
   --ui-fg: var(--surface);
   --ui-border: transparent;
+  --ui-hover-bg: var(--surface-solid);
 
   --heading: var(--surface);
   --busy-overlay-bg: var(--surface-solid);
@@ -76,14 +85,19 @@
 @supports (color: color-mix(in oklch, red, white)) {
   .soft {
     /* @sync soft-recipe */
-    --ui-bg: color-mix(in oklch, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
+    --ui-bg: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
     --ui-border: color-mix(
-      in oklch,
+      in oklab,
       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));
     /* @sync soft-recipe */
   }
+
+  .inverted {
+    --ui-hover-bg: color-mix(in oklch, var(--surface-solid) 88%, black);
+  }
 }
 
 /* Interactive hover recipes live in the components that consume them:

package/src/css/effects/index.css

@@ -0,0 +1,2 @@
+/* Effects — purely visual enrichments. */
+@import "./aura.css";

package/src/css/forms/base.css

@@ -0,0 +1,8 @@
+/* Forms base — the ordinary native controls bundle. */
+@import "./form.css";
+@import "./control.css";
+@import "./choice.css";
+@import "./select.css";
+@import "./native.css";
+@import "./validation.css";
+@import "./form-actions.css";

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

@@ -85,7 +85,7 @@
 /* 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 oklch, var(--surface) 96%, var(--intent, var(--primary)));
+    --choice-card-bg: color-mix(in oklab, var(--surface) 96%, var(--intent, var(--primary)));
   }
 }
 
@@ -139,18 +139,19 @@
 
   .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. */
+    /* Pin the selected surface to the system canvas: only the essential
+       marker pseudos opt out of remapping, never the interactive card host. */
     --choice-card-bg: Canvas;
-    forced-color-adjust: none;
   }
 
   .choice-card:has(:checked)::before {
     background: Highlight;
     box-shadow: 0 0 0 2px Canvas;
+    forced-color-adjust: none;
   }
 
   .choice-card:has(:checked)::after {
     background: HighlightText;
+    forced-color-adjust: none;
   }
 }

package/src/css/forms/choice.css

@@ -14,6 +14,10 @@
  * --choice-border
  * --choice-bg
  * --choice-mark
+ *
+ * --choice-control-size (tokens.css) is the shared typographic size for every
+ * inline choice; switch.css derives its track from it so a checkbox and a
+ * switch on the same line stay proportionate.
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
@@ -30,8 +34,6 @@
 }
 
 .choice {
-  --choice-control-offset: 0.25em;
-
   display: inline-flex;
   align-items: flex-start;
   gap: var(--space-20);
@@ -40,17 +42,47 @@
   cursor: pointer;
 }
 
-/* Optical alignment: nudge the control down so the checkbox/radio sits
-   visually centered with the first line of label text, not flush with the
-   top of the line-box. Default 0.25em (~4px at 16px) places the control just
-   below the cap-height, matching what Bootstrap, Material, and most polished
-   form libraries ship. Multi-line labels still keep the control at the top
-   thanks to align-items: flex-start. Override per-instance via
-   --choice-control-offset for themes with a different line-height or control
-   size. */
+/* 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. */
 .choice > :is(input[type="checkbox"]:not([role="switch"]), input[type="radio"]) {
   flex: 0 0 auto;
-  margin-block-start: var(--choice-control-offset);
+  margin-block-start: var(--choice-control-offset, 0.25em);
+}
+
+.choice > .switch {
+  flex: 0 0 auto;
+  margin-block-start: var(--choice-control-offset, 0.1875em);
+}
+
+@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)
+    );
+  }
+
+  .choice > .switch {
+    margin-block-start: var(
+      --choice-control-offset,
+      calc((1lh - var(--switch-block-size)) / 2 + 0.0625em)
+    );
+  }
 }
 
 .choice > span > .field-help {
@@ -76,8 +108,8 @@
   vertical-align: middle;
   display: inline-grid;
   place-content: center;
-  inline-size: 1.125em;
-  block-size: 1.125em;
+  inline-size: var(--choice-control-size);
+  block-size: var(--choice-control-size);
   margin: 0;
   border: var(--border-width) solid var(--form-invalid-border, var(--choice-border));
   background: var(--choice-bg);
@@ -163,27 +195,7 @@
   opacity: 1;
 }
 
-@media (forced-colors: active) {
-  .check,
-  .radio {
-    --choice-border: ButtonText;
-    --choice-bg: Canvas;
-    --choice-mark: ButtonText;
-  }
-
-  .check:checked,
-  .radio:checked,
-  .check:indeterminate {
-    --choice-border: Highlight;
-    --choice-bg: Highlight;
-    --choice-mark: HighlightText;
-    forced-color-adjust: none;
-  }
-
-  .check:disabled,
-  .radio:disabled {
-    --choice-border: GrayText;
-    --choice-bg: Canvas;
-    --choice-mark: GrayText;
-  }
-}
+/* Forced colors intentionally stay under UA control: the visible check/dot
+   carries state while native remapping preserves platform contrast and focus.
+   If real HCM testing ever loses a mark, opt out on that pseudo only—never on
+   the interactive input host. */

package/src/css/forms/control.css

@@ -20,6 +20,8 @@
  * --control-bg
  * --control-fg
  * --control-cursor
+ * --control-border-block-end-color
+ * --control-border-block-end-width
  */
 .input,
 .textarea,
@@ -44,7 +46,10 @@
   color: var(--control-fg);
   font-size: var(--control-font-size);
   cursor: var(--control-cursor);
-  outline: none;
+  /* No outline: none here — the core :focus fallback must survive for browsers
+     without :focus-visible. Pointer focus is hidden by core's
+     :focus:not(:focus-visible); keyboard focus swaps in the transparent
+     outline + ring below. */
   transition:
     border-color var(--duration),
     box-shadow var(--duration),

package/src/css/forms/custom-select.css

@@ -12,6 +12,8 @@
  * --control-border
  * --control-bg
  */
+/* This enhancement is excluded from forced-colors, where the native/shared
+   outline remains the focus fallback. */
 @media (forced-colors: none) and (prefers-contrast: no-preference) and (hover: hover) and (
     pointer: fine
   ) {

package/src/css/{optional → forms}/floating-field.css

@@ -16,9 +16,13 @@
  * and the reserved headroom with it, leaving typography untouched.
  *
  * Public hooks:
+ * --floating-label-top
+ * --floating-label-opacity
  * --floating-pad-block-start
  */
 .floating-field {
+  --floating-label-top: var(--space-10);
+  --floating-label-opacity: 0.8;
   --floating-pad-block-start: calc(var(--control-size) / 2 + var(--space-20));
 
   /* Grid blockifies the control, removing the inline descender gap a textarea
@@ -37,24 +41,30 @@
 
 .floating-field > .field-label {
   position: absolute;
-  inset-block-start: 50%;
   inset-inline-start: calc(var(--space-30) + var(--border-width));
-  transform: translateY(-50%);
   color: var(--text-muted);
   font-size: var(--control-font-size);
   font-weight: var(--font-weight);
+  opacity: var(--floating-label-opacity);
   pointer-events: none;
   transition:
     inset-block-start var(--duration),
     transform var(--duration),
     font-size var(--duration),
+    opacity var(--duration),
     color var(--duration);
 }
 
-/* A textarea's resting label aligns with the first text line instead of
-   centering in the (tall) control. */
+/* Single-line controls rest in the middle until they receive a value. */
+.floating-field > :is(.input, .select) + .field-label {
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
+
+/* An empty textarea label follows the control's normal first-line position;
+   the control itself keeps the extra headroom reserved for its floated state. */
 .floating-field > .textarea + .field-label {
-  inset-block-start: var(--floating-pad-block-start);
+  inset-block-start: calc(1em + var(--border-width));
   transform: none;
 }
 
@@ -63,9 +73,10 @@
 .floating-field
   > :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown))
   + .field-label {
-  inset-block-start: var(--space-10);
+  inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);
+  opacity: 1;
 }
 
 /* Controls without a dependable :placeholder-shown empty state stay floated:
@@ -81,7 +92,14 @@
     .input[type="week"]
   )
   + .field-label {
-  inset-block-start: var(--space-10);
+  inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);
+  opacity: 1;
+}
+
+@media (forced-colors: active) {
+  .floating-field > .field-label {
+    opacity: 1;
+  }
 }

package/src/css/forms/index.css

@@ -1,16 +1,13 @@
-/* Forms — import order matters: switch.css follows choice.css so its rules
-   land after the shared choice recipe. validation.css is part of the default
-   forms bundle, but custom builds may omit it when validation styling is
-   app-owned. */
-@import "./form.css";
-@import "./control.css";
+/* Forms — the complete Forms family. base covers the ordinary native
+   controls; the leaves below add opt-in control skins. switch.css follows
+   choice.css (via base) so its rules land after the shared choice recipe.
+   validation.css stays part of base, but custom builds may omit it when
+   validation styling is app-owned. */
+@import "./base.css";
 @import "./input-icon.css";
-@import "./choice.css";
+@import "./switch.css";
+@import "./range.css";
 @import "./choice-card.css";
-@import "./select.css";
 @import "./custom-select.css";
-@import "./native.css";
-@import "./range.css";
-@import "./switch.css";
-@import "./validation.css";
-@import "./form-actions.css";
+@import "./floating-field.css";
+@import "./otp.css";

package/src/css/forms/native.css

@@ -41,11 +41,13 @@
   box-shadow: var(--focus-ring-shadow);
 }
 
-/* Native color picker — keep the browser's dialog and selected-color UI. */
+/* Native color picker — keep the browser's dialog and selected-color UI. The
+   swatch fills almost the whole control so it reads as a color, not as a tiny
+   square inside a button; the 1px padding keeps a hair of --surface around it. */
 .color {
   inline-size: var(--control-size);
   block-size: var(--control-size);
-  padding: var(--space-10);
+  padding: var(--border-width);
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius);
   background: var(--surface);
@@ -58,10 +60,12 @@
 
 .color::-webkit-color-swatch {
   border: 0;
+  border-radius: calc(var(--radius) - var(--border-width));
 }
 
 .color::-moz-color-swatch {
   border: 0;
+  border-radius: calc(var(--radius) - var(--border-width));
 }
 
 .color:disabled {
@@ -78,6 +82,15 @@
   .color {
     border-color: ButtonText;
     background: ButtonFace;
+  }
+
+  /* The swatch color is content, so preserve it without disabling the host's
+     native forced-color focus treatment. Vendor pseudos cannot share a rule. */
+  .color::-webkit-color-swatch {
+    forced-color-adjust: none;
+  }
+
+  .color::-moz-color-swatch {
     forced-color-adjust: none;
   }
 }

package/src/css/{optional → forms}/otp.css

@@ -11,7 +11,9 @@
  *
  * Internal:
  * --otp-cell-border
+ * --otp-cell-border-width
  * --otp-cell-bg
+ * --otp-caret-space
  */
 .otp {
   --otp-cell-size: var(--control-size);
@@ -19,6 +21,7 @@
   --otp-font-size: 1.5rem;
   --otp-cell-border: var(--border);
   --otp-cell-bg: var(--surface);
+  --otp-caret-space: calc((var(--otp-cell-size) - 1ch) / 2 + var(--otp-gap) + 1px);
 
   position: relative;
   display: inline-grid;
@@ -28,31 +31,35 @@
   max-inline-size: 100%;
   gap: var(--otp-gap);
   border-radius: var(--radius);
+  /* Unlike hidden, clip cannot become a scroll container when the caret moves
+     into the input extension. */
+  overflow: clip;
   direction: ltr;
 }
 
 .otp > span {
   inline-size: var(--otp-cell-size);
   block-size: var(--otp-cell-size);
-  border: var(--border-width) solid var(--otp-cell-border);
+  border: var(--otp-cell-border-width, var(--border-width)) solid var(--otp-cell-border);
   border-radius: var(--radius);
   background: var(--otp-cell-bg);
   transition:
     border-color var(--duration),
-    background-color var(--duration),
-    box-shadow var(--duration);
+    background-color var(--duration);
 }
 
 /* The native input owns focus, selection, autofill, paste, and one-time-code
-   integration. Its spacing aligns monospace glyphs with the visual cells. */
+   integration. Its clipped extension accommodates the trailing letter-space
+   and final caret so the browser never scrolls the glyphs out of alignment. */
 .otp > input {
   position: absolute;
   z-index: 1;
   inset: 0;
-  inline-size: 100%;
+  inline-size: calc(100% + var(--otp-caret-space));
   block-size: 100%;
   margin: 0;
-  padding: 0 calc((var(--otp-cell-size) - 1ch) / 2);
+  padding-block: 0;
+  padding-inline: calc((var(--otp-cell-size) - 1ch) / 2) 0;
   border: 0;
   outline: 2px solid transparent;
   box-shadow: none;
@@ -67,12 +74,15 @@
   appearance: none;
 }
 
-.otp:focus-within {
-  box-shadow: var(--focus-ring-shadow);
-}
-
+/* Deliberately no group ring: a box around all the cells reads as a second
+   component. The caret already carries focus while the code is being typed,
+   but it sits in the clipped input extension once every cell is filled, so
+   the focused edge must be unambiguous on its own — hence the doubled width,
+   not only the color swap. Width is safe to change: box-sizing is border-box
+   and the cells have a fixed inline/block size, so nothing reflows. */
 .otp > input:focus ~ span {
   --otp-cell-border: var(--focus);
+  --otp-cell-border-width: calc(var(--border-width) * 2);
 }
 
 .otp > input[aria-invalid="true"] ~ span,
@@ -98,12 +108,6 @@
 }
 
 @media (forced-colors: active) {
-  .otp:focus-within {
-    outline: var(--focus-outline);
-    outline-offset: var(--focus-outline-offset);
-    box-shadow: none;
-  }
-
   .otp > input:focus ~ span {
     --otp-cell-border: Highlight;
   }