actual-css 0.5.0 → 0.6.0

package/dist/actual.full.css

@@ -201,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).
@@ -1073,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
@@ -1084,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
@@ -1468,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
@@ -1491,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).
@@ -1507,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));
     }
@@ -2975,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);
@@ -3052,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.
  *
@@ -3101,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;
 }
@@ -3117,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);
@@ -3136,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);
@@ -6033,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);
@@ -6050,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;
 }
@@ -6058,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 {
@@ -6120,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 {
@@ -6233,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:
  *
- * Markers come from the list counter; state stays in .complete and
- * aria-current="step", so the component needs no runtime.
+ *                 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.
+ *
+ * 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
@@ -6256,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);
@@ -6269,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;
 }
 
@@ -6312,30 +6396,38 @@ 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: "";
 }
 
-/* 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 {
+/* 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);
@@ -6344,10 +6436,9 @@ a.avatar[aria-disabled="true"] {
   color: var(--text);
 }
 
-/* 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. */
+/* 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);
@@ -6357,31 +6448,211 @@ a.avatar[aria-disabled="true"] {
   color: var(--text);
 }
 
-/* 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. Excluded on the
-   current step so "current wins" holds on the glyph too, not only on color. */
-.steps > .complete:not([aria-current="step"])::before {
+/* 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);
+}
+
+.steps > .step-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;
+/* 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 */
 /*
@@ -6846,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);
@@ -7189,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>";
@@ -7211,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;
 
@@ -7222,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;
@@ -7232,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);
 }
@@ -7249,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 {
@@ -7257,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. */