plass-ui 1.6.0 → 1.8.0

package/dist/tokens.css

@@ -55,8 +55,11 @@
  * glass around it, and the `accent` — the one value that has to be *read* off a
  * surface rather than looked at.
  *
- * Three values are hand-picked per family and everything else is derived with
- * `color-mix()`. Adding a family is still five places, though: one entry in
+ * Three values are hand-picked per family here, and an `accent` in each theme
+ * block below. Everything else is derived from those: `-fill` is a
+ * `linear-gradient()` between the two ends, `-tint`, `-soft` and `-line` are a
+ * `color-mix()` of `solid` or `accent` with `transparent`, and `-ring` is
+ * `accent` itself. Adding a family is still five places, though: one entry in
  * `PlassColor`, those three lines here, an `accent` in each of the three theme
  * blocks below, the eight derived declarations, which are written out per
  * family rather than generated, and the Flutter package's own enum and
@@ -175,6 +178,262 @@
   --plass-breakpoint-xl: var(--breakpoint-xl, 80rem);
 }
 
+/* ---------------------------------------------------------------------------
+ * The room a fixed bottom bar takes
+ *
+ * A `PlBottomNavigation` or a `PlFloatingBottomNavigation` is `fixed` by
+ * default: held against the bottom of the window and out of the flow, so the
+ * end of the page is always under it, and so is a link a reader tabs to down
+ * there. Only the page can make room, and only if it knows how much, so a fixed
+ * bar measures itself — size, density, names and the home indicator included —
+ * and writes the answer here, on the root element, for as long as it is
+ * mounted. With no bar it is `0px`, so a page can reserve it unconditionally:
+ *
+ *   main { padding-bottom: var(--plass-bottom-navigation-height); }
+ *   html { scroll-padding-bottom: var(--plass-bottom-navigation-height); }
+ *
+ * On a bare `:root`, for the reason `--plass-z-portal` is. It is a reading
+ * rather than a setting: a bar replaces whatever is written here the moment it
+ * has measured itself.
+ * ------------------------------------------------------------------------- */
+
+:root {
+  --plass-bottom-navigation-height: 0px;
+}
+
+/* ---------------------------------------------------------------------------
+ * The room a pinned header takes in a page layout
+ *
+ * A `PlHeader` with `position="fixed"` is out of the flow, so a `PlPageLayout`
+ * pads its content down by the header's height and starts its sidebars there.
+ * A `sticky` one across the whole width is in the flow, but it stays across
+ * the top of the window, so the sidebars under it start below it and are that
+ * much shorter. The layout measures the height and writes it on its root — but
+ * only once JavaScript runs, so the HTML a server sends would be drawn with
+ * the content under a fixed header, or with the sidebars under a sticky one as
+ * tall as the whole window, which pushes a short page's footer a header's
+ * height down. Both would move a moment later, when the page hydrates.
+ *
+ * These rules give that first paint the same room out of what the stylesheet
+ * already knows: the header's floor for its `size`, which is the ladder of
+ * `barMinHeightClasses` in `PlHeader.tsx` spelled in the same `--spacing`, and
+ * the hairlines along its top and bottom edges. A header whose content is
+ * taller than its floor is still measured, and the measurement is an inline
+ * style on the same root, so it replaces all of this the moment it is written.
+ *
+ * Two paths for a fixed header, because it is the layout's own child or, with
+ * `headerSpan="content"`, its content column's. A sticky header counts only as
+ * the layout's own child: in the content column it sits beside the sidebars
+ * rather than over them. A `PlHeader` any deeper is one the page drew rather
+ * than the layout's.
+ *
+ * Every layout starts from zero rather than from what it inherits, so a layout
+ * inside another one's page does not take the outer header's room as its own.
+ * ------------------------------------------------------------------------- */
+
+.plass-layout {
+  --p-layout-header: 0px;
+  --p-layout-header-inset: 0px;
+  --p-layout-header-floor: 0px;
+  --p-layout-header-rule: 0px;
+}
+
+.plass-layout:has(> .plass-header-fixed, > div > div > .plass-header-fixed) {
+  --p-layout-header: calc(var(--p-layout-header-floor) + var(--p-layout-header-rule));
+  --p-layout-header-inset: var(--p-layout-header);
+}
+
+.plass-layout:has(> .plass-header-sticky) {
+  --p-layout-header: calc(var(--p-layout-header-floor) + var(--p-layout-header-rule));
+}
+
+.plass-layout:has(
+  > .plass-header-fixed[data-size='xs'],
+  > div > div > .plass-header-fixed[data-size='xs'],
+  > .plass-header-sticky[data-size='xs']
+) {
+  --p-layout-header-floor: calc(var(--spacing, 0.25rem) * 10);
+}
+
+.plass-layout:has(
+  > .plass-header-fixed[data-size='sm'],
+  > div > div > .plass-header-fixed[data-size='sm'],
+  > .plass-header-sticky[data-size='sm']
+) {
+  --p-layout-header-floor: calc(var(--spacing, 0.25rem) * 12);
+}
+
+.plass-layout:has(
+  > .plass-header-fixed[data-size='md'],
+  > div > div > .plass-header-fixed[data-size='md'],
+  > .plass-header-sticky[data-size='md']
+) {
+  --p-layout-header-floor: calc(var(--spacing, 0.25rem) * 16);
+}
+
+.plass-layout:has(
+  > .plass-header-fixed[data-size='lg'],
+  > div > div > .plass-header-fixed[data-size='lg'],
+  > .plass-header-sticky[data-size='lg']
+) {
+  --p-layout-header-floor: calc(var(--spacing, 0.25rem) * 20);
+}
+
+.plass-layout:has(
+  > .plass-header-fixed[data-size='xl'],
+  > div > div > .plass-header-fixed[data-size='xl'],
+  > .plass-header-sticky[data-size='xl']
+) {
+  --p-layout-header-floor: calc(var(--spacing, 0.25rem) * 24);
+}
+
+/* The divider is a line along the bottom; a glass sheet has an edge all round,
+   which the divider only colours. Later, so the glass wins where both match. */
+.plass-layout:has(
+  > .plass-header-fixed[data-divider],
+  > div > div > .plass-header-fixed[data-divider],
+  > .plass-header-sticky[data-divider]
+) {
+  --p-layout-header-rule: 1px;
+}
+
+.plass-layout:has(
+  > .plass-header-fixed[data-variant='glass'],
+  > div > div > .plass-header-fixed[data-variant='glass'],
+  > .plass-header-sticky[data-variant='glass']
+) {
+  --p-layout-header-rule: 2px;
+}
+
+/* ---------------------------------------------------------------------------
+ * The room a pinned footer takes in a page layout
+ *
+ * The same arrangement at the other end, with one difference: a `PlFooter`
+ * has no height floor. What the stylesheet knows of its height is the air
+ * above and below its content, which is `sheetPaddingYClasses` in
+ * `internal/styles.ts` for its `size` and `density` spelled in the same
+ * `--spacing`, and the hairlines along its edges. The content is the caller's,
+ * and only the layout's measurement knows how tall it is, so a server's first
+ * paint reserves the air and the edges and the measurement adds the rest.
+ *
+ * The two paths of a fixed footer, the one path of a sticky footer that spans
+ * the full width, and the start from zero are the header's, for its reasons.
+ * ------------------------------------------------------------------------- */
+
+.plass-layout {
+  --p-layout-footer: 0px;
+  --p-layout-footer-inset: 0px;
+  --p-layout-footer-floor: 0px;
+  --p-layout-footer-rule: 0px;
+}
+
+.plass-layout:has(> .plass-footer-fixed, > div > div > .plass-footer-fixed) {
+  --p-layout-footer: calc(var(--p-layout-footer-floor) + var(--p-layout-footer-rule));
+  --p-layout-footer-inset: var(--p-layout-footer);
+}
+
+.plass-layout:has(> .plass-footer-sticky) {
+  --p-layout-footer: calc(var(--p-layout-footer-floor) + var(--p-layout-footer-rule));
+}
+
+.plass-layout:has(
+  > .plass-footer-fixed[data-size='xs'][data-density='default'],
+  > div > div > .plass-footer-fixed[data-size='xs'][data-density='default'],
+  > .plass-footer-sticky[data-size='xs'][data-density='default']
+) {
+  --p-layout-footer-floor: calc(var(--spacing, 0.25rem) * 5);
+}
+
+.plass-layout:has(
+  > .plass-footer-fixed[data-size='sm'][data-density='default'],
+  > div > div > .plass-footer-fixed[data-size='sm'][data-density='default'],
+  > .plass-footer-sticky[data-size='sm'][data-density='default']
+) {
+  --p-layout-footer-floor: calc(var(--spacing, 0.25rem) * 7);
+}
+
+.plass-layout:has(
+  > .plass-footer-fixed[data-size='md'][data-density='default'],
+  > div > div > .plass-footer-fixed[data-size='md'][data-density='default'],
+  > .plass-footer-sticky[data-size='md'][data-density='default']
+) {
+  --p-layout-footer-floor: calc(var(--spacing, 0.25rem) * 10);
+}
+
+.plass-layout:has(
+  > .plass-footer-fixed[data-size='lg'][data-density='default'],
+  > div > div > .plass-footer-fixed[data-size='lg'][data-density='default'],
+  > .plass-footer-sticky[data-size='lg'][data-density='default']
+) {
+  --p-layout-footer-floor: calc(var(--spacing, 0.25rem) * 12);
+}
+
+.plass-layout:has(
+  > .plass-footer-fixed[data-size='xl'][data-density='default'],
+  > div > div > .plass-footer-fixed[data-size='xl'][data-density='default'],
+  > .plass-footer-sticky[data-size='xl'][data-density='default']
+) {
+  --p-layout-footer-floor: calc(var(--spacing, 0.25rem) * 14);
+}
+
+.plass-layout:has(
+  > .plass-footer-fixed[data-size='xs'][data-density='compact'],
+  > div > div > .plass-footer-fixed[data-size='xs'][data-density='compact'],
+  > .plass-footer-sticky[data-size='xs'][data-density='compact']
+) {
+  --p-layout-footer-floor: calc(var(--spacing, 0.25rem) * 4);
+}
+
+.plass-layout:has(
+  > .plass-footer-fixed[data-size='sm'][data-density='compact'],
+  > div > div > .plass-footer-fixed[data-size='sm'][data-density='compact'],
+  > .plass-footer-sticky[data-size='sm'][data-density='compact']
+) {
+  --p-layout-footer-floor: calc(var(--spacing, 0.25rem) * 5);
+}
+
+.plass-layout:has(
+  > .plass-footer-fixed[data-size='md'][data-density='compact'],
+  > div > div > .plass-footer-fixed[data-size='md'][data-density='compact'],
+  > .plass-footer-sticky[data-size='md'][data-density='compact']
+) {
+  --p-layout-footer-floor: calc(var(--spacing, 0.25rem) * 7);
+}
+
+.plass-layout:has(
+  > .plass-footer-fixed[data-size='lg'][data-density='compact'],
+  > div > div > .plass-footer-fixed[data-size='lg'][data-density='compact'],
+  > .plass-footer-sticky[data-size='lg'][data-density='compact']
+) {
+  --p-layout-footer-floor: calc(var(--spacing, 0.25rem) * 8);
+}
+
+.plass-layout:has(
+  > .plass-footer-fixed[data-size='xl'][data-density='compact'],
+  > div > div > .plass-footer-fixed[data-size='xl'][data-density='compact'],
+  > .plass-footer-sticky[data-size='xl'][data-density='compact']
+) {
+  --p-layout-footer-floor: calc(var(--spacing, 0.25rem) * 10);
+}
+
+/* The divider is a line along the top; the glass wins where both match, as
+   on the header. */
+.plass-layout:has(
+  > .plass-footer-fixed[data-divider],
+  > div > div > .plass-footer-fixed[data-divider],
+  > .plass-footer-sticky[data-divider]
+) {
+  --p-layout-footer-rule: 1px;
+}
+
+.plass-layout:has(
+  > .plass-footer-fixed[data-variant='glass'],
+  > div > div > .plass-footer-fixed[data-variant='glass'],
+  > .plass-footer-sticky[data-variant='glass']
+) {
+  --p-layout-footer-rule: 2px;
+}
+
 /* ---------------------------------------------------------------------------
  * Light theme (default)
  *
@@ -275,6 +534,20 @@
   --plass-glow-on-fill: rgb(255 255 255 / 0.18);
   --plass-flash-on-fill: rgb(255 255 255 / 0.26);
 
+  /* How much of that light a **field** carries, as a share of what a key gets.
+
+     A key is pressed and is finished with; a field is pressed once and then
+     written in for a minute, with the bloom sitting under the words being typed
+     and following the hand that is typing them. The same strength that reads as
+     a control answering a pointer reads as a stain on a paragraph. So a field
+     takes the family's tint at a little over half, which is enough to say the
+     surface answered and not enough to compete with the ink on it.
+
+     One value for both layers and for every family, because the thing being
+     dialled down is the effect rather than a colour. It is per-theme neither:
+     the tints it scales are already per-theme. */
+  --plass-glow-field-strength: 55%;
+
   /* Elevation, and how strongly a key's own colour bleeds into the shadow it
      casts. The ambient is a blue-grey rather than black: a neutral shadow over
      a blue-tinted page reads as dirt — and it is faint, because the tint below
@@ -282,8 +555,10 @@
   --plass-shadow-ambient: rgb(20 40 90 / 0.1);
   --plass-tint-strength: 35%;
 
-  /* The scrim behind a modal surface. */
+  /* The scrim behind a modal surface, and the blur it lays over the page. The
+     blur is the same in every theme, so it is written here only. */
   --plass-scrim: rgb(16 24 40 / 0.4);
