plass-ui 1.7.0 → 1.8.1

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
@@ -198,6 +201,239 @@
   --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)
  *
@@ -319,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
@@ -448,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;
@@ -527,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;
@@ -597,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
@@ -612,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.
  * ------------------------------------------------------------------------- */
@@ -790,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
  *
@@ -1044,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
@@ -1122,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
@@ -1137,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;
   }
 }
 
@@ -1148,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;
@@ -1542,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);
@@ -1556,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
@@ -1620,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));
   }
@@ -1649,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)));
   }
@@ -1678,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))));
   }
@@ -1725,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,
@@ -1773,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);
@@ -1781,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.
  *
@@ -2028,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. */
@@ -2101,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);
@@ -2111,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;
 }
@@ -2123,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;
 }
@@ -2758,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.
  *
@@ -2891,6 +3503,13 @@
   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)),
@@ -2971,7 +3590,6 @@
      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;
@@ -2989,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;
   }
@@ -3027,7 +3644,7 @@
    */
   .plass-anim {
     animation-duration: 0s;
-    animation-delay: max(1ms, var(--p-anim-delay, 0ms));
+    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;
@@ -3040,7 +3657,9 @@
     rotate: var(--p-anim-angle-to, 0deg);
   }
 
-  .plass-marquee-track,
+  /* 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;
@@ -3071,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;
 }