actual-css 0.7.0 → 0.9.0

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

@@ -9,6 +9,14 @@
  * --table-cell-pad
  */
 .table-wrap {
+  /* Containing block for anything absolutely positioned inside the table —
+     `.sr-only` on a column header above all. Without it that box resolves
+     against the initial containing block, so it keeps the static position of a
+     cell that may be a thousand pixels along the scrolled row, escapes this
+     scroller, and extends the *document's* scrollable width. The page then
+     scrolls sideways on a phone with nothing painted out there. */
+  position: relative;
+
   inline-size: 100%;
   max-inline-size: 100%;
   min-inline-size: 0;
@@ -43,13 +51,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

package/src/css/core/tokens.css

@@ -22,9 +22,9 @@
   --line-height: 1.5;
   --line-height-tight: 1.25;
   --line-height-relaxed: 1.75;
-  --font-weight: 400;
+  --font-weight-normal: 400;
   --font-weight-medium: 500;
-  --font-weight-strong: 650;
+  --font-weight-semibold: 600;
   --font-weight-bold: 700;
 
   /* Typography scale */
@@ -39,7 +39,6 @@
      applications, and no future framework step can collide with them. */
   --gap: 0.75rem;
   --density-space: var(--space-40);
-  --density-compact-size: 1.5rem;
   --space-10: 0.25rem;
   --space-20: 0.5rem;
   --space-30: 0.75rem;
@@ -65,7 +64,10 @@
      beyond this vocabulary. Toggles that share one transition list at
      --duration-fast (flyout, tooltip) and pure-opacity backdrops stay on
      `ease`: at 100ms the curve has almost no resolving time, and a scrim is
-     not traveling anywhere. */
+     not traveling anywhere. Animation policy: reset.css is the global safety
+     net; every meaningful @keyframes is explicitly gated behind
+     prefers-reduced-motion: no-preference; ordinary transitions rely on the
+     reset alone. */
   --duration: 150ms;
   --duration-fast: 100ms;
   --duration-slow: 200ms;
@@ -96,20 +98,29 @@
   --bar-height: 0.65rem;
 
   /* Controls — inputs and buttons share --control-size so heights always match.
-     .sm/.lg (variants.css) switch --control-size; --control-font-size stays
-     at its baseline because density does not change typography.
+     .compact/.spacious (variants.css) switch geometry without changing
+     --control-font-size. Local .sm/.lg component sizes switch all three.
 
      Inline choices (checkbox, radio, switch) are typographic, not field-sized:
      they sit on a line of text, so they follow --control-font-size through
      --choice-control-size instead of --control-size. Being an em value in
      :root is deliberate — an unregistered custom property resolves its units
      at the element that consumes it, so one declaration tracks whatever font
-     size the choice actually renders at. */
+     size the choice actually renders at.
+
+     --control-pad-x is the opposite kind of token: a resolved geometry length,
+     not an em ratio. Every part of one control must see the same horizontal
+     distance, so it is stated in the typographic tokens rather than an em
+     whose value would change on a descendant with its own font size (the
+     input-icon glyph, made larger by --input-icon-size). It mirrors
+     --control-font-size and is rebound beside it at the .sm/.lg boundaries
+     (variants.css); declaring it only in :root would freeze the md value,
+     because a var() inside a custom property resolves where it is declared. */
   --control-size-sm: 2rem;
   --control-size-md: 2.375rem;
   --control-size-lg: 2.75rem;
   --control-size: var(--control-size-md);
-  --control-pad-x: 1em;
+  --control-pad-x: var(--font-size-md);
   --control-font-size: var(--font-size-md);
   --choice-control-size: 1.125em;
   --disabled-opacity: 0.65;
@@ -142,7 +153,10 @@
   --soft-hover-alpha: 12%;
   /* 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. */
+     light intent palettes need to stay legible on their own soft surface.
+     The default palette ships per-role --*-soft-fg hooks calibrated against
+     the hovered soft fill instead (theme.css); this mix is the fallback a
+     theme without hooks falls back to. */
   --soft-fg-mix: 100%;
 
   /* Shared icon assets. Override these URLs when a strict CSP disallows data:. */
@@ -158,13 +172,14 @@
   --viewport-block: 100vh;
   --viewport-inline: 100vw;
 
-  /* Z-index scale — used ONLY by non-dialog overlays (see the layering
-     note below for the full model). Actual CSS reserves multiples of 10 for
-     framework layers; applications may use intermediate values for local
-     layering. */
+  /* Z-index scale — orders document-layer components only. Native top-layer
+     elements, dialogs and popovers alike, do not participate in this ordering:
+     they always paint above the document, and their order among themselves is
+     their top-layer promotion order. No z-index value here can reach them.
+     Actual CSS reserves multiples of 10 for framework layers; applications may
+     use intermediate values for local layering. */
   --z-sticky: 10;
   --z-menu: 20;
-  --z-tooltip: 50;
   --z-status: 60;
 }
 
@@ -199,7 +214,12 @@
     --shadow-popout: 0 0.25rem 0.75rem color-mix(in oklch, var(--shadow-color) 15%, transparent);
   }
 
