actual-css 0.4.1 → 0.5.0

package/src/css/components/modal.css

@@ -39,12 +39,14 @@ dialog.modal {
    * Keep the open dialog root untransformed. Fixed overlays mounted inside a
    * modal dialog use viewport coordinates; transform/translate/scale on this
    * element would make them position against the dialog instead. The closed
-   * state can still carry a small transform for enter/exit motion.
+   * state can still carry a small transform for enter/exit motion. The lift
+   * is a pure vertical offset: scaling a wide panel around its center drags
+   * both edges, which reads as horizontal movement.
    */
-  transform: translateY(0.35rem) scale(0.98);
+  transform: translateY(0.35rem);
   transition:
-    opacity var(--duration),
-    transform var(--duration);
+    opacity var(--duration) var(--ease-exit),
+    transform var(--duration) var(--ease-exit);
 }
 
 dialog.modal > form,
@@ -163,33 +165,46 @@ dialog.modal.dialog-confirmation > form > footer {
 dialog.modal[open] {
   opacity: 1;
   transform: none;
+  transition:
+    opacity var(--duration) var(--ease-enter),
+    transform var(--duration) var(--ease-enter);
 }
 
 @starting-style {
   dialog.modal[open] {
     opacity: 0;
-    transform: translateY(0.35rem) scale(0.98);
+    transform: translateY(0.35rem);
   }
 }
 
 dialog.modal::backdrop {
   background: var(--backdrop-fill);
   opacity: 0;
-  transition: opacity var(--duration);
+  /* Scrim curve stays neutral `ease`; only the panel carries the character
+     curves. */
+  transition: opacity var(--duration) ease;
 }
 
 @supports (transition-behavior: allow-discrete) {
   dialog.modal {
     transition:
-      opacity var(--duration),
-      transform var(--duration),
+      opacity var(--duration) var(--ease-exit),
+      transform var(--duration) var(--ease-exit),
+      overlay var(--duration) allow-discrete,
+      display var(--duration) allow-discrete;
+  }
+
+  dialog.modal[open] {
+    transition:
+      opacity var(--duration) var(--ease-enter),
+      transform var(--duration) var(--ease-enter),
       overlay var(--duration) allow-discrete,
       display var(--duration) allow-discrete;
   }
 
   dialog.modal::backdrop {
     transition:
-      opacity var(--duration),
+      opacity var(--duration) ease,
       overlay var(--duration) allow-discrete,
       display var(--duration) allow-discrete;
   }
@@ -214,13 +229,15 @@ html.has-modal-open.had-scrollbar {
 }
 
 @media (prefers-reduced-motion: no-preference) {
+  /* Wrong-close feedback and view-transition transport are motion quirks, not
+     presence enter/exit, so they stay on the plain CSS default easing. */
   dialog.modal.is-static {
-    animation: actual-dialog-static var(--duration-slow) var(--ease);
+    animation: actual-dialog-static var(--duration-slow) ease;
   }
 
   ::view-transition-group(actual-dialog) {
     animation-duration: var(--duration);
-    animation-timing-function: var(--ease);
+    animation-timing-function: ease;
   }
 }
 

package/src/css/components/navbar.css

@@ -18,6 +18,7 @@
 
 .navbar {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
@@ -45,6 +46,7 @@
 
 .navbar-nav {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-10);

package/src/css/components/pagination.css

@@ -10,6 +10,7 @@
  */
 .pagination {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-10);

package/src/css/components/progress.css

@@ -4,9 +4,14 @@
  * Consumes the shared --intent/--primary for the value bar and --bar-height
  * for thickness. Indeterminate state animates a shimmer using --duration-shimmer.
  *
+ * Thickness is a dimension, not a density step: the bar always spans its
+ * container and only gets thinner or thicker, so --bar-height is the API and
+ * .sm/.lg are deliberately not supported.
+ *
  * Public hooks:
  * --progress-track
  * --progress-value
+ * --bar-height
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */

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

@@ -1,9 +1,12 @@
 /*
  * Status bar — singleton floating status area.
  *
- * One element in the HTML, empty by default, hidden when :empty but kept in the
- * accessibility tree so it stays a reliable live region. JavaScript only sets
- * text content; the visual shows and hides with the content.
+ * One element in the HTML, empty by default. .is-open is the visual state, set
+ * by status.js like any other surface: it lands after the message is written
+ * and lifts before the bar is cleared, so the bar leaves in the exact state it
+ * was shown in — same text, same width, same intent color — instead of snapping
+ * to a neutral empty pill mid-exit. Emptying the text is the *end* of the exit,
+ * not its trigger.
  *
  * Consumes intent like badge or alert. No need for status-bar-specific modifier
  * classes — .danger / .success / .warning / .neutral from intents.css drive
@@ -17,6 +20,7 @@
  * Internal:
  * --status-bg
  * --status-fg
+ * --status-viewport-offset (written by status.js while the bar is open)
  */
 
 /* Intent boundary — inherited intents do not tint this component.
@@ -31,7 +35,9 @@
   --status-fg: var(--intent-fg, var(--surface));
 
   position: fixed;
-  inset-block-end: var(--space-40);
+  /* Fixed positioning tracks the layout viewport, which the mobile software
+     keyboard covers. status.js writes the occluded band into the offset. */
+  inset-block-end: calc(var(--space-40) + var(--status-viewport-offset, 0px));
   inset-inline: var(--space-40);
   z-index: var(--z-status);
 
@@ -53,22 +59,32 @@
   color: var(--status-fg);
   box-shadow: var(--shadow-popout);
 
-  opacity: 1;
-  scale: 1;
-  translate: 0 0;
+  /* Closed by default. Opacity, not visibility or display: the bar has to stay
+     in the accessibility tree to work as a live region. */
+  opacity: 0;
+  translate: 0 var(--space-30);
   pointer-events: none;
 
+  /* Exit is shorter than entry so dismissed feedback gets out of the way.
+     background stays a shorthand so --status-bg still accepts gradients;
+     solid colors expose an interpolable computed background-color. The
+     intent color follows the state/interaction `ease`, not the presence
+     curves. */
   transition:
-    opacity var(--duration-slow) var(--ease),
-    scale var(--duration-slow) var(--ease),
-    translate var(--duration-slow) var(--ease);
+    opacity var(--duration-fast) var(--ease-exit),
+    translate var(--duration) var(--ease-exit),
+    background-color var(--duration) ease;
 }
 
-.status-bar:empty {
-  opacity: 0;
-  scale: 0.96;
-  translate: 0 var(--space-20);
-  pointer-events: none;
+.status-bar.is-open {
+  opacity: 1;
+  translate: 0 0;
+  /* Entry takes a little longer and decelerates, making the message legible
+     before its motion settles. */
+  transition:
+    opacity var(--duration) var(--ease-enter),
+    translate var(--duration-slow) var(--ease-enter),
+    background-color var(--duration) ease;
 }
 @media print {
   .status-bar {

package/src/css/components/steps.css

@@ -35,6 +35,7 @@
 
   counter-reset: actual-step;
   display: flex;
+  flex-direction: row;
   inline-size: 100%;
   margin: 0;
   padding: 0;
@@ -96,27 +97,53 @@
   content: none;
 }
 
-.steps > :is(.complete, [aria-current="step"]) {
+/* Three states must be readable without a check glyph: future stays neutral,
+   complete is a filled marker, current is an outlined one. Filled reads as
+   "done", outlined as "you are here" — the distinction survives a numbered
+   stepper that never sets --step-complete-mark. */
+.steps > .complete {
   --step-marker-bg: var(--state-selected);
   --step-marker-border: var(--state-selected);
   --step-marker-fg: var(--state-selected-fg);
+  --step-line: var(--state-selected);
 
   color: var(--text);
 }
 
-/* Thicker border is the selected affordance in every mode — structural, and it
-   never competes with the outline channel owned by focus. */
-.steps > :is(.complete, [aria-current="step"])::before {
-  border-width: calc(var(--border-width) * 2);
+/* Declared after .complete at equal specificity, and it wins on every channel
+   including the connector: the accented line means "already walked", so the
+   segment leaving the current step must stay neutral. The line reaching the
+   current step is owned by the previous step, which is complete. */
+.steps > [aria-current="step"] {
+  --step-marker-bg: var(--surface);
+  --step-marker-border: var(--state-selected);
+  --step-marker-fg: var(--state-selected);
+  --step-line: var(--border);
+
+  color: var(--text);
 }
 
-.steps > .complete {
-  --step-line: var(--state-selected);
+/* Thicker border is the current affordance in every mode — structural, so it
+   survives forced colors, and it never competes with the outline channel owned
+   by focus. */
+.steps > [aria-current="step"]::before {
+  border-width: calc(var(--border-width) * 2);
 }
 
 /* A finished step may replace its number with a mark (e.g. a check glyph):
    --step-complete-mark accepts any content value and falls back to the
-   counter, so existing numbered steppers are unchanged. */
-.steps > .complete::before {
+   counter, so existing numbered steppers are unchanged. Excluded on the
+   current step so "current wins" holds on the glyph too, not only on color. */
+.steps > .complete:not([aria-current="step"])::before {
   content: var(--step-complete-mark, counter(actual-step));
 }
+
+/* Forced colors drop the accent fill, which would leave complete and future
+   markers identical — current keeps its thicker ring, complete needs a system
+   color to stay filled. Same exclusion, for the same reason. */
+@media (forced-colors: active) {
+  .steps > .complete:not([aria-current="step"])::before {
+    background: Highlight;
+    color: HighlightText;
+  }
+}

package/src/css/components/surface.css

@@ -19,7 +19,9 @@
   z-index: calc(var(--z-menu) - 1);
   background: var(--backdrop-fill);
   opacity: 1;
-  transition: opacity var(--duration) var(--ease);
+  /* A scrim never travels; it fades on the neutral `ease`. Duration matches
+     the flyout sheet it accompanies so it never lags the panel. */
+  transition: opacity var(--duration-fast) ease;
 }
 
 .surface-backdrop[hidden] {
@@ -36,8 +38,8 @@
 @supports (transition-behavior: allow-discrete) {
   .surface-backdrop {
     transition:
-      opacity var(--duration) var(--ease),
-      display var(--duration) allow-discrete;
+      opacity var(--duration-fast) ease,
+      display var(--duration-fast) allow-discrete;
   }
 }
 @media print {

package/src/css/components/tab.css

@@ -16,6 +16,7 @@
 
 .tabs {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   gap: var(--space-10);
   margin: 0;

package/src/css/components/tooltip.css

@@ -32,31 +32,28 @@
   overflow-wrap: anywhere;
   pointer-events: auto;
   user-select: none;
+  /* Tooltips fade only: the anchor edge, marked by the arrow, must stay put
+     during motion, and a 4% scale was perceptible on small text. Scaling moves
+     the arrow tip away from its trigger on every placement. */
   opacity: 1;
-  scale: 1;
-  transition:
-    opacity var(--duration-fast) var(--ease),
-    scale var(--duration-fast) var(--ease);
+  transition: opacity var(--duration-fast) ease;
 }
 
 .tooltip[hidden] {
   display: none;
   opacity: 0;
-  scale: 0.96;
 }
 
 @starting-style {
   .tooltip:not([hidden]) {
     opacity: 0;
-    scale: 0.96;
   }
 }
 
 @supports (transition-behavior: allow-discrete) {
   .tooltip {
     transition:
-      opacity var(--duration-fast) var(--ease),
-      scale var(--duration-fast) var(--ease),
+      opacity var(--duration-fast) ease,
       display var(--duration-fast) allow-discrete;
   }
 }

package/src/css/core/base.css

@@ -3,6 +3,9 @@
  *
  * Sits between reset (browser defaults) and prose (rich content scope).
  * These styles apply everywhere — cards, dialogs, heroes — not only in prose.
+ *
+ * Public hooks:
+ * --link
  */
 
 body {
@@ -12,8 +15,11 @@ body {
   line-height: var(--line-height);
 }
 
+/* Bare links inherit their ink by default, so nothing changes unless a theme
+   opts in by setting --link. Because this is an element selector, any component
+   rule that colors its own anchors still wins. */
 a {
-  color: inherit;
+  color: var(--link, inherit);
   text-underline-offset: 0.18em;
 }
 

package/src/css/core/intents.css

@@ -31,3 +31,9 @@
   --intent: var(--neutral);
   --intent-fg: var(--neutral-fg);
 }
+
+/* Paint an inherited or local intent on a simple foreground element without
+   turning the intent classes into general-purpose color utilities. */
+.intent-color {
+  color: var(--intent);
+}

package/src/css/core/tokens.css

@@ -8,8 +8,8 @@
    *
    * Derived: "Theme-derived aliases" and "State tokens" reference intent and
    * surface tokens and follow the theme; do not hard-code values into them.
-   * Internal: indicator offsets, --bar-height, --disabled-opacity and the
-   * like are consumed by components, not authored.
+   * Internal: indicator offsets, --disabled-opacity and the like are
+   * consumed by components, not authored.
    *
    * Component-local hooks and internal state relays live with their
    * components. See docs/pages/foundations/tokens.md for the public/internal
@@ -33,9 +33,10 @@
   --font-size-md: 1rem;
   --font-size-lg: 1.125rem;
 
-  /* Spacing — official steps are named in tens so the scale stays open for
-     application themes to intercalate intermediate values (--space-15,
-     --space-45…) without colliding with future framework steps. */
+  /* Spacing — official steps are named in tens so the scale stays open.
+     Actual CSS will never define a --space-* that is not a multiple of 10:
+     the intermediate names (--space-15, --space-45…) are reserved for
+     applications, and no future framework step can collide with them. */
   --gap: 0.75rem;
   --density-space: var(--space-40);
   --density-compact-size: 1.5rem;
@@ -53,14 +54,25 @@
   --shadow-popout: 0 0.25rem 0.75rem rgb(0 0 0 / 0.15);
 
   /* Motion — see reset.css for the prefers-reduced-motion hard reset.
-     --duration drives component transitions (hover/focus); the dedicated
-     animation rates below tune one-shot open/close and decorative loops. */
+     --duration scales component transitions (hover/focus); the dedicated
+     animation rates below tune one-shot open/close and decorative loops.
+     Generic state/interaction motion uses the CSS default `ease` directly
+     (registered nowhere). --ease-enter/--ease-exit express the character of
+     one-shot presence changes, owned by the open/closed state rules that
+     separate them (status-bar, drawer, modal). The pair follows the standard
+     M3 rhythm; the more aggressive emphasized-decelerate entrance is
+     deliberately not offered because it only pays off on 250–400ms motions,
+     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. */
   --duration: 150ms;
   --duration-fast: 100ms;
   --duration-slow: 200ms;
   --duration-spin: 0.75s;
   --duration-shimmer: 1.2s;
-  --ease: ease;
+  --ease-enter: cubic-bezier(0.2, 0, 0, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
 
   /* Focus ring — shared by every interactive component's :focus-visible */
   --focus-outline-color: currentColor;
@@ -78,7 +90,9 @@
   --backdrop-opacity: 0.45;
   --backdrop-fill: rgb(0 0 0 / var(--backdrop-opacity));
 
-  /* Progress / meter track height */
+  /* Bar thickness shared by .progress and .meter — two conceptual variants of
+     the same geometry. Public: set it on the element or on an application
+     class rather than reaching for a size variant. */
   --bar-height: 0.65rem;
 
   /* Controls — inputs and buttons share --control-size so heights always match.

package/src/css/core/variants.css

@@ -1,8 +1,8 @@
 /*
  * Cross-cutting variant token mapping.
  *
- * Variant scope: .solid/.soft/.outline set --ui-* for components that opt into
- * shared variants. .inverted is a surface modifier, not a variant: it paints
+ * Variant scope: .solid/.soft/.outline/.surface set --ui-* for components that
+ * opt into shared variants. .inverted is a surface modifier, not a variant: it paints
  * the element directly (background/color/border-color) so it works on any bare
  * block, and remaps the shared --ui-* tokens so participating components
  * (.card, .navbar, .alert, .badge) invert through their own rules. Loaded
@@ -21,8 +21,10 @@
  * 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 is
- * a no-op.
+ * 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.
  *
  * Intent list source of truth: intents.css. Components consume --intent* tokens
  * instead of re-listing intent classes.
@@ -45,6 +47,17 @@
   --ui-border: var(--intent, currentColor);
 }
 
+/* Neutral chrome, intent only in the ink: the page surface with the theme
+   border. .soft is the intent-tinted treatment (its baseline fallback uses
+   --surface-subtle) and .outline has no fill at all, so neither can express
+   it. Deliberately literal — no color-mix enhancement — so this stays the one
+   variant that reads exactly as the theme's own surface. */
+.surface {
+  --ui-bg: var(--surface);
+  --ui-fg: var(--intent, var(--text));
+  --ui-border: var(--border);
+}
+
 /* Inverse surface treatment. Paints the element directly (so it works on any
    bare block) and remaps the shared --ui-* tokens so opt-in components
    (.card, .navbar) invert through their own rules. Because this loads before

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

@@ -17,6 +17,7 @@
  */
 .form-actions {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   gap: var(--gap);
   align-items: var(--form-actions-align, center);

package/src/css/forms/form.css

@@ -4,6 +4,10 @@
  * Individual controls keep their own files; .choice label layout lives in
  * choice.css; .form-actions lives in form-actions.css.
  *
+ * .field-group owns its own box only. Distance between sibling groups is a
+ * composition concern (.stack on the form), never a sibling margin here: the
+ * component cannot know whether its siblings are stacked or gridded.
+ *
  * Public API: .field, .field-label, .field-help, .field-error, .field-group,
  * .required-mark.
  *
@@ -24,10 +28,6 @@
   border-radius: var(--radius);
 }
 
-.field-group + .field-group {
-  margin-block-start: var(--space-40);
-}
-
 .field-label,
 .field-group > legend {
   color: var(--text);

package/src/css/layout/cluster.css

@@ -10,6 +10,7 @@
  */
 .cluster {
   display: flex;
+  flex-direction: row;
   flex-wrap: var(--cluster-wrap, wrap);
   align-items: var(--cluster-align, center);
   justify-content: var(--cluster-justify, flex-start);

package/src/css/layout/scroll-snap.css

@@ -18,6 +18,7 @@
   --scroll-snap-item-size: auto;
 
   display: flex;
+  flex-direction: row;
   gap: var(--scroll-snap-gap);
   overflow-x: auto;
 }

package/src/css/layout/sidebar-layout.css

@@ -17,6 +17,7 @@
  */
 .sidebar-layout {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   gap: var(--gap);
   align-items: flex-start;

package/src/css/layout/switcher.css

@@ -12,6 +12,7 @@
  */
 .switcher {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   gap: var(--gap);
 }

package/src/css/layout/topbar.css

@@ -15,6 +15,7 @@
   z-index: var(--z-sticky);
   isolation: isolate;
   display: flex;
+  flex-direction: row;
   align-items: center;
   gap: var(--gap);
   padding-block: var(--space-30);

package/src/css/typography/prose.css

@@ -83,9 +83,8 @@
   font-size: var(--prose-h4);
 }
 
-/* Link ink defaults to --primary. --link is an optional escape hatch: a
-   theme whose primary is too light or too vivid to read as inline text sets
-   it without having to restate the rule. */
+/* --link is a theme-level token (core/base.css also reads it for bare links);
+   prose falls back to --primary so a theme that never sets it is unaffected. */
 .prose :where(a) {
   color: var(--link, var(--primary));
   text-decoration-line: underline;

package/src/css/utilities/base.css

@@ -18,6 +18,22 @@
   border: 0;
 }
 
+/* Enlarge a small control's touch target on touch-primary devices without
+   growing the visual. Opt-in — apply to genuinely small targets only. The
+   ::after exists only under (pointer: coarse), so on fine pointers the class
+   is fully neutral. */
+@media (pointer: coarse) {
+  .touch-target {
+    position: relative;
+  }
+
+  .touch-target::after {
+    content: "";
+    position: absolute;
+    inset: calc(var(--space-20) * -1);
+  }
+}
+
 .overflow-auto {
   overflow: auto;
 }

package/src/js/selectors.js

@@ -25,6 +25,7 @@ export const CLASSES = {
   // for aria-invalid/danger state. Optional — degrades to no-op.
   field: "field",
   // surface.js — state class on the open flyout/menu/dialog surface.
+  // status.js writes the same class on the status bar while a message shows.
   open: "is-open",
   // surface.js — state class while the surface renders as a mobile sheet.
   sheet: "is-sheet",