+  --plass-scrim-blur: blur(2px);
 
   /* Corner radius: roughly 30% of the control height, and roughly constant in
      feel across the ladder — a Plass corner is a moulded fillet, not a pill and
@@ -411,7 +686,10 @@
 
     --plass-surface: #141b30;
     --plass-fg: #e7eaf3;
-    --plass-muted-fg: #99a2ba;
+    /* Light enough to clear 4.5:1 on the densest step of the glass, which is
+       lighter than the sheet: a modal or a select's list over an opaque sheet
+       is the hardest place muted text is read. */
+    --plass-muted-fg: #a0a9bf;
     --plass-border: rgb(255 255 255 / 0.12);
 
     --plass-bg-from: #111731;
@@ -490,7 +768,7 @@
 
   --plass-surface: #141b30;
   --plass-fg: #e7eaf3;
-  --plass-muted-fg: #99a2ba;
+  --plass-muted-fg: #a0a9bf;
   --plass-border: rgb(255 255 255 / 0.12);
 
   --plass-bg-from: #111731;
@@ -560,11 +838,79 @@
   --plass-chart-div-on-5: var(--plass-fg);
 }
 
+/* ---------------------------------------------------------------------------
+ * Reduced transparency
+ *
+ * A reader who has asked their system for less transparency gets every sheet
+ * opaque. The blur goes, and each rung of the glass ladder is laid over the
+ * theme's own `--plass-surface` instead of over the page: the same white at the
+ * same strength, with the opaque sheet behind it where the page used to be.
+ * That is the pair of layers a pinned table header already stacks so that rows
+ * do not show through it, and it keeps the ladder: an engaged sheet still holds
+ * more light than one at rest, except on a white surface, which has no lighter
+ * step to take.
+ *
+ * Only the fill and the blur move. The hairline, the light along the top edge,
+ * the shadows and the focus ring are drawn exactly as before, so a sheet keeps
+ * its edge and its place above the page.
+ *
+ * The scrim behind a modal, a drawer, a command palette or a tour, and an
+ * overlay's `scrim` tone, loses its blur too and keeps its dim, which is what
+ * tells the reader the page behind has stopped being reachable. Its blur is the same in every theme, so the
+ * first block alone turns it off, and every element inherits that.
+ *
+ * It is done here, on the tokens, rather than on the components, because the
+ * sheets in the library paint with these four: a new component that draws glass
+ * the house way is opaque for this reader without having to know that this
+ * block exists. The two that blur a translucency of their own, `PlOverlay`'s
+ * `glass` tone and a `PlWindowPane`, answer the same reader in their own
+ * classes.
+ *
+ * Three blocks for the three theme blocks above, each with the selector of the
+ * one it overrides, because the strengths are per theme and a rule only takes
+ * over from one at least as specific as itself. The forced dark block stays
+ * last, for the reason it is last up there. The surface is the first colour in
+ * each mix because the compiler writes that one out as the fallback for a
+ * browser with no `color-mix()`, and the opaque surface is the right one.
+ * ------------------------------------------------------------------------- */
+
+@media (prefers-reduced-transparency: reduce) {
+  :root,
+  .light,
+  [data-theme='light'] {
+    --plass-glass: color-mix(in srgb, var(--plass-surface), rgb(255 255 255) 62%);
+    --plass-glass-hover: color-mix(in srgb, var(--plass-surface), rgb(255 255 255) 76%);
+    --plass-glass-press: color-mix(in srgb, var(--plass-surface), rgb(255 255 255) 88%);
+    --plass-blur: none;
+    --plass-scrim-blur: none;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) and (prefers-color-scheme: dark) {
+  :root:not(.light):not([data-theme='light']) {
+    --plass-glass: color-mix(in srgb, var(--plass-surface), rgb(255 255 255) 7%);
+    --plass-glass-hover: color-mix(in srgb, var(--plass-surface), rgb(255 255 255) 11%);
+    --plass-glass-press: color-mix(in srgb, var(--plass-surface), rgb(255 255 255) 15%);
+    --plass-blur: none;
+  }
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .dark,
+  [data-theme='dark'] {
+    --plass-glass: color-mix(in srgb, var(--plass-surface), rgb(255 255 255) 7%);
+    --plass-glass-hover: color-mix(in srgb, var(--plass-surface), rgb(255 255 255) 11%);
+    --plass-glass-press: color-mix(in srgb, var(--plass-surface), rgb(255 255 255) 15%);
+    --plass-blur: none;
+  }
+}
+
 /* ---------------------------------------------------------------------------
  * Derived tokens
  *
- * Gradients, glows, tints, hairlines and focus rings are all one base colour at
- * different strengths, so they are computed rather than hand-picked per theme.
+ * A family's gradient, tint, soft fills, hairlines and focus ring are computed
+ * from its hand-picked values rather than picked per theme: the gradient from
+ * the two ends, the tint from `solid`, and the rest from `accent`.
  *
  * **This block is repeated for every theme root**, because a custom property
  * resolves its `var()`s on the element that declares it — declaring these only
@@ -575,8 +921,9 @@
  * `--plass-primary-solid` on a `<div>` changes the base and nothing else,
  * because every value derived from it was computed further up, where the old
  * colour still is. The class re-runs the whole block on that element, so the
- * gradient, the tint, the hairline and the ring follow the base that was just
- * written beside them. It is the one hook here that does not force a theme:
+ * gradient and the tint follow the ends that were just written beside them,
+ * and the soft fills, the hairline and the ring follow an `accent` written
+ * there too. It is the one hook here that does not force a theme:
  * `--plass-tint-strength` and the rest inherit from whichever theme root is
  * above, so a scoped family works the same in light and in dark.
  * ------------------------------------------------------------------------- */
@@ -753,6 +1100,25 @@
   margin: 0;
 }
 
