actual-css 0.12.0 → 0.14.0

package/src/css/components/tab.css

@@ -12,8 +12,18 @@
  * author class can then adjust a vertical strip without restating the
  * attribute to reach its specificity.
  *
+ * A horizontal strip is one axis of navigation, so it never wraps: a second
+ * line no longer matches the Left/Right model and reads as a nested level.
+ * When the tabs do not fit, the strip scrolls without a scrollbar; focus
+ * scrolls the active tab into view.
+ *
  * Public hooks:
+ * --tab-flex
  * --tab-gap
+ *
+ * Internal:
+ * --tab-edge
+ * --tab-fade-dir (read inside @keyframes, so it resolves per element)
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
@@ -24,27 +34,129 @@
 .tabs {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: var(--space-10);
   margin: 0;
   padding: 0;
+  /* Block overflow is hidden, not auto: overflow-x: auto alone computes the
+     block axis to auto, so a sub-pixel line box would add a vertical
+     scrollbar inside the strip. Nothing paints outside it: the focus outline
+     is inset and the indicator sits inside the tab. */
+  overflow: auto hidden;
+  overscroll-behavior-inline: contain;
+  /* why: a visible bar sits on the indicator and the hairline and reads as a
+     second underline. The strip has its own scroll controls: selecting the
+     clipped tab, or focusing it, brings it into view with the next one
+     hinted by scroll-padding; arrow keys and swipes do the same. */
+  scrollbar-width: none;
+  /* Focus scrolls a tab in with room to spare, hinting at the next one; the
+     edge fade below spans the same inset, so a revealed tab stays clear of it. */
+  --tab-edge: var(--space-60);
+
+  scroll-padding-inline: var(--tab-edge);
   border-block-end: var(--border-width) solid var(--border);
   list-style: none;
 }
 
+/* The landmark around link tabs is not a scroll container, so as a flex or
+   grid item it would keep the strip's full width and push the page into
+   scrolling. Letting it shrink hands the overflow back to the strip.
+   Without :has() the landmark keeps its width; min-inline-size: 0 on the
+   wrapper is the fallback. */
+:where(nav:has(> .tabs)) {
+  min-inline-size: 0;
+}
+
+/* Items keep their size and the strip scrolls instead. Covers both
+   anatomies: .tab directly in a tablist, or <li> in a navigation list.
+   --tab-flex: 1 1 0 shares the width equally; an item still never shrinks
+   below its label (flex items keep min-content), so a strip that cannot fit
+   scrolls as before. */
+.tabs > * {
+  flex: var(--tab-flex, none);
+}
+
 .tabs:where([aria-orientation="vertical"]) {
   display: grid;
+  overflow: visible;
   align-content: start;
   justify-items: stretch;
   border-block-end: 0;
   border-inline-end: var(--border-width) solid var(--border);
 }
 
