actual-css 0.9.1 → 0.10.0

package/src/css/core/theme.css

@@ -72,10 +72,10 @@
 
   /* Lines and focus */
   --border: hsl(260 15% 88%);
-  --focus: var(--neutral);
-  /* Pre-color-mix fallback only — superseded below by a derivation from
-     --focus so overriding --neutral/--focus never leaves a stale ring. */
-  --focus-ring: hsl(258 7% 43% / 0.3);
+  /* A primary-hued mid-tone on purpose, one value for both schemes: focus
+     lines must hold 3:1 against --surface and --surface-solid alike (page,
+     fields, a solid band), which rules out the primary itself. */
+  --focus: hsl(268 30% 55%);
   --hover-overlay: hsl(260 20% 10% / 0.04);
 
   /* Radius scale — themes may override the whole scale (e.g. [data-theme="square"]) */
@@ -98,7 +98,6 @@
   --heading: var(--text);
   --selection-bg: var(--primary);
   --selection-fg: var(--primary-fg);
-  --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
@@ -107,18 +106,17 @@
    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,
+   they declare hooks themselves.
+
+   Why :where(:root) and why the reset comes second: both rules match when a
+   custom theme sits on <html> itself. A bare :root is (0,1,0) and would
+   outrank the zero-specificity reset, so the same theme resolved a calibrated
+   Ink & Terra ink on <html data-theme="brand"> and the raw --soft-fg-mix ink
+   on <div data-theme="brand"> — one attribute, two soft palettes. Levelling
+   both rules to zero specificity makes source order the tiebreaker, so the
+   reset must stay below. Zero specificity is also what lets a theme declare
+   its own hooks (e.g. brutalist's 45% soft-fg-mix) and win at (0,1,0). */
+:where(:root),
 [data-theme="light"],
 [data-theme="dark"] {
   --secondary-soft-fg: color-mix(in oklab, var(--text) 10%, var(--secondary) 90%);
@@ -128,6 +126,15 @@
   --neutral-soft-fg: color-mix(in oklab, var(--text) 20%, var(--neutral) 80%);
 }
 
+: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;
+}
+
 /* 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
@@ -149,20 +156,6 @@
   --tone-fg: var(--text);
 }
 
-/* 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. 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] {
-    --focus-ring: color-mix(in oklch, var(--focus) 30%, transparent);
-  }
-}
-
 /* Auto dark mode via light-dark(). Resolves based on the element's color-scheme:
     :root (light dark) follows the OS, [data-theme="light"] forces light,
     [data-theme="dark"] forces dark by overriding color-scheme.
@@ -199,22 +192,11 @@
     --text-subtle: light-dark(hsl(258 7% 57%), hsl(258 7% 54%));
 
     --border: light-dark(hsl(260 15% 88%), hsl(262 12% 24%));
-    --focus-ring: light-dark(hsl(258 7% 43% / 0.3), hsl(258 10% 72% / 0.28));
     --hover-overlay: light-dark(hsl(260 20% 10% / 0.04), hsl(0 0% 100% / 0.06));
     --shadow-color: light-dark(hsl(260 25% 10%), hsl(262 40% 2%));
   }
 }
 
-@supports (color: color-mix(in oklch, red, white)) and (color: light-dark(red, blue)) {
-  :root,
-  [data-theme] {
-    --focus-ring: light-dark(
-      color-mix(in oklch, var(--focus) 30%, transparent),
-      color-mix(in oklch, var(--focus) 28%, transparent)
-    );
-  }
-}
-
 @media (prefers-contrast: more) {
   :root,
   /* The repeated attribute intentionally outranks single-attribute preset
@@ -222,7 +204,7 @@
   [data-theme][data-theme] {
     --border-width: 2px;
     --focus-outline-offset: 3px;
-    --focus-ring-width: 4px;
+    --focus-ring-width: 3px;
     --text-muted: var(--text);
     --text-subtle: var(--text);
   }

package/src/css/core/tokens.css

@@ -19,6 +19,8 @@
   /* Typography */
   --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-width: 100%;