+/* ---------------------------------------------------------------------------
+ * Struts
+ *
+ * An empty line in the type of the element that carries the class, for lining
+ * something up by a line of text it does not hold: a card's `headerAction` is
+ * centred with one so that its middle meets the middle of the title's first
+ * line. A zero-width space is the least a line box needs, and as generated
+ * content it never reaches the element's `textContent`.
+ *
+ * In CSS rather than in Tailwind because the character is an escape: a
+ * `content-[…]` utility holding it matches its rule only while every tool
+ * between the source and the `dist/` a project's Tailwind scans keeps the
+ * backslash as written.
+ * ------------------------------------------------------------------------- */
+
+.plass-strut::before {
+  content: '\200b';
+}
+
 /* ---------------------------------------------------------------------------
  * Links
  *
@@ -883,6 +1249,86 @@
   transition-duration: 0ms;
 }
 
+/*
+ * The bloom steps out of the way while the surface is being typed into.
+ *
+ * A pointer resting on a field is a pointer that has been parked: the hand is
+ * on the keyboard, the light is no longer following anything, and what it is
+ * doing is sitting under the sentence being written. Fading it out on the first
+ * keystroke and back in on the next real pointer move costs the effect nothing —
+ * it only ever *meant* anything while the pointer was moving — and gives the
+ * text a clean sheet for as long as the reader is on the keys.
+ *
+ * Only the bloom. The flash is drawn by `:active`, which cannot be held down
+ * and typed through.
+ *
+ * After the `:hover` rule, and at the same specificity: that order is what makes
+ * this the one that wins. The component writes and clears the attribute — see
+ * `useFieldLight`.
+ */
+.plass-glow[data-quiet]::before {
+  opacity: 0;
+}
+
+/* ---------------------------------------------------------------------------
+ * A fill that comes and goes with a state
+ *
+ * A `solid` toggle, a tick, a radio's ring, a switch's track, a chosen day, a
+ * step's bullet and the current page are glass, a groove or nothing while they
+ * are off and the family's gradient while they are on, and no browser eases a
+ * gradient to or from nothing. Set on the element itself, the gradient arrived
+ * in one frame and left in one. So it is a layer of its own, there in both
+ * states and faded by its opacity, which is the one thing about it a browser
+ * can ease — the way a `PlProgressBox` plate breathes.
+ *
+ * The component says when it is on with `--p-fill-on`, 0 or 1, from the state
+ * variants that used to set the gradient, and a control with an edge says how
+ * wide the edge is with `--p-fill-edge`, so the fill runs under the edge it
+ * turns transparent, as a background does. Both are only read here, never
+ * declared: this is a real class, which a consumer's own Tailwind build keeps
+ * outside the layer it puts utilities in, so a value declared here would beat
+ * the component's. Left unset, the fill is off and has no edge.
+ *
+ * Under what is drawn on the control and over its own background, which is what
+ * the negative depth in a box of its own is for, as the bloom's is above. It is
+ * in CSS rather than in Tailwind for the bloom's reason too: it is a gradient
+ * on a pseudo-element.
+ * ------------------------------------------------------------------------- */
+
+.plass-fill {
+  isolation: isolate;
+}
+
+.plass-fill::before,
+.plass-fill-layer {
+  position: absolute;
+  inset: calc(-1 * var(--p-fill-edge, 0px));
+  z-index: -1;
+  /* An edge as wide as the control's, and as clear, so the gradient is laid out
+     inside it and drawn under it exactly as the control's own background was. */
+  border: var(--p-fill-edge, 0px) solid transparent;
+  border-radius: inherit;
+  background-image: var(--p-fill);
+  opacity: var(--p-fill-on, 0);
+  pointer-events: none;
+  transition: opacity var(--plass-duration) var(--plass-ease);
+}
+
+.plass-fill::before {
+  content: '';
+}
+
+/*
+ * The same layer as an element, for a control whose two pseudo-elements are
+ * already the light: a `solid` `PlToggle` and a `PlPagination` page. The bloom
+ * is the `::before` of the same surface, which comes first, so the fill goes
+ * one step further down to stay under it. The surface's `.plass-glow` gives
+ * both depths a box of their own.
+ */
+.plass-fill-layer {
+  z-index: -2;
+}
+
 /* ---------------------------------------------------------------------------
  * The three dots in a bubble somebody is typing into
  *
@@ -927,28 +1373,56 @@
  * Two rules hold across all three. **Nothing changes the paint.** A Plass fill is a gradient and
  * a gradient cannot be interpolated, so what moves is a length or an opacity and
  * the fill itself is either there or not. And **the segment travels on
- * `inset-inline-start`**, not on a `transform` — the same trade the skeleton's
- * highlight makes, and for the same two reasons: it runs the other way under RTL
- * without being told, and the layout pass it costs is confined to a box with
- * nothing in it.
+ * `translate`**, never on an inset: an inset lays the box out again on every
+ * frame, and the browser records each of those frames as a layout shift, which
+ * a page loading behind an indicator pays for in its CLS for as long as it
+ * loads. The skeleton's highlight travels the same way.
+ *
+ * The segment rests at the inline start and a percentage `translate` resolves
+ * against its own width, so the keyframes are the old path divided by 45%: one
+ * whole width out before the start, to the end of the groove, which is 1 / 0.45
+ * of its width away. There is no logical `translate`, so the sign is turned
+ * round under RTL by hand, the way the marquee's is (see `.plass-marquee-track`
+ * for why it is written twice).
  * ------------------------------------------------------------------------- */
 
 @keyframes plass-progress-sweep {
   from {
-    inset-inline-start: -45%;
+    translate: calc(-100% * var(--p-anim-along, 1)) 0;
   }
   to {
-    inset-inline-start: 100%;
+    translate: calc(100% / 0.45 * var(--p-anim-along, 1)) 0;
   }
 }
 
 .plass-progress-sweep {
   position: absolute;
   inset-block: 0;
+  inset-inline-start: 0;
   inline-size: 45%;
   animation: plass-progress-sweep 1.15s var(--plass-ease) infinite;
 }
 
