material-plus-ui 1.5.0 → 1.7.0

package/dist/tailwind.css

@@ -128,7 +128,27 @@
      * `outline`, and a focus ring then reads as no change at all.
      */
     --mp-source-color: #00639b;
+  }
 
+  /*
+   * The light scheme's own tone stops, on `:root` and on anything that asks for
+   * light by name.
+   *
+   * The second selector is what makes forcing light **scoped** work. The dark
+   * block below applies to any element carrying the attribute, so a dark region
+   * inside a light page has always been one attribute; the reverse was not, and
+   * the documentation said it was. Under a system preference of dark, a
+   * `[data-mp-scheme='light']` on a section matched no rule at all — the media
+   * query had already retuned `:root`, the section inherited it, and nothing
+   * put the light stops back. It came out dark.
+   *
+   * `--mp-source-color` stays on `:root` alone and above this, deliberately.
+   * Repeating it here would freeze it: a consumer scoping a different source
+   * colour to a section would find this rule overriding theirs on any element
+   * that also asked for light.
+   */
+  :root,
+  [data-mp-scheme='light'] {
     /*
      * Tone stops.
      *
@@ -242,6 +262,59 @@
     --_mp-chroma-error: 0.1783;
     --_mp-hue-error: 28.7;
 
+    /*
+     * The chart ramp's lightness, one stop per slot.
+     *
+     * Eight slots, and the *only* thing that changes between the two schemes is
+     * this list: the hues are the same eight in both, because a series that
+     * changed hue when the page went dark would be a series a reader has to
+     * learn twice.
+     *
+     * These are not the accent tones. A chart's job for colour is identity — 
+     * telling one series from another — and MD3's accent stops are tuned for
+     * legibility of a *label on a fill*, which is a different question. Every
+     * number here was fitted rather than chosen: see the derivations below.
+     */
+    --_mp-tone-chart-1: 0.56;
+    --_mp-tone-chart-2: 0.44;
+    --_mp-tone-chart-3: 0.62;
+    --_mp-tone-chart-4: 0.44;
+    --_mp-tone-chart-5: 0.62;
+    --_mp-tone-chart-6: 0.44;
+    --_mp-tone-chart-7: 0.62;
+    --_mp-tone-chart-8: 0.5;
+
+    /*
+     * The sequential ramp, for a magnitude rather than an identity.
+     *
+     * One hue and five steps, because that is what a *quantity* wants. The eight
+     * slots above are an identity channel, and reading them as an order is the
+     * mistake this exists to prevent: nobody can say whether slot 6 is more than
+     * slot 3.
+     *
+     * The step nearest the surface decides where the ramp starts. It has to
+     * clear 2:1 against the page or the lowest cell of a heatmap is a hole
+     * rather than a reading, and that floor is what put the light end at 0.755
+     * rather than somewhere paler. The four checks are monotone lightness,
+     * adjacent steps at least 0.06 apart, that contrast, and one hue throughout;
+     * both schemes pass all four.
+     *
+     * The scheme flips the anchor rather than the hue. On a light page the ramp
+     * runs pale to deep and on a dark one deep to bright, because "more" is
+     * further from the page in both — a ramp that ran the same way in the dark
+     * would put its high end where the eye reads nothing.
+     */
+    --_mp-tone-chart-scale-1: 0.755;
+    --_mp-tone-chart-scale-2: 0.68;
+    --_mp-tone-chart-scale-3: 0.605;
+    --_mp-tone-chart-scale-4: 0.53;
+    --_mp-tone-chart-scale-5: 0.45;
+    --_mp-chroma-chart-scale-1: 0.06;
+    --_mp-chroma-chart-scale-2: 0.085;
+    --_mp-chroma-chart-scale-3: 0.11;
+    --_mp-chroma-chart-scale-4: 0.13;
+    --_mp-chroma-chart-scale-5: 0.15;
+
     /*
      * The chroma a whole palette carries, as opposed to the chroma one role of it
      * came out at. Deliberately *not* reassigned for the dark scheme below, and
@@ -313,6 +386,32 @@
       --_mp-tone-error: 0.834;
       --_mp-chroma-error: 0.0677;
       --_mp-hue-error: 22;
+
+      /* The chart ramp again — see the light block. The hues do not move; only
+         these do, because a dark surface needs the marks lighter to clear 3:1. */
+      --_mp-tone-chart-1: 0.56;
+      --_mp-tone-chart-2: 0.6;
+      --_mp-tone-chart-3: 0.64;
+      --_mp-tone-chart-4: 0.64;
+      --_mp-tone-chart-5: 0.56;
+      --_mp-tone-chart-6: 0.64;
+      --_mp-tone-chart-7: 0.64;
+      --_mp-tone-chart-8: 0.64;
+
+      /* The anchor flips: deep to bright, so "more" is still further from the
+         page. The low end sits at 0.405 for the same 2:1 reason the light one
+         sits at 0.755, measured against this scheme's surface rather than the
+         other's. */
+      --_mp-tone-chart-scale-1: 0.405;
+      --_mp-tone-chart-scale-2: 0.49;
+      --_mp-tone-chart-scale-3: 0.575;
+      --_mp-tone-chart-scale-4: 0.66;
+      --_mp-tone-chart-scale-5: 0.745;
+      --_mp-chroma-chart-scale-1: 0.06;
+      --_mp-chroma-chart-scale-2: 0.09;
+      --_mp-chroma-chart-scale-3: 0.115;
+      --_mp-chroma-chart-scale-4: 0.135;
+      --_mp-chroma-chart-scale-5: 0.15;
     }
   }
 
@@ -353,6 +452,28 @@
     --_mp-tone-error: 0.834;
     --_mp-chroma-error: 0.0677;
     --_mp-hue-error: 22;
