actual-css 0.13.0 → 0.14.1

package/src/css/components/segmented.css

@@ -0,0 +1,186 @@
+/*
+ * Segmented control — one compact choice among a few, on a shared track.
+ *
+ * Docs: docs/pages/components/segmented.md
+ *
+ * .segmented is the track, each .segment a direct child. The look is shared;
+ * the semantics stay with the markup, and the selected state is read from it:
+ *   radios    <label class="segment"><input type="radio">   :checked
+ *   tabs      <button class="segment" role="tab">           aria-selected="true"
+ *   links     <a class="segment">                           aria-current="page"
+ * No script of its own: radios bring their arrow keys, a tablist takes
+ * data-enhance="tabs". Without :has() the radio anatomy loses its selected
+ * fill and focus ring, and the native radio stays visible to carry both.
+ *
+ * One row of equal shares (grid-auto-columns: 1fr), at least --control-size
+ * tall so it lines up with .btn and .input. Labels wrap instead of truncating;
+ * a word longer than its share breaks, so the control never overflows its
+ * container. A strip too long for one row is .tabs, which scrolls.
+ *
+ * Focus is drawn inside the segment, unlike other discrete actions
+ * (focus.css): an offset ring would cross the track's padding and cover the
+ * neighbouring segment.
+ *
+ * Public hooks:
+ * --segmented-bg
+ * --segmented-pad
+ * --segmented-radius
+ * --segmented-fg
+ * --segmented-selected-bg
+ * --segmented-selected-border
+ */
+.segmented {
+  --segmented-bg: var(--surface-subtle);
+  --segmented-pad: var(--space-10);
+  --segmented-radius: var(--radius);
+  --segmented-fg: var(--text-muted);
+  --segmented-selected-bg: var(--surface-raised);
+  /* The edge is what separates the selected segment where --surface-raised
+     is darker than --surface-subtle (the default dark palette). */
+  --segmented-selected-border: var(--border);
+
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: var(--segmented-pad);
+  /* why: margin and border also reset <fieldset>, the radio anatomy's
+     element. The border is transparent, not 0: forced colors paint it, which
+     outlines the track once its fill is gone. */
+  margin: 0;
+  padding: var(--segmented-pad);
+  border: var(--border-width) solid transparent;
+  border-radius: var(--segmented-radius);
+  background: var(--segmented-bg);
+  font-size: var(--control-font-size);
+  vertical-align: middle;
+}
+
+.segment {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375em;
+  /* The track is --control-size tall through its segments, not through its
+     own min-block-size: a <fieldset> lays its content in an anonymous box
+     sized to the content, so a minimum on the track left the segments short.
+     A minimum, not a height: a wrapped label grows the whole row. */
+  min-block-size: calc(var(--control-size) - 2 * (var(--segmented-pad) + var(--border-width)));
+  padding: calc(var(--space-10) / 2) var(--space-30);
+  border: 0;
+  border-radius: calc(var(--segmented-radius) - var(--segmented-pad));
+  background: transparent;
+  color: var(--segmented-fg);
+  font: inherit;
+  /* Constant across states: a heavier selected label would resize its share. */
+  font-weight: var(--font-weight-medium);
+  line-height: 1.2;
+  text-align: center;
+  text-decoration: none;
+  /* why: also shrinks the min-content contribution, so 1fr keeps equal
+     shares under constraint instead of widening one around a long word. */
+  overflow-wrap: anywhere;
+  cursor: pointer;
+  transition:
+    background-color var(--duration),
+    color var(--duration),
+    box-shadow var(--duration);
+}
+
+.segment > input {
+  margin: 0;
+}
+
+/* The radio is visually hidden but stays focusable, submitted and arrow-key
+   navigable (sr-only pattern). Guarded: without :has() the segment cannot
+   mirror :checked, so the visible native radio is the fallback. */
+@supports selector(:has(*)) {
+  .segment > input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+.segment:hover {
+  color: var(--text);
+}
+
+/* Separate rules from the :has() forms below: an engine without :has() would
+   discard a shared selector list, ARIA states included. */
+.segment:is([aria-selected="true"], [aria-current="page"], [aria-current="true"]) {
+  background: var(--segmented-selected-bg);
+  color: var(--text);
+  box-shadow:
+    0 0 0 var(--border-width) var(--segmented-selected-border),
+    var(--shadow);
+}
+
+.segment:has(> input:checked) {
+  background: var(--segmented-selected-bg);
+  color: var(--text);
+  box-shadow:
+    0 0 0 var(--border-width) var(--segmented-selected-border),
+    var(--shadow);
+}
+
+.segment:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+
+.segment:has(> input:focus-visible) {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+
+.segment:is(:disabled, [aria-disabled="true"]) {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+.segment:has(> input:disabled) {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* Forced colors drop the raised fill and its edge. The selected segment
+   takes the system highlight — a background, so the outline stays the focus
+   channel alone. forced-color-adjust: none is required, not cosmetic: the UA
+   otherwise paints a Canvas backplate behind the label, which hid the text on
+   the highlight. Opting out also stops the forcing of the rest, so the shadow
+   is dropped here and the focus line takes the highlight's text color. */
+@media (forced-colors: active) {
+  .segment:is([aria-selected="true"], [aria-current="page"], [aria-current="true"]) {
+    --focus: HighlightText;
+
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    box-shadow: none;
+  }
+
+  .segment:has(> input:checked) {
+    --focus: HighlightText;
+
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    box-shadow: none;
+  }
+
+  /* --disabled-opacity is 1 here (tokens.css): the dimming needs a color. */
+  .segment:is(:disabled, [aria-disabled="true"]) {
+    color: GrayText;
+  }
+
+  .segment:has(> input:disabled) {
+    color: GrayText;
+  }
+}

package/src/css/components/steps.css

@@ -137,11 +137,14 @@
 
 /* Complete owns the accented connector that reaches the current step, so the
    connector leaving current goes back to neutral. Declared after
-   .step-complete at equal specificity: current wins on every channel. */
+   .step-complete at equal specificity: current wins on every channel. The
+   current marker is a regular surface, so its number and ring are selected
+   ink on a surface, not a selected fill; they are held to different ratios
+   (4.5:1 for the number, 3:1 for the ring) by report:theme-contrast. */
 .steps > [aria-current="step"] {
   --step-marker-bg: var(--surface-opaque);
-  --step-marker-border: var(--state-selected);
-  --step-marker-fg: var(--state-selected);
+  --step-marker-border: var(--state-selected-text, var(--state-selected));
+  --step-marker-fg: var(--state-selected-text, var(--state-selected));
   --step-line: var(--border);
 
   color: var(--text);

package/src/css/components/tab.css

@@ -219,7 +219,7 @@
    stays inert. */
 .tab[aria-selected="true"],
 .tab:is([aria-current="page"], [aria-current="true"]) {
-  color: var(--intent, var(--state-selected));
+  color: var(--intent, var(--state-selected-text, var(--state-selected)));
 }
 
 /* The selected indicator lives on a positioned pseudo so that only the active

package/src/css/core/focus.css

@@ -18,6 +18,9 @@
    --surface-solid, so one token reads on the page, on a solid band and on
    any nested surface.
 
+   A .segment is an action but takes the inset ring: its track's padding is
+   narrower than an offset ring, which would cover the neighbouring segment.
+
    Documented exception: an invalid field focuses in --form-invalid-border
    (danger), so the error stays visible at the point of correction. The border
    carries the same hook; report:theme-contrast measures that line at 3:1

package/src/css/core/tokens.css

@@ -162,9 +162,20 @@
 [data-theme] {
   /* State tokens — semantic colors for selected/pressed/current and disabled.
      Components consume these instead of hard-wiring --primary/--text-subtle
-     so forced-colors can override them in one place. */
+     so forced-colors can override them in one place. --state-selected is a
+     selected fill or accent, --state-selected-fg the ink on that fill.
+     --state-selected-text is selected ink on a regular surface (current nav
+     link, selected tab, current step number). It is reset to the
+     guaranteed-invalid value on every theme boundary, so a consumer reads its
+     local --state-selected through the fallback var(--state-selected-text,
+     var(--state-selected)): a theme that resolves it to var(--link) bakes that
+     reference where it is declared, so a nested island that does not set it
+     inherits an already-resolved value the local fallback can never reach. A
+     theme sets it when one color cannot be both a fill under its -fg and text
+     on the page, typically in a dark scheme. */
   --state-selected: var(--primary);
   --state-selected-fg: var(--primary-fg);
+  --state-selected-text: initial;
   --state-disabled: var(--text-subtle);
 
   /* Status dot ring — cuts the dot out of what it overlaps. */
@@ -173,10 +184,15 @@
 
 :root {
   /* Variant tuning — themes may adjust generated soft surfaces without
-     replacing the component rules. */
+     replacing the component rules. --soft-bg-mix is the share of surface in a
+     soft fill: an opaque mix on the shared .soft, an opacity (100% minus it)
+     on the translucent badge, alert and soft-button tint. --soft-hover-alpha
+     is the extra intent share on hover. --soft-border-mix has no default: it
+     is a fallback-only hook whose absence lets each recipe keep its own rim
+     (a tinted rim on .soft, none on the tint), and a theme that sets it gives
+     both a rim of that weight. */
   --soft-bg-mix: 88%;
-  --soft-border-mix: 65%;
-  --soft-hover-alpha: 12%;
+  --soft-hover-alpha: 6%;
   /* 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.

package/src/css/core/variants.css

@@ -34,6 +34,9 @@
  *
  * Intent list source of truth: intents.css. Components consume --intent* tokens
  * instead of re-listing intent classes.
+ *
+ * Public hooks:
+ * --soft-border-mix (fallback-only: a soft rim of that weight on every recipe)
  */
 .solid {
   --ui-bg: var(--intent, var(--neutral));
@@ -97,7 +100,7 @@
 
 /* Shared control scale. Wrappers are listed when their descendants form one
    component (field, choice-card, floating-field, input-icon, join, pagination,
-   tabs, flyout). A local size declaration beats inherited density because it
+   tabs, segmented, flyout). A local size declaration beats inherited density because it
    is declared on the sized component itself. Guarded by check:sync
    (size-scale-participants): .sm and .lg must list the same components. */
 :where(
@@ -110,6 +113,7 @@
   .field,
   .choice,
   .choice-card,
+  .color-swatch,
   .input-icon,
   .floating-field,
   .otp,
@@ -117,6 +121,7 @@
   .pagination,
   .tabs,
   .tab,
+  .segmented,
   .flyout
 ).sm {
   --control-size: var(--control-size-sm);
@@ -137,6 +142,7 @@
   .field,
   .choice,
   .choice-card,
+  .color-swatch,
   .input-icon,
   .floating-field,
   .otp,
@@ -144,6 +150,7 @@
   .pagination,
   .tabs,
   .tab,
+  .segmented,
   .flyout
 ).lg {
   --control-size: var(--control-size-lg);
@@ -155,21 +162,25 @@
 }
 
 /* Modern color enhancement. Baseline variant values above remain usable
-   everywhere. Interactive states live in the components that consume them. */
+   everywhere. Interactive states live in the components that consume them.
+   The shared .soft is opaque: it paints zones (.card, .navbar, .app-nav,
+   .chat-bubble) an author may lay over an image, where a translucent fill
+   would hand the text's contrast to whatever is behind it. The badge, alert
+   and soft button own a translucent tint instead (soft-tint). */
 @supports (color: color-mix(in oklch, red, white)) {
   .soft {
-    /* @sync soft-recipe */
     --ui-bg: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
     --ui-border: color-mix(
       in oklab,
-      var(--surface) var(--soft-border-mix),
+      var(--surface) var(--soft-border-mix, 65%),
       var(--intent, var(--neutral))
     );
+    /* @sync soft-ink */
     --ui-fg: var(
       --intent-soft-fg,
       color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
     );
-    /* @sync soft-recipe */
+    /* @sync soft-ink */
   }
 }
 

package/src/css/forms/color-swatch.css

@@ -0,0 +1,163 @@
+/*
+ * Color swatch — a color chosen from a palette the application defines.
+ *
+ * Docs: docs/pages/forms/color-swatches.md
+ *
+ * A <label class="color-swatch"> wraps a native radio (one color) or checkbox
+ * (several) and paints --color-swatch-value. The same class on a <button> is
+ * the trigger of a palette flyout. The application owns the colors; Actual
+ * owns the shape, the selection mark and the focus ring.
+ *
+ * Two sizes: the visible swatch (::before) is the height of a .switch track, so
+ * a swatch and a switch in neighbouring rows match; the element is the hit
+ * area around it. The hit area reaches half the inherited --gap past the
+ * swatch, up to --control-size, and overflows its layout box: neighbours in a
+ * .cluster or .grid meet in the middle of the gap instead of overlapping, and
+ * rows sit one gap apart like columns. Edge, selection ring and focus ring all
+ * belong to the visible swatch.
+ *
+ * The color is arbitrary, so nothing drawn on it may assume a contrast: the
+ * selected mark is a double ring (--text outside, --surface-opaque inside) that
+ * reads on any fill, and a hairline edge keeps a near-white color apart from
+ * the page. ::before opts out of forced colors to keep the color, so it takes
+ * system colors itself there.
+ *
+ * Without :has() the native radio stays visible in the swatch and carries the
+ * state; the ring needs :has() to mirror it.
+ *
+ * Public hooks:
+ * --color-swatch-value (fallback-only: the color, set per swatch)
+ * --color-swatch-size
+ * --color-swatch-radius
+ */
+.color-swatch {
+  /* The .switch track height (switch.css); a browser test holds them equal. */
+  --color-swatch-size: calc(var(--choice-control-size) + 0.125em);
+  --color-swatch-radius: var(--radius-full);
+  /* Internal: what the hit area adds to the swatch, half on each side. One gap
+     at most, so two neighbours never claim the same point — a wider reach let
+     the next swatch take a click on this one's center. */
+  --color-swatch-reach: clamp(0px, var(--control-size) - var(--color-swatch-size), var(--gap));
+
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  inline-size: calc(var(--color-swatch-size) + var(--color-swatch-reach));
+  block-size: calc(var(--color-swatch-size) + var(--color-swatch-reach));
+  /* Lay out at the visible size: gaps are measured from the swatch, not from
+     its invisible reach. */
+  margin: calc(var(--color-swatch-reach) / -2);
+  padding: 0;
+  /* No in-flow text, so the baseline would be the box's bottom edge and an
+     inline swatch would ride above the line (a flyout trigger beside its
+     label). A palette in .cluster or .grid ignores it. */
+  vertical-align: middle;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  /* Consumed so .sm/.lg reach the em-sized swatch, as on .choice-card. */
+  font: inherit;
+  font-size: var(--control-font-size);
+  cursor: pointer;
+}
+
+.color-swatch::before {
+  content: "";
+  grid-area: 1 / 1;
+  inline-size: var(--color-swatch-size);
+  block-size: var(--color-swatch-size);
+  box-sizing: border-box;
+  border: var(--border-width) solid var(--border-control);
+  border-radius: var(--color-swatch-radius);
+  background: var(--color-swatch-value, transparent) padding-box;
+  /* The color is the content, as on .color (native.css). */
+  forced-color-adjust: none;
+  transition:
+    border-color var(--duration),
+    box-shadow var(--duration);
+}
+
+/* Shares the swatch's cell and paints after ::before, so a native radio left
+   visible sits on the color. */
+.color-swatch > input {
+  grid-area: 1 / 1;
+  position: relative;
+  margin: 0;
+}
+
+/* Visually hidden but focusable, submitted and arrow-key navigable (sr-only
+   pattern). Guarded: without :has() the swatch cannot mirror :checked, so the
+   visible native radio is the fallback. */
+@supports selector(:has(*)) {
+  .color-swatch > input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+.color-swatch:hover::before {
+  border-color: var(--text-subtle);
+}
+
+.color-swatch:has(> input:checked)::before {
+  box-shadow:
+    inset 0 0 0 2px var(--text),
+    inset 0 0 0 4px var(--surface-opaque);
+}
+
+/* The ring goes around the visible swatch, not the larger hit area. */
+.color-swatch:focus-visible {
+  outline: none;
+}
+
+.color-swatch:focus-visible::before {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.color-swatch:has(> input:focus-visible)::before {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.color-swatch:disabled {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+.color-swatch:has(> input:disabled) {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* A disabled swatch keeps its color: --disabled-opacity is 1 here
+   (tokens.css), and the edge carries the state. */
+@media (forced-colors: active) {
+  .color-swatch::before {
+    --focus: CanvasText;
+
+    border-color: CanvasText;
+  }
+
+  .color-swatch:has(> input:checked)::before {
+    box-shadow:
+      inset 0 0 0 2px CanvasText,
+      inset 0 0 0 4px Canvas;
+  }
+
+  .color-swatch:disabled::before {
+    border-color: GrayText;
+  }
+
+  .color-swatch:has(> input:disabled)::before {
+    border-color: GrayText;
+  }
+}

package/src/css/forms/form-actions.css

@@ -57,3 +57,12 @@
     background: color-mix(in oklch, var(--surface) 88%, transparent);
   }
 }
+
+/* Same reduce override as .topbar (src/css/layout/topbar.css). */
+@media (prefers-reduced-transparency: reduce) {
+  .form-actions.sticky {
+    background: var(--surface);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}

package/src/css/forms/index.css

@@ -8,6 +8,7 @@
 @import "./switch.css";
 @import "./range.css";
 @import "./choice-card.css";
+@import "./color-swatch.css";
 @import "./custom-select.css";
 @import "./floating-field.css";
 @import "./otp.css";

package/src/css/forms/native.css

@@ -7,6 +7,9 @@
  *
  * Range has its own custom-styled file (range.css) so the focus ring can
  * target the thumb pseudo-element rather than the rectangular CSS box.
+ *
+ * Public hooks:
+ * --color-size
  */
 .file {
   color: var(--text-muted);
@@ -52,16 +55,24 @@
   outline-offset: var(--focus-outline-offset);
 }
 
-/* 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. */
+/* Native color picker — keep the browser's dialog and selected-color UI. Same
+   geometry as .color-swatch: a --control-size hit area around a round swatch
+   the height of a .switch track, so a picker, a palette and a switch compose.
+   The input is the hit area; its padding leaves the swatch, which carries the
+   edge and the focus ring. Vendor pseudos cannot share a rule. */
 .color {
-  inline-size: var(--control-size);
-  block-size: var(--control-size);
-  padding: var(--border-width);
-  border: var(--border-width) solid var(--border-control);
-  border-radius: var(--radius);
-  background: var(--surface);
+  --color-size: calc(var(--choice-control-size) + 0.125em);
+
+  inline-size: max(var(--control-size), var(--color-size));
+  block-size: max(var(--control-size), var(--color-size));
+  padding: calc((max(var(--control-size), var(--color-size)) - var(--color-size)) / 2);
+  /* Lay out at the visible width, as .color-swatch does: the hit area
+     overflows on both sides so a label gap is measured from the swatch. */
+  margin: 0 calc((var(--color-size) - max(var(--control-size), var(--color-size))) / 2);
+  border: 0;
+  background: transparent;
+  /* Consumed so .sm/.lg reach the em-sized swatch. */
+  font-size: var(--control-font-size);
   cursor: pointer;
 }
 
@@ -70,13 +81,21 @@
 }
 
 .color::-webkit-color-swatch {
-  border: 0;
-  border-radius: calc(var(--radius) - var(--border-width));
+  border: var(--border-width) solid var(--border-control);
+  border-radius: var(--radius-full);
 }
 
 .color::-moz-color-swatch {
-  border: 0;
-  border-radius: calc(var(--radius) - var(--border-width));
+  border: var(--border-width) solid var(--border-control);
+  border-radius: var(--radius-full);
+}
+
+.color:hover::-webkit-color-swatch {
+  border-color: var(--text-subtle);
+}
+
+.color:hover::-moz-color-swatch {
+  border-color: var(--text-subtle);
 }
 
 .color:disabled {
@@ -84,24 +103,35 @@
   opacity: var(--disabled-opacity);
 }
 
+/* The ring goes around the visible swatch, not the larger hit area. */
 .color:focus-visible {
+  outline: none;
+}
+
+.color:focus-visible::-webkit-color-swatch {
   outline: var(--focus-ring-width) solid var(--focus);
   outline-offset: var(--focus-outline-offset);
 }
 
-@media (forced-colors: active) {
-  .color {
-    border-color: ButtonText;
-    background: ButtonFace;
-  }
+.color:focus-visible::-moz-color-swatch {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
+}
 
-  /* The swatch color is content, so preserve it without disabling the host's
-     native forced-color focus treatment. Vendor pseudos cannot share a rule. */
+@media (forced-colors: active) {
+  /* The swatch color is content, so the swatch opts out of forcing and takes
+     system colors for its edge and ring itself. */
   .color::-webkit-color-swatch {
+    --focus: CanvasText;
+
     forced-color-adjust: none;
+    border-color: CanvasText;
   }
 
   .color::-moz-color-swatch {
+    --focus: CanvasText;
+
     forced-color-adjust: none;
+    border-color: CanvasText;
   }
 }

package/src/css/forms/switch.css

@@ -14,6 +14,7 @@
  * --switch-block-size
  * --switch-knob-margin
  * --switch-knob-size
+ * --switch-knob-inline-size
  * --switch-travel
  *
  * The track is sized from --choice-control-size (tokens.css), not
@@ -47,9 +48,11 @@
     2 *
     var(--switch-knob-margin)
   );
+  /* A wider knob is a capsule; the travel follows its width. */
+  --switch-knob-inline-size: var(--switch-knob-size);
   --switch-travel: calc(
     var(--switch-width) -
-    var(--switch-knob-size) -
+    var(--switch-knob-inline-size) -
     2 *
     var(--border-width) -
     2 *
@@ -85,7 +88,7 @@
   position: absolute;
   inset-block-start: var(--switch-knob-margin);
   inset-inline-start: var(--switch-knob-margin);
-  inline-size: var(--switch-knob-size);
+  inline-size: var(--switch-knob-inline-size);
   block-size: var(--switch-knob-size);
   border-radius: var(--radius-full);
   background: var(--switch-knob);