+.plass-progress-sweep:dir(rtl) {
+  --p-anim-along: -1;
+}
+
+.plass-progress-sweep:dir(ltr) {
+  --p-anim-along: 1;
+}
+
+/* The attribute, for a browser without `:dir()`; see `.plass-marquee-track` for
+   why the selectors are written this way and how deep they reach. */
+@supports not selector(:dir(rtl)) {
+  [dir='rtl'] .plass-progress-sweep {
+    --p-anim-along: -1;
+  }
+
+  [dir='rtl'] [dir='ltr'] .plass-progress-sweep {
+    --p-anim-along: 1;
+  }
+}
+
 /* The one place the library turns something, and the exception is the same one
    the spinner already has: an indeterminate indicator that holds still says the
    opposite of what it is for. `rotate` rather than `transform`, so nothing else
@@ -1005,10 +1479,17 @@
 /* ---------------------------------------------------------------------------
  * The travelling highlight on a placeholder
  *
- * `inset-inline-start` rather than a `transform`, which is the same trade the
- * rest of the library makes and for the same two reasons: it runs the other way
- * under RTL without being told, and the layout pass it costs is confined to a
- * box with nothing in it.
+ * It travels on `translate`, as the progress segment does and for the same
+ * reason: an inset would lay the highlight out again on every frame and record
+ * a layout shift each time, for as long as the page is waiting. The highlight
+ * rests at the left edge and is 60% of the box, so its path of -60% to 100% of
+ * the box is -100% to 100% / 0.6 of its own width.
+ *
+ * The left edge, and not the inline start, on purpose: this is a light
+ * crossing a surface rather than something read along a line, so it runs left
+ * to right in every writing direction, as the Flutter build's does. Its
+ * keyframes leave `--p-anim-along` out for the same reason, so a placeholder
+ * inside a right-to-left marquee does not inherit the turn.
  *
  * A pseudo-element rather than a child, so a `PlSkeleton` is one element per
  * shape and a stack of ten lines is ten nodes rather than twenty. The gradient
@@ -1020,10 +1501,10 @@
 
 @keyframes plass-skeleton-sweep {
   from {
-    inset-inline-start: -60%;
+    translate: -100% 0;
   }
   to {
-    inset-inline-start: 100%;
+    translate: calc(100% / 0.6) 0;
   }
 }
 
@@ -1031,6 +1512,7 @@
   content: '';
   position: absolute;
   inset-block: 0;
+  left: 0;
   inline-size: 60%;
   background-image: linear-gradient(90deg, transparent, var(--p-soft-press), transparent);
   animation: plass-skeleton-sweep 1.5s var(--plass-ease) infinite;
@@ -1079,18 +1561,25 @@
  * a writing direction, so the measurement is turned round once, here, rather
  * than in four places that could disagree.
  *
+ * A tab brought into view stops the fade's length short of the edge, through
+ * `scroll-padding-inline`. The reveal is not this sheet's — the browser does it
+ * for a focused tab and Base UI for the chosen one and the next one along — but
+ * both honour the padding, and without it the tab they brought into view would
+ * end flush with the edge, which is exactly where the fade is strongest.
+ *
  * The mask is dropped entirely while something inside holds a visible focus
- * ring. Focusing a tab scrolls it flush against the edge it came from, which is
- * exactly where the fade is strongest — so the one control whose outline has to
- * be legible would be the one drawn half transparent. `:focus-visible` and not
- * `:focus-within`: a tab that was clicked has the focus and no ring, and a bar
- * that stopped fading for the rest of the session because somebody pressed a
- * tab would have lost the signal at the first interaction.
+ * ring, as well: a reader walking the strip with the arrow keys is looking at
+ * the ring, and the one outline on the bar that has to be legible whole should
+ * not be one a fade can reach. `:focus-visible` and not `:focus-within`: a tab
+ * that was clicked has the focus and no ring, and a bar that stopped fading for
+ * the rest of the session because somebody pressed a tab would have lost the
+ * signal at the first interaction.
  * ------------------------------------------------------------------------- */
 
 .plass-fade-x {
   --p-fade: 1.5rem;
 
+  scroll-padding-inline: var(--p-fade);
   scrollbar-width: none;
   mask-image: linear-gradient(
     to right,
@@ -1418,6 +1907,81 @@
   inherits: false;
 }
 
+@property --p-lane-rows-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-rows-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-rows-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-rows-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-rows-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-area-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-area-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-area-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-area-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-area-xl {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-span-xs {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-span-sm {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-span-md {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-span-lg {
+  syntax: '*';
+  inherits: false;
+}
+
+@property --p-lane-span-xl {
+  syntax: '*';
+  inherits: false;
+}
+
 .plass-grid,
 .plass-flex {
   --p-gap-x: var(--p-gap-x-xs, 0px);
@@ -1432,6 +1996,21 @@
   --p-cols: var(--p-cols-xs, 2);
 }
 
+/*
+ * A masonry's deal at the width the window is: the list's rows, and each
+ * tile's place in them and how many it spans. The span is read by the tile's
+ * button, picture and caption as well, so it is the one of the three that
+ * inherits.
+ */
+.plass-gallery-masonry {
+  --p-lane-rows: var(--p-lane-rows-xs, none);
+}
+
+.plass-gallery-masonry > li {
+  --p-lane-area: var(--p-lane-area-xs, auto);
+  --p-lane-span: var(--p-lane-span-xs, 1);
+}
+
 /*
  * `PlFlex`'s axis. One slot rather than two, because `reverse` is not
  * responsive and the direction is: the component folds the two into the four
@@ -1496,6 +2075,15 @@
     --p-cols: var(--p-cols-sm, var(--p-cols-xs, 2));
   }
 
+  .plass-gallery-masonry {
+    --p-lane-rows: var(--p-lane-rows-sm, var(--p-lane-rows-xs, none));
+  }
+
+  .plass-gallery-masonry > li {
+    --p-lane-area: var(--p-lane-area-sm, var(--p-lane-area-xs, auto));
+    --p-lane-span: var(--p-lane-span-sm, var(--p-lane-span-xs, 1));
+  }
+
   .plass-flex {
     --p-dir: var(--p-dir-sm, var(--p-dir-xs, row));
   }
@@ -1525,6 +2113,15 @@
     --p-cols: var(--p-cols-md, var(--p-cols-sm, var(--p-cols-xs, 2)));
   }
 
+  .plass-gallery-masonry {
+    --p-lane-rows: var(--p-lane-rows-md, var(--p-lane-rows-sm, var(--p-lane-rows-xs, none)));
+  }
+
+  .plass-gallery-masonry > li {
+    --p-lane-area: var(--p-lane-area-md, var(--p-lane-area-sm, var(--p-lane-area-xs, auto)));
+    --p-lane-span: var(--p-lane-span-md, var(--p-lane-span-sm, var(--p-lane-span-xs, 1)));
+  }
+
   .plass-flex {
     --p-dir: var(--p-dir-md, var(--p-dir-sm, var(--p-dir-xs, row)));
   }
@@ -1554,6 +2151,24 @@
     --p-cols: var(--p-cols-lg, var(--p-cols-md, var(--p-cols-sm, var(--p-cols-xs, 2))));
   }
 
+  .plass-gallery-masonry {
+    --p-lane-rows: var(
+      --p-lane-rows-lg,
+      var(--p-lane-rows-md, var(--p-lane-rows-sm, var(--p-lane-rows-xs, none)))
+    );
+  }
+
+  .plass-gallery-masonry > li {
+    --p-lane-area: var(
+      --p-lane-area-lg,
+      var(--p-lane-area-md, var(--p-lane-area-sm, var(--p-lane-area-xs, auto)))
+    );
+    --p-lane-span: var(
+      --p-lane-span-lg,
+      var(--p-lane-span-md, var(--p-lane-span-sm, var(--p-lane-span-xs, 1)))
+    );
+  }
+
   .plass-flex {
     --p-dir: var(--p-dir-lg, var(--p-dir-md, var(--p-dir-sm, var(--p-dir-xs, row))));
   }
@@ -1601,6 +2216,30 @@
     );
   }
 
+  .plass-gallery-masonry {
+    --p-lane-rows: var(
+      --p-lane-rows-xl,
+      var(
+        --p-lane-rows-lg,
+        var(--p-lane-rows-md, var(--p-lane-rows-sm, var(--p-lane-rows-xs, none)))
+      )
+    );
+  }
+
+  .plass-gallery-masonry > li {
+    --p-lane-area: var(
+      --p-lane-area-xl,
+      var(
+        --p-lane-area-lg,
+        var(--p-lane-area-md, var(--p-lane-area-sm, var(--p-lane-area-xs, auto)))
+      )
+    );
+    --p-lane-span: var(
+      --p-lane-span-xl,
+      var(--p-lane-span-lg, var(--p-lane-span-md, var(--p-lane-span-sm, var(--p-lane-span-xs, 1))))
+    );
+  }
+
   .plass-flex {
     --p-dir: var(
       --p-dir-xl,
@@ -1649,7 +2288,7 @@
 
 .plass-anim {
   animation-duration: var(--p-anim-duration, 300ms);
-  animation-delay: var(--p-anim-delay, 0ms);
+  animation-delay: var(--p-anim-run-delay, var(--p-anim-delay, 0ms));
   animation-timing-function: var(--p-anim-ease, var(--plass-ease));
   animation-iteration-count: var(--p-anim-repeat, 1);
   animation-direction: var(--p-anim-direction, normal);
@@ -1657,6 +2296,57 @@
   animation-play-state: var(--p-anim-state, running);
 }
 
+/*
+ * The delay a run started with, kept until the next run.
+ *
+ * A new `animation-delay` applies to an animation that is already running, so
+ * a `delay` changed while a run was under way sent it back to waiting: a fade
+ * with a delay of 300ms given 1000ms at 400ms went back to nothing and waited
+ * again. `src/internal/animate.ts` writes the delay into `--p-anim-run-delay`
+ * as the run starts and takes it off when the next one does, so a new delay is
+ * waited out from the next run on. A run still waiting has nothing written, and
+ * a new delay is measured from when its wait began.
+ *
+ * Every element that reads it is reset here, because a custom property is
+ * inherited and an effect nested inside a running one has a delay of its own.
+ * The value written inline on an element outranks the reset. The arc of a
+ * `PlAnimateLighting` is a pseudo-element, and takes its root's.
+ */
+.plass-anim,
+.plass-marquee-track,
+.plass-anim-lighting {
+  --p-anim-run-delay: initial;
+}
+
+/*
+ * Every effect's slots are its own.
+ *
+ * An effect writes inline only the slots it has a value for, and a custom
+ * property is inherited, so a slot it left out was whatever an effect around
+ * it had written: a fade inside an endless linear turn eased linearly, took
+ * the turn's one pass under reduced motion, and inside a `timeline="view"`
+ * effect followed the scroll. Each element an effect writes its slots on
+ * starts them over here, and what it writes inline outranks this. The strips
+ * of a marquee and the lines of a headline read their root's, which is why
+ * they are not on the list.
+ */
+.plass-anim,
+.plass-anim-lighting,
+.plass-marquee,
+.plass-headline {
+  --p-anim-still-repeat: initial;
+  --p-anim-ease: initial;
+  --p-anim-timeline: initial;
+  --p-anim-range: initial;
+  --p-anim-opacity: initial;
+  --p-anim-scale: initial;
+  --p-anim-x: initial;
+  --p-anim-y: initial;
+  --p-anim-angle: initial;
+  --p-anim-angle-to: initial;
+  --p-anim-clip: initial;
+}
+
 /*
  * `timeline="view"`, and the whole of it.
  *
@@ -1904,7 +2594,7 @@
   filter: blur(var(--p-anim-glow-blur, 5px));
   animation-name: plass-anim-lighting;
   animation-duration: var(--p-anim-duration, 3s);
-  animation-delay: var(--p-anim-delay, 0ms);
+  animation-delay: var(--p-anim-run-delay, var(--p-anim-delay, 0ms));
   /* Linear unless a caller says otherwise, which is what `curve` does in the
      Flutter build: an arc that eases at both ends of a turn that has no ends
      reads as a stutter, and that is a default rather than a rule. */
@@ -1977,7 +2667,7 @@
   gap: var(--p-anim-gap, 0px);
   animation-name: plass-anim-marquee-x;
   animation-duration: var(--p-anim-duration, 12s);
-  animation-delay: var(--p-anim-delay, 0ms);
+  animation-delay: var(--p-anim-run-delay, var(--p-anim-delay, 0ms));
   /* Linear unless a caller insists otherwise. An eased marquee slows at both
      ends of a loop that has no ends, which reads as the page stuttering. */
   animation-timing-function: var(--p-anim-ease, linear);
@@ -1987,7 +2677,14 @@
   animation-play-state: var(--p-anim-state, running);
 }
 
-.plass-marquee-vertical .plass-marquee-track {
+/* `:where()` keeps this as specific as `.plass-marquee-track` on its own, so
+   the reduced-motion block below switches a vertical strip off as it does a
+   horizontal one. Written more specifically, the name outranked that block's
+   `animation: none`, so the first copy ran a pass in no time under the setting
+   and went on from its own clock afterwards, while the second, not drawn until
+   then, started afresh and ran behind it. The track is the strip's own child,
+   so a strip running across inside one running down keeps its own way. */
+:where(.plass-marquee-vertical) > .plass-marquee-track {
   flex-direction: column;
   animation-name: plass-anim-marquee-y;
 }
@@ -1999,15 +2696,43 @@
  *
  * There is no logical `translate`, so the sign is flipped by hand. The flex
  * track has already reversed on its own, which is what puts the overflow on the
- * other side for the translate to bring in. Written against the attribute as
- * well as `:dir()` because `:dir()` is newer than the rest of this sheet's
- * floor; the two agree on every page that set `dir`.
+ * other side for the translate to bring in. `:dir()` asks for the direction the
+ * track itself is in, which is the nearest `dir` above it however deeply one
+ * region is nested in another.
  */
-[dir='rtl'] .plass-marquee-track,
 .plass-marquee-track:dir(rtl) {
   --p-anim-along: -1;
 }
 
+.plass-marquee-track:dir(ltr) {
+  --p-anim-along: 1;
+}
+
+/*
+ * `:dir()` is newer than the rest of this sheet's floor (Chrome 120), so a
+ * browser without it reads the attribute instead, and only that browser:
+ * written beside `:dir()` for every browser, the attribute rules would outrank
+ * it where the two disagree.
+ *
+ * `[dir='rtl']` asks whether any ancestor is right to left rather than the
+ * nearest, so the second rule turns a left-to-right region inside a
+ * right-to-left page back again; it is the more specific, so the nearer `dir`
+ * wins. It is `[dir='rtl'] [dir='ltr']` and not a bare `[dir='ltr']`: a page
+ * that writes `dir="ltr"` on its root would otherwise turn every right-to-left
+ * region inside it the English way. That answers one region inside another in
+ * either order and goes no deeper: in such a browser, a right-to-left region
+ * inside a left-to-right one inside a right-to-left page runs the English way.
+ */
+@supports not selector(:dir(rtl)) {
+  [dir='rtl'] .plass-marquee-track {
+    --p-anim-along: -1;
+  }
+
+  [dir='rtl'] [dir='ltr'] .plass-marquee-track {
+    --p-anim-along: 1;
+  }
+}
+
 .plass-marquee[data-pause-on-hover]:hover .plass-marquee-track {
   animation-play-state: paused;
 }
@@ -2110,10 +2835,11 @@
  * theme below declares its `fg` and `bg` on that same element — so the derived
  * five follow whichever theme won without being restated fourteen times.
  *
- * The two dark palettes at the top are written twice on purpose — once for
- * `dark`, once for `auto` inside a dark page — because a media query cannot be
- * folded into a selector list. It is the same repetition the theme roots at the
- * top of this file make, for the same reason.
+ * The two house palettes are written more than once on purpose: once on the
+ * block for `light` and `dark`, and again on the theme roots for `auto`, where
+ * the dark one is there twice because a media query cannot be folded into a
+ * selector list. It is the same repetition the theme roots at the top of this
+ * file make, for the same reason.
  *
  * Every hue in the house themes is solved against its own background rather
  * than flipped: the light set runs dark and saturated on near-white, the dark
@@ -2125,7 +2851,8 @@
  * ------------------------------------------------------------------------- */
 
 .plass-code {
-  /* The light set, which is also what `auto` and `light` start from. */
+  /* The light set, which is what `light` is and what a theme that fills only
+     some of the slots starts from. */
   --p-code-bg: oklch(98.4% 0.003 262);
   --p-code-fg: oklch(30% 0.016 262);
 
@@ -2156,8 +2883,7 @@
   --p-code-mark-edge: color-mix(in oklab, var(--p-code-fg) 45%, transparent);
 }
 
-.plass-code[data-code-theme='dark'],
-:where(.dark, [data-theme='dark']) .plass-code[data-code-theme='auto'] {
+.plass-code[data-code-theme='dark'] {
   --p-code-bg: oklch(19.5% 0.014 262);
   --p-code-fg: oklch(90% 0.012 262);
 
@@ -2175,31 +2901,92 @@
   --p-code-del: oklch(75% 0.15 25);
 }
 
-/* Both ways of forcing light are named, the same pair the token block above
-   answers to. `auto` means "whatever the page is", so a page that has said it
-   is light with `.light` and one that has said it with `[data-theme='light']`
-   have to leave the block light alike — otherwise the page is white and the
-   code on it is the one dark rectangle nobody asked for. */
+/* `auto` is the palette of the nearest element that says which theme it is in,
+   however deep the nesting goes: a light preview box inside a dark page, or a
+   dark panel inside that. A selector can name a dark ancestor or a light one
+   but not which of the two is nearer, so the palette `auto` reads is declared
+   on every theme root instead, the way the tokens at the top of this file are,
+   and inheritance is what picks the nearest. The system preference is the
+   root's answer when the page has not given one, and both ways of forcing
+   light are named, so a page that has said it is light leaves the block light
+   either way. */
+:root,
+.light,
+[data-theme='light'] {
+  --p-code-auto-bg: oklch(98.4% 0.003 262);
+  --p-code-auto-fg: oklch(30% 0.016 262);
+
+  --p-code-auto-comment: oklch(58% 0.022 262);
+  --p-code-auto-keyword: oklch(48% 0.19 322);
+  --p-code-auto-string: oklch(46% 0.12 148);
+  --p-code-auto-number: oklch(50% 0.14 48);
+  --p-code-auto-function: oklch(48% 0.17 264);
+  --p-code-auto-type: oklch(45% 0.1 214);
+  --p-code-auto-variable: oklch(45% 0.12 28);
+  --p-code-auto-tag: oklch(48% 0.18 22);
+  --p-code-auto-attr: oklch(47% 0.13 82);
+  --p-code-auto-meta: oklch(52% 0.05 262);
+  --p-code-auto-add: oklch(45% 0.14 152);
+  --p-code-auto-del: oklch(48% 0.18 25);
+}
+
 @media (prefers-color-scheme: dark) {
-  :root:not(.light):not([data-theme='light']) .plass-code[data-code-theme='auto'] {
-    --p-code-bg: oklch(19.5% 0.014 262);
-    --p-code-fg: oklch(90% 0.012 262);
+  :root:not(.light):not([data-theme='light']) {
+    --p-code-auto-bg: oklch(19.5% 0.014 262);
+    --p-code-auto-fg: oklch(90% 0.012 262);
 
-    --p-code-comment: oklch(60% 0.024 262);
-    --p-code-keyword: oklch(76% 0.13 324);
-    --p-code-string: oklch(80% 0.13 148);
-    --p-code-number: oklch(81% 0.12 62);
-    --p-code-function: oklch(78% 0.12 258);
-    --p-code-type: oklch(82% 0.1 210);
-    --p-code-variable: oklch(82% 0.09 32);
-    --p-code-tag: oklch(77% 0.13 22);
-    --p-code-attr: oklch(85% 0.11 92);
-    --p-code-meta: oklch(70% 0.05 262);
-    --p-code-add: oklch(80% 0.14 152);
-    --p-code-del: oklch(75% 0.15 25);
+    --p-code-auto-comment: oklch(60% 0.024 262);
+    --p-code-auto-keyword: oklch(76% 0.13 324);
+    --p-code-auto-string: oklch(80% 0.13 148);
+    --p-code-auto-number: oklch(81% 0.12 62);
+    --p-code-auto-function: oklch(78% 0.12 258);
+    --p-code-auto-type: oklch(82% 0.1 210);
+    --p-code-auto-variable: oklch(82% 0.09 32);
+    --p-code-auto-tag: oklch(77% 0.13 22);
+    --p-code-auto-attr: oklch(85% 0.11 92);
+    --p-code-auto-meta: oklch(70% 0.05 262);
+    --p-code-auto-add: oklch(80% 0.14 152);
+    --p-code-auto-del: oklch(75% 0.15 25);
   }
 }
 
+.dark,
+[data-theme='dark'] {
+  --p-code-auto-bg: oklch(19.5% 0.014 262);
+  --p-code-auto-fg: oklch(90% 0.012 262);
+
+  --p-code-auto-comment: oklch(60% 0.024 262);
+  --p-code-auto-keyword: oklch(76% 0.13 324);
+  --p-code-auto-string: oklch(80% 0.13 148);
+  --p-code-auto-number: oklch(81% 0.12 62);
+  --p-code-auto-function: oklch(78% 0.12 258);
+  --p-code-auto-type: oklch(82% 0.1 210);
+  --p-code-auto-variable: oklch(82% 0.09 32);
+  --p-code-auto-tag: oklch(77% 0.13 22);
+  --p-code-auto-attr: oklch(85% 0.11 92);
+  --p-code-auto-meta: oklch(70% 0.05 262);
+  --p-code-auto-add: oklch(80% 0.14 152);
+  --p-code-auto-del: oklch(75% 0.15 25);
+}
+
+.plass-code[data-code-theme='auto'] {
+  --p-code-bg: var(--p-code-auto-bg);
+  --p-code-fg: var(--p-code-auto-fg);
+
+  --p-code-comment: var(--p-code-auto-comment);
+  --p-code-keyword: var(--p-code-auto-keyword);
+  --p-code-string: var(--p-code-auto-string);
+  --p-code-number: var(--p-code-auto-number);
+  --p-code-function: var(--p-code-auto-function);
+  --p-code-type: var(--p-code-auto-type);
+  --p-code-variable: var(--p-code-auto-variable);
+  --p-code-tag: var(--p-code-auto-tag);
+  --p-code-attr: var(--p-code-auto-attr);
+  --p-code-meta: var(--p-code-auto-meta);
+  --p-code-add: var(--p-code-auto-add);
+  --p-code-del: var(--p-code-auto-del);
+}
+
 /*
  * `mono` is the one theme that follows the page, and the only one with no hue
  * in it at all: the structure is carried by weight and by how far a run is
@@ -2572,19 +3359,30 @@
  * tiles across and a layout grid is counted in tracks, and two is the narrowest
  * arrangement that still reads as a set.
  *
- * The three lines below are what the slot is *for*. A grid and a quilt lay out
- * in CSS Grid off `--p-cols`; a masonry deals its items into lanes in JavaScript
- * and writes the count and the rows inline, because which lane an item lands in
- * depends on the heights of the items before it and no stylesheet can work that
- * out; and a justified row is flexbox, which needs no count at all — it fills
- * to the edge with whatever fits.
+ * The rules below are what the slot is *for*. A grid, a quilt and a masonry lay
+ * out in CSS Grid off `--p-cols`. A masonry also deals its items into lanes in
+ * JavaScript, because which lane an item lands in depends on the heights of the
+ * items before it and no stylesheet can work that out; it deals once for every
+ * lane count the columns name and writes each deal as `--p-lane-*` slots, which
+ * the chains above switch between, so a server's markup has the right lanes at
+ * every width. A justified row is flexbox, which needs no count at all — it
+ * fills to the edge with whatever fits.
  * ------------------------------------------------------------------------- */
 
 .plass-gallery-grid,
-.plass-gallery-quilted {
+.plass-gallery-quilted,
+.plass-gallery-masonry {
   grid-template-columns: repeat(var(--p-cols, 2), minmax(0, 1fr));
 }
 
+.plass-gallery-masonry {
+  grid-template-rows: var(--p-lane-rows);
+}
+
+.plass-gallery-masonry > li {
+  grid-area: var(--p-lane-area);
+}
+
 /*
  * What holds a justified gallery's last row down.
  *
@@ -2611,6 +3409,145 @@
   flex-basis: 0;
 }
 
+/* ---------------------------------------------------------------------------
+ * The float label
+ *
+ * `labelPlacement="float"`: a notched field whose label rests inside the
+ * control, where the value would be written, while the control is empty,
+ * nothing in the field has the focus and no popup of its is open. At rest it is
+ * set the way that placeholder is — the value's size, the regular weight and
+ * the muted ink — and the moment any of the three stops being true, the label
+ * rises into the notch at the notch's own weight and the placeholder comes
+ * back.
+ *
+ * `internal/notch.tsx` draws the same fieldset and legend a `notch` does and
+ * hands this block its numbers as custom properties on the frame. It is CSS
+ * rather than Tailwind because the condition is a relation between three
+ * elements — the frame's focus, the control's emptiness and a trigger's popup
+ * — and because an input can say it is empty through `:placeholder-shown`
+ * before any script has run, so a server-rendered field is right on its first
+ * frame.
+ *
+ * **The label moves on `top`, `inset-inline-start`, `font-size` and
+ * `font-weight`,** never on a transform: it is set again at every size on the
+ * way rather than scaled, so no frame of it is a resampled picture of the word.
+ * How smoothly the weight goes is the font's to say: a variable font passes
+ * through every weight between, and a font with a few fixed faces steps
+ * between them. Its line box is held at the notch's height throughout, which
+ * is what keeps the legend, and the edge drawn across its middle, where they
+ * are while the word grows and shrinks.
+ *
+ * **The gap folds rather than fades.** A legend cannot fill its own gap, so the
+ * legend is folded to nothing under a resting label and the fieldset draws its
+ * whole top edge again. It opens at once as the label starts to rise, so the
+ * word never crosses a line on its way up, and closes only once the label has
+ * come all the way down, so the line never runs through it on the way down.
+ * ------------------------------------------------------------------------- */
+
+.plass-notch-float > fieldset > legend {
+  max-width: 100%;
+  white-space: nowrap;
+  transition: max-width 0s;
+}
+
+.plass-notch-float > fieldset > legend > * {
+  display: block;
+  position: relative;
+  top: 0;
+  inset-inline-start: 0;
+  margin-inline: var(--p-notch-pad);
+  line-height: var(--p-notch-leading);
+  transition-property: top, inset-inline-start, font-size, font-weight, color;
+  transition-duration: var(--plass-duration);
+  transition-timing-function: var(--plass-ease);
+}
+
+/*
+ * At rest. Three ways to know the control is empty, one for each kind of
+ * control: an input's `:placeholder-shown`, a select trigger's
+ * `data-placeholder`, and `data-empty` on the frame from a component that knows
+ * and has no control that can say so, a picker's trigger. Autofill counts as a
+ * value before the reader has accepted it, since its text is already drawn where
+ * the label would rest.
+ *
+ * The same condition is written out in front of each of the three rules below,
+ * since the stylesheet ships to projects whose own build may not lower nesting.
+ */
+.plass-notch-float:not(:focus-within):not(:has([data-popup-open])):is(
+    [data-empty],
+    :has(.plass-float-control:placeholder-shown:not(:autofill)),
+    :has(.plass-float-control[data-placeholder])
+  )
+  > fieldset
+  > legend {
+  max-width: 0.01px;
+  transition-delay: var(--p-float-fold, var(--plass-duration));
+  /* A press on the words lands on the control under them, as it would on the
+     placeholder they stand in for. A select opens on the pointer going down on
+     its trigger, which a label in front of it would swallow. */
+  pointer-events: none;
+}
+
+.plass-notch-float:not(:focus-within):not(:has([data-popup-open])):is(
+    [data-empty],
+    :has(.plass-float-control:placeholder-shown:not(:autofill)),
+    :has(.plass-float-control[data-placeholder])
+  )
+  > fieldset
+  > legend
+  > * {
+  top: var(--p-float-y);
+  inset-inline-start: var(--p-float-x, 0px);
+  font-size: var(--p-float-text);
+  font-weight: 400;
+  color: var(--plass-muted-fg);
+}
+
+/*
+ * The placeholder steps out of sight while the label rests where it is written,
+ * and only out of sight: it stays in the accessibility tree. A reader who moves
+ * to the control gives it the focus, which raises the label and brings the
+ * placeholder back, so what a screen reader says there is what the page shows.
+ * The Flutter build keeps it the same way.
+ */
+.plass-notch-float:not(:focus-within):not(:has([data-popup-open])):is(
+    [data-empty],
+    :has(.plass-float-control:placeholder-shown:not(:autofill)),
+    :has(.plass-float-control[data-placeholder])
+  )
+  .plass-float-control::placeholder,
+.plass-notch-float:not(:focus-within):not(:has([data-popup-open])):is(
+    [data-empty],
+    :has(.plass-float-control:placeholder-shown:not(:autofill)),
+    :has(.plass-float-control[data-placeholder])
+  )
+  .plass-float-placeholder {
+  color: transparent;
+}
+
+/* The placeholder comes back as the label leaves, over the same time. */
+.plass-notch-float .plass-float-control::placeholder,
+.plass-notch-float .plass-float-placeholder {
+  transition: color var(--plass-duration) var(--plass-ease);
+}
+
+/*
+ * A press that went down on the control comes up on it. The focus the press
+ * hands the control ends the rest before the button is let go, so the label is
+ * back in reach of the pointer while it is still lying over the words, and a
+ * quick click on them came up on the label. The browser then sent the click to
+ * the frame round both, and a picker that opens on a click, such as
+ * `PlTreeSelect`, stayed shut. The label lets the pointer through until that
+ * press is over.
+ *
+ * Only a press on the control: one on the label itself leaves the control out
+ * of the chain `:active` marks, so clicking a risen label still focuses the
+ * field.
+ */
+.plass-notch-float:has(> :not(fieldset):active) > fieldset > legend {
+  pointer-events: none;
+}
+
 /* ---------------------------------------------------------------------------
  * Reduced motion
  *
@@ -2618,7 +3555,9 @@
  * transitions: someone who has asked for less movement is asking for state
  * changes to *arrive*, not to be taken away. The colours still change; they
  * simply stop easing, and the light stops trailing the pointer across the
- * surface — it is either on the control or it is not.
+ * surface — it is either on the control or it is not. The colours are the house
+ * transition's, which is a set of utilities rather than a class, so it says so
+ * beside itself in `internal/styles.ts`.
  * ------------------------------------------------------------------------- */
 
 @media (prefers-reduced-motion: reduce) {
@@ -2627,12 +3566,30 @@
     transition-duration: 1ms;
   }
 
+  /* A fill that comes with a state arrives with it, as the colours round it
+     do. */
+  .plass-fill::before,
+  .plass-fill-layer {
+    transition-duration: 0ms;
+  }
+
+  /* A float label arrives where it is going, and the gap under it opens and
+     closes with it rather than a moment after. */
+  .plass-notch-float {
+    --p-float-fold: 0ms;
+  }
+
+  .plass-notch-float > fieldset > legend > *,
+  .plass-notch-float .plass-float-control::placeholder,
+  .plass-notch-float .plass-float-placeholder {
+    transition-duration: 0ms;
+  }
+
   /* The highlight stops travelling and the placeholder pulses in place. It is
      kept running rather than stopped, because a skeleton that holds still is
      indistinguishable from an empty box that finished loading with nothing in
      it. */
   .plass-skeleton::after {
-    inset-inline-start: 0;
     inline-size: 100%;
     background-image: none;
     animation: plass-skeleton-pulse 2.4s var(--plass-ease) infinite;
@@ -2650,7 +3607,6 @@
      two that genuinely have to keep turning or cycling are slowed to where they
      stop reading as motion. */
   .plass-progress-sweep {
-    inset-inline-start: 0;
     inline-size: 100%;
     animation: plass-progress-pulse 1.8s var(--plass-ease) infinite;
   }
@@ -2666,17 +3622,44 @@
   /*
    * The `PlAnimate*` components go the other way from the indicators above, and
    * the difference is what each of them is saying. A spinner that stops is
-   * lying about whether anything is happening; an entrance that does not play
-   * has still delivered its content, which is the only thing it was ever
-   * carrying.
+   * lying about whether anything is happening; an effect that does not move has
+   * still delivered what it was carrying — which for an entrance is the content
+   * and for an exit is its absence.
+   *
+   * So an effect is not switched off but run in no time at all. Nothing changes
+   * until the moment it would have started, its `delay` included, and then it
+   * is on its last frame: an exit has gone, a turn has turned, and
+   * `animationend` arrives for a caller waiting on it. Until that moment the
+   * element is as it is, because the fill runs forwards only — an effect
+   * waiting for its trigger is held at the start of its delay, which with no
+   * backwards fill draws nothing, rather than on a first frame at `opacity: 0`
+   * that would blank the page. The delay is a millisecond at the least, which
+   * is what keeps a waiting effect there: with no delay and no duration, a run
+   * held at its very start has already finished.
    *
-   * `animation: none` rather than a zero duration, because the shorthand also
-   * clears `fill-mode` — and the fill is what was holding an untriggered
-   * element on its own first frame at `opacity: 0`. Left in place, respecting a
-   * reader's preference would blank the page.
+   * A count of `infinite` is one pass here, which `--p-anim-still-repeat`
+   * says: an endless run has no last frame of its own. And a scroll-linked
+   * effect goes back to the clock, because a zero duration spread over a scroll
+   * range is an effect that snaps at one point of the scroll.
    */
-  .plass-anim,
-  .plass-marquee-track,
+  .plass-anim {
+    animation-duration: 0s;
+    animation-delay: max(1ms, var(--p-anim-run-delay, var(--p-anim-delay, 0ms)));
+    animation-iteration-count: var(--p-anim-still-repeat, var(--p-anim-repeat, 1));
+    animation-fill-mode: forwards;
+    animation-timeline: auto;
+  }
+
+  /* The one effect whose last frame is not the element's own: before it has
+     run, a turn stands at the angle it turns to, which is what it is waiting to
+     deliver. The keyframe outranks this once the run has begun. */
+  .plass-anim-rotate {
+    rotate: var(--p-anim-angle-to, 0deg);
+  }
+
+  /* A strip that ends is the exception, below. `:where()` keeps the selector
+     as specific as `.plass-marquee-track` on its own. */
+  :where(.plass-marquee:not([data-plass-finite])) > .plass-marquee-track,
   .plass-headline-item,
   .plass-caret {
     animation: none;
@@ -2707,6 +3690,105 @@
      skeleton makes: the decoration survives, the motion does not. */
   .plass-anim-lighting::before {
     background: var(--p-anim-glow-to);
+  }
+
+  .plass-anim-lighting:not([data-plass-finite])::before {
     animation: none;
   }
+
+  /*
+   * A strip or a light that ends is run in no time instead, as an effect
+   * above is, so that it lands and `animationend` arrives. Neither fills
+   * either side of its run, so nothing it draws moves: the strip stands where
+   * it started and the arc is the even glow. `src/internal/animate.ts` marks
+   * one that has landed, which is what keeps it there when the reader gives
+   * movement back; an endless one is switched off and goes on from its start.
+   */
+  .plass-marquee[data-plass-finite] > .plass-marquee-track,
+  .plass-anim-lighting[data-plass-finite]::before {
+    animation-duration: 0s;
+    animation-delay: max(1ms, var(--p-anim-run-delay, var(--p-anim-delay, 0ms)));
+    animation-fill-mode: none;
+  }
+}
+
+/*
+ * A run that landed under reduced motion, until it runs again.
+ *
+ * Its keyframe goes on counting its time from when it began, so a fade that
+ * landed in no time and was handed its duration back while it would still have
+ * been running stood that far into the run and played on from there. The
+ * timing the block above lands it with holds it on its last frame whatever the
+ * setting is now. `src/internal/animate.ts` marks a finite run on the clock
+ * when it lands, and takes the mark off when the run starts again. An endless
+ * run is never marked: it has no last frame to stay on, and goes on from where
+ * its passes would have got to.
+ *
+ * Unless `paused` is holding it, finite or endless. A paused keyframe stands
+ * where its clock stopped: the start of a pass for an endless run that landed,
+ * so an endless fade held while the reader gave movement back went from fully
+ * drawn to nearly gone, and ahead of its start for a run held before its delay
+ * was over, so a fade held there went from fully drawn to nothing and a turn
+ * from its `to` angle back to its `from`. The script marks such a run while
+ * reduced motion shows it, and takes the mark off when it is let go, which
+ * plays it on from where its clock stands. Held before its delay was over, it
+ * stands where the block above stands a waiting effect, which is where a turn
+ * stands too.
+ */
+.plass-anim[data-plass-landed],
+.plass-anim[data-plass-held] {
+  animation-duration: 0s;
+  animation-delay: max(1ms, var(--p-anim-run-delay, var(--p-anim-delay, 0ms)));
+  animation-iteration-count: var(--p-anim-still-repeat, var(--p-anim-repeat, 1));
+  animation-fill-mode: forwards;
+}
+
+.plass-anim-rotate[data-plass-held] {
+  rotate: var(--p-anim-angle-to, 0deg);
+}
+
+/*
+ * A light held the same way keeps the even glow the setting draws. Its arc is
+ * left as it is underneath, an endless one made paused at its start when the
+ * setting goes and a finite one paused where its clock stopped, so once it is
+ * let go it turns from there, as it did. Unmarked, the arc came back at the
+ * angle its clock stood at, which is `0deg` for an endless light.
+ */
+.plass-anim-lighting[data-plass-held]::before {
+  background: var(--p-anim-glow-to);
+}
+
+/*
+ * A strip held the same way keeps the one copy the setting draws, in the box
+ * that scrolls along it, so what the reader scrolled to stays where it is.
+ * Unmarked, the copies came back and the box clipped them while the strip was
+ * still paused. Its keyframe is left as it is underneath, which already stands
+ * where the setting showed it, so once it is let go the strip goes on as it
+ * would have without the hold. The child combinator leaves a strip nested
+ * inside it alone.
+ */
+.plass-marquee[data-plass-held] {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.plass-marquee-vertical[data-plass-held] {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.plass-marquee[data-plass-held] > .plass-marquee-track + .plass-marquee-track {
+  display: none;
+}
+
+/*
+ * A strip or a light that landed under reduced motion, marked on its root, has
+ * its keyframe taken off until it runs again: the strip, every copy of it,
+ * stands where it started, where the setting showed it, and the arc where a
+ * turn ends, which is where it begins. Played again from the start, a finite
+ * marquee or light set off on its whole run once more.
+ */
+.plass-marquee[data-plass-landed] > .plass-marquee-track,
+.plass-anim-lighting[data-plass-landed]::before {
+  animation-name: none;
 }