actual-css 0.9.2 → 0.11.0

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

@@ -5,20 +5,29 @@
  *
  * Each .choice-card is a <label> wrapping a native radio or checkbox. When
  * :has() is supported the input is visually hidden and the card mirrors its
- * state: checked border and tint, checkmark badge (round for radio, rounded
- * square for checkbox), focus ring, disabled dimming. Without :has() the
- * native input stays visible so selection state never disappears.
+ * state: an indicator on the leading edge (a ring for radio, a box for
+ * checkbox) that fills with a check, checked border and tint, focus ring,
+ * disabled dimming. Without :has() the native input stays visible in the
+ * indicator's slot, so selection state never disappears.
  *
- * The badge overhangs the top-right corner by 0.375em; ancestors with
- * overflow: hidden will clip it. Pair with grid or flex utilities for group
- * layout.
+ * The card is a two-column grid: the indicator in the first column, level
+ * with the first row, and each child element of the label on its own row in
+ * the second. Wrap loose text in an element. A corner badge for tiles is a
+ * documented recipe on these same layers, not a variant.
+ *
+ * .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-gap
  * --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;
@@ -27,19 +36,25 @@
 
 .choice-card {
   --choice-card-pad: var(--density-space, var(--space-40));
+  --choice-card-gap: var(--space-30);
   --choice-card-radius: var(--radius);
   --choice-card-border: var(--border);
   --choice-card-bg: var(--surface);
-  --choice-card-check-size: 1.5em;
+  --choice-card-check-size: 1.25em;
 
   position: relative;
-  display: block;
+  display: grid;
+  grid-template-columns: var(--choice-card-check-size) minmax(0, 1fr);
+  /* why: a card stretched by a taller grid neighbour keeps its rows at the
+     top instead of spreading them. */
+  align-content: start;
+  column-gap: var(--choice-card-gap);
   padding: var(--choice-card-pad);
   border: var(--border-width) solid var(--form-invalid-border, var(--choice-card-border));
   border-radius: var(--choice-card-radius);
   background: var(--choice-card-bg);
   color: var(--text);
-  /* Consumed so .sm/.lg reach the card; the badge's em sizing follows. */
+  /* Consumed so .sm/.lg reach the card; the indicator's em sizing follows. */
   font-size: var(--control-font-size);
   cursor: pointer;
   transition:
@@ -48,6 +63,18 @@
     box-shadow var(--duration);
 }
 
+.choice-card > * {
+  grid-column: 2;
+}
+
+/* The input owns the indicator's cell: visible there without :has(), hidden
+   in it with :has(). */
+.choice-card > :is(input[type="radio"], input[type="checkbox"]) {
+  grid-area: 1 / 1;
+  place-self: center;
+  margin: 0;
+}
+
 /* The native input is visually hidden but stays focusable and participates in
    form submission and keyboard navigation (sr-only pattern). Guarded: without
    :has() the card cannot mirror the input's state, so the visible native
@@ -68,8 +95,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) {
@@ -93,32 +120,41 @@
   }
 }
 
-/* Checkmark badge — always rendered at scale(0) and scaled in on check, so
-   the entrance can transition (a pseudo created on :checked could not). */
+/* Indicator: ::before is the ring or box, ::after the check. Both share the
+   input's cell, centred on the first line — not the first row, which a long
+   label wraps — and stay hidden until :has() can mirror the input. The em
+   margin is the lh-less fallback at the default 1.5 line-height. */
 .choice-card::before,
 .choice-card::after {
   content: "";
-  position: absolute;
-  inset-inline-end: -0.375em;
-  inset-block-start: -0.375em;
+  grid-area: 1 / 1;
+  align-self: start;
+  margin-block-start: calc((1.5em - var(--choice-card-check-size)) / 2);
+  margin-block-start: calc((1lh - var(--choice-card-check-size)) / 2);
   inline-size: var(--choice-card-check-size);
   block-size: var(--choice-card-check-size);
   transform: scale(0);
-  transition: transform var(--duration);
+  transition:
+    transform var(--duration),
+    background-color var(--duration),
+    border-color var(--duration);
 }
 
