plass-ui 1.3.0 → 1.4.0

package/dist/tokens.css

@@ -135,6 +135,43 @@
   --plass-info-on-solid: #ffffff;
 }
 
+/* ---------------------------------------------------------------------------
+ * The breakpoint ladder
+ *
+ * Four widths, and **one place they are written down**. Everything in this
+ * library that changes with the width of the window reads them: the grid's
+ * `@variant` blocks below, the classes that keep a sidebar off a narrow screen,
+ * and the `matchMedia` queries `usePlBreakpoint` asks.
+ *
+ * They are Tailwind's own, which is the whole point — a layout decided by a
+ * `md:` utility and a layout decided by this library have to change at the same
+ * moment, or a page has two answers about how wide it is. So the source is
+ * Tailwind's `--breakpoint-*` theme, and a project that moves one moves both:
+ *
+ *   @theme { --breakpoint-md: 50rem; }
+ *
+ * A media query's *condition* cannot read a custom property — `@media (width >=
+ * var(--x))` is not valid CSS and never will be — so the CSS half cannot follow
+ * a value set at runtime. It follows the theme at build time instead, through
+ * the `@variant` blocks, and these four tokens are how the **JavaScript** half
+ * reads the same answer: it is a value rather than a condition there, so it can
+ * be read off the document.
+ *
+ * The fallback is what makes them safe to read before Tailwind has resolved
+ * anything at all — a consumer on the precompiled `plass-ui/styles.css` has our
+ * values baked in, and these say what they are.
+ *
+ * Setting a `--plass-breakpoint-*` directly moves the JavaScript half **and not
+ * the CSS half**, which is almost never what anybody wants. Set Tailwind's.
+ * ------------------------------------------------------------------------- */
+
+:root {
+  --plass-breakpoint-sm: var(--breakpoint-sm, 40rem);
+  --plass-breakpoint-md: var(--breakpoint-md, 48rem);
+  --plass-breakpoint-lg: var(--breakpoint-lg, 64rem);
+  --plass-breakpoint-xl: var(--breakpoint-xl, 80rem);
+}
+
 /* ---------------------------------------------------------------------------
  * Light theme (default)
  *
@@ -268,6 +305,92 @@
   --plass-warning-accent: #96600c;
   --plass-danger-accent: #bb3339;
   --plass-info-accent: #1668ae;
+
+  /* Eight hues in a fixed order, and the one place in the library where a
+     colour is not a semantic role.
+
+     A series is an *entity* — a region, a plan, a competitor — and nothing
+     about it says success or danger. What the colour has to do is stay the same
+     colour when the chart is filtered, and be tellable apart from its
+     neighbours by every reader. So these are not the six families reused: those
+     were picked to mean something on a control, they are only six, and two of
+     them (`secondary`, `info`) sit close enough in hue that adjacent series
+     would collapse.
+
+     What the eight satisfy, measured against this file's own grounds rather
+     than asserted:
+
+     - every slot at 4:1 or better on white and 4.9:1 or better on the dark
+       sheet, so a 2px line is a line;
+     - adjacent pairs at least 10.4 apart in OKLab (×100) under simulated
+       protanopia and deuteranopia, which is the pair that touches in a stack
+       or a legend;
+     - chroma at or above 0.10, below which a hue reads as grey and stops
+       carrying identity at all.
+
+     The order is the mechanism, not a preference: slots are handed out in
+     sequence and never cycled, which is what keeps the *adjacent* pairs the
+     ones that were checked. A ninth series is not a ninth colour; it is an
+     "Other" row, or a second chart.
+
+     Slot one is the page's own `primary`, not a solved hue like the rest — a
+     one-series chart should look like it belongs to the page it is on. It is
+     the one slot louder than its neighbours (4.9:1 against their 4:1), and
+     that is the price. */
+  --plass-chart-1: #3f63f2;
+  --plass-chart-2: #cf5c00;
+  --plass-chart-3: #e23895;
+  --plass-chart-4: #997b00;
+  --plass-chart-5: #0288b8;
+  --plass-chart-6: #039227;
+  --plass-chart-7: #a657ed;
+  --plass-chart-8: #058f80;
+
+  /* The sequential ramp — one hue, light to dark, for a mark whose colour is a
+     *magnitude* rather than an identity.
+
+     A different job from the eight above and so a different set, not a subset
+     of them. The eight are solved to be as far apart as possible, which is
+     exactly what a magnitude must not be: a heatmap coloured from a categorical
+     ramp says its cells are five unrelated things. Here the order is the whole
+     meaning, so what is solved for is the opposite — one hue throughout,
+     lightness strictly falling, and the palest step still at 2.07:1 on the
+     sheet, because below that the low end of the scale reads as empty rather
+     than as small.
+
+     Five steps and not a continuous gradient, because a reader cannot rank a
+     continuum by eye and can rank five steps against a legend. */
+  --plass-chart-seq-1: #95b5ee;
+  --plass-chart-seq-2: #6e9aec;
+  --plass-chart-seq-3: #477ee8;
+  --plass-chart-seq-4: #2763d7;
+  --plass-chart-seq-5: #1346ab;
+
+  /* And the diverging ramp, for a value with a **middle** — a change against
+     last quarter, a temperature against the average. Two hues away from a pale
+     neutral, so which side of zero a cell is on is the first thing read and how
+     far from it the second. The neutral is not white: a cell at zero is a
+     reading, and a white cell is a hole in the grid. */
+  --plass-chart-div-1: #055d7e;
+  --plass-chart-div-2: #2095c5;
+  --plass-chart-div-3: #b1b4b9;
+  --plass-chart-div-4: #d4614c;
+  --plass-chart-div-5: #9a210c;
+
+  /* What is legible written *on* a ramp step, which flips partway down both.
+     A heatmap that writes its numbers in the cells needs this and nothing else
+     does. */
+  --plass-chart-seq-on-1: var(--plass-fg);
+  --plass-chart-seq-on-2: var(--plass-fg);
+  --plass-chart-seq-on-3: var(--plass-fg);
+  --plass-chart-seq-on-4: var(--plass-surface);
+  --plass-chart-seq-on-5: var(--plass-surface);
+
+  --plass-chart-div-on-1: var(--plass-surface);
+  --plass-chart-div-on-2: var(--plass-fg);
+  --plass-chart-div-on-3: var(--plass-fg);
+  --plass-chart-div-on-4: var(--plass-fg);
+  --plass-chart-div-on-5: var(--plass-surface);
 }
 
 /* ---------------------------------------------------------------------------
@@ -322,6 +445,39 @@
     --plass-warning-accent: #f2b74e;
     --plass-danger-accent: #ff8a8f;
     --plass-info-accent: #5fb4ee;
+
+    --plass-chart-1: #93a8ff;
+    --plass-chart-2: #e66700;
+    --plass-chart-3: #ef45a0;
+    --plass-chart-4: #b08e05;
+    --plass-chart-5: #049fd6;
+    --plass-chart-6: #07b031;
+    --plass-chart-7: #b264fb;
+    --plass-chart-8: #02a998;
+
+    --plass-chart-seq-1: #294c91;
+    --plass-chart-seq-2: #3263c3;
+    --plass-chart-seq-3: #3f7cf3;
+    --plass-chart-seq-4: #6a9cfb;
+    --plass-chart-seq-5: #9ebef8;
+
+    --plass-chart-div-1: #066082;
+    --plass-chart-div-2: #0892c4;
+    --plass-chart-div-3: #aeb1b6;
+    --plass-chart-div-4: #d15e49;
+    --plass-chart-div-5: #9a2b19;
+
+    --plass-chart-seq-on-1: var(--plass-fg);
+    --plass-chart-seq-on-2: var(--plass-fg);
+    --plass-chart-seq-on-3: var(--plass-surface);
+    --plass-chart-seq-on-4: var(--plass-surface);
+    --plass-chart-seq-on-5: var(--plass-surface);
+
+    --plass-chart-div-on-1: var(--plass-fg);
+    --plass-chart-div-on-2: var(--plass-surface);
+    --plass-chart-div-on-3: var(--plass-surface);
+    --plass-chart-div-on-4: var(--plass-surface);
+    --plass-chart-div-on-5: var(--plass-fg);
   }
 }
 
@@ -366,6 +522,39 @@
   --plass-warning-accent: #f2b74e;
   --plass-danger-accent: #ff8a8f;
   --plass-info-accent: #5fb4ee;
+
+  --plass-chart-1: #93a8ff;
+  --plass-chart-2: #e66700;
+  --plass-chart-3: #ef45a0;
+  --plass-chart-4: #b08e05;
+  --plass-chart-5: #049fd6;
+  --plass-chart-6: #07b031;
+  --plass-chart-7: #b264fb;
+  --plass-chart-8: #02a998;
+
+  --plass-chart-seq-1: #294c91;
+  --plass-chart-seq-2: #3263c3;
+  --plass-chart-seq-3: #3f7cf3;
+  --plass-chart-seq-4: #6a9cfb;
+  --plass-chart-seq-5: #9ebef8;
+
+  --plass-chart-div-1: #066082;
+  --plass-chart-div-2: #0892c4;
+  --plass-chart-div-3: #aeb1b6;
+  --plass-chart-div-4: #d15e49;
+  --plass-chart-div-5: #9a2b19;
+
+  --plass-chart-seq-on-1: var(--plass-fg);
+  --plass-chart-seq-on-2: var(--plass-fg);
+  --plass-chart-seq-on-3: var(--plass-surface);
+  --plass-chart-seq-on-4: var(--plass-surface);
+  --plass-chart-seq-on-5: var(--plass-surface);
+
+  --plass-chart-div-on-1: var(--plass-fg);
+  --plass-chart-div-on-2: var(--plass-surface);
+  --plass-chart-div-on-3: var(--plass-surface);
+  --plass-chart-div-on-4: var(--plass-surface);
+  --plass-chart-div-on-5: var(--plass-fg);
 }
 
 /* ---------------------------------------------------------------------------
@@ -508,6 +697,24 @@
   --plass-info-line: color-mix(in srgb, var(--plass-info-accent) 30%, transparent);
   --plass-info-line-hover: color-mix(in srgb, var(--plass-info-accent) 48%, transparent);
   --plass-info-ring: color-mix(in srgb, var(--plass-info-solid) 55%, transparent);
+  /* The three greys a chart draws its frame with, derived so a project that
+     re-tones its border moves the grid with it.
+
+     The grid is the faintest thing on the plot on purpose: a gridline that
+     competes with a data line is a reader deciding which is which. The axis is
+     the border at full strength, because it is the edge of the picture rather
+     than a reading. And the baseline is allowed to be darker than either — it
+     is where a bar starts from and where zero is, which is a fact about the
+     data rather than furniture. */
+  --plass-chart-grid: color-mix(in srgb, var(--plass-border) 70%, transparent);
+  --plass-chart-axis: var(--plass-border);
+  --plass-chart-baseline: color-mix(in srgb, var(--plass-muted-fg) 35%, transparent);
+  /* And the sheet itself, for the 2px between two marks that touch — a
+     marker's ring, the seam between two stacked bands, the halo round a
+     scatter's dot. It is the surface and not a stroke, because a coloured line
+     drawn between two marks is ink that is not data; what separates them is the
+     page showing through. */
+  --plass-chart-gap: var(--plass-surface);
 }
 
 /* ---------------------------------------------------------------------------
@@ -803,7 +1010,152 @@
 }
 
 /* ---------------------------------------------------------------------------
- * The grid
+ * A strip that runs off the end of its own box
+ *
+ * A row that scrolls has to say so, and on a Mac it cannot: the scrollbar is an
+ * overlay that appears while the strip is moving and is invisible the rest of
+ * the time, which is every moment a reader is deciding whether there is
+ * anything more to look at. On Windows the same bar is fifteen pixels of
+ * permanent furniture under a row of tab labels. Neither is a signal, so both
+ * are taken away and the ends are faded instead — and *only* the end that still
+ * has something behind it, which is the part that makes it a signal rather than
+ * a decoration.
+ *
+ * The fade is a `mask-image` rather than two gradient overlays because a bar
+ * can sit on anything. An overlay has to be painted in the colour of whatever
+ * is behind the strip, and a component does not know that: a `PlTabs` inside a
+ * `PlCard` inside a tinted section has three candidate backgrounds and no way
+ * to choose. A mask takes the pixels away instead, so whatever is behind shows
+ * through and the answer is right on every surface.
+ *
+ * The two lengths are per-instance slots because *which* end fades is measured
+ * rather than declared — it depends on how far along the strip is, which no
+ * prop can know. `0px` on both ends is a gradient with no transition in it at
+ * all, so a strip that fits is not paying for a mask it does not need.
+ *
+ * They are physical (`left`, `right`) while the state the component publishes
+ * is logical, and the split is the same one `PlTabs` already makes for its
+ * indicator: a CSS gradient runs in a physical direction and a reader runs in
+ * a writing direction, so the measurement is turned round once, here, rather
+ * than in four places that could disagree.
+ *
+ * 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.
+ * ------------------------------------------------------------------------- */
+
+.plass-fade-x {
+  --p-fade: 1.5rem;
+
+  scrollbar-width: none;
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    #000 var(--p-fade-left, 0px),
+    #000 calc(100% - var(--p-fade-right, 0px)),
+    transparent
+  );
+}
+
+.plass-fade-x::-webkit-scrollbar {
+  display: none;
+}
+
+.plass-fade-x:has(:focus-visible) {
+  mask-image: none;
+}
+
+/* ---------------------------------------------------------------------------
+ * Showing something at some widths and not others
+ *
+ * `PlShow`, and the reason it is CSS rather than a `useMediaQuery` and a
+ * ternary. A media query answered in JavaScript is `false` on a server and on
+ * the first frame a browser renders, so a JavaScript gate draws the wrong half
+ * and then throws it away — a flash on every page load rather than an edge
+ * case. The stylesheet knows the width before React has been asked anything.
+ *
+ * `display: contents` while it is showing, so the element is **not a box**: its
+ * children take part in the parent's layout exactly as they would have without
+ * it, and a gate inside a flex row does not become a flex item. `display: none`
+ * is what hides, which also takes the subtree off the accessibility tree — a
+ * gate that only moved it off screen would leave a screen reader reading both
+ * halves of a responsive layout.
+ *
+ * Attribute selectors rather than Tailwind's `max-md:hidden`, and that is not a
+ * preference: the real classes in this file are emitted *after* the utilities so
+ * they can outrank them, which would make a `display: contents` here beat the
+ * very variant meant to hide it. Nine rules that only fight each other are
+ * simpler than one that has to win a sort it does not control.
+ *
+ * Both bounds at once is `[data-from]` and `[data-until]` on one element, and
+ * it resolves by source order: the `from` rules come first, so a rung at or
+ * above `until` is hidden by the later rule whatever `from` said.
+ * ------------------------------------------------------------------------- */
+
+.plass-show {
+  display: contents;
+}
+
+/* Below its floor, a gate with a `from` is closed. Each rung then opens it. */
+.plass-show[data-from] {
+  display: none;
+}
+
+@variant sm {
+  .plass-show[data-from='sm'] {
+    display: contents;
+  }
+}
+
+@variant md {
+  .plass-show[data-from='md'] {
+    display: contents;
+  }
+}
+
+@variant lg {
+  .plass-show[data-from='lg'] {
+    display: contents;
+  }
+}
+
+@variant xl {
+  .plass-show[data-from='xl'] {
+    display: contents;
+  }
+}
+
+/* And `until` closes it again from its own rung up. */
+@variant sm {
+  .plass-show[data-until='sm'] {
+    display: none;
+  }
+}
+
+@variant md {
+  .plass-show[data-until='md'] {
+    display: none;
+  }
+}
+
+@variant lg {
+  .plass-show[data-until='lg'] {
+    display: none;
+  }
+}
+
+@variant xl {
+  .plass-show[data-until='xl'] {
+    display: none;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * The grid, and the responsive slots
  *
  * `PlGrid` is a flex row and `PlGridItem` is a width in it, which is the shape
  * a twelve-column grid has had since long before CSS had one of its own — and
@@ -825,16 +1177,49 @@
  * chains get long at `xl`; that is the cost of keeping the DOM lean, and it is
  * paid once here rather than on every grid item in a consumer's app.
  *
- * The widths are Tailwind's own breakpoints, so a Plass grid and an `md:`
- * utility change at the same moment.
+ * The widths are Tailwind's own breakpoints — `@variant` rather than a written
+ * out `@media`, so a project that moves one in its theme moves this with it.
+ * See "The breakpoint ladder" above.
+ *
+ * `.plass-container`'s measure and `.plass-flex`'s axis ride the same four
+ * blocks, and any responsive prop added later should too. That is the whole
+ * cost of one: a slot in `internal/responsive.ts` and four lines here. CSS has
+ * no loop, so four lines is the floor — which is the reason to keep the number
+ * of responsive props deliberate rather than to make every prop responsive
+ * because it could be.
+ *
+ * The two gutters are declared for `.plass-grid` and `.plass-flex` together.
+ * They are one question asked by two components — the space *between* the
+ * things in a box — and a second copy of the chain is a second place for it to
+ * drift.
  * ------------------------------------------------------------------------- */
 
-.plass-grid {
-  --p-cols: var(--p-cols-xs, 12);
+.plass-grid,
+.plass-flex {
   --p-gap-x: var(--p-gap-x-xs, 0px);
   --p-gap-y: var(--p-gap-y-xs, 0px);
 }
 
+.plass-grid {
+  --p-cols: var(--p-cols-xs, 12);
+}
+
+.plass-gallery {
+  --p-cols: var(--p-cols-xs, 2);
+}
+
+/*
+ * `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
+ * values `flex-direction` takes, so a breakpoint changes the axis without
+ * having to restate which end it starts from.
+ */
+.plass-flex {
+  --p-dir: var(--p-dir-xs, row);
+
+  flex-direction: var(--p-dir);
+}
+
 .plass-grid-item {
   --p-span: var(--p-span-xs, var(--p-cols, 12));
   --p-offset: var(--p-offset-xs, 0);
@@ -853,39 +1238,102 @@
   margin-inline-start: calc(var(--p-track) * min(var(--p-offset), var(--p-cols, 12)));
 }
 
-@media (width >= 40rem) {
-  .plass-grid {
-    --p-cols: var(--p-cols-sm, var(--p-cols-xs, 12));
+/*
+ * The measure, and the one thing a container draws.
+ *
+ * A slot rather than five `max-w-*` classes, because a responsive measure would
+ * otherwise be five classes times five rungs. It also takes any length a caller
+ * writes, which the class ladder could not: `maxWidth="72ch"` is a measure in
+ * characters, and a measure in characters is the one a paragraph actually
+ * wants.
+ */
+.plass-container {
+  --p-maxw: var(--p-maxw-xs, none);
+
+  max-width: var(--p-maxw);
+}
+
+@variant sm {
+  .plass-container {
+    --p-maxw: var(--p-maxw-sm, var(--p-maxw-xs, none));
+  }
+
+  .plass-grid,
+  .plass-flex {
     --p-gap-x: var(--p-gap-x-sm, var(--p-gap-x-xs, 0px));
     --p-gap-y: var(--p-gap-y-sm, var(--p-gap-y-xs, 0px));
   }
 
+  .plass-grid {
+    --p-cols: var(--p-cols-sm, var(--p-cols-xs, 12));
+  }
+
+  .plass-gallery {
+    --p-cols: var(--p-cols-sm, var(--p-cols-xs, 2));
+  }
+
+  .plass-flex {
+    --p-dir: var(--p-dir-sm, var(--p-dir-xs, row));
+  }
+
   .plass-grid-item {
     --p-span: var(--p-span-sm, var(--p-span-xs, var(--p-cols, 12)));
     --p-offset: var(--p-offset-sm, var(--p-offset-xs, 0));
   }
 }
 
-@media (width >= 48rem) {
-  .plass-grid {
-    --p-cols: var(--p-cols-md, var(--p-cols-sm, var(--p-cols-xs, 12)));
+@variant md {
+  .plass-container {
+    --p-maxw: var(--p-maxw-md, var(--p-maxw-sm, var(--p-maxw-xs, none)));
+  }
+
+  .plass-grid,
+  .plass-flex {
     --p-gap-x: var(--p-gap-x-md, var(--p-gap-x-sm, var(--p-gap-x-xs, 0px)));
     --p-gap-y: var(--p-gap-y-md, var(--p-gap-y-sm, var(--p-gap-y-xs, 0px)));
   }
 
+  .plass-grid {
+    --p-cols: var(--p-cols-md, var(--p-cols-sm, var(--p-cols-xs, 12)));
+  }
+
+  .plass-gallery {
+    --p-cols: var(--p-cols-md, var(--p-cols-sm, var(--p-cols-xs, 2)));
+  }
+
+  .plass-flex {
+    --p-dir: var(--p-dir-md, var(--p-dir-sm, var(--p-dir-xs, row)));
+  }
+
   .plass-grid-item {
     --p-span: var(--p-span-md, var(--p-span-sm, var(--p-span-xs, var(--p-cols, 12))));
     --p-offset: var(--p-offset-md, var(--p-offset-sm, var(--p-offset-xs, 0)));
   }
 }
 
-@media (width >= 64rem) {
-  .plass-grid {
-    --p-cols: var(--p-cols-lg, var(--p-cols-md, var(--p-cols-sm, var(--p-cols-xs, 12))));
+@variant lg {
+  .plass-container {
+    --p-maxw: var(--p-maxw-lg, var(--p-maxw-md, var(--p-maxw-sm, var(--p-maxw-xs, none))));
+  }
+
+  .plass-grid,
+  .plass-flex {
     --p-gap-x: var(--p-gap-x-lg, var(--p-gap-x-md, var(--p-gap-x-sm, var(--p-gap-x-xs, 0px))));
     --p-gap-y: var(--p-gap-y-lg, var(--p-gap-y-md, var(--p-gap-y-sm, var(--p-gap-y-xs, 0px))));
   }
 
+  .plass-grid {
+    --p-cols: var(--p-cols-lg, var(--p-cols-md, var(--p-cols-sm, var(--p-cols-xs, 12))));
+  }
+
+  .plass-gallery {
+    --p-cols: var(--p-cols-lg, var(--p-cols-md, var(--p-cols-sm, var(--p-cols-xs, 2))));
+  }
+
+  .plass-flex {
+    --p-dir: var(--p-dir-lg, var(--p-dir-md, var(--p-dir-sm, var(--p-dir-xs, row))));
+  }
+
   .plass-grid-item {
     --p-span: var(
       --p-span-lg,
@@ -895,12 +1343,16 @@
   }
 }
 
-@media (width >= 80rem) {
-  .plass-grid {
-    --p-cols: var(
-      --p-cols-xl,
-      var(--p-cols-lg, var(--p-cols-md, var(--p-cols-sm, var(--p-cols-xs, 12))))
+@variant xl {
+  .plass-container {
+    --p-maxw: var(
+      --p-maxw-xl,
+      var(--p-maxw-lg, var(--p-maxw-md, var(--p-maxw-sm, var(--p-maxw-xs, none))))
     );
+  }
+
+  .plass-grid,
+  .plass-flex {
     --p-gap-x: var(
       --p-gap-x-xl,
       var(--p-gap-x-lg, var(--p-gap-x-md, var(--p-gap-x-sm, var(--p-gap-x-xs, 0px))))
@@ -911,6 +1363,27 @@
     );
   }
 
+  .plass-grid {
+    --p-cols: var(
+      --p-cols-xl,
+      var(--p-cols-lg, var(--p-cols-md, var(--p-cols-sm, var(--p-cols-xs, 12))))
+    );
+  }
+
+  .plass-gallery {
+    --p-cols: var(
+      --p-cols-xl,
+      var(--p-cols-lg, var(--p-cols-md, var(--p-cols-sm, var(--p-cols-xs, 2))))
+    );
+  }
+
+  .plass-flex {
+    --p-dir: var(
+      --p-dir-xl,
+      var(--p-dir-lg, var(--p-dir-md, var(--p-dir-sm, var(--p-dir-xs, row))))
+    );
+  }
+
   .plass-grid-item {
     --p-span: var(
       --p-span-xl,
@@ -960,6 +1433,34 @@
   animation-play-state: var(--p-anim-state, running);
 }
 
+/*
+ * `timeline="view"`, and the whole of it.
+ *
+ * Two declarations give **every** keyframe in this file a scroll-linked mode:
+ * the effect stops being a thing that happens at a moment and becomes a thing
+ * that tracks where the element is in the scrollport. There is no component for
+ * it and there should not be, because there is nothing a component would add —
+ * an effect already knows what it draws, and this only changes what advances
+ * it.
+ *
+ * `@supports` is not optional. `animation-timeline` is progressively enhanced
+ * and an engine that does not know the property would drop these two lines but
+ * keep the `animation-duration` above, which is the *right* fallback: a clock
+ * plays the effect once and the content arrives. Handing an unsupported browser
+ * a timeline it cannot resolve is what would leave a blank page. Degraded is
+ * allowed; blank is not.
+ *
+ * The slots are only filled when a caller asks for `view`, so the default costs
+ * nothing at all: `auto` is what the property already resolves to, and writing
+ * it into a hundred inline styles would be a hundred copies of the same answer.
+ */
+@supports (animation-timeline: view()) {
+  .plass-anim {
+    animation-timeline: var(--p-anim-timeline, auto);
+    animation-range: var(--p-anim-range, normal);
+  }
+}
+
 @keyframes plass-anim-fade {
   from {
     opacity: var(--p-anim-opacity, 0);
@@ -990,6 +1491,36 @@
   animation-name: plass-anim-scale;
 }
 
+/*
+ * The one entrance that moves nothing and changes no colour.
+ *
+ * `clip-path` rather than a mask or an `overflow` box, and the choice is worth
+ * writing down because the alternatives look equivalent. A mask needs a
+ * gradient that has to be kept in step with the direction; an `overflow`
+ * wrapper puts a second element into the layout, which is exactly what an
+ * effect for something whose *position* is the information must not do. And
+ * `inset(0)` already means "nothing is cut off", so the to-state is the
+ * element's own natural one rather than a number that has to be chosen.
+ *
+ * The opacity slot defaults to `1` here and to `0` everywhere else in this
+ * file. A reveal is not a fade — the whole reason to reach for it is that the
+ * ink does not change — so fading is opt-in rather than something to turn off.
+ */
+@keyframes plass-anim-reveal {
+  from {
+    opacity: var(--p-anim-opacity, 1);
+    clip-path: var(--p-anim-clip, inset(0 100% 0 0));
+  }
+  to {
+    opacity: 1;
+    clip-path: inset(0);
+  }
+}
+
+.plass-anim-reveal {
+  animation-name: plass-anim-reveal;
+}
+
 @keyframes plass-anim-slide {
   from {
     opacity: var(--p-anim-opacity, 0);
@@ -1038,6 +1569,67 @@
   animation-name: plass-anim-blink;
 }
 
+/*
+ * A refusal.
+ *
+ * Three shudders either side of home and back to nothing, so an element that
+ * has been shaken is exactly where it was — this is the one effect in the file
+ * that a caller will run over content that is still being typed into, and a
+ * field left a few pixels off its label would be worse than the error it was
+ * reporting.
+ *
+ * Not one of the entrances, and not in `PlassAnimation`, for `plass-anim-float`'s
+ * reason: that union is the set of ways content can *arrive*, and a response to
+ * something a reader did is not an arrival.
+ */
+@keyframes plass-anim-shake {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+  15%,
+  45%,
+  75% {
+    translate: calc(var(--p-anim-x, 6px) * -1) 0;
+  }
+  30%,
+  60%,
+  90% {
+    translate: var(--p-anim-x, 6px) 0;
+  }
+}
+
+.plass-anim-shake {
+  animation-name: plass-anim-shake;
+}
+
+/*
+ * An endless drift.
+ *
+ * Symmetric like the blink above and for the same reason: however many times it
+ * runs it ends where it started, so a float that was stopped mid-cycle does not
+ * leave the element permanently a few pixels out of place.
+ *
+ * It is **not** one of the entrances, and it is not in `PlassAnimation` either.
+ * That union is the set of ways content can *arrive*, and every component
+ * importing the map that backs it pays for each row whether it uses it or not;
+ * a drift that never finishes is not an arrival and would be a row nothing else
+ * could ever want.
+ */
+@keyframes plass-anim-float {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+  50% {
+    translate: var(--p-anim-x, 0) var(--p-anim-y, 0);
+  }
+}
+
+.plass-anim-float {
+  animation-name: plass-anim-float;
+}
+
 /*
  * The light travelling around the outside of something.
  *
@@ -1249,6 +1841,499 @@
   animation: plass-anim-caret 1s step-end infinite;
 }
 
+/* ---------------------------------------------------------------------------
+ * Code blocks
+ *
+ * A `PlCodeBlock` is the one surface in the library that does **not** take the
+ * page's palette. Code is read against a background that was chosen for code,
+ * and a block that turned white because the page did would throw away the only
+ * thing a reader is using to tell a keyword from a string. So the sheet carries
+ * its own slots, `theme` picks which set fills them, and `auto` is the opt-in
+ * for a block that would rather follow the page.
+ *
+ * They are custom properties on the block rather than a stylesheet per theme
+ * for `internal/animate.ts`'s reason: nothing here is generated, the component only
+ * fills slots, and a thirteenth theme is a block of declarations rather than a
+ * second copy of the token map below. That is also why `theme` accepts any
+ * string: a consumer who writes `[data-code-theme='ours']` in their own CSS has
+ * a theme, with nothing to register and nothing to import.
+ *
+ * **Five of the slots are derived and are never written per theme.** `dim`,
+ * `rule` and `hover` are a fixed mix of the ground and the ink, and `mark` and
+ * `mark-edge` are the same for the highlighted-line background. A custom
+ * property resolves its `var()`s on the element that declares it, and every
+ * theme below declares its `fg` and `bg` on that same element — so the derived
+ * five follow whichever theme won without being restated 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.
+ *
+ * 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
+ * set light and desaturated on near-black. The pairs that have to stay apart
+ * are the ones that sit next to each other in real code — a string beside a
+ * number, a type beside a function name. The eight named themes below them are
+ * ports and keep their own published values, because a Dracula that had been
+ * re-solved would not be Dracula.
+ * ------------------------------------------------------------------------- */
+
+.plass-code {
+  /* The light set, which is also what `auto` and `light` start from. */
+  --p-code-bg: oklch(98.4% 0.003 262);
+  --p-code-fg: oklch(30% 0.016 262);
+
+  --p-code-comment: oklch(58% 0.022 262);
+  --p-code-keyword: oklch(48% 0.19 322);
+  --p-code-string: oklch(46% 0.12 148);
+  --p-code-number: oklch(50% 0.14 48);
+  --p-code-function: oklch(48% 0.17 264);
+  --p-code-type: oklch(45% 0.1 214);
+  --p-code-variable: oklch(45% 0.12 28);
+  --p-code-tag: oklch(48% 0.18 22);
+  --p-code-attr: oklch(47% 0.13 82);
+  --p-code-meta: oklch(52% 0.05 262);
+  --p-code-add: oklch(45% 0.14 152);
+  --p-code-del: oklch(48% 0.18 25);
+
+  /* The derived five. Declared once here and never in a theme: they are a mix
+     of that theme's own ground and ink, which resolves on this element. */
+  --p-code-dim: color-mix(in oklab, var(--p-code-fg) 58%, var(--p-code-bg));
+  --p-code-rule: color-mix(in oklab, var(--p-code-fg) 14%, transparent);
+  --p-code-hover: color-mix(in oklab, var(--p-code-fg) 9%, transparent);
+
+  /* A marked line is neutral rather than dyed with the page's accent family:
+     the block has deliberately refused the page's palette, and a primary-blue
+     wash over Dracula would be the one colour on it nobody chose. Mixed from
+     the theme's own ink, it is legible on all twelve. */
+  --p-code-mark: color-mix(in oklab, var(--p-code-fg) 10%, transparent);
+  --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'] {
+  --p-code-bg: oklch(19.5% 0.014 262);
+  --p-code-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);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root: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);
+
+    --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);
+  }
+}
+
+/*
+ * `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
+ * muted. It is what a block printed on paper, or read by someone who cannot
+ * separate the hues above, is left with — so it has to stay legible on its own
+ * rather than being a degraded copy of a colour theme.
+ */
+.plass-code[data-code-theme='mono'] {
+  --p-code-bg: color-mix(in oklab, var(--plass-fg) 4%, var(--plass-surface));
+  --p-code-fg: var(--plass-fg);
+
+  --p-code-comment: var(--plass-muted-fg);
+  --p-code-keyword: var(--plass-fg);
+  --p-code-string: var(--plass-muted-fg);
+  --p-code-number: var(--plass-muted-fg);
+  --p-code-function: var(--plass-fg);
+  --p-code-type: var(--plass-fg);
+  --p-code-variable: var(--plass-fg);
+  --p-code-tag: var(--plass-fg);
+  --p-code-attr: var(--plass-muted-fg);
+  --p-code-meta: var(--plass-muted-fg);
+  --p-code-add: var(--plass-fg);
+  --p-code-del: var(--plass-muted-fg);
+}
+
+.plass-code[data-code-theme='mono'] .hljs-keyword,
+.plass-code[data-code-theme='mono'] .hljs-selector-tag,
+.plass-code[data-code-theme='mono'] .hljs-title,
+.plass-code[data-code-theme='mono'] .hljs-tag,
+.plass-code[data-code-theme='mono'] .hljs-type,
+.plass-code[data-code-theme='mono'] .hljs-built_in {
+  font-weight: 600;
+}
+
+/*
+ * The eight ports.
+ *
+ * They exist because a code block is the one component whose colours a reader
+ * already has an opinion about: someone who writes in One Dark all day reads a
+ * Dracula block as a different product's documentation. The published values
+ * are kept exactly, in the hex they were published in, rather than re-solved
+ * into the oklch the rest of this file uses — a Dracula that had been corrected
+ * against Neba's own ground would be a theme nobody recognises and nobody
+ * asked for.
+ *
+ * Six dark and two light, which is the ratio of how they are used. Each is
+ * fourteen declarations, because the muted, the rule, the hover and the two
+ * marked-line slots are all derived from the two at the top of it.
+ */
+.plass-code[data-code-theme='one-dark'] {
+  --p-code-bg: #282c34;
+  --p-code-fg: #abb2bf;
+
+  --p-code-comment: #5c6370;
+  --p-code-keyword: #c678dd;
+  --p-code-string: #98c379;
+  --p-code-number: #d19a66;
+  --p-code-function: #61afef;
+  --p-code-type: #e5c07b;
+  --p-code-variable: #e06c75;
+  --p-code-tag: #e06c75;
+  --p-code-attr: #d19a66;
+  --p-code-meta: #56b6c2;
+  --p-code-add: #98c379;
+  --p-code-del: #e06c75;
+}
+
+.plass-code[data-code-theme='dracula'] {
+  --p-code-bg: #282a36;
+  --p-code-fg: #f8f8f2;
+
+  --p-code-comment: #6272a4;
+  --p-code-keyword: #ff79c6;
+  --p-code-string: #f1fa8c;
+  --p-code-number: #bd93f9;
+  --p-code-function: #50fa7b;
+  --p-code-type: #8be9fd;
+  --p-code-variable: #f8f8f2;
+  --p-code-tag: #ff79c6;
+  --p-code-attr: #50fa7b;
+  --p-code-meta: #6272a4;
+  --p-code-add: #50fa7b;
+  --p-code-del: #ff5555;
+}
+
+.plass-code[data-code-theme='monokai'] {
+  --p-code-bg: #272822;
+  --p-code-fg: #f8f8f2;
+
+  --p-code-comment: #75715e;
+  --p-code-keyword: #f92672;
+  --p-code-string: #e6db74;
+  --p-code-number: #ae81ff;
+  --p-code-function: #a6e22e;
+  --p-code-type: #66d9ef;
+  --p-code-variable: #f8f8f2;
+  --p-code-tag: #f92672;
+  --p-code-attr: #a6e22e;
+  --p-code-meta: #75715e;
+  --p-code-add: #a6e22e;
+  --p-code-del: #f92672;
+}
+
+.plass-code[data-code-theme='nord'] {
+  --p-code-bg: #2e3440;
+  --p-code-fg: #d8dee9;
+
+  --p-code-comment: #616e88;
+  --p-code-keyword: #81a1c1;
+  --p-code-string: #a3be8c;
+  --p-code-number: #b48ead;
+  --p-code-function: #88c0d0;
+  --p-code-type: #8fbcbb;
+  --p-code-variable: #d8dee9;
+  --p-code-tag: #81a1c1;
+  --p-code-attr: #8fbcbb;
+  --p-code-meta: #5e81ac;
+  --p-code-add: #a3be8c;
+  --p-code-del: #bf616a;
+}
+
+.plass-code[data-code-theme='night-owl'] {
+  --p-code-bg: #011627;
+  --p-code-fg: #d6deeb;
+
+  --p-code-comment: #637777;
+  --p-code-keyword: #c792ea;
+  --p-code-string: #ecc48d;
+  --p-code-number: #f78c6c;
+  --p-code-function: #82aaff;
+  --p-code-type: #ffcb8b;
+  --p-code-variable: #addb67;
+  --p-code-tag: #7fdbca;
+  --p-code-attr: #addb67;
+  --p-code-meta: #82aaff;
+  --p-code-add: #addb67;
+  --p-code-del: #ef5350;
+}
+
+.plass-code[data-code-theme='gruvbox'] {
+  --p-code-bg: #282828;
+  --p-code-fg: #ebdbb2;
+
+  --p-code-comment: #928374;
+  --p-code-keyword: #fb4934;
+  --p-code-string: #b8bb26;
+  --p-code-number: #d3869b;
+  --p-code-function: #b8bb26;
+  --p-code-type: #fabd2f;
+  --p-code-variable: #83a598;
+  --p-code-tag: #8ec07c;
+  --p-code-attr: #fabd2f;
+  --p-code-meta: #928374;
+  --p-code-add: #b8bb26;
+  --p-code-del: #fb4934;
+}
+
+.plass-code[data-code-theme='github'] {
+  --p-code-bg: #ffffff;
+  --p-code-fg: #24292f;
+
+  --p-code-comment: #6e7781;
+  --p-code-keyword: #cf222e;
+  --p-code-string: #0a3069;
+  --p-code-number: #0550ae;
+  --p-code-function: #8250df;
+  --p-code-type: #953800;
+  --p-code-variable: #953800;
+  --p-code-tag: #116329;
+  --p-code-attr: #0550ae;
+  --p-code-meta: #6e7781;
+  --p-code-add: #116329;
+  --p-code-del: #82071e;
+}
+
+.plass-code[data-code-theme='solarized-light'] {
+  --p-code-bg: #fdf6e3;
+  --p-code-fg: #657b83;
+
+  --p-code-comment: #93a1a1;
+  --p-code-keyword: #859900;
+  --p-code-string: #2aa198;
+  --p-code-number: #d33682;
+  --p-code-function: #268bd2;
+  --p-code-type: #b58900;
+  --p-code-variable: #268bd2;
+  --p-code-tag: #268bd2;
+  --p-code-attr: #b58900;
+  --p-code-meta: #cb4b16;
+  --p-code-add: #859900;
+  --p-code-del: #dc322f;
+}
+
+/*
+ * A line, and the two things in front of it that are not code.
+ *
+ * The number and the prompt are generated content off a `data-*` attribute, not
+ * text nodes, and that is the whole point: a `$` a reader drags across and
+ * pastes into their shell is a `$` their shell chokes on. Generated content
+ * cannot be selected, cannot be found by find-in-page and never reaches the
+ * clipboard — `user-select: none` is only *usually* true of all three. The
+ * `order` is what lets one pseudo-element sit in front of the other and both in
+ * front of the code, since `::after` would otherwise draw last.
+ *
+ * `min-height` keeps a blank line a line high. A flex row with nothing in it is
+ * zero pixels tall, and a code block that closed up its own paragraph breaks
+ * would be reflowing the reader's file.
+ */
+.plass-code-line {
+  display: flex;
+  min-height: 1.5em;
+  min-height: 1lh;
+  /*
+   * Transparent on every line, coloured on a marked one. A border rather than
+   * an inset `box-shadow` because `box-shadow` has no logical form and this one
+   * has to sit on the *start* edge in both writing directions; drawn on all of
+   * them so marking a line does not shift its text two pixels sideways.
+   */
+  border-inline-start: 2px solid transparent;
+}
+
+/*
+ * A marked line, and the reason its horizontal padding is on the line rather
+ * than on the box that scrolls it.
+ *
+ * A highlight that stopped at the padding would be a stripe floating inside the
+ * block instead of a marked row. With the padding here the line box *is* the
+ * row, so the tint reaches both edges — and because the lines sit in a
+ * `w-max min-w-full` block, every one of them reaches the same edge whether the
+ * code is narrower than the block or scrolled sideways within it.
+ */
+.plass-code-line[data-mark] {
+  background: var(--p-code-mark);
+  border-inline-start-color: var(--p-code-mark-edge);
+}
+
+.plass-code-line[data-line]::before {
+  content: attr(data-line);
+  order: 0;
+  flex: none;
+  width: var(--p-code-gutter, 2ch);
+  margin-inline-end: 1.25em;
+  text-align: end;
+  color: var(--p-code-dim);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.plass-code-line[data-prompt]::after {
+  content: attr(data-prompt);
+  order: 1;
+  flex: none;
+  margin-inline-end: 0.75em;
+  color: var(--p-code-dim);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.plass-code-line > code {
+  order: 2;
+  min-width: 0;
+  font: inherit;
+  background: none;
+  padding: 0;
+  white-space: pre;
+}
+
+.plass-code[data-code-wrap='true'] .plass-code-line > code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/*
+ * highlight.js's scopes, mapped onto the sixteen slots.
+ *
+ * Grouped by what a run *is* rather than by what highlight.js calls it, because
+ * the names are the union of a hundred and ninety grammars and half of them are
+ * one language's word for another language's idea — `selector-tag` and `tag`
+ * and `name` are all "the thing being declared". The point of the mapping is
+ * that the same idea gets the same colour whatever file it appears in.
+ */
+.plass-code .hljs-comment,
+.plass-code .hljs-quote {
+  color: var(--p-code-comment);
+  font-style: italic;
+}
+
+.plass-code .hljs-keyword,
+.plass-code .hljs-literal,
+.plass-code .hljs-selector-tag,
+.plass-code .hljs-operator,
+.plass-code .hljs-doctag,
+.plass-code .hljs-formula {
+  color: var(--p-code-keyword);
+}
+
+.plass-code .hljs-string,
+.plass-code .hljs-regexp,
+.plass-code .hljs-char,
+.plass-code .hljs-link {
+  color: var(--p-code-string);
+}
+
+.plass-code .hljs-number,
+.plass-code .hljs-symbol,
+.plass-code .hljs-bullet {
+  color: var(--p-code-number);
+}
+
+.plass-code .hljs-title,
+.plass-code .hljs-section,
+.plass-code .hljs-name,
+.plass-code .hljs-selector-id,
+.plass-code .hljs-selector-class {
+  color: var(--p-code-function);
+}
+
+.plass-code .hljs-type,
+.plass-code .hljs-built_in,
+.plass-code .hljs-class {
+  color: var(--p-code-type);
+}
+
+.plass-code .hljs-variable,
+.plass-code .hljs-template-variable,
+.plass-code .hljs-params,
+.plass-code .hljs-subst {
+  color: var(--p-code-variable);
+}
+
+.plass-code .hljs-tag,
+.plass-code .hljs-template-tag {
+  color: var(--p-code-tag);
+}
+
+.plass-code .hljs-attr,
+.plass-code .hljs-attribute,
+.plass-code .hljs-property,
+.plass-code .hljs-selector-attr,
+.plass-code .hljs-selector-pseudo {
+  color: var(--p-code-attr);
+}
+
+.plass-code .hljs-meta,
+.plass-code .hljs-punctuation {
+  color: var(--p-code-meta);
+}
+
+.plass-code .hljs-addition {
+  color: var(--p-code-add);
+}
+
+.plass-code .hljs-deletion {
+  color: var(--p-code-del);
+}
+
+.plass-code .hljs-emphasis {
+  font-style: italic;
+}
+
+.plass-code .hljs-strong {
+  font-weight: 700;
+}
+
+/* ---------------------------------------------------------------------------
+ * The gallery
+ *
+ * `PlGallery` rides the same `--p-cols` chain `PlGrid` does, one block above,
+ * with a default of two rather than twelve: a wall of photographs is counted in
+ * 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 that many lanes in
+ * JavaScript, because which lane an item lands in changes the DOM and no
+ * stylesheet can do that; and 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 {
+  grid-template-columns: repeat(var(--p-cols, 2), minmax(0, 1fr));
+}
+
 /* ---------------------------------------------------------------------------
  * Reduced motion
  *