actual-css 0.4.2 → 0.6.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.
@@ -187,6 +201,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).
@@ -453,6 +468,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 +480,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 +568,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 +597,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 +623,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 +816,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;
@@ -1035,7 +1074,7 @@ small {
  * .sidebar-layout main content + secondary aside
  * .grid           responsive collection; item width is the contract
  *  .grid-N         structural density of N; balanced inside a container named
- *                  actual-grid (in grid.css)
+ *                  actual-container (in grid.css)
  * .column-layout  explicit 12-column region composition; the author owns
  *                 narrow-container recomposition
  * .scroller       theme-aware scrollbar density and colour
@@ -1046,20 +1085,44 @@ small {
  *
  * Prefer these compositions over viewport breakpoint utilities.
  */
-/* Convenience helper: establishes a query container named actual-grid for
-   descendants. Use it for a component that changes representation according
-   to its allocated inline size, and to give .grid-N the named context it needs
-   for balanced subdivision (see grid.css). The name matters: grids only respond
-   to an explicitly actual-grid-named container, never to an incidental
-   query container. Layout primitives are responsive without it; this adds
-   precision, it is never a prerequisite.
-
-   The element takes inline-size containment, so put it on a normal
-   block-level wrapper, never on a shrink-to-fit item (a .cluster child, a
-   float, an inline-block): its contents would stop contributing to its own
-   inline size and it would collapse. */
+/* Convenience helper for size-aware components: establishes an inline-size
+   query container named actual-container. The name is the contract, not this
+   class — an author can declare `container: actual-container / inline-size` on
+   their own region and get the same result.
+
+   actual-container is shared. Granting it to a region may enable size-aware
+   enhancements for any Actual component inside that region, not only the one
+   that motivated the container: .grid-N reads it for balanced subdivision,
+   .steps for its label collapse, and future components will read the same
+   context. That is the scope of the API, not a caveat.
+
+   An anonymous query container is not part of it. A region that declares
+   `container-type: inline-size` for the application's own purposes carries no
+   actual-container name, so no framework component changes behaviour there.
+   Opting into the protocol is always explicit. Nothing here is a prerequisite
+   either — every primitive is responsive without it; this adds precision.
+
+   Place it where the width you want measured lives: usually a wrapper for a
+   grid, whose queried children sit inside it, and the component itself for
+   .steps, whose own row is the width in question.
+
+   The rule for where it is safe is the containment rule, not a list of
+   primitives. Query containment removes the element's intrinsic inline-size
+   contribution, so:
+
+     safe    the element's width is imposed by its context
+             (.steps sets inline-size: 100%, so it survives even as a
+             .cluster child — it wraps and fills)
+
+     unsafe  the element's width depends on its contents' intrinsic
+             contribution (a bare .grid child of .cluster measures 0 once
+             contained, as does a float, inline-block, table, grid auto track,
+             max-content parent, or an abspos box sized by its contents)
+
+   So .cluster is neither safe nor unsafe; what matters is where the child's
+   width comes from. */
 .container-query {
-  container: actual-grid / inline-size;
+  container: actual-container / inline-size;
 }
 
 /* Vertical flow. .stack owns the block axis only: block margins reset, inline
@@ -1430,13 +1493,13 @@ small {
   min-inline-size: 0;
 }
 
-/* Balanced subdivision, activated by an ancestor container named actual-grid.
+/* Balanced subdivision, activated by an ancestor container named actual-container.
  * A .grid-N inside such a container enters only divisor states of N. The name
  * is deliberate: a grid must not key off the nearest anonymous query container,
  * or a region that sets container-type: inline-size for an unrelated reason
  * would silently change the grid. The author opts the grid in by naming the
  * context — .container-query is the official helper, or declare
- * container: actual-grid / inline-size on your own region.
+ * container: actual-container / inline-size on your own region.
  *
  *   .grid-2   2 -> 1
  *   .grid-3   3 -> 1
@@ -1453,7 +1516,7 @@ small {
  * inline contribution and collapses it inside .cluster, .topbar, floats, and
  * any shrink-to-fit box. See docs/design-notes/grid.md.
  *
- * Without an actual-grid ancestor none of these @container rules resolve, so
+ * Without an actual-container ancestor none of these @container rules resolve, so
  * the auto-fill baseline above stays. The min-width: 0 rule is the lowest
  * step: it pins the grid to one column inside a container before any larger
  * threshold fires (a bare grid would otherwise show a 2 + 1 orphan at 28-48rem).
@@ -1469,25 +1532,25 @@ small {
  * Ascending min-width only: the last matching step wins by cascade order.
  */
 @supports (container-type: inline-size) {
-  @container actual-grid (min-width: 0px) {
+  @container actual-container (min-width: 0px) {
     :where(.grid-2, .grid-3, .grid-4, .grid-6) {
       grid-template-columns: 1fr;
     }
   }
 
-  @container actual-grid (min-width: 28rem) {
+  @container actual-container (min-width: 28rem) {
     :where(.grid-2, .grid-4, .grid-6) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
-  @container actual-grid (min-width: 48rem) {
+  @container actual-container (min-width: 48rem) {
     :where(.grid-3, .grid-6) {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }
 
-  @container actual-grid (min-width: 64rem) {
+  @container actual-container (min-width: 64rem) {
     :where(.grid-4) {
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
@@ -1822,6 +1885,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.
  *
@@ -1842,10 +1909,6 @@ small {
   border-radius: var(--radius);
 }
 
-.field-group + .field-group {
-  margin-block-start: var(--space-40);
-}
-
 .field-label,
 .field-group > legend {
   color: var(--text);
@@ -2937,7 +3000,7 @@ small {
 
       &::picker(select) {
         appearance: base-select;
-        max-height: min(24rem, calc(var(--viewport-block) * 0.7));
+        max-block-size: min(24rem, calc(var(--viewport-block) * 0.7));
         margin-block: var(--space-20);
         padding: 0;
         border: var(--border-width) solid var(--border);
@@ -3014,8 +3077,10 @@ small {
  * messages stay in the surrounding .field, not inside the cell, so the
  * resting label can center on the control alone.
  *
- * The control must precede the label: the float is driven by the sibling
- * combinator and :placeholder-shown. Every .input/.textarea needs
+ * The control must precede the label: the float is driven by the general
+ * sibling combinator and :placeholder-shown. Injected nodes may appear between
+ * the control and the label (password managers, extension wrappers); the cell
+ * contract stays a single control plus one label. Every .input/.textarea needs
  * placeholder=" " to expose a reliable empty state — without it the label
  * only reacts to focus.
  *
@@ -3063,14 +3128,14 @@ small {
 }
 
 /* Single-line controls rest in the middle until they receive a value. */
-.floating-field > :is(.input, .select) + .field-label {
+.floating-field > :is(.input, .select) ~ .field-label {
   inset-block-start: 50%;
   transform: translateY(-50%);
 }
 
 /* An empty textarea label follows the control's normal first-line position;
    the control itself keeps the extra headroom reserved for its floated state. */
-.floating-field > .textarea + .field-label {
+.floating-field > .textarea ~ .field-label {
   inset-block-start: calc(1em + var(--border-width));
   transform: none;
 }
@@ -3079,7 +3144,7 @@ small {
    not have propagated the value to the placeholder state yet. */
 .floating-field
   > :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown))
-  + .field-label {
+  ~ .field-label {
   inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);
@@ -3098,7 +3163,7 @@ small {
     .input[type="month"],
     .input[type="week"]
   )
-  + .field-label {
+  ~ .field-label {
   inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);
@@ -4161,7 +4226,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] {
@@ -4178,8 +4245,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 {
@@ -4229,12 +4296,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,
@@ -4353,33 +4422,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;
   }
@@ -4404,13 +4486,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;
   }
 }
 
@@ -4509,11 +4593,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.
@@ -4537,16 +4626,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
@@ -4554,7 +4647,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"] {
@@ -4590,17 +4685,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;
   }
 }
 
@@ -4636,7 +4739,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;
   }
 }
 
@@ -4730,11 +4833,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) {
@@ -4744,7 +4846,6 @@ dialog.drawer > form > header {
 @starting-style {
   .flyout.is-open {
     opacity: 0;
-    scale: 0.98;
   }
 }
 
@@ -4766,22 +4867,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);
   }
 }
@@ -4789,9 +4892,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;
   }
 }
@@ -4996,31 +5104,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;
   }
 }
@@ -5361,9 +5466,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. */
@@ -5467,9 +5577,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
@@ -5483,6 +5596,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.
@@ -5497,7 +5611,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);
 
@@ -5519,22 +5635,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 {
@@ -5934,15 +6060,18 @@ a.avatar[aria-disabled="true"] {
 
 /*
  * Fixed floating action placement and a native-details speed dial.
- * Button owns the action's size, shape, and intent; FAB only owns placement.
+ * Button owns the trigger's size, shape, and intent; FAB owns placement and
+ * the speed dial's structural open/close markers (--icon-plus / --icon-close).
  *
  * Public hooks:
  * --fab-offset
  * --fab-gap
+ * --fab-icon-size
  */
 .fab {
   --fab-offset: var(--space-40);
   --fab-gap: var(--space-20);
+  --fab-icon-size: 1.5rem;
 
   position: fixed;
   z-index: var(--z-menu);
@@ -5951,6 +6080,9 @@ a.avatar[aria-disabled="true"] {
 }
 
 .fab > summary {
+  /* Centers the toggle markers: the summary is the markers' positioned
+     context, not just the app-button class. */
+  position: relative;
   list-style: none;
   cursor: pointer;
 }
@@ -5959,11 +6091,35 @@ a.avatar[aria-disabled="true"] {
   display: none;
 }
 
-/* A lone decorative plus can communicate the open/close state without
-   requiring a second icon or JavaScript-managed content. */
-.fab > summary > [aria-hidden="true"]:only-child {
-  display: inline-block;
-  transition: transform var(--duration);
+/* The speed dial trigger is an icon-only toggle. FAB owns both structural
+   markers: masked pseudo-elements swap the shared plus (closed) and close
+   (open) glyphs at the same size, so the two states never drift apart. */
+.fab > summary::before,
+.fab > summary::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  inline-size: var(--fab-icon-size);
+  block-size: var(--fab-icon-size);
+  background: currentColor;
+  opacity: 0;
+  transform: scale(0.8);
+  transition:
+    opacity var(--duration),
+    transform var(--duration);
+}
+
+.fab > summary::before {
+  -webkit-mask: var(--icon-plus) center / contain no-repeat;
+  mask: var(--icon-plus) center / contain no-repeat;
+  opacity: 1;
+  transform: none;
+}
+
+.fab > summary::after {
+  -webkit-mask: var(--icon-close) center / contain no-repeat;
+  mask: var(--icon-close) center / contain no-repeat;
 }
 
 .fab-actions {
@@ -6021,8 +6177,14 @@ a.avatar[aria-disabled="true"] {
   transition-delay: 0s;
 }
 
-.fab[open] > summary > [aria-hidden="true"]:only-child {
-  transform: rotate(45deg);
+.fab[open] > summary::before {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.fab[open] > summary::after {
+  opacity: 1;
+  transform: none;
 }
 
 @media print {
@@ -6134,22 +6296,56 @@ a.avatar[aria-disabled="true"] {
 }
 
 /*
- * Steps — semantic ordered-list progression. One intrinsic layout: items fill
- * the row when they fit and hold a minimum width otherwise, so the sequence
- * scrolls horizontally only when it genuinely cannot fit. No breakpoint decides
- * this — the item minimum tracks the real content, not an arbitrary width.
+ * Steps — semantic ordered-list progression for a multi-step process.
+ *
+ * One primitive, two explicit compositions. Both classes are required:
+ *
+ *   <ol class="steps steps-horizontal">  horizontal, 2 to 5 stages
+ *   <ol class="steps steps-vertical">    vertical, any number of stages
+ *
+ * `.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.
+ *
+ * Orientation and labels are independent dimensions. `.step-label` is optional
+ * in either orientation; 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.
  *
- * Markers come from the list counter; state stays in .complete and
- * aria-current="step", so the component needs no runtime.
+ * 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.
+ *
+ * The framework never hides an authored label to solve a layout problem. A
+ * labelled row that outgrows its space scrolls. An `actual-container` size
+ * context buys it one thing: the wide representation, marker beside label.
+ *
+ * See docs/design-notes/steps.md for the threshold, the selector shapes, the
+ * rejected alternatives, and why there is no forced-colors branch.
+ *
+ * Each public hook is followed by the class that owns it.
  *
  * Public hooks:
- * --step-size
- * --step-min
- * --step-gap
- * --step-line-size
- * --step-marker-radius
- * --step-complete-mark
- * --step-connector
+ * --step-size              .steps
+ * --step-inline-gap        .steps
+ * --step-line-size         .steps
+ * --step-marker-radius     .steps
+ * --step-complete-mark     .steps
+ * --step-min               .steps-horizontal
+ * --step-gap               .steps-horizontal
+ * --step-connector         .steps-horizontal
+ * --step-inline-connector  .steps-horizontal
+ * --step-vertical-gap      .steps-vertical
  *
  * Internal:
  * --step-marker-bg
@@ -6157,10 +6353,12 @@ a.avatar[aria-disabled="true"] {
  * --step-marker-fg
  * --step-line
  */
+
+/* Step primitive --------------------------------------------------------- */
+
 .steps {
   --step-size: 1.75rem;
-  --step-min: 7rem;
-  --step-gap: var(--space-20);
+  --step-inline-gap: var(--space-20);
   --step-line-size: var(--border-width);
   --step-marker-bg: var(--surface);
   --step-marker-border: var(--border);
@@ -6170,29 +6368,14 @@ a.avatar[aria-disabled="true"] {
 
   counter-reset: actual-step;
   display: flex;
-  flex-direction: row;
-  inline-size: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
-  /* Fill when it fits, scroll when it cannot: items never shrink below
-     --step-min, so labels keep a readable width and the sequence scrolls
-     horizontally instead of squishing. overscroll-behavior keeps the scroll
-     from chaining to the page. */
-  overflow-x: auto;
-  overscroll-behavior-inline: contain;
 }
 
 .steps > li {
   position: relative;
-  display: grid;
-  flex: 1 0 var(--step-min);
-  grid-template-rows: var(--step-size) auto;
-  gap: var(--step-gap);
-  justify-items: center;
-  min-inline-size: max(var(--step-size), var(--step-min));
   color: var(--text-muted);
-  text-align: center;
   counter-increment: actual-step;
 }
 
@@ -6213,50 +6396,263 @@ a.avatar[aria-disabled="true"] {
   line-height: 1;
 }
 
-.steps > li::after {
-  content: "";
-  position: absolute;
-  inset-block-start: calc((var(--step-size) - var(--step-line-size)) / 2);
-  inset-inline-start: calc(50% + var(--step-size) / 2);
-  inline-size: calc(100% - var(--step-size));
-  block-size: var(--step-line-size);
-  /* A custom property resolves its var() before inheritance, so a default
-     --step-connector: var(--step-line) on .steps would freeze the parent line
-     color and a .complete child's connector would never follow its own line.
-     Falling back to the local --step-line here keeps each connector in sync;
-     an explicit --step-connector still wins when the author sets one. */
-  background: var(--step-connector, var(--step-line));
+/* The marker carries the state, so the label reads a notch below it — set on
+   the component, never per representation: a size that changed with the layout
+   would resize the text under a reader dragging a window. `color: inherit` is
+   here rather than in a rule of its own for `a.step-label`, because a span
+   inherits its ink anyway; only a link has anything to take back, and taking it
+   back for every label costs nothing and one rule less. A navigable label keeps
+   its underline, hover and focus ring — just not a link color, which would read
+   ahead of the marker states.
+
+   Scoped to `.steps`, unlike `.menu-item-text` and the framework's other
+   sub-part classes: a bare `.step-label` weighs (0,1,0), exactly tying
+   `.prose :where(a)`, so a stepper in prose would be decided by bundle order. */
+.steps .step-label {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+  color: inherit;
 }
 
-.steps > li:last-child::after {
-  content: none;
+/* Each composition gives the connector its own geometry and background, so the
+   only shared fact is which steps get one — every step but the last. Stated as
+   the condition rather than as a `content: none` rule undoing a `content: ""`
+   rule: a pseudo-element with no content generates no box, so a composition can
+   address `> li::after` freely and still not trail a line past the last step. */
+.steps > li:not(:last-child)::after {
+  content: "";
 }
 
-.steps > :is(.complete, [aria-current="step"]) {
+/* Prefixed like `.step-label`, unlike the framework's bare `.primary` /
+   `.outline` modifiers: those qualify a component on its own element, this
+   marks one item inside one. A bare `.complete` would also claim a very
+   ordinary English word globally, for a single component's single state. */
+.steps > .step-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 {
+/* Complete owns the accented connector that reaches the current step, so the
+   connector leaving current goes back to neutral. Declared after
+   .step-complete at equal specificity: current wins on every channel. */
+.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 > [aria-current="step"]::before {
   border-width: calc(var(--border-width) * 2);
 }
 
-.steps > .complete {
-  --step-line: var(--state-selected);
+/* 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);
 }
 
-/* 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 {
+.steps > .step-complete:not([aria-current="step"])::before {
   content: var(--step-complete-mark, counter(actual-step));
 }
 
+/* Horizontal ------------------------------------------------------------- */
+
+.steps-horizontal {
+  --step-min: 7rem;
+  --step-gap: var(--space-20);
+
+  inline-size: 100%;
+  overflow-x: auto;
+  /* Stated, never left to `overflow-x` alone: one scrolling axis computes the
+     other to `auto`, and a row hugs fractional content closely enough that a
+     rounding difference then raises a phantom vertical scrollbar. */
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+}
+
+/* A scroll container clips at the padding edge, so a navigable row reserves the
+   focus ring's own width and offset. Only this composition scrolls, and only a
+   link has a ring to protect. */
+.steps-horizontal:has(a[href]) {
+  padding-block: calc(var(--focus-outline-offset) + var(--border-width) * 2);
+}
+
+/* One explicit row, the marker's: a `.step-label` is auto-placed into an
+   implicit second row, and two tracks are also the only thing `gap` has to sit
+   between. So an empty step measures exactly `--step-size`, and the rule below
+   takes back nothing. `var(--step-size) auto` would build that second row
+   whether or not a label ever arrives, and the compact form would then have to
+   remove both the track and the gap. */
+.steps-horizontal > li {
+  display: grid;
+  flex: 1 0 var(--step-min);
+  grid-template-rows: var(--step-size);
+  gap: var(--step-gap);
+  justify-items: center;
+  min-inline-size: max(var(--step-size), var(--step-min));
+  text-align: center;
+}
+
+/* An empty step is a marker and nothing else, so it needs a marker's width
+   rather than a reading width. That is what lets five of them fit a phone with
+   no size context and no variant class.
+
+   `justify-items` is not an override of the row's centring: the marker is
+   centred because a label sits under it and the two share a centre, and with no
+   label there is nothing to centre against. The marker takes the start of its
+   own share instead, the connector below fills the rest of it, and the last
+   step has no share to fill — so the track runs edge to edge and lines up with
+   the text around it, the way the inline representation does.
+
+   `: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()`. */
+.steps-horizontal > li:empty {
+  flex: 1 1 0;
+  justify-items: start;
+  min-inline-size: var(--step-size);
+}
+
+.steps-horizontal > li:empty::after {
+  inset-inline-start: var(--step-size);
+}
+
+.steps-horizontal > li:empty:last-child {
+  flex: 0 0 auto;
+}
+
+/* The pseudo-element is marker-height so --step-connector may be any complete
+   background value. */
+.steps-horizontal > li::after {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: calc(50% + var(--step-size) / 2);
+  inline-size: calc(100% - var(--step-size));
+  block-size: var(--step-size);
+  background: var(
+    --step-connector,
+    linear-gradient(var(--step-line), var(--step-line)) center /
+    100% var(--step-line-size) no-repeat
+  );
+}
+
+/*
+ * 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.
+ *
+ * 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.
+ */
+@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;
+    }
+  }
+}
+
+/* Vertical --------------------------------------------------------------- */
+
+.steps-vertical {
+  --step-vertical-gap: var(--space-40);
+
+  flex-direction: column;
+  gap: var(--step-vertical-gap);
+}
+
+/* `justify-items` looks like a reset and is not one — nothing here resets
+   anything, since the horizontal rules never applied. Grid items blockify, so
+   without it a label stretches the whole 1fr track: 264px against 75px for an
+   `a.step-label`, a full-width focus ring the row does not give the same link. */
+.steps-vertical > li {
+  display: grid;
+  grid-template-columns: var(--step-size) minmax(0, 1fr);
+  align-items: start;
+  justify-items: start;
+  gap: var(--step-inline-gap);
+  min-block-size: var(--step-size);
+}
+
+/* An empty step is a marker rail. The column cannot use the row's implicit
+   second track, because `grid-auto-flow` is `row`: an auto-placed label would
+   land *under* its marker. Its second track is therefore explicit, and this
+   takes it back.
+
+   Silent in a stretched column, where the item fills its line whatever its
+   tracks say. It bites in a shrink-to-fit box — which is what a sticky
+   progress rail usually is — where the label track and the gap to it make the
+   rail `--step-inline-gap` wider than the markers it draws: measured 36px
+   against 28px. No `gap: 0` needed; one track has nothing to sit beside. */
+.steps-vertical > li:empty {
+  grid-template-columns: var(--step-size);
+}
+
+/* The row starts at the top so a wrapped label begins level with its marker.
+   align-self only bites on a single line, which would otherwise float above
+   the marker's centre.
+
+   The one `.step-label` rule that keeps a child combinator: `align-self` is a
+   grid-item property, so this declaration is meaningless on anything but a
+   direct child of the row. Elsewhere the label is addressed as a descendant —
+   the framework owns the structure, and repeating it buys nothing. */
+.steps-vertical > li > .step-label {
+  align-self: center;
+}
+
+/* The vertical track publishes no hook of its own: a horizontal connector value
+   cannot transpose onto this geometry, and this selector is already a reachable
+   override for the design that finally asks. */
+.steps-vertical > li::after {
+  position: absolute;
+  inset-block-start: var(--step-size);
+  inset-inline-start: calc((var(--step-size) - var(--step-line-size)) / 2);
+  inline-size: var(--step-line-size);
+  block-size: calc(100% - var(--step-size) + var(--step-vertical-gap));
+  background:
+    linear-gradient(var(--step-line), var(--step-line)) center / var(--step-line-size) 100%
+    no-repeat;
+}
+
 
 /* Navigation */
 /*
@@ -6658,6 +7054,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
@@ -6693,7 +7117,9 @@ a.avatar[aria-disabled="true"] {
 .list > li > .list-item {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
+  /* Regions align to the first line, so leading, title, and trailing controls
+     share one horizontal line while supporting text wraps beneath. */
+  align-items: start;
   gap: var(--list-item-gap);
   min-block-size: var(--list-item-min-size);
   padding-block: var(--list-item-pad-block);
@@ -6816,10 +7242,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 {
@@ -6834,6 +7268,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);
@@ -7009,12 +7462,23 @@ a.list-item:hover {
 /*
  * Decorative intent-colored frame for one direct child.
  *
+ * The effect is built from three layers with distinct roles: a frame carrying
+ * a short accent of light, a small halo that belongs to the frame and keeps
+ * that light attached to the edge, and a wide static halo that belongs to the
+ * object and gives it a permanent, diffuse presence. Only the small halo
+ * follows the animated gradient, so a rotating aura repaints one blurred layer
+ * per frame, not two.
+ *
  * Public hooks:
  * --aura-color
  * --aura-width
  * --aura-blur
+ * --aura-intensity
  * --aura-radius
  * --aura-duration
+ *
+ * Internal:
+ * --aura-angle
  */
 @property --aura-angle {
   syntax: "<angle>";
@@ -7031,7 +7495,8 @@ a.list-item:hover {
 .aura {
   --aura-color: var(--intent, var(--primary));
   --aura-width: 2px;
-  --aura-blur: 0.75rem;
+  --aura-blur: 0.25rem;
+  --aura-intensity: 1;
   --aura-radius: var(--radius-lg);
   --aura-duration: 6s;
 
@@ -7042,9 +7507,19 @@ a.list-item:hover {
   border-radius: calc(var(--aura-radius) + var(--aura-width));
   border: var(--border-width) solid transparent;
   background: var(--aura-color);
-  background: conic-gradient(from var(--aura-angle), transparent 0 65%, var(--aura-color));
+
+  /* A short feathered accent rather than a long wedge with a hard edge, which
+     reads as one lit side. Nothing tints the frame outside it: a constant tint
+     across 2px draws an outline, the opposite of the effect. */
+  background: conic-gradient(
+    from var(--aura-angle),
+    transparent 0 78%,
+    var(--aura-color) 93%,
+    transparent
+  );
 }
 
+/* Near halo — inherits the frame gradient, so it tracks the lit accent. */
 .aura::before {
   position: absolute;
   z-index: -1;
@@ -7052,15 +7527,40 @@ a.list-item:hover {
   border-radius: inherit;
   background: inherit;
   filter: blur(var(--aura-blur));
-  opacity: 0.45;
+  opacity: calc(0.55 * var(--aura-intensity));
   pointer-events: none;
   content: "";
 }
 
+/* Far halo — flat and static. At this blur the rotating detail is no longer
+   legible, so there is nothing to gain from animating a second wide blurred
+   layer. It outgrows the frame, otherwise the child covers it and the whole
+   effect reads as a drop shadow. This is the layer that stays lit at all
+   times, so it — not the frame — is what keeps the object present between two
+   passes of the accent. */
+.aura::after {
+  position: absolute;
+  z-index: -1;
+  inset: calc(-1 * var(--aura-blur));
+  border-radius: calc(var(--aura-radius) + var(--aura-width) + var(--aura-blur));
+  background: var(--aura-color);
+  filter: blur(calc(var(--aura-blur) * 4));
+  opacity: calc(0.15 * var(--aura-intensity));
+  pointer-events: none;
+  content: "";
+}
+
+/* Lifts the child above both halos. It also has to be opaque: the frame paints
+   across the whole box and only its edge is meant to show, so a transparent
+   child (an .outline alert, a .ghost button) is filled with the frame color
+   rather than framed by it. Documented as a constraint, not worked around —
+   masking a ring would cost more than the case is worth. */
 .aura > * {
   position: relative;
 }
 
+/* Glow lights the whole perimeter instead of a short accent, so both halos
+   become a single soft field around the child. */
 .aura-glow {
   background: var(--aura-color);
 }
@@ -7069,6 +7569,29 @@ a.list-item:hover {
   .aura:not(.aura-glow) {
     animation: aura-rotate var(--aura-duration) linear infinite;
   }
+
+  /* Both halos breathe: moving the near one alone changes a line's brightness,
+     which barely registers. Opening the wide field with it is what reads as a
+     breath. */
+  .aura-glow::before {
+    animation: aura-breathe-near var(--aura-duration) ease-in-out infinite;
+  }
+
+  .aura-glow::after {
+    animation: aura-breathe-far var(--aura-duration) ease-in-out infinite;
+  }
+}
+
+/* Without motion the accent would freeze at an arbitrary angle and read as a
+   broken animation, so it becomes a deliberate composition: two opposite
+   corners. Fixed radii keep those corners stable across aspect ratios;
+   proportional radii turn wide or tall elements into lit edges instead. */
+@media (prefers-reduced-motion: reduce) {
+  .aura:not(.aura-glow) {
+    background:
+      radial-gradient(4rem 4rem at 0% 0%, var(--aura-color), transparent 70%),
+      radial-gradient(4rem 4rem at 100% 100%, var(--aura-color), transparent 70%);
+  }
 }
 
 @keyframes aura-rotate {
@@ -7077,18 +7600,38 @@ a.list-item:hover {
   }
 }
 
-@supports selector(:has(*)) {
-  .aura:has(> .btn) {
-    --aura-radius: var(--radius);
+/* Only the peak is declared, so each halo breathes up from its own resting
+   opacity and never dips below the static glow. The peaks scale with the same
+   intensity as the resting values, which keeps the breath proportional at
+   every setting. */
+@keyframes aura-breathe-near {
+  50% {
+    opacity: calc(0.95 * var(--aura-intensity));
+    transform: scale(1.03);
   }
+}
 
-  .aura:has(> :is(.card, .alert)) {
-    --aura-radius: var(--radius-lg);
+@keyframes aura-breathe-far {
+  50% {
+    opacity: calc(0.28 * var(--aura-intensity));
+    transform: scale(1.07);
   }
+}
 
-  .aura:has(> .badge) {
-    --aura-radius: var(--radius-full);
-  }
+/* Each rule is a lone :has() setting a decorative radius, so a browser without
+   :has() simply drops it and keeps the default. No @supports needed — that
+   guard only earns its place around a selector list that mixes :has() with
+   selectors worth keeping. */
+.aura:has(> .btn) {
+  --aura-radius: var(--radius);
+}
+
+.aura:has(> :is(.card, .alert)) {
+  --aura-radius: var(--radius-lg);
+}
+
+.aura:has(> .badge) {
+  --aura-radius: var(--radius-full);
 }
 
 /* Utilities — small, single-purpose escape hatches. */
@@ -7112,6 +7655,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;
 }