actual-css 0.3.1 → 0.4.1

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)
@@ -178,21 +188,11 @@
   }
 }
 
-@media (forced-colors: active) {
-  :root,
-  [data-theme="light"],
-  [data-theme="dark"] {
-    --focus-outline-color: Highlight;
-    --focus-ring-shadow: none;
-
-    --backdrop-fill: Canvas;
-  }
-}
-
 @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,10 +154,10 @@
 }
 
 @media (forced-colors: active) {
-  :root {
-    --state-selected: Highlight;
-    --state-selected-fg: HighlightText;
+  :root,
+  [data-theme] {
     --state-disabled: GrayText;
+    --disabled-opacity: 1;
   }
 }
 

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

@@ -85,12 +85,13 @@
 @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 */
   }
 

package/src/css/{optional → effects}/aura.css

@@ -32,6 +32,7 @@
   display: inline-grid;
   padding: var(--aura-width);
   border-radius: calc(var(--aura-radius) + var(--aura-width));
+  border: var(--border-width) solid transparent;
   background: var(--aura-color);
   background: conic-gradient(from var(--aura-angle), transparent 0 65%, var(--aura-color));
 }
@@ -81,13 +82,3 @@
     --aura-radius: var(--radius-full);
   }
 }
-
-@media (forced-colors: active) {
-  .aura {
-    background: CanvasText;
-  }
-
-  .aura::before {
-    display: none;
-  }
-}

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)));
   }
 }
 
@@ -131,23 +131,15 @@
   transform: scale(1);
 }
 
+/* The native input is hidden and the checked marker is custom-drawn: without
+   this repair, forced colors pushes disc and check to the same system color
+   and the state disappears. Highlight/Canvas/HighlightText are preserved as-is,
+   so no forced-color-adjust is needed. The pseudo is not focusable — the
+   outline is a separator against the card, not a focus channel. */
 @media (forced-colors: active) {
-  .choice-card {
-    --choice-card-border: ButtonText;
-    --choice-card-bg: Canvas;
-  }
-
-  .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. */
-    --choice-card-bg: Canvas;
-    forced-color-adjust: none;
-  }
-
   .choice-card:has(:checked)::before {
     background: Highlight;
-    box-shadow: 0 0 0 2px Canvas;
+    outline: 2px solid Canvas;
   }
 
   .choice-card:has(:checked)::after {

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

@@ -46,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,20 @@
   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.
 
+   The <input> must be the first direct child, with one cell <span> per
+   character after it: the state rules select the cells as following siblings
+   (input:focus ~ span, input:disabled ~ span, …), so that order is part of the
+   contract. */
 .otp > input:focus ~ span {
   --otp-cell-border: var(--focus);
+  --otp-cell-border-width: calc(var(--border-width) * 2);
 }
 
 .otp > input[aria-invalid="true"] ~ span,
@@ -93,17 +108,11 @@
 
 .otp > input:disabled ~ span {
   --otp-cell-bg: var(--surface-subtle);
-
+  --otp-cell-border: var(--state-disabled);
   opacity: var(--disabled-opacity);
 }
 
 @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;
   }

package/src/css/forms/range.css

@@ -93,11 +93,21 @@
   opacity: var(--disabled-opacity);
 }
 
-/* Forced colors: map the custom thumb/track to system colors. The focus
-   indicator stays visible through the transparent outline on :focus-visible. */
+/* Forced colors: the track must stay a visible line against the page (Canvas
+   would merge with it) and the thumb needs a real boundary to remain
+   distinguishable from the track. Disabled keeps GrayText via :disabled.
+   Focus stays on the transparent outline of :focus-visible. */
 @media (forced-colors: active) {
   .range {
-    --range-thumb-bg: ButtonText;
-    --range-track-bg: Canvas;
+    --range-track-bg: CanvasText;
+    --range-thumb-bg: ButtonFace;
+  }
+
+  .range::-webkit-slider-thumb {
+    border: var(--border-width) solid ButtonText;
+  }
+
+  .range::-moz-range-thumb {
+    border: var(--border-width) solid ButtonText;
   }
 }