-  :root {
+  /* Theme-derived like the shadows above, so it is declared on the same
+     boundaries: an alias resolved only on :root is inherited already composed,
+     and a [data-theme] island overriding --backdrop-color or
+     --backdrop-opacity would not change the scrim of a dialog inside it. */
+  :root,
+  [data-theme] {
     --backdrop-fill: color-mix(
       in oklch,
       var(--backdrop-color) calc(var(--backdrop-opacity) * 100%),

package/src/css/core/variants.css

@@ -15,16 +15,15 @@
  *   components/badge.css   — .badge default soft behind explicit --ui-*
  *   components/alert.css   — .alert default soft behind explicit --ui-*
  *
- * .sm/.lg set shared density tokens: spacing rhythm and geometry only.
- * Density never changes typography — controls keep their font-size and
- * content components keep theirs. Controls consume --control-size; non-control
- * components may consume --density-* when the density context should affect
- * their local rhythm. Compact components may consume --density-compact-size.
- * Components with bespoke sizing (spinner, avatar) define local .sm/.lg;
- * applying .sm/.lg to card, dialog, accordion, navbar, table, progress, meter
- * is a no-op. Progress and meter are deliberate: a bar keeps its inline size
- * and only changes thickness, which --bar-height expresses better than a
- * three-step scale.
+ * .compact/.spacious set inherited density tokens: spacing rhythm and geometry
+ * only. Density never changes typography or icon size. Controls consume
+ * --control-size; non-control components may consume --density-* when the
+ * context should affect their local rhythm.
+ *
+ * .sm/.lg are local size roles, not shared measurements. Shared control
+ * participants below map both typography and geometry; components with
+ * bespoke geometry (badge, spinner, avatar, rating, key, prose) own those
+ * mappings locally. Components without an explicit mapping do not participate.
  *
  * Intent list source of truth: intents.css. Components consume --intent* tokens
  * instead of re-listing intent classes.
@@ -80,17 +79,64 @@
   border-color: var(--ui-border);
 }
 
-.sm {
+.compact {
   --gap: var(--space-20);
   --density-space: var(--space-20);
   --control-size: var(--control-size-sm);
-  --density-compact-size: 1.25rem;
 }
-.lg {
+
+.spacious {
   --gap: var(--space-50);
   --density-space: var(--space-50);
   --control-size: var(--control-size-lg);
-  --density-compact-size: 1.875rem;
+}
+
+/* Shared control scale. Wrappers are listed when their descendants form one
+   component (field, input-icon, join, pagination, tabs, flyout). A local size
+   declaration beats inherited density because it is declared on the sized
+   component itself. */
+:where(
+  .btn,
+  .input,
+  .textarea,
+  .select,
+  .color,
+  .file,
+  .field,
+  .choice,
+  .input-icon,
+  .otp,
+  .join,
+  .pagination,
+  .tabs,
+  .tab,
+  .flyout
+).sm {
+  --control-size: var(--control-size-sm);
+  --control-font-size: var(--font-size-sm);
+  --control-pad-x: var(--font-size-sm);
+}
+
+:where(
+  .btn,
+  .input,
+  .textarea,
+  .select,
+  .color,
+  .file,
+  .field,
+  .choice,
+  .input-icon,
+  .otp,
+  .join,
+  .pagination,
+  .tabs,
+  .tab,
+  .flyout
+).lg {
+  --control-size: var(--control-size-lg);
+  --control-font-size: var(--font-size-lg);
+  --control-pad-x: var(--font-size-lg);
 }
 
 /* Modern color enhancement. Baseline variant values above remain usable
@@ -104,7 +150,10 @@
       var(--surface) var(--soft-border-mix),
       var(--intent, var(--neutral))
     );
-    --ui-fg: color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix));
+    --ui-fg: var(
+      --intent-soft-fg,
+      color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
+    );
     /* @sync soft-recipe */
   }
 

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

@@ -79,13 +79,13 @@
 
 /* Checked border — shared by radio and checkbox */
 .choice-card:has(:checked) {
-  --choice-card-border: var(--intent, var(--primary));
+  --choice-card-border: var(--intent, var(--state-selected));
 }
 
 /* Subtle background tint on checked — modern browsers only */
 @supports (color: color-mix(in oklch, red, white)) {
   .choice-card:has(:checked) {
-    --choice-card-bg: color-mix(in oklab, var(--surface) 96%, var(--intent, var(--primary)));
+    --choice-card-bg: color-mix(in oklab, var(--surface) 96%, var(--intent, var(--state-selected)));
   }
 }
 
@@ -105,7 +105,7 @@
 
 /* Badge disc — circle for radio, rounded square for checkbox */
 .choice-card::before {
-  background: var(--intent, var(--primary));
+  background: var(--intent, var(--state-selected));
   box-shadow: 0 0 0 2px var(--surface);
   z-index: 1;
 }
@@ -120,7 +120,7 @@
 
 /* Check mark */
 .choice-card::after {
-  background: var(--intent-fg, var(--primary-fg));
+  background: var(--intent-fg, var(--state-selected-fg));
   -webkit-mask: var(--icon-check) center / 60% no-repeat;
   mask: var(--icon-check) center / 60% no-repeat;
   z-index: 2;