+
+    /* The chart ramp again — see the light block. */
+    --_mp-tone-chart-1: 0.56;
+    --_mp-tone-chart-2: 0.6;
+    --_mp-tone-chart-3: 0.64;
+    --_mp-tone-chart-4: 0.64;
+    --_mp-tone-chart-5: 0.56;
+    --_mp-tone-chart-6: 0.64;
+    --_mp-tone-chart-7: 0.64;
+    --_mp-tone-chart-8: 0.64;
+
+    /* The dark scheme's ramp again, for a region forced dark. */
+    --_mp-tone-chart-scale-1: 0.405;
+    --_mp-tone-chart-scale-2: 0.49;
+    --_mp-tone-chart-scale-3: 0.575;
+    --_mp-tone-chart-scale-4: 0.66;
+    --_mp-tone-chart-scale-5: 0.745;
+    --_mp-chroma-chart-scale-1: 0.06;
+    --_mp-chroma-chart-scale-2: 0.09;
+    --_mp-chroma-chart-scale-3: 0.115;
+    --_mp-chroma-chart-scale-4: 0.135;
+    --_mp-chroma-chart-scale-5: 0.15;
   }
 
   /*
@@ -636,6 +757,85 @@
      */
     --_mp-color-scrim: var(--mp-sys-color-scrim, var(--md-sys-color-scrim, #000000));
 
+    /*
+     * The chart ramp: eight slots a series is handed in order.
+     *
+     * ## Why these are not derived from the source colour
+     *
+     * They were, first. Rotating eight hues off `--mp-source-color` is the
+     * obvious answer — it themes for free and it is one line per slot — and it
+     * does not survive being measured. Colour-vision deficiency collapses the
+     * red-green axis at *absolute* hues, so a ramp whose adjacent pairs are
+     * clear of that axis puts a different pair straight onto it the moment the
+     * whole thing is rotated. Fitted to the default seed and then re-checked
+     * against five others, the rotated ramp failed the protan/deutan separation
+     * for four of the five.
+     *
+     * So the hues are fixed and only the lightness follows the scheme. Slot one
+     * happens to be the default seed's own blue, which is why an untouched theme
+     * looks of a piece; that is where the resemblance ends, and it is on purpose.
+     * A series colour is an identity code rather than brand — nothing here is
+     * ever the background of a label, and `--_mp-color-on-surface` is what the
+     * text beside a mark wears.
+     *
+     * ## What "fitted" means
+     *
+     * Eight hues at least 30° apart, a chroma of 0.15 (browser-clamped per hue
+     * to whatever sRGB has), and a lightness per slot per scheme, searched until
+     * every one of these holds in both schemes:
+     *
+     * - lightness inside the readable band, chroma at or above 0.10, so a slot
+     *   never reads as grey;
+     * - every **adjacent** pair at ΔE 8 or better under protanopia and
+     *   deuteranopia — the fit clears 16.2 light and 13.7 dark;
+     * - every adjacent pair at ΔE 15 or better under ordinary vision, so the
+     *   ones a reader compares most are the easiest to tell apart — 26.5 and
+     *   20.6;
+     * - and 3:1 against the surface for all eight in both schemes.
+     *
+     * **Three is the cap where any two marks can touch** — a scatter, a bubble
+     * chart, a heatmap. Eight slots are pairwise-separable only to the third,
+     * and no ordering of eight can do better; that is a property of the colour
+     * space rather than of this palette. Past three, fold the tail into one
+     * "other" series or draw a second chart.
+     *
+     * A consumer overrides one with `--mp-chart-3`, exactly as they would a
+     * colour role — and owns the checks for it from that point.
+     */
+    --_mp-chart-1: var(--mp-chart-1, oklch(var(--_mp-tone-chart-1) 0.15 245));
+    --_mp-chart-2: var(--mp-chart-2, oklch(var(--_mp-tone-chart-2) 0.15 55));
+    --_mp-chart-3: var(--mp-chart-3, oklch(var(--_mp-tone-chart-3) 0.15 180));
+    --_mp-chart-4: var(--mp-chart-4, oklch(var(--_mp-tone-chart-4) 0.15 280));
+    --_mp-chart-5: var(--mp-chart-5, oklch(var(--_mp-tone-chart-5) 0.15 0));
+    --_mp-chart-6: var(--mp-chart-6, oklch(var(--_mp-tone-chart-6) 0.15 120));
+    --_mp-chart-7: var(--mp-chart-7, oklch(var(--_mp-tone-chart-7) 0.15 315));
+    --_mp-chart-8: var(--mp-chart-8, oklch(var(--_mp-tone-chart-8) 0.15 150));
+
+    /* The sequential ramp, on slot one's hue so a chart using both reads as one
+       family. Each step takes its own chroma as well as its own lightness: a
+       ramp at one chroma throughout goes grey at the pale end and muddy at the
+       deep one. */
+    --_mp-chart-scale-1: var(
+      --mp-chart-scale-1,
+      oklch(var(--_mp-tone-chart-scale-1) var(--_mp-chroma-chart-scale-1) 245)
+    );
+    --_mp-chart-scale-2: var(
+      --mp-chart-scale-2,
+      oklch(var(--_mp-tone-chart-scale-2) var(--_mp-chroma-chart-scale-2) 245)
+    );
+    --_mp-chart-scale-3: var(
+      --mp-chart-scale-3,
+      oklch(var(--_mp-tone-chart-scale-3) var(--_mp-chroma-chart-scale-3) 245)
+    );
+    --_mp-chart-scale-4: var(
+      --mp-chart-scale-4,
+      oklch(var(--_mp-tone-chart-scale-4) var(--_mp-chroma-chart-scale-4) 245)
+    );
+    --_mp-chart-scale-5: var(
+      --mp-chart-scale-5,
+      oklch(var(--_mp-tone-chart-scale-5) var(--_mp-chroma-chart-scale-5) 245)
+    );
+
     /* Not derived from the source colour. MD3's error palette is a fixed red
        regardless of the seed — an error that shifted hue with the brand would
        stop reading as an error. It still tracks the scheme, so it belongs here
@@ -792,6 +992,8 @@
     --shadow-mp-1: var(--mp-sys-elevation-level1);
     --shadow-mp-2: var(--mp-sys-elevation-level2);
     --shadow-mp-3: var(--mp-sys-elevation-level3);
+    --shadow-mp-4: var(--mp-sys-elevation-level4);
+    --shadow-mp-5: var(--mp-sys-elevation-level5);
 
     --ease-mp-standard: var(--mp-sys-motion-easing-standard);
   }
@@ -942,18 +1144,26 @@
     --mp-sys-shape-corner-full: 9999px;
 
     /*
-     * Elevation. Three of MD3's six levels, because three are what gets read: an
-     * elevated button rests at level 1 and rises to 2 under the pointer, a menu
-     * floats at level 2, and a dialog — which has taken the page rather than
-     * merely covered part of it — sits at level 3.
+     * Elevation. MD3's five raised levels, all of them, because `elevation` is a
+     * prop now and a caller who can name a level has to find it defined — a
+     * ladder with holes in it is worse than no ladder. The first three are what
+     * the components themselves read: an elevated button rests at 1 and rises to
+     * 2 under the pointer, a menu floats at 2, and a dialog — which has taken
+     * the page rather than merely covered part of it — sits at 3.
      *
-     * Both are the spec's own two-shadow recipe — a tight key shadow plus a wider
-     * ambient one — rather than one blurred box shadow. The pair is what makes a
-     * raised surface read as lit from above instead of as a sticker with a halo.
+     * Level 0 has no token because it is not a shadow. It is the absence of one,
+     * which CSS already spells `none`.
+     *
+     * Every one is the spec's own two-shadow recipe — a tight key shadow plus a
+     * wider ambient one — rather than one blurred box shadow. The pair is what
+     * makes a raised surface read as lit from above instead of as a sticker with
+     * a halo.
      */
     --mp-sys-elevation-level1: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
     --mp-sys-elevation-level2: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
     --mp-sys-elevation-level3: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 4px 8px 3px rgb(0 0 0 / 0.15);
+    --mp-sys-elevation-level4: 0 2px 3px 0 rgb(0 0 0 / 0.3), 0 6px 10px 4px rgb(0 0 0 / 0.15);
+    --mp-sys-elevation-level5: 0 4px 4px 0 rgb(0 0 0 / 0.3), 0 8px 12px 6px rgb(0 0 0 / 0.15);
 
     /*
      * Motion.
@@ -1176,10 +1386,66 @@
   --shadow-mp-1: var(--mp-sys-elevation-level1);
   --shadow-mp-2: var(--mp-sys-elevation-level2);
   --shadow-mp-3: var(--mp-sys-elevation-level3);
+  --shadow-mp-4: var(--mp-sys-elevation-level4);
+  --shadow-mp-5: var(--mp-sys-elevation-level5);
 
   --ease-mp-standard: var(--mp-sys-motion-easing-standard);
 }
 
+/* ---------------------------------------------------------------------------
+ * The window size classes
+ *
+ * Material's five, as variants: `@variant mp-medium` is what every width-driven
+ * rule in this file is written against, and `mp-medium:flex` is the same
+ * boundary for a consumer's own utilities — which until now was a block of CSS
+ * in the grid's documentation for a reader to copy into their own `@theme`.
+ *
+ * `compact` has no variant because its floor is nought. There is no window
+ * narrower than no window, and `mp-below-compact` could never match at all.
+ *
+ * ## Why not `--breakpoint-mp-*` in `@theme`
+ *
+ * Because that namespace is not only a variant. Tailwind's own `.container`
+ * utility is generated from every registered breakpoint, so four names there
+ * would quietly add four `max-width` steps to a class the consumer wrote and
+ * this library has nothing to do with — the same collision the `@theme` block
+ * above prefixes every one of its names to avoid, arriving through a namespace
+ * a prefix does not protect.
+ *
+ * A custom variant registers exactly one thing: the variant.
+ *
+ * ## Moving them
+ *
+ * A project that runs Tailwind itself can, by declaring the same name again
+ * after importing this file — the later definition wins:
+ *
+ *   @custom-variant mp-medium (@media (width >= 700px));
+ *   @custom-variant mp-below-medium (@media (width < 700px));
+ *
+ * Both halves, because the two are separate registrations rather than one
+ * boundary Tailwind derives a pair from. That moves the grid, the measures and
+ * the visibility rules together, and the application's own `mp-medium:` with
+ * them. A project on the compiled `styles.css` cannot: that file is Tailwind's
+ * output and the queries in it are already numbers.
+ *
+ * The JavaScript half of the same ladder is `WINDOW_MIN` in
+ * `src/internal/window-class.ts`, and the two have to agree — a hook that says
+ * `compact` where the stylesheet is laying out `medium` is a page arguing with
+ * itself. `test/styles/breakpoints.test.tsx` reads both and fails if they ever
+ * stop matching, and `MPConfigProvider`'s `breakpoints` is how an application
+ * that moved one here tells the JavaScript side.
+ * ------------------------------------------------------------------------- */
+
+@custom-variant mp-medium (@media (width >= 600px));
+@custom-variant mp-expanded (@media (width >= 840px));
+@custom-variant mp-large (@media (width >= 1200px));
+@custom-variant mp-extra-large (@media (width >= 1600px));
+
+@custom-variant mp-below-medium (@media (width < 600px));
+@custom-variant mp-below-expanded (@media (width < 840px));
+@custom-variant mp-below-large (@media (width < 1200px));
+@custom-variant mp-below-extra-large (@media (width < 1600px));
+
 /* ---------------------------------------------------------------------------
  * The layout grid
  *
@@ -1194,14 +1460,40 @@
  * `min(span, columns)` is the clamp: `span={99}` fills its row instead of
  * running off the page, which is what the caller meant.
  *
- * Every slot cascades upward — each window size class falls back through the
- * ones below it — so `span={{ expanded: 6 }}` sets one custom property and not
- * five. The chains get long at `extra-large`; that is the cost of keeping the
- * DOM lean, and it is paid once here rather than on every grid item in a
- * consumer's application.
+ * `span="grow"` is the one width that is not this arithmetic. It is the row's
+ * remainder, which nothing here can compute — only the flex algorithm knows what
+ * is left after the other items have been laid out — so a growing item is given
+ * a width of nought and a `flex-grow` of one, and takes the rest.
+ *
+ * ## The rungs
+ *
+ * A responsive prop writes only the classes the caller named — `span={{ expanded: 6 }}`
+ * is one custom property and not five — which keeps the inline style on a grid
+ * item down to what was asked for, and leaves the stylesheet to fill the gaps.
+ * Every class therefore has to fall back through every class below it.
+ *
+ * Written as one `var()` chain per class that is five levels deep by
+ * `extra-large` and repeated in full in every media block, which is a shape with
+ * two problems: the reader cannot check it, and inserting a class means
+ * rewriting every chain in the file.
+ *
+ * So the fallback is a **ladder**. `--_mp-cols-0` is what the compact slot says,
+ * `--_mp-cols-1` is the medium slot *or the rung below it*, and a media query
+ * moves exactly one rung. The index is the class's place in `WINDOW_CLASSES` —
+ * `src/internal/window-class.ts` — so `-0` is compact and `-3` is large; the top
+ * rung is `extra-large` and takes the plain name, because that is the one the
+ * arithmetic reads and a fifth alias would be a rung to nowhere.
+ *
+ * Every fallback is then one level deep however high the ladder goes, and adding
+ * a responsive prop anywhere in the library is this same shape again rather than
+ * five chains of five.
+ *
+ * ## The widths
  *
- * The widths are **MD3's window size classes** — 600, 840, 1200 and 1600dp —
- * and not Tailwind's breakpoints. See `MPWindowClass` in `src/types.ts`.
+ * `@variant mp-medium` rather than `@media (width >= 600px)`, so the four
+ * boundaries are read from the `@theme` block above rather than written out here
+ * a second time — and a project that runs Tailwind can move them. See the note
+ * on the breakpoints for what that does and does not reach.
  *
  * Unlayered, like the two animation classes below and for the same reason: a
  * layered rule loses to every unlayered one, and a consumer's own page styling
@@ -1209,136 +1501,379 @@
  * an application's stylesheet is not a grid.
  * ------------------------------------------------------------------------- */
 
+/*
+ * The flex container's five axes, each of them resolved per window size class.
+ *
+ * The same four-step fallback the grid's slots use, and for the same reason: a
+ * responsive prop writes only the classes a caller named, so each step falls
+ * back to the one below it and the whole ladder falls back to the property's own
+ * default. `direction={{ compact: 'column', medium: 'row' }}` is two slots, and
+ * a window crossing 600dp changes the layout with nothing re-rendering.
+ *
+ * The `initial` block is the boundary a nested flex needs, exactly as a nested
+ * grid does: these are inline custom properties and a custom property inherits,
+ * so an inner flex that only declared `--_mp-flex-dir-compact` would otherwise
+ * resolve its parent's `--_mp-flex-dir-large` at every class above compact — a
+ * row that is told `row` and comes out a column on a laptop.
+ */
+.mp-flex {
+  --_mp-flex-dir-0: var(--_mp-flex-dir-compact, row);
+  --_mp-flex-dir-1: var(--_mp-flex-dir-0);
+  --_mp-flex-dir-2: var(--_mp-flex-dir-1);
+  --_mp-flex-dir-3: var(--_mp-flex-dir-2);
+  --_mp-flex-dir: var(--_mp-flex-dir-3);
+
+  --_mp-flex-wrap-0: var(--_mp-flex-wrap-compact, nowrap);
+  --_mp-flex-wrap-1: var(--_mp-flex-wrap-0);
+  --_mp-flex-wrap-2: var(--_mp-flex-wrap-1);
+  --_mp-flex-wrap-3: var(--_mp-flex-wrap-2);
+  --_mp-flex-wrap: var(--_mp-flex-wrap-3);
+
+  --_mp-flex-justify-0: var(--_mp-flex-justify-compact, flex-start);
+  --_mp-flex-justify-1: var(--_mp-flex-justify-0);
+  --_mp-flex-justify-2: var(--_mp-flex-justify-1);
+  --_mp-flex-justify-3: var(--_mp-flex-justify-2);
+  --_mp-flex-justify: var(--_mp-flex-justify-3);
+
+  --_mp-flex-align-0: var(--_mp-flex-align-compact, stretch);
+  --_mp-flex-align-1: var(--_mp-flex-align-0);
+  --_mp-flex-align-2: var(--_mp-flex-align-1);
+  --_mp-flex-align-3: var(--_mp-flex-align-2);
+  --_mp-flex-align: var(--_mp-flex-align-3);
+
+  --_mp-flex-gap-0: var(--_mp-flex-gap-compact, 0px);
+  --_mp-flex-gap-1: var(--_mp-flex-gap-0);
+  --_mp-flex-gap-2: var(--_mp-flex-gap-1);
+  --_mp-flex-gap-3: var(--_mp-flex-gap-2);
+  --_mp-flex-gap: var(--_mp-flex-gap-3);
+
+  --_mp-flex-dir-compact: initial;
+  --_mp-flex-dir-medium: initial;
+  --_mp-flex-dir-expanded: initial;
+  --_mp-flex-dir-large: initial;
+  --_mp-flex-dir-extra-large: initial;
+  --_mp-flex-wrap-compact: initial;
+  --_mp-flex-wrap-medium: initial;
+  --_mp-flex-wrap-expanded: initial;
+  --_mp-flex-wrap-large: initial;
+  --_mp-flex-wrap-extra-large: initial;
+  --_mp-flex-justify-compact: initial;
+  --_mp-flex-justify-medium: initial;
+  --_mp-flex-justify-expanded: initial;
+  --_mp-flex-justify-large: initial;
+  --_mp-flex-justify-extra-large: initial;
+  --_mp-flex-align-compact: initial;
+  --_mp-flex-align-medium: initial;
+  --_mp-flex-align-expanded: initial;
+  --_mp-flex-align-large: initial;
+  --_mp-flex-align-extra-large: initial;
+  --_mp-flex-gap-compact: initial;
+  --_mp-flex-gap-medium: initial;
+  --_mp-flex-gap-expanded: initial;
+  --_mp-flex-gap-large: initial;
+  --_mp-flex-gap-extra-large: initial;
+
+  flex-direction: var(--_mp-flex-dir);
+  flex-wrap: var(--_mp-flex-wrap);
+  justify-content: var(--_mp-flex-justify);
+  align-items: var(--_mp-flex-align);
+  gap: var(--_mp-flex-gap);
+
+  @variant mp-medium {
+    --_mp-flex-dir-1: var(--_mp-flex-dir-medium, var(--_mp-flex-dir-0));
+    --_mp-flex-wrap-1: var(--_mp-flex-wrap-medium, var(--_mp-flex-wrap-0));
+    --_mp-flex-justify-1: var(--_mp-flex-justify-medium, var(--_mp-flex-justify-0));
+    --_mp-flex-align-1: var(--_mp-flex-align-medium, var(--_mp-flex-align-0));
+    --_mp-flex-gap-1: var(--_mp-flex-gap-medium, var(--_mp-flex-gap-0));
+  }
+
+  @variant mp-expanded {
+    --_mp-flex-dir-2: var(--_mp-flex-dir-expanded, var(--_mp-flex-dir-1));
+    --_mp-flex-wrap-2: var(--_mp-flex-wrap-expanded, var(--_mp-flex-wrap-1));
+    --_mp-flex-justify-2: var(--_mp-flex-justify-expanded, var(--_mp-flex-justify-1));
+    --_mp-flex-align-2: var(--_mp-flex-align-expanded, var(--_mp-flex-align-1));
+    --_mp-flex-gap-2: var(--_mp-flex-gap-expanded, var(--_mp-flex-gap-1));
+  }
+
+  @variant mp-large {
+    --_mp-flex-dir-3: var(--_mp-flex-dir-large, var(--_mp-flex-dir-2));
+    --_mp-flex-wrap-3: var(--_mp-flex-wrap-large, var(--_mp-flex-wrap-2));
+    --_mp-flex-justify-3: var(--_mp-flex-justify-large, var(--_mp-flex-justify-2));
+    --_mp-flex-align-3: var(--_mp-flex-align-large, var(--_mp-flex-align-2));
+    --_mp-flex-gap-3: var(--_mp-flex-gap-large, var(--_mp-flex-gap-2));
+  }
+
+  @variant mp-extra-large {
+    --_mp-flex-dir: var(--_mp-flex-dir-extra-large, var(--_mp-flex-dir-3));
+    --_mp-flex-wrap: var(--_mp-flex-wrap-extra-large, var(--_mp-flex-wrap-3));
+    --_mp-flex-justify: var(--_mp-flex-justify-extra-large, var(--_mp-flex-justify-3));
+    --_mp-flex-align: var(--_mp-flex-align-extra-large, var(--_mp-flex-align-3));
+    --_mp-flex-gap: var(--_mp-flex-gap-extra-large, var(--_mp-flex-gap-3));
+  }
+}
+
 .mp-grid {
-  --_mp-cols: var(--_mp-cols-compact, 12);
-  --_mp-gap-x: var(--_mp-gap-x-compact, 0px);
-  --_mp-gap-y: var(--_mp-gap-y-compact, 0px);
+  --_mp-cols-0: var(--_mp-cols-compact, 12);
+  --_mp-cols-1: var(--_mp-cols-0);
+  --_mp-cols-2: var(--_mp-cols-1);
+  --_mp-cols-3: var(--_mp-cols-2);
+  --_mp-cols: var(--_mp-cols-3);
+
+  --_mp-gap-x-0: var(--_mp-gap-x-compact, 0px);
+  --_mp-gap-x-1: var(--_mp-gap-x-0);
+  --_mp-gap-x-2: var(--_mp-gap-x-1);
+  --_mp-gap-x-3: var(--_mp-gap-x-2);
+  --_mp-gap-x: var(--_mp-gap-x-3);
+
+  --_mp-gap-y-0: var(--_mp-gap-y-compact, 0px);
+  --_mp-gap-y-1: var(--_mp-gap-y-0);
+  --_mp-gap-y-2: var(--_mp-gap-y-1);
+  --_mp-gap-y-3: var(--_mp-gap-y-2);
+  --_mp-gap-y: var(--_mp-gap-y-3);
+
+  /* The boundary, and the reason it has to exist.
+   *
+   * The slots are inline custom properties, and a custom property *inherits*. So
+   * a grid nested inside an item — which is how nesting is spelled — sits inside
+   * that item's `--_mp-span-large`, and an inner item that only declared
+   * `--_mp-span-compact` resolves the outer one at every class above compact:
+   * `span={12}` comes out a sixth of the row it is actually in, and the card
+   * whose title it holds wraps a letter at a time.
+   *
+   * A grid is where a span stops meaning anything, so a grid is where the slots
+   * are put back to nothing. `initial` on a custom property is the guaranteed-
+   * invalid value, which is what makes the `var()` fallbacks above take over
+   * rather than a number from two levels up. Thirty declarations, once per grid,
+   * and the arithmetic under them is the same as it was.
+   *
+   * The grid's own three are here for the same reason the item's three are, and
+   * were missing: a responsive prop writes only the classes the caller named, so
+   * `columns={6}` on an inner grid is one slot — and an outer
+   * `columns={{ compact: 4, medium: 12 }}` was still being resolved by the inner
+   * grid at every class above compact. Six columns on a phone and twelve on a
+   * laptop, from a grid that was told six.
+   *
+   * Written on `.mp-grid` rather than on `.mp-grid-item` because an item that
+   * reset its own slots would be resetting the ones it had just been given. The
+   * grid resetting its own is not the same thing: the value it goes on to use
+   * arrives in the `style` attribute, which beats a class either way. */
+  --_mp-cols-compact: initial;
+  --_mp-cols-medium: initial;
+  --_mp-cols-expanded: initial;
+  --_mp-cols-large: initial;
+  --_mp-cols-extra-large: initial;
+  --_mp-gap-x-compact: initial;
+  --_mp-gap-x-medium: initial;
+  --_mp-gap-x-expanded: initial;
+  --_mp-gap-x-large: initial;
+  --_mp-gap-x-extra-large: initial;
+  --_mp-gap-y-compact: initial;
+  --_mp-gap-y-medium: initial;
+  --_mp-gap-y-expanded: initial;
+  --_mp-gap-y-large: initial;
+  --_mp-gap-y-extra-large: initial;
+  --_mp-span-compact: initial;
+  --_mp-span-medium: initial;
+  --_mp-span-expanded: initial;
+  --_mp-span-large: initial;
+  --_mp-span-extra-large: initial;
+  --_mp-offset-compact: initial;
+  --_mp-offset-medium: initial;
+  --_mp-offset-expanded: initial;
+  --_mp-offset-large: initial;
+  --_mp-offset-extra-large: initial;
+  --_mp-grow-compact: initial;
+  --_mp-grow-medium: initial;
+  --_mp-grow-expanded: initial;
+  --_mp-grow-large: initial;
+  --_mp-grow-extra-large: initial;
+
+  @variant mp-medium {
+    --_mp-cols-1: var(--_mp-cols-medium, var(--_mp-cols-0));
+    --_mp-gap-x-1: var(--_mp-gap-x-medium, var(--_mp-gap-x-0));
+    --_mp-gap-y-1: var(--_mp-gap-y-medium, var(--_mp-gap-y-0));
+  }
+
+  @variant mp-expanded {
+    --_mp-cols-2: var(--_mp-cols-expanded, var(--_mp-cols-1));
+    --_mp-gap-x-2: var(--_mp-gap-x-expanded, var(--_mp-gap-x-1));
+    --_mp-gap-y-2: var(--_mp-gap-y-expanded, var(--_mp-gap-y-1));
+  }
+
+  @variant mp-large {
+    --_mp-cols-3: var(--_mp-cols-large, var(--_mp-cols-2));
+    --_mp-gap-x-3: var(--_mp-gap-x-large, var(--_mp-gap-x-2));
+    --_mp-gap-y-3: var(--_mp-gap-y-large, var(--_mp-gap-y-2));
+  }
+
+  @variant mp-extra-large {
+    --_mp-cols: var(--_mp-cols-extra-large, var(--_mp-cols-3));
+    --_mp-gap-x: var(--_mp-gap-x-extra-large, var(--_mp-gap-x-3));
+    --_mp-gap-y: var(--_mp-gap-y-extra-large, var(--_mp-gap-y-3));
+  }
 }
 
 .mp-grid-item {
-  --_mp-span: var(--_mp-span-compact, var(--_mp-cols, 12));
-  --_mp-offset: var(--_mp-offset-compact, 0);
+  --_mp-span-0: var(--_mp-span-compact, var(--_mp-cols, 12));
+  --_mp-span-1: var(--_mp-span-0);
+  --_mp-span-2: var(--_mp-span-1);
+  --_mp-span-3: var(--_mp-span-2);
+  --_mp-span: var(--_mp-span-3);
+
+  --_mp-offset-0: var(--_mp-offset-compact, 0);
+  --_mp-offset-1: var(--_mp-offset-0);
+  --_mp-offset-2: var(--_mp-offset-1);
+  --_mp-offset-3: var(--_mp-offset-2);
+  --_mp-offset: var(--_mp-offset-3);
+
+  --_mp-grow-0: var(--_mp-grow-compact, 0);
+  --_mp-grow-1: var(--_mp-grow-0);
+  --_mp-grow-2: var(--_mp-grow-1);
+  --_mp-grow-3: var(--_mp-grow-2);
+  --_mp-grow: var(--_mp-grow-3);
 
   /* One column plus one gutter. `--_mp-cols` and `--_mp-gap-x` are inherited
      from the grid, so this re-resolves on its own at every window class. */
   --_mp-track: calc((100% + var(--_mp-gap-x, 0px)) / var(--_mp-cols, 12));
 
-  /* Inseparable from the width under them: `flex` stops the row resizing the
-     item, `min-width` stops a long unbroken word doing the same, and
-     `box-sizing` is what makes the percentage mean the whole item. */
+  /* Inseparable from the width under them: the three `flex` longhands stop the
+     row resizing the item, `min-width` stops a long unbroken word doing the
+     same, and `box-sizing` is what makes the percentage mean the whole item.
+
+     Longhands rather than `flex: 0 0 auto` because `--_mp-grow` is the one part
+     of the shorthand that varies, and a shorthand cannot be half a variable. */
   box-sizing: border-box;
-  flex: 0 0 auto;
+  flex-grow: var(--_mp-grow);
+  flex-shrink: 0;
+  flex-basis: auto;
   min-width: 0;
-  width: calc(var(--_mp-track) * min(var(--_mp-span), var(--_mp-cols, 12)) - var(--_mp-gap-x, 0px));
-  margin-inline-start: calc(var(--_mp-track) * min(var(--_mp-offset), var(--_mp-cols, 12)));
-}
 
-@media (width >= 600px) {
-  .mp-grid {
-    --_mp-cols: var(--_mp-cols-medium, var(--_mp-cols-compact, 12));
-    --_mp-gap-x: var(--_mp-gap-x-medium, var(--_mp-gap-x-compact, 0px));
-    --_mp-gap-y: var(--_mp-gap-y-medium, var(--_mp-gap-y-compact, 0px));
+  /* `1 - grow` is the switch, and it is arithmetic rather than a second
+     declaration because a custom property cannot choose between two rules.
+     A growing item measures nought and is then handed the row's remainder by
+     `flex-grow`, which is the only place that remainder is known; every other
+     item multiplies its column count by one and is the width it always was. */
+  width: calc(
+    (1 - var(--_mp-grow)) *
+      (var(--_mp-track) * min(var(--_mp-span), var(--_mp-cols, 12)) - var(--_mp-gap-x, 0px))
+  );
+
+  @variant mp-medium {
+    --_mp-span-1: var(--_mp-span-medium, var(--_mp-span-0));
+    --_mp-offset-1: var(--_mp-offset-medium, var(--_mp-offset-0));
+    --_mp-grow-1: var(--_mp-grow-medium, var(--_mp-grow-0));
   }
 
-  .mp-grid-item {
-    --_mp-span: var(--_mp-span-medium, var(--_mp-span-compact, var(--_mp-cols, 12)));
-    --_mp-offset: var(--_mp-offset-medium, var(--_mp-offset-compact, 0));
+  @variant mp-expanded {
+    --_mp-span-2: var(--_mp-span-expanded, var(--_mp-span-1));
+    --_mp-offset-2: var(--_mp-offset-expanded, var(--_mp-offset-1));
+    --_mp-grow-2: var(--_mp-grow-expanded, var(--_mp-grow-1));
   }
-}
 
-@media (width >= 840px) {
-  .mp-grid {
-    --_mp-cols: var(--_mp-cols-expanded, var(--_mp-cols-medium, var(--_mp-cols-compact, 12)));
-    --_mp-gap-x: var(--_mp-gap-x-expanded, var(--_mp-gap-x-medium, var(--_mp-gap-x-compact, 0px)));
-    --_mp-gap-y: var(--_mp-gap-y-expanded, var(--_mp-gap-y-medium, var(--_mp-gap-y-compact, 0px)));
+  @variant mp-large {
+    --_mp-span-3: var(--_mp-span-large, var(--_mp-span-2));
+    --_mp-offset-3: var(--_mp-offset-large, var(--_mp-offset-2));
+    --_mp-grow-3: var(--_mp-grow-large, var(--_mp-grow-2));
   }
 
-  .mp-grid-item {
-    --_mp-span: var(
-      --_mp-span-expanded,
-      var(--_mp-span-medium, var(--_mp-span-compact, var(--_mp-cols, 12)))
-    );
-    --_mp-offset: var(
-      --_mp-offset-expanded,
-      var(--_mp-offset-medium, var(--_mp-offset-compact, 0))
-    );
+  @variant mp-extra-large {
+    --_mp-span: var(--_mp-span-extra-large, var(--_mp-span-3));
+    --_mp-offset: var(--_mp-offset-extra-large, var(--_mp-offset-3));
+    --_mp-grow: var(--_mp-grow-extra-large, var(--_mp-grow-3));
   }
 }
 
-@media (width >= 1200px) {
-  .mp-grid {
-    --_mp-cols: var(
-      --_mp-cols-large,
-      var(--_mp-cols-expanded, var(--_mp-cols-medium, var(--_mp-cols-compact, 12)))
-    );
-    --_mp-gap-x: var(
-      --_mp-gap-x-large,
-      var(--_mp-gap-x-expanded, var(--_mp-gap-x-medium, var(--_mp-gap-x-compact, 0px)))
-    );
-    --_mp-gap-y: var(
-      --_mp-gap-y-large,
-      var(--_mp-gap-y-expanded, var(--_mp-gap-y-medium, var(--_mp-gap-y-compact, 0px)))
-    );
+/* The offset, on the items that asked for one and no others.
+   `MPGridItem` writes the attribute when an `offset` was passed at all, an
+   explicit `0` included.
+
+   Written unconditionally on `.mp-grid-item` this resolved to `0px` for
+   everybody else — and a declaration of nought is still a declaration. These
+   rules are unlayered, so it beat a caller's own `m-6`, on the inline-start side
+   and on that side alone. Three quarters of a margin is about the hardest thing
+   there is to look at and see. */
+.mp-grid-item[data-mp-offset] {
+  margin-inline-start: calc(var(--_mp-track) * min(var(--_mp-offset), var(--_mp-cols, 12)));
+}
+
+/* ---------------------------------------------------------------------------
+ * The measure
+ *
+ * How wide content is allowed to get, on `MPContainer`, `MPHeader` and
+ * `MPFooter`. The same rungs the grid uses and for the same two reasons: the
+ * value is a length a caller picks at runtime, which Tailwind cannot generate a
+ * class for, and it changes at a window size class, which a media query resolves
+ * without anything re-rendering.
+ *
+ * `none` is the base fallback rather than a width, so an element carrying this
+ * class with nothing set is unbounded — which is what `max-width: none` means
+ * and what a container with no `maxWidth` has always been.
+ *
+ * The slots are reset here for the reason `.mp-grid` resets its own: a container
+ * inside a container, or a header inside either, is the ordinary shape of a page
+ * and the slots inherit. An inner `maxWidth="sm"` writes one declaration, and
+ * without the reset it would resolve the outer element's at every class above
+ * compact — a card that is 600px wide on a phone and 1200 on a laptop, from a
+ * component that was told 600.
+ * ------------------------------------------------------------------------- */
+
+.mp-measure {
+  --_mp-measure-0: var(--_mp-measure-compact, none);
+  --_mp-measure-1: var(--_mp-measure-0);
+  --_mp-measure-2: var(--_mp-measure-1);
+  --_mp-measure-3: var(--_mp-measure-2);
+  --_mp-measure: var(--_mp-measure-3);
+
+  --_mp-measure-compact: initial;
+  --_mp-measure-medium: initial;
+  --_mp-measure-expanded: initial;
+  --_mp-measure-large: initial;
+  --_mp-measure-extra-large: initial;
+
+  max-width: var(--_mp-measure);
+
+  @variant mp-medium {
+    --_mp-measure-1: var(--_mp-measure-medium, var(--_mp-measure-0));
   }
 
-  .mp-grid-item {
-    --_mp-span: var(
-      --_mp-span-large,
-      var(--_mp-span-expanded, var(--_mp-span-medium, var(--_mp-span-compact, var(--_mp-cols, 12))))
-    );
-    --_mp-offset: var(
-      --_mp-offset-large,
-      var(--_mp-offset-expanded, var(--_mp-offset-medium, var(--_mp-offset-compact, 0)))
-    );
+  @variant mp-expanded {
+    --_mp-measure-2: var(--_mp-measure-expanded, var(--_mp-measure-1));
   }
-}
 
-@media (width >= 1600px) {
-  .mp-grid {
-    --_mp-cols: var(
-      --_mp-cols-extra-large,
-      var(
-        --_mp-cols-large,
-        var(--_mp-cols-expanded, var(--_mp-cols-medium, var(--_mp-cols-compact, 12)))
-      )
-    );
-    --_mp-gap-x: var(
-      --_mp-gap-x-extra-large,
-      var(
-        --_mp-gap-x-large,
-        var(--_mp-gap-x-expanded, var(--_mp-gap-x-medium, var(--_mp-gap-x-compact, 0px)))
-      )
-    );
-    --_mp-gap-y: var(
-      --_mp-gap-y-extra-large,
-      var(
-        --_mp-gap-y-large,
-        var(--_mp-gap-y-expanded, var(--_mp-gap-y-medium, var(--_mp-gap-y-compact, 0px)))
-      )
-    );
+  @variant mp-large {
+    --_mp-measure-3: var(--_mp-measure-large, var(--_mp-measure-2));
   }
 
-  .mp-grid-item {
-    --_mp-span: var(
-      --_mp-span-extra-large,
-      var(
-        --_mp-span-large,
-        var(
-          --_mp-span-expanded,
-          var(--_mp-span-medium, var(--_mp-span-compact, var(--_mp-cols, 12)))
-        )
-      )
-    );
-    --_mp-offset: var(
-      --_mp-offset-extra-large,
-      var(
-        --_mp-offset-large,
-        var(--_mp-offset-expanded, var(--_mp-offset-medium, var(--_mp-offset-compact, 0)))
-      )
-    );
+  @variant mp-extra-large {
+    --_mp-measure: var(--_mp-measure-extra-large, var(--_mp-measure-3));
   }
 }
 
+/* ---------------------------------------------------------------------------
+ * Showing at some widths and not others
+ *
+ * The hiding itself is Tailwind's own `hidden` under the variants registered
+ * above — `mp-below-medium:hidden` and its mirror — so there is nothing to write
+ * here for it. `internal/visibility.ts` holds the ten class names, `MPShow` puts
+ * them on, and a consumer can spell the same ones on an element of their own.
+ *
+ * What does need a rule is the wrapper, and only so that there is not one. An
+ * `MPShow` has to be an element — a media query needs something to apply to —
+ * and an element in the middle of a flex row is a flex item that its children
+ * are not. `display: contents` is that element taking no part in the layout: the
+ * children become the items, exactly as if the wrapper were not written.
+ *
+ * `:where()` is the whole of why this is safe to do. The declaration lands at
+ * zero specificity, so a `className` of the caller's own that sets a display —
+ * `flex`, `block`, anything — beats it without a fight, while `hidden`, which is
+ * a real class, still beats both. A wrapper that insisted on `contents` would be
+ * a component that quietly refused to be a box.
+ * ------------------------------------------------------------------------- */
+
+:where(.mp-show) {
+  display: contents;
+}
+
 /* ---------------------------------------------------------------------------
  * Keyframes
  *
@@ -1570,6 +2105,218 @@
   }
 }
 
+/* ---------------------------------------------------------------------------
+ * A row arriving in a list
+ *
+ * Two components put rows into a list the reader is already looking at.
+ * `MPTransfer` moves them between its two panels; `MPFilePicker` adds them as
+ * files are chosen or dropped. In both the row simply existed in the next
+ * frame, which on a list of near-identical lines is the one change hardest to
+ * see — a reader who dropped four files onto a list that already had six had
+ * nothing telling them which four were new.
+ *
+ * A keyframe rather than a transition, for the reason the calendar's page turn
+ * above is one: there are no two states to interpolate between. The row was not
+ * there, and a transition needs something that was.
+ *
+ * ## It needs no bookkeeping to run once
+ *
+ * A CSS animation runs when the element it is on is inserted, so a class on
+ * every row animates only the rows the browser has just created. What each
+ * component still has to decide is which rows *count* as arriving: adding the
+ * class to a row that is already on the page starts the animation on it, so a
+ * class written unconditionally would replay the whole list the first time the
+ * set changed. Both components keep the set of values that just landed and put
+ * the class on those.
+ *
+ * ## Why it does not say which way the row came
+ *
+ * `MPTransfer`'s rows arrive from a panel that is physically to one side, and a
+ * slide from that side would say so — the argument the calendar's page turn
+ * makes about direction. It is not worth what it costs here: `translate` is
+ * physical, so the sign has to be flipped under RTL by reading the computed
+ * direction off the element, and it would be a slot `MPFilePicker` has no
+ * answer for. A rise settles a row into a list in either writing direction and
+ * says the one thing both components need said.
+ *
+ * Unlayered, like the keyframes above, and switched off for a reader who asked
+ * for less motion. What is left then is the row appearing, which is where this
+ * started.
+ * ------------------------------------------------------------------------- */
+
+@keyframes mp-row-arrive {
+  from {
+    opacity: 0;
+    translate: 0 0.25rem;
+  }
+}
+
+.mp-row-arrive {
+  animation: mp-row-arrive var(--mp-sys-motion-duration-short4)
+    var(--mp-sys-motion-easing-emphasized-decelerate);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mp-row-arrive {
+    animation: none;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * A field's supporting line
+ *
+ * The line under a control is drawn only when there is something to say, so a
+ * field that turned invalid grew by a line of text between one frame and the
+ * next — and everything under it on the page moved down by that much. On a form
+ * validated on blur that is the whole page stepping as the reader tabs through
+ * it, which is the layout shift a reader notices most and the one a component
+ * library is in the best position to prevent.
+ *
+ * ## The row rather than a height
+ *
+ * A message is one line or three, depending on what it says and how wide the
+ * field is, and neither this stylesheet nor the component knows which. `1fr` of
+ * a single-row grid is exactly what the message needs and `0fr` is nothing at
+ * all, so the two ends are the real heights rather than a guess big enough to
+ * cover them — the same move `MPFloatingActionButton` makes across its label
+ * and `MPAlert` makes on its way out.
+ *
+ * `overflow: hidden` because the row is smaller than its content for the whole
+ * of the opening, and a message that spilled out of a zero-height row would be
+ * drawn over the control it belongs to.
+ *
+ * ## Two keyframes, because there are two things that happen here
+ *
+ * A field with nothing to say and one with something to say differ by a line of
+ * layout, and that is what `open` is for. A field whose description has been
+ * replaced by an error differs by the words, and the space is already there —
+ * so `swap` is a fade and nothing else. Opening a row that is already open
+ * would collapse the line and re-open it, which is a flinch rather than a
+ * change of message.
+ *
+ * ## Why an attribute rather than a class that is simply always on
+ *
+ * Because a page load is not a change. Every rule here is written against
+ * `data-mp-reveal`, which `internal/SupportingText.tsx` sets only when it has
+ * watched the message change — otherwise a server-rendered form would grow six
+ * description lines out of nothing the moment it hydrated, which is a page
+ * assembling itself in front of a reader who asked for a form.
+ *
+ * That is the same bargain `.mp-calendar__page[data-mp-paged]` makes, and the
+ * component restarts these the same way: there is no rewinding a CSS animation
+ * from React, so `animation-name` is cleared and put back.
+ *
+ * Unlayered, like the keyframes above, and switched off for a reader who asked
+ * for less motion.
+ * ------------------------------------------------------------------------- */
+
+@keyframes mp-supporting-text-open {
+  from {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+}
+
+@keyframes mp-supporting-text-swap {
+  from {
+    opacity: 0;
+  }
+}
+
+.mp-supporting-text__reveal {
+  display: grid;
+  grid-template-rows: 1fr;
+  overflow: hidden;
+}
+
+.mp-supporting-text__reveal[data-mp-reveal='open'] {
+  animation: mp-supporting-text-open var(--mp-sys-motion-duration-short4)
+    var(--mp-sys-motion-easing-emphasized-decelerate);
+}
+
+.mp-supporting-text__reveal[data-mp-reveal='swap'] {
+  animation: mp-supporting-text-swap var(--mp-sys-motion-duration-short4)
+    var(--mp-sys-motion-easing-standard);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mp-supporting-text__reveal[data-mp-reveal] {
+    animation: none;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * The tab bar's ends
+ *
+ * A bar with more tabs than room has always scrolled — MD3's scrollable tabs,
+ * and `overflow-x: auto` is the whole of it. What it had no way of saying was
+ * that it was scrolling. macOS draws an overlay scrollbar that is not there
+ * until it is used, so a bar with four tabs off the edge and a bar with none
+ * are the same picture; Windows draws a real one, which is a signal and also
+ * fifteen pixels of furniture under the tabs. `MPTabs` hides it on both and
+ * fades the ends instead, which is one answer rather than two halves.
+ *
+ * Hand-written rather than a utility for the reason the grid arithmetic above
+ * is: the gradient reads a value that only exists at run time, and Tailwind
+ * generates classes from strings it can find in the source.
+ *
+ * ## Which end
+ *
+ * `data-mp-overflow` is written by the component from a measurement, and is
+ * absent when everything fits — so a bar that does not overflow carries no mask
+ * at all. Fading an end a reader has already reached would be a lie about
+ * there being more that way, which is the same failure as saying nothing.
+ *
+ * ## Why there are two mask layers
+ *
+ * The divider is the bar's bottom border, and a mask applies to an element's
+ * whole rendering — so a single horizontal gradient fades the hairline out at
+ * both ends along with the tabs. The tabs running on is a fact about the bar;
+ * the divider is the boundary between the bar and the panel under it, and it
+ * runs the full width whatever the bar is doing.
+ *
+ * So the fade is sized to everything *above* the last pixel, and a second,
+ * fully opaque layer covers that pixel. Multiple mask layers composite as
+ * `add` by default, which is what makes this two declarations rather than a
+ * `mask-composite` nobody would guess was load-bearing. `no-repeat` is not
+ * optional: a 1px layer left to tile would run the opaque strip up the whole
+ * bar and there would be no fade at all.
+ * ------------------------------------------------------------------------- */
+
+.mp-tabs__list[data-mp-overflow] {
+  /* A tab's own inline padding at `md`, so the fade is about one glyph wide —
+     enough to read as an edge that continues, and not so much that the label it
+     runs over stops being a word. */
+  --_mp-tabs-fade: 1.5rem;
+
+  mask-image:
+    linear-gradient(
+      to right,
+      transparent 0,
+      #000 var(--_mp-tabs-fade-left, 0px),
+      #000 calc(100% - var(--_mp-tabs-fade-right, 0px)),
+      transparent 100%
+    ),
+    linear-gradient(#000, #000);
+  mask-size:
+    100% calc(100% - 1px),
+    100% 1px;
+  mask-position:
+    top left,
+    bottom left;
+  mask-repeat: no-repeat;
+}
+
+.mp-tabs__list[data-mp-overflow='left'],
+.mp-tabs__list[data-mp-overflow='both'] {
+  --_mp-tabs-fade-left: var(--_mp-tabs-fade);
+}
+
+.mp-tabs__list[data-mp-overflow='right'],
+.mp-tabs__list[data-mp-overflow='both'] {
+  --_mp-tabs-fade-right: var(--_mp-tabs-fade);
+}
+
 /* ---------------------------------------------------------------------------
  * Animation
  *
@@ -1618,6 +2365,31 @@
   animation-play-state: var(--_mp-anim-state, running);
 }
 
+/*
+ * And the same effects, driven by the reader instead of by a clock.
+ *
+ * Two declarations, and every keyframe below gains a scroll-driven mode. That
+ * is the whole of `timeline="view"`: there is no second set of keyframes and no
+ * component of its own, because a fade tied to a scroll position is not a
+ * different effect from a fade — it is the same one on a different clock.
+ *
+ * The slots are filled only when a caller asks for `view`. `auto` and `normal`
+ * are what this rule already says, so writing them out per instance would be a
+ * hundred and thirty components each carrying the answer nobody changed.
+ *
+ * `@supports` is not optional, and the reason is not the browsers that have
+ * none of this. It is that `animation-timeline` and `animation-range` are two
+ * properties: a browser that took the first and not the second would give an
+ * animation a timeline and no range to run over. Asking for `view()` itself is
+ * asking for the pair.
+ */
+@supports (animation-timeline: view()) {
+  .mp-anim {
+    animation-timeline: var(--_mp-anim-timeline, auto);
+    animation-range: var(--_mp-anim-range, normal);
+  }
+}
+
 @keyframes mp-anim-fade {
   from {
     opacity: var(--_mp-anim-opacity, 0);
@@ -1684,6 +2456,42 @@
   animation-name: mp-anim-rotate;
 }
 
+/*
+ * Reveal: the content disclosed rather than brought in.
+ *
+ * The only entrance in the set where nothing moves and no colour changes. The
+ * element is where it will be from the first frame and at the ink it will end
+ * at; what changes is how much of it has been uncovered. That is what a title,
+ * a rule or a chart's plot area needs, because for those the *position* is part
+ * of what is being said and an entrance that travels says something else.
+ *
+ * `clip-path` rather than a mask, and rather than a wrapper with `overflow`.
+ * A mask needs a gradient per direction and a second one to undo itself; a
+ * wrapper puts an element into the layout that was not there before, which for
+ * something inside a grid or a flex row changes what it is a child of.
+ * `inset(0)` is already the spelling of "nothing is clipped", so the to-state
+ * needs no slot at all.
+ *
+ * The opacity slot defaults to 1 rather than to 0. A reveal is not a fade, and
+ * the two together read as a much weaker version of either; the components that
+ * want both lower it deliberately.
+ */
+@keyframes mp-anim-reveal {
+  from {
+    opacity: var(--_mp-anim-opacity, 1);
+    clip-path: var(--_mp-anim-clip, inset(0 100% 0 0));
+  }
+
+  to {
+    opacity: 1;
+    clip-path: inset(0);
+  }
+}
+
+.mp-anim-reveal {
+  animation-name: mp-anim-reveal;
+}
+
 /* Symmetric on purpose: a blink that ended anywhere but where it started would
    leave the element half drawn whenever the count ran out. */
 @keyframes mp-anim-blink {
@@ -1701,6 +2509,131 @@
   animation-name: mp-anim-blink;
 }
 
+/*
+ * Float: the two effects that are not arrivals, and keep their keyframes here
+ * rather than in the shared table.
+ *
+ * `MPAnimation` is what everything with an *entrance* shares, and a shared
+ * lookup table is a tax on everything that imports it — an object literal is
+ * not tree-shaken key by key, so a component reading one pays for the rows it
+ * will never use. Neither of the two below is an arrival: a drift has no
+ * destination and a refusal is an answer rather than a state, so they borrow
+ * the machinery and bring their own frames.
+ *
+ * A drift is four points around the origin rather than one axis, because one
+ * axis is a bob and a bob is a loading indicator. Every keyframe returns
+ * through nothing at 0% and 100%, so an interrupted float leaves the element
+ * where the page put it.
+ */
+@keyframes mp-anim-float {
+  0%,
+  100% {
+    translate: 0 0;
+    rotate: 0deg;
+  }
+
+  25% {
+    translate: var(--_mp-anim-x, 0.375rem) calc(-1 * var(--_mp-anim-y, 0.625rem));
+    rotate: var(--_mp-anim-angle, 0deg);
+  }
+
+  50% {
+    translate: 0 calc(-1.5 * var(--_mp-anim-y, 0.625rem));
+    rotate: 0deg;
+  }
+
+  75% {
+    translate: calc(-1 * var(--_mp-anim-x, 0.375rem)) calc(-1 * var(--_mp-anim-y, 0.625rem));
+    rotate: calc(-1 * var(--_mp-anim-angle, 0deg));
+  }
+}
+
+.mp-anim-float {
+  animation-name: mp-anim-float;
+}
+
+/*
+ * Shake: the answer to something that did not work.
+ *
+ * The library's rule is that a **control** never moves, and it holds — but that
+ * rule is about a control's resting states, where movement is a stand-in for
+ * something colour says better. This is not a state. It is a one-off answer to
+ * what the reader just did, it is over in four hundred milliseconds, and there
+ * is no colour that says *that was refused* as plainly.
+ *
+ * Two details it lives or dies by. **Nought and a hundred are home**, so an
+ * interrupted shake does not leave the element sitting to one side of where it
+ * belongs. And the **second half is smaller than the first** — 55% of the
+ * amplitude — because a shake that ends as hard as it started reads as a loop
+ * that was cut off rather than as an answer that finished.
+ */
+@keyframes mp-anim-shake {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+
+  20% {
+    translate: calc(-1 * var(--_mp-anim-x, 0.5rem)) 0;
+  }
+
+  40% {
+    translate: var(--_mp-anim-x, 0.5rem) 0;
+  }
+
+  60% {
+    translate: calc(-0.55 * var(--_mp-anim-x, 0.5rem)) 0;
+  }
+
+  80% {
+    translate: calc(0.55 * var(--_mp-anim-x, 0.5rem)) 0;
+  }
+}
+
+.mp-anim-shake {
+  animation-name: mp-anim-shake;
+}
+
+/*
+ * Counter: a number, animated by CSS and only *read* by JavaScript.
+ *
+ * A count up cannot be a keyframe on its own, because text is not an animatable
+ * property — every frame needs a fresh interpolation put through a formatter.
+ * The obvious answer is a `requestAnimationFrame` loop with its own clock, its
+ * own easing and its own idea of what "paused" means, which is three things
+ * that have to be kept in step with the six effects above and will not be.
+ *
+ * So the animation is a real CSS animation over a **registered custom
+ * property**, and the component's rAF loop does nothing but read the value and
+ * format it. The duration, the delay, the easing token, the play state, the
+ * trigger, `prefers-reduced-motion` and `timeline="view"` are then all the same
+ * machinery every other effect uses, rather than a second implementation of
+ * each — and the untriggered state is the first frame for free, because a
+ * paused animation with `fill-mode: both` is sitting on `from`.
+ *
+ * `@property` is what makes it interpolate at all: without a registered syntax
+ * a custom property is a string, and a string animates by swapping at 50%.
+ */
+@property --mp-count {
+  syntax: '<number>';
+  initial-value: 0;
+  inherits: false;
+}
+
+@keyframes mp-anim-count {
+  from {
+    --mp-count: var(--_mp-anim-from, 0);
+  }
+
+  to {
+    --mp-count: var(--_mp-anim-to, 0);
+  }
+}
+
+.mp-anim-count {
+  animation-name: mp-anim-count;
+}
+
 @media (prefers-reduced-motion: reduce) {
   /*
    * The Animate components go the other way from the indicators above, and the
@@ -1962,3 +2895,379 @@
     animation: none;
   }
 }
+
+/* ---------------------------------------------------------------------------
+ * Code blocks
+ *
+ * An MPCodeBlock is the one surface in this library that does **not** take the
+ * page's colour roles, and that is a decision rather than an oversight. Code is
+ * read against a ground chosen for code, and the twelve hues it needs to keep a
+ * keyword apart from a string apart from a number are not the four accent
+ * families MD3 has. A block dyed with `primary` would be a block whose colours
+ * carry no information.
+ *
+ * So the sheet carries slots of its own, `theme` picks which set fills them,
+ * and `auto` — the default — is the one that follows the page's light and dark
+ * the way every other surface here does.
+ *
+ * They are custom properties on the block rather than a stylesheet per theme,
+ * for the reason `internal/animate-core.ts` gives about the effect tables:
+ * nothing here is generated, the component only fills slots, and a fifth theme
+ * is a block of declarations rather than a second copy of the map below. That
+ * is also why `theme` accepts any string — a consumer who writes
+ * `[data-mp-code-theme='ours']` in their own CSS has a theme, with nothing to
+ * register and nothing to import.
+ *
+ * **Five of the slots are derived and are never written per theme.** `dim`,
+ * `rule` and `hover` are a fixed mix of the ground and the ink, and `mark` and
+ * `mark-edge` are the same for a marked line. A custom property resolves its
+ * `var()`s on the element that declares it, and every theme below declares its
+ * `fg` and `bg` on that same element — so the derived five follow whichever
+ * theme won without being restated five times.
+ *
+ * The dark palette is written twice on purpose: once for the pinned `dark`
+ * theme together with `auto` under an explicitly dark page, and once for `auto`
+ * under `prefers-color-scheme`. A media query and a selector list cannot be
+ * folded into one rule, which is the same repetition the scheme block at the
+ * top of this file makes and says so about.
+ *
+ * Every hue is solved against its own ground rather than flipped: the light set
+ * runs dark and saturated on near-white, the dark set light and desaturated on
+ * near-black. The pairs held furthest apart are the ones that sit next to each
+ * other in real code — a string beside a number, a type beside a function name.
+ *
+ * No third-party palettes ship here. One Dark, Dracula, Nord and the rest are
+ * other projects' published work under their own licences, and porting them
+ * into this package would be shipping somebody else's design under this one's
+ * name. The open string above is how to bring the one you read in all day.
+ * ------------------------------------------------------------------------- */
+
+.mp-code {
+  /* The light set, which is also where `auto` starts. */
+  --mp-code-bg: oklch(98.4% 0.003 262);
+  --mp-code-fg: oklch(30% 0.016 262);
+
+  --mp-code-comment: oklch(58% 0.022 262);
+  --mp-code-keyword: oklch(48% 0.19 322);
+  --mp-code-string: oklch(46% 0.12 148);
+  --mp-code-number: oklch(50% 0.14 48);
+  --mp-code-function: oklch(48% 0.17 264);
+  --mp-code-type: oklch(45% 0.1 214);
+  --mp-code-variable: oklch(45% 0.12 28);
+  --mp-code-tag: oklch(48% 0.18 22);
+  --mp-code-attr: oklch(47% 0.13 82);
+  --mp-code-meta: oklch(52% 0.05 262);
+  --mp-code-add: oklch(45% 0.14 152);
+  --mp-code-del: oklch(48% 0.18 25);
+
+  /* The derived five. Declared once here and never in a theme: they are a mix
+     of that theme's own ground and ink, which resolves on this element. */
+  --mp-code-dim: color-mix(in oklab, var(--mp-code-fg) 58%, var(--mp-code-bg));
+  --mp-code-rule: color-mix(in oklab, var(--mp-code-fg) 14%, transparent);
+  --mp-code-hover: color-mix(in oklab, var(--mp-code-fg) 9%, transparent);
+
+  /* A marked line is neutral rather than dyed with the page's accent family:
+     the block has deliberately refused the page's palette, and a primary wash
+     over it would be the one colour on it that nobody chose. Mixed from the
+     theme's own ink, it is legible on all of them. */
+  --mp-code-mark: color-mix(in oklab, var(--mp-code-fg) 10%, transparent);
+  --mp-code-mark-edge: color-mix(in oklab, var(--mp-code-fg) 45%, transparent);
+}
+
+.mp-code[data-mp-code-theme='dark'],
+:where([data-mp-scheme='dark'], .dark) .mp-code[data-mp-code-theme='auto'] {
+  --mp-code-bg: oklch(19.5% 0.014 262);
+  --mp-code-fg: oklch(90% 0.012 262);
+
+  --mp-code-comment: oklch(60% 0.024 262);
+  --mp-code-keyword: oklch(76% 0.13 324);
+  --mp-code-string: oklch(80% 0.13 148);
+  --mp-code-number: oklch(81% 0.12 62);
+  --mp-code-function: oklch(78% 0.12 258);
+  --mp-code-type: oklch(82% 0.1 210);
+  --mp-code-variable: oklch(82% 0.09 32);
+  --mp-code-tag: oklch(77% 0.13 22);
+  --mp-code-attr: oklch(85% 0.11 92);
+  --mp-code-meta: oklch(70% 0.05 262);
+  --mp-code-add: oklch(80% 0.14 152);
+  --mp-code-del: oklch(75% 0.15 25);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mp-scheme='light']) .mp-code[data-mp-code-theme='auto'] {
+    --mp-code-bg: oklch(19.5% 0.014 262);
+    --mp-code-fg: oklch(90% 0.012 262);
+
+    --mp-code-comment: oklch(60% 0.024 262);
+    --mp-code-keyword: oklch(76% 0.13 324);
+    --mp-code-string: oklch(80% 0.13 148);
+    --mp-code-number: oklch(81% 0.12 62);
+    --mp-code-function: oklch(78% 0.12 258);
+    --mp-code-type: oklch(82% 0.1 210);
+    --mp-code-variable: oklch(82% 0.09 32);
+    --mp-code-tag: oklch(77% 0.13 22);
+    --mp-code-attr: oklch(85% 0.11 92);
+    --mp-code-meta: oklch(70% 0.05 262);
+    --mp-code-add: oklch(80% 0.14 152);
+    --mp-code-del: oklch(75% 0.15 25);
+  }
+}
+
+/*
+ * `mono` is the one theme built out of the page's own colours, and the only one
+ * with no hue in it at all: the structure is carried by weight and by how far a
+ * run is muted. It is what a block printed on paper, or read by somebody who
+ * cannot separate the hues above, is left with — so it has to stand on its own
+ * rather than read as a degraded copy of a colour theme.
+ */
+/*
+ * The `--_mp-color-*` indirections rather than the `--mp-sys-color-*` roles a
+ * consumer sets. The roles are the *input* — undefined unless somebody wrote
+ * one — and the indirections are what the sheet derives from the source colour
+ * when nobody did. A rule that read the role directly would draw nothing at all
+ * on a page that had not overridden it, which is most pages.
+ */
+.mp-code[data-mp-code-theme='mono'] {
+  --mp-code-bg: var(--_mp-color-surface-container);
+  --mp-code-fg: var(--_mp-color-on-surface);
+
+  --mp-code-comment: var(--_mp-color-on-surface-variant);
+  --mp-code-keyword: var(--_mp-color-on-surface);
+  --mp-code-string: var(--_mp-color-on-surface-variant);
+  --mp-code-number: var(--_mp-color-on-surface-variant);
+  --mp-code-function: var(--_mp-color-on-surface);
+  --mp-code-type: var(--_mp-color-on-surface);
+  --mp-code-variable: var(--_mp-color-on-surface);
+  --mp-code-tag: var(--_mp-color-on-surface);
+  --mp-code-attr: var(--_mp-color-on-surface-variant);
+  --mp-code-meta: var(--_mp-color-on-surface-variant);
+  --mp-code-add: var(--_mp-color-on-surface);
+  --mp-code-del: var(--_mp-color-on-surface-variant);
+}
+
+.mp-code[data-mp-code-theme='mono'] .hljs-keyword,
+.mp-code[data-mp-code-theme='mono'] .hljs-selector-tag,
+.mp-code[data-mp-code-theme='mono'] .hljs-title,
+.mp-code[data-mp-code-theme='mono'] .hljs-tag,
+.mp-code[data-mp-code-theme='mono'] .hljs-type,
+.mp-code[data-mp-code-theme='mono'] .hljs-built_in {
+  font-weight: 600;
+}
+
+/*
+ * One line.
+ *
+ * A flex row rather than a block, because the number and the prompt are
+ * pseudo-elements that have to sit *before* the code and hold their own width.
+ * `order` is what lets one of them come before the other and both before the
+ * code, since `::after` would otherwise draw last.
+ *
+ * `min-height` keeps a blank line a line high. A flex row with nothing in it is
+ * zero pixels tall, and a block that closed up its own paragraph breaks would
+ * be reflowing the reader's file.
+ */
+.mp-code-line {
+  display: flex;
+  min-height: 1.5em;
+  min-height: 1lh;
+  /* Transparent on every line, coloured on a marked one. A border rather than
+     an inset `box-shadow` because `box-shadow` has no logical form and this one
+     has to sit on the *start* edge in both writing directions; drawn on all of
+     them so marking a line does not shift its text two pixels sideways. */
+  border-inline-start: 2px solid transparent;
+}
+
+/*
+ * A marked line, and the reason the horizontal padding is on the line rather
+ * than on the box that scrolls it.
+ *
+ * A tint that stopped at the padding would be a stripe floating inside the
+ * block instead of a marked row. With the padding here the line box *is* the
+ * row, so it reaches both edges — and because the lines sit in a
+ * `w-max min-w-full` block, every one of them reaches the same edge whether the
+ * code is narrower than the block or scrolled sideways within it.
+ */
+.mp-code-line[data-mark] {
+  background: var(--mp-code-mark);
+  border-inline-start-color: var(--mp-code-mark-edge);
+}
+
+.mp-code-line[data-line]::before {
+  content: attr(data-line);
+  order: 0;
+  flex: none;
+  width: var(--mp-code-gutter, 2ch);
+  margin-inline-end: 1.25em;
+  text-align: end;
+  color: var(--mp-code-dim);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.mp-code-line[data-prompt]::after {
+  content: attr(data-prompt);
+  order: 1;
+  flex: none;
+  margin-inline-end: 0.75em;
+  color: var(--mp-code-dim);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.mp-code-line > code {
+  order: 2;
+  min-width: 0;
+  font: inherit;
+  background: none;
+  padding: 0;
+  white-space: pre;
+}
+
+.mp-code[data-mp-code-wrap='true'] .mp-code-line > code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/*
+ * highlight.js's scopes, mapped onto the twelve slots.
+ *
+ * Grouped by what a run *is* rather than by what highlight.js calls it, because
+ * those names are the union of a hundred and ninety grammars and half of them
+ * are one language's word for another language's idea — `selector-tag`, `tag`
+ * and `name` are all "the thing being declared". The point of the mapping is
+ * that the same idea gets the same colour whatever file it turns up in.
+ */
+.mp-code .hljs-comment,
+.mp-code .hljs-quote {
+  color: var(--mp-code-comment);
+  font-style: italic;
+}
+
+.mp-code .hljs-keyword,
+.mp-code .hljs-literal,
+.mp-code .hljs-selector-tag,
+.mp-code .hljs-operator,
+.mp-code .hljs-doctag,
+.mp-code .hljs-formula {
+  color: var(--mp-code-keyword);
+}
+
+.mp-code .hljs-string,
+.mp-code .hljs-regexp,
+.mp-code .hljs-char,
+.mp-code .hljs-link {
+  color: var(--mp-code-string);
+}
+
+.mp-code .hljs-number,
+.mp-code .hljs-symbol,
+.mp-code .hljs-bullet {
+  color: var(--mp-code-number);
+}
+
+.mp-code .hljs-title,
+.mp-code .hljs-section,
+.mp-code .hljs-name,
+.mp-code .hljs-selector-id,
+.mp-code .hljs-selector-class {
+  color: var(--mp-code-function);
+}
+
+.mp-code .hljs-type,
+.mp-code .hljs-built_in,
+.mp-code .hljs-class {
+  color: var(--mp-code-type);
+}
+
+.mp-code .hljs-variable,
+.mp-code .hljs-template-variable,
+.mp-code .hljs-params,
+.mp-code .hljs-subst {
+  color: var(--mp-code-variable);
+}
+
+.mp-code .hljs-tag,
+.mp-code .hljs-template-tag {
+  color: var(--mp-code-tag);
+}
+
+.mp-code .hljs-attr,
+.mp-code .hljs-attribute,
+.mp-code .hljs-property,
+.mp-code .hljs-selector-attr,
+.mp-code .hljs-selector-pseudo {
+  color: var(--mp-code-attr);
+}
+
+.mp-code .hljs-meta,
+.mp-code .hljs-punctuation {
+  color: var(--mp-code-meta);
+}
+
+.mp-code .hljs-addition {
+  color: var(--mp-code-add);
+}
+
+.mp-code .hljs-deletion {
+  color: var(--mp-code-del);
+}
+
+.mp-code .hljs-emphasis {
+  font-style: italic;
+}
+
+.mp-code .hljs-strong {
+  font-weight: 700;
+}
+
+/* ---------------------------------------------------------------------------
+ * The tree's guide lines
+ *
+ * A rail down each level and, in `folder`, an elbow into each row. Real CSS
+ * rather than utilities for the reason the grid's breakpoints are: a rail is a
+ * pseudo-element positioned half an indent *outside* the row it belongs to, and
+ * the rail under a last child is a different height from the rest.
+ * `[&:last-child]:[&::before]:…` is expressible and nobody would want to read
+ * it.
+ *
+ * The two lengths come from the component as custom properties, because both
+ * are on a ladder: the rail sits half an indent out, and the elbow crosses at
+ * half a row's height. Written as numbers here they would be right at one rung
+ * and wrong at the other four.
+ *
+ * `lines="none"` needs no rule at all, which is why there is no class for it.
+ * ------------------------------------------------------------------------- */
+
+.mp-tree--simple ul[role='group'] > li,
+.mp-tree--folder ul[role='group'] > li {
+  position: relative;
+}
+
+.mp-tree--simple ul[role='group'] > li::before,
+.mp-tree--folder ul[role='group'] > li::before {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: calc(var(--_mp-tree-indent) / -2);
+  border-inline-start: 1px solid var(--_mp-color-outline-variant);
+}
+
+/*
+ * The rail under a last child stops at the row it points at rather than running
+ * on into nothing. That is the whole difference between the two drawings: a
+ * `simple` rail says "this level continues", and a `folder` one says where it
+ * ends.
+ */
+.mp-tree--folder ul[role='group'] > li:last-child::before {
+  inset-block-end: auto;
+  block-size: calc(var(--_mp-tree-row) / 2);
+}
+
+.mp-tree--folder ul[role='group'] > li::after {
+  content: '';
+  position: absolute;
+  inset-block-start: calc(var(--_mp-tree-row) / 2);
+  inset-inline-start: calc(var(--_mp-tree-indent) / -2);
+  inline-size: calc(var(--_mp-tree-indent) / 2 - 2px);
+  border-block-start: 1px solid var(--_mp-color-outline-variant);
+}