actual-css 0.5.0 → 0.6.0

package/src/css/components/steps.css

@@ -1,20 +1,54 @@
 /*
- * 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.
  *
- * Markers come from the list counter; state stays in .complete and
- * aria-current="step", so the component needs no runtime.
+ * 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.
+ *
+ * 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
@@ -22,10 +56,12 @@
  * --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);
@@ -35,29 +71,14 @@
 
   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;
 }
 
@@ -78,30 +99,38 @@
   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);
@@ -110,10 +139,9 @@
   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);
@@ -123,27 +151,207 @@
   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;
+}

package/src/css/core/tokens.css

@@ -149,6 +149,7 @@
   --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).

package/src/css/effects/aura.css

@@ -1,12 +1,23 @@
 /*
  * 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>";
@@ -23,7 +34,8 @@
 .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;
 
@@ -34,9 +46,19 @@
   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;
@@ -44,15 +66,40 @@
   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);
 }
@@ -61,6 +108,29 @@
   .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 {
@@ -69,16 +139,36 @@
   }
 }
 
-@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);
 }

package/src/css/forms/custom-select.css

@@ -24,7 +24,7 @@
 
       &::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);

package/src/css/forms/floating-field.css

@@ -7,8 +7,10 @@
  * 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.
  *
@@ -56,14 +58,14 @@
 }
 
 /* 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;
 }
@@ -72,7 +74,7 @@
    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);
@@ -91,7 +93,7 @@
     .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);