actual-css 0.4.1 → 0.5.0

package/dist/actual.full.css

@@ -60,8 +60,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
@@ -85,9 +85,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;
@@ -105,14 +106,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;
@@ -130,7 +142,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.
@@ -453,6 +467,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 {
@@ -462,8 +479,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;
 }
 
@@ -547,11 +567,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
@@ -570,8 +596,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.
@@ -594,6 +622,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
@@ -776,9 +815,8 @@ small {
   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;
@@ -1096,6 +1134,7 @@ small {
  */
 .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);
@@ -1276,6 +1315,7 @@ small {
  */
 .switcher {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   gap: var(--gap);
 }
@@ -1305,6 +1345,7 @@ small {
  */
 .sidebar-layout {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   gap: var(--gap);
   align-items: flex-start;
@@ -1702,6 +1743,7 @@ small {
   --scroll-snap-item-size: auto;
 
   display: flex;
+  flex-direction: row;
   gap: var(--scroll-snap-gap);
   overflow-x: auto;
 }
@@ -1773,6 +1815,7 @@ small {
   z-index: var(--z-sticky);
   isolation: isolate;
   display: flex;
+  flex-direction: row;
   align-items: center;
   gap: var(--gap);
   padding-block: var(--space-30);
@@ -1817,6 +1860,10 @@ small {
  * 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.
  *
@@ -1837,10 +1884,6 @@ small {
   border-radius: var(--radius);
 }
 
-.field-group + .field-group {
-  margin-block-start: var(--space-40);
-}
-
 .field-label,
 .field-group > legend {
   color: var(--text);
@@ -2420,6 +2463,7 @@ small {
  */
 .form-actions {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   gap: var(--gap);
   align-items: var(--form-actions-align, center);
@@ -3965,6 +4009,7 @@ a.badge[aria-disabled="true"] {
   --gap: var(--space-20);
 
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--gap);
@@ -4154,7 +4199,9 @@ a.badge[aria-disabled="true"] {
   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] {
@@ -4171,8 +4218,8 @@ a.badge[aria-disabled="true"] {
 @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 {
@@ -4222,12 +4269,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,
@@ -4346,33 +4395,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;
   }
@@ -4397,13 +4459,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;
   }
 }
 
@@ -4502,11 +4566,16 @@ html.has-modal-open.had-scrollbar {
  *
  * Internal:
  * --drawer-closed-translate (side/RTL positioning state)
+ * --drawer-motion-duration (shared by panel and ::backdrop so exit duration
+ *   changes in one place; entry state redefines it longer)
  */
 dialog.drawer {
   --drawer-size: 20rem;
   --drawer-pad: var(--space-40);
   --drawer-closed-translate: -100%;
+  /* Exit is shorter than entry so the panel clears quickly; the scrim reads
+     the same variable through inheritance and never lags the panel. */
+  --drawer-motion-duration: var(--duration);
 
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button.
@@ -4530,16 +4599,20 @@ dialog.drawer {
   opacity: 0;
   transform: translateX(var(--drawer-closed-translate));
   transition:
-    opacity var(--duration-slow),
-    transform var(--duration-slow);
+    opacity var(--drawer-motion-duration) var(--ease-exit),
+    transform var(--drawer-motion-duration) var(--ease-exit);
 }
 
 dialog.drawer[open] {
+  --drawer-motion-duration: var(--duration-slow);
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   gap: var(--space-40);
   opacity: 1;
   transform: translateX(0);
+  transition:
+    opacity var(--drawer-motion-duration) var(--ease-enter),
+    transform var(--drawer-motion-duration) var(--ease-enter);
 }
 
 /* Backdrop color sourced from components/surface.css so it matches .modal
@@ -4547,7 +4620,9 @@ dialog.drawer[open] {
 dialog.drawer::backdrop {
   background: var(--backdrop-fill);
   opacity: 0;
-  transition: opacity var(--duration-slow);
+  /* Scrim curve stays neutral `ease`; only the panel's character curves
+     apply. Duration follows --drawer-motion-duration through inheritance. */
+  transition: opacity var(--drawer-motion-duration) ease;
 }
 
 dialog.drawer[data-side="end"] {
@@ -4583,17 +4658,25 @@ dialog.drawer nav {
 @supports (transition-behavior: allow-discrete) {
   dialog.drawer {
     transition:
-      opacity var(--duration-slow),
-      transform var(--duration-slow),
-      overlay var(--duration-slow) allow-discrete,
-      display var(--duration-slow) allow-discrete;
+      opacity var(--drawer-motion-duration) var(--ease-exit),
+      transform var(--drawer-motion-duration) var(--ease-exit),
+      overlay var(--drawer-motion-duration) allow-discrete,
+      display var(--drawer-motion-duration) allow-discrete;
+  }
+
+  dialog.drawer[open] {
+    transition:
+      opacity var(--drawer-motion-duration) var(--ease-enter),
+      transform var(--drawer-motion-duration) var(--ease-enter),
+      overlay var(--drawer-motion-duration) allow-discrete,
+      display var(--drawer-motion-duration) allow-discrete;
   }
 
   dialog.drawer::backdrop {
     transition:
-      opacity var(--duration-slow),
-      overlay var(--duration-slow) allow-discrete,
-      display var(--duration-slow) allow-discrete;
+      opacity var(--drawer-motion-duration) ease,
+      overlay var(--drawer-motion-duration) allow-discrete,
+      display var(--drawer-motion-duration) allow-discrete;
   }
 }
 
@@ -4629,7 +4712,7 @@ dialog.drawer nav {
 
 @media (prefers-reduced-motion: no-preference) {
   dialog.drawer.is-static {
-    animation: actual-dialog-static var(--duration-slow) var(--ease);
+    animation: actual-dialog-static var(--duration-slow) ease;
   }
 }
 
@@ -4723,11 +4806,10 @@ dialog.drawer > form > header {
   box-shadow: var(--shadow-popout);
   list-style: none;
   opacity: 1;
-  scale: 1;
-  transition:
-    opacity var(--duration-fast) var(--ease),
-    scale var(--duration-fast) var(--ease),
-    translate var(--duration-fast) var(--ease);
+  /* Anchored flyouts fade in and out; scaling around the center would detach
+     the anchored edge from its trigger on wide panels. The sheet presentation
+     below adds its own translate motion. */
+  transition: opacity var(--duration-fast) ease;
 }
 
 .flyout.is-open:not(.is-sheet) {
@@ -4737,7 +4819,6 @@ dialog.drawer > form > header {
 @starting-style {
   .flyout.is-open {
     opacity: 0;
-    scale: 0.98;
   }
 }
 
@@ -4759,22 +4840,24 @@ dialog.drawer > form > header {
     max(var(--space-30), env(safe-area-inset-bottom));
   border-end-start-radius: 0;
   border-end-end-radius: 0;
+  /* Sheet motion is a directional slide from the viewport edge; it replaces
+     the base fade-only recipe. */
+  transition:
+    opacity var(--duration-fast) ease,
+    translate var(--duration-fast) ease;
 }
 
 .flyout[hidden] {
   display: none;
   opacity: 0;
-  scale: 0.98;
 }
 
 .flyout.is-sheet[hidden] {
-  scale: 1;
   translate: 0 var(--space-30);
 }
 
 @starting-style {
   .flyout.is-sheet.is-open {
-    scale: 1;
     translate: 0 var(--space-30);
   }
 }
@@ -4782,9 +4865,14 @@ dialog.drawer > form > header {
 @supports (transition-behavior: allow-discrete) {
   .flyout {
     transition:
-      opacity var(--duration-fast) var(--ease),
-      scale var(--duration-fast) var(--ease),
-      translate var(--duration-fast) var(--ease),
+      opacity var(--duration-fast) ease,
+      display var(--duration-fast) allow-discrete;
+  }
+
+  .flyout.is-sheet {
+    transition:
+      opacity var(--duration-fast) ease,
+      translate var(--duration-fast) ease,
       display var(--duration-fast) allow-discrete;
   }
 }
@@ -4989,31 +5077,28 @@ dialog.drawer > form > header {
   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;
   }
 }
@@ -5354,9 +5439,14 @@ dialog.drawer > form > header {
  * 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. */
@@ -5460,9 +5550,12 @@ dialog.drawer > form > header {
 /*
  * 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
@@ -5476,6 +5569,7 @@ dialog.drawer > form > header {
  * 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.
@@ -5490,7 +5584,9 @@ dialog.drawer > form > header {
   --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);
 
@@ -5512,22 +5608,32 @@ dialog.drawer > form > header {
   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 {
@@ -6163,6 +6269,7 @@ a.avatar[aria-disabled="true"] {
 
   counter-reset: actual-step;
   display: flex;
+  flex-direction: row;
   inline-size: 100%;
   margin: 0;
   padding: 0;
@@ -6224,31 +6331,57 @@ a.avatar[aria-disabled="true"] {
   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;
+  }
+}
+
 
 /* Navigation */
 /*
@@ -6348,6 +6481,7 @@ a.avatar[aria-disabled="true"] {
 
 .navbar {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
@@ -6375,6 +6509,7 @@ a.avatar[aria-disabled="true"] {
 
 .navbar-nav {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-10);
@@ -6433,6 +6568,7 @@ a.avatar[aria-disabled="true"] {
  */
 .breadcrumb {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-10);
@@ -6486,6 +6622,7 @@ a.avatar[aria-disabled="true"] {
  */
 .pagination {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-10);
@@ -6534,6 +6671,7 @@ a.avatar[aria-disabled="true"] {
 
 .tabs {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   gap: var(--space-10);
   margin: 0;
@@ -6645,6 +6783,34 @@ a.avatar[aria-disabled="true"] {
 
 
 /* Data */
+/*
+ * Data list — term/value pairs for the properties of a single object.
+ *
+ * Expects alternating <dt>/<dd> children: one term, one value per property.
+ * A plain <dl> handles richer relationships (several terms or descriptions)
+ * and stays untouched by this component.
+ *
+ * Why margin resets: neutralizes .prose list margins if .data-list appears
+ * inside an authored rich-text scope; the grid owns row/column rhythm.
+ */
+.data-list {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: var(--space-20) var(--space-40);
+}
+
+.data-list > dt {
+  min-inline-size: 0;
+  margin-block-start: 0;
+  font-weight: var(--font-weight-strong);
+}
+
+.data-list > dd {
+  min-inline-size: 0;
+  margin: 0;
+}
+
 /*
  * Application list — repeated rows with optional leading and trailing regions.
  * Content determines the number of lines; the component only owns the row
@@ -6803,10 +6969,18 @@ a.list-item:hover {
 }
 
 /*
- * Meter — native gauge for known-range values.
+ * Meter — native and segmented gauges for known-range values.
  *
  * Maps the three standard meter zones (optimum / suboptimum / even-less-good)
  * to the shared success / warning / danger intent colors.
+ *
+ * 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:
+ * --meter-value
+ * --bar-height
  */
 
 .meter {
@@ -6821,6 +6995,25 @@ a.list-item:hover {
   background: var(--surface-subtle);
 }
 
+/* A non-native meter is a weighted flex container. The element type keeps the
+   native <meter> API and the composed segmented API distinct without another
+   public variant class. */
+.meter:not(meter) {
+  --intent: initial;
+
+  display: flex;
+}
+
+.meter:not(meter) > * {
+  flex: var(--meter-value, 1) 1 0;
+  min-inline-size: 0;
+  background: var(--intent);
+}
+
+.meter:not(meter) > * + * {
+  border-inline-start: var(--border-width) solid var(--surface);
+}
+
 .meter::-webkit-meter-bar {
   -webkit-appearance: none;
   block-size: var(--bar-height);
@@ -7099,6 +7292,22 @@ a.list-item:hover {
   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;
 }