actual-css 0.7.0 → 0.8.0

package/src/css/components/navbar.css

@@ -9,8 +9,15 @@
  * --gap (local value for the shared gap token)
  */
 /* Intent boundary — inherited intents do not tint this component.
-   Local intent classes still win because :where() has zero specificity. */
+   Local intent classes still win because :where() has zero specificity.
+   The intent tokens are reset alongside --ui-*: the shared variants
+   (.soft/.solid/.outline/.surface) read --intent / --intent-fg / --intent-soft-fg
+   when they paint this surface, so an ancestor intent would otherwise leak
+   through a variant that has no local intent class. */
 :where(.navbar) {
+  --intent: initial;
+  --intent-fg: initial;
+  --intent-soft-fg: initial;
   --ui-bg: initial;
   --ui-fg: initial;
   --ui-border: initial;
@@ -66,10 +73,15 @@
   text-decoration: none;
 }
 
-.nav-link:where([aria-current]:not([aria-current="false"])) {
+/* nav-link serves two contracts: plain page navigation (aria-current="page")
+   and scrollspy, which toggles aria-current="location" on the active link.
+   Presence is the contract: the attribute is set on the current link and
+   removed everywhere else, never serialized as aria-current="false".
+   Selection never changes text metrics: the shared medium weight is kept and
+   the current link is carried by the selected accent. */
+.nav-link[aria-current] {
   background: var(--surface-subtle);
-  color: var(--text);
-  font-weight: var(--font-weight-bold);
+  color: var(--state-selected);
 }
 
 .nav-link:hover {
@@ -77,11 +89,18 @@
   color: var(--text);
 }
 
+/* A current link keeps its accent on hover: without this, the hover rule above
+   would drop it back to --text. The surface hover still applies. */
+.nav-link[aria-current]:hover {
+  color: var(--state-selected);
+}
+
 /* Nav list — a vertical navigation list. Used by .drawer for stacked links.
    Links fill each row so the whole line is an interactive target; the
    horizontal .navbar-nav links keep their intrinsic size. */
 .nav-list {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   --gap: var(--space-20);
   gap: var(--gap);
   margin: 0;
@@ -94,5 +113,19 @@
 }
 
 .nav-list .nav-link {
+  position: relative;
   inline-size: 100%;
 }
+
+/* Vertical current indicator: inset inline-start trait in currentColor, so it
+   follows the forced palette without a forced-colors block and never touches
+   the row separators. Navbar horizontal links keep color + surface only. The
+   positioning context lives on every row link, so becoming current never moves
+   an app-positioned decoration to a new containing block. */
+.nav-list .nav-link[aria-current]::before {
+  content: "";
+  position: absolute;
+  inset-block: var(--space-20);
+  inset-inline-start: 0;
+  border-inline-start: 2px solid currentColor;
+}

package/src/css/components/pagination.css

@@ -17,6 +17,7 @@
   margin: 0;
   padding: 0;
   list-style: none;
+  font-size: var(--control-font-size);
 
   /* Arrows, page numbers, and truncation ellipses share one geometric
      system: equal digit widths keep the row from re-flowing as numbers grow

package/src/css/components/spinner.css

@@ -31,7 +31,6 @@
   border-inline-end-color: var(--spinner-value);
   border-radius: var(--radius-full);
   opacity: 0.85;
-  animation: actual-spin var(--duration-spin) linear infinite;
   vertical-align: text-bottom;
 }
 
@@ -52,13 +51,14 @@
   --spinner-width: 3px;
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .spinner {
+    animation: actual-spin var(--duration-spin) linear infinite;
+  }
+}
+
 @keyframes actual-spin {
   to {
     transform: rotate(360deg);
   }
 }
-@media print {
-  .spinner {
-    display: none !important;
-  }
-}

package/src/css/components/status-bar.css

@@ -86,8 +86,3 @@
     translate var(--duration-slow) var(--ease-enter),
     background-color var(--duration) ease;
 }
-@media print {
-  .status-bar {
-    display: none !important;
-  }
-}

package/src/css/components/steps.css

@@ -8,23 +8,16 @@
  *
  * `.steps` is what a step *is* — the counter, the marker, `.step-label`,
  * `.step-complete`, `aria-current="step"`. It carries no orientation, so it is
- * never written alone. `.steps-horizontal` and `.steps-vertical` are what a
- * sequence *looks like*, and they are peers: neither is the default the other
- * has to exclude, so no rule says `:not(...)` and no rule undoes another's
- * layout.
+ * never written alone. The two orientations are peers: no rule says
+ * `:not(...)` and no rule undoes another's layout.
  *
- * Orientation and labels are independent dimensions. `.step-label` is optional
- * in either orientation; when a sequence carries names, every step carries
- * one:
+ * Orientation and labels are independent. `.step-label` is optional in either;
+ * when a sequence carries names, every step carries one:
  *
  *                 empty steps           .step-label on every step
  *   horizontal    compact progression   named sequence, stacked or inline
  *   vertical      compact rail          named sequence, labels beside markers
  *
- * An empty step is a marker and nothing else, so it is compact by structure —
- * `> li:empty` in both orientations, no variant class, and nothing authored
- * only to be hidden again. The page around it owns the step name.
- *
  * A label may be an `a[href]`, which is the whole interactive surface: the
  * marker is never navigable, so navigating a flow means naming its
  * destinations. Anything else focusable in a step is out of contract.
@@ -95,7 +88,7 @@
   background: var(--step-marker-bg);
   color: var(--step-marker-fg);
   font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
   line-height: 1;
 }
 
@@ -155,11 +148,9 @@
   border-width: calc(var(--border-width) * 2);
 }
 
-/* Weight marks "where I am now". Complete needs none: its filled disc already
-   reads as strongly. */
-.steps > [aria-current="step"] .step-label {
-  font-weight: var(--font-weight-strong);
-}
+/* No label weight change for current: the accented marker with its doubled
+   border already carries the state, and selection never changes text metrics.
+   Complete needs none either: its filled disc already reads as strongly. */
 
 .steps > .step-complete:not([aria-current="step"])::before {
   content: var(--step-complete-mark, counter(actual-step));
@@ -217,8 +208,8 @@
    `:empty` says exactly what the markup says, the way `.badge:empty` does, and
    it reads the item's own content: bare text in an `<li>` keeps a reading width
    like its wrapped peers, where `> li:has(.step-label)` would give it a marker
-   floor and skew the row. It also predates `:has()` by a decade, so the compact
-   form reaches the Degraded tier and only the inline bonus needs `:has()`. */
+   floor and skew the row. `:empty` also keeps the compact form reachable on the
+   Degraded tier, where only the inline bonus needs `:has()`. */
 .steps-horizontal > li:empty {
   flex: 1 1 0;
   justify-items: start;
@@ -249,48 +240,43 @@
 }
 
 /*
- * The one horizontal container query. Past 60rem a labelled row has the room
- * to put marker and label inline and still leave the connector a real region
- * between groups, rather than a stub. Calibrated on five steps — the widest
- * supported row, and therefore the binding case — and it counts nothing, so it
- * serves every count. Below it, stacked; a marker row is already the shape
- * this query produces and stays out of it.
+ * The one horizontal container query: past 60rem a labelled row can put marker
+ * and label inline and still leave the connector a real region between groups.
+ * It counts nothing, so it serves every count; below it, stacked. A marker row
+ * is already the shape this query produces and stays out of it.
  *
- * Horizontal is a 2-5 step component. Outside that domain the rule simply
- * applies as written, because a row that is out of contract is not owed a
- * curated fallback.
+ * Horizontal is a 2-5 step component. Outside that domain the rule applies as
+ * written — a row out of contract is not owed a curated fallback.
  */
-@supports (container-type: inline-size) {
-  @container actual-container (inline-size >= 60rem) {
-    .steps-horizontal:has(.step-label) > li {
-      display: flex;
-      flex: 1 1 auto;
-      align-items: center;
-      gap: var(--step-inline-gap);
-      min-inline-size: 0;
-      text-align: start;
-      white-space: nowrap;
-    }
-
-    .steps-horizontal:has(.step-label) > li::after {
-      position: static;
-      flex: 1 1 2rem;
-      inline-size: auto;
-      block-size: var(--step-size);
-      margin-inline-end: var(--step-inline-gap);
-      background: var(
-        --step-inline-connector,
-        var(
-          --step-connector,
-          linear-gradient(var(--step-line), var(--step-line)) center /
-          100% var(--step-line-size) no-repeat
-        )
-      );
-    }
-
-    .steps-horizontal:has(.step-label) > li:last-child {
-      flex: 0 0 auto;
-    }
+@container actual-container (inline-size >= 60rem) {
+  .steps-horizontal:has(.step-label) > li {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: var(--step-inline-gap);
+    min-inline-size: 0;
+    text-align: start;
+    white-space: nowrap;
+  }
+
+  .steps-horizontal:has(.step-label) > li::after {
+    position: static;
+    flex: 1 1 2rem;
+    inline-size: auto;
+    block-size: var(--step-size);
+    margin-inline-end: var(--step-inline-gap);
+    background: var(
+      --step-inline-connector,
+      var(
+        --step-connector,
+        linear-gradient(var(--step-line), var(--step-line)) center /
+        100% var(--step-line-size) no-repeat
+      )
+    );
+  }
+
+  .steps-horizontal:has(.step-label) > li:last-child {
+    flex: 0 0 auto;
   }
 }
 

package/src/css/components/tab.css

@@ -5,6 +5,11 @@
  * and arrow-key navigation. CSS owns the tab strip appearance and
  * active indicator.
  *
+ * aria-orientation is matched inside :where() so it keeps describing which
+ * arrow keys move between tabs without also carrying cascade weight: an
+ * author class can then adjust a vertical strip without restating the
+ * attribute to reach its specificity.
+ *
  * Public hooks:
  * --tab-gap
  */
@@ -25,7 +30,7 @@
   list-style: none;
 }
 
-.tabs[aria-orientation="vertical"] {
+.tabs:where([aria-orientation="vertical"]) {
   display: grid;
   align-content: start;
   justify-items: stretch;
@@ -46,12 +51,15 @@
   background: transparent;
   color: var(--text-muted);
   font: inherit;
-  font-weight: var(--font-weight-strong);
+  font-size: var(--control-font-size);
+  /* Selection must not change text metrics: a heavier active label would shift
+     the strip. The active state is carried by color and the indicator line. */
+  font-weight: var(--font-weight-semibold);
   text-decoration: none;
   cursor: pointer;
 }
 
-.tabs[aria-orientation="vertical"] .tab {
+.tabs:where([aria-orientation="vertical"]) .tab {
   justify-content: flex-start;
   padding-inline-end: var(--space-40);
 }
@@ -65,6 +73,8 @@
   color: var(--text);
 }
 
+/* The ring is square on the edge the tab is attached to, so it reads as part
+   of the strip rather than a floating chip. */
 .tab:focus-visible {
   outline: var(--focus-outline);
   outline-color: var(--focus);
@@ -72,18 +82,27 @@
   border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 }
 
-.tab[aria-selected="true"] {
+/* A vertical tab is attached along its inline end, not its block end, so the
+   horizontal geometry above would round the wrong pair of corners. Logical
+   corners keep it correct in RTL. */
+.tabs:where([aria-orientation="vertical"]) .tab:focus-visible {
+  border-start-start-radius: var(--radius-sm);
+  border-start-end-radius: 0;
+  border-end-start-radius: var(--radius-sm);
+  border-end-end-radius: 0;
+}
+
+.tab[aria-selected="true"],
+.tab[aria-current="page"] {
   color: var(--intent, var(--state-selected));
-  /* Second, layout-free selected cue — the underline alone is color-only in
-     forced colors. */
-  font-weight: var(--font-weight-bold);
 }
 
 /* The selected indicator lives on a positioned pseudo so that only the active
    tab owns an underline: a transparent border on every tab would surface in
    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-selected="true"]::after,
+.tab[aria-current="page"]::after {
   content: "";
   position: absolute;
   inset-inline: 0;
@@ -91,7 +110,8 @@
   border-block-end: 2px solid currentColor;
 }
 
-.tabs[aria-orientation="vertical"] .tab[aria-selected="true"]::after {
+.tabs:where([aria-orientation="vertical"]) .tab[aria-selected="true"]::after,
+.tabs:where([aria-orientation="vertical"]) .tab[aria-current="page"]::after {
   inset-block: 0;
   inset-inline: auto 0;
   border-block-end: 0;

package/src/css/components/table.css

@@ -43,13 +43,13 @@
   vertical-align: baseline;
 }
 
-.table thead th {
-  vertical-align: bottom;
-}
-
 .table th {
   color: var(--text-muted);
-  font-weight: var(--font-weight-strong);
+  font-weight: var(--font-weight-semibold);
+}
+
+.table thead th {
+  vertical-align: bottom;
 }
 
 .table thead {

package/src/css/components/tooltip.css

@@ -1,9 +1,13 @@
 /*
  * Tooltip — supplemental label overlaid near a trigger.
  *
- * Position, placement, and arrow position are managed by JavaScript
- * via position: fixed, left, top, data-placement, and --arrow-x.
- * Visibility is managed with hidden; CSS owns entry and exit animation.
+ * Position, placement, and arrow position are managed by JavaScript via left,
+ * top, data-placement, and --arrow-x. The runtime also owns `position`: it
+ * writes `absolute` for a tip whose trigger scrolls with the page, so the
+ * browser carries the tip along instead of the positioner correcting it a
+ * frame later, and `fixed` — the declaration below — for every other trigger.
+ * Visibility is the Popover lifecycle: tooltip.js promotes the tip to the top
+ * layer with popover="manual". CSS owns entry and exit animation.
  *
  * Public hooks:
  * --tooltip-bg
@@ -11,8 +15,8 @@
  * --tooltip-arrow-size
  *
  * Internal:
- * --arrow-x (arrow position, written by floating.js)
- * --arrow-y (arrow position, written by floating.js)
+ * --arrow-x (arrow position, written by the positioner)
+ * --arrow-y (arrow position, written by the positioner)
  */
 .tooltip {
   --tooltip-bg: var(--surface-solid);
@@ -20,7 +24,6 @@
   --tooltip-arrow-size: 5px;
 
   position: fixed;
-  z-index: var(--z-tooltip);
   max-inline-size: min(24rem, calc(var(--viewport-inline) - 2rem));
   padding: 0.25em 0.6em;
   border-radius: var(--radius-sm);
@@ -41,43 +44,42 @@
 
 /* Neutralize only the native geometry that conflicts with a positioned
    tooltip. In particular, the UA overflow would turn the arrow into scroll
-   overflow instead of letting it project beyond the bubble. Gated on real
-   Popover support: the attribute selector matches whether or not the engine
-   implements Popover, and without it nothing hides the element, so an ungated
-   reset would leave a stray bubble parked at inset: auto. Popover sits outside
-   Actual's Minimal contract, so the gate tracks the capability rather than the
-   floor. */
-@supports selector(:popover-open) {
-  .tooltip[popover] {
-    inset: auto;
-    margin: 0;
-    overflow: visible;
-  }
+   overflow instead of letting it project beyond the bubble.
 
-  /* .tooltip declares no display of its own, so the UA already hides a closed
-     popover here. The rule is written anyway: both components advertised as
-     Popover-compatible should cede the hidden state the same way, and the
-     opacity target is what actually makes the native exit fade — see the
-     overlay note below. */
-  .tooltip[popover]:not(:popover-open) {
-    display: none;
-    opacity: 0;
-  }
+   One rule for both lifecycles: the runtime writes popover="manual" on the
+   tips it manages, and an application driving a .tooltip[popover] itself lands
+   on the same declarations. Who owns which is in
+   docs/pages/enhancements/overview.md. */
+.tooltip[popover] {
+  inset: auto;
+  margin: 0;
+  overflow: visible;
 }
 
+/* The closed state, for either lifecycle. .tooltip declares no display of its
+   own so the UA would already hide it, but the opacity target is what makes
+   the exit fade at all — see the overlay note below. */
+.tooltip[popover]:not(:popover-open) {
+  display: none;
+  opacity: 0;
+}
+
+/* The state before enhancement, and the author's to write — not the runtime's.
+   Wiring is lazy: tooltip.js adopts an explicit tip on its trigger's first
+   hover, so a tooltip nobody hovers keeps [hidden] for the whole life of the
+   page. Without this rule it would sit on screen at full opacity until then.
+   The runtime removes the attribute at the moment it takes the lifecycle over,
+   because an author declaration outranks the platform's own hidden state. */
 .tooltip[hidden] {
   display: none;
   opacity: 0;
 }
 
-/* Entry opacity for both lifecycles: a runtime-driven tip is visible when it
-   is neither a popover nor [hidden], a native one when it is :popover-open.
-   compat-ok: [popover] appears here only under negation, which every engine
-   evaluates correctly whether or not it implements Popover, :popover-open
-   rides in a forgiving :is(), and @starting-style is itself unsupported across
-   part of the Minimal range — so the rule does not exist there at all. */
+/* Entry opacity, for either lifecycle — both are :popover-open.
+   @starting-style is above the floor (Safari 17.5); where it is missing the
+   tip simply appears at full opacity. */
 @starting-style {
-  .tooltip:is(:not([popover]):not([hidden]), :popover-open) {
+  .tooltip:popover-open {
     opacity: 0;
   }
 }
@@ -135,9 +137,3 @@
   translate: 0 -50%;
   clip-path: polygon(0 50%, 100% 0, 100% 100%);
 }
-
-@media print {
-  .tooltip {
-    display: none !important;
-  }
-}

package/src/css/core/base.css

@@ -6,6 +6,7 @@
  *
  * Public hooks:
  * --link
+ * --hr-space
  */
 
 body {
@@ -47,10 +48,23 @@ hgroup > * {
   margin-block: 0;
 }
 
+/* Section break.
+
+   margin-inline: 0 overrides the UA's `margin: 0.5em auto`. In block flow the
+   auto margins resolve to zero and nothing changes, but as a flex or grid item
+   an inline auto margin replaces the stretch — an <hr> in a .stack computed to
+   width 0 and vanished. .stack deliberately leaves the inline axis free, so
+   the reset belongs here.
+
+   --hr-space tunes the block rhythm on the instance: a rule closing a page
+   section and a rule separating two rows in a panel are the same element at
+   very different scales. It applies to an hr in document flow; inside .stack
+   or .prose the parent owns the spacing between siblings and wins. */
 hr {
   border: 0;
   border-block-start: var(--border-width) solid var(--border);
-  margin-block: var(--space-60);
+  margin-block: var(--hr-space, var(--space-60));
+  margin-inline: 0;
 }
 
 code,
@@ -60,6 +74,14 @@ pre {
   font-family: var(--font-mono);
 }
 
+/* Overflow containment only. One unbreakable line — a URL, a minified token, a
+   wide ASCII table — otherwise widens the whole page, and an author cannot see
+   it coming from the markup. Background, padding and radius stay out: those
+   belong to .prose or to an application code-block component. */
+pre {
+  overflow-x: auto;
+}
+
 small {
   font-size: 0.875em;
 }

package/src/css/core/intents.css

@@ -1,35 +1,46 @@
 /*
  * Intent classes do not style elements directly.
- * They only expose --intent and --intent-fg.
- * Components and variants decide how to consume them. Each component that
- * consumes --intent or --ui-* opens a local intent boundary in a :where()
- * block that resets exactly the tokens it consumes to initial. Parent intents
- * do not leak into nested components. Local intent classes (.primary, .danger,
- * etc.) still apply because they have higher specificity than :where().
+ * They only expose --intent, --intent-fg, and the optional per-intent soft
+ * foreground --intent-soft-fg, relayed from the per-role --*-soft-fg hooks.
+ * The default theme declares those hooks for its soft ink (see theme.css);
+ * a theme without them lets the relay resolve to an invalid value, so the soft
+ * recipe falls back to its --soft-fg-mix derivation and a theme opts in one
+ * role at a time (docs/pages/foundations/tokens.md). Components and variants
+ * decide how to consume them. Each component that consumes --intent,
+ * --intent-soft-fg or --ui-* opens a local intent boundary in a :where() block
+ * that resets exactly the tokens it consumes to initial. Parent intents do not
+ * leak into nested components. Local intent classes (.primary, .danger, etc.)
+ * still apply because they have higher specificity than :where().
  */
 .primary {
   --intent: var(--primary);
   --intent-fg: var(--primary-fg);
+  --intent-soft-fg: var(--primary-soft-fg);
 }
 .secondary {
   --intent: var(--secondary);
   --intent-fg: var(--secondary-fg);
+  --intent-soft-fg: var(--secondary-soft-fg);
 }
 .success {
   --intent: var(--success);
   --intent-fg: var(--success-fg);
+  --intent-soft-fg: var(--success-soft-fg);
 }
 .warning {
   --intent: var(--warning);
   --intent-fg: var(--warning-fg);
+  --intent-soft-fg: var(--warning-soft-fg);
 }
 .danger {
   --intent: var(--danger);
   --intent-fg: var(--danger-fg);
+  --intent-soft-fg: var(--danger-soft-fg);
 }
 .neutral {
   --intent: var(--neutral);
   --intent-fg: var(--neutral-fg);
+  --intent-soft-fg: var(--neutral-soft-fg);
 }
 
 /* Paint an inherited or local intent on a simple foreground element without

package/src/css/core/theme.css

@@ -101,6 +101,33 @@
   --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
+   text so it keeps 4.5:1 against the soft hover fill (the resting fill carries
+   the extra margin; variants.css soft recipe). Deliberately scoped to the
+   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,
+[data-theme="light"],
+[data-theme="dark"] {
+  --secondary-soft-fg: color-mix(in oklab, var(--text) 10%, var(--secondary) 90%);
+  --success-soft-fg: color-mix(in oklab, var(--text) 15%, var(--success) 85%);
+  --warning-soft-fg: color-mix(in oklab, var(--text) 25%, var(--warning) 75%);
+  --danger-soft-fg: color-mix(in oklab, var(--text) 15%, var(--danger) 85%);
+  --neutral-soft-fg: color-mix(in oklab, var(--text) 20%, var(--neutral) 80%);
+}
+
 /* 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