actual-css 0.4.2 → 0.6.0

package/CHANGELOG.md

@@ -1,13 +1,76 @@
 # Actual CSS Changelog
 
-## [Unreleased]
+## [0.6.0] - 2026-09-03
+
+### Changed
+
+- `.list` are now top-aligned.
+- `.aura` improvements.
+
+### Breaking
+
+- Reworked completely the `.steps`. Read the updated documentation for changes.
+- The framework query-container name is now `actual-container` instead of
+  `actual-grid`. `.container-query` is unchanged.
+
+## Fixed
+
+- `.fab` icons.
+- `.floating-field` with password managers.
+
+
+## [0.5.0] - 2026-09-01
+
+### Added
+
+* `surface` shared variant: the page surface with the theme border, intent in the text only.
+  Fills the gap between `soft` (always intent-tinted) and `outline` (no fill at all).
+* `--link` is now read by the base `a` rule, so a theme that sets it colors bare links and
+  prose links at once. Unset, nothing changes.
+* `touch-target` for small buttons.
+* `data-list` for compact term–value pairs describing the properties of a single object.
+* Segmented `meter`.
+* `intent-color` to apply color based on intent.
+* `demo/templates/motion.html` — a motion catalogue that replays each overlay's
+  entry/exit side by side, stretches durations to read the presence curves, and
+  simulates reduced motion.
+
+### Changed
+
+* `--bar-height` is a public hook. It was classified Internal by mistake while both
+  `progress` and `meter` used it as their only thickness mechanism. Size variants stay
+  unsupported on those two: a bar keeps its inline size and only changes thickness, which
+  the hook expresses better than a three-step scale.
+* Removed the `.field-group + .field-group` sibling margin (breaking, pre-1.0). A component
+  cannot know whether its siblings are stacked or gridded; space consecutive groups with
+  `.stack` on the form.
+* `steps` now separates the two accented states: `.complete` is a filled marker with an
+  accented connector, `[aria-current="step"]` an outlined one with a thicker ring. They were
+  visually identical, so a numbered stepper could not show position without a check glyph.
+  A step carrying both renders entirely as current, connector and completion glyph included.
+* `status-bar` visibility is driven by the `.is-open` state class instead of `:empty`,
+  and `status.clear()` now empties the text and intent only after the exit transition,
+  so the bar animates out at the size and color it was shown at. A message dispatched
+  during that exit cancels the pending cleanup. An empty message now clears instead of
+  opening a blank pill. The runtime also lifts the bar above the mobile software keyboard
+  via `visualViewport`. Deferred component cleanup now shares one CSS-transition helper,
+  so unrelated or infinite author animations cannot strand a status bar or surface.
+* Removed the generic `--ease` motion token (breaking, pre-1.0). Generic interaction and
+  state transitions now use the CSS default `ease` directly; the dialog shake and the
+  `actual-dialog` View Transition keep that default deliberately, so no behavior changes.
+* Introduced `--ease-enter` / `--ease-exit` presence curves for one-shot open/close, applied
+  to `status-bar`, `modal`, and `drawer`. The drawer exit shortens to `--duration` (entry
+  stays `--duration-slow`) and its `::backdrop` follows the panel duration. Flyout, tooltip,
+  and all backdrops keep the neutral `ease`; they share a single fast transition list or are
+  pure-opacity scrims where the presence pair does not resolve.
+
 
 ## [0.4.2] - 2026-08-25
 
 ### Fixed
 
-* `card` + `cluster` regression
-* Some markup in demos
+* `card` + `cluster` regression.
+* Some markup in demos.
 
 
 ## [0.4.1] - 2026-08-25

package/README.md

@@ -65,7 +65,7 @@ Add classes to your HTML. Components define the structure, variants change the s
 
 Intents such as `.primary`, `.secondary`, `.success`, `.warning`, and `.danger` work across components.
 
-Variants such as `.solid`, `.soft`, and `.outline` are shared by components like buttons, badges, alerts, and cards. `.inverted` is a shared surface modifier: it paints any block with the inverse surface. `.ghost` and `.link` are button-only variants.
+Variants such as `.solid`, `.soft`, `.outline`, and `.surface` are shared by components like buttons, badges, alerts, and cards. `.inverted` is a shared surface modifier: it paints any block with the inverse surface. `.ghost` and `.link` are button-only variants.
 
 Size variants `.sm` and `.lg` scale controls consistently.
 
@@ -77,7 +77,7 @@ Actual CSS uses a small unprefixed class grammar:
 .component [intent] [variant] [size] [modifier]
 ```
 
-Components, layout helpers, form helpers, and utilities claim their documented class names. Intents are `.primary`, `.secondary`, `.success`, `.warning`, and `.danger`; shared variants are `.solid`, `.soft`, and `.outline`; `.inverted` is a shared surface modifier; button-only variants are `.ghost` and `.link`; shared sizes are `.sm` and `.lg`.
+Components, layout helpers, form helpers, and utilities claim their documented class names. Intents are `.primary`, `.secondary`, `.success`, `.warning`, and `.danger`; shared variants are `.solid`, `.soft`, `.outline`, and `.surface`; `.inverted` is a shared surface modifier; button-only variants are `.ghost` and `.link`; shared sizes are `.sm` and `.lg`.
 
 Undocumented `is-*` classes are runtime internals.
 

package/dist/actual.css

@@ -56,8 +56,8 @@ select {
    *
    * 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
@@ -81,9 +81,10 @@ select {
   --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;
@@ -101,14 +102,25 @@ select {
   --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;
@@ -126,7 +138,9 @@ select {
   --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.
@@ -183,6 +197,7 @@ select {
   --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238a8594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
   --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3C/svg%3E");
+  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
 
   /* Viewport size tokens — fallback vh/vw with dvh/vi enhancement.
      Consumed by full-viewport components (app-shell, drawer, modal, flyout).
@@ -449,6 +464,9 @@ select {
  *
  * 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 {
@@ -458,8 +476,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;
 }
 
@@ -543,11 +564,17 @@ small {
   --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);
+}
+
 /*
  * 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
@@ -566,8 +593,10 @@ small {
  * 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.
@@ -590,6 +619,17 @@ small {
   --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