-/* Badge disc — circle for radio, rounded square for checkbox */
+/* A border, not an inset shadow: forced colors drop shadows, and the resting
+   ring is the only sign of an unchecked option. The invalid border reaches it
+   through the same hook as the card's. */
 .choice-card::before {
-  background: var(--intent, var(--state-selected));
-  box-shadow: 0 0 0 2px var(--surface);
+  border: max(var(--border-width), 1.5px) solid var(--form-invalid-border, var(--text-muted));
   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);
 }
 
@@ -130,18 +166,86 @@
   z-index: 2;
 }
 
-.choice-card:has(:checked)::before,
+/* Guarded with the input's hiding above: a resting ring beside a visible
+   native input would draw the indicator twice. */
+@supports selector(:has(*)) {
+  .choice-card::before {
+    transform: none;
+  }
+}
+
+.choice-card:has(:checked)::before {
+  border-color: var(--intent, var(--state-selected));
+  background: var(--intent, var(--state-selected));
+}
+
 .choice-card:has(:checked)::after {
   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%;
+
+  position: absolute;
+  inset: 0;
+  /* why: an absolute box honours self-alignment — the card's start would
+     shrink this layer to 0 height and the dot with it. */
+  align-self: auto;
+  margin: 0;
+  inline-size: auto;
+  block-size: auto;
+  border: 0;
+  border-radius: inherit;
+  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 {
+  order: -1;
+  flex: none;
+  align-self: center;
+  margin-block: 0;
+  margin-inline: 0 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,
    so no forced-color-adjust is needed. The pseudo is not focusable — the
-   outline is a separator against the card, not a focus channel. */
+   outline separates the disc from whatever it overlaps (the card's border,
+   for a corner-badge recipe), not a focus channel. */
 @media (forced-colors: active) {
   .choice-card:has(:checked)::before {
+    border-color: Highlight;
     background: Highlight;
     outline: 2px solid Canvas;
   }
@@ -149,4 +253,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,
@@ -51,8 +53,8 @@
   cursor: var(--control-cursor);
   /* 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. */
+     :focus:not(:focus-visible); keyboard focus draws the inset outline below
+     (invalid fields take --form-invalid-border, the documented exception). */
   transition:
     border-color var(--duration),
     box-shadow var(--duration),
@@ -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/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/otp.css

@@ -64,7 +64,7 @@
   padding-block: 0;
   padding-inline: calc((var(--otp-cell-size) - 1ch) / 2) 0;
   border: 0;
-  outline: 2px solid transparent;
+  outline: none;
   box-shadow: none;
   background: transparent;
   color: var(--text);
@@ -89,6 +89,14 @@
    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. */
+/* The documented markup puts .input on the native input, so the field ring
+   (.input:focus-visible:not(:disabled), control.css) would outrank the reset
+   above and draw that group ring; this selector must stay one step above it.
+   No transparent outline either: forced colors would paint it as a ring. */
+.otp > input:focus-visible:not(:disabled) {
+  outline: none;
+}
+
 .otp > input:focus ~ span {
   --otp-cell-border: var(--focus);
   --otp-cell-border-width: calc(var(--border-width) * 2);

package/src/css/forms/range.css

@@ -13,6 +13,10 @@
  * --range-track-height
  * --range-thumb-bg
  * --range-track-bg
+ * --range-fill-bg
+ *
+ * Runtime-written (by actual-css/js/range, never set by hand):
+ * --range-progress
  */
 
 /* Intent boundary — inherited intents do not tint this component.
@@ -22,10 +26,17 @@
 }
 
 .range {
-  --range-thumb-size: 1.25rem;
-  --range-track-height: 0.25rem;
+  --range-thumb-size: 1.125rem;
+  --range-track-height: 0.625rem;
   --range-thumb-bg: var(--intent, var(--primary));
   --range-track-bg: var(--border);
+  --range-fill-bg: var(--intent, var(--primary));
+  /* Fill share, written by actual-css/js/range. 0% with no runtime means a
+     plain track — the control stays fully usable without JavaScript. */
+  --range-progress: 0%;
+  /* Logical fill direction: the gradient below cannot use flow-relative
+     keywords, so RTL flips the angle through this hook instead. */
+  --range-fill-from: to right;
 
   appearance: none;
   -webkit-appearance: none;
@@ -35,16 +46,29 @@
   cursor: pointer;
 }
 
+:where([dir="rtl"]) .range,
+.range:dir(rtl) {
+  --range-fill-from: to left;
+}
+
 .range::-webkit-slider-runnable-track {
   block-size: var(--range-track-height);
   border-radius: var(--radius-full);
-  background: var(--range-track-bg);
+  background: linear-gradient(
+    var(--range-fill-from),
+    var(--range-fill-bg) var(--range-progress),
+    var(--range-track-bg) var(--range-progress)
+  );
 }
 
 .range::-moz-range-track {
   block-size: var(--range-track-height);
   border-radius: var(--radius-full);
-  background: var(--range-track-bg);
+  background: linear-gradient(
+    var(--range-fill-from),
+    var(--range-fill-bg) var(--range-progress),
+    var(--range-track-bg) var(--range-progress)
+  );
 }
 
 .range::-webkit-slider-thumb {
@@ -57,6 +81,10 @@
   background: var(--range-thumb-bg);
   margin-block-start: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
   cursor: inherit;
+  /* Permanent surface separator: the fill defaults to the thumb color, so
+     without this the thumb would melt into the filled part of the track.
+     Focus-visible keeps this ring and adds the --focus ring outside it. */
+  box-shadow: 0 0 0 2px var(--surface-opaque);
   transition: box-shadow var(--duration);
 }
 
@@ -67,6 +95,7 @@
   border: 0;
   background: var(--range-thumb-bg);
   cursor: inherit;
+  box-shadow: 0 0 0 2px var(--surface-opaque);
   transition: box-shadow var(--duration);
 }
 
@@ -75,20 +104,23 @@
 }
 
 /*
- * 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
+ * surface-coloured separator keeps the ring visually distinct from the
+ * coloured thumb — unlike a full-size input where the same gap would
+ * read as an unwanted void. It doubles as the resting separator between
+ * the thumb and the same-coloured fill.
  */
 .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 2px var(--surface-opaque),
+    0 0 0 calc(2px + 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 2px var(--surface-opaque),
+    0 0 0 calc(2px + var(--focus-ring-width)) var(--focus);
 }
 
 .range:disabled {
@@ -96,22 +128,48 @@
   cursor: not-allowed;
   opacity: var(--disabled-opacity);
 }
-
 /* 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. */
+   distinguishable from the track. The fill keeps its two-tone split with
+   system colors so the value stays readable. 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.
+   The split lives in a background-image, which forced-color-adjust: auto
+   drops — so the tracks opt out locally. The colors stay system keywords,
+   keeping native contrast adaptation; only the host keeps adjusting. */
 @media (forced-colors: active) {
   .range {
     --range-track-bg: CanvasText;
     --range-thumb-bg: ButtonFace;
+    --range-fill-bg: Highlight;
   }
 
+  .range::-webkit-slider-runnable-track {
+    forced-color-adjust: none;
+    background: linear-gradient(
+      var(--range-fill-from),
+      Highlight var(--range-progress),
+      CanvasText var(--range-progress)
+    );
+  }
+
+  .range::-moz-range-track {
+    forced-color-adjust: none;
+    background: linear-gradient(
+      var(--range-fill-from),
+      Highlight var(--range-progress),
+      CanvasText var(--range-progress)
+    );
+  }
   .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 {