+/* Edge fade: with no scrollbar, the strip fades the edges it can still scroll
+   toward. It runs on the strip's own inline timeline, which is inactive on a
+   strip that fits or a vertical rail, so those stay unmasked. Keep the
+   @supports: without scroll timelines the animation would end at once and pin
+   its last mask. It follows scroll, not time, so reduced motion keeps it. */
+@supports (animation-timeline: scroll()) {
+  .tabs {
+    --tab-fade-dir: to right;
+
+    animation: actual-tabs-fade linear both;
+    animation-timeline: scroll(self inline);
+  }
+
+  /* Gradient keywords are physical; :dir() follows the strip's own
+     direction, so an LTR island in an RTL page keeps its fade on the right. */
+  .tabs:dir(rtl) {
+    --tab-fade-dir: to left;
+  }
+}
+
+/* A strip that loads on a current link tab starts scrolled to it. Horizontal
+   only: the strip is then its nearest scroll container, while a vertical
+   rail would hand the target to the page. Engines without the property start
+   at the first tab, and the fade says there is more. */
+:where(.tabs:not([aria-orientation="vertical"]))
+.tab:is([aria-current="page"], [aria-current="true"]) {
+  /* biome-ignore lint/correctness/noUnknownProperty: CSS Scroll Snap 2 property that Biome's list predates; an engine without it drops the declaration. */
+  scroll-initial-target: nearest;
+}
+
+/* Forced colors keep every label at full contrast. */
+@media (forced-colors: active) {
+  .tabs {
+    animation: none;
+  }
+}
+
+/* mask-image does not interpolate, so each mask holds until halfway to the
+   next keyframe: the start fade appears within the first pixels of scroll and
+   the end fade drops at the very end. */
+@keyframes actual-tabs-fade {
+  0% {
+    mask-image: linear-gradient(
+      var(--tab-fade-dir),
+      #000 calc(100% - var(--tab-edge)),
+      transparent
+    );
+  }
+
+  1%,
+  99% {
+    mask-image: linear-gradient(
+      var(--tab-fade-dir),
+      transparent,
+      #000 var(--tab-edge) calc(100% - var(--tab-edge)),
+      transparent
+    );
+  }
+
+  100% {
+    mask-image: linear-gradient(var(--tab-fade-dir), transparent, #000 var(--tab-edge));
+  }
+}
+
 .tab {
   /* Positioning context for the selected indicator pseudo. */
   position: relative;
   display: inline-flex;
   align-items: center;
+  /* A tab wider than its label (--tab-flex) centers it; at natural width this
+     changes nothing, and a vertical rail resets it to the start below. */
+  justify-content: center;
   gap: var(--tab-gap, 0.375em);
   min-block-size: var(--control-size);
   padding-inline: var(--space-30);
@@ -58,12 +170,18 @@
      the strip. The active state is carried by color and the indicator line. */
   font-weight: var(--font-weight-semibold);
   text-decoration: none;
+  /* A label breaking inside a one-line strip is the same defect as the strip
+     wrapping. */
+  white-space: nowrap;
   cursor: pointer;
 }
 
+/* A vertical strip has no inline axis to protect: long labels wrap within the
+   rail instead of overflowing it. */
 .tabs:where([aria-orientation="vertical"]) .tab {
   justify-content: flex-start;
   padding-inline-end: var(--space-40);
+  white-space: normal;
 }
 
 .tab:is(:disabled, [aria-disabled="true"]) {
@@ -94,9 +212,14 @@
   border-end-end-radius: 0;
 }
 
+/* A link tab is current on aria-current="page". "true" is for the one place
+   where no page token fits: a navigation flyout trigger whose panel holds the
+   current page. State selectors name their values, never the attribute's
+   presence, so "false" (what React and Vue serialize for a false binding)
+   stays inert. */
 .tab[aria-selected="true"],
-.tab[aria-current="page"] {
-  color: var(--intent, var(--state-selected));
+.tab:is([aria-current="page"], [aria-current="true"]) {
+  color: var(--intent, var(--state-selected-text, var(--state-selected)));
 }
 
 /* The selected indicator lives on a positioned pseudo so that only the active
@@ -104,7 +227,7 @@
    forced colors and erase the distinction. currentColor follows the palette the
    UA forces, so no forced-colors block is needed. */
 .tab[aria-selected="true"]::after,
-.tab[aria-current="page"]::after {
+.tab:is([aria-current="page"], [aria-current="true"])::after {
   content: "";
   position: absolute;
   inset-inline: 0;
@@ -113,9 +236,16 @@
 }
 
 .tabs:where([aria-orientation="vertical"]) .tab[aria-selected="true"]::after,
-.tabs:where([aria-orientation="vertical"]) .tab[aria-current="page"]::after {
+.tabs:where([aria-orientation="vertical"])
+  .tab:is([aria-current="page"], [aria-current="true"])::after {
   inset-block: 0;
   inset-inline: auto 0;
   border-block-end: 0;
   border-inline-end: 2px solid currentColor;
 }
+
+/* A shared width (--tab-flex) lands on the <li> of a link tab; the tab fills
+   it, so the indicator and the hit area span the whole share. */
+.tabs > li > .tab {
+  inline-size: 100%;
+}

package/src/css/core/focus.css

@@ -18,17 +18,22 @@
    --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
-   against the field's background alongside --focus. */
+   against the field's background alongside --focus.
+
+   Public hooks:
+   --focus-outline (fallback-only: replaces the whole generic line)
+*/
 :focus {
-  outline: var(--focus-outline);
+  outline: var(--focus-outline, var(--focus-ring-width) solid var(--focus-outline-color));
   outline-offset: var(--focus-outline-offset);
 }
 
-@supports selector(:focus-visible) {
-  :focus:not(:focus-visible) {
-    outline: none;
-  }
+:focus:not(:focus-visible) {
+  outline: none;
 }

package/src/css/core/theme.css

@@ -8,7 +8,9 @@
  * Derived: "Theme-derived aliases", Tone subsystem, Backdrop fill — reference
  * other tokens; hard-coded overrides on a custom theme will break the intent.
  * Exception: --surface-opaque and --surface-solid-fg are public; a theme with
- * translucent surfaces overrides them with opaque values.
+ * translucent surfaces overrides them with opaque values. --border-control is
+ * public too: the resting edge of a neutral control, apart from structural
+ * separators.
  * Internal: --hgroup-gap.
  */
 :root {
@@ -110,6 +112,9 @@
      never a fill. --surface-solid-fg is the ink on --surface-solid. */
   --surface-opaque: var(--surface);
   --surface-solid-fg: var(--surface);
+  /* The edge that tells a control apart from the surface, where --border only
+     separates surfaces: fields, choices, switch, OTP cells, choice cards. */
+  --border-control: var(--border);
 }
 
 /* Soft foreground hooks — the soft ink is the intent rebated toward the local

package/src/css/core/tokens.css

@@ -81,9 +81,11 @@
      without a component ring (links, summary, plain items). Components draw
      the themed ring instead: --focus-ring-width solid --focus. See focus.css
      for the two contracts. Both share --focus-ring-width: they differ in
-     color only. */
+     color only. No --focus-outline alias here: declared on :root it would be
+     inherited already computed, so a theme island or a region setting
+     --focus-ring-width would not reach it. focus.css composes the line on the
+     focused element instead. */
   --focus-outline-color: currentColor;
-  --focus-outline: var(--focus-ring-width) solid var(--focus-outline-color);
   --focus-outline-offset: 2px;
   --focus-ring-width: 2px;
 
@@ -160,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. */
@@ -171,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/choice-card.css

@@ -38,7 +38,7 @@
   --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-border: var(--border-control);
   --choice-card-bg: var(--surface);
   --choice-card-check-size: 1.25em;
 

package/src/css/forms/choice.css

@@ -144,7 +144,7 @@
 /* Control geometry. --choice-* are the per-state tokens. */
 .check,
 .radio {
-  --choice-border: var(--border);
+  --choice-border: var(--border-control);
   --choice-bg: var(--surface);
   --choice-mark: var(--primary-fg);
 

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

@@ -0,0 +1,159 @@
+/*
+ * 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;
+  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/control.css

@@ -30,7 +30,7 @@
 .input,
 .textarea,
 .select {
-  --control-border: var(--border);
+  --control-border: var(--border-control);
   --control-bg: var(--surface);
   --control-fg: var(--text);
   --control-cursor: auto;

package/src/css/forms/floating-field.css

@@ -9,10 +9,13 @@
  * messages stay in the surrounding .field, not inside the cell, so the
  * resting label can center on the control alone.
  *
- * The control must precede the label: the float is driven by the general
- * sibling combinator and :placeholder-shown. Injected nodes may appear between
- * the control and the label (password managers, extension wrappers); the cell
- * contract stays a single control plus one label. Every .input/.textarea needs
+ * The cell reads its control's state through :has(), so the label may come
+ * before or after the control (a form theme rendering label then widget needs
+ * no reordering). Injected sibling nodes are tolerated (password managers,
+ * extension wrappers) as long as the control stays a direct child; the cell
+ * contract stays a single control plus one label, since a second control
+ * would float the label on either one's state.
+ * Every .input/.textarea needs
  * placeholder=" " to expose a reliable empty state — without it the label
  * only reacts to focus.
  *
@@ -62,23 +65,22 @@
 }
 
 /* Single-line controls rest in the middle until they receive a value. */
-.floating-field > :is(.input, .select) ~ .field-label {
+.floating-field:has(> :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 {
+.floating-field:has(> .textarea) > .field-label {
   inset-block-start: calc(1em + var(--border-width));
   transform: none;
 }
 
 /* :autofill covers prefilled values before interaction, when the browser may
    not have propagated the value to the placeholder state yet. */
-.floating-field
-  > :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown))
-  ~ .field-label {
+.floating-field:has(> :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown)))
+> .field-label {
   inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);
@@ -88,16 +90,16 @@
 /* Controls without a dependable :placeholder-shown empty state stay floated:
    select always, and date/time inputs whose placeholder rendering is
    inconsistent across engines (Firefox shows none). */
-.floating-field
+.floating-field:has(
   > :is(
-    .select,
-    .input[type="date"],
-    .input[type="time"],
-    .input[type="datetime-local"],
-    .input[type="month"],
-    .input[type="week"]
-  )
-  ~ .field-label {
+      .select,
+      .input[type="date"],
+      .input[type="time"],
+      .input[type="datetime-local"],
+      .input[type="month"],
+      .input[type="week"]
+    )
+) > .field-label {
   inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);