+  --font-width-dense: 95%;
   --line-height: 1.5;
   --line-height-tight: 1.25;
   --line-height-relaxed: 1.75;
@@ -80,7 +82,7 @@
   --focus-outline-color: currentColor;
   --focus-outline: calc(var(--border-width) * 2) solid var(--focus-outline-color);
   --focus-outline-offset: 2px;
-  --focus-ring-width: 3px;
+  --focus-ring-width: 2px;
 
   /* Status dot positioning — used by .avatar > .badge:empty. The offset is
      the circle-aware inset (1 - 1/√2) / 2 ≈ 14.65%; the ring surrounds the

package/src/css/core/variants.css

@@ -2,13 +2,9 @@
  * Cross-cutting variant token mapping.
  *
  * Variant scope: .solid/.soft/.outline/.surface set --ui-* for components that
- * opt into 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.
+ * opt into shared variants. A subtree that needs another palette or scheme is
+ * a data-theme island, never a variant: only an island recomputes every token
+ * (fields, states, intents), where a remap of a few --ui-* tokens cannot.
  * 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
@@ -16,9 +12,16 @@
  *   components/alert.css   — .alert default soft behind explicit --ui-*
  *
  * .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.
+ * only, plus a slight typographic width bonus. Density never changes font size
+ * or icon size. Controls consume --control-size; non-control components may
+ * consume --density-* when the context should affect their local rhythm.
+ * .compact applies --font-width-dense through font-stretch (a variable wdth
+ * axis when available, otherwise normal width-face matching); layout must
+ * never depend on the narrowing being available. .spacious restores
+ * --font-width, so a spacious island inside a compact context returns to the
+ * normal width exactly as it restores its own gap, spacing, and control size.
+ * Themes whose typeface has no useful width axis opt out with
+ * --font-width-dense: 100%.
  *
  * .sm/.lg are local size roles, not shared measurements. Shared control
  * participants below map both typography and geometry; components with
@@ -57,38 +60,18 @@
   --ui-border: var(--border);
 }
 
-/* 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);
-
-  background: var(--ui-bg);
-  color: var(--ui-fg);
-  border-color: var(--ui-border);
-}
-
 .compact {
   --gap: var(--space-20);
   --density-space: var(--space-20);
   --control-size: var(--control-size-sm);
+  font-stretch: var(--font-width-dense);
 }
 
 .spacious {
   --gap: var(--space-50);
   --density-space: var(--space-50);
   --control-size: var(--control-size-lg);
+  font-stretch: var(--font-width);
 }
 
 /* Shared control scale. Wrappers are listed when their descendants form one
@@ -160,10 +143,6 @@
     );
     /* @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/forms/choice-card.css

@@ -13,12 +13,18 @@
  * overflow: hidden will clip it. Pair with grid or flex utilities for group
  * layout.
  *
+ * .chip is the compact pill form (filter chips, selectable tags): control
+ * height, and a leading dot that turns into the check in a fixed slot, so
+ * checking never moves the label.
+ *
  * Public hooks:
  * --choice-card-pad
  * --choice-card-radius
  * --choice-card-border
  * --choice-card-bg
  * --choice-card-check-size
+ * --choice-chip-dot (read-only, on .chip ::before: the check-slot centre as a
+ *   circle() position, for a theme that grows the dot into a fill)
  */
 :where(.choice-card) {
   --intent: initial;
@@ -68,8 +74,8 @@
 
 /* Focus ring on the label follows the hidden input's focus. */
 .choice-card:has(:focus-visible) {
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .choice-card:has(:disabled) {
@@ -114,11 +120,13 @@
   z-index: 1;
 }
 
-.choice-card:has(input[type="radio"])::before {
+/* :where() keeps the shape at single-class weight, so .chip can reshape the
+   layer without out-arguing the input-type test. */
+.choice-card:where(:has(input[type="radio"]))::before {
   border-radius: var(--radius-full);
 }
 
-.choice-card:has(input[type="checkbox"])::before {
+.choice-card:where(:has(input[type="checkbox"]))::before {
   border-radius: var(--radius-sm);
 }
 
@@ -135,6 +143,54 @@
   transform: scale(1);
 }
 
+/* Chip — the rules above stay in force; this section only relocates the
+   indicator. Must follow them: several ties are won by source order. */
+.choice-card.chip {
+  --choice-card-pad: 0 var(--control-pad-x);
+  --choice-card-radius: var(--radius-full);
+  --choice-card-check-size: 1em;
+
+  display: inline-flex;
+  align-items: center;
+  min-block-size: var(--control-size);
+  line-height: 1.2;
+  /* The dot layer sits under the label at z-index -1. */
+  isolation: isolate;
+}
+
+/* ::before is a full-bleed layer clipped to a dot centred on the check slot,
+   so a theme can grow the same clip into a selected fill. The chip itself
+   must not clip (its focus ring is an outline), hence the inherited radius. */
+.choice-card.chip::before {
+  --choice-chip-dot: calc(var(--control-pad-x) + var(--choice-card-check-size) / 2) 50%;
+
+  inset: 0;
+  inline-size: auto;
+  block-size: auto;
+  border-radius: inherit;
+  box-shadow: none;
+  background: var(--text-subtle);
+  transform: none;
+  clip-path: circle(0.1875em at var(--choice-chip-dot));
+  z-index: -1;
+  transition: clip-path var(--duration);
+}
+
+.choice-card.chip:has(:checked)::before {
+  clip-path: circle(0 at var(--choice-chip-dot));
+}
+
+/* The check keeps the card's scale-in, in flow ahead of the label. */
+.choice-card.chip::after {
+  position: static;
+  order: -1;
+  flex: none;
+  margin-inline-end: 0.375em;
+  background: var(--intent, var(--state-selected));
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
 /* 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,
@@ -149,4 +205,18 @@
   .choice-card:has(:checked)::after {
     background: HighlightText;
   }
+
+  /* A chip has no disc behind its check: the check carries the state alone,
+     and dropping the checked layer also drops any theme fill. */
+  .choice-card.chip::before {
+    background: CanvasText;
+  }
+
+  .choice-card.chip:has(:checked)::before {
+    content: none;
+  }
+
+  .choice-card.chip:has(:checked)::after {
+    background: CanvasText;
+  }
 }

package/src/css/forms/choice.css

@@ -228,9 +228,8 @@
 
 .check:focus-visible,
 .radio:focus-visible {
-  --choice-border: var(--focus);
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .check:disabled,

package/src/css/forms/control.css

@@ -24,6 +24,8 @@
  * --control-cursor
  * --control-border-block-end-color
  * --control-border-block-end-width
+ * --control-hover-border (input and textarea)
+ * --control-hover-bg (select)
  */
 .input,
 .textarea,
@@ -68,19 +70,24 @@
 
 .input:hover:not(:disabled),
 .textarea:hover:not(:disabled) {
-  --control-border: var(--text-subtle);
+  --control-border: var(--control-hover-border, var(--text-subtle));
 }
 
 .select:hover:not(:disabled) {
-  --control-bg: var(--surface-subtle);
+  --control-bg: var(--control-hover-bg, var(--surface-subtle));
 }
 
-.input:focus-visible,
-.textarea:focus-visible,
-.select:focus-visible {
-  --control-border: var(--focus);
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+/* Field focus is an inset outline: offset = -width keeps every pixel inside
+   the control's border box (any smaller offset bleeds outward), so it covers
+   the border, never touches a .join neighbour or a scrollport edge, and needs
+   no group treatment. Width follows --focus-ring-width, including its
+   prefers-contrast step. Border = shape and validation, outline = focus. */
+.input:focus-visible:not(:disabled),
+.textarea:focus-visible:not(:disabled),
+.select:focus-visible:not(:disabled) {
+  outline: var(--focus-ring-width) solid var(--form-invalid-border, var(--focus));
+  outline-offset: calc(var(--focus-ring-width) * -1);
+  box-shadow: none;
 }
 
 .input[readonly],

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

@@ -9,7 +9,6 @@
  * Arbitrary menu and popover behavior belongs elsewhere.
  *
  * Internal:
- * --control-border
  * --control-bg
  */
 /* This enhancement is excluded from forced-colors, where the native/shared
@@ -34,11 +33,12 @@
         box-shadow: var(--shadow-popout);
       }
 
+      /* Same inset outline as a focused field (control.css). */
       &:open {
-        --control-border: var(--border);
         --control-bg: var(--surface-raised);
-        outline: none;
-        box-shadow: var(--focus-ring-shadow);
+        outline: var(--focus-ring-width) solid var(--form-invalid-border, var(--focus));
+        outline-offset: calc(var(--focus-ring-width) * -1);
+        box-shadow: none;
       }
 
       &::picker-icon {

package/src/css/forms/form.css

@@ -18,6 +18,12 @@
  */
 .field {
   display: grid;
+
+  /* why: a field stretched by a taller row sibling — the classic case is a
+     neighbour revealing its .field-error — would otherwise hand the extra
+     block size to its auto rows and inflate the control. Rows keep their
+     natural height; the slack stays at the end. */
+  align-content: start;
   gap: var(--space-10);
   color: var(--text);
   font-size: var(--control-font-size);

package/src/css/forms/native.css

@@ -44,8 +44,8 @@
 }
 
 .file:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
 }
 
 /* Native color picker — keep the browser's dialog and selected-color UI. The
@@ -81,8 +81,8 @@
 }
 
 .color:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
 }
 
 @media (forced-colors: active) {

package/src/css/forms/range.css

@@ -75,20 +75,22 @@
 }
 
 /*
- * The 1px surface-coloured separator keeps the ring visually distinct from
- * the small, coloured thumb — unlike a full-size input where the same gap
- * would read as an unwanted void.
+ * A thumb pseudo-element takes no reliable outline, so its ring is a solid
+ * --focus shadow (the transparent outline above covers forced colors). The
+ * 1px surface-coloured separator keeps the ring visually distinct from the
+ * small, coloured thumb — unlike a full-size input where the same gap would
+ * read as an unwanted void.
  */
 .range:focus-visible::-webkit-slider-thumb {
   box-shadow:
     0 0 0 1px var(--surface),
-    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus-ring);
+    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus);
 }
 
 .range:focus-visible::-moz-range-thumb {
   box-shadow:
     0 0 0 1px var(--surface),
-    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus-ring);
+    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus);
 }
 
 .range:disabled {
@@ -98,20 +100,33 @@
 }
 
 /* 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. */
+  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. Track and thumb
+  fills are written on the properties, not only the hooks: an application
+  hook override at the same specificity loads after this file and would win
+  the variable, leaving a Canvas-remapped fill. */
 @media (forced-colors: active) {
   .range {
     --range-track-bg: CanvasText;
     --range-thumb-bg: ButtonFace;
   }
 
+  .range::-webkit-slider-runnable-track {
+    background: CanvasText;
+  }
+
+  .range::-moz-range-track {
+    background: CanvasText;
+  }
+
   .range::-webkit-slider-thumb {
+    background: ButtonFace;
     border: var(--border-width) solid ButtonText;
   }
 
   .range::-moz-range-thumb {
+    background: ButtonFace;
     border: var(--border-width) solid ButtonText;
   }
 }

package/src/css/forms/switch.css

@@ -128,9 +128,8 @@
 }
 
 .switch:focus-visible {
-  --switch-border: var(--focus);
-  outline: 2px solid transparent;
-  box-shadow: var(--focus-ring-shadow);
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .switch:disabled {

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

@@ -7,7 +7,7 @@
  *
  * Docs: docs/pages/layout/app-layout.md
  *
- * Public hook:
+ * Public hooks:
  * --app-nav-side-size
  */
